235 lines
6.2 KiB
Markdown
235 lines
6.2 KiB
Markdown
# 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` 外层页面。
|