AI Chat Components

Components built for AI chat scenarios: message bubbles, reasoning chains, tool calls, agent status, plans and test results, cited sources, code diffs, terminals, file trees, artifacts, and more. Each example shows the formatted, highlighted TokUI DSL on the left and the live render on the right; click "Edit" to tweak it instantly.

Reasoning Block `think`

A collapsible reasoning-process container, closed by [/think]. open expands by default, tt sets the title.

Prop	Meaning	Example
`tt`	Title	`tt:思考过程`
`open`	Expanded by default	`open`

1[think open tt:思考过程]

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

3[think tt:已折叠]

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

Loading TokUI…

TokUI DSL · code ↔ render

Reasoning Chain `think-chain` / `think-step`

A step-by-step reasoning container. think-chain sets the overall title; each think-step shows its status, title, and duration.

Prop	Meaning	Applies to
`tt`	Overall title	`think-chain`
`status`	Step status (`pending`/`running`/`done`/`error`)	`think-step`
`tt`	Step title	`think-step`
`dur`	Duration	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Chat Bubble `bubble`

A chat message container. role aligns the bubble left/right; model and time appear in the meta row.

Prop	Meaning	Example
`role`	Role (`user` / `ai`)	`role:ai`
`model`	Model name (AI side)	`model:GLM-5.2`
`time`	Time text	`time:刚刚`

1[bubble role:user]

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

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

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

Loading TokUI…

TokUI DSL · code ↔ render

Toolbar `toolbar`

A horizontal action bar, usually placed at the top or bottom of a bubble.

Prop	Meaning	Example
`pos`	Position	`pos:bottom`
`align`	Alignment	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Tool Call `tool-call`

A tool/function-call card showing the name, status, and duration. Status is color-coded: pending/running/done/error/denied.

Prop	Meaning	Example
`name`	Tool name	`name:web_search`
`status`	Status	`status:done`
`duration`	Duration	`duration:1.2s`
`id`	Identifier (updatable via `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]

Loading TokUI…

TokUI DSL · code ↔ render

Typing Indicator `typing`

A "typing" three-dot animation, self-closing. text shows text alongside it.

Prop	Meaning	Example
`text`	Hint text	`text:思考中`

1[bubble role:ai]

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

3[/bubble]

Loading TokUI…

TokUI DSL · code ↔ render

Quick Reply `quick-reply`

A one-line quick-reply suggestion, self-closing container. items separates multiple suggestions with |.

Prop	Meaning	Example
`items`	Suggestion list (`	`-separated)

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

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

3[/quick-reply]

Loading TokUI…

TokUI DSL · code ↔ render

Suggestion Cards `suggestions` / `suggestion`

A grid suggestion container; child suggestion nodes show title, description, and icon. cols on suggestions controls the column count.

Prop	Meaning	Applies to
`cols`	Column count	`suggestions`
`clk`	Unified click handler	`suggestions`
`tt`	Title	`suggestion`
`tx`	Description	`suggestion`
`icon`	Icon	`suggestion`
`clk`	Click handler	`suggestion`
`dis`	Disabled	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Cited Source `source`

A cited retrieval source / reference, self-closing. Typically listed as numbered [1] [2] citations under a "web search" answer.

Prop	Meaning	Example
`n`	Index	`n:1`
`tt`	Title (quote if it has spaces)	`tt:"TokUI 官方文档"`
`sn`	Snippet excerpt (quote if it has spaces)	`sn:"零依赖流式 UI…"`
`u` / `url`	Link	`u:https://example.com`

tt/sn values containing spaces must be double-quoted, otherwise they get truncated at the first space.

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]

Loading TokUI…

TokUI DSL · code ↔ render

Code Diff `diff`

