CopilotChatInput.mdx

title	CopilotChatInput
description	Angular standalone component for the chat input area: textarea, send button, tools menu, file upload, and audio transcription, the @copilotkit/angular equivalent of React's 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

Initial input mode. The component manages transitions between these modes during audio transcription. When omitted, the input starts in `"input"` mode. Items for the input's tools menu. Each `ToolsMenuItem` has a `label` and either an `action` callback or nested `items`. Use the string `"-"` for a separator. When empty, the tools menu is hidden unless the add-file action is available. Whether the textarea focuses automatically after the view initializes. Defaults to `true` when omitted. Controlled value for the textarea. When provided, it takes precedence over the value held in the surrounding `ChatState`. Class applied to the internal input wrapper. Prefer the host `class` for styling the component itself. A template rendered after the leading toolbar items, for adding your own controls to the toolbar.

Textarea inputs

Class applied to the default textarea. Maximum number of rows the textarea grows to before scrolling. Placeholder text for the textarea.

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

Component class for the send button. Style the default with `sendButtonClass`. Component class for the toolbar. Style the default with `toolbarClass`. Component class for the textarea. Component class for the audio recorder shown in transcribe mode. Style the default with `audioRecorderClass`. Component class for the start-transcribe button. Style the default with `startTranscribeButtonClass`. Component class for the cancel-transcribe button. Style the default with `cancelTranscribeButtonClass`. Component class for the finish-transcribe button. Style the default with `finishTranscribeButtonClass`. Component class for the add-file button. Style the default with `addFileButtonClass`. Component class for the tools menu button. Style the default with `toolsButtonClass`.

Outputs

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

Emitted with the trimmed message text when the user sends a message (Enter without Shift, or the send button). Emitted whenever the textarea value changes. Emitted when audio transcription starts (the input switches to transcribe mode). Emitted when audio transcription is cancelled (the input returns to input mode). Emitted when audio transcription finishes (the input returns to input mode). Emitted with the recorded audio blob when transcription finishes with a recording. The blob is also handed to the surrounding `ChatState` for transcription. Emitted when the add-file action is triggered. Only active when attachments are enabled in the surrounding chat.

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.

Custom send button. Context: `send: () => void`, `disabled: boolean`, `value: string`. Custom toolbar. Context: `mode: CopilotChatInputMode`, `value: string`. Custom textarea. Custom audio recorder for transcribe mode. Custom start-transcribe button. Custom cancel-transcribe button. Custom finish-transcribe button. Custom add-file button. Custom tools menu button.

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