Skip to content

CopilotChatUserMessage.mdx

Latest commit

 

History

History
168 lines (130 loc) · 6.2 KB

CopilotChatUserMessage.mdx

File metadata and controls

168 lines (130 loc) · 6.2 KB
title CopilotChatUserMessage
description Angular standalone component that renders a single user message with attachments, copy and edit actions, and branch navigation.

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

The user message to render. Its content is flattened to text for the renderer, and any media parts are shown as attachments above it. Zero-based index of the currently shown branch. Used by the branch navigation control. Total number of regenerated branches for this message. Branch navigation renders only when this is greater than 1. A template prepended to the default toolbar, before the copy and edit 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 message renderer. Classes for the default toolbar. Classes for the default copy button. Classes for the default edit button. Classes for the default branch navigation control.

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 message renderer. Replaces the default toolbar. Replaces the default copy button. Replaces the default edit button. Replaces the default branch navigation control.

Outputs

Emitted when the edit button is clicked. The payload is `{ message: UserMessage }`. Emitted when a different branch is selected through the branch navigation control. The payload is `{ message: UserMessage; branchIndex: number; numberOfBranches: number }`.

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 
<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

} /> } /> } />