Skip to content

CopilotChat.mdx

Latest commit

 

History

History
83 lines (61 loc) · 4.79 KB

CopilotChat.mdx

File metadata and controls

83 lines (61 loc) · 4.79 KB
title CopilotChat
description Angular standalone component that wires an agent to the chat UI, the @copilotkit/angular equivalent of React's CopilotChat

Overview

CopilotChat is the all-in-one chat component. It wires an agent into CopilotChatView so you get a working chat interface with one selector. It resolves the agent through injectAgentStore, subscribes to that agent's messages and running state, manages suggestions, tracks the input value, handles audio transcription, wires file attachments, and clears the input after each message is sent.

This is the Angular equivalent of React's <CopilotChat>. Where React composes the agent wiring in the component, Angular CopilotChat extends the internal ChatState and provides itself as the ChatState for the view and input beneath it. You usually only need to point it at an agent.

For the layout without the agent wiring, use CopilotChatView directly.

Usage

CopilotChat is a standalone component with the selector copilot-chat. Import the class into your component's imports array and use the element in the template. The chat reads its configuration from provideCopilotKit, so the provider must be in scope.

import { Component } from "@angular/core";
import { CopilotChat } from "@copilotkit/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CopilotChat],
  template: `<copilot-chat />`,
})
export class AppComponent {}

Remember to import the stylesheet once in your global styles:

@import "@copilotkit/angular/styles.css";

Inputs

ID of the agent to connect. Must match an agent configured in [`provideCopilotKit`](/reference/angular/functions/provideCopilotKit). When omitted, the default agent is used. ID of the conversation thread. Pass a specific thread id to resume an existing conversation. When omitted, a thread id is minted locally and the agent connects on first run. Setting an explicit `threadId` also makes the chat attempt to connect to (resume) that thread on the agent. Configuration for file attachments. Bound through the `attachments` alias (the underlying input is `attachmentsConfig`). When `enabled` is true, the add-file action and drag-and-drop are turned on and the chat manages the attachment queue automatically. A custom Angular component class to render in place of the default [`CopilotChatInput`](/reference/angular/components/CopilotChatInput). Forwarded to the underlying [`CopilotChatView`](/reference/angular/components/CopilotChatView).

Outputs

CopilotChat does not declare its own outputs. It handles message submission, suggestion selection, and transcription internally through the ChatState it provides to the input and view. To observe lower-level interactions, render a custom input via inputComponent (or use CopilotChatInput directly), which exposes outputs such as submitMessage and the transcription events.

Customization

CopilotChat keeps the layout simple and delegates slot customization to the view it renders. Swap the input area with the inputComponent input, or compose the layout yourself with CopilotChatView, which exposes the full set of slot inputs and content-projection templates (message view, scroll view, feather, disclaimer, input container, and the input toolbar buttons).

To customize the text strings (input placeholder, welcome message, toolbar labels, disclaimer), provide labels through provideCopilotChatLabels. The chat reads them through injectChatLabels internally.

Related