agentic_huge_data_base / wiki
页面 Open WebUI · 4 聊天系统·DeepWiki 中文全文译文
DeepWiki 中文译文 / Open WebUI / 4

4 · 聊天系统（Chat System）

多模型对话工作台与知识应用入口 · 本章是 Open WebUI DeepWiki 中文译文的独立章节页，保留原始链接、源码锚点、模块标签和章节层级。

项目Open WebUI 章节4 状态全文译文 模块接口与服务契约、界面与交互、频道、笔记与协作、系统架构
项目要点页2.5 参考项目 项目章节目录Open WebUI DeepWiki 原始章节Chat System 上一章3.5 下一章4.1
源码线索
  • backend/open_webui/tools/builtin.py
  • backend/open_webui/utils/middleware.py
  • backend/open_webui/utils/tools.py
  • src/lib/components/chat/Chat.svelte
  • src/lib/components/chat/MessageInput.svelte
  • src/lib/components/chat/Messages.svelte
  • src/lib/components/chat/Messages/Message.svelte
  • src/lib/components/chat/Messages/MultiResponseMessages.svelte
  • src/lib/components/chat/Messages/ResponseMessage.svelte
  • src/lib/components/chat/Messages/UserMessage.svelte
模块标签
  • 接口与服务契约
  • 界面与交互
  • 频道、笔记与协作
  • 系统架构
  • 工具、记忆与模型调用

中文译文

聊天系统（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/4-chat-system
翻译时间：2026-06-09T16:08:00.148Z
翻译模型：deepseek-chat
原文字符数：11478
项目：Open WebUI (open-webui)

---

聊天系统

相关源文件

以下文件为本 wiki 页面的生成提供了上下文：

  • backend/open_webui/tools/builtin.py
  • backend/open_webui/utils/middleware.py
  • backend/open_webui/utils/tools.py
  • src/lib/components/chat/Chat.svelte
  • src/lib/components/chat/MessageInput.svelte
  • src/lib/components/chat/Messages.svelte
  • src/lib/components/chat/Messages/Message.svelte
  • src/lib/components/chat/Messages/MultiResponseMessages.svelte
  • src/lib/components/chat/Messages/ResponseMessage.svelte
  • src/lib/components/chat/Messages/UserMessage.svelte
  • src/lib/components/workspace/Models/BuiltinTools.svelte
  • src/lib/utils/index.ts

目的与范围

聊天系统是 Open WebUI 的核心界面，负责管理用户与 AI 模型之间的对话交互。本文档涵盖了消息的编写、处理、展示以及 AI 响应实时流式传输所涉及的架构、组件和数据流。

有关处理 AI 请求和工具执行的后端处理管道信息，请参阅后端处理管道。有关实时通信基础设施的详细信息，请参阅实时通信架构。

---

架构概览

聊天系统采用分层组件结构构建，以 Chat.svelte 作为主要编排器。它负责管理状态、协调子组件，并与后端 API 和 WebSocket 事件集成。

组件架构图

graph TB
    Chat["Chat.svelte<br/>(主编排器)"]
    MessageInput["MessageInput.svelte<br/>(输入处理器)"]
    Messages["Messages.svelte<br/>(消息列表)"]
    Message["Message.svelte<br/>(消息包装器)"]
    UserMessage["UserMessage.svelte<br/>(用户显示)"]
    ResponseMessage["ResponseMessage.svelte<br/>(AI 响应)"]
    MultiResponse["MultiResponseMessages.svelte<br/>(多模型)"]
    ContentRenderer["ContentRenderer.svelte<br/>(Markdown/代码)"]

    Chat --> MessageInput
    Chat --> Messages
    Chat --> Navbar["Navbar.svelte"]
    Chat --> ChatControls["ChatControls.svelte"]

    Messages --> Message
    Message --> UserMessage
    Message --> ResponseMessage
    Message --> MultiResponse

    ResponseMessage --> ContentRenderer
    ResponseMessage --> Citations["Citations.svelte"]
    ResponseMessage --> CodeExecutions["CodeExecutions.svelte"]

    MessageInput --> RichTextInput["RichTextInput.svelte"]
    MessageInput --> FileItem["FileItem.svelte"]
    MessageInput --> InputMenu["InputMenu.svelte"]

    Chat -.->|"Socket.IO 事件"| SocketHandler["chatEventHandler()"]
    Chat -.->|"API 调用"| Backend["后端 API"]

