AI Follow-up Clarification
Component for requesting additional information from users when a prompt is ambiguous or incomplete. Supports pre-defined options and free-text input with card, inline, and banner variants.
Card Variant
Full card with options and free-text input
Clarification needed
I found multiple angles to approach your question
What kind of information are you looking for about this laptop?
Simple Options
Card with options only, no free text
Clarification needed
Which format would you like the report in?
Banner Variant
Horizontal banner for embedded clarifications
Which time period should I analyze?
Your query could apply to different date ranges
Inline Variant
Minimal inline clarification with chips
Did you mean the Python library or the programming concept?
Props
AIFollowUpClarification component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
question* | string | — | The clarification question from the AI |
options | ClarificationOption[] | — | Pre-defined options the user can pick |
allowFreeText | boolean | true | Allow free-text response input |
placeholder | string | 'Type your answer...' | Placeholder for free-text input |
variant | 'card' | 'inline' | 'banner' | 'card' | Display variant |
context | string | — | Context about what the AI is trying to do |
optional | boolean | false | Whether the clarification can be skipped |
onSelect | (optionId: string) => void | — | Callback when user selects an option |
onSubmit | (text: string) => void | — | Callback when user submits free-text |
onDismiss | () => void | — | Callback when user dismisses/skips |
Usage
Import and implementation example
import { AIFollowUpClarification } from '@/blocks/ai-conversation/ai-follow-up-clarification'
<AIFollowUpClarification question="What kind of analysis would you like?" options={[ { id: '1', label: 'Statistical', description: 'Numbers and trends' }, { id: '2', label: 'Qualitative', description: 'Themes and patterns' }, ]} onSelect={(id) => handleSelect(id)} onSubmit={(text) => handleFreeText(text)} optional onDismiss={() => setDismissed(true)}/>Features
Built-in functionality
- Three variants: Card, inline, and banner display modes
- Pre-defined options: Selectable options with icons and descriptions
- Free-text input: Optional text input for custom answers
- Skippable: Optional clarifications can be dismissed
- Keyboard support: Enter to submit free-text input
- Context display: Show why clarification is needed
Accessibility
Accessibility considerations
ARIA Attributes
Option selection state conveyed through visual and color changesKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between options and input |
| Enter | Submit free-text or activate focused option |
Notes
- Selected state uses both color and ring indicator
- Dismiss button clearly labeled