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

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

Related