'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
AI
PromptInput
The message box of an assistant: it grows with the text, Enter sends, the Send button turns into Stop while a response is generated, and suggestions give people a place to start.
import { PromptInput, PromptSuggestions } from '@alea/ui';
Examples
Assistant
A whole conversation from the parts: suggestions to start, the prompt box, the reasoning that folds away, a tool call, a streamed answer with citations and sources, and actions under it. Pick a suggestion or write a question.
How can I help?
Files, a model and states
header holds attached files; tools holds a model picker and toggles, next to Send. Turn on Generating to see Stop and the glow; Disabled locks it.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-on…--alea-accent-solid…--alea-accent-strong…--alea-accent-subtle…--alea-border-control…--alea-chart-2…--alea-field-bg…--alea-focus-halo…--alea-status-success…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…
Radius
--alea-radius-lg…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-xs…
Motion
--alea-motion-duration-fast…--alea-motion-ease-emphasized…--alea-motion-ease-out…--alea-motion-scale-press…
Component
--alea-prompt-angle…
Props
PromptInput props
The message box of an assistant: grows with the text, Enter sends and Shift+Enter adds a line, a Send button that turns into Stop while a response is generated, a slot for files above and tools below. The border glows while it works.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Extra class names. |
clearOnSubmit | boolean | true | Clears the text after sending. Default true. |
defaultValue | string | '' | The text at first. |
header | ReactNode | - | Content above the text: attached files, a quoted message. |
isDisabled | boolean | - | Disables typing and sending. |
isGenerating | boolean | - | A response is being generated: the send button becomes Stop, and the border glows. |
label | ReactNode | - | Visible label; without one the field is named "Message". |
maxRows | number | 8 | Lines before it scrolls. Default 8. |
onAttach | (() => void) | - | Shows a paperclip button; called when it is pressed (open your file picker there). |
onChange | ((value: string) => void) | - | Called on every change. |
onStop | (() => void) | - | Called by the Stop button. |
onSubmit | ((value: string) => void) | - | Called with the text on Enter or the send button. Empty text never sends. |
placeholder | string | - | Shown while empty. |
showHint | boolean | - | Shows the Enter and Shift+Enter hint under the field. Default false. |
tools | ReactNode | - | Content at the start of the bottom row: a model select, tool toggles. |
value | string | - | The text (controlled). |
PromptSuggestions props
Starting points for a conversation, as chips or cards. Each is a button; they enter one after another.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | PromptSuggestion[] | - | |
onSelectrequired | (prompt: string, item: PromptSuggestion) => void | - | Called with the prompt to send. |
className | string | - | Extra class names. |
variant | "chips" | "cards" | 'chips' | chips (default) for a row under the box, or cards for an empty conversation. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
PromptInput
- States
- Focus insideHover (CSS)Pressed (CSS)Disabled
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-prompt.alea-prompt-box.alea-prompt-header.alea-prompt-input.alea-prompt-row.alea-prompt-btn.alea-prompt-tools.alea-prompt-send.alea-prompt-hint- Data attributes
data-generatingdata-donedata-stop
PromptSuggestions
- Variants
variantchipscards- States
- Hover (CSS)Pressed (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-suggestions.alea-suggestion.alea-suggestion-icon.alea-suggestion-text.alea-suggestion-label.alea-suggestion-desc- Data attributes
data-variant=cards
Accessibility
- The text box is labelled (Message by default) and says Enter sends when showHint is on.
- Send is disabled while the box is empty; while a response is generated it becomes a named Stop button, and Generating a response is announced.
- Suggestions are a labelled list of buttons; the glow around the box is decoration and holds still with reduced motion.
Keyboard
| Key | Does |
|---|---|
| Enter | Sends |
| Shift+Enter | New line |
| Tab | Moves to attach, the tools and Send or Stop |
Do and don't
Do
- Put the model or mode picker in tools, next to Send.
- Show suggestions on an empty conversation, and hide them once people write.
- Keep Stop available the whole time a response is generated.
Don't
- Don't send on Enter in a field meant for long writing: use TextArea and a button.
- Don't clear what people wrote if sending fails: set clearOnSubmit to false and clear it yourself.
In Figma
PromptInput with State (Empty, Typing, Generating, Disabled) and slots for the header and tools; PromptSuggestions with Variant (Chips, Cards).