开源免费的WPS AI 软件察元AI文档助手：链路 053：AIAssistantDialog 选区翻译的 streamChatCompletion

链路 053：AIAssistantDialog 选区翻译的 streamChatCompletion

总体链路图

下图在全系列各篇保持一致，仅通过高亮样式标示本篇所覆盖的环节；箭头表示主成功路径，点线为异常或可选路径。阅读任意一篇时都应能回到本图定位，避免在单文件里「钻太深」而失去上下游语境。
plain
structured
multimodal
1 入口: Ribbon/对话框 → assistantId
2 startAssistantTask 占位任务
3 launchInfo 与 resolveDocumentInput
4 resolveModel 与模型清单
5 提示词拼装与 launchGuard
6 分流 plain / structured / multimodal
7a chatCompletion 文本链路 plain
7b chatCompletion 结构化批次
8a applyDocumentAction
8b executionPlan → applyDocumentProcessingPlan
7c generateMultimodalAsset
9 评测持久化与任务完成态
异常路径 normalizeError → 安全弹窗

本篇在总体链路中的位置

对应图中 N1 的对话框实例与 N8a：同一 chatApi，流式 UI 更新。高亮节点：N1、N8a。若本篇同时引用 chatApi 与任务运行器，通常意味着该逻辑处于「编排层与网络层交界」：修改时要同时考虑任务取消与 UI 快照。

深度说明（工程视角）

从工程维护角度看，本篇讨论的对象应当被视为「可替换实现」：只要对外的任务状态、HTTP 契约与文档写回语义保持不变，内部可以重构函数拆分或调整日志字段。阅读时建议始终抓住三个锚点：一是数据从哪来（PluginStorage、localStorage、COM 选区还是全文）；二是数据何时离开本机（进入 fetch 之前是否已完成脱敏与快照）；三是失败时用户可见的文本由谁归一（chatApi 与助手错误弹窗两条路径）。

就「链路 053：AIAssistantDialog 选区翻译的 streamChatCompletion」而言，源码位置可概括为：AIAssistantDialog.vue 内方法。这与摘要中的判断一致：对话窗内选区翻译使用 streamChatCompletion，onChunk 拼接 streamingContent 到消息气泡，与任务运行器的非流式 chatCompletion 形成对比。同一 chatApi 模块，流式由 SSE 解析驱动 UI。关键词「Vue、stream、onChunk」提示你在仓库内做全文检索时应优先锁定这些符号，而不是仅依赖界面文案。

与网络请求相关的修改，务必在本地用开发者工具或代理核对：请求体中的 model 字段是否与设置页保存的 modelId 一致；Authorization 是否只取 apiKey 列表的第一段（部分网关对多密钥格式敏感）；stream 为 true 时宿主是否稳定消费 SSE。若你引入新的 provider，应对照 getChatApiConfigByProvider 的 URL 拼接分支补充单元测试或手测用例，避免「路径已含 v1 却又重复拼接」类错误。

与文档写回相关的修改，应优先在无界面的纯函数层复现：例如仅调用 applyDocumentAction 或 applyDocumentProcessingPlan 的入参快照，观察 Range 坐标是否在 CRLF 归一化前后发生漂移。WPS 与 Word 在选区、批注锚点上的差异会放大这类问题，因此本篇若在讲坐标或分段，请同时阅读 documentPositionUtils 与 chunk 相关教程篇目。

阅读顺序上，本篇之后建议继续看：同文件另有若干 chatCompletion/streamChatCompletion 分支对应不同意图。若在总体图中定位，对应图中 N1 的对话框实例与 N8a：同一 chatApi，流式 UI 更新。遇到与教程系列术语不一致时，以源码标识符为准：教程侧重导航与概念，本系列侧重调用次序与失败面。

最后说明写作立场：本系列不对任何云厂商或模型服务做优劣评价，也不暗示「必须开通」某类账号；所述配置项仅反映当前仓库为打通 OpenAI 兼容协议而需要的最小字段集合。若组织策略禁止外联，应在网关或 hosts 层拦截，而不是在加载项内写死假地址。

与教程系列文档的对照

下列文档来自 docs/chayuan-tutorial-series，侧重「如何阅读仓库」与界面侧概念，与本链路系列互补：不重复推销功能，仅帮助建立目录与模块边界。

chayuan-tutorial-series/07-chayuan-ai-zhushou-duihua-yu-xiehui.md：与本篇链路相邻的工程说明，可对照变量命名与文件职责。
chayuan-tutorial-series/27-App-luyou-yu-duihuakuang-zu.md：与本篇链路相邻的工程说明，可对照变量命名与文件职责。

摘要

对话窗内选区翻译使用 streamChatCompletion，onChunk 拼接 streamingContent 到消息气泡，与任务运行器的非流式 chatCompletion 形成对比。同一 chatApi 模块，流式由 SSE 解析驱动 UI。

关键词

Vue;stream;onChunk

链路位置（源码索引）

AIAssistantDialog.vue 内方法。

正文

1. 流式翻译

streamChatCompletion 与 onChunk/onDone/onError。

维护时建议把本节涉及的符号在 IDE 里「查找引用」：确认是否还有对话框专用服务、拼写检查服务或评测脚本以拷贝粘贴方式重复了相似逻辑。若发现重复，优先抽到 chatApi 之上的薄封装，而不是在业务层再次拼接 URL 或 Authorization，以降低安全审查时的遗漏面。

javascript 复制代码

// src/components/AIAssistantDialog.vue 第14224-14265行
      assistantMsg.isLoading = true
      this.isStreaming = true
      this.streamingContent = ''
      this.startAssistantLoadingProgress(assistantMsg, {
        label: '已发送，正在翻译...',
        detail: '正在等待模型返回首段译文。',
        percent: 14
      })

      streamChatCompletion({
        ribbonModelId: model.id,
        providerId: model.providerId,
        modelId: model.modelId,
        temperature: 0.2,
        messages: this.buildSelectionTranslateMessages(selectionContext, intent?.targetLanguage),
        onChunk: (chunk) => {
          this.stopAssistantLoadingProgress(assistantMsg)
          assistantMsg.isLoading = false
          this.streamingContent += chunk
          assistantMsg.content = this.streamingContent
          this.$nextTick(() => this.scrollToBottom())
        },
        onDone: () => {
          this.stopAssistantLoadingProgress(assistantMsg)
          assistantMsg.isLoading = false
          this.isStreaming = false
          this.streamingContent = ''
          this.requestAssistantEvolutionSuggestionCheck()
          this.saveHistory()
          this.$nextTick(() => this.scrollToBottom())
        },
        onError: (err) => {
          this.stopAssistantLoadingProgress(assistantMsg)
          assistantMsg.isLoading = false
          this.isStreaming = false
          this.streamingContent = ''
          this.clearAssistantRecommendations(assistantMsg)
          assistantMsg.content = '[错误] ' + (err || '翻译失败')
          this.saveHistory()
          this.$nextTick(() => this.scrollToBottom())
        }
      })

上下游衔接

同文件另有若干 chatCompletion/streamChatCompletion 分支对应不同意图。

开源免费的WPS AI 软件 察元AI文档助手：链路 053：AIAssistantDialog 选区翻译的 streamChatCompletion