[component]

Dev Mode
AI Suggestion Box
Description
An AI suggestion block that renders inside TextField or TextArea. Shows AI-generated content with feedback controls and add-to-note actions. Supports multiple states: not-started, generating, ready, added, and hidden. Hidden and added suggestions condense into a collapsed row that can be re-expanded with Show.
Usage Guidelines
Do
Use inside a TextField or TextArea via the aiSuggestion prop.
Provide an onAdd callback to handle inserting the suggestion into the field.
Provide an onFeedback callback to capture thumbs up/down feedback.
Don't
Do not use outside of a text input context.
Do not omit the text prop when status is 'ready' or 'added'.
Accessibility
Thumbs up and thumbs down buttons have accessibility labels.
Show/Hide and Add to note buttons have accessibility roles.
Collapsed state is pressable to expand.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Text area, Text field
Examples
NotStarted
Not Started
AI note will be generated once the session ends.
Generating
Generating
AI note generation in progress...
Ready
Ready (click Add to note to see Added state)
AI-generated note
The clinician used CBT techniques including cognitive restructuring and behavioral activation. Motivational interviewing was also employed to address ambivalence about treatment goals.
Added
Added (collapsed, Show re-expands)
AI-generated note added!
Hidden
Hidden (collapsed, Show re-expands)
AI-generated note (hidden)
AllStates
Not Started
AI note will be generated once the session ends.
Generating
AI note generation in progress...
Ready (click Add to note to see Added state)
AI-generated note
The clinician used CBT techniques including cognitive restructuring and behavioral activation. Motivational interviewing was also employed to address ambivalence about treatment goals.
Added (collapsed, Show re-expands)
AI-generated note added!
Hidden (collapsed, Show re-expands)
AI-generated note (hidden)