聊天界面

相关源文件

• api/db/services/common_service.py
• web/src/components/message-item/feedback-modal.tsx
• web/src/components/message-item/group-button.tsx
• web/src/components/message-item/hooks.ts
• web/src/components/message-item/index.tsx
• web/src/components/retrieval-documents/index.tsx
• web/src/components/retrieval-documents/select-files.tsx
• web/src/hooks/chat-hooks.ts
• web/src/hooks/knowledge-hooks.ts
• web/src/hooks/logic-hooks.ts
• web/src/interfaces/database/knowledge.ts
• web/src/interfaces/request/chat.ts
• web/src/pages/add-knowledge/components/knowledge-testing/index.tsx
• web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
• web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
• web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx
• web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx
• web/src/pages/chat/chat-container/index.less
• web/src/pages/chat/chat-container/index.tsx
• web/src/pages/chat/hooks.ts
• web/src/pages/chat/index.less
• web/src/pages/chat/index.tsx
• web/src/pages/chat/share/index.less
• web/src/pages/chat/share/large.tsx
• web/src/pages/chat/shared-hooks.ts
• web/src/pages/flow/chat/box.tsx
• web/src/pages/flow/chat/drawer.tsx
• web/src/pages/flow/chat/hooks.ts
• web/src/pages/flow/hooks/use-get-begin-query.tsx
• web/src/pages/search/hooks.ts
• web/src/pages/search/index.less
• web/src/pages/search/index.tsx
• web/src/pages/search/sidebar.tsx
• web/src/services/chat-service.ts
• web/src/utils/request.ts

聊天界面提供RAGFlow内的对话交互能力，使用户能够与AI助手沟通、搜索知识库并与代理工作流互动。本文档涵盖了前端聊天组件、消息处理、实时通信以及与RAG管道的集成。

有关驱动对话工作流的代理流系统的信息，请参阅代理流系统。有关处理查询的RAG管道的详细信息，请参阅RAG管道。

架构概述

聊天界面采用React组件构建，模块化架构支持多种聊天模式，包括标准对话、知识库搜索、共享聊天和代理交互。

聊天界面组件层级

来源：web/src/pages/chat/index.tsx1-394 web/src/pages/chat/chat-container/index.tsx1-121 web/src/components/message-item/index.tsx1-245 web/src/hooks/chat-hooks.ts1-643 web/src/pages/chat/hooks.ts1-617 web/src/hooks/logic-hooks.ts1-568

数据流架构

来源：web/src/hooks/logic-hooks.ts157-247 365-507 web/src/services/chat-service.ts1-134 web/src/hooks/chat-hooks.ts86-196

消息处理与显示

消息系统处理不同消息类型、实时流以及包括文档和引用在内的富内容显示。

消息组件结构

MessageItem组件web/src/components/message-item/index.tsx41-245处理用户和助手消息，并提供不同的布局和功能。

消息类型	角色	特性
用户消息	MessageType.User	复制、重新生成、删除、文档上传
助手消息	MessageType.Assistant	复制、点赞/点踩、文本转语音、提示查看

消息状态管理

useSelectDerivedMessages钩子web/src/hooks/logic-hooks.ts310-411管理消息数组状态。

• addNewestQuestion：添加用户消息和空助手响应
• addNewestAnswer：使用流式内容更新最后一条助手消息
• removeLatestMessage：移除最后的问答对
• removeMessageById：移除特定消息

来源：web/src/hooks/logic-hooks.ts310-411 web/src/components/message-item/index.tsx26-39 web/src/pages/chat/hooks.ts292-347

实时消息流

系统使用Server-Sent Events (SSE) 进行实时消息流传输。

在web/src/hooks/logic-hooks.ts157-247中实现的关键流功能：

• 自动重试和错误处理
• 实时内容更新
• 通过AbortController支持取消
• 使用done状态跟踪进度

来源：web/src/hooks/logic-hooks.ts157-247 web/src/pages/chat/hooks.ts365-388

会话和对话管理

聊天界面管理包含多个会话的层级对话结构。

对话和会话层级

会话状态流

在web/src/hooks/chat-hooks.ts86-546中处理的会话管理系统

1. 对话管理：创建、更新、删除聊天助手
2. 会话管理：处理对话内的单个聊天会话
3. URL状态同步：在URL参数中维护聊天状态
4. 自动导航：自动选择第一个可用对话/会话

ChatSearchParams管理的关键URL参数

• dialogId：当前聊天助手
• conversationId：当前会话
• isNew：临时会话标志

来源：web/src/hooks/chat-hooks.ts72-81 web/src/hooks/chat-hooks.ts86-196 web/src/hooks/chat-hooks.ts243-401

文档集成

聊天界面与文档系统集成，支持文件上传、引用和内容显示。

文档引用显示

文档处理功能

• 带文档解析的文件上传
• 聊天消息中的文档引用显示
• PDF/文档查看器集成
• 缩略图生成和显示
• 基于文档的搜索和检索

来源：web/src/components/message-item/index.tsx59-91 web/src/components/message-item/index.tsx162-188 web/src/pages/chat/chat-container/index.tsx49-56

聊天界面变体

RAGFlow支持多种聊天界面变体以适应不同的使用场景。

聊天界面类型

接口类型	组件	目的	主要功能
标准聊天	pages/chat/index.tsx	主要对话界面	对话管理、会话历史记录
搜索界面	pages/search/index.tsx	知识库搜索	文档过滤、分块显示
共享聊天	pages/chat/share/large.tsx	外部嵌入	简化界面，无需认证
代理流聊天	pages/flow/chat/box.tsx	代理工作流交互	流程执行、组件集成

搜索界面专业化

搜索界面web/src/pages/search/index.tsx47-285扩展了聊天范式以用于知识检索。

搜索界面功能

• 知识库选择和过滤
• 实时分块检索和显示
• 高亮显示搜索结果
• 思维导图可视化
• 相关问题生成

来源：web/src/pages/search/index.tsx47-285 web/src/pages/search/hooks.ts22-136 web/src/pages/search/sidebar.tsx25-162

共享聊天实现

共享聊天界面web/src/pages/chat/share/large.tsx21-125提供外部嵌入功能。

• 简化的认证模型
• 可配置的头像显示
• 为安全起见，功能集受限
• 支持外部文档上传
• 多语言支持

共享聊天实现中的主要区别

• 使用useSendSharedMessage而不是标准消息钩子
• 外部访问的不同API端点
• 匿名用户的会话管理
• 为安全起见，功能受限

来源：web/src/pages/chat/share/large.tsx21-125 web/src/pages/chat/shared-hooks.ts43-149