Skip to content

useAiChat 数据响应流

@yh-ui/hooks 提供了极其强大的 纯逻辑 Headless Hooks 抽象 系列。其中以 useAiChatuseAiConversations 为核心的数据引擎更是做到了完全与视觉解耦。

传统情况中,如果你需要接入后端模型接口,还要自己写网络 Fetch、维护 Token 流解析、实现历史记录与中止操作(Abort),不仅恶心而且极难做到组件通用。

现在,你只需注入一个你自定义的 request 函数接口给 useAiChat 挂靠,即可开箱即大地拿到所有 AI 全链路状态。

基础请求接管

利用纯纯的 Promise 完成接管和状态隔离,再也不需要手动 refloading = true 甚至自己去维护 messages.push。这一切已经在内部完全闭环。

极简接管

原生事件流(Stream)与随时中断

市面上诸多模型为了更低的首字节延时(TTFB)会采用 text/event-stream。 只要让你的 request 变成 AsyncGenerator(异步生成器返回 yield),也就是一个大文本块块。这个 Hook 内部会自动为你转化为精美的连贯打字流!

并在调用 stop() API 的同时利用原生 AbortController 立即拦截接口和后续 DOM 的渲染。

流式生成与强制中止

会话侧边状态漫游 (useAiConversations)

如果你要写一整个类似 ChatGPT 的宏大知识库界面。除了单聊天窗外的左侧抽屉记录一定跑不掉。 请使用 useAiConversations 快速获取一套开箱即用的带有不可变数据(Immutable)属性的安全集合。

我的会话
左侧由 useAiConversations 管理
历史会话无头管理

API Reference

useAiChat Options

参数名说明类型
initialMessages默认的消息记录数组AiChatMessage[]
request核心底层拦截器:在此实现请求响应(并支持返回 AsyncGenerator 实现流出),支持参数带 history 和取消控制符Function
idGenerator如果你需要替换生成随机字符串 UUID 的库,可以传进来() => string
onError发送流期间遇到错误时的钩子(err) => void

useAiChat Returns

你可以从中解构这套会话的全部内容。

返回值说明类型
messages双向绑定的会话历史列表。Ref<AiChatMessage[]>
isGenerating是否正在网络活动中Ref<boolean>
sendMessage将文本压入会话并触发 request(content: string) => Promise<void>
stop立即中断当前请求并结算状态() => void
clear清空屏幕() => void
removeMessage删除指定一条消息(id: string) => void

Released under the MIT License.