跳到正文
QuireKit Markdown
开发者文档
预览版 · 未发布

AI 流式接入

把陆续收到的 Markdown 显示为同一条消息,并处理结束、取消与失败。

AI 回复通常分多次到达。应用负责接收网络数据并累计文本,QuireMarkdown 负责把当前已经收到的 Markdown 显示出来。它不发起模型请求,也不决定请求何时结束。

1. 把消息交给阅读组件

沿用快速开始的组件导入。message.id 是同一条回复的稳定标识,message.text 是应用累计的文本:

vue

每次传入已收到的完整原文。同一消息的前缀追加复用解析会话;全文替换、清空、identity 变化和 options 对象替换会重建会话并释放旧资源。status 为 receiving、complete、 stopped 或 error,只表示传输状态;停止不丢字,也不提前冻结块或补写语法结束标记。 后到的链接、脚注定义仍可更新前文。外部网络请求由应用取消。

2. 观察追加和停止的效果

点击“开始流式演示”,观察标题、链接和脚注陆续出现;点击“停止”会保留已收到的文字。停止网络请求仍由应用负责。

正在准备示例…

服务端首屏

默认 SSR 直接生成标题、列表、链接等语义内容,客户端首帧使用相同解析策略。资源加载 只在客户端挂载后开始。需要推迟初次解析时使用 ssr="source":服务端与首帧显示转义 原文,挂载后解析。state 可接收已有快照,但不能与 content 同时提供。

3. 接收真实文本响应

下面的可复用函数只处理响应体为 原始 Markdown 文本 的 HTTP 流。 把应用的 AbortSignal 同时交给 fetch 和此函数,并用 onText 更新 message.text; 开始请求设 receiving,成功设 complete,主动取消设 stopped,其他失败设 error。 旧请求的回调应核对请求身份,不能覆盖已切换的消息;组件卸载时由宿主 abort。

recipes/response.ts 只负责从响应体读取和解码文本,readMarkdownResponse(response, signal, onText) 会把累计全文交给 onText,并在结束时返回全文。消息列表、请求状态和错误提示仍放在应用中。

recipes/response.tsts

如果服务端使用 SSE 或 JSON 事件,先在宿主解码协议,只把文本 delta 追加为 Markdown。 不要把 data:、事件 JSON 或二进制 chunk 的边界直接当作 Markdown;TextDecoder 必须跨块保留解码状态。

QuireKit Markdown · QuireKit流式 Markdown · @quirekit/incremark · MIT