CopilotChatView.mdx

title	CopilotChatView
description	Angular standalone component that renders the chat layout (message feed and input) without agent wiring, the @copilotkit/angular equivalent of React's CopilotChatView

Overview

CopilotChatView is the layout-only chat view. It renders the message feed, the input container, the feather effect, the disclaimer, the suggestion pills, and a welcome screen when there are no messages. It does not wire an agent on its own. You pass it messages and read interaction handlers from the surrounding ChatState.

This is the Angular equivalent of React's <CopilotChatView>. Contrast it with CopilotChat: CopilotChat wires the agent (resolving messages, running state, suggestions, and submission) and renders CopilotChatView underneath, while CopilotChatView is presentational. Use it directly when you manage messages and handlers yourself, or when you need deep control over the layout and its slots.

Almost every visual piece is a slot. Each slot accepts either a component class (*Component) or an Angular template (*Template), plus an optional class string (*Class).

Usage

CopilotChatView is a standalone component with the selector copilot-chat-view. Import the class into your component's imports array and use the element in the template.

import { Component, signal } from "@angular/core";
import { CopilotChatView } from "@copilotkit/angular";
import type { Message } from "@ag-ui/client";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatView],
  template: `
    <copilot-chat-view [messages]="messages()" [autoScroll]="true" />
  `,
})
export class ChatComponent {
  messages = signal<Message[]>([]);
}

Inputs

Core inputs

The messages to render in the feed. When empty (and no explicit thread is selected), the welcome screen is shown instead. ID of the agent whose messages are being rendered. Forwarded to the scroll view for per-agent rendering. Whether the feed sticks to the bottom as new messages stream in. Whether to show a streaming cursor at the end of the feed while the agent is responding. Whether an explicit thread id was provided. When true, the welcome screen is suppressed even with no messages (the conversation is being resumed).

Slot inputs

Each visual region exposes a component override, a template override, and a class. The template takes precedence over the component when both are set.

Component class to render the message list. Pair with `messageViewClass` to style it, or use `messageViewTemplate` for a template. Template to render the message list. Class applied to the message list. Component class for the scrolling container around the message list. Template for the scrolling container. Class applied to the scrolling container. Component class for the scroll-to-bottom button. Template for the scroll-to-bottom button. Class applied to the scroll-to-bottom button. Component class for the chat input. Defaults to [`CopilotChatInput`](/reference/angular/components/CopilotChatInput). Template for the chat input. Component class for the container that wraps the input and disclaimer. Template for the input container. Class applied to the input container. Component class for the feather (fade) effect above the input. Template for the feather effect. Class applied to the feather effect. Component class for the disclaimer shown beneath the input. Template for the disclaimer. Class applied to the disclaimer. Text content for the disclaimer.

Outputs

CopilotChatView bubbles message-level interaction events from the message feed. Each payload is an object with the relevant message.

Emitted when the thumbs-up action is triggered on an assistant message. Emitted when the thumbs-down action is triggered on an assistant message. Emitted when the read-aloud action is triggered on an assistant message. Emitted when the regenerate action is triggered on an assistant message. Emitted when the copy action is triggered on a user message. Emitted when the edit action is triggered on a user message.

Content projection

Beyond the slot inputs, CopilotChatView reads named templates from content projection (via @ContentChild) for deep customization. Provide them as <ng-template> elements with the matching reference variable inside <copilot-chat-view>.

Replaces the entire default layout (render-prop pattern). Receives a context object with the resolved slots: `messageView`, `input`, `scrollView`, `scrollToBottomButton`, `feather`, `inputContainer`, and `disclaimer`. Custom send button passed down to the input. Custom input toolbar. Custom textarea for the input. Custom audio recorder for transcription mode. Custom markdown renderer for assistant messages. Custom thumbs-up button on assistant messages. Custom thumbs-down button on assistant messages. Custom read-aloud button on assistant messages. Custom regenerate button on assistant messages.

Custom layout example

import { Component, signal } from "@angular/core";
import { CopilotChatView } from "@copilotkit/angular";
import type { Message } from "@ag-ui/client";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatView],
  template: `
    <copilot-chat-view [messages]="messages()">
      <ng-template #customLayout let-ctx>
        <div class="my-layout">
          <ng-container [ngTemplateOutlet]="ctx.messageView" />
          <ng-container [ngTemplateOutlet]="ctx.input" />
        </div>
      </ng-template>
    </copilot-chat-view>
  `,
})
export class ChatComponent {
  messages = signal<Message[]>([]);
}

Related