打断生成后保留部分上下文的交互架构设计在流式大语言模型交互中“停止生成”绝不是简单地触发AbortController.abort()切断 HTTP 连接。如果仅仅在网络层中止请求前端往往会遗留一个处于残缺语法状态的半成品未闭合的代码块围栏、解析一半的数学公式、缺失结尾标签的 HTML或者在下一轮提问时让服务端产生上下文截断歧义。优雅的打断机制必须将打断动作视为一次“主动提交的截断状态变更”在保证客户端渲染树闭合的同时完成向服务端同步有效上下文范围的契约。状态机建模从生成流到不可变片段流式响应在前端的状态迁移不应是简单的主动覆写而应划分为三种核心生命周期Streaming流式输出中、Interrupted用户主动截断、Completed自然完成。export type StreamState idle | streaming | interrupted | completed | error; export interface ChatChunkPayload { id: string; role: assistant | user; rawBuffer: string; // 原始网络累加文本 sanitizedContent: string; // 补全闭合后的渲染文本 state: StreamState; interruptedAtTokenCount?: number; }当打断事件触发时前端首先要做的是捕获当前已到达的rawBuffer快照并进入语法树安全截断阶段。未闭合语法树的瞬时修补算法在 Markdown 流式渲染中打断可能发生在任意位置。最常见的三种渲染灾难包括三反引号代码块只输出了开头 typescript ...未闭合导致后续整个页面样式塌陷LaTeX 块级公式$$或行内公式$处于未封闭状态导致 KaTeX/MathJax 报错抛出红字HTML 内联标签如details或自定义卡片未成对出现。在前端挂载 AST 渲染器之前需要经过轻量级修补管道处理export function repairIncompleteMarkdown(raw: string): string { let content raw; // 1. 修复未闭合的代码块围栏 () const codeBlockMatches content.match(//g); const codeBlockCount codeBlockMatches ? codeBlockMatches.length : 0; if (codeBlockCount % 2 ! 0) { // 补齐末尾换行与闭合符号 content \n; } // 2. 修复行内代码块 () // 排除已经成对的三反引号后检查单反引号数量 const strippedCodeBlocks content.replace(/[\s\S]*?/g, ); const inlineCodeMatches strippedCodeBlocks.match(//g); if (inlineCodeMatches inlineCodeMatches.length % 2 ! 0) { content ; } // 3. 修复 LaTeX 块级公式 ($$) 与行内公式 ($) const mathBlockMatches content.match(/\$\$/g); if (mathBlockMatches mathBlockMatches.length % 2 ! 0) { content \n$$; } else { // 检查独立单美元符号 const singleDollarMatches content.replace(/\$\$[\s\S]*?\$\$/g, ).match(/\$/g); if (singleDollarMatches singleDollarMatches.length % 2 ! 0) { content $; } } // 4. 修复加粗或斜体符号 (* 或 _) const boldMatches content.match(/\*\*/g); if (boldMatches boldMatches.length % 2 ! 0) { content **; } return content; }通过这一层在打断时刻的纯函数拦截UI 视图层能瞬间从动态流式态固化为一个结构自洽、排版完整的静态历史消息卡片。上下文截断与服务端对齐协议很多人容易忽略打断后与大模型对话历史的同步。若前端只在界面上截断而后端在后续对话轮次中依然将此前未打断前服务端已生成的全量 Token 作为历史上下文塞入 Prompt会导致用户感知与模型记忆发生脱节——用户看到的是半句话模型却在基于一整篇长篇大论回答后续问题。解决此矛盾的交互架构要求前端在打断时向服务端回传当前的截断确认export class StreamingSessionManager { private abortController: AbortController | null null; private currentMessageId: string | null null; private currentTextBuffer: string ; public async startStream(prompt: string, onUpdate: (chunk: string) void) { this.abortController new AbortController(); this.currentTextBuffer ; this.currentMessageId crypto.randomUUID(); try { const response await fetch(/api/chat/completions, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt, messageId: this.currentMessageId }), signal: this.abortController.signal, }); const reader response.body?.getReader(); const decoder new TextDecoder(utf-8); if (!reader) return; while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); this.currentTextBuffer chunk; onUpdate(this.currentTextBuffer); } } catch (err: any) { if (err.name AbortError) { // 用户主动打断处理 await this.handleClientInterruption(); } else { throw err; } } } public interrupt() { if (this.abortController) { this.abortController.abort(); this.abortController null; } } private async handleClientInterruption() { const repairedText repairIncompleteMarkdown(this.currentTextBuffer); // 向服务端同步最终确认的截断上下文 try { await fetch(/api/chat/sync-context, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messageId: this.currentMessageId, retainedContent: repairedText, status: interrupted, }), }); } catch (syncError) { // 降级仅依靠本地状态持久化 console.warn(Failed to sync interrupted context to server, syncError); } } }交互质感视觉留白与就地重试在视觉层面粗暴地在内容末尾加一行刺眼的“【生成已被用户打断】”红字会割裂会话的气韵。更精致的做法是引入“断点微光与续写入口”在截断的文字末尾呈现一枚轻柔的渐隐断点图标悬浮时提示“已在此处停止”在卡片底栏操作区除了常规的“复制”、“重新生成”外提供“就地续写Continue”与“分叉编辑Branch”选项。当用户点击“就地续写”时系统将已保留的半截内容作为 Assistant 前缀直接传回服务端令大模型沿着截断点继续输出后续思路。这种架构设计不仅将打断转化为一种灵活的创作控制手段更让整个会话的数据链路在网络异常、用户干预与状态持久化之间保持严丝合缝。