CopilotChatAssistantMessage.mdx

title	CopilotChatAssistantMessage
description	Angular standalone component that renders a single assistant message with markdown content, tool calls, and a toolbar of copy, thumbs, read-aloud, and regenerate actions.

Overview

CopilotChatAssistantMessage renders one assistant message. It shows the message content through a markdown renderer, renders attached tool calls, and shows a toolbar with copy, thumbs up/down, read-aloud, and regenerate actions.

The toolbar appears only when the message has non-empty text content. The copy button always renders; the thumbs up and thumbs down buttons render when you provide a custom slot for them or when a thumbs handler is available from a surrounding CopilotChatView. The read-aloud and regenerate buttons render only when you provide a custom slot for them.

The component is standalone and uses OnPush change detection. Reactive inputs are Angular signals.

Usage

Import the component class and use its copilot-chat-assistant-message selector. The message input is required.

import { Component, signal } from "@angular/core";
import { CopilotChatAssistantMessage } from "@copilotkit/angular";
import type { AssistantMessage } from "@ag-ui/client";

@Component({
  selector: "app-assistant",
  standalone: true,
  imports: [CopilotChatAssistantMessage],
  template: `
    <copilot-chat-assistant-message [message]="message()" />
  `,
})
export class AssistantComponent {
  message = signal<AssistantMessage>({
    id: "1",
    role: "assistant",
    content: "Hello, how can I help?",
  });
}

Inputs

The assistant message to render. Its `content` is passed to the markdown renderer and its `toolCalls` drive the tool calls view. The surrounding message list. Forwarded to the tool calls view so a tool render can read prior context. ID of the agent that produced the message. Forwarded to the tool calls view for resolving the matching tool renderer. Whether the agent is currently streaming. Forwarded to the tool calls view. Whether the toolbar may be shown. Even when `true`, the toolbar only renders if the message has non-empty text content. A template appended to the end of the default toolbar, after the built-in buttons.

Slot class inputs

The current release applies markdownRendererClass, toolbarClass, and copyButtonClass to their default parts.

Classes for the default markdown renderer. Classes for the default toolbar. Classes for the default copy button. `inputClass`, the thumbs, read-aloud, regenerate class inputs, and `toolCallsViewClass` are declared but do not affect rendering in the current release. Use component or template overrides for those parts.

Slot component inputs

Each of these replaces the corresponding default sub-component with a component class of your own. Content-projection templates (see below) take precedence over these.

Replaces the default markdown renderer. Replaces the default toolbar. Replaces the default copy button. Replaces the default thumbs-up button. Replaces the default thumbs-down button. Replaces the default read-aloud button. Replaces the default regenerate button. Replaces the default tool calls view.

Outputs

Emitted when a configured thumbs-up component or template is clicked. The payload is `{ message: AssistantMessage }`. Emitted when a configured thumbs-down component or template is clicked. The payload is `{ message: AssistantMessage }`. Emitted when a configured read-aloud component or template is clicked. The payload is `{ message: AssistantMessage }`. Emitted when a configured regenerate component or template is clicked. The payload is `{ message: AssistantMessage }`.

Slots and content projection

You can override any piece of the message by projecting a named template. A projected template takes precedence over the matching *Component input. Each template receives a typed context object.

Template name	Context type	Replaces
markdownRenderer	AssistantMessageMarkdownRendererContext ({ content: string })	The markdown content renderer
toolbar	AssistantMessageToolbarContext ({ children?: any })	The whole toolbar
copyButton	AssistantMessageCopyButtonContext ({ content?: string })	The copy button
thumbsUpButton	ThumbsUpButtonContext (empty; click via outputs)	The thumbs-up button
thumbsDownButton	ThumbsDownButtonContext (empty; click via outputs)	The thumbs-down button
readAloudButton	ReadAloudButtonContext (empty; click via outputs)	The read-aloud button
regenerateButton	RegenerateButtonContext (empty; click via outputs)	The regenerate button
toolCallsView	any	The tool calls view

<copilot-chat-assistant-message [message]="message()">
  <ng-template #markdownRenderer let-content="content">
    <article class="my-markdown">{{ content }}</article>
  </ng-template>
</copilot-chat-assistant-message>

Related

} /> } /> } />