LIVE PREVIEW
AITalk · Ready
10:33
📶
🔋
×
和 咖啡師 對話中
⚙
Hi! Welcome. What can I get started for you today?
嗨!歡迎光臨。請問今天我可以為你準備什麼?
你可以這麼說
Hi! I would like to get a large latte, please.
嗨!我想要一杯大拿鐵,謝謝。
Large iced latte, please.
一杯大拿鐵,謝謝。
Hi! I would like to get a latte, please.
🎤
AI 對話錯誤互動模擬
點擊右側按鈕,觀察手機畫面如何呈現每種錯誤狀態
💡 每個情境會自動跑一段動畫,模擬真實的用戶體驗。底部會即時顯示對應的 server 錯誤代碼與技術細節。
🎬 按情境分類
📋 按開發階段
📝 文案 & 按鈕
👁 顯示控制
⏱ 正常流程 · FLOW
✅
完整成功流程
thinking → response
💭
Thinking 階段 (0–3s)
state: THINKING
⏳
Buffering (3–8s)
state: BUFFERING + cancel
⚠️
Warning (8–15s)
state: TIMEOUT_WARNING
🔴
Timeout(15 秒上限)
RESPONSE_TIMEOUT · 15s
▶
快轉演示(加速 3x 看完四階段)
fast-forward · 4 stages
⏱
真實速度走完四階段
realtime · 4 stages
🔌 後端錯誤 · BACKEND
💡 後端只處理四類錯誤:系統錯誤 / 連線超時 / 違反規則 / 上下文太長
⚠️
系統錯誤
BACKEND_SYSTEM_ERROR
🐢
連線超時
BACKEND_TIMEOUT
🚫
違反規則
CONTENT_BLOCKED
📜
上下文太長
CONTEXT_TOO_LONG
🎙 錄音狀態 · RECORDING
🔴
錄音中(含計時 + 取消 + 送出)
RECORDING_ACTIVE
✕
取消錄音
RECORDING_CANCEL
⏱
60 秒上限警告(加速 5x)
RECORDING_MAX_DURATION
🎤 麥克風初始化問題 · MIC INIT
💡 Client 開啟麥克風時的 8 種錯誤流程,每個會跳出對應的 Hint 提示(含錯誤代碼)
🔁
a. 麥克風使用中
MIC_IN_USE · 20006
🔌
b. 沒偵測到麥克風
MIC_NO_DEVICE · 20001
🔒
c. 沒有麥克風權限
MIC_PERMISSION · 20002
💾
d. Clip 載入失敗
MIC_INIT_FAIL · 20003
📥
e. 緩存沒寫入
MIC_INIT_FAIL · 20004
⛔
f. 音訊停止寫入 2s
MIC_ANOMALY · 20007
🤐
g. 開始 3s 無聲
MIC_NO_VOICE · 20005
🪫
h. 尾端 2s 靜音 → 空
MIC_NO_VOICE · 20005
🗣 語音辨識 · STT
❓
辨識信心低 → 確認
STT_LOW_CONFIDENCE
🗣️
完全辨識不出
STT_UNINTELLIGIBLE
🎛 訊息按鈕錯誤 · MESSAGE ACTIONS
💡 也可以
直接點對話泡泡裡的 icon
,錯誤會就地顯示
▶
播放聲音失敗
TTS_PLAYBACK_FAILED
✉
反饋送出失敗
FEEDBACK_SUBMIT_FAIL
💡
顯示翻譯失敗
TRANSLATE_SERVICE_DOWN
文A
查看字典失敗
DICT_LOOKUP_FAILED
🔍
搜尋失敗
SEARCH_FAILED
⚡
多鍵連點失敗
BATCH_ACTION_FAIL
📵
離線狀態點擊
ACTION_OFFLINE
📜 歷史紀錄 · HISTORY
💡 回看對話時,過去發生的錯誤如何呈現 —— 比即時錯誤
更淡
、
不閃爍
、
有時間戳
📭
用戶訊息未送達
history: user_msg_failed
⌛
AI 回應逾時
history: ai_no_response
✅
重試後成功
history: recovered
🚧
會話結束分隔
history: quota_exhausted
依照「沒這功能用戶會卡住」的程度分三階段
。 每項右側的
P1 / P2 / P3
可直接點擊把項目移到其他階段,左側項目本體點擊會跑模擬。
共
0
個項目
P1 ·
0
P2 ·
0
P3 ·
0
↺ 還原預設
即時調整每個錯誤情境的文字和按鈕。
修改後點「▶ 預覽」可在右側手機畫面看效果,或直接到「按情境分類」執行該情境。
💾 修改會
自動存在本機
(localStorage),下次打開頁面會自動還原;按「↺ 還原預設文案」可清掉本地覆寫。
🎨
文字顏色:
文字預設為黑色,若要標色請在文案中手動填入
<color=#色碼>文字</color>
(支援 3/6/8 碼 hex)。
按鈕顏色:
每顆按鈕可直接用色票挑底色與文字色,點 ↺ 還原預設。
⏱ 階段切換秒數:
⏱ 四階段切換點
回應等待流程共 4 階段:
thinking
→
buffering
→
warning
→
timeout
。每張卡片顯示該階段的開始秒數。中間兩階段可勾選隱藏(即由前一階段直接跳至下一階段)。
↺ 還原預設
① thinking(開始)
秒
固定從 0 秒起,顯示 dots 動畫
② buffering(開始)
秒
dots + 緩衝文案 + 取消鍵;取消勾選即略過
③ warning(開始)
秒
dots + 警告文案 + 行動按鈕;取消勾選即略過
④ timeout(觸發)
秒
進入逾時錯誤視圖,給出重試 / 重錄退路
共
0
個可編輯情境
⬇ 匯出 JSON
⬆ 匯入 JSON
↺ 還原預設文案
控制「按情境分類」第一頁的按鈕要不要顯示。
把不常用的情境收起來,讓常用的情境看起來更清楚。
💾 勾選會
自動存在本機
(localStorage),下次打開頁面會自動還原;按「↺ 全部顯示」可一次還原。
共
0
個按鈕 · 已隱藏
0
個
↺ 全部顯示
↺ 重置 · RESET
🔄
清除並重新開始
clear state
IDLE · 等待操作
點擊上方任一情境,會模擬對應的錯誤狀態。這個 demo 示範了
雙軌設計
:server 回傳結構化錯誤代碼,用戶只看到友善的行動引導。