在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

toeverything/AFFiNE

菜单

AI 聊天界面

相关源文件

AI 聊天界面是 AFFiNE AI 系统中的一个关键组件，它允许用户通过聊天界面与 AI 功能进行交互。本文档涵盖了 AI 聊天界面的架构、组件和通信流程。有关整个 Copilot 系统和后端 AI 功能的信息，请参阅 Copilot 系统。

架构概述

AI 聊天界面作为 AFFiNE AI 功能的前端用户交互层。它允许用户向 AI 发送文本和图像输入，查看 AI 生成的响应，并引用文档和文件以进行上下文丰富的对话。

来源

核心组件

AI 聊天界面包含几个关键组件，它们协同工作以提供无缝的用户体验。

聊天面板

ChatPanel 是 AI 聊天界面的主要容器组件。它管理聊天记录、用户输入和消息的显示。

Chat Panel 负责

  • 显示聊天记录和当前对话
  • 管理聊天上下文状态
  • 处理用户输入提交
  • 与 AI 后端服务协调

Chat Panel 通过 React 组件 `EditorChatPanel` 集成到应用程序中，该组件作为包装器，将 Web 组件集成到 React 的组件层次结构中。

来源

聊天消息

ChatPanelMessages 组件用于渲染用户与 AI 之间的对话历史。它显示用户消息、AI 响应，并支持文本和图像等各种消息类型。

主要功能

  • 显示用户和助手的消息历史
  • 根据消息类型和状态处理消息渲染
  • 显示加载状态和错误消息
  • 为失败的响应提供重试功能
  • 自动滚动到最新消息

来源

聊天输入

AIChatInput 组件提供用户输入消息、上传图片和与其它聊天功能交互的界面。

Chat Input 组件处理

  • 文本输入，带有自动调整大小的文本区域
  • 图片上传（限制为 32 张）
  • 网络搜索开关
  • 清除聊天记录
  • 显示编辑器中的引用文本
  • 向 AI 后端提交消息

来源

使用聊天气泡进行上下文管理

ChatPanelChips 组件允许用户通过包含文档、文件、标签和集合的引用来为 AI 对话添加上下文。

聊天气泡系统

  • 允许添加文档、文件、标签和集合作为上下文
  • 管理上下文项的状态（候选、处理中、已完成、失败）
  • 与 AI 上下文服务通信以添加和删除上下文项
  • 向用户显示上下文项的状态
  • 监控上下文项的嵌入进度

来源

数据流和集成

聊天上下文值

ChatContextValue 作为聊天界面的核心状态存储。它包含

此上下文值通过组件层次结构传递，并在用户与聊天界面交互时进行更新。

来源

AI 提供商集成

AI 聊天界面通过 `AIProvider` 与后端 AI 服务通信，该服务为各种 AI 操作和提供了统一的接口。

AI Provider 系统

  • 管理 AI 会话的创建和跟踪
  • 处理消息发送和响应处理
  • 提供上下文管理功能
  • 提供聊天、摘要、翻译等各种 AI 操作
  • 集成身份验证和错误处理

来源

聊天配置

聊天界面需要几个配置对象才能与应用程序的其余部分正确集成

  1. `AppSidebarConfig` - 提供侧边栏宽度和打开状态
  2. `DocDisplayConfig` - 提供文档元数据和图标
  3. `SearchMenuConfig` - 提供文档、标签等的搜索功能
  4. `AINetworkSearchConfig` - 管理网络搜索状态

这些配置由各种应用程序服务提供并传递给 Chat Panel。

来源

用户交互和功能

引用选中文本

用户可以选中编辑器中的文本，然后继续使用选中的内容进行对话。这通过 `continueInChat` 方法实现，该方法

  • 从编辑器获取选中文本内容
  • 使用选中文本更新聊天上下文
  • 在聊天输入框中显示引用的文本

来源

AI 聊天界面支持网络搜索，它允许 AI 从互联网检索信息来回答问题。

关键方面：

  • 用户可以切换开启/关闭
  • 附加图片或添加上下文气泡时禁用
  • 影响对话所使用的 AI 提示
  • 使用网络搜索时，在响应中显示脚注

来源

图片附件

用户可以通过以下方式将图片附加到对话中

  • 通过文件选择器上传图片
  • 从剪贴板粘贴图片
  • 从编辑器中选择图片

该界面限制上传 32 张图片，并显示已附加图片的预览。

来源

嵌入进度

添加文档或文件作为上下文时，系统会跟踪嵌入进度，以向用户显示上下文处理的状态

嵌入进度显示在聊天面板标题中，以告知用户上下文处理状态。

来源

与 AFFiNE 系统的集成

编辑器集成

AI 聊天界面通过 React 组件 `EditorChatPanel` 与 AFFiNE 编辑器集成，该组件

  • 创建和管理 `ChatPanel` Web 组件
  • 将编辑器主机和文档传递给 Chat Panel
  • 配置侧边栏集成
  • 设置文档显示和搜索所需的配置

来源

AI 聊天块

AI 聊天界面还通过 `AIChatBlockPeekView` 组件与 AI 聊天块集成，该组件

  • 在块中显示保存的对话
  • 允许在新的聊天块中继续对话
  • 将聊天块与无边界模式下的连接器元素连接
  • 在块的上下文中提供类似的聊天功能

来源

工作区副作用

AI Provider 作为工作区副作用的一部分进行设置，其中

  • 使用 GraphQL、fetch 和 EventSource 服务创建 `CopilotClient`
  • 配置 AI Provider 的客户端和所需服务
  • 注册操作和事件处理程序

来源

组件注册

AI组件使用 registerAIEffects 函数进行注册，该函数定义了 AI 聊天界面所需的所有自定义元素。

来源

结论

AI 聊天界面为用户与 AFFiNE 的 AI 功能进行交互提供了强大的基础。它负责管理用户输入、上下文管理和 AI 响应处理之间的复杂交互，同时与更广泛的应用程序架构无缝集成。其模块化设计允许不同的集成点，例如侧边栏聊天面板和嵌入式聊天块。