'/%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
AI response parts
What goes around an answer: the reasoning behind it, the tools an agent ran, the sources it used with inline citations, and actions to copy, regenerate and rate it.
import { ResponseActions, Reasoning, ToolCall, Sources, Citation } from '@alea/ui';
Examples
An answer
Reasoning folded away with how long it took, inline citations, the sources and the actions. Rate it, copy it or open the reasoning.
Pass your accent to brandVariables and put the result on the root1. Every semantic token follows, in dark, light and high contrast2, and the Figma kit uses the same variables3.
Sources
Agent steps
Tool calls as an agent works through them: each one runs, then finishes or fails, and its status is announced. Open a step to see what went in and what came back.
Input
Output
Input
Output
Input
Output
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent-strong…--alea-accent-subtle…--alea-status-success…--alea-surface-hover…--alea-text…--alea-text-muted…
Radius
--alea-radius-sm…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…--alea-motion-scale-press…
Props
ResponseActions props
The row under an answer: copy (it confirms), regenerate, and good or bad feedback as toggle buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Extra class names. |
copyText | string | - | The text Copy puts on the clipboard. Leave out to hide Copy. |
extra | ReactNode | - | More buttons at the end: share, read aloud. |
feedback | "good" | "bad" | null | - | The current feedback (controlled). |
onFeedback | ((value: "good" | "bad" | null) => void) | - | Shows the thumbs; called with the choice (null when taken back). |
onRegenerate | (() => void) | - | Shows Regenerate. |
Reasoning props
The model's thinking, behind a disclosure: "Thinking…" shimmers while it works, then "Thought for 4 s" and it folds away.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The model's reasoning, as text or nodes. |
className | string | - | Extra class names. |
defaultOpen | boolean | - | Open at first. Default: open while thinking, closed after. |
isThinking | boolean | - | Still thinking: the label shimmers and the panel stays open. |
seconds | number | - | How long it thought, in seconds, shown when done. |
ToolCall props
One step of an agent: the tool, its status (running spins, done checks, error warns) and, on demand, what went in and what came back. Status changes are announced.
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | The tool's name: "Search the web". |
statusrequired | "running" | "done" | "error" | - | running, done or error. |
className | string | - | Extra class names. |
icon | ReactNode | - | An icon for the tool. |
input | ReactNode | - | What was sent to the tool, shown when expanded. |
output | ReactNode | - | What came back, shown when expanded. |
summary | ReactNode | - | A short line: the query, the file. |
Sources props
The sources behind an answer, numbered to match the citations in the text, each a link with its site.
| Prop | Type | Default | Description |
|---|---|---|---|
sourcesrequired | Source[] | - | |
className | string | - | Extra class names. |
Citation props
An inline citation: a small number that links to its source and is named with the source's title.
| Prop | Type | Default | Description |
|---|---|---|---|
nrequired | number | - | The number shown, matching Sources. |
sourcerequired | Source | - | The source it points to. |
className | string | - | Extra class names. |
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.
ResponseActions
- Variants
feedbackgoodbadnull- States
- Hover (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-response-actions.alea-prompt-btn- Data attributes
data-done
Reasoning
- States
- Hover (CSS)Open
- Motion
- streamroute
- 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-reasoning.alea-reasoning-toggle.alea-reasoning-icon.alea-text-shimmer.alea-reasoning-chevron.alea-reasoning-panel.alea-reasoning-body- Data attributes
data-thinking
ToolCall
- Variants
statusrunningdoneerror- States
- OpenHover (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-tool-icon.alea-tool-text.alea-tool-name.alea-tool-summary.alea-tool-status.alea-reasoning-chevron.alea-tool.alea-tool-head.alea-tool-panel.alea-tool-label.alea-tool-code- Data attributes
data-status=runningdata-status=donedata-status=error
Sources
- States
- Hover (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-sources.alea-sources-title.alea-sources-list.alea-source.alea-source-n.alea-source-text.alea-source-title.alea-source-host.alea-source-snippet
Citation
- States
- Hover (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-citation
Accessibility
- Reasoning and ToolCall are disclosure buttons (aria-expanded) with their panels; Thinking shimmers but its text is plain for screen readers.
- A tool call announces its status as it changes (running, done, failed), and the status is a word, not only an icon color.
- Citations are links named Source 1: and the title, so they make sense out of context; Sources is a labelled region with a numbered list.
- Good and bad are toggle buttons (aria-pressed); copying and feedback are confirmed in a polite announcement.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the toggles, citations, sources and actions |
| Enter or Space | Opens or closes reasoning and tool details; presses an action |
Do and don't
Do
- Fold reasoning away once the answer is ready: it is there for people who want it.
- Number citations in the order sources appear in the list.
- Give each tool a name people understand: Search the web, not web_search_v2.
Don't
- Don't hide that an answer used tools or sources.
- Don't ask for feedback on every message with a dialog: the thumbs are enough.
In Figma
ResponseActions, Reasoning (Thinking, Done, Open), ToolCall (Running, Done, Error, Open), Sources and Citation.