agentic_huge_data_base / wiki
页面 Open WebUI · 5.1 响应消息组件·DeepWiki 中文全文译文
DeepWiki 中文译文 / Open WebUI / 5.1

5.1 · 响应消息组件（Response Message Component）

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

项目Open WebUI 章节5.1 状态全文译文 模块界面与交互、系统架构、接口与服务契约、频道、笔记与协作
项目要点页2.5 参考项目 项目章节目录Open WebUI DeepWiki 原始章节Response Message Component 上一章5 下一章5.2
源码线索
  • src/lib/components/chat/Chat.svelte
  • src/lib/components/chat/ChatControls/Embeds.svelte
  • src/lib/components/chat/MessageInput.svelte
  • src/lib/components/chat/Messages.svelte
  • src/lib/components/chat/Messages/Citations.svelte
  • src/lib/components/chat/Messages/Citations/CitationModal.svelte
  • src/lib/components/chat/Messages/Citations/CitationsModal.svelte
  • src/lib/components/chat/Messages/Markdown/Source.svelte
  • src/lib/components/chat/Messages/Markdown/SourceToken.svelte
  • src/lib/components/chat/Messages/Message.svelte
模块标签
  • 界面与交互
  • 系统架构
  • 接口与服务契约
  • 频道、笔记与协作
  • 工具、记忆与模型调用

中文译文

响应消息组件（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/5.1-response-message-component
翻译时间：2026-06-09T16:08:27.094Z
翻译模型：deepseek-chat
原文字符数：11797
项目：Open WebUI (open-webui)

---

响应消息组件

相关源文件

以下文件被用作生成此 wiki 页面的上下文：

  • src/lib/components/chat/Chat.svelte
  • src/lib/components/chat/ChatControls/Embeds.svelte
  • src/lib/components/chat/MessageInput.svelte
  • src/lib/components/chat/Messages.svelte
  • src/lib/components/chat/Messages/Citations.svelte
  • src/lib/components/chat/Messages/Citations/CitationModal.svelte
  • src/lib/components/chat/Messages/Citations/CitationsModal.svelte
  • src/lib/components/chat/Messages/Markdown/Source.svelte
  • src/lib/components/chat/Messages/Markdown/SourceToken.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/common/Collapsible.svelte
  • src/lib/components/common/FullHeightIframe.svelte
  • src/lib/utils/index.ts
  • src/lib/utils/marked/citation-extension.ts

目的与范围

响应消息组件（ResponseMessage.svelte）是 Open WebUI 聊天界面中渲染 AI 生成响应的主要编排器。它管理助手消息的完整生命周期，从初始流式状态到最终的交互式展示。该组件负责内容渲染、引用、代码执行结果、用户反馈（评分）、文本转语音（TTS）以及消息编辑。

关于整体消息渲染管线的信息，请参阅内容渲染管线。关于用户发起的消息，请参阅 UserMessage.svelte 组件 src/lib/components/chat/Messages/UserMessage.svelte:1-135。关于并排处理多个模型响应，请参阅多模型响应展示。

---

组件架构

组件角色与职责

ResponseMessage.svelte 由 Message.svelte src/lib/components/chat/Messages/Message.svelte:77-101 为对话树中的每个助手消息实例化。它作为多个专用子组件的容器：

  • 内容展示： 使用 ContentRenderer.svelte src/lib/components/chat/Messages/ResponseMessage.svelte:57 进行 Markdown 解析和语法高亮。
  • 状态追踪： 使用 StatusHistory.svelte src/lib/components/chat/Messages/ResponseMessage.svelte:64 显示工具执行步骤和网络搜索进度。
  • 引用管理： 集成 Citations.svelte src/lib/components/chat/Messages/ResponseMessage.svelte:55 和 CodeExecutions.svelte src/lib/components/chat/Messages/ResponseMessage.svelte:56。
  • 交互操作： 管理复制、重新生成、评分和朗读内容的操作按钮。

组件层级结构：

