agentic_huge_data_base / wiki
页面 Open WebUI · 5.6 交互式文本操作·DeepWiki 中文全文译文
DeepWiki 中文译文 / Open WebUI / 5.6

5.6 · 交互式文本操作（Interactive Text Actions）

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

项目Open WebUI 章节5.6 状态全文译文 模块工具、记忆与模型调用、系统架构、界面与交互、频道、笔记与协作
项目要点页2.5 参考项目 项目章节目录Open WebUI DeepWiki 原始章节Interactive Text Actions 上一章5.5 下一章6
源码线索
  • src/lib/apis/streaming/index.ts
  • 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/RateComment.svelte
  • src/lib/components/chat/Messages/ResponseMessage.svelte
  • src/lib/components/chat/Messages/ResponseMessage/TaskList.svelte
  • src/lib/components/chat/Messages/UserMessage.svelte
模块标签
  • 工具、记忆与模型调用
  • 系统架构
  • 界面与交互
  • 频道、笔记与协作
  • 接口与服务契约

中文译文

交互式文本操作（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/5.6-interactive-text-actions
翻译时间：2026-06-09T16:08:40.141Z
翻译模型：deepseek-chat
原文字符数：10163
项目：Open WebUI (open-webui)

---

交互式文本操作

相关源文件

以下文件为本 wiki 页面生成时使用的上下文：

  • src/lib/apis/streaming/index.ts
  • 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/RateComment.svelte
  • src/lib/components/chat/Messages/ResponseMessage.svelte
  • src/lib/components/chat/Messages/ResponseMessage/TaskList.svelte
  • src/lib/components/chat/Messages/UserMessage.svelte
  • src/lib/components/chat/ModelSelector.svelte
  • src/lib/components/chat/ModelSelector/ModelItem.svelte
  • src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
  • src/lib/components/chat/ModelSelector/Selector.svelte
  • src/lib/components/icons/Label.svelte
  • src/lib/components/icons/Tag.svelte
  • src/lib/utils/index.ts

本文档记录了聊天消息中可用的交互式文本操作功能，包括复制到剪贴板、文本转语音、消息编辑以及评分/反馈功能。这些功能增强了用户在聊天界面中与 AI 生成消息和用户消息的交互体验。

概述

交互式文本操作通过消息组件中的操作按钮和键盘快捷键实现。实现这些功能的主要组件是 ResponseMessage.svelte 和 UserMessage.svelte，它们分别为助手消息和用户消息提供上下文相关的操作。此外，RateComment.svelte 等专用组件负责处理结构化反馈和多模态输入。

来源： src/lib/components/chat/Messages/ResponseMessage.svelte:1-116, src/lib/components/chat/Messages/UserMessage.svelte:1-66

---

复制到剪贴板

基本复制功能

复制到剪贴板功能允许用户复制消息内容。该实现根据用户设置支持纯文本复制和格式化复制。

标题：复制到剪贴板数据流

graph TB
    subgraph "前端 UI"
        CopyButton["复制按钮<br/>(ResponseMessage/UserMessage)"]
    end

    subgraph "逻辑层"
        CopyHandler["copyToClipboard(text)<br/>ResponseMessage:192-203"]
        UtilFunction["_copyToClipboard(text, ...)<br/>utils/index.ts"]
    end

    subgraph "处理过程"
        StripDetails["removeAllDetails(text)<br/>utils/index.ts:1067"]
        Watermark["添加响应水印<br/>$config.ui.response_watermark"]
    end

    CopyButton --> CopyHandler
    CopyHandler --> StripDetails
    StripDetails --> Watermark
    Watermark --> UtilFunction

    UtilFunction --> Success["Toast 成功提示<br/>i18n: 复制成功"]
实现细节

ResponseMessage 中的复制处理器确保在文本到达剪贴板之前，隐藏的 UI 元素（如用于引用或思考过程的 <details> 块）已被剥离。

步骤描述代码位置
移除详情从字符串中剥离 <details> 标签及其内容src/lib/utils/index.ts:1067-1085
添加水印如果系统配置中启用了自定义水印，则追加该水印src/lib/components/chat/Messages/ResponseMessage.svelte:195-197
写入剪贴板使用工具包装器执行复制操作src/lib/components/chat/Messages/ResponseMessage.svelte:199-202

来源： src/lib/components/chat/Messages/ResponseMessage.svelte:192-203, src/lib/utils/index.ts:1067-1085

---

文本转语音（TTS）与语音操作

TTS 架构

文本转语音系统提供了对语音合成的精细控制，支持模型特定的语音覆盖和优先级选择逻辑。

标题：TTS 执行管道

