CopilotChatInput

Overview

CopilotChatInput is the input area of the chat. It renders the textarea, the send button, an optional tools menu, an add-file button, and the audio transcription controls. It has three modes: "input" (the default textarea), "transcribe" (records audio and shows transcription controls), and "processing" (disables the textarea and send button while the agent runs).

This is the Angular equivalent of React's <CopilotChatInput>. When rendered inside CopilotChat or CopilotChatView, it reads the surrounding ChatState (through injectChatState) and wires submission, value changes, transcription, and file uploads to it automatically. Its outputs fire in addition to that built-in behavior, so you can observe interactions without disabling them.

Usage

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

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

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatInput],
  template: `
    <copilot-chat-input
      [autoFocus]="true"
      (submitMessage)="onSubmit($event)"
    />
  `,
})
export class ChatComponent {
  onSubmit(value: string) {
    console.log("user submitted:", value);
  }
}

Inputs

Behavior inputs

Textarea inputs

Slot override inputs

Each interactive piece can be replaced with a component class (*Component) and styled with a class (*Class). Templates for the same slots are read from content projection (see Slots below).

Outputs

These events fire in addition to the input's built-in handling, so you can observe interactions without replacing default behavior.

Slots

For deep customization, provide named <ng-template> elements inside <copilot-chat-input>. Each is read with contentChild and takes precedence over the corresponding *Component input. The send button and toolbar templates receive a typed context.

Tools menu example

import { Component } from "@angular/core";
import { CopilotChatInput } from "@copilotkit/angular";
import type { ToolsMenuItem } from "@copilotkit/angular";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatInput],
  template: `
    <copilot-chat-input [toolsMenu]="toolsMenu" />
  `,
})
export class ChatComponent {
  toolsMenu: (ToolsMenuItem | "-")[] = [
    { label: "Summarize", action: () => this.summarize() },
    "-",
    { label: "Translate", action: () => this.translate() },
  ];

  summarize() {}
  translate() {}
}

Related