StreamingText
streaming-textRenders parent-accumulated text with a blinking trailing cursor while streaming.
Usage
Streaming (trailing cursor)
When streaming is true, a blinking cursor is appended to the end, and the text grows with token.
Hulian stands on the shoulders of Base UI, TanStack, Recharts
<p className="text-sm leading-relaxed">
<StreamingText text="Hulian stands on the shoulders of Base UI, TanStack, Recharts" streaming />
</p>Completed (remove cursor)
streaming is false / When omitted, the cursor is not rendered, as the final static text.
Hulian supports light and dark dual themes with 0 flicker.
<p className="text-sm leading-relaxed">
<StreamingText text="Hulian supports light and dark dual themes 0 flashing." />
</p>Keep line breaks
whitespace-pre-wrap built-in, line breaks in the text are preserved intact.
First line Second line Third line
<StreamingText text={"First row\nSecond row\nThird row"} streaming />Custom cursor
cursor slot replaces the default vertical bar, for example with a "▍" block cursor.
Generating answer▍
<StreamingText
text="Generating answer"
streaming
cursor={<span className="ml-0.5 text-primary">▍</span>}
/>When to Use
Renders an accumulated text driven by an SSE/fetch stream that grows as tokens arrive, displaying a trailing blinking cursor while in progress. Different from TypingAnimation (internal self-driven timing word-by-word typing), this component does not create words by itself - it only renders the text passed in by the parent, and the cursor is controlled by streaming.
Import
import { StreamingText } from "@hulianui/ui"Props
Inherits HTMLAttributes<HTMLElement>, additionally:
| Name | Type | Default | Description |
|---|---|---|---|
| text* | string | — | Current accumulated text (increased by parent as token arrives) |
| streaming | boolean | — | Streaming in progress: trailing flashing cursor; cursor removed after done |
| as | ElementType | "span" | Render Tag |
Slots
| Slot | Type | Description |
|---|---|---|
| cursor | ReactNode | Custom cursor node (default flashing vertical line) |
Usage Guidelines
- This component does not generate or reveal text itself. The parent must append tokens to
text; passing complete static text renders it immediately. - Be sure to set
streamingto false at the end of streaming, otherwise the cursor will keep flashing. - Keep the accumulated text stable across reconnects to avoid visibly replaying or dropping tokens.
Related
PromptSuggestions · MessageActions · Citation · Conversation · ChatMessage · PromptInput