AI elements
Suggested prompt group
An accessible wrapping group of conversation starters.
Usage
import { SuggestedPromptGroup } from '@commenda/pathfinder/suggested-prompt-group';
<SuggestedPromptGroup
items={[
{ id: 'filings', label: 'Which filings are due in the next 30 days?' },
{ id: 'gst', label: 'Reconcile my GST return' },
{ id: 'entities', label: 'Review entity details' },
]}
onSelect={(prompt, item) => {
setDraft(prompt);
recordPromptSelection(item.id);
}}
/>;API reference
| Prop | Type | Behavior |
|---|---|---|
itemsRequired | readonly SuggestedPromptItem[] | Stable unique IDs, labels, optional prompt text and disabled state |
onSelectRequired | (
prompt: string,
item: SuggestedPromptItem
) => void | Text plus original item for analytics or host behavior |
label | string | Accessible group label; defaults to Suggested prompts |
disabled | boolean | Disables every prompt |
className | string | Host layout |
Design rules
- PROMPT-GROUP-01: Recommend three or four relevant prompts with an 8px wrapping gap. Never force a horizontally overflowing row.
- Empty input renders nothing. Existing item order is preserved; no selection, randomization, fetching, or sending happens internally.
- The group uses native button keyboard behavior, not radio or tab semantics. Each prompt remains independently reachable.
For AI Elements migration, map each existing Suggestion's text and click callback to a SuggestedPrompt item and onSelect. Keep request handling and analytics in the application.