AI 对话界面

做一个 BYOK（Bring Your Own Key）的 AI 对话界面，类似 ChatGPT、Claude 或 Gemini 的风格。用户填入自己的 API Key 和 API 地址后，即可通过 OpenAI 兼容格式的接口与大模型进行真实流式对话。界面需正确渲染 AI 回复中的 Markdown 内容（标题、列表、代码块等）。请在界面上提醒用户：API Key 仅在当前浏览器会话中使用，不会被上传到任何第三方服务器，但请注意不要在不信任的设备上使用。请输出完整的单文件 HTML。

做一个单文件 HTML 的 BYOK AI 对话界面——用户填入自己的 API Key，即可与大模型进行真实的流式对话。 **整体布局：** - 桌面优先的双栏布局：左侧窄侧边栏（约 260px）+ 右侧主对话区 - 视觉风格可从现有 AI 聊天产品中选择一个作为参考（ChatGPT / Claude / Gemini 等），也可自行设计，但整体需现代、干净、专业 - 侧边栏和主区域之间有清晰的视觉分隔 **左侧侧边栏：** - 顶部：「+ 新对话」按钮，点击开启新的空白对话 - 中间：对话历史列表，显示所有对话（以对话第一条用户消息作为标题，或截取前 20 字）。点击可切换对话，每条对话有独立的消息记录 - 对话条目支持删除操作（hover 时显示删除按钮） - 底部：显示当前 API 连接状态（已配置/未配置）+ 「⚙️ 设置」按钮 - hover 时对话条目高亮，当前选中的对话有明显的激活态 **API 设置面板（模态弹窗或侧边抽屉）：** - 点击「设置」按钮打开 API 配置面板，包含以下字段： - **API Key**：密码输入框（type=password），带显示/隐藏切换按钮（👁️） - **API Base URL**：文本输入框，默认值 `https://api.openai.com/v1`，用户可改为任意 OpenAI 兼容端点（如 DeepSeek、本地 Ollama 等） - **模型名称**：文本输入框，默认值 `gpt-4o`，用户可填写任意模型标识符 - **System Prompt**（可选）：多行文本框，用于设置系统提示词 - 面板底部有保存按钮和重置按钮 - **安全提示（必须醒目展示）：** 面板内用带图标的提示框（⚠️ 或 🔒）显示以下信息： > 你的 API Key 仅在当前浏览器会话中使用，直接发送到你配置的 API 地址，不会被上传到任何第三方服务器。但请注意： > - 不要在不信任的设备或公共电脑上输入 API Key > - 建议使用有消费限额的 API Key > - 关闭页面后 API Key 不会被保留 - API Key 仅存在内存（JS 变量）中，**不得写入 localStorage 或 sessionStorage** - 其他设置（Base URL、模型名称、System Prompt）可以存入 localStorage **主对话区 — 顶部栏：** - 显示当前对话标题（取自第一条用户消息）或默认显示"新对话" - 右侧可放置模型名称标签或主题切换按钮 **主对话区 — 消息区域：** - 消息居中显示，最大宽度约 768px，两侧留白 - AI 消息和用户消息通过不同的视觉样式区分（不同背景色、图标或对齐方式） - AI 消息旁带 AI 图标（🤖 或 SVG），用户消息旁带用户图标（👤 或 SVG） - **核心要求 — Markdown 实时渲染：** AI 的流式回复中包含 Markdown 格式，界面必须在流式输出过程中实时解析并渲染为 HTML： - 标题（h1 ~ h3） - **加粗**、*斜体* - 有序列表、无序列表 - 行内代码（`` `code` ``） - 围栏代码块（带语言标识），代码块应有深色背景 + 基础语法高亮 - 代码块右上角有「复制」按钮，点击复制代码文本到剪贴板 - 每条 AI 消息底部有操作按钮行：复制整条回复、重新生成（重新调用 API 获取新回复） - 新对话的空状态展示欢迎界面（如居中的 Logo + "有什么可以帮你的？" + 几个快捷提问建议按钮） **主对话区 — 输入区域：** - 底部固定，包含可自适应高度的多行 textarea + 发送按钮 - 支持 Enter 发送、Shift+Enter 换行 - 输入框为空时发送按钮置灰禁用 - textarea 随内容自动增高（最高不超过 200px） - placeholder 文字如 "输入消息…" - 未配置 API Key 时，输入框应提示"请先在设置中配置 API Key"，发送按钮禁用 **API 调用与流式输出：** 1. 使用 `fetch` 向用户配置的 API Base URL 发送 `POST /chat/completions` 请求 2. 请求体遵循 OpenAI Chat Completions 格式： ```json { "model": "用户配置的模型名", "messages": [ {"role": "system", "content": "用户配置的 system prompt"}, {"role": "user", "content": "..."}, {"role": "assistant", "content": "..."}, ... ], "stream": true } ``` 3. 使用 `ReadableStream` 解析 SSE（Server-Sent Events）格式的流式响应，逐 token 追加到 AI 消息中 4. 流式输出期间显示「⏹ 停止生成」按钮，点击可中断 fetch 请求（AbortController） 5. 输出过程中消息区域自动跟随滚动到底部 6. **错误处理**： - API Key 未配置 → 弹出设置面板 - 401 Unauthorized → 提示"API Key 无效，请检查设置" - 网络错误 / 超时 → 提示"网络连接失败，请检查 API 地址" - 429 Rate Limit → 提示"请求频率超限，请稍后重试" - 其他错误 → 显示原始错误信息 **对话持久化：** - 对话历史（消息记录）存入 localStorage，刷新页面后可恢复 - API Key **不得持久化**，刷新页面后需重新输入 - 提供「清除所有对话」按钮 **视觉设计：** - 你可以选择模仿一个你认为最优秀的 AI 聊天产品的视觉风格（ChatGPT / Claude / Gemini 等），也可以自行设计全新风格，但必须达到专业产品级别的精致感 - 代码块需有深色背景 + 语法高亮色 - 按钮和交互元素使用协调的品牌点缀色 - 消息出现时有淡入过渡动画 - 安全提示框用醒目但不刺眼的警示风格（黄色/橙色等） **响应式适配：** - 移动端（< 768px）侧边栏默认隐藏，通过顶部汉堡菜单按钮展开（overlay 模式覆盖主区域） - 移动端输入框宽度自适应 请输出完整的 HTML。