A code-diff container with line numbers and red/green coloring. +/- lines are colored; other lines are context. Raw content mode: inner [ is treated as literal text until [/diff].

Prop	Meaning	Example
`title`	Title	`title:修复登录校验`
`lang`	Language tag	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Use \n for line breaks: lines starting with + are additions (green), - are deletions (red), and the rest are context lines (gray).

Execution Plan `plan` / `plan-step`

A task-plan checklist container. plan sets the title; each plan-step is one step, color-coded by status.

Prop	Meaning	Applies to
`tt`	Plan title	`plan`
`status`	Step status (`pending`/`running`/`done`/`error`/`skipped`)	`plan-step`
`tt`	Step title	`plan-step`
`desc`	Step description	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Agent Status `agent`

An agent-collaboration card showing name, status, current action, and duration; supports streaming status updates.

Prop	Meaning	Example
`name`	Name	`name:资料研究员`
`status`	Status (`idle`/`running`/`paused`/`done`/`error`)	`status:running`
`action`	Current action	`action:正在检索文档`
`duration`	Duration	`duration:8s`
`id`	Identifier (status updatable via `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]

Loading TokUI…

TokUI DSL · code ↔ render

File Tree `file-tree` / `ft-folder` / `ft-file`

A file-tree container with ft-folder children (nestable) and ft-file leaves.

Prop	Meaning	Applies to
`name`	Name	both
`open`	Expanded by default	`ft-folder`
`badge`	Badge (e.g. `M` modified / `A` added / `D` deleted)	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Terminal `terminal`

A container for terminal commands and output. title is the window title; status is the execution result status. Raw content mode: inner [ is treated as literal text.

Prop	Meaning	Example
`title`	Window title	`title:bash`
`status`	Execution status	`status:success`

1[terminal title:bash status:success]

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

3[/terminal]

Loading TokUI…

TokUI DSL · code ↔ render

Code Sandbox `sandbox`

A code-sandbox container with live preview that can execute HTML/CSS/JS. Raw content mode: inner [ is treated as literal text, closed by [/sandbox].

Prop	Meaning	Example
`lang`	Language	`lang:html`
`title`	Title	`title:实时预览`
`height`	Preview 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]

Loading TokUI…

TokUI DSL · code ↔ render

Test Results `test-result` / `test-case` (shorthand `case`)

A test-run summary container; child test-case nodes (shorthand case, equivalent) list each individual case (pass green / fail red + error / skip gray).

Prop	Meaning	Applies to	Example
`pass` / `fail` / `skip`	Pass / fail / skip counts	`test-result`	`pass:3 fail:1`
`total`	Total count	`test-result`	`total:5`
`duration`	Total duration	`test-result`	`duration:"2.4s"`
`status`	Case status (`pass`/`fail`/`skip`)	`test-case` / `case`	`status:fail`
`name`	Case name (quote if it has spaces)	`test-case` / `case`	`name:"parser: basic tags"`
`duration`	Single-case duration	`test-case` / `case`	`duration:"0.12s"`
`error`	Error message (on `fail`; quote if spaces/brackets)	`test-case` / `case`	`error:"Expected [/card]"`

name/error containing spaces or [ ] must be double-quoted, otherwise they get truncated or misparsed.

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

2 [case status:pass name:"parser: basic tags" duration:"0.12s"]

3 [test-case status:pass name:"streaming incremental render" duration:"0.34s"]

4 [case status:fail name:"nested container close" duration:"0.08s" error:"Expected [/card] but got EOF"]

5 [case status:skip name:"SSE long-connection stress"]

6 [test-case status:pass name:"attr quote handling" duration:"0.21s"]

7[/test-result]

Loading TokUI…

TokUI DSL · code ↔ render

Git Commit `commit`

A git-commit info card, self-closing.

Prop	Meaning	Example
`hash`	Commit hash (first 7 chars)	`hash:abc1234`
`msg`	Commit message (quote if it has spaces)	`msg:"fix: login validation"`
`author`	Author	`author:sdxiaomu`
`branch`	Branch	`branch:master`
`time`	Time (quote if it has spaces)	`time:"2 hours ago"`
`additions` / `deletions`	Added / deleted lines	`additions:12 deletions:5`

Values with spaces (e.g. msg, time) must be double-quoted, otherwise they get truncated at the first space (msg:fix login bug yields only 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]

Loading TokUI…

TokUI DSL · code ↔ render

Message Quote `quote`

A container that quotes a historical message: role for the source role, tx for the quoted text, msgid for the original message identifier.

Prop	Meaning	Example
`role`	Source role	`role:user`
`tx`	Quoted text	`tx:之前的提问`
`msgid`	Original message ID	`msgid:m1`

1[bubble role:ai]

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

3[/quote]

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

Loading TokUI…

TokUI DSL · code ↔ render

Latency Marker `latency`

A model-response latency / throughput indicator, self-closing. v is the value; t is the type (e.g. ttfb for time-to-first-byte, tok/s for tokens per second).

Prop	Meaning	Example
`v`	Value	`v:320ms`
`t`	Type label	`t:ttfb`

1[toolbar align:right]

2 [latency v:320ms t:ttfb]

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

4[/toolbar]

Loading TokUI…

TokUI DSL · code ↔ render

Video `video` / Audio `audio`

Media players; both are self-closing.

Prop	Meaning	Applies to
`s`	Media URL	both
`poster`	Cover image	`video`
`tt`	Title	`audio`
`duration`	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]

Loading TokUI…

TokUI DSL · code ↔ render

Conversation List `conversations` / `conv`

A sidebar conversation-history container; child conv nodes are individual conversations.

Prop	Meaning	Applies to	Example
`clk`	Unified switch handler	`conversations`	`clk:onSwitch`
`act`	Action endpoint	`conversations`	`act:conv-1`
`tt`	Conversation title (quote if spaces)	`conv`	`tt:"How to use SSE"`
`time`	Time (quote if spaces)	`conv`	`time:"today 14:20"`
`active`	Currently selected	`conv`	`active`
`act`	Single-item action	`conv`	`act:conv-2`

tt/time with spaces must be double-quoted, otherwise truncated at the first space.

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]

Loading TokUI…

TokUI DSL · code ↔ render

Welcome Screen `welcome` / `welcome-feature` (shorthand `feature`)

A new-session welcome-screen container; child welcome-feature nodes (shorthand feature, self-closing, equivalent) are feature cards.

Prop	Meaning	Applies to	Example
`tt`	Title	`welcome`	`tt:"Hi, I'm the assistant"`
`st`	Subtitle	`welcome`	`st:"How can I help?"`
`tt`	Card title	`welcome-feature` / `feature`	`tt:Write code`
`tx`	Card description	`welcome-feature` / `feature`	`tx:"Generate & debug code"`
`i`	Icon (`code` / `chart` / `doc`)	`welcome-feature` / `feature`	`i:chart`
`clk`	Click handler	`welcome-feature` / `feature`	`clk:onPick`

[feature tt:x tx:y i:code] is self-closing (recommended); [welcome-feature ...][/welcome-feature] is the container form — equivalent. Cards are attr-driven and render as each tag arrives (true streaming).

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]

Loading TokUI…

TokUI DSL · code ↔ render

Attachments `attachments` / `attach`

An attachment-upload / list container; child attach nodes are individual attachment items. The t on attach decides the file-type icon color.

Prop	Meaning	Applies to
`clk`	Delete / click handler	`attachments`
`t`	File type (`image`/`pdf`/`word`/`excel`/`ppt`/`zip`/`code`/`video`/`audio`)	`attach`
`s`	File name	`attach`
`u`	Download URL	`attach`
`size`	Size	`attach`
`clk`	Click handler	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Artifact `artifact` / `artifact-code` / `artifact-preview`

A side-preview Artifact container: use artifact-code for the code slot and artifact-preview for the live-preview slot inside.

Prop	Meaning	Applies to
`tt`	Title	`artifact`
`lang`	Language	`artifact`
`pos`	Panel position	`artifact`
`w`	Panel width	`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]

Loading TokUI…

TokUI DSL · code ↔ render

Chat Input `chat-input`

A chat-input container with a send button. auto enables auto-growing height, rows sets the default row count, and max is the max character count.

Prop	Meaning	Example
`ph`	Placeholder	`ph:输入消息…`
`clk`	Send handler	`clk:onSend`
`dis`	Disabled	`dis`
`auto`	Auto-grow height	`auto`
`rows`	Default rows	`rows:3`
`max`	Max characters	`max:2000`

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

2[/chat-input]

Loading TokUI…

TokUI DSL · code ↔ render

Message Actions `msg-actions`

A message-action bar container at the bottom of a bubble; supports copy / regenerate / like-dislike toggles.

Prop	Meaning	Example
`clk`	Generic handler	`clk:onAct`
`copy`	Show copy	`copy`
`regenerate`	Show regenerate	`regenerate`
`like` / `dislike`	Like / dislike	`like`
`visible`	Always visible (default: hover)	`visible`

1[bubble role:ai]

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

3[msg-actions copy regenerate like dislike visible]

4[/msg-actions]

Loading TokUI…

TokUI DSL · code ↔ render

Thumbs `thumb`

A like / dislike button, self-closing. t decides the variant.

Prop	Meaning	Example
`t`	Type (`like` / `dislike`)	`t:like`
`clk`	Click handler	`clk:onLike`
`v`	State / value	`v:12`

1[toolbar]

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

3 [thumb t:dislike clk:onDislike]

4[/toolbar]

Loading TokUI…

TokUI DSL · code ↔ render

Comprehensive Example: A Real AI Reply

Combining bubble, reasoning chain, tool call, cited sources, markdown, and an action bar into a realistic AI reply.

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]

