LLM 流式对话 & RAG 前端深度话题

async function streamChat(messages, onChunk, signal) {
  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`  // EventSource 带不了
    },
    body: JSON.stringify({ messages }),
    signal  // AbortController,用于中断
  })

  const reader = res.body.getReader()
  const decoder = new TextDecoder()
  let buffer = ''

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    // 把字节流解码成文本,拼到 buffer
    buffer += decoder.decode(value, { stream: true })

    // SSE 格式:data: {...}\n\n,按双换行分割
    const lines = buffer.split('\n\n')
    buffer = lines.pop()  // 最后一段可能不完整,留着下次拼

    for (const line of lines) {
      if (!line.startsWith('data: ')) continue
      const json = JSON.parse(line.slice(6))
      if (json.content) {
        onChunk(json.content)  // 每收到一个字调回调
      }
    }
  }
}

function renderStreamingMarkdown(text) {
  // 1. 检测未闭合的代码块,补全
  const codeBlockCount = (text.match(/```/g) || []).length
  let safeText = text
  if (codeBlockCount % 2 !== 0) {
    safeText += '\n```'  // 奇数个 ```,补一个闭合
  }

  // 2. 同样处理其他块级标记:表格(|)、引用(>)等
  // 表格:如果 | 数量暗示是表格但没换行结束,补换行

  // 3. 解析(marked 或 markdown-it)
  const html = marked.parse(safeText)

  // 4. XSS 防护:DOMPurify 清洗
  return DOMPurify.sanitize(html)
}

let fullText = ''      // SSE 累积的完整文本
let displayed = ''     // 已渲染到 UI 的
let rafPending = false

// SSE 回调:只累积,不直接渲染
function onChunk(chunk) {
  fullText += chunk
  scheduleRender()
}

function scheduleRender() {
  if (rafPending) return
  rafPending = true
  requestAnimationFrame(() => {
    // 一帧只渲染一次,把累积的都显示
    displayed = fullText
    content.innerHTML = renderStreamingMarkdown(displayed)
    rafPending = false
    autoScroll()  // 自动滚到底
  })
}

const controller = new AbortController()

// 发起请求时传入 signal
streamChat(messages, onChunk, controller.signal)

// 用户点"停止生成"按钮
stopButton.onclick = () => {
  controller.abort()  // 中断 fetch 流
  // 已接收的内容保留,后端也会收到 abort 信号停止推理
}

• 流式分两部分: 先流式吐"解释"(自然语言),再吐 SQL(代码块),最后吐查询结果(表格)
• SQL 高亮: 代码块用 highlight.js / Prism 实时高亮,流式时也要处理未闭合
• 结果表格渲染: SQL 执行结果可能是大表,接 vxe-table 虚拟滚动
• 可编辑重跑: 允许用户改生成的 SQL,点"重新执行"
• 意图确认: 模糊查询时,先反问"你是想查 X 吗?"确认后再执行(避免乱跑 SQL)

• 引用标注: 回答里标注"这段来自文档 X 的第 Y 段",点击可跳转原文
• 来源展示: 回答下方列出检索到的 Top-K 文档片段,可展开
• 反馈机制: "回答有帮助/没帮助"按钮,收集数据迭代
• 多轮上下文: 维护对话历史,但要控制 token 溢出(下面讲)