Skip to content

Latest commit

 

History

History
254 lines (174 loc) · 12.8 KB

File metadata and controls

254 lines (174 loc) · 12.8 KB

对话功能介绍

MJ-Studio 的对话功能提供了功能丰富的 AI 对话体验,支持多助手管理、流式输出、Markdown 渲染、多模态输入、对话压缩等特性。

核心功能

多助手系统

  • 助手管理: 创建多个专业助手,每个助手独立管理自己的对话
  • 助手设置: 每个助手可配置名称、描述、头像、System Prompt(系统提示词)和默认模型
  • System Prompt: 定义助手的角色和行为,如"你是一个专业的代码审查助手"。创建对话时,系统提示词会固化到对话中,后续修改助手的提示词不会影响已有对话
  • 开场白建议: 每个助手自动生成个性化的开场白建议,帮助用户快速开始对话
  • 助手收藏: 点击收藏按钮将常用助手置顶显示,方便快速访问
  • 智能排序: 助手列表自动按最后对话时间排序,最近使用的助手排在前面

助手排序规则

助手列表分为两个区域:

  1. 收藏区: 收藏的助手按收藏时间降序排列(最近收藏的在前)
  2. 普通区: 未收藏的助手按最后活跃时间降序排列(最近对话的在前)

调整收藏顺序: 取消收藏后重新收藏,该助手会移到收藏区最前面

对话管理

  • 新建对话: 点击"+"按钮创建新对话,或点击助手直接进入虚拟对话(发送第一条消息时自动创建)
  • 对话重命名: 在对话列表的下拉菜单中选择"重命名",手动修改对话标题
  • 智能命名: 点击"智能重命名",AI 根据对话内容自动生成标题
  • 对话列表: 每个助手独立管理自己的对话列表,支持删除、分享等操作
  • URL 参数: 支持通过 URL 参数指定助手和对话,刷新页面保持状态

智能命名规则

智能命名会提取对话的前 2 条后 2 条消息(每条最多 200 字)作为上下文,让 AI 生成 10-20 字的简洁标题。

  • 使用当前助手配置的模型进行生成
  • 标题最大长度默认 30 字,超出会截断
  • 可在设置页面自定义生成提示词和最大长度

对话分享

在对话标题下拉菜单中点击"分享"按钮,会在新标签页打开分享页面,页面地址即为分享链接。

分享页面特性

  • 只读展示: 分享页面仅供查看,无法编辑
  • 实时更新: 分享链接指向原始对话,对话内容更新后分享页面同步更新
  • Markdown 渲染: 完整支持 Markdown 格式,代码块语法高亮
  • 思考过程: 显示 AI 的思考过程(折叠块形式)
  • 嵌入式插图: 对话中生成的图片会在分享页面正常显示
  • 移动端友好: 响应式布局,手机上也能良好阅读

导出 PDF

分享页面顶部有"导出 PDF"按钮,点击后调用浏览器打印功能,可保存为 PDF 文件。打印时工具栏自动隐藏。

分享方式

  1. 复制链接: 直接复制分享页面的 URL 发送给他人
  2. 导出 PDF: 保存为本地文件后分享

消息交互

  • 流式输出: 实时显示 AI 回复
  • Markdown 渲染: 消息内容支持 Markdown 格式,代码块支持语法高亮
  • 多模态输入: 支持上传图片、PDF、文本文件等附件与 AI 进行多模态交互
  • 消息操作: 支持复制、编辑、删除、重放消息
  • 停止生成: AI 生成过程中可随时停止输出
  • 手动添加: 支持手动添加用户消息和 AI 消息,不触发 AI 回复
  • 快速跳转: 点击"对话已开始"分界线可快速跳转到消息列表底部

附件上传

对话输入框支持上传多种类型的附件:

文件类型 处理方式
图片(PNG、JPG、GIF、WebP 等) 作为图片发送给模型
PDF 文档 Claude/Gemini 作为文档块,OpenAI 作为文本嵌入
SVG、JSON、代码文件等 读取为文本嵌入对话上下文

[!note] 大文件确认 非图片/PDF 文件如果大于 20KB,系统会弹出确认对话框,提示文件将作为文本嵌入可能占用较多上下文空间。

对话级别开关

对话输入框上方有两个开关,用于控制当前对话的 AI 能力:

开关 图标 功能 前提条件
思考开关 💡 启用模型的推理/思考能力 模型需勾选"推理"能力
联网开关 🌐 启用模型的搜索能力 模型需勾选"联网"能力

[!tip] 新对话预设 可以在发送第一条消息前预先设置开关状态,开关设置会随对话创建一起保存。

界面布局

侧边栏操作

桌面端对话页面的侧边栏(助手信息和对话列表区域)支持以下操作:

  • 折叠/展开: 点击侧边栏顶部的折叠按钮可隐藏侧边栏,获得更大的消息显示区域
  • 拖拽调整宽度: 鼠标悬停在侧边栏左边缘,出现调整光标时可拖拽改变宽度
  • 宽度记忆: 调整后的宽度会自动保存,下次打开时保持

移动端侧边栏自动适配为抽屉式展示,无需手动调整。

对话压缩

长对话自动压缩为摘要,节省 token 的同时保留完整上下文。详见 对话压缩功能介绍

思考模式

支持 Claude、OpenAI o 系列、Gemini 等模型的原生思考能力,展示 AI 推理过程。详见 思考功能介绍

联网搜索

AI 可访问互联网获取实时信息,通过模型原生 Web Search 能力实现。详见 搜索功能介绍

嵌入式绘图

AI 可在对话中调用绘图组件生成插图。详见 嵌入式绘图组件介绍

对话生图与连续编辑

部分模型(如 Gemini)支持在对话中直接生成图片,并支持连续编辑:

工作流程

  1. 模型返回图片后,系统自动保存到本地并生成公网 URL
  2. 后续对话中引用该图片时,使用 URL 而非 base64,避免 token 超限
  3. 支持多轮连续图片编辑(如"把背景换成海边"、"添加一只猫"等)

技术说明

  • 图片自动保存到 uploads/ 目录
  • 消息的 files 字段包含 publicUrl,用于后续 API 请求
  • 刷新页面后图片显示为本地 URL(首次流式渲染时为 base64,这是正常现象)

上游和模型管理

支持多上游、多模型配置,快速切换和余额查询。详见 上游和模型配置

全局事件系统

基于 SSE 的事件驱动架构,支持多端实时同步。详见 多端同步和流式输出

页面布局

桌面端

┌──────────────────────────────────────────────────────────────────────────┐
│  MJ Studio                                        [绘图] [设置] [用户]     │
├──────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│ ┌──────────┐ ┌─────────────────────────────────────┐ ┌───────────────┐ │
│ │ 助手列表 │ │         消息区域                     │ │ 助手信息      │ │
│ ├──────────┤ ├─────────────────────────────────────┤ ├───────────────┤ │
│ │          │ │                                     │ │ [头像]        │ │
│ │ ◉ 默认助手│ │  User: 帮我解释Vue的响应式原理       │ │ 默认助手  [⚙] │ │
│ │          │ │                                     │ │               │ │
│ │ ○ 代码助手│ │  Assistant: Vue的响应式系统基于...  │ │ 智能助理...   │ │
│ │          │ │                                     │ ├───────────────┤ │
│ │ ○ 翻译助手│ │                                     │ │ 对话列表      │ │
│ │          │ │                                     │ │ [+ 新对话]    │ │
│ ├──────────┤ │                                     │ ├───────────────┤ │
│ │[+ 新助手]│ │                                     │ │ ▸ Vue响应式   │ │
│ └──────────┘ │                                     │ │ ▹ API设计     │ │
│              │  ┌─────────────────────────────────┐│ │ ▹ 数据库设计  │ │
│              │  │ [上游▼] [模型▼]   Token: 2.5K   ││ └───────────────┘ │
│              │  ├─────────────────────────────────┤│                   │
│              │  │ 输入消息...            [发送]   ││                   │
│              │  └─────────────────────────────────┘│                   │
│              └─────────────────────────────────────┘                   │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

移动端

移动端采用响应式设计:

  • 助手列表: 折叠为顶部下拉菜单
  • 助手信息: 隐藏,通过按钮展开抽屉
  • 消息区域: 全屏显示,头像自适应隐藏
  • 对话列表: 底部抽屉展示

消息类型说明

对话中会出现以下几种类型的消息:

普通消息

  • 用户消息: 您发送的消息,显示在右侧
  • AI 消息: 助手的回复,显示在左侧,支持 Markdown 格式渲染

特殊消息

消息类型 样式 说明
错误消息 红色边框 AI 生成失败时显示错误原因
压缩请求 蓝色边框 + 归档图标 压缩操作的分界线,前方显示"以上内容已压缩"
压缩摘要 琥珀色边框 + 文档图标 AI 生成的历史摘要,默认折叠,支持编辑
思考过程 折叠块 开启思考功能时,AI 的推理过程,默认折叠

AI 消息状态

详见 多端同步和流式输出 - 消息状态说明

使用技巧

快速开始

  1. 创建助手: 点击"新建助手"按钮,配置名称、System Prompt 和默认模型
  2. 开始对话: 点击助手进入对话界面,查看开场白建议或直接发送消息
  3. 切换模型: 通过输入框上方的下拉菜单快速切换上游和模型
  4. 多模态输入: 点击附件按钮上传图片,与 AI 进行图文对话

高级功能

  • 压缩对话: 对话历史过长时,点击"压缩对话"按钮生成摘要
  • 重放消息: 在消息下拉菜单中选择"重放消息",从该消息重新生成
  • 分叉对话: 在消息下拉菜单中选择"分叉对话",创建新对话分支
  • 嵌入式绘图: 在对话中输入 mj-drawing 代码块,快速生成插图
  • 智能命名: 在对话列表中点击"智能重命名",AI 自动生成标题

性能优化

  • 虚拟对话: 点击助手后立即进入对话,无需等待对话创建
  • 懒加载: 消息列表默认加载最近 10 条,向上滚动时加载更多
  • 事件驱动: UI 更新通过事件推送,避免轮询和频繁请求
  • 流式缓冲: 前端缓冲区平滑渲染流式内容,减少 DOM 操作

下一步计划

短期 (已在规划中)

  • AI 群聊: 多助手、多用户参与同一对话,智能协作
  • 记忆系统: 长期记忆用户偏好和项目背景,跨对话连续性
  • TTS/ASR: 语音输入输出,支持语音通话
  • Thinking 模式: 显示 AI 思考过程,支持折叠渲染

中期 (功能增强)

  • MCP 集成: 支持工具调用,集成搜索、代码执行等功能
  • 多模态视频: 支持视频通话,实时识图对话
  • 助手共享: 支持分享助手配置,导入社区助手

长期 (生态建设)

  • 助手市场: 社区助手分享和订阅
  • 插件系统: 第三方插件扩展助手能力
  • 团队协作: 多用户团队共享助手和对话