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';常量 MAX_TURNS = 12; const SYSTEM_MSG = { role: '系统', content: '你是一个有用的助手。' }; API - 使用 fetch 和 stream: true 调用 OpenAI 兼容的 /v1/chat/completions 端点。 - 解析 SSE 流（数据：{...} 行和 [DONE]）并处理中线分割的块。渲染 - 流式传输时，用闪烁的光标显示纯文本。 - 回复完成后，使用marked.js 渲染Markdown 并使用DOMPurify 对其进行清理（从CDN 加载两者）。 - 代码块和表格必须在气泡内水平滚动，并且永远不会溢出屏幕。行为 - 保留对话内存，修剪到最后的 MAX_TURNS 回合加上系统消息。 - 键入/删除会清除聊天和内存。 - 在回复流式传输时禁用输入；输入后发送。 - 如果请求失败，请在气泡中显示友好错误，并且不要保存损坏的转弯。 - 考虑边缘情况：部分 SSE 块、中途错误、空回复和历史记录修剪。