AI primitive
StreamingResponse
Renders streaming token chunks with a live blinking caret, tool-call timeline collapse, citations footer and a stop button. Pairs naturally with ChatComposer.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { StreamingResponse } from '@/components/organisms'
<StreamingResponse
modelLabel="Claude Sonnet 4.6"
tokens={tokens} // AsyncIterable<string>
citations={[
{ id: 'c1', label: 'pricing.md', href: '#' },
]}
toolCalls={[
{ id: 't1', name: 'web_search', status: 'done' },
]}
onStop={() => abort()}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| modelLabel | string | — | Model name shown in the header. |
| tokens | AsyncIterable<string> | — | Stream of text chunks. Component handles buffering. |
| citations | Citation[] | [] | Footnote-style citations rendered below the response. |
| toolCalls | ToolCall[] | [] | Inline tool-use timeline (collapsed by default). |
| onStop | () => void | — | Called when the user clicks Stop mid-stream. |
Accessibility
live
Streamed text appears in an aria-live='polite' region.
motion
Caret blink and shimmer respect prefers-reduced-motion.
keyboard
Stop button is reachable via Tab and triggers on Enter/Space.