---
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`](/reference/angular/components/CopilotChat) or [`CopilotChatView`](/reference/angular/components/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.

```ts title="src/app/chat.component.ts"
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

<PropertyReference name="mode" type='"input" | "transcribe" | "processing"'>
  Initial input mode. The component manages transitions between these modes during audio transcription. When omitted, the input starts in `"input"` mode.
</PropertyReference>

<PropertyReference name="toolsMenu" type='(ToolsMenuItem | "-")[]'>
  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.
</PropertyReference>

<PropertyReference name="autoFocus" type="boolean" default="true">
  Whether the textarea focuses automatically after the view initializes. Defaults to `true` when omitted.
</PropertyReference>

<PropertyReference name="value" type="string">
  Controlled value for the textarea. When provided, it takes precedence over the value held in the surrounding `ChatState`.
</PropertyReference>

<PropertyReference name="inputClass" type="string">
  Class applied to the internal input wrapper. Prefer the host `class` for styling the component itself.
</PropertyReference>

<PropertyReference name="additionalToolbarItems" type="TemplateRef<any>">
  A template rendered after the leading toolbar items, for adding your own controls to the toolbar.
</PropertyReference>

### Textarea inputs

<PropertyReference name="textAreaClass" type="string">
  Class applied to the default textarea.
</PropertyReference>

<PropertyReference name="textAreaMaxRows" type="number">
  Maximum number of rows the textarea grows to before scrolling.
</PropertyReference>

<PropertyReference name="textAreaPlaceholder" type="string">
  Placeholder text for the textarea.
</PropertyReference>

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

<PropertyReference name="sendButtonComponent" type="Type<any>">
  Component class for the send button. Style the default with `sendButtonClass`.
</PropertyReference>

<PropertyReference name="toolbarComponent" type="Type<any>">
  Component class for the toolbar. Style the default with `toolbarClass`.
</PropertyReference>

<PropertyReference name="textAreaComponent" type="Type<any>">
  Component class for the textarea.
</PropertyReference>

<PropertyReference name="audioRecorderComponent" type="Type<any>">
  Component class for the audio recorder shown in transcribe mode. Style the default with `audioRecorderClass`.
</PropertyReference>

<PropertyReference name="startTranscribeButtonComponent" type="Type<any>">
  Component class for the start-transcribe button. Style the default with `startTranscribeButtonClass`.
</PropertyReference>

<PropertyReference name="cancelTranscribeButtonComponent" type="Type<any>">
  Component class for the cancel-transcribe button. Style the default with `cancelTranscribeButtonClass`.
</PropertyReference>

<PropertyReference name="finishTranscribeButtonComponent" type="Type<any>">
  Component class for the finish-transcribe button. Style the default with `finishTranscribeButtonClass`.
</PropertyReference>

<PropertyReference name="addFileButtonComponent" type="Type<any>">
  Component class for the add-file button. Style the default with `addFileButtonClass`.
</PropertyReference>

<PropertyReference name="toolsButtonComponent" type="Type<any>">
  Component class for the tools menu button. Style the default with `toolsButtonClass`.
</PropertyReference>

## Outputs

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

<PropertyReference name="submitMessage" type="string">
  Emitted with the trimmed message text when the user sends a message (Enter without Shift, or the send button).
</PropertyReference>

<PropertyReference name="valueChange" type="string">
  Emitted whenever the textarea value changes.
</PropertyReference>

<PropertyReference name="startTranscribe" type="void">
  Emitted when audio transcription starts (the input switches to transcribe mode).
</PropertyReference>

<PropertyReference name="cancelTranscribe" type="void">
  Emitted when audio transcription is cancelled (the input returns to input mode).
</PropertyReference>

<PropertyReference name="finishTranscribe" type="void">
  Emitted when audio transcription finishes (the input returns to input mode).
</PropertyReference>

<PropertyReference name="finishTranscribeWithAudio" type="Blob">
  Emitted with the recorded audio blob when transcription finishes with a recording. The blob is also handed to the surrounding `ChatState` for transcription.
</PropertyReference>

<PropertyReference name="addFile" type="void">
  Emitted when the add-file action is triggered. Only active when attachments are enabled in the surrounding chat.
</PropertyReference>

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

<PropertyReference name="sendButton" type="TemplateRef<SendButtonContext>">
  Custom send button. Context: `send: () => void`, `disabled: boolean`, `value: string`.
</PropertyReference>

<PropertyReference name="toolbar" type="TemplateRef<ToolbarContext>">
  Custom toolbar. Context: `mode: CopilotChatInputMode`, `value: string`.
</PropertyReference>

<PropertyReference name="textArea" type="TemplateRef<any>">
  Custom textarea.
</PropertyReference>

<PropertyReference name="audioRecorder" type="TemplateRef<any>">
  Custom audio recorder for transcribe mode.
</PropertyReference>

<PropertyReference name="startTranscribeButton" type="TemplateRef<any>">
  Custom start-transcribe button.
</PropertyReference>

<PropertyReference name="cancelTranscribeButton" type="TemplateRef<any>">
  Custom cancel-transcribe button.
</PropertyReference>

<PropertyReference name="finishTranscribeButton" type="TemplateRef<any>">
  Custom finish-transcribe button.
</PropertyReference>

<PropertyReference name="addFileButton" type="TemplateRef<any>">
  Custom add-file button.
</PropertyReference>

<PropertyReference name="toolsButton" type="TemplateRef<any>">
  Custom tools menu button.
</PropertyReference>

### Tools menu example

```ts title="src/app/chat.component.ts"
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

<Cards>
  <Card
    title="CopilotChat"
    description="The all-in-one component that wires an agent and renders this input through the chat view."
    href="/reference/angular/components/CopilotChat"
  />
  <Card
    title="CopilotChatView"
    description="The layout-only chat view that renders this input by default."
    href="/reference/angular/components/CopilotChatView"
  />
  <Card
    title="provideCopilotKit"
    description="Configures the runtime connection and agents that power the chat."
    href="/reference/angular/functions/provideCopilotKit"
  />
</Cards>
