useAIStream

useAIStream 基于 useSSE 封装，面向 AI 应用场景，提供了 打字机效果、思考链、工具调用 等一整套流式能力。

AI 流式聊天演示

💡 注意：useAIStream 需要对接真实 AI API（如 OpenAI、Claude 等）。以下演示通过模拟流式输出展示效果，包含思考链阶段和打字机内容输出，实际使用时替换 start() 中的 URL 即可。

AI 流式聊天演示（含思考链 & 打字机效果）

基础用法

import { useAIStream } from '@yh-ui/request'

const {
  loading,
  content, // 原始文本
  text, // 解析后的当前文本
  thinking, // 思考内容
  toolCalls, // 工具调用列表
  done,
  error,
  start,
  stop,
  reset
} = useAIStream({
  onText: (full, delta) => {
    console.log('新增内容:', delta)
  },
  onThinking: (t) => {
    console.log('思考中:', t)
  },
  onToolCall: (tools) => {
    console.log('工具调用:', tools)
  }
})

// 发起 AI 请求
start({
  url: '/api/ai/chat',
  method: 'POST',
  data: {
    model: 'gpt-4',
    messages: [{ role: 'user', content: '帮我写一段欢迎文案' }],
    stream: true
  }
})

返回值

const result = useAIStream(options)

字段	类型	说明
loading	Ref<boolean>	是否正在接收
content	Ref<string>	原始流式文本
text	Ref<string>	解析后的纯文本（追加或覆盖）
thinking	Ref<string>	思考链内容
toolCalls	Ref<AIStreamMessage['toolCalls']>	工具调用列表
done	Ref<boolean>	是否完成
messages	Ref<SSEMessage[]>	底层 SSE 消息
error	Ref<Error | undefined>	错误对象
start(options?)	—	启动 AI 流式请求
stop()	—	停止流式请求
reset()	—	重置所有状态

配置项

useAIStream(options) 的配置项继承自 useSSE，并增加了以下 AI 特有配置：

属性	类型	默认值	说明
parseAIMessage	boolean	true	是否解析 AI 结构化消息（JSON 块）
appendMode	boolean	true	追加模式：true追加，false覆盖
onText	(text: string, delta: string) => void	—	收到新文本内容时的回调
onThinking	(thinking: string) => void	—	收到思考链内容时的回调
onToolCall	(toolCalls: AIStreamMessage['toolCalls']) => void	—	收到工具调用时的回调

与 useSSE 的关系

• useSSE：负责 流式传输协议本身（SSE / fetch 流）；
• useAIStream：在其之上解析 AI 模型返回格式，并提供更友好的状态字段。

当你只需要处理通用日志/进度流时，使用 useSSE 即可；当你对接 AI 模型（OpenAI、Claude 等）时，推荐使用 useAIStream。