C37

流式展示

任务说明

AI 工程

实现 SSE 流式聊天：服务端返回 delta/done/error 事件，客户端用 TextDecoder + 缓冲区 buf 按空行切分事件，delta 追加到已有文本。断流或网络中断时保留已经收到的部分，并明确提示「已保留收到的内容」；停止按钮 abort 后同样不清空。交付一个最小 Next.js 工程（next 16 / react 19 / zod），真实模型调用位置使用受控 mock：未配置 AI_API_KEY 时走 mock，配置 AI_API_KEY、AI_BASE_URL、AI_MODEL 后走 OpenAI 兼容接口。验收：在练习目录执行 node tests/check.mjs solution 应输出 ALL CHECKS PASSED，对 starter 应至少一项 FAIL；本机 npm install && npm run dev 的人工步骤见 tests/README.md。

要求

lib/sse.ts 的 createEventParser 用闭包 buf 处理跨 chunk 的残余文本，按 \n\n 切事件
app/api/stream/route.ts 返回 Content-Type: text/event-stream，并把 request.signal 传给流
页面用 response.body.getReader()、TextDecoder、createEventParser 解析，delta 用 setText(prev => prev + text) 追加
done 标记完成；error 或流提前结束时保留已收到文本并显示明确提示；停止按钮 abort

A10 流式协议与事件 A11 流式聊天界面

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

流式展示

Command Palette