AI Conversation
The scrolling transcript container, with follow-on-new-content and a status region.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add ai-conversationNo npm packages are needed beyond what Dowel already requires.
import { Conversation } from "@/components/ui/ai-conversation";Default
Streaming
Long Transcript
State Vocabulary
<Conversation>
| Prop | Type | Default |
|---|---|---|
autoScrollFollow new content while the reader is at the bottom. Turning this off never scrolls automatically; it does not pin the view. | boolean | true |
labelThe accessible name of the scrolling transcript. The transcript is a focusable region so it can be scrolled by keyboard whether or not anything inside it can take focus; a region needs a name. | string | "Conversation" |
Plus every attribute of <div>.
<ConversationMessages>
Plus every attribute of <ol>.
<ConversationStatus>
| Prop | Type | Default |
|---|---|---|
stateRenders default wording for a state. | ConversationState | — |
stateLabelsOverrides the default wording per state. | Partial<Record<ConversationState, string>> | — |
childrenAnnounced politely when it changes. Keep it short: state, never content. | ReactNode | — |
Plus every attribute of <div>.
<ConversationScrollButton>
| Prop | Type | Default |
|---|---|---|
label | string | "Jump to latest" |
Plus every attribute of <button>.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes