《WaLiOffice - AI Agent 智能办公平台》第2-8节：前端对话界面与流式渲染

作者：小傅哥
博客：https://bugstack.cn (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！😄

大家好，我是技术UP主小傅哥。

前面 7 节我们把 WaLiOffice 后端全部搭好了——LLM 调用、数据库持久化、工具系统、ReAct 循环、意图识别、Chat 路由。但用户看到的是前端界面，前端是用户和后端之间的"桥梁"。

这一节，我们就来写这个"桥梁"——前端对话界面（Studio.tsx）。

但你想过没有：前端接收 SSE 流式响应，和普通的 REST API 有什么区别？

区别大了！普通 API 是"一问一答"：你发请求，服务器处理，等几秒，返回结果，完事。 SSE 流式响应是"边想边说"：你发请求，服务器开始处理，每生成一个 token 就推给你，你在界面上实时看到 AI 在打字。

这对前端的要求完全不同：

1. 不能等请求完成：必须实时读取响应流，不能用普通的 axios / fetch 的"等结果"模式
2. 流式渲染：每个 token 来了就追加到消息里，要实现"打字机"效果
3. 状态管理复杂：消息有"正在生成中"和"已完成"两种状态，UI 要相应变化
4. 事件分发：不同类型的 SSE 事件（Thinking、ToolCall、Artifact、Done）要分发给不同的 UI 组件

WaLiOffice 的前端代码量很大（Studio.tsx 有 1565 行），我们这节不可能讲完所有细节，重点讲清楚最核心的三个部分：

1. chatApi.stream SSE 客户端——前端怎么接收流式响应
2. handleSend 发送流程——消息怎么发出去、状态怎么管理
3. ChatPanel 流式渲染——打字机效果怎么实现

一、本章诉求

1. 理解前端 SSE 事件流接收（Fetch + body.getReader()）
2. 掌握 EventSourceParser 事件解析（SSE 格式解析）
3. 学会 handleSend 发送流程——消息构建、状态管理、事件路由
4. 理解 ChatPanel 流式消息渲染（打字机效果）
5. 掌握 ArtifactPanel 产物预览机制
6. 理解附件上传（图片压缩 + 文件解析 + OCR 文本提取）

二、流程设计

2.1 前端 SSE 流接收架构

前端 SSE 接收流程：

用户点击"发送"或按回车
        ↓
handleSend() 构建请求
        ↓
fetch('/api/chat/stream', { body: JSON.stringify(req) })
        ↓
response.body.getReader().read() 循环读取字节流
        ↓
TextDecoder 解码字节 → 字符串
        ↓
SSE 事件解析（data: + event: 行解析）
        ↓
onEvent(event, data) 事件分发
        ↓
├─ message → 流式追加文本到消息列表（打字机效果）
├─ project_update → 初始化 PPT 项目 + 幻灯片大纲
├─ slide_update → 逐页更新幻灯片内容
├─ state_update → 更新状态栏 + processLogs
├─ tool_result → processLogs 显示工具结果
├─ artifact_update → upsertArtifact → 右侧产物面板
├─ done → 流结束 + 音效 + 刷新会话列表
└─ error → 错误提示