AI Response
Assistant response text, with a streaming caret and a thinking indicator.
- AI
- 2 files
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-responseNo npm packages are needed beyond what Dowel already requires.
import { Response } from "@/components/ui/ai-response";Default
Streaming
Live
Thinking
With Rendered Markdown
Streaming Text
<Response>
| Prop | Type | Default |
|---|---|---|
streamingShows the caret. Purely visual — it carries no announcement. | boolean | — |
Plus every attribute of <div>.
<ResponseCaret>
Plus every attribute of <span>.
<ThinkingIndicator>
| Prop | Type | Default |
|---|---|---|
label | string | "Thinking" |
Plus every attribute of <div>.
Deliberately not a live region: announcing streamed text as it arrives interrupts a screen reader user on every token. Announce state through ConversationStatus and let them read the response when it settles. The caret is decorative; ThinkingIndicator carries a label because it is the only thing on screen while waiting for the first token, and it slows rather than stops under reduced motion because a frozen one says the app has hung. ResponseText blurs in only newly arrived words, adds no live region, and leaves the text content unchanged; its [n] markers are InlineCitations named by their source title.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes