---
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`](/reference/angular/components/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](https://angular.dev/guide/signals).
## Usage
Import the component class and use its `copilot-chat-assistant-message` selector. The `message` input is required.
```ts title="src/app/assistant.component.ts"
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: `
`,
})
export class AssistantComponent {
message = signal({
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 |
```html title="src/app/assistant.component.html"
{{ content }}
```
## Related
}
/>
}
/>
}
/>