来源：

  • src/lib/components/chat/Chat.svelte:98-111
  • src/lib/components/chat/Messages.svelte:19-23
  • src/lib/components/chat/Messages/Message.svelte:1-50

---

核心组件与职责

Chat.svelte - 主编排器

Chat.svelte 组件（src/lib/components/chat/Chat.svelte:1-120）是主要控制器，负责管理：

职责关键状态变量关键函数
聊天会话管理chat, chatIdProp, historyloadChat(), navigateHandler()
消息历史history.messages, history.currentIdcreateMessagePair(), addMessages()
模型选择selectedModels, atSelectedModelsetDefaults(), selectedModelIds
实时事件socket, eventTargetchatEventHandler(), chatCompletedHandler()
消息队列chatRequestQueuesprocessNextInQueue()
文件处理files, chatFilesuploadFile(), processWeb()

关键状态初始化：

// 来自 Chat.svelte 的核心状态
let history = {
    messages: {},
    currentId: null
};
let selectedModels = [''];
let generating = false;

来源：

  • src/lib/components/chat/Chat.svelte:138-169
  • src/lib/components/chat/Chat.svelte:183-247
Messages.svelte - 消息列表管理器

Messages.svelte 组件（src/lib/components/chat/Messages.svelte:1-50）负责渲染消息列表并处理：

  • 历史遍历：通过 buildMessages() 函数，沿着 parentId 指针从树状结构中重建线性消息列表 src/lib/components/chat/Messages.svelte:85-103。
  • 流式性能优化：在高频流式传输期间，通过 handleHistoryChange() 使用 requestAnimationFrame 节流重建消息列表 src/lib/components/chat/Messages.svelte:107-132。
  • 分支导航：使用 gotoMessage()、showPreviousMessage() 和 showNextMessage() 在不同消息分支（同级）之间导航 src/lib/components/chat/Messages.svelte:160-248。
  • 持久化：当结构发生变化时，通过 updateChat() 更新后端聊天记录 src/lib/components/chat/Messages.svelte:146-158。

来源：

  • src/lib/components/chat/Messages.svelte:85-158
  • src/lib/components/chat/Messages.svelte:160-248
MessageInput.svelte - 输入处理器

MessageInput.svelte 组件（src/lib/components/chat/MessageInput.svelte:1-150）提供：

  • 富文本界面：与 RichTextInput.svelte 集成，并支持命令建议 src/lib/components/chat/MessageInput.svelte:73-94。
  • 上下文控制：webSearchEnabled、imageGenerationEnabled 和 codeInterpreterEnabled 的开关控制 src/lib/components/chat/MessageInput.svelte:133-138。
  • 动态变量：处理模板变量和剪贴板内容 src/lib/components/chat/MessageInput.svelte:185-228。
  • 队列消息：管理 messageQueue 以顺序处理多个提示 src/lib/components/chat/MessageInput.svelte:144-147。

来源：

  • src/lib/components/chat/MessageInput.svelte:125-150
  • src/lib/components/chat/MessageInput.svelte:185-228

---

消息历史数据结构

聊天系统使用基于树的消息历史结构，支持分支对话和每条用户消息的多个响应。

消息历史结构图

