# 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` 外层页面。