安装
pnpm dlx shadcn@latest add https://loading.design/r/smooth-stream.json用法
import { SmoothStream } from "@/components/loading/smooth-stream"
<SmoothStream text={"Good things take a moment. Let’s make that moment better."} size={14} speed={0.35} active={true} />将已接收的完整回复传入 text，流式传输结束后将 active 设为 false。已有字符保持挂载，新字符柔和淡入。此组件显示纯文本；需要 Markdown 时请单独渲染。
使用 AI SDK 时，从消息的 parts 读取文字，并用流式状态控制光标。参阅 AI SDK 聊天文档。
import { useChat } from "@ai-sdk/react"import { SmoothStream } from "@/components/loading/smooth-stream"
export function ChatResponse() { const { messages, status } = useChat() const message = messages.at(-1) if (message?.role !== "assistant") return null const text = message.parts .filter(part => part.type === "text") .map(part => part.text) .join("") return <SmoothStream key={message.id} text={text} active={status === "streaming"} />}API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | string | Good things take a moment. Let’s make that moment better. | 显示的状态文字或已接收的完整流式回复。 |
| size | number | 14 | 文字大小，单位为像素。 |
| speed | number | 0.35 | 动画时长（秒）。对于流式文字，此值为每个字符淡入的时长。 |
| active | boolean | true | 是否启用动画。工作完成后关闭，可隐藏流式光标。 |
| label | string | Streaming response | 无障碍状态标签。装饰用途请传入空字符串。 |
无障碍
流式文字使用带有名称和 aria-busy 的区域，避免逐字播报。如有需要，可在完成后单独通知。所有动效都遵循减少动态效果偏好；装饰性输出请使用空标签。