对话演示 <ChatDemo />

左边标题、导语和 0–3 条小注，右边一个手搓的聊天窗口，最后一条回复可以带结果卡片。窗口上始终标着「示意界面」。配 build: 'reveal' 时每按一次 → 出现一条消息。

分组: 拟真界面 · 用一段对话展示怎么用
组件: ChatDemo · #chat-demo
交互: 按 → 逐条出现对话

适合

工具、助手、客服类产品：展示一次典型的交互
比列功能更直观的场合

不适合

有真实截图：用 Screenshot 或 TiltShot
对话超过 5 条：拆页

内容上限

1	title ≤ 2 行 × 10 字
2	lead ≤ 50 字
3	messages 2–5 条，每条 ≤ 40 字
4	card 2–4 行
5	notes 0–3 条，每条 ≤ 20 字
6	app 不用真实品牌名，除非是你自己的产品
7	source 写明是示意

字段

字段	类型
`kicker` · 必填	`string`	小节名
`title` · 必填	`string \| string[]`	标题
`lead`	`string`	导语
`app` · 必填	`string`	窗口名
`messages` · 必填	`{ from: 'user' \| 'bot', text, card?: { title, rows: [label, value][] } }[]`	对话
`notes`	`string[]`	小注
`label`	`string`	窗口标签，默认「示意界面」
`source`	`string`	出处或示意说明

示例代码

<ChatDemo
  kicker="对话演示"
  title={['一句话，', '换一份演示']}
  app="写作助手"
  messages={[{ from: 'user', text: '…' }, { from: 'bot', text: '…', card: { title: 'check 结果', rows: [['问题', '0']] } }]}
  source="示意界面"
/>