graph TB
    subgraph "自然语言空间"
        MsgContent["消息内容字符串"]
    end

    subgraph "代码实体空间"
        SpeakHandler["speak()<br/>ResponseMessage.svelte:226-261"]
        GetVoice["getVoiceId()<br/>ResponseMessage:220-224"]
        StopAudio["stopAudio()<br/>ResponseMessage:205-217"]
        AudioQueue["$audioQueue<br/>stores.ts"]
    end

    MsgContent --> SpeakHandler
    SpeakHandler --> StopAudio
    SpeakHandler --> GetVoice

    GetVoice --> CheckMeta["检查 model.info.meta.tts.voice"]
    CheckMeta --> CheckSettings["检查 $settings.audio.tts"]

    SpeakHandler --> TTS_API["synthesizeOpenAISpeech()<br/>audio.ts"]
    TTS_API --> AudioQueue
语音选择优先级

getVoiceId 函数根据以下层级解析要使用的语音：

  1. 模型元数据： model?.info?.meta?.tts?.voice src/lib/components/chat/Messages/ResponseMessage.svelte:221。
  2. 用户设置： 如果用户设置了与系统配置不同的默认语音 src/lib/components/chat/Messages/ResponseMessage.svelte:222-223。
  3. 系统配置： 全局默认值 config.audio.tts.voice src/lib/components/chat/Messages/ResponseMessage.svelte:224。
TTS 实现

speak() 函数处理语音请求的完整生命周期：

  • 验证： 检查内容是否非空 src/lib/components/chat/Messages/ResponseMessage.svelte:227-230。
  • 中断： 调用 stopAudio() 取消现有播放 src/lib/components/chat/Messages/ResponseMessage.svelte:232。
  • 合成： 使用 synthesizeOpenAISpeech 进行基于云的合成，或使用 KokoroWorker 进行基于本地 WebAssembly 的合成 src/lib/components/chat/Messages/ResponseMessage.svelte:245-258。

来源： src/lib/components/chat/Messages/ResponseMessage.svelte:205-261, src/lib/workers/KokoroWorker.ts:1-18

---

评分与反馈

系统通过 RateComment.svelte 组件提供了详细的反馈机制，允许用户对 AI 响应提供定性和定量数据。

反馈数据结构

当用户对消息进行评分时，会更新一个 annotation 对象。UI 根据评分是正面（1）还是负面（-1）提供不同的原因。

字段描述代码参考
rating1 表示喜欢，-1 表示不喜欢src/lib/components/chat/Messages/RateComment.svelte:46-50
reasons预定义列表（例如 accurate_information、too_verbose）src/lib/components/chat/Messages/RateComment.svelte:17-35
detailedRating1-10 的评分尺度，用于精细质量评估src/lib/components/chat/Messages/RateComment.svelte:137-152
标签系统

用户可以为反馈添加元数据标签。Tags 组件管理与消息注释关联的字符串标识符列表 src/lib/components/chat/Messages/RateComment.svelte:230-244。

来源： src/lib/components/chat/Messages/RateComment.svelte:17-50, src/lib/components/chat/Messages/RateComment.svelte:137-152

---

消息编辑

用户消息编辑

用户可以修改自己的消息。这会触发 UserMessage.svelte 中的特定工作流：

  • 初始化： editMessageHandler 捕获当前内容并将 UI 设置为编辑模式 src/lib/components/chat/Messages/UserMessage.svelte:75-92。
  • 确认： editMessageConfirmHandler 调用父组件的 editMessage 函数，该函数通常处理对话树的分支 src/lib/components/chat/Messages/UserMessage.svelte:94-105。
助手消息编辑

用户也可以编辑助手的响应，以纠正或优化 AI 输出。

  • 分支： 在线程中间编辑助手消息或用户消息会导致 history.messages 树中产生一个分支 src/lib/components/chat/Messages/UserMessage.svelte:100。

来源： src/lib/components/chat/Messages/UserMessage.svelte:75-111, src/lib/components/chat/Messages/ResponseMessage.svelte:178-181

---

多模型响应交互

当多个模型响应同一提示时，MultiResponseMessages 组件管理并排显示和专用操作。

合并响应

多响应模式中的一个独特操作是 mergeResponsesHandler。它聚合当前层级所有模型响应的内容，并将其传递给合并函数 src/lib/components/chat/Messages/MultiResponseMessages.svelte:223-231。

标题：多响应导航逻辑

graph LR
    subgraph "组件状态"
        GMI["groupedMessageIds<br/>(模型索引到 ID 的映射)"]
        GMIX["groupedMessageIdsIdx<br/>(每个模型的当前索引)"]
    end

    subgraph "操作"
        Goto["gotoMessage(modelIdx, msgIdx)<br/>MultiResponseMessages:76"]
        ShowPrev["showPreviousMessage(modelIdx)<br/>MultiResponseMessages:105"]
    end

    subgraph "聊天逻辑"
        UpdateChat["updateChatById()<br/>chats.ts"]
        TriggerScroll["triggerScroll()"]
    end

    Goto --> UpdateChat
    ShowPrev --> UpdateChat
    UpdateChat --> TriggerScroll

来源： src/lib/components/chat/Messages/MultiResponseMessages.svelte:76-146, src/lib/components/chat/Messages/MultiResponseMessages.svelte:223-231