CopilotChatInput.mdx

title	CopilotChatInput
description	Angular standalone component for chat input, tools, file upload, and audio transcription

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

CopilotChatInput requires a parent injector to provide ChatState. It reads that state through injectChatState and wires submission, value changes, transcription, and file uploads to it. 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. The example below provides the required ChatState. Use CopilotChat when you want CopilotKit to manage this state for you.

import { Component, forwardRef, signal } from "@angular/core";
import { ChatState, CopilotChatInput } from "@copilotkit/angular";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CopilotChatInput],
  providers: [
    {
      provide: ChatState,
      useExisting: forwardRef(() => ChatComponent),
    },
  ],
  template: `
    <copilot-chat-input
      [autoFocus]="true"
      (submitMessage)="onSubmit($event)"
    />
  `,
})
export class ChatComponent extends ChatState {
  readonly inputValue = signal("");

  submitInput(value: string) {
    // Send the message through your chat state owner.
    console.log("user submitted:", value);
  }

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

Inputs

Behavior inputs

Controlled input mode. When omitted, the component starts in `"input"` mode and manages later transitions itself. 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 omitted, the component reads the value held in `ChatState`. An explicit empty string keeps the textarea empty. Declared by the component, but the current release does not apply it. Use the host `class` or a slot override. 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). Templates for the same slots are read from content projection.

Component class for the send button. Style the default with `sendButtonClass`. Component class for the toolbar. Component class for the textarea. Component class for the audio recorder shown in transcribe mode. Component class for the start-transcribe button. Component class for the cancel-transcribe button. Component class for the finish-transcribe button. Component class for the add-file button. Component class for the tools menu button. The current release declares class inputs for the toolbar, audio recorder, transcription buttons, add-file button, and tools button, but does not apply them. `sendButtonClass` and `textAreaClass` do apply.

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, forwardRef, signal } from "@angular/core";
import { ChatState, CopilotChatInput } from "@copilotkit/angular";
import type { ToolsMenuItem } from "@copilotkit/angular";

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

  summarize() {}
  translate() {}

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

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

Related