AI 對話錯誤互動模擬

點擊右側按鈕,觀察手機畫面如何呈現每種錯誤狀態

💡 每個情境會自動跑一段動畫,模擬真實的用戶體驗。底部會即時顯示對應的 server 錯誤代碼與技術細節。

⏱ 正常流程 · FLOW

🔌 後端錯誤 · BACKEND

💡 後端只處理四類錯誤:系統錯誤 / 連線超時 / 違反規則 / 上下文太長

🎙 錄音狀態 · RECORDING

🎤 麥克風初始化問題 · MIC INIT

💡 Client 開啟麥克風時的 8 種錯誤流程,每個會跳出對應的 Hint 提示(含錯誤代碼)

🗣 語音辨識 · STT

🎛 訊息按鈕錯誤 · MESSAGE ACTIONS

💡 也可以直接點對話泡泡裡的 icon,錯誤會就地顯示

📜 歷史紀錄 · HISTORY

💡 回看對話時,過去發生的錯誤如何呈現 —— 比即時錯誤更淡、不閃爍、有時間戳

依照「沒這功能用戶會卡住」的程度分三階段。每項右側的 P1 / P2 / P3 可直接點擊把項目移到其他階段,左側項目本體點擊會跑模擬。

即時調整每個錯誤情境的文字和按鈕。
修改後點「▶ 預覽」可在右側手機畫面看效果,或直接到「按情境分類」執行該情境。
💾 修改會自動存在本機(localStorage),下次打開頁面會自動還原;按「↺ 還原預設文案」可清掉本地覆寫。
🎨 文字顏色:文字預設為黑色,若要標色請在文案中手動填入 <color=#色碼>文字</color>(支援 3/6/8 碼 hex)。按鈕顏色:每顆按鈕可直接用色票挑底色與文字色,點 ↺ 還原預設。
⏱ 階段切換秒數:

⏱ 四階段切換點

回應等待流程共 4 階段:thinking → buffering → warning → timeout。每張卡片顯示該階段的開始秒數。中間兩階段可勾選隱藏(即由前一階段直接跳至下一階段)。

① thinking(開始)

秒

固定從 0 秒起,顯示 dots 動畫

② buffering(開始)

秒

dots + 緩衝文案 + 取消鍵;取消勾選即略過

③ warning(開始)

秒

dots + 警告文案 + 行動按鈕;取消勾選即略過

④ timeout(觸發)

秒

進入逾時錯誤視圖,給出重試 / 重錄退路

🎙 錄音狀態變色

錄音進度條在秒數到達後換色,可自由新增 / 刪除色階(依秒數排序,最後一段觸發閃爍警告)。錄音最長 ${typeof MAX_RECORDING_SECONDS !== "undefined" ? MAX_RECORDING_SECONDS : 60}s。

控制「按情境分類」第一頁的按鈕要不要顯示。
把不常用的情境收起來,讓常用的情境看起來更清楚。
💾 勾選會自動存在本機(localStorage),下次打開頁面會自動還原;按「↺ 全部顯示」可一次還原。

↺ 重置 · RESET

IDLE · 等待操作

點擊上方任一情境,會模擬對應的錯誤狀態。這個 demo 示範了雙軌設計:server 回傳結構化錯誤代碼,用戶只看到友善的行動引導。