CopilotChatView.mdx

title	CopilotChatView
description	Angular standalone component that renders the chat layout without agent wiring

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

The messages to render in the feed. When empty (and no explicit thread is selected), the welcome screen is shown instead. Current agent state passed to message-list child content. 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

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

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. 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. Component class used for assistant messages. Template used for assistant messages. Takes precedence over `assistantMessageComponent`. CSS classes forwarded to assistant messages. Component class used for reasoning messages. Template used for reasoning messages. Takes precedence over `reasoningMessageComponent`. CSS classes forwarded to reasoning messages. Component rendered after the message list and before the cursor. Template rendered after the message list. Takes precedence over `messageViewChildrenComponent`. CSS classes forwarded to the message-list children slot. 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. `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. 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 assistant-message actions 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. The current release declares `userMessageCopy` and `userMessageEdit`, but the default message view does not emit them.

Content projection

CopilotChatView supports one active projected template named customLayout.

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

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);
  }
}

Related