CopilotChatInput
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
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Textarea inputs
Prop
Type
Prop
Type
Prop
Type
Slot override inputs
Each interactive piece can be replaced with a component class (*Component). Templates for the same slots are read from content projection.
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
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.
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
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.
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
Prop
Type
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);
}
}