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

AppFlowy-IO/AppFlowy

菜单

AI 聊天系统

相关源文件

本文档详细介绍了 AppFlowy 中的 AI 聊天系统。AI 聊天系统实现了 AI 对话的聊天界面，管理对话状态和消息处理，并提供专门的 UI 组件以支持实时流式传输来显示聊天消息。

有关 AI 架构和本地 AI 集成的信息，请参阅第 6.1 和 6.3 页。

架构概述

AI 聊天系统遵循分层架构，将聊天 UI 组件、对话管理、消息处理和流式传输基础设施分离开来。

AI 聊天系统架构

来源

对话管理流程

AI 聊天系统通过结构化流程处理对话，该流程负责消息创建、流式传输和状态更新。

消息处理序列

来源

聊天界面组件

AIChatPage 结构

AIChatPage 作为主要的聊天界面入口，提供 BLoC 提供者并处理文件拖放和键盘事件。

聊天页面组件层级结构

主要功能

来源

消息 UI 组件

聊天系统实现了专门的 UI 组件，用于以适当的样式和交互渲染不同类型的消息。

AI 消息显示组件

ChatAIMessageWidget 管理 AI 响应的渲染，支持流式传输和交互式操作。

AI 消息组件结构

主要功能

用户消息显示组件

ChatUserMessageWidget 处理用户消息显示，支持文件附件。

用户消息组件结构

特性

来源

对话状态管理

ChatBloc 通过与专门的管理器类协调，处理聊天功能的各个方面，从而协调对话状态。

ChatBloc 架构和依赖

ChatBloc 状态管理特性

组件目的关键方法
ChatMessageHandler消息创建和处理clearErrorMessages, createTextMessage, createAnswerStreamMessage
ChatStreamManager流生命周期管理prepareStreams, sendStreamRequest, stopStream, disposeAnswerStream
ChatSettingsManager聊天配置管理updateSelectedSources, selectedSourcesNotifier
ChatMessageListener后端消息事件处理start, stop, 消息回调

ChatBloc 通过以下方式管理对话状态：

来源

消息列表管理

AI 聊天系统提供了一个动画消息列表，用于处理实时更新和优化渲染。

ChatAnimatedList 实现

主要功能

来源

消息格式化

AI 聊天插件支持多种 AI 响应格式。

格式化功能

  • 文本格式选项（段落、项目符号列表、编号列表、表格）
  • 内容格式选项（纯文本、纯图片、文本+图片）
  • 将格式应用于新消息或重新生成现有消息
  • 消息元数据中的格式持久化

来源

消息流基础设施

AI 聊天系统通过专门的流类实现实时消息流式传输，这些流类处理与 Rust 后端的通信。

流架构

流事件处理

AnswerStream 处理来自后端的不同类型的事件：

事件前缀处理方法目的
AIStreamEventPrefix.data_handleEvent处理 AI 响应文本块
AIStreamEventPrefix.error_handleEvent处理错误消息
AIStreamEventPrefix.metadata_handleEvent处理参考来源和进度
AIStreamEventPrefix.aiResponseLimit_handleEvent处理配额限制已达到
AIStreamEventPrefix.aiImageResponseLimit_handleEvent处理图片配额限制
AIStreamEventPrefix.aiMaxRequired_handleEvent处理需要高级升级
AIStreamEventPrefix.localAINotReady_handleEvent处理本地 AI 初始化
AIStreamEventPrefix.aiFollowUp_handleEvent处理后续问题设置

关键流式传输功能

来源

聊天中的错误处理

AI 聊天系统实现了全面的错误处理，涵盖流式传输错误、AI 服务限制和本地 AI 状态。

错误处理流程

错误处理功能

错误类型错误代码显示消息处理器
响应限制AIResponseLimitExceeded请所有者升级到 AI MaxonAIResponseLimit
图片限制AIImageResponseLimitExceeded购买 AI MaxonAIImageResponseLimit
需要高级版AIMaxRequired自定义升级消息onAIMaxRequired
本地 AI 未就绪LocalAINotReady本地 AI 初始化中onInitializingLocalAI
服务不可用AIServiceUnavailableAI 服务器不可用onError

错误检测发生在多个层面

来源

聊天输入界面

AI 聊天系统提供响应式输入组件，可适应桌面和移动平台，并具有全面的提示处理功能。

聊天输入架构

关键输入功能

来源

消息实体类型

聊天系统定义了几种实体类型来表示消息和聊天状态的不同方面

核心消息实体

实体目的关键属性文件位置
ChatMessageRefSourceAI回复的参考来源id, name, sourcechat_entity.dart26-41
ChatFile消息中的文件附件filePath, fileName, fileTypechat_entity.dart66-110
AIChatProgressAI处理进度信息stepchat_entity.dart44-55
OnetimeShotType特殊消息类型标识符sendingMessage, relatedQuestion, errorchat_entity.dart126-130
PromptResponseState聊天交互状态ready, sendingQuestion, streamingAnswer, relatedQuestionsReadychat_entity.dart57-64

消息处理实体

实体目的关键属性用途
ChatLoadingState消息加载状态loading(), finish(error?)加载指示器
LoadChatMessageStatus聊天列表状态loading, loadingRemote, ready消息分页
ChatFileMap文件附件映射Map<String, ChatFile>文件管理
ChatMentionedPageMap页面引用映射Map<String, ViewPB>文档集成

消息元数据键

系统使用特定的元数据键进行消息处理

常量值目的
errorMessageTextKey"errorMessageText"错误消息内容
systemUserId"system"系统消息标识符
aiResponseUserId"0"AI回复标识符
messageRefSourceJsonStringKey"ref_source_json_string"参考来源数据
messageChatFileListKey"chat_files"文件附件列表
messageQuestionIdKey"question_id"问题消息标识符
onetimeShotType"OnetimeShotType"特殊消息类型

来源

消息高度管理

AI聊天系统实现了复杂的高度管理，以实现最佳的聊天布局和滚动性能。

高度管理系统

高度管理特性

ChatMessageHeightManager提供以下几个关键功能

方法目的用途
cacheHeight()存储消息高度以进行布局计算由MessageHeightCalculator调用
calculateMinHeight()计算AI回复消息的最小高度确保视口正确使用
calculateRelatedQuestionMinHeight()计算相关问题小部件的高度保持布局一致性
isAnswerMessage()通过后缀识别AI回复消息用于高度计算逻辑
getOriginalMessageId()从回复消息中提取原始消息ID将回复高度映射到问题

系统使用平台特定的屏幕偏移

高度计算通过从可用屏幕空间中减去缓存的消息高度来确保最佳视口使用 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_height_manager.dart102-103

来源

结论

AI聊天插件为AppFlowy中的AI模型交互提供了一个强大的接口。它具有实时流式响应、多种格式选项、本地和云AI模型支持、全面的错误处理以及文档集成。该实现采用清晰的架构，使用Flutter BLoC进行状态管理，并遵循关注点分离的最佳实践。