CopilotChatUserMessage

Overview

CopilotChatUserMessage renders one user message. It shows any image or file attachments, renders the message text through a renderer, and shows a toolbar with copy and edit actions. When the message belongs to a set of regenerated branches, a branch navigation control lets you step between them. It mirrors React's CopilotChatUserMessage.

The copy and edit buttons always render. The branch navigation control renders only when numberOfBranches is greater than 1.

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

Usage

Import the component class and use its copilot-chat-user-message selector.

import { Component, signal } from "@angular/core";
import { CopilotChatUserMessage } from "@copilotkit/angular";
import type { UserMessage } from "@ag-ui/core";

@Component({
  selector: "app-user-message",
  standalone: true,
  imports: [CopilotChatUserMessage],
  template: `
    <copilot-chat-user-message
      [message]="message()"
      (editMessage)="onEdit($event)"
    />
  `,
})
export class UserMessageComponent {
  message = signal<UserMessage>({
    id: "1",
    role: "user",
    content: "What is the weather today?",
  });

  onEdit(event: { message: UserMessage }) {
    console.log("edit", event.message.id);
  }
}

Inputs

<PropertyReference name="message" type="UserMessage"> The user message to render. Its content is flattened to text for the renderer, and any media parts are shown as attachments above it. </PropertyReference> <PropertyReference name="branchIndex" type="number" default="0"> Zero-based index of the currently shown branch. Used by the branch navigation control. </PropertyReference> <PropertyReference name="numberOfBranches" type="number" default="1"> Total number of regenerated branches for this message. Branch navigation renders only when this is greater than 1. </PropertyReference> <PropertyReference name="additionalToolbarItems" type="TemplateRef<any>"> A template prepended to the default toolbar, before the copy and edit 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="messageRendererClass" type="string"> Classes for the default message 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="editButtonClass" type="string"> Classes for the default edit button. </PropertyReference> <PropertyReference name="branchNavigationClass" type="string"> Classes for the default branch navigation control. </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="messageRendererComponent" type="Type<any>"> Replaces the default message 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="editButtonComponent" type="Type<any>"> Replaces the default edit button. </PropertyReference> <PropertyReference name="branchNavigationComponent" type="Type<any>"> Replaces the default branch navigation control. </PropertyReference>

Outputs

<PropertyReference name="editMessage" type="CopilotChatUserMessageOnEditMessageProps"> Emitted when the edit button is clicked. The payload is `{ message: UserMessage }`. </PropertyReference> <PropertyReference name="switchToBranch" type="CopilotChatUserMessageOnSwitchToBranchProps"> Emitted when a different branch is selected through the branch navigation control. The payload is `{ message: UserMessage; branchIndex: number; numberOfBranches: number }`. </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
`messageRenderer`	`MessageRendererContext` (`{ content: string }`)	The message text renderer
`toolbar`	`UserMessageToolbarContext` (`{ children?: any }`)	The whole toolbar
`copyButton`	`CopyButtonContext` (`{ content?: string; copied?: boolean }`)	The copy button
`editButton`	`EditButtonContext` (empty; click via outputs)	The edit button
`branchNavigation`	`BranchNavigationContext` (`{ currentBranch, numberOfBranches, onSwitchToBranch?, message }`)	The branch navigation control

html

<copilot-chat-user-message [message]="message()">
  <ng-template #messageRenderer let-content="content">
    <p class="my-user-text">{{ content }}</p>
  </ng-template>
</copilot-chat-user-message>