流式文本

Beautiful UI 的独立组件，请不要替换为 JGuang UI/Base UI 的同名 API。

安装

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/streaming-text.json

Registry 将复制可编辑源码和依赖到独立命名空间。检查主题变量与 Tailwind CSS v4 配置；不要覆盖已有的项目组件。

使用与验证

在左侧选择组件，在预览中操作它的状态；使用“查看代码”检查真实源码。安装后执行类型检查和构建，再验证键盘焦点、手机布局与深浅色主题。

来源

https://github.com/slev12397/beautiful-ui/tree/44a274e598395ab61e7c96c26fda2758780253b7 MIT 许可证；不包括付费内容。下方提供上游英文参考内容，中文使用指南已适配；上游详细参考暂保留英文。

适用场景

逐步展示已准备好的回答、引用来源和后续问题。

关键参数与数据

原生参数	说明
`content`	文本 token 数组；cite 标记使用 sources 中的第一个来源。
`sources`	来源数据需要 name、domain、href、image。
`followUps`	演示结束后展示的建议问题。
`loop`	真实会话中设为 false，避免回答循环重播。
`onDone`	非循环演示完成时通知一次。
`onFollowUp`	接收点击的问题文字和数组索引。

交互与状态检查

检查完成、来源展开和后续问题点击。切换成另一条回答时使用稳定的回答 key 重新挂载，以重置本地 token 计数。

业务接入边界

不连接 SSE 或 AI 接口。每个引用并没有分别映射不同来源，不能把它描述为完整引用索引系统。

以下安装用法和源码参数参考保留原生 API 名称。上游英文参考未宣称全文中文化。

可运行用法

先安装下方完整示例，再使用已安装的示例入口。参数化示例、共享工具、原生组件和 CSS 均随安装包提供，不需要手工修正相对导入。

import Demo from '@/components/beautiful-ui/examples/presets/streaming-text-with-citations';
import '@/styles/beautiful-ui.css';
export default function Example() { return <Demo />; }

可用状态与示例

默认示例、带引用回答、无引用回答

组件中的状态与数据为演示用途，不包含后端接口。接入实际项目时请检查源码中的公开参数，再连接业务数据。 Streamed answer with inline sources, actions, and follow-ups.

完整示例安装

这些是实际运行的原生状态和参数化业务示例，不是额外的独立组件。每份包包含必要源码、辅助文件、固定依赖、独立 CSS 和许可证。业务示例选择名不是新增的原生组件属性；真实 API 见下方参数参考。

默认示例

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/streaming-text/streaming-text-default.json

默认导入: @/components/beautiful-ui/examples/presets/streaming-text-default

依赖: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

带引用回答

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/streaming-text/streaming-text-with-citations.json

默认导入: @/components/beautiful-ui/examples/presets/streaming-text-with-citations

依赖: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

无引用回答

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/streaming-text/streaming-text-without-citations.json

默认导入: @/components/beautiful-ui/examples/presets/streaming-text-without-citations

依赖: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

入口初始化 Tailwind CSS v4，导入 beautiful-ui.css 一次，并由宿主 html 的 dark 类同步主题。示例按 html lang 选择中英文，不包含后端、认证或录屏。网络/剪贴板权限仍取决于浏览器。

源码参数参考

以下实现签名和类型从本地固定版本源码生成。保留可选属性、原生继承类型、联合分支和 never 限制；不会将其他设计系统的 API 混入。forwardRef 实现中的 ref 属于 React 引用，不是新增业务属性。此区域是原始类型参考，不是上游说明的全文翻译。

StreamingText({
  content = TOKENS,
  sources = SOURCES,
  followUps = FOLLOW_UPS,
  labels,
  loop = true,
  fill = false,
  onDone,
  onFollowUp,
}: {
  variant?: string;
  /** the streamed tokens; `cite` tokens render an inline source chip */
  content?: StreamingToken[];
  /** cited sources shown in the chip, avatar stack, and expanded list */
  sources?: StreamingSource[];
  /** follow-up prompt suggestions shown once the stream completes */
  followUps?: string[];
  /** prominent copy strings */
  labels?: Partial<StreamingLabels>;
  /** restart the stream after a hold; turn off when embedding in a real thread */
  loop?: boolean;
  /** fill the parent width instead of the gallery's fixed measure */
  fill?: boolean;
  onDone?: () => void;
  /** fired when a follow-up prompt is chosen */
  onFollowUp?: (text: string, index: number) => void;
} = {})

export type StreamingToken = { text: string; cite?: boolean };

export type StreamingSource = { name: string; domain: string; href: string; image: string };

export type StreamingLabels = {
  /** label on the collapsed sources toggle */
  sources: string;
  /** heading above the follow-up prompts */
  followUps: string;
};

源码中的解构默认值

只列出直接写在参数或 props 解构中的默认表达式。条件表达式、运行时主题和其他计算值请结合源码；这里不是全部行为的默认值清单。

// StreamingText
content = TOKENS

// StreamingText
sources = SOURCES

// StreamingText
followUps = FOLLOW_UPS

// StreamingText
loop = true

// StreamingText
fill = false

原生与外部类型

以下外部类型仍由 React 或资源自身依赖定义，没有手工展开为虚构属性。实际可用类型以安装版本的 TypeScript 检查为准。

Partial<StreamingLabels>