mnote/recycle/design/全局AI面板改版设计_20260307.md

MNOTE 全局 AI 面板改版设计（参考 AiChem，按现有工具适配）

1. 目标

本次改版目标不是把 AiChem 的全局 AI 面板原样搬过来，而是：

1. 参考 F:\SOFT\AiChem\aichem-frontend\src\components\assistant\AssistantWidget.vue 的整体视觉气质与布局节奏。
2. 参考 cankao\image.png 的暗色面板、顶部工具栏、聊天气泡、底部输入区样式。
3. 结合 MNOTE 当前真实能力，保留并强化：
   • SSE 流式对话
   • 工具调用日志
   • 最大步数控制
   • 当前全局 AI 默认可用工具集
4. 明确避免照搬 AiChem 中 MNOTE 当前并不存在的能力，例如：
   • 会话历史抽屉
   • 用户资料页入口
   • 设置面板
   • 会话附件池
   • Plan / Act 真切换逻辑

---

2. 当前现状

MNOTE 当前全局 AI 入口：

• 组件：wolai-frontend/src/components/ai-agent/AiAgentPanel.tsx
• 页面：wolai-frontend/src/app/dev/ai-agent/page.tsx
• 桌面镜像：desktop-electron/desktop-next/src/components/ai-agent/AiAgentPanel.tsx

当前问题：

1. 视觉上仍是开发态 demo，缺少“正式全局 AI”界面感。
2. 对话区与工具日志区只是普通双栏卡片，缺少层次。
3. 没有明确呈现“当前全局 AI 能做什么”。
4. 输入区缺少模型/工具/运行状态等辅助信息的组织。
5. 工具日志的可读性较弱，不利于观察一次任务中的调用链。

---

3. 参考来源拆解

3.1 AiChem 借鉴点

从 AiChem 当前实现中，适合借鉴的点：

1. 整体暗色外壳
   • 深色背景
   • 细边框
   • 低对比度分区
2. 顶部栏
   • 左侧品牌 + 当前会话标题
   • 右侧一排紧凑图标按钮
3. 消息区
   • 左右分布的气泡
   • AI / 我 的短标签头像
   • 空状态时直接展示 AI 欢迎卡片
4. 底部输入区
   • 工具/状态信息在输入框上方
   • 输入框独立成块
   • 发送按钮悬浮在右下角

3.2 本次不能直接照搬的点

AiChem 中以下能力当前 MNOTE 全局 AI 没有，不应伪装成已支持：

1. 会话历史侧栏
2. 会话附件池与附件管理
3. 用户中心入口
4. 设置面板与 provider 切换菜单
5. Plan / Act 实际模式切换

---

4. MNOTE 当前真实工具能力

根据 wolai-frontend/src/app/api/ai-agent/run/route.ts 与 wolai-frontend/src/lib/ai-agent/tools/builtins/registryBuiltins.ts，当前全局 AI 默认允许：

1. toolset.readonly
   • search_web
2. toolset.rag_read
   • rag_lightrag_query
3. toolset.docs_read
   • docs_search
   • docs_read
4. toolset.media_read
   • image_read
5. toolset.slash_write
   • slash_run

因此本次 UI 呈现要围绕这些真实能力组织文案与标签：

1. 联网检索
2. LightRAG 检索
3. 跨页面文档搜索/读取
4. 图片 OCR
5. 斜杠命令写入

---

5. 改版方案

5.1 整体布局

由“两个普通 Card 横排”改成“一个暗色 shell + 主对话区 + 右侧活动区”的结构：

1. 最外层：全屏高度暗色容器。
2. 顶部：统一标题栏。
3. 中部：
   • 左侧：聊天主区域
   • 右侧：工具活动面板
4. 底部：输入区

这样既能保留 MNOTE 的“工具日志可观测性”，又能接近 AiChem 的整体观感。

5.2 顶部栏

顶部栏信息改为：

1. 左侧品牌：MNOTE
2. 主标题：全局 AI
3. 副标题：显示当前运行模式说明，例如“自动工具编排”
4. 右侧操作：
   • 工具面板显隐
   • 恢复示例问题
   • 清空对话
   • 停止（仅运行中可用）

说明：

1. 不使用 AiChem 的“历史 / 我的 / 设置”等按钮。
2. 只放当前组件真实可执行的动作。

5.3 空状态

当没有消息时，展示一张 AI 欢迎卡片，文案基于 MNOTE 当前工具能力：

1. 我可以联网查资料并给出来源
2. 我可以调用 LightRAG 进行知识检索
3. 我可以搜索和读取工作区文档
4. 我可以读取图片 OCR
5. 我可以执行受控斜杠命令

这部分会直接替代目前“暂无消息”的空白状态。

5.4 消息气泡

消息区采用更接近参考图的气泡样式：

1. AI 气泡偏中性深灰
2. 用户气泡偏蓝色强调
3. 头像使用短标签：
   • AI：AI
   • 用户：我
4. 消息文本保留 whitespace-pre-wrap

5.5 工具活动面板

右侧保留工具日志，但增强结构化：

1. 顶部显示“本轮活动”
2. 显示总数、当前状态
3. 日志按卡片区分：
   • 工具调用
   • 工具结果
   • 错误
4. 每项显示更明确的标签：
   • 工具名称
   • 请求编号
   • 成功/失败
   • 耗时

说明：

1. AiChem 的日志多以内联折叠存在于消息中。
2. MNOTE 当前组件已有独立日志流，因此本次保留右侧活动面板，不强行改成内联。

5.6 输入区

底部输入区分三层：

1. 第一层：能力标签区
   • 当前启用工具集 pill
2. 第二层：运行控制区
   • 最大步数
   • 当前状态（待命 / 运行中）
3. 第三层：输入框主体
   • 多行输入
   • Enter 发送、Shift+Enter 换行
   • 右下角发送按钮
   • 运行中显示停止按钮

5.7 页面外层

/dev/ai-agent 页面同步调整为：

1. 去掉开发态说明块的割裂感
2. 保留必要说明，但收敛成顶部一小行 meta 文案
3. 让主体尽可能接近“正式全局 AI 面板”

---

6. 本次不做

以下内容明确不纳入本次改版，避免范围失控：

1. 新增会话持久化
2. 新增模型切换
3. 新增工具手动多选
4. 新增历史记录
5. 改造后端接口结构
6. 把工具日志写回消息气泡

---

7. 验收标准

完成后应满足：

1. 全局 AI 页面整体视觉明显接近参考图的暗色正式面板。
2. 欢迎态能够正确展示 MNOTE 当前真实工具能力。
3. 输入、发送、停止、清空、恢复示例问题均可正常工作。
4. SSE 消息流与工具日志仍按原逻辑工作。
5. 工具日志面板可以显隐，不影响对话主流程。
6. Web 与桌面镜像保持一致。

---

8. 实施顺序

1. 先为 AiAgentPanel 补一组针对结构/状态的测试。
2. 再改造 AiAgentPanel.tsx 的布局与样式。
3. 同步改造 desktop-electron/desktop-next 镜像文件。
4. 最后微调 app/dev/ai-agent/page.tsx 外层页面。