腳本式對話展示

把一段寫好的對話腳本變成會自己播放的聊天畫面，適合放在產品首頁、功能介紹或客服流程說明。使用者訊息從右下以 spring 彈入並帶輕微 overshoot；助理回覆前先出現三點打字指示，接著氣泡從左彈入、文字逐字串流，附帶的程式碼區塊則逐行出現並帶行號與複製按鈕。進入視口才開始播放，有新內容時自動捲到底；開啟 loop 會在播完後淡出清空、從頭再來。可選 frame="phone" 包進簡化的 CSS 手機殼。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ScriptedChatThread/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/scripted-chat-thread.json

使用

import { ScriptedChatThread } from "@/components/ui/scripted-chat-thread";

<ScriptedChatThread
  frame="phone"
  loop
  messages={[
    { role: "user", content: "我的訂單三天了還沒出貨" },
    { role: "assistant", content: "抱歉讓你久等了！方便提供訂單編號嗎？" },
    { role: "user", content: "#BK20261025" },
    {
      role: "assistant",
      typingMs: 1200,
      content: "已完成揀貨，預計明天出貨。查詢範例：",
      code: {
        lang: "ts",
        text: 'const res = await fetch("https://api.example.com/v1/orders/BK20261025");',
      },
    },
  ]}
  onComplete={() => console.log("播放完成")}
/>

需要手動控制播放時，傳入 ref 取得 restart()：

const threadRef = React.useRef<ScriptedChatThreadHandle>(null);

<ScriptedChatThread ref={threadRef} autoplay={false} messages={script} />
<button onClick={() => threadRef.current?.restart()}>重新播放</button>

Props

ScriptedChatMessage

ScriptedChatCode

ScriptedChatSpring

ScriptedChatThreadHandle

細節

• 播放節奏：使用者氣泡彈入後停 400ms；助理先顯示打字指示 typingMs，再逐字串流（每字 charMs），程式碼以逐行串流（每行 charMs × 8）；每則訊息之間間隔 gapMs。
• 自動捲底：只有使用者原本就在底部（距底小於 24px）時才會跟著捲；往上捲會暫停跟隨並顯示「回到最新」小按鈕，按下即回到底部繼續跟隨。
• messages 以內容比對，寫成 inline 陣列也不會因父層重新渲染而重播。
• CSS 變數：--wb-sct-char-ms 設定預設逐字速度（charMs prop 優先），--wb-sct-accent 設定頭像與游標的強調色。
• 可以把本元件放進 chat-scroller 內組合使用，但兩者互不依賴；本元件自己就有捲底與「回到最新」行為。

可及性

• 捲動容器為 role="log"、aria-live="polite"，以 ariaLabel（預設「對話示範」）命名
• 串流中的部分文字對輔助科技隱藏；訊息完成後才把完整文字（含發話者）放進可讀節點，避免螢幕閱讀器逐字朗讀
• 打字指示帶 sr-only「正在輸入」；程式碼的複製按鈕與「回到最新」、「播放對話」皆為 type="button"，有可見的 focus 外框
• 使用者系統開啟「減少動態效果」時，不彈入、不串流、不顯示打字指示，所有訊息以 150ms 淡入直接全部出現，onComplete 立即觸發