对话（Chat）

对话页面是 JellyfishBot 的核心界面，支持与 AI Agent 进行流式对话。

4.1 对话列表

• 位于侧栏中，显示所有历史对话
• 点击 + 按钮创建新对话
• 点击对话条目切换到该对话
• 悬浮显示删除按钮
• 后台仍在 streaming 的对话切换回去时会自动恢复显示

4.2 消息输入

底部输入区域包含：

• 文本输入框：支持多行输入（Shift+Enter 换行，Enter 发送）
• 能力开关：点击展开能力选择栏
  • 🌐 联网：启用网页搜索和抓取（Admin 默认始终启用）
  • 🎨 绘图：启用 AI 图片生成
  • 🔊 语音：启用 TTS 语音生成
  • 🎬 视频：启用 AI 视频生成
• Plan Mode：启用计划模式，Agent 先规划再执行（需审批）
• 模型选择器：下拉选择当前对话使用的 AI 模型
• 图片附件：支持三种方式添加图片
  • 📎 点击附件按钮选择文件
  • Ctrl+V 粘贴剪贴板图片
  • 拖拽图片到输入区
• 语音输入：单击麦克风按钮开始录音 → 再次单击停止 → 自动转写填入输入框；录音中按 Esc 取消
• 发送/Stop 按钮：
  • 正常状态显示发送按钮（纸飞机图标）
  • 流式输出时变为红色 Stop 按钮，点击中止当前回复

4.3 流式消息展示

AI 回复以流式方式展示，包含以下类型的块：

文本块

• Markdown 格式渲染，支持代码高亮（17 种常用语言）
• 代码块使用 JetBrains Mono 字体
• 媒体嵌入：自动识别 <<FILE:/generated/xxx.png>> 标签，展示图片/音频/视频/PDF/HTML

思考块（Thinking Block）

• 显示 AI 的推理思考过程（仅 Thinking 模型）
• 可折叠/展开（点击标题栏）
• 流式输出时显示三点弹跳动画
• 使用 Brain 图标标识

工具调用（Tool Indicator）

• 显示工具名称和参数预览
• 执行中显示旋转加载图标
• 完成后显示绿色勾号
• 结果可折叠查看
• 使用 Wrench 图标标识

子代理卡片（Subagent Card）

• 显示子代理任务描述
• 内部工具调用按时间顺序展示（text/tool/thinking 交替的 timeline）
• 流式输出子代理的回复
• 使用 Robot 图标标识

审批卡片（Approval Card）

• 文件操作审批：显示文件修改的 diff 预览，可选择批准或拒绝
• Plan 审批：显示 Agent 的执行计划，可编辑后批准或拒绝
• 审批按钮使用 Check（批准）和 X（拒绝）图标

4.4 历史消息

• 用户消息显示在右侧（粉紫渐变气泡）
• AI 消息显示在左侧（带水母 Logo 头像）
• 历史消息自动按交错顺序回放（thinking → text → tool → text → subagent → text…）
• 用户附件以缩略图画廊形式展示，点击可放大

4.5 智能滚动

• 新消息自动滚动到底部
• 用户向上滚动浏览历史时暂停自动滚动
• 返回底部时恢复自动滚动

4.6 断流恢复

• 后端崩溃 / 网络中断时，已生成的部分内容会自动持久化（标记 ⚠️ [连接中断 — 已保存已生成内容]）
• 切换回正在 streaming 的对话时，前端会显示黄色横幅，提供 「终止并保存」 和 「刷新状态」 按钮
• 后台 streaming 中无法发送新消息（防止冲突）

---