Loading TokUI…

TokUI DSL · code ↔ render

Tip: handlers referenced by clk: / sub: must be pre-registered via TokUI.registerHandler(name, fn); the DSL itself carries no executable code. For the full prop tables, see sections 5.3–5.4 of the DSL syntax reference.

AI Chat Components ​

Reasoning Block think ​

Reasoning Chain think-chain / think-step ​

Chat Bubble bubble ​

Toolbar toolbar ​

Tool Call tool-call ​

Typing Indicator typing ​

Quick Reply quick-reply ​

Suggestion Cards suggestions / suggestion ​

Cited Source source ​

Code Diff diff ​

Execution Plan plan / plan-step ​

Agent Status agent ​

File Tree file-tree / ft-folder / ft-file ​

Terminal terminal ​

Code Sandbox sandbox ​

Test Results test-result / test-case (shorthand case) ​

Git Commit commit ​

Message Quote quote ​

Latency Marker latency ​

Video video / Audio audio ​

Conversation List conversations / conv ​

Welcome Screen welcome / welcome-feature (shorthand feature) ​

Attachments attachments / attach ​

Artifact artifact / artifact-code / artifact-preview ​

Chat Input chat-input ​

Message Actions msg-actions ​

Thumbs thumb ​

Comprehensive Example: A Real AI Reply ​

AI Chat Components

Reasoning Block `think`

Reasoning Chain `think-chain` / `think-step`

Chat Bubble `bubble`

Toolbar `toolbar`

Tool Call `tool-call`

Typing Indicator `typing`

Quick Reply `quick-reply`

Suggestion Cards `suggestions` / `suggestion`

Cited Source `source`

Code Diff `diff`

Execution Plan `plan` / `plan-step`

Agent Status `agent`

File Tree `file-tree` / `ft-folder` / `ft-file`

Terminal `terminal`

Code Sandbox `sandbox`

Test Results `test-result` / `test-case` (shorthand `case`)

Git Commit `commit`

Message Quote `quote`

Latency Marker `latency`

Video `video` / Audio `audio`

Conversation List `conversations` / `conv`

Welcome Screen `welcome` / `welcome-feature` (shorthand `feature`)

Attachments `attachments` / `attach`

Artifact `artifact` / `artifact-code` / `artifact-preview`

Chat Input `chat-input`

Message Actions `msg-actions`

Thumbs `thumb`

Comprehensive Example: A Real AI Reply