Interactive Architecture Lab

AI 对话流式渲染机制实验室

从用户点击发送，到 SSE 事件、Token Buffer、批量 Store 提交、增量 Markdown 渲染，以及完成、中断、重试和重新生成。沿着七条职责泳道，观察每一步的事件、设计理由、数据变化和真实 UI 效果。

7条职责泳道

13个主链路步骤

4种结束与恢复流程

3类关键数据结构

0 / 13

泳道流程

当前步骤已完成尚未执行

用户

STEP 1输入并发送消息

Chat UI

STEP 2生成 messageId / requestId

STEP 12增量解析 Markdown

Conversation Store

STEP 3写入 user + pending assistant

STEP 11批量提交 assistant content

STEP 13flush 尾部并完成

Streaming Controller

STEP 4创建 StreamState

STEP 9Token 进入 buffer

STEP 10按帧或时间窗 flush

HTTP / SSE

STEP 5打开 fetch / SSE 流

STEP 8返回结构化 SSE event

Agent Backend

STEP 6Agent 建立 Run

LLM Provider

STEP 7模型产生增量 token

READY · 等待开始

建议先走完“正常完成”，再对比用户中断、失败后重试与重新生成分支。也可以使用左右方向键逐步查看，空格键控制播放。

核心原则：流式渲染不是“收到一个 token 就 setState 一次”，而是网络流、请求状态、领域消息状态与 UI 提交节奏协同的系统。

01 · send_message
用户：输入并发送消息

02 · create_ids
Chat UI：生成 messageId / requestId

03 · optimistic_insert
Conversation Store：写入 user + pending assistant

04 · stream_prepare
Streaming Controller：创建 StreamState

05 · request_open
HTTP / SSE：打开 fetch / SSE 流

06 · agent_run
Agent Backend：Agent 建立 Run

07 · provider_delta
LLM Provider：模型产生增量 token

08 · sse_delta
HTTP / SSE：返回结构化 SSE event

09 · buffer_append
Streaming Controller：Token 进入 buffer

10 · buffer_flush
Streaming Controller：按帧或时间窗 flush

11 · store_commit
Conversation Store：批量提交 assistant content

12 · render_incremental
Chat UI：增量解析 Markdown

13 · complete
Conversation Store：flush 尾部并完成