對話簡報 <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="示意介面"
/>