graph TB
    subgraph "消息管理层"
        ["Messages.svelte"]
        ["Message.svelte"]
    end

    subgraph "响应渲染核心"
        ["ResponseMessage.svelte"]
    end

    subgraph "子组件"
        ["ContentRenderer.svelte"]
        ["StatusHistory.svelte"]
        ["Citations.svelte"]
        ["CodeExecutions.svelte"]
        ["WebSearchResults.svelte"]
        ["FollowUps.svelte"]
        ["RegenerateMenu.svelte"]
        ["RateComment.svelte"]
    end

    ["Messages.svelte"] -- "遍历历史记录" --> ["Message.svelte"]
    ["Message.svelte"] -- "如果 role == assistant" --> ["ResponseMessage.svelte"]

    ["ResponseMessage.svelte"] --> ["StatusHistory.svelte"]
    ["ResponseMessage.svelte"] --> ["ContentRenderer.svelte"]
    ["ContentRenderer.svelte"] --> ["Citations.svelte"]
    ["ContentRenderer.svelte"] --> ["CodeExecutions.svelte"]
    ["ResponseMessage.svelte"] --> ["WebSearchResults.svelte"]
    ["ResponseMessage.svelte"] --> ["FollowUps.svelte"]
    ["ResponseMessage.svelte"] --> ["RegenerateMenu.svelte"]
    ["ResponseMessage.svelte"] --> ["RateComment.svelte"]

来源：src/lib/components/chat/Messages/ResponseMessage.svelte:42-65、src/lib/components/chat/Messages.svelte:19-23、src/lib/components/chat/Messages/Message.svelte:77-101

---

数据流与状态管理

消息数据接口

该组件响应式地消费聊天历史中的 MessageType 对象。为防止高频流式传输期间不必要的重新渲染，它使用节流的深度比较检查，优先比较 content 和 done 字段 src/lib/components/chat/Messages/ResponseMessage.svelte:124-136。

响应消息实体映射：

classDiagram
    class ResponseMessage {
        +string chatId
        +string messageId
        +object history
        +boolean isLastMessage
        +speak()
        +copyToClipboard()
        +rateMessage()
    }

    class MessageType {
        +string id
        +string role
        +string content
        +string model
        +array statusHistory
        +array sources
        +array code_executions
        +object info
        +object annotation
    }

    ResponseMessage "1" *-- "1" MessageType : 渲染
    MessageType "1" *-- "0..*" StatusItem : 追踪进度
    MessageType "1" *-- "0..*" Citation : 引用

来源：src/lib/components/chat/Messages/ResponseMessage.svelte:67-116、src/lib/components/chat/Messages/ResponseMessage.svelte:123-136

操作处理器系统

该组件提供了一套全面的交互处理器：

函数逻辑来源
copyToClipboard通过 removeAllDetails 移除 <details> 标签，并在复制前附加可选水印。src/lib/components/chat/Messages/ResponseMessage.svelte:192-203
speak使用浏览器 API、KokoroWorker 或 OpenAI 合成来编排 TTS。src/lib/components/chat/Messages/ResponseMessage.svelte:226-325
rateMessage向 /evaluations API 端点提交评分和定性反馈。src/lib/components/chat/Messages/ResponseMessage.svelte:445-561
editMessageHandler预处理编辑文本框的内容。src/lib/components/chat/Messages/ResponseMessage.svelte:383-392
generateImage调用 imageGenerations API 从消息文本生成图像。src/lib/components/chat/Messages/ResponseMessage.svelte:421-441

---

功能集成

引用与参考文献

当 AI 响应包含引用（例如来自 RAG）时，ResponseMessage 会渲染一个 Citations.svelte 组件。该组件管理来源列表，并可触发 CitationModal.svelte 进行详细的文档检查。

  • 来源处理： 组件提取文档元数据、名称和距离（相关性分数）src/lib/components/chat/Messages/Citations.svelte:99-138。
  • 来源模态框： 如果来源有 embed_url，可以在 FullHeightIframe.svelte 中显示，或根据 readOnly 状态在新标签页中打开 src/lib/components/chat/Messages/Citations.svelte:44-62。
  • 文本片段： 模态框可以生成 Google Chrome 风格的文本片段 URL，以高亮显示源文档中的特定引用文本 src/lib/components/chat/Messages/Citations/CitationModal.svelte:66-94。