graph TD
    Root["history 对象<br/>(src/lib/utils/index.ts)"]
    M1["message1 (用户)<br/>id: uuid<br/>parentId: null<br/>childrenIds: [uuid2, uuid3]"]
    M2["message2 (助手)<br/>id: uuid2<br/>parentId: uuid1<br/>childrenIds: []"]
    M3["message3 (助手)<br/>id: uuid3<br/>parentId: uuid1<br/>childrenIds: [uuid4]"]
    M4["message4 (用户)<br/>id: uuid4<br/>parentId: uuid3<br/>childrenIds: []"]

    Root -->|"currentId"| M4
    Root -->|"messages {}"| M1
    M1 --> M2
    M1 --> M3
    M3 --> M4

消息对象模式： MessageType 接口定义了单个消息节点的属性 src/lib/components/chat/Messages/ResponseMessage.svelte:67-116。

{
  id: string,                    // 通过 uuidv4() 生成的 UUID
  parentId: string | null,       // 指向前一条消息的指针
  childrenIds: string[],         // 分支路径
  role: string,                  // 'user' 或 'assistant'
  content: string,               // 文本内容
  done: boolean,                 // 流式传输状态
  files?: Array<{ type, url }>,  // 附件
  statusHistory?: Array<{}>,     // 工具/搜索状态更新
  code_executions?: Array<{}>    // Pyodide/Jupyter 的执行结果
}

来源：

  • src/lib/utils/index.ts:195-226
  • src/lib/components/chat/Messages/ResponseMessage.svelte:67-116

---

变量替换系统

聊天系统在将用户提示发送给模型之前，会动态替换其中的占位符。

  • 内置变量：由 textVariableHandler() 处理 src/lib/components/chat/MessageInput.svelte:205-250。

    • - {{CLIPBOARD}}：替换为 navigator.clipboard 中的文本。

  • 自定义变量：由 inputVariableHandler() 处理 src/lib/components/chat/MessageInput.svelte:185-203。

    • - 触发 InputVariablesModal.svelte 以处理通过 extractInputVariables() 提取的用户定义字段。

  • 模板令牌：replaceTokens() 处理 {{char}} 和 {{user}} 以实现角色扮演或角色一致性，以及文件特定的占位符，如 {{VIDEO_FILE_ID_...}} src/lib/utils/index.ts:55-83。

来源：

  • src/lib/components/chat/MessageInput.svelte:185-250
  • src/lib/utils/index.ts:55-83

---

消息渲染系统

ResponseMessage.svelte - AI 响应显示

ResponseMessage.svelte 组件（src/lib/components/chat/Messages/ResponseMessage.svelte:1-65）管理 AI 输出的呈现：

  • 内容渲染：将文本传递给 ContentRenderer.svelte 进行 Markdown 和 LaTeX 处理 src/lib/components/chat/Messages/ResponseMessage.svelte:57。
  • 引用来源：使用 Citations.svelte 渲染 RAG 来源 src/lib/components/chat/Messages/ResponseMessage.svelte:55。
  • 代码执行：通过 CodeExecutions.svelte 显示交互式 Python 结果 src/lib/components/chat/Messages/ResponseMessage.svelte:56。
  • 状态更新：使用 StatusHistory.svelte 显示后台进程历史（例如，网络搜索步骤）src/lib/components/chat/Messages/ResponseMessage.svelte:64。

来源：

  • src/lib/components/chat/Messages/ResponseMessage.svelte:54-65
  • src/lib/components/chat/Messages/ResponseMessage.svelte:123-136
MultiResponseMessages.svelte - 多模型对比

当选择了多个模型时，MultiResponseMessages.svelte（src/lib/components/chat/Messages/MultiResponseMessages.svelte:1-55）负责处理并排显示：

  • 模型分组：根据 modelIdx 组织消息同级 src/lib/components/chat/Messages/MultiResponseMessages.svelte:157-182。
  • 响应合并：允许通过 mergeResponsesHandler() 将多个模型输出的内容合并到单条消息中 src/lib/components/chat/Messages/MultiResponseMessages.svelte:223-231。

来源：

  • src/lib/components/chat/Messages/MultiResponseMessages.svelte:157-231

---

子系统文档

有关特定聊天子系统的详细信息，请参阅以下子页面：