StreamingText
streaming-text流式文本 · 渲染父级累积 text(随token增长) + 流式中尾随闪烁光标(hulian-blink) · 区别 TypingAnimation 自驱定时 · 纯皮肤RSC
用法
流式中（尾随光标）
streaming 为 true 时尾部追加闪烁光标，文本随 token 增长。
瑚琏站在 Base UI、TanStack、Recharts 肩上
tsx
<p className="text-sm leading-relaxed">
<StreamingText text="瑚琏站在 Base UI、TanStack、Recharts 肩上" streaming />
</p>已完成（去光标）
streaming 为 false / 省略时不渲染光标，作为最终静态文本。
瑚琏支持明暗双主题 0 闪烁。
tsx
<p className="text-sm leading-relaxed">
<StreamingText text="瑚琏支持明暗双主题 0 闪烁。" />
</p>保留换行
whitespace-pre-wrap 内置，文本中的换行原样保留。
第一行 第二行 第三行
tsx
<StreamingText text={"第一行\n第二行\n第三行"} streaming />自定义光标
cursor 槽替换默认竖线，例如用「▍」块光标。
正在生成回答▍
tsx
<StreamingText
text="正在生成回答"
streaming
cursor={<span className="ml-0.5 text-primary">▍</span>}
/>何时用
渲染由 SSE/fetch stream 驱动、随 token 到达不断增长的累积文本，并在进行中显示尾随闪烁光标时用。区别于 TypingAnimation（内部自驱定时逐字打字），本组件不自己造字——只渲染父级传入的 text，光标由 streaming 控制。
导入
ts
import { StreamingText } from "@hulianui/ui"Props
继承 HTMLAttributes<HTMLElement>，额外：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| text* | string | — | 当前累积文本（随 token 到达由父级增长） |
| streaming | boolean | — | 流式进行中：尾随闪烁光标；done 后去除光标 |
| as | ElementType | "span" | 渲染标签 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| cursor | ReactNode | 自定义光标节点（默认闪烁竖线） |
禁忌 / 坑
- 纯皮肤组件：不自己造字。
text必须由父级累积增长（SSE/stream），传静态全文不会有逐字效果。 - 流式结束务必把
streaming置 false，否则光标一直闪。 - 暂无其它已知坑。
相关
PromptSuggestions · MessageActions · Citation · Conversation · ChatMessage · PromptInput