来源：src/lib/components/chat/Messages/Citations.svelte:1-72、src/lib/components/chat/Messages/Citations/CitationModal.svelte:41-56、src/lib/components/chat/Messages/Citations/CitationModal.svelte:66-94

文本转语音（TTS）管线

TTS 系统支持多个后端，并通过 audioQueue 存储实现渐进式音频播放。它通过检查模型特定元数据、用户设置和系统默认值来解析要使用的语音 src/lib/components/chat/Messages/ResponseMessage.svelte:220-224。

graph TB
    subgraph "输入处理"
        ["message.content"]
        ["removeAllDetails(content)"]
    end

    subgraph "引擎选择"
        ["CheckEngine"]
        ["Web Speech API"]
        ["KokoroWorker (Wasm)"]
        ["synthesizeOpenAISpeech (API)"]
    end

    subgraph "播放"
        ["$audioQueue.enqueue()"]
        ["音频输出"]
    end

    ["message.content"] --> ["removeAllDetails(content)"]
    ["removeAllDetails(content)"] --> ["CheckEngine"]
    ["CheckEngine"] --> ["Web Speech API"]
    ["CheckEngine"] --> ["KokoroWorker (Wasm)"]
    ["CheckEngine"] --> ["synthesizeOpenAISpeech (API)"]
    ["KokoroWorker (Wasm)"] --> ["$audioQueue.enqueue()"]
    ["synthesizeOpenAISpeech (API)"] --> ["$audioQueue.enqueue()"]
    ["$audioQueue.enqueue()"] --> ["音频输出"]

来源：src/lib/components/chat/Messages/ResponseMessage.svelte:226-325、src/lib/components/chat/Messages/ResponseMessage.svelte:19-27

消息导航（分支）

如果消息有兄弟消息（通过重新生成产生的多个版本），ResponseMessage 提供导航控件 src/lib/components/chat/Messages/ResponseMessage.svelte:138。

  • 兄弟消息逻辑： 它计算当前索引相对于父级提供的 siblings 的位置。
  • 索引编辑： 用户可以通过 gotoMessage 手动跳转到特定版本 src/lib/components/chat/Messages/ResponseMessage.svelte:141。

---

反馈与评估

反馈系统允许用户对消息进行评分并提供定性评论。这些数据对于模型评估和 RLHF 工作流至关重要。

  • 反馈对象： 包含聊天状态的快照、模型 ID 和具体的评分数据 src/lib/components/chat/Messages/ResponseMessage.svelte:452-496。
  • API 集成： 使用 $lib/apis/evaluations 中的 createNewFeedback、getFeedbackById 或 updateFeedbackById src/lib/components/chat/Messages/ResponseMessage.svelte:14。
  • 自动标签： 可以触发 generateTags 自动对反馈进行分类 src/lib/components/chat/Messages/ResponseMessage.svelte:16。

来源：src/lib/components/chat/Messages/ResponseMessage.svelte:445-561、src/lib/apis/evaluations.ts

---

渲染生命周期

  1. 挂载： 组件初始化，如果配置了 TTS 等，可以触发特定的副作用。
  2. 流式传输： 当内容通过 history 存储到达时，ContentRenderer 更新视图。如果存在 statusHistory，StatusHistory.svelte 会显示进度项 src/lib/components/chat/Messages/ResponseMessage.svelte:172-176。
  3. 完成： 一旦 message.done 为 true，交互式元素如 FollowUps.svelte src/lib/components/chat/Messages/ResponseMessage.svelte:60 和 RegenerateMenu.svelte src/lib/components/chat/Messages/ResponseMessage.svelte:63 被渲染。
  4. 交互： 用户操作（复制、评分、朗读）触发相应的内部处理器，或向父组件分发事件。

来源：src/lib/components/chat/Messages/ResponseMessage.svelte:124-136、src/lib/components/chat/Messages/ResponseMessage.svelte:172-176