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.

CopilotChat wires the agent, messages, running state, suggestions, and submission, then renders CopilotChatView. Use CopilotChatView directly when you manage those values and handlers, or when you need full control over the layout and its slots.

The active slot inputs accept a component class (*Component) or an Angular template (*Template). The template takes precedence when both are set.

Usage

CopilotChatView is a standalone component with the selector copilot-chat-view. Its default input needs a ChatState provider. The example below supplies one.

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

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

  submitInput(value: string) {
    // Send the message through your chat state owner.
  }

  changeInput(value: string) {
    this.inputValue.set(value);
  }
}

Inputs

Core inputs

<PropertyReference name="messages" type="Message[]" default="[]"> The messages to render in the feed. When empty (and no explicit thread is selected), the welcome screen is shown instead. </PropertyReference> <PropertyReference name="state" type="unknown" default="{}"> Current agent state passed to message-list child content. </PropertyReference> <PropertyReference name="agentId" type="string"> ID of the agent whose messages are being rendered. Forwarded to the scroll view for per-agent rendering. </PropertyReference> <PropertyReference name="autoScroll" type="boolean" default="true"> Whether the feed sticks to the bottom as new messages stream in. </PropertyReference> <PropertyReference name="showCursor" type="boolean" default="false"> Whether to show a streaming cursor at the end of the feed while the agent is responding. </PropertyReference> <PropertyReference name="hasExplicitThreadId" type="boolean" default="false"> Whether an explicit thread id was provided. When true, the welcome screen is suppressed even with no messages (the conversation is being resumed). </PropertyReference>

Slot inputs

The view forwards message, input, scroll-button, input-container, feather, and disclaimer slots.

<PropertyReference name="messageViewComponent" type="Type<any>"> Component class to render the message list. Pair with `messageViewClass` to style it, or use `messageViewTemplate` for a template. </PropertyReference> <PropertyReference name="messageViewTemplate" type="TemplateRef<any>"> Template to render the message list. </PropertyReference> <PropertyReference name="messageViewClass" type="string"> Class applied to the message list. </PropertyReference> <Callout type="warn"> The current release declares `scrollViewComponent`, `scrollViewTemplate`, and `scrollViewClass`, but the default layout always uses its built-in scroll view. Use `customLayout` when you need to replace it. </Callout> <PropertyReference name="assistantMessageComponent" type="Type<any>"> Component class used for assistant messages. </PropertyReference> <PropertyReference name="assistantMessageTemplate" type="TemplateRef<any>"> Template used for assistant messages. Takes precedence over `assistantMessageComponent`. </PropertyReference> <PropertyReference name="assistantMessageClass" type="string"> CSS classes forwarded to assistant messages. </PropertyReference> <PropertyReference name="reasoningMessageComponent" type="Type<any>"> Component class used for reasoning messages. </PropertyReference> <PropertyReference name="reasoningMessageTemplate" type="TemplateRef<any>"> Template used for reasoning messages. Takes precedence over `reasoningMessageComponent`. </PropertyReference> <PropertyReference name="reasoningMessageClass" type="string"> CSS classes forwarded to reasoning messages. </PropertyReference> <PropertyReference name="messageViewChildrenComponent" type="Type<any>"> Component rendered after the message list and before the cursor. </PropertyReference> <PropertyReference name="messageViewChildrenTemplate" type="TemplateRef<any>"> Template rendered after the message list. Takes precedence over `messageViewChildrenComponent`. </PropertyReference> <PropertyReference name="messageViewChildrenClass" type="string"> CSS classes forwarded to the message-list children slot. </PropertyReference> <PropertyReference name="scrollToBottomButtonComponent" type="Type<any>"> Component class for the scroll-to-bottom button. </PropertyReference> <PropertyReference name="scrollToBottomButtonTemplate" type="TemplateRef<any>"> Template for the scroll-to-bottom button. </PropertyReference> <PropertyReference name="scrollToBottomButtonClass" type="string"> Class applied to the scroll-to-bottom button. </PropertyReference> <PropertyReference name="inputComponent" type="Type<any>"> Component class for the chat input. Defaults to [`CopilotChatInput`](/reference/angular/components/CopilotChatInput). </PropertyReference> <PropertyReference name="inputTemplate" type="TemplateRef<any>"> Template for the chat input. </PropertyReference> <PropertyReference name="inputContainerComponent" type="Type<any>"> Component class for the container that wraps the input and disclaimer. </PropertyReference> <PropertyReference name="inputContainerTemplate" type="TemplateRef<any>"> Template for the input container. </PropertyReference> <PropertyReference name="inputContainerClass" type="string"> Class applied to the input container. </PropertyReference> <PropertyReference name="featherComponent" type="Type<any>"> Component class for the feather (fade) effect above the input. </PropertyReference> <PropertyReference name="featherTemplate" type="TemplateRef<any>"> Template for the feather effect. </PropertyReference> <Callout type="warn"> `featherClass` is declared but the current release does not pass its string value to the feather slot. Use a feather component or template to style that region. </Callout> <PropertyReference name="disclaimerComponent" type="Type<any>"> Component class for the disclaimer shown beneath the input. </PropertyReference> <PropertyReference name="disclaimerTemplate" type="TemplateRef<any>"> Template for the disclaimer. </PropertyReference> <PropertyReference name="disclaimerClass" type="string"> Class applied to the disclaimer. </PropertyReference> <PropertyReference name="disclaimerText" type="string"> Text content for the disclaimer. </PropertyReference>

