Documentation
Prompt Suggestions
Displays suggestion badges/chips for quick prompts. Designed to be placed above or below a chat input for quick actions.
Installation
1import { PromptSuggestionsComponent } from '@angular-ai-kit/core';Live Demo
Features
- Badge/chip style suggestion buttons
- Optional emoji/icon support
- Click to select and populate input
- Responsive flex wrap layout
- Position control (above/below input)
API Reference
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
suggestions | PromptSuggestion[] | required | Array of suggestion items to display |
position | 'top' | 'bottom' | 'bottom' | Position relative to input (affects margin) |
customClasses | string | '' | Additional CSS classes |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
select | EventEmitter<PromptSuggestion> | - | Emitted when a suggestion is clicked |
TypeScript Interface
1interface PromptSuggestion {2 label: string; // Display text3 prompt: string; // Full prompt to use4 icon?: string; // Optional emoji/icon5}Usage Example
1<ai-prompt-suggestions2 [suggestions]="suggestions"3 position="bottom"4 (select)="handleSuggestionSelect($event)"5/>Accessibility
- Uses role="group" with aria-label
- Each suggestion has descriptive aria-label
- Keyboard accessible
- Focus visible states