showcase/shell-docs/src/content/reference/angular/components/CopilotChatInput.mdx
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.
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);
}
}
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).
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>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.
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() {}
}