API 聊天機器人教學步驟 1-3

使用普通 JavaScript（無框架）建立單文件 HTML 聊天機器人。僅輸出完整文件。佈局 - 行動優先：手機上全屏，桌面上 420 像素居中卡片。 - 藍色標題顯示模型名稱，左側白色機器人氣泡，右側藍色用戶氣泡，帶有發送按鈕的黏性輸入欄。 - 尊重安全區域插入並使用 100dvh，這樣鍵盤就不會破壞佈局。 CONFIG - 腳本頂部的常數：API_URL、API_KEY、MODEL、MAX_TURNS = 12、SYSTEM_MSG、WELCOME。 - 使用小米 Mimo 代幣計畫的範例：const API_URL = 'https://token-plan-sgp.xiaomimimo.com/v1/chat/completions'; const API_KEY = 'API_Key_Placeholder'; // Mimo 模型 const MODEL = 'mimo-v2.6-pro'sholder'; // Mimo 模型 const MODEL = 'mimo-v2.6-prod-v2.6-procUR = 1 = 1:207; '系統', content: '你是個有用的助手。 ' }; API - 使用 fetch 和 stream: true 呼叫 OpenAI 相容的 /v1/chat/completions 端點。 - 解析 SSE 流（資料：{...} 行和 [DONE]）並處理中線分割的區塊。渲染 - 串流時，用閃爍的遊標顯示純文字。 - 回覆完成後，使用marked.js 渲染Markdown 並使用DOMPurify 進行清理（從CDN 載入兩者）。 - 程式碼區塊和表格必須在氣泡內水平滾動，並且永遠不會溢出螢幕。行為 - 保留對話內存，修剪到最後的 MAX_TURNS 回合加上系統訊息。 - 鍵入/刪除會清除聊天和記憶體。 - 在回覆串流時停用輸入；輸入後發送。 - 如果請求失敗，請在氣泡中顯示友善錯誤，並且不要儲存損壞的轉彎。 - 考慮邊緣情況：部分 SSE 區塊、中途錯誤、空回復和歷史記錄修剪。