Documentation
Chat Input
A flexible, auto-resizing chat input component with configurable toolbar elements. Supports keyboard shortcuts and visibility toggles for a fully customizable experience.
Installation
1import { ChatInputComponent } from '@angular-ai-kit/core';Interactive Playground
Toggle the switches below to customize which elements are visible in the ChatInput component.
Preview
Press Enter to send, Shift+Enter for new line, Escape to clear
Configuration
Context Button
Attachment Button
Research Button
Sources Button
Model Name
Mic Button
Suggestions
Position
Basic Usage
1<ai-chat-input2 [placeholder]="'Type your message...'"3 [disabled]="isLoading()"4 (messageSend)="handleSend($event)"5/>Minimal Configuration
Hide all optional elements to get a minimal input with just the textarea and send button.
1<ai-chat-input2 [showContextButton]="false"3 [showAttachmentButton]="false"4 [showResearchButton]="false"5 [showSourcesButton]="false"6 [showModelName]="false"7 [showMicButton]="false"8 (messageSend)="handleSend($event)"9/>Keyboard Shortcuts
Enter Send message
Shift + Enter New line
Escape Clear input
API Reference
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Message Angular AI Kit...' | Placeholder text for the textarea |
disabled | boolean | false | Disable the input |
maxHeight | number | 200 | Maximum height of the textarea in pixels |
showContextButton | boolean | true | Show the "@Add context" button |
showAttachmentButton | boolean | true | Show the attachment (paperclip) button |
showResearchButton | boolean | true | Show the "Research" button |
showSourcesButton | boolean | true | Show the "All sources" dropdown button |
showModelName | boolean | true | Show the model name label |
showMicButton | boolean | true | Show the microphone (voice input) button |
suggestions | PromptSuggestion[] | [] | Array of suggestion objects with label, prompt, and optional icon |
showSuggestions | boolean | true | Show/hide the suggestion badges |
suggestionsPosition | 'top' | 'bottom' | 'bottom' | Position of suggestion badges relative to the input |
customClasses | string | '' | Additional CSS classes |
Outputs
| Prop | Type | Description |
|---|---|---|
messageSend | string | Emitted when a message is submitted (Enter key or send button) |
inputCleared | void | Emitted when the input is cleared (Escape key) |
suggestionSelect | PromptSuggestion | Emitted when a suggestion badge is clicked |
contextClick | void | Emitted when the context button is clicked |
fileSelect | FileList | Emitted when files are selected via attachment button |
researchModeChange | boolean | Emitted when research mode is toggled |
sourceChange | string | Emitted when the source is changed |
recordingChange | boolean | Emitted when voice recording state changes |
Accessibility
- Keyboard navigation with Enter, Shift+Enter, and Escape
- ARIA labels on all interactive elements
- Screen reader hints for keyboard shortcuts
- Focus management for textarea
- Proper disabled states with aria-disabled