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 any tool calls attached to the message, and shows a toolbar with copy, thumbs up/down, read-aloud, and regenerate actions. It mirrors React's CopilotChatAssistantMessage.

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()"
      (thumbsUp)="onThumbsUp($event)"
      (regenerate)="onRegenerate($event)"
    />
  `,
})
export class AssistantComponent {
  message = signal<AssistantMessage>({
    id: "1",
    role: "assistant",
    content: "Hello, how can I help?",
  });

  onThumbsUp(event: { message: AssistantMessage }) {
    console.log("liked", event.message.id);
  }

  onRegenerate(event: { message: AssistantMessage }) {
    console.log("regenerate", event.message.id);
  }
}

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. Extra CSS classes merged onto the message container.

Slot class inputs

Each of these passes extra CSS classes to the corresponding default sub-component.

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

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 the thumbs-up button is clicked. The payload is `{ message: AssistantMessage }`. Emitted when the thumbs-down button is clicked. The payload is `{ message: AssistantMessage }`. Emitted when the read-aloud button is clicked. The payload is `{ message: AssistantMessage }`. Emitted when the regenerate button 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

} /> } /> } />