CopilotChatAssistantMessage

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

Slot class inputs

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

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.

Outputs

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.

<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