Outputs

CopilotChatView bubbles assistant-message actions from the message feed. Each payload is an object with the relevant message.

<PropertyReference name="assistantMessageThumbsUp" type="{ message: Message }"> Emitted when the thumbs-up action is triggered on an assistant message. </PropertyReference> <PropertyReference name="assistantMessageThumbsDown" type="{ message: Message }"> Emitted when the thumbs-down action is triggered on an assistant message. </PropertyReference> <PropertyReference name="assistantMessageReadAloud" type="{ message: Message }"> Emitted when the read-aloud action is triggered on an assistant message. </PropertyReference> <PropertyReference name="assistantMessageRegenerate" type="{ message: Message }"> Emitted when the regenerate action is triggered on an assistant message. </PropertyReference> <Callout type="warn"> The current release declares `userMessageCopy` and `userMessageEdit`, but the default message view does not emit them. </Callout>

Content projection

CopilotChatView supports one active projected template named customLayout.

<PropertyReference name="customLayout" type="TemplateRef<CopilotChatViewLayoutContext>"> Replaces the entire default layout. The template has named context values for the configured `messageView`, `input`, `scrollView`, `scrollToBottomButton`, `feather`, `inputContainer`, and `disclaimer` slots. A value can be undefined when you did not configure that slot. </PropertyReference> <Callout type="warn"> The class declares projected templates for input buttons and assistant-message parts, but the current release does not forward them. Configure those parts through `inputComponent`, the message slot inputs, or a custom layout. </Callout>

Custom layout example

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

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatInput, CopilotChatMessageView, CopilotChatView],
  providers: [
    {
      provide: ChatState,
      useExisting: forwardRef(() => ChatComponent),
    },
  ],
  template: `
    <copilot-chat-view [messages]="messages()">
      <ng-template #customLayout>
        <div class="my-layout">
          <copilot-chat-message-view [messages]="messages()" />
          <copilot-chat-input />
        </div>
      </ng-template>
    </copilot-chat-view>
  `,
})
export class ChatComponent extends ChatState {
  readonly messages = signal<Message[]>([]);
  readonly inputValue = signal("");

  submitInput(value: string) {
    // Send the message through your chat state owner.
  }

  changeInput(value: string) {
    this.inputValue.set(value);
  }
}