Vue3 流式 AI 对话组件：SSE 解析与 useAiChat

// 最小解析骨架（先看机制，第 4 节封装成 composable）
const res = await fetch("/api/chat", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ messages }),
})

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

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  buffer += decoder.decode(value, { stream: true })

  // SSE 事件以空行分隔；网络分块不保证按事件边界切，所以要攒 buffer
  const events = buffer.split("\n\n")
  buffer = events.pop() ?? ""   // 最后一段可能不完整，留到下一轮

  for (const event of events) {
    const line = event.split("\n").find((l) => l.startsWith("data:"))
    if (!line) continue
    const payload = line.slice(5).trim()
    if (payload === "[DONE]") continue
    const delta = JSON.parse(payload).text ?? ""
    // delta：本次到达的增量文本，追加到当前回复上
  }
}

// composables/useAiChat.ts
import { ref, shallowRef } from "vue"

export interface ChatMessage {
  role: "user" | "assistant"
  content: string
}

export function useAiChat() {
  const messages = ref<ChatMessage[]>([])
  const isLoading = ref(false)
  let controller: AbortController | null = null

  async function send(content: string) {
    messages.value.push({ role: "user", content })
    // 预置一条空的 assistant 消息，流的增量往它身上追加
    const reply: ChatMessage = { role: "assistant", content: "" }
    messages.value.push(reply)
    isLoading.value = true

    controller = new AbortController()
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        // 把对话历史发给后端（不含刚预置的空回复）
        body: JSON.stringify({ messages: messages.value.slice(0, -1) }),
        signal: controller.signal,
      })

      if (res.status === 429) {
        reply.content = "请求太频繁了，请稍等几秒再试。"
        return
      }

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

      while (true) {
        const { done, value } = await reader.read()
        if (done) break
        buffer += decoder.decode(value, { stream: true })
        const events = buffer.split("\n\n")
        buffer = events.pop() ?? ""
        for (const event of events) {
          const line = event.split("\n").find((l) => l.startsWith("data:"))
          if (!line) continue
          const payload = line.slice(5).trim()
          if (payload === "[DONE]") continue
          reply.content += JSON.parse(payload).text ?? ""  // 按到达顺序追加
        }
      }
    } catch (e) {
      if (e instanceof DOMException && e.name === "AbortError") {
        // 用户主动中断：不算错误，保留已生成的部分
      } else {
        reply.content = "连接中断了，点击重试可以继续。"
      }
    } finally {
      isLoading.value = false
      controller = null
    }
  }

  function abort() {
    controller?.abort()   // fetch 立刻 reject，finally 负责状态清理
  }

  return { messages, isLoading, send, abort }
}

<!-- components/AiChat.vue -->
<script setup lang="ts">
import { useAiChat } from "@/composables/useAiChat"

const { messages, isLoading, send, abort } = useAiChat()
const draft = ref("")

function submit() {
  if (!draft.value.trim() || isLoading.value) return
  send(draft.value.trim())
  draft.value = ""
}
</script>

<template>
  <div class="chat">
    <div v-for="(m, i) in messages" :key="i" class="msg" :class="m.role">
      {{ m.content }}
    </div>
    <button v-if="isLoading" @click="abort">停止生成</button>
    <form @submit.prevent="submit">
      <input v-model="draft" placeholder="问点什么……" />
    </form>
  </div>
</template>

// utils/renderMarkdown.ts
import DOMPurify from "dompurify"
import { marked } from "marked"

export function renderMarkdown(md: string): string {
  const html = marked.parse(md, { async: false }) as string
  // 只放行文本结构标签，脚本与事件属性一律剥除
  return DOMPurify.sanitize(html, { FORBID_TAGS: ["style", "form"], FORBID_ATTR: ["onerror", "onclick"] })
}

<!-- 组件内：v-html 的内容必须来自净化函数 -->
<div class="msg" v-html="renderMarkdown(m.content)"></div>

import { ref, shallowRef, triggerRef } from "vue"

// 方案 A：列表浅响应 + 手动通知
const messages = shallowRef<ChatMessage[]>([])
function push(msg: ChatMessage) {
  messages.value = [...messages.value, msg]  // 整体替换触发更新，元素本身不被深度代理
}
function appendToLast(delta: string) {
  // 修改最后一条后手动通知；配合「只渲染最后 N 条」效果更好
  messages.value[messages.value.length - 1].content += delta
  triggerRef(messages)
}

// stores/chat.ts
import { defineStore } from "pinia"

export const useChatStore = defineStore("chat", {
  state: () => ({
    sessions: {} as Record<string, ChatMessage[]>,  // 按会话 id 分组
    activeId: "",
  }),
  actions: {
    snapshot(id: string, messages: ChatMessage[]) {
      this.sessions[id] = messages   // 关键时机：流结束时才快照，见下文
    },
  },
  persist: true,   // 由持久化插件落 localStorage
})