对话功能介绍
MJ-Studio 的对话功能提供了功能丰富的 AI 对话体验,支持多助手管理、流式输出、Markdown 渲染、多模态输入、对话压缩等特性。
核心功能
多助手系统
- 助手管理: 创建多个专业助手,每个助手独立管理自己的对话
- 助手设置: 每个助手可配置名称、描述、头像、System Prompt（系统提示词）和默认模型
- System Prompt: 定义助手的角色和行为,如"你是一个专业的代码审查助手"
- 开场白建议: 每个助手自动生成个性化的开场白建议,帮助用户快速开始对话
- 助手收藏: 点击收藏按钮将常用助手置顶显示,方便快速访问
- 智能排序: 助手列表自动按最后对话时间排序,最近使用的助手排在前面
助手排序规则
助手列表分为两个区域:
- 收藏区: 收藏的助手按收藏时间降序排列（最近收藏的在前）
- 普通区: 未收藏的助手按最后活跃时间降序排列（最近对话的在前）
调整收藏顺序: 取消收藏后重新收藏,该助手会移到收藏区最前面
对话管理
- 新建对话: 点击"+"按钮创建新对话,或点击助手直接进入虚拟对话（发送第一条消息时自动创建）
- 对话重命名: 在对话列表的下拉菜单中选择"重命名",手动修改对话标题
- 智能命名: 点击"智能重命名",AI 根据对话内容自动生成标题
- 对话列表: 每个助手独立管理自己的对话列表,支持删除、分享等操作
- URL 参数: 支持通过 URL 参数指定助手和对话,刷新页面保持状态
智能命名规则
智能命名会提取对话的前 2 条和后 2 条消息（每条最多 200 字）作为上下文,让 AI 生成 10-20 字的简洁标题。
- 使用当前助手配置的模型进行生成
- 标题最大长度默认 30 字,超出会截断
- 可在设置页面自定义生成提示词和最大长度
对话分享
在对话标题下拉菜单中点击"分享"按钮,会在新标签页打开分享页面,页面地址即为分享链接。
分享页面特性
- 只读展示: 分享页面仅供查看,无法编辑
- 实时更新: 分享链接指向原始对话,对话内容更新后分享页面同步更新
- Markdown 渲染: 完整支持 Markdown 格式,代码块语法高亮
- 思考过程: 显示 AI 的思考过程（折叠块形式）
- 嵌入式插图: 对话中生成的图片会在分享页面正常显示
- 移动端友好: 响应式布局,手机上也能良好阅读
导出 PDF
分享页面顶部有"导出 PDF"按钮,点击后调用浏览器打印功能,可保存为 PDF 文件。打印时工具栏自动隐藏。
分享方式
- 复制链接: 直接复制分享页面的 URL 发送给他人
- 导出 PDF: 保存为本地文件后分享
消息交互
- 流式输出: 实时显示 AI 回复
- Markdown 渲染: 消息内容支持 Markdown 格式,代码块支持语法高亮
- 多模态输入: 支持上传图片作为对话附件,与 AI 进行多模态交互
- 消息操作: 支持复制、编辑、删除、重放消息
- 停止生成: AI 生成过程中可随时停止输出
- 手动添加: 支持手动添加用户消息和 AI 消息,不触发 AI 回复
对话压缩
- 智能压缩: 当对话历史超过 100KB 时提示压缩,将历史消息压缩为摘要
- 分界标记: 压缩后的消息作为对话历史的分界线,后续压缩从该消息开始
- 折叠显示: 压缩消息默认折叠,点击展开查看压缩内容
嵌入式绘图
- 对话中生图: 在对话消息中嵌入绘图功能,通过 Markdown 代码块触发
- 参数配置: 支持配置提示词、负面提示词、参考图等绘图参数
- 状态同步: 绘图任务状态实时更新,支持重新生成、模糊控制等操作
上游和模型管理
- 快速切换: 对话输入框上方显示当前上游和模型,可快速切换
- 多 Key 支持: 每个上游支持配置多个 API Key,自动轮询使用
- 余额查询: 支持查询上游账户余额(需配置用户 Key)
- 模型分类: 对话模型和绘图模型分别管理,互不干扰
全局事件系统
- 多端同步: 基于 SSE 的全局事件系统,支持多个浏览器标签页实时同步
- 事件驱动: 消息创建、更新、删除等操作通过事件推送,自动更新 UI
- 流式优化: 流式内容通过独立的 SSE 连接传输,优化性能
页面布局
桌面端
┌──────────────────────────────────────────────────────────────────────────┐
│ MJ Studio [绘图] [设置] [用户] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌─────────────────────────────────────┐ ┌───────────────┐ │
│ │ 助手列表 │ │ 消息区域 │ │ 助手信息 │ │
│ ├──────────┤ ├─────────────────────────────────────┤ ├───────────────┤ │
│ │ │ │ │ │ [头像] │ │
│ │ ◉ 默认助手│ │ User: 帮我解释Vue的响应式原理 │ │ 默认助手 [⚙] │ │
│ │ │ │ │ │ │ │
│ │ ○ 代码助手│ │ Assistant: Vue的响应式系统基于... │ │ 智能助理... │ │
│ │ │ │ │ ├───────────────┤ │
│ │ ○ 翻译助手│ │ │ │ 对话列表 │ │
│ │ │ │ │ │ [+ 新对话] │ │
│ ├──────────┤ │ │ ├───────────────┤ │
│ │[+ 新助手]│ │ │ │ ▸ Vue响应式 │ │
│ └──────────┘ │ │ │ ▹ API设计 │ │
│ │ ┌─────────────────────────────────┐│ │ ▹ 数据库设计 │ │
│ │ │ [上游▼] [模型▼] Token: 2.5K ││ └───────────────┘ │
│ │ ├─────────────────────────────────┤│ │
│ │ │ 输入消息... [发送] ││ │
│ │ └─────────────────────────────────┘│ │
│ └─────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘移动端
移动端采用响应式设计:
- 助手列表: 折叠为顶部下拉菜单
- 助手信息: 隐藏,通过按钮展开抽屉
- 消息区域: 全屏显示,头像自适应隐藏
- 对话列表: 底部抽屉展示
消息类型说明
对话中会出现以下几种类型的消息：
普通消息
- 用户消息: 您发送的消息，显示在右侧
- AI 消息: 助手的回复，显示在左侧，支持 Markdown 格式渲染
特殊消息
| 消息类型 | 样式 | 说明 |
|---|---|---|
| 错误消息 | 红色边框 | AI 生成失败时显示错误原因 |
| 压缩请求 | 蓝色边框 + 归档图标 | 压缩操作的分界线，前方显示"以上内容已压缩" |
| 压缩摘要 | 琥珀色边框 + 文档图标 | AI 生成的历史摘要，默认折叠 |
| 思考过程 | 折叠块 | 开启思考功能时，AI 的推理过程，默认折叠 |
AI 消息状态
AI 回复时会经历以下状态：
| 状态 | UI 表现 |
|---|---|
| 正在创建 | 加载动画（转圈） |
| 等待响应 | 加载动画（转圈） |
| 流式输出中 | 停止按钮 |
| 已完成 | 正常显示 |
| 已停止 | 正常显示，可能显示"已中断"标记 |
| 生成失败 | 错误样式，内容为错误信息 |
使用技巧
快速开始
- 创建助手: 点击"新建助手"按钮,配置名称、System Prompt 和默认模型
- 开始对话: 点击助手进入对话界面,查看开场白建议或直接发送消息
- 切换模型: 通过输入框上方的下拉菜单快速切换上游和模型
- 多模态输入: 点击附件按钮上传图片,与 AI 进行图文对话
高级功能
- 压缩对话: 对话历史过长时,点击"压缩对话"按钮生成摘要
- 重放消息: 在消息下拉菜单中选择"重放消息",从该消息重新生成
- 分叉对话: 在消息下拉菜单中选择"分叉对话",创建新对话分支
- 嵌入式绘图: 在对话中输入 mj-drawing 代码块,快速生成插图
- 智能命名: 在对话列表中点击"智能重命名",AI 自动生成标题
性能优化
- 虚拟对话: 点击助手后立即进入对话,无需等待对话创建
- 懒加载: 消息列表默认加载最近 10 条,向上滚动时加载更多
- 事件驱动: UI 更新通过事件推送,避免轮询和频繁请求
- 流式缓冲: 前端缓冲区平滑渲染流式内容,减少 DOM 操作
下一步计划
短期 (已在规划中)
- AI 群聊: 多助手、多用户参与同一对话,智能协作
- 记忆系统: 长期记忆用户偏好和项目背景,跨对话连续性
- TTS/ASR: 语音输入输出,支持语音通话
- Thinking 模式: 显示 AI 思考过程,支持折叠渲染
中期 (功能增强)
- MCP 集成: 支持工具调用,集成搜索、代码执行等功能
- 多模态视频: 支持视频通话,实时识图对话
- 助手共享: 支持分享助手配置,导入社区助手
长期 (生态建设)
- 助手市场: 社区助手分享和订阅
- 插件系统: 第三方插件扩展助手能力
- 团队协作: 多用户团队共享助手和对话