AI 对话组件

专为 AI 对话场景设计的组件：消息气泡、思考链、工具调用、Agent 状态、计划与测试结果、引用来源、代码差异、终端、文件树、Artifact 等。每个示例左侧为格式化 + 高亮的 TokUI DSL，右侧为实时渲染，点「编辑」可即时改动。

思考块 think

可折叠的思考过程容器，自闭合边界由 [/think] 闭合。open 默认展开、tt 标题。

属性	含义	示例
tt	标题	tt:思考过程
open	默认展开	open

1[think open tt:思考过程]

2[p 用户需要登录界面，应包含用户名、密码、提交按钮，并做必填校验。[/think]

3[think tt:已折叠]

4[p 默认收起，点击标题展开查看。[/think]

加载 TokUI…

TokUI DSL · 左代码右渲染

推理链 think-chain / think-step

分步推理过程容器。think-chain 整体标题，每个 think-step 显示状态、标题、耗时。

属性	含义	适用
tt	整体标题	think-chain
status	步骤状态（pending/running/done/error）	think-step
tt	步骤标题	think-step
dur	耗时	think-step

1[think-chain tt:分析用户问题]

2 [think-step status:done tt:理解需求 dur:0.3s]

3 [p 解析为"生成登录表单"任务]

4 [/think-step]

5 [think-step status:done tt:检索设计模式 dur:0.8s]

6 [p 找到 3 种参考实现[/think-step]

7 [think-step status:running tt:生成代码]

8 [p 正在输出表单组件…[/think-step]

9[/think-chain]

加载 TokUI…

TokUI DSL · 左代码右渲染

对话气泡 bubble

对话消息容器。role 角色定位左右，model / time 显示在元信息行。

属性	含义	示例
role	角色（user / ai）	role:ai
model	模型名（AI 侧）	model:GLM-5.2
time	时间文案	time:刚刚

1[bubble role:user]

2[p 帮我设计一个登录界面[/bubble]

3[bubble role:ai model:GLM-5.2 time:刚刚]

4[p 好的！已为你生成登录卡片：[/bubble]

加载 TokUI…

TokUI DSL · 左代码右渲染

工具栏 toolbar

横向操作工具条容器，常出现在气泡顶部或底部。

属性	含义	示例
pos	位置	pos:bottom
align	对齐	align:right

1[toolbar align:right]

2 [btn tx:复制 v:ghost sm]

3 [btn tx:重新生成 v:ghost sm]

4 [btn tx:分享 v:ghost sm]

5[/toolbar]

加载 TokUI…

TokUI DSL · 左代码右渲染

工具调用 tool-call

工具/函数调用卡片，显示调用名、状态、耗时。状态着色，pending/running/done/error/denied。

属性	含义	示例
name	工具名	name:web_search
status	状态	status:done
duration	耗时	duration:1.2s
id	标识（可被 upd 更新）	id:tc1

1[tool-call name:web_search status:done duration:1.2s]

2[p 已搜索「TokUI 流式 UI」，找到 8 条结果。[/tool-call]

3[tool-call name:run_code status:running]

4[p 正在执行 Python 代码…[/tool-call]

5[tool-call name:read_file status:error duration:0.4s]

6[p 文件不存在。[/tool-call]

加载 TokUI…

TokUI DSL · 左代码右渲染

打字指示 typing

「正在输入」三点动画，自闭合。text 旁边文字。

属性	含义	示例
text	提示文字	text:思考中

1[bubble role:ai]

2 [typing text:正在生成回复]

3[/bubble]

加载 TokUI…

TokUI DSL · 左代码右渲染

快捷回复 quick-reply

一行式快捷回复建议，自闭合容器。items 用 | 分隔多个建议。

属性	含义	示例
items	建议列表（`	` 分隔）

1[p v:muted 你可能想问：]

2[quick-reply items:"如何接入 SSE？|支持哪些图表？|怎样自定义主题？|DSL 怎么写？"]

3[/quick-reply]

加载 TokUI…

TokUI DSL · 左代码右渲染

建议卡片 suggestions / suggestion

网格化建议容器，子节点 suggestion 显示标题、描述、图标。suggestions 的 cols 控制列数。

属性	含义	适用
cols	列数	suggestions
clk	统一点击处理器	suggestions
tt	标题	suggestion
tx	描述	suggestion
icon	图标	suggestion
clk	点击处理器	suggestion
dis	禁用	suggestion

1[suggestions cols:2]

2 [suggestion tt:快速入门 tx:五分钟跑起第一个组件 clk:a]

3 [suggestion tt:DSL 语法 tx:掌握组件描述语言 clk:b]

4 [suggestion tt:流式渲染 tx:理解增量解析原理 clk:c]

5 [suggestion tt:主题定制 tx:打造品牌视觉 clk:d]

6[/suggestions]

加载 TokUI…

TokUI DSL · 左代码右渲染

引用来源 source

引用的检索来源/参考文献，自闭合。常用于「联网搜索」回答下方列出 [1] [2] 编号引用。

属性	含义	示例
n	序号	n:1
tt	标题（含空格须双引号）	tt:"TokUI 官方文档"
sn	摘要片段（含空格须双引号）	sn:"零依赖流式 UI…"
u / url	链接	u:https://example.com

tt/sn 含空格必须用双引号包裹，否则会被空格截断。

1[card tt:参考来源]

2 [source n:1 tt:"TokUI 官方文档" sn:"零依赖流式 UI 描述与渲染框架" u:#]

3 [source n:2 tt:"SSE 协议规范" sn:"Server-Sent Events 实时推送" u:#]

4 [source n:3 tt:"MDN Web Docs" sn:"Using Server-Sent Events to push updates" u:#]

5[/card]

加载 TokUI…

TokUI DSL · 左代码右渲染

代码差异 diff

带行号与红绿着色的代码差异容器。+/- 行染色，其余为上下文行。原始内容模式：内部 [ 当字面文本，直到 [/diff]。

属性	含义	示例
title	标题	title:修复登录校验
lang	语言标识	lang:js

1[diff title:修复登录校验 lang:js]

2 - function login(user) {\n- return true;\n- }\n+ function login(user, pwd) {\n+ if (!user || !pwd) return false;\n+ return verify(user, pwd);\n+ }

3[/diff]

加载 TokUI…

TokUI DSL · 左代码右渲染

内容用 \n 换行，+ 开头为新增行（绿）、- 开头为删除行（红）、其余为上下文行（灰）。

执行计划 plan / plan-step

任务计划清单容器。plan 标题，每个 plan-step 表示一步，status 着色。

属性	含义	适用
tt	计划标题	plan
status	步骤状态（pending/running/done/error/skipped）	plan-step
tt	步骤标题	plan-step
desc	步骤描述	plan-step

1[plan tt:重构登录模块]

2 [plan-step status:done tt:梳理现有代码]

3 [plan-step status:done tt:抽取校验逻辑]

4 [plan-step status:running tt:替换为新组件 desc:迁移到 TokUI form 组件]

5 [plan-step status:pending tt:补充单元测试]

6[/plan]

加载 TokUI…

TokUI DSL · 左代码右渲染

Agent 状态 agent

智能体协作卡片，显示名称、状态、动作、耗时，支持流式状态更新。

属性	含义	示例
name	名称	name:资料研究员
status	状态（idle/running/paused/done/error）	status:running
action	当前动作	action:正在检索文档
duration	耗时	duration:8s
id	标识（可被 upd 更新状态）	id:agent1

1[agent name:资料研究员 status:running action:正在检索文档]

2[p 已查阅 12 篇资料…[/agent]

3[agent name:代码工程师 status:done action:已生成代码 duration:8s]

4[p 完成实现。[/agent]

5[agent name:测试工程师 status:paused action:等待人工确认]

6[/agent]

加载 TokUI…

TokUI DSL · 左代码右渲染

文件树 file-tree / ft-folder / ft-file

文件树容器，子节点 ft-folder（可嵌套）和 ft-file（叶节点）。

属性	含义	适用
name	名称	两者
open	默认展开	ft-folder
badge	角标（如 M 修改 / A 新增 / D 删除）	ft-file

1[file-tree]

2 [ft-folder name:src open]

3 [ft-folder name:components open]

4 [ft-file name:basic.js badge:M]

5 [ft-file name:form.js badge:A]

6 [/ft-folder]

7 [ft-file name:lib.js]

8 [/ft-folder]

9 [ft-folder name:tests]

10 [ft-file name:test-parser.js badge:D]

11 [/ft-folder]

12 [ft-file name:package.json badge:M]

13[/file-tree]

加载 TokUI…

TokUI DSL · 左代码右渲染

终端 terminal

终端命令与输出容器。title 窗口标题、status 执行结果状态。原始内容模式：内部 [ 当字面文本。

属性	含义	示例
title	窗口标题	title:bash
status	执行状态	status:success

1[terminal title:bash status:success]

2 $ npm install\n$ npm run dev\n\n✓ 服务已启动: http://localhost:5173

3[/terminal]

加载 TokUI…

TokUI DSL · 左代码右渲染

代码沙盒 sandbox

带预览的代码沙箱容器，可执行 HTML/CSS/JS。原始内容模式：内部 [ 当字面文本，到 [/sandbox] 闭合。

属性	含义	示例
lang	语言	lang:html
title	标题	title:实时预览
height	预览高度	height:160

1[sandbox title:Hello 卡片 lang:html height:160]

2 <div style="padding:24px;font-family:sans-serif;text-align:center">\n <h2 style="color:#4f46e5">Hello TokUI</h2>\n <button style="padding:8px 16px;background:#4f46e5;color:#fff;border:0;border-radius:6px">点我</button>\n</div>

3[/sandbox]

加载 TokUI…

TokUI DSL · 左代码右渲染

测试结果 test-result / test-case（简写 case）

测试运行总结容器，子节点 test-case（可简写为 case，两者等价）列出每个用例（pass 绿 / fail 红 + 错误 / skip 灰）。

属性	含义	适用	示例
pass / fail / skip	通过/失败/跳过计数	test-result	pass:3 fail:1
total	总数	test-result	total:5
duration	总耗时	test-result	duration:"2.4s"
status	用例状态（pass/fail/skip）	test-case / case	status:fail
name	用例名（含空格须双引号）	test-case / case	name:"解析基础标签"
duration	单条耗时	test-case / case	duration:"0.12s"
error	错误信息（fail 时，含空格/括号须双引号）	test-case / case	error:"Expected [/card]"

name/error 含空格或 [ ] 必须双引号包裹，否则被截断或误解析。

1[test-result pass:3 fail:1 skip:1 total:5 duration:"2.4s"]

2 [case status:pass name:"解析基础标签" duration:"0.12s"]

3 [test-case status:pass name:"流式增量渲染" duration:"0.34s"]

4 [case status:fail name:"嵌套容器闭合" duration:"0.08s" error:"Expected [/card] but got EOF"]

5 [case status:skip name:"SSE 长连接测试"]

6 [test-case status:pass name:"属性引号处理" duration:"0.21s"]

7[/test-result]

加载 TokUI…

TokUI DSL · 左代码右渲染

1[test-result pass:24 fail:1 skip:2 total:27 duration:1.8s]

2 [test-case status:pass name:解析器解析简单标签 duration:2ms]

3 [test-case status:pass name:容器嵌套闭合 duration:5ms]

4 [test-case status:fail name:原始内容模式 duration:3ms error:Expected [/code]

5 but got EOF]

6 [test-case status:skip name:流式压力测试]

7[/test-result]

加载 TokUI…

TokUI DSL · 左代码右渲染

Git 提交 commit

Git 提交信息卡片，自闭合。

属性	含义	示例
hash	提交哈希（取前 7 位）	hash:abc1234
msg	提交信息（含空格须双引号）	msg:"fix: 修复登录校验"
author	作者	author:sdxiaomu
branch	分支	branch:master
time	时间（含空格须双引号）	time:"2 小时前"
additions / deletions	增/删行数	additions:12 deletions:5

msg/time 等含空格的值必须用双引号包裹，否则会在第一个空格处被截断（msg:fix login bug 只取 fix）。

1[commit hash:dbc08be msg:"扩展案例库，优化模型配置" author:sdxiaomu branch:master time:"刚刚" additions:128 deletions:24]

2[commit hash:a6d758e msg:"docs: 配置 VitePress 文档站" author:sdxiaomu branch:master time:"1 天前" additions:56 deletions:8]

加载 TokUI…

TokUI DSL · 左代码右渲染

消息引用 quote

引用历史消息容器，role 来源角色、tx 引用文本、msgid 原消息标识。

属性	含义	示例
role	来源角色	role:user
tx	引用文本	tx:之前的提问
msgid	原消息 ID	msgid:m1

1[bubble role:ai]

2[quote role:user tx:之前你提到 TokUI 支持流式渲染，能再讲讲吗？]

3[/quote]

4[p 当然，TokUI 通过 SSE 推送增量 DSL 片段…[/bubble]

加载 TokUI…

TokUI DSL · 左代码右渲染

延迟标记 latency

模型响应延迟/吞吐指标，自闭合。v 数值、t 类型（如 ttfb 首字节时间、tok/s 每秒 token）。

属性	含义	示例
v	数值	v:320ms
t	类型标签	t:ttfb

1[toolbar align:right]

2 [latency v:320ms t:ttfb]

3 [latency v:48 tok/s t:throughput]

4[/toolbar]

加载 TokUI…

TokUI DSL · 左代码右渲染

视频 video / 音频 audio

媒体播放器，均自闭合。

属性	含义	适用
s	媒体地址	两者
poster	封面图	video
tt	标题	audio
duration	时长	audio

1[video s:https://www.w3schools.com/html/mov_bbb.mp4 poster:https://picsum.photos/seed/poster/640/360]

2[audio s:https://www.w3schools.com/html/horse.mp3 tt:演示音频 duration:0:48]

加载 TokUI…

TokUI DSL · 左代码右渲染

会话列表 conversations / conv

侧边会话历史列表容器，子节点 conv 表示单条会话。

属性	含义	适用	示例
clk	统一切换处理器	conversations	clk:onSwitch
act	动作端点	conversations	act:conv-1
tt	会话标题（含空格须双引号）	conv	tt:"如何接入 SSE"
time	时间（含空格须双引号）	conv	time:"今天 14:20"
active	当前选中	conv	active
act	单条动作	conv	act:conv-2

tt/time 含空格必须双引号，否则在第一个空格处截断。

1[conversations]

2 [conv tt:"如何接入 SSE" time:"刚刚" active]

3 [conv tt:"DSL 语法学习" time:"今天 14:20"]

4 [conv tt:"主题定制方案" time:"昨天"]

5 [conv tt:"表格组件用法" time:"3 天前"]

6[/conversations]

加载 TokUI…

TokUI DSL · 左代码右渲染

欢迎页 welcome / welcome-feature（简写 feature）

新会话欢迎页容器，子节点 welcome-feature（可简写为 feature，自闭合，两者等价）为功能特性卡片。

属性	含义	适用	示例
tt	标题	welcome	tt:"你好，我是助手"
st	副标题	welcome	st:"有什么可以帮你？"
tt	卡片标题	welcome-feature / feature	tt:写代码
tx	卡片描述	welcome-feature / feature	tx:"生成与调试代码"
i	图标（code / chart / doc）	welcome-feature / feature	i:chart
clk	点击处理器	welcome-feature / feature	clk:onPick

[feature tt:x tx:y i:code] 自闭合（推荐）；[welcome-feature ...][/welcome-feature] 为容器写法，效果相同。卡片由属性驱动，每个标签到达即渲染（真流式）。

1[welcome tt:"你好，我是 TokUI 助手" st:"有什么可以帮你？"]

2 [feature tt:写代码 tx:"生成与调试代码" i:code clk:a]

3 [feature tt:画图表 tx:"用纯 SVG 渲染数据" i:chart clk:b]

4 [feature tt:查文档 tx:"检索与总结资料" i:doc clk:c]

5[/welcome]

加载 TokUI…

TokUI DSL · 左代码右渲染

附件 attachments / attach

附件上传/列表容器，子节点 attach 为单个附件项。attach 的 t 决定文件类型图标颜色。

属性	含义	适用
clk	删除/点击处理器	attachments
t	文件类型（image/pdf/word/excel/ppt/zip/code/video/audio）	attach
s	文件名	attach
u	下载地址	attach
size	大小	attach
clk	点击处理器	attach

1[attachments clk:onRemove]

2 [attach t:pdf s:需求文档.pdf size:2.4 MB u:#]

3 [attach t:code s:app.js size:12 KB u:#]

4 [attach t:image s:设计稿.png size:580 KB u:https://picsum.photos/seed/att/120/80]

5 [attach t:excel s:数据统计.xlsx size:32 KB u:#]

6[/attachments]

加载 TokUI…

TokUI DSL · 左代码右渲染

Artifact artifact / artifact-code / artifact-preview

侧边预览面板 Artifact 容器，内部用 artifact-code 放代码槽、artifact-preview 放实时预览槽。

属性	含义	适用
tt	标题	artifact
lang	语言	artifact
pos	面板位置	artifact
w	面板宽度	artifact

1[artifact tt:登录卡片 lang:html]

2 [artifact-code]

3 <div class="card">\n <h3>登录</h3>\n <input placeholder="用户名"/>\n <input placeholder="密码"/>\n <button>提交</button>\n</div>

4 [/artifact-code]

5 [artifact-preview]

6 <div style="padding:16px;font-family:sans-serif"><h3 style="margin:0 0 8px">登录</h3><input placeholder="用户名" style="display:block;margin-bottom:8px;padding:6px"/><input placeholder="密码" style="display:block;margin-bottom:8px;padding:6px"/><button style="padding:6px 12px;background:#4f46e5;color:#fff;border:0;border-radius:4px">提交</button></div>

7 [/artifact-preview]

8[/artifact]

加载 TokUI…

TokUI DSL · 左代码右渲染

对话输入 chat-input

对话输入框容器，含发送按钮。auto 自适应高度、rows 默认行数、max 最大字符数。

属性	含义	示例
ph	占位符	ph:输入消息…
clk	发送处理器	clk:onSend
dis	禁用	dis
auto	自适应高度	auto
rows	默认行数	rows:3
max	最大字符	max:2000

1[chat-input ph:输入消息，按 Enter 发送 clk:onSend auto rows:2]

2[/chat-input]

加载 TokUI…

TokUI DSL · 左代码右渲染

消息操作 msg-actions

气泡底部消息操作栏容器，支持复制 / 重新生成 / 赞踩等开关。

属性	含义	示例
clk	通用处理器	clk:onAct
copy	显示复制	copy
regenerate	显示重新生成	regenerate
like / dislike	赞踩	like
visible	常驻可见（默认悬停）	visible

1[bubble role:ai]

2[p 这是一段可操作的 AI 回复。[/bubble]

3[msg-actions copy regenerate like dislike visible]

4[/msg-actions]

加载 TokUI…

TokUI DSL · 左代码右渲染

赞踩 thumb

点赞 / 点踩按钮，自闭合。t 决定形态。

属性	含义	示例
t	类型（like / dislike）	t:like
clk	点击处理器	clk:onLike
v	状态/数值	v:12

1[toolbar]

2 [thumb t:like v:12 clk:onLike]

3 [thumb t:dislike clk:onDislike]

4[/toolbar]

加载 TokUI…

TokUI DSL · 左代码右渲染

综合示例：一段真实 AI 回复

把气泡、思考链、工具调用、引用来源、Markdown 与操作栏组合成一段贴近真实场景的 AI 回复。

1[bubble role:user]

2[p 帮我查一下 TokUI 的最新特性并写一个登录卡片。[/bubble]

3[bubble role:ai model:GLM-5.2 time:刚刚]

4 [think-chain tt:推理过程]

5 [think-step status:done tt:理解需求 dur:0.2s]

6 [p 搜索资料 + 生成代码[/think-step]

7 [think-step status:done tt:联网检索 dur:1.1s]

8 [p 找到 3 条结果[/think-step]

9 [think-step status:done tt:生成代码 dur:3.4s]

10 [/think-step]

11 [/think-chain]

12 [tool-call name:web_search status:done duration:1.1s]

13 [p 检索「TokUI 最新特性」完成。[/tool-call]

14 [md]

15 根据检索结果，TokUI 的核心特性：- **零依赖** 纯原生实现- **流式渲染** 基于 SSE- **组件丰富** 覆盖 AI 对话全场景

16 [/md]

17 [quote role:user tx:写一个登录卡片]

18 [/quote]

19 [artifact tt:登录卡片 lang:html]

20 [artifact-code]

21 <form class="login">\n <input name="user" placeholder="用户名"/>\n <input name="pwd" type="password"/>\n <button type="submit">登录</button>\n</form>

22 [/artifact-code]

23 [/artifact]

24 [p v:muted 来源：]

25 [source n:1 tt:TokUI 官方文档 sn:零依赖流式 UI 框架 u:#]

26 [source n:2 tt:SSE 协议 sn:服务端实时推送 u:#]

27 [msg-actions copy regenerate like dislike visible]

28 [/msg-actions]

29[/bubble]

加载 TokUI…

TokUI DSL · 左代码右渲染

提示：clk: / sub: 指向的处理器需通过 TokUI.registerHandler(name, fn) 预先注册，DSL 本身不含可执行代码。完整属性表见 DSL 语法参考 第 5.3–5.4 节。