流式数据结构组织聊天上下文的核心是让每条消息的生成、渲染、更新可预测、可中断、可回溯；消息需为含isStreaming、content、isComplete等状态字段的对象，前端按token块增量更新而非整段重绘，并严格区分历史与当前流以避免自指循环。

流式数据结构组织聊天上下文，核心不是“堆消息”，而是让每条消息的生成、渲染、更新都可预测、可中断、可回溯。它直接决定用户是否感觉“AI在思考”还是“卡在加载中”。关键在于把“流”从后端传输层逻辑，延伸到前端状态管理与 UI 渲染链路中。

消息对象需自带生命周期标识

每条 AI 消息不能只存 content 字符串，而应是一个含状态字段的对象：

• isStreaming: boolean —— 标识该消息是否正在接收中（true 时显示打字动画）
• content: string —— 当前已收到的文本片段（逐块拼接，非覆盖）
• isComplete: boolean —— 后端 SSE 流结束标志（如收到 data: [DONE]）
• chunkIds: string[] —— 可选，用于调试或溯源每个文本块来源（尤其配合 RAG 引用标记）

Vue 中用 ref 或 reactive 管理单条消息，避免直接字符串拼接导致响应失效。

按 token 块实时追加，而非整段重绘

流式响应本质是分块到达（如每 15–30 字符一个 event）。前端必须做增量更新：

立即学习“前端免费学习笔记（深入）”；

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 监听 SSE 的 message 事件，对每个 data 字段解析为 Markdown 片段
• 调用 messages[lastIndex].content += newChunk，触发 Vue 响应式更新
• 使用 v-html 或 marked.parse() 动态渲染，但需防 XSS（仅渲染可信内容）
• 禁用整个消息气泡的 re-render，只更新内部 <span> 或 <div class="streaming-content">

例如：用户问“RAG 是什么？”，AI 回复“RAG 是 Retrieval-Augmented Generation 的缩写……”，前端应在收到 “RAG 是 ” 后立刻渲染，再追加 “Retrieval-…”，而不是等全部返回才显示。

上下文拼接要区分“历史”与“当前流”

多轮对话中，RAG 需依赖完整上下文构建 Prompt，但前端展示不能混淆“已确认历史”和“正在生成的内容”：

• 每次新提问，将所有已完结（isComplete: true）的消息作为历史传给后端
• 当前正在流式生成的 AI 消息，不参与本次请求的上下文构造（否则造成自指循环）
• 前端侧可缓存最近 N 轮 session 的 messages 数组，但发送请求时只取 role + content + isComplete === true 的项
• 若支持引用溯源（如 (来源#3)），需确保引用编号在流式过程中就稳定——即检索结果列表在请求发起时已确定，不随流变化

异常与中断需有明确 UI 反馈

流式过程可能被网络抖动、超时、模型中断打断，不能静默失败：

• 监听 SSE 的 error 事件，自动触发 isStreaming = false 并置灰消息气泡
• 提供“重试”按钮，点击后重新发送当前问题 + 历史上下文（不重发已成功部分）
• 若后端返回错误码（如 400/503），在消息末尾插入小字提示：“响应异常，请稍后重试”
• 用户主动取消请求时，前端应立即终止监听，并标记该消息为“已取消”，保留已收到内容供查看

不复杂但容易忽略