AI 套件
源自 Beautiful UI 的 19 个 AI 原生界面组件案例集
套件分组
AI 套件在组件侧边栏分为四组：对话（Chat、ChatComposer、PromptBar、AttachmentTray、MessageActions、SuggestionChips、TypingIndicator、ConversationStream）、智能体（Agents、AgentTrace、TaskRows、ToolCallCard、ToolChips、ToolConfirmation、ApprovalCard、WorkingIndicator）、推理与生成（AiElements、ChainOfThought、ReasoningDisclosure、ThinkingOrb、StreamMarkdown、CodeStream、InlineCitation、Sources）、上下文与洞察（ContextCards、ContextIndicator、InsightCards、RecommendationCard、FineTuneCard）。全部组件可经 @talex-touch/tuffex/ai 分类入口按套件引入。
组件预览
每个格子都是可交互的真实组件，点击左上角名称进入对应组件文档。
分组一览
下面按分组列出该套件的全部组件，数据来自每个文档的 category frontmatter，新增组件会自动出现。
来源与授权
本套件移植自 Beautiful UI（Turbo 设计工作室 / Shane Levine，© 2026，MIT 协议），共 19 个面向 AI 原生界面的组件案例：聊天、推理轨迹、human-in-the-loop 审批、agent 任务状态等。移植遵循三条原则：像素级还原其视觉语言（独立 --tx-bui-* token 层、发丝环阴影、13px 密度体系）；组件做成纯受控原语（演示时间轴留在 demo 层）；与 tuffex 现有组件融合而非重复造轮子——重叠处以变体或组合落地，无障碍缺口按 tuffex 标准补齐。每个组件源码文件头保留 MIT 署名。
加载与推理状态
01 · 工作指示器 WorkingIndicator
像素网格加载器 + shimmer 标签 + 实时计时，用于长任务进行中。详见 WorkingIndicator 文档。
三种波形变体
drive / dots / orbit
02 · 推理轨迹 AgentTrace
可展开的思考/搜索/编码轨迹，头部 shimmer 与完成态自动切换。详见 AgentTrace 文档。
四种轨迹变体
steps / reasoning / search / coding
06 · 任务行 TaskRows
agent 任务状态列表：环形序号、状态药丸、明细折叠，胶囊/列表两种容器。详见 TaskRows 文档。
胶囊变体
展开圆角形变 + 状态徽章重放
17 · 流式代码块 CodeStream
agent 写代码逐行显现，文件名头部 + shiki 高亮 + 复制。详见 CodeStream 文档。
逐行流式
revealedLines 受控显现
流式输出与聊天
03 · 流式回答 Streaming Text
组合案例：TxStreamMarkdown 逐词显影 + TxInlineCitation 行内引用 + TxSources 堆叠来源 + TxSuggestionChips 纵向追问。详见 InlineCitation 文档。
完整流式回答
内联引用 · 来源堆叠 · 追问列表
07 · 聊天面板 Chat
组合案例（不新增组件）：TxTabs + TxConversationStream + TxChainOfThought + TxChatComposer 复刻上游聊天面板。
标签页聊天面板
推理回复 + 输入条组合
08 · 输入条 PromptBar
@ 来源、/ 命令、模型选择器、听写状态，rounded/pill 双形态；发送键用墨色而非品牌蓝，是该设计语言的签名。详见 PromptBar 文档。
完整输入条
@ 与 / 菜单 · 模型选择 · 听写
审批与智能动作
04 · 审批卡 ApprovalCard
human-in-the-loop 多问题走查：选项 + 自定义答案 + 分页圆点。详见 ApprovalCard 文档。
多问题走查
回答 · 跳过 · 汇总提交
05 · 工具纸片 ToolChips
工具调用与代码编辑的紧凑纸片流，摘要行可展开。详见 ToolChips 文档。
运行流
摘要 → 展开 → 差分纸片
09 · 建议卡 RecommendationCard
agent 建议 + 三段置信度表（TxSignalMeter）+ 备选方案。详见 RecommendationCard 文档。
置信度与备选
接受 / 查看备选
19 · 划词动作 SelectionActions
选中一段文字，浮出工具条交给 agent 改写；基于 TxBaseAnchor 虚拟锚点。详见 SelectionActions 文档。
划词改写
Explain / Improve / 自定义指令
数据表格
11 · 差分表 DiffTable
AI 提案改动的扫掠动画：标红删除、展开新增，play/reset/settle 可控。详见 DiffTable 文档。
提案扫掠
auto 播放 + 手动重放
12 · 记录表 Records
组合案例（不新增组件）：扩展后的 TxDataTable（吸顶表头 / 汇总页脚 / 选中高亮 / 三态全选）+ TxTag 圆点标签 + TxDotIndicator + TxCellLink。详见 DataTable 文档。
CRM 记录表
sticky 表头页脚 · 关系强度 · 页脚聚合
13 · 过滤表 FilterTable
TxFilterChips 状态纸片 + TxDataTable 组合，计数由数据派生。详见 FilterChips 文档。
状态过滤
chips 驱动行集
检索与导航
10 · 上下文卡 ContextCards
RAG 检索块：正文、字符数、来源文件行，单块 TxContextChunk 可独立使用。详见 ContextCards 文档。
检索块列表
入场编排 + 来源行
14 · 侧边导航 SidebarNav
工作区导航：组头、徽标、快捷搜索与 / 聚焦快捷键（上游为纯装饰，移植补齐为真功能）。详见 SidebarNav 文档。
工作区导航
过滤 · 快捷键 · 悬浮指示器
15 · 搜索面板 SearchPanel
命令搜索 + 实时过滤 + 空态；键盘导航按 tuffex 标准补齐（上游没有）。详见 SearchPanel 文档。
命令搜索
listbox 键盘导航 + 空态阈值
洞察与调节
16 · 洞察卡 InsightCards
分页洞察 + 自研 canvas 折线（TxSparkChart + TxChartScrubber）+ 占比条（TxAllocationBar）+ 指标行（TxInsightMetric）。详见 InsightCards 文档。
完整洞察卡
翻页 · scrub 图表 · 追问
18 · 微调卡 FineTuneCard
agent 在检查器里调整设计属性：布局分段（复用 TxFlatRadio）+ 可拖拽数值域 TxScrubField + 类型选择。详见 FineTuneCard 文档。
属性检查器
拖拽 scrub · 键盘步进 · Edited 态
组件索引
| BUI 案例 | tuffex 落地 | 形态 |
|---|---|---|
| 01 Loading State | TxWorkingIndicator | 新组件 |
| 02 Thinking | TxAgentTrace | 新组件 |
| 03 Streaming Text | TxInlineCitation + TxSources stack + TxSuggestionChips list | 新叶子 + 现有组件变体 |
| 04 Approval Card | TxApprovalCard | 新组件 |
| 05 Tool Chips | TxToolChips / TxDiffChips | 新组件 |
| 06 Task Rows | TxTaskRows | 新组件 |
| 07 Chat | 本页 showcase demo | 现有组件组合 |
| 08 Prompt Bar | TxPromptBar | 新组件 |
| 09 Recommendation Card | TxRecommendationCard + TxSignalMeter | 新组件 + 新原子 |
| 10 Context Cards | TxContextCards / TxContextChunk | 新组件 |
| 11 Diff Table | TxDiffTable | 新组件 |
| 12 Records Table | TxDataTable 扩展 + TxTag + TxDotIndicator + TxCellLink + TxCheckbox 三态 | 现有组件加法式扩展 + 新原语 |
| 13 Filter Table | TxFilterChips + TxDataTable | 新原语 + 组合 |
| 14 Sidebar Nav | TxSidebarNav | 新组件 |
| 15 Search | TxSearchPanel | 组合薄壳 |
| 16 Insight Cards | TxInsightCards + TxSparkChart + TxAllocationBar | 新组件族 |
| 17 Code Block | TxCodeStream | 新组件 |
| 18 Fine-tune Card | TxFineTuneCard + TxScrubField | 新组件 + 新原语 |
| 19 Selection Actions | TxSelectionActions | 组合优先新组件 |
共享原语：TxIconChip（10/14/16/18 共用图标角标）。
审阅说明
- 上游为自驱动 demo（内容硬编码 + 定时器时间轴）；移植后组件全部受控，时间轴仅存在于本页各 demo 内。
- reduced-motion 逐组件显式实现：只砍补间不砍状态机，延迟一并归零（相对上游全局
*规则的有意偏离）。 - 高对比主题（
data-tx-contrast='high'）下--tx-bui-*保持原值，为已知限制。 - 16 的图表区上游截图渲染为 "No data to display"，图表按规格实现、无上游视觉基线。
- 全部组件源码文件头携带 MIT 署名：Adapted from Beautiful UI, © 2026 Shane Levine, MIT。