Streaming

Agent chat · src/components/Streaming/Streaming.tsx

An answer arriving, with a way to stop it.

label is the line saying what it is doing; children is the text it is producing. They are separate because a caller passing only label used to get a bare Stop button and no sentence.

thinking is its own state with a live region, so a screen reader is told something is happening before any text exists to read. Once text arrives the caret shows it is still going, and Stop stays available until done - an answer that cannot be interrupted is one the person has to wait out.

Import

import { Streaming } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
state	'thinking' | 'streaming' | 'done'	thinking before any text arrives, then the text streams, then done.
label	React.ReactNode	The line saying what it is doing. Not the text it is producing.
stopLabel	React.ReactNode
className	string
children	React.ReactNode	The text being produced.
onStop	() => void	Omit it and the person cannot stop a long answer.