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

<PropertyReference name="message" type="AssistantMessage" required> The assistant message to render. Its `content` is passed to the markdown renderer and its `toolCalls` drive the tool calls view. </PropertyReference> <PropertyReference name="messages" type="Message[]" default="[]"> The surrounding message list. Forwarded to the tool calls view so a tool render can read prior context. </PropertyReference> <PropertyReference name="agentId" type="string"> ID of the agent that produced the message. Forwarded to the tool calls view for resolving the matching tool renderer. </PropertyReference> <PropertyReference name="isLoading" type="boolean" default="false"> Whether the agent is currently streaming. Forwarded to the tool calls view. </PropertyReference> <PropertyReference name="toolbarVisible" type="boolean" default="true"> Whether the toolbar may be shown. Even when `true`, the toolbar only renders if the message has non-empty text content. </PropertyReference> <PropertyReference name="additionalToolbarItems" type="TemplateRef<any>"> A template appended to the end of the default toolbar, after the built-in buttons. </PropertyReference> <PropertyReference name="inputClass" type="string"> Extra CSS classes merged onto the message container. </PropertyReference>

Slot class inputs

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

<PropertyReference name="markdownRendererClass" type="string"> Classes for the default markdown renderer. </PropertyReference> <PropertyReference name="toolbarClass" type="string"> Classes for the default toolbar. </PropertyReference> <PropertyReference name="copyButtonClass" type="string"> Classes for the default copy button. </PropertyReference> <PropertyReference name="thumbsUpButtonClass" type="string"> Classes for the default thumbs-up button. </PropertyReference> <PropertyReference name="thumbsDownButtonClass" type="string"> Classes for the default thumbs-down button. </PropertyReference> <PropertyReference name="readAloudButtonClass" type="string"> Classes for the default read-aloud button. </PropertyReference> <PropertyReference name="regenerateButtonClass" type="string"> Classes for the default regenerate button. </PropertyReference> <PropertyReference name="toolCallsViewClass" type="string"> Classes for the default tool calls view. </PropertyReference>

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.

<PropertyReference name="markdownRendererComponent" type="Type<any>"> Replaces the default markdown renderer. </PropertyReference> <PropertyReference name="toolbarComponent" type="Type<any>"> Replaces the default toolbar. </PropertyReference> <PropertyReference name="copyButtonComponent" type="Type<any>"> Replaces the default copy button. </PropertyReference> <PropertyReference name="thumbsUpButtonComponent" type="Type<any>"> Replaces the default thumbs-up button. </PropertyReference> <PropertyReference name="thumbsDownButtonComponent" type="Type<any>"> Replaces the default thumbs-down button. </PropertyReference> <PropertyReference name="readAloudButtonComponent" type="Type<any>"> Replaces the default read-aloud button. </PropertyReference> <PropertyReference name="regenerateButtonComponent" type="Type<any>"> Replaces the default regenerate button. </PropertyReference> <PropertyReference name="toolCallsViewComponent" type="Type<any>"> Replaces the default tool calls view. </PropertyReference>

Outputs

<PropertyReference name="thumbsUp" type="CopilotChatAssistantMessageOnThumbsUpProps"> Emitted when the thumbs-up button is clicked. The payload is `{ message: AssistantMessage }`. </PropertyReference> <PropertyReference name="thumbsDown" type="CopilotChatAssistantMessageOnThumbsDownProps"> Emitted when the thumbs-down button is clicked. The payload is `{ message: AssistantMessage }`. </PropertyReference> <PropertyReference name="readAloud" type="CopilotChatAssistantMessageOnReadAloudProps"> Emitted when the read-aloud button is clicked. The payload is `{ message: AssistantMessage }`. </PropertyReference> <PropertyReference name="regenerate" type="CopilotChatAssistantMessageOnRegenerateProps"> Emitted when the regenerate button is clicked. The payload is `{ message: AssistantMessage }`. </PropertyReference>

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

html

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