【RAGFlow代码详解-23】聊天系统架构

概述

聊天系统提供对话界面，通过多种部署模式与支持 RAG 的助手进行交互：标准网络聊天、共享/嵌入式聊天、座席工作流聊天和多模型比较聊天。该架构以 React 组件为中心，具有基于钩子的状态管理和用于实时消息流的 SSE。

核心组件架构

聊天系统遵循分层组件结构，具有针对不同聊天模式的专用挂钩：

消息流和 SSE 架构

系统使用带有 useSendMessageWithSse 钩子的 Server-Sent Events 实现实时消息流：

useSendMessageWithSse 中的核心 SSE 实现处理流响应：

• 请求设置 ：创建 AbortController 以通过 initializeSseRef（）
  web/src/hooks/logic-hooks.ts 209-211 取消
• 流处理 ：使用TextDecoderStream和 EventSourceParserStream 解析 web/src/hooks/logic-hooks.ts 254-257
• 状态更新 ：通过 setAnswer（） web/src/hooks/logic-hooks.ts 271-276 实时更新答案状态
• 错误处理 ：使用流清理 web/src/hooks/logic-hooks.ts 285-291 进行优雅的错误处理

状态管理架构

聊天状态是通过服务器状态的 React Query 和 UI 状态的本地钩子的组合来管理的：

关键状态管理模式：

• URL 驱动的导航 ：聊天状态由 URL 参数 dialogId、conversationId 和 isNew
web/src/hooks/chat-hooks.ts 72-81 驱动
• 乐观更新 ：在服务器确认之前，新消息会立即添加到本地状态
  web/src/hooks/logic-hooks.ts 418-438
• 消息生命周期 ：消息具有客户端生成的 UUID，用于乐观更新和配对
  web/src/pages/chat/hooks.ts 425-428

多聊天界面架构

系统通过 MultipleChatBox 组件支持并发多模型对话：

多聊天系统将单个用户消息同时广播给多个模型：

• 共享输入 ：单个输入字段广播到所有活动聊天框
  web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx 177-221
• 消息路由 ：SSE 响应包括 chatBoxId，用于路由到正确的对话
  web/src/hooks/logic-hooks.ts 224-232
• 模型配置 ：每个聊天框通过表单 refs
  web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx 102-110
  维护单独的 LLM 设置

共享聊天集成

系统提供可嵌入的聊天小部件，用于外部集成：

主要特征：

• 多模式支持 ：通过 SharedFrom 枚举
  web/src/pages/chat/shared-hooks.ts 53-54
  处理常规聊天和代理工作流程
• 会话初始化 ：创建无需用户身份验证
  的外部会话 web/src/pages/chat/shared-hooks.ts 97-104
• 本地化支持 ：通过 URL 参数
  进行动态语言切换 web/src/pages/chat/share/large.tsx 49-53

积分点

聊天系统与多个 RAGFlow 子系统集成：

消息结构 ：核心消息接口将聊天链接到其他系统

interface Message {content: string;role: MessageType;doc_ids?: string[];        // Links to Knowledge Baseprompt?: string;           // System prompt context  id?: string;              // Message trackingaudio_binary?: string;    // TTS integrationdata?: any;              // Extension datafiles?: File[];          // File attachmentschatBoxId?: string;      // Multi-chat routing
}