【免费下载链接】Life-Agent-RU-YEELife Agent RU YEE — An AI-powered life management agent that autonomously handles daily routines including meal planning, grocery shopping, schedule coordination, and household task automation via cloud-based mobile agents.项目地址https://gitcode.com/gh_mirrors/li/Life-Agent-RU-YEE点击查看免费下载Life-Agent-RU-YEE 是一款 AI 生活管理 Agent能用自然语言完成订餐、采购、日程等日常事务。它的前端基于Vue 3 TypeScript构建核心亮点是一套SSE 实时流式对话界面后端逐字吐出回答、工具调用状态和子 Agent 进度前端即时渲染成聊天卡片。本指南带你从前端开发者视角吃透这套实时流式对话界面是如何实现的。前端技术栈速览先看 web/package.json 中的核心依赖理解了它后面的实现就都顺理成章技术版本作用Vue^3.5响应式 UI 框架Vite^6.0构建与本地开发服务器TypeScript^5.7类型系统贯穿整个web/srcTailwindCSS^3.4原子化样式移动端优先vue-router / vue-i18n^4.5 / ^11.3路由与多语言marked^15.0Markdown 渲染partial-json^0.1.7解析流式接收中的不完整 JSON 一个关键细节工具结果如购物车、菜品列表是大段 JSON且后端是分块推送的。partial-json能在 JSON 还没接收完时就尝试解析让界面边收边画而不是干等。目录结构对话功能都藏在哪些文件里前端代码集中在 web/ 目录对话功能的主链路如下web/src/ ├── api/chat.ts # 与后端的 HTTP/SSE 通信streamChat 在此 ├── composables/useSSE.ts # SSE 事件状态机 会话/历史管理核心 ├── types.ts # Message / ToolCallInfo / SSEEvent 类型 ├── views/ChatView.vue # 聊天页滚动、自动跟随、加载更多 └── components/chat/ ├── StreamingText.vue # Markdown 流式文本 光标 ├── ToolCallCard.vue # 工具调用卡片按工具类型渲染 └── MessageBubble.vue # 单条消息气泡各文件职责清晰useSSE.ts是大脑负责把后端事件流翻译成界面上的状态ChatView.vue负责布局与交互。SSE 实时流式协议后端怎么吐、前端怎么收后端标准的 text/event-stream后端在 core/stream.py 把每个事件编码成 SSE 文本帧event: text_delta data: {content: 今天}即event: 事件名\ndata: JSON\n\n的格式响应头media_typetext/event-stream。api/chat.py 的POST /api/chat端点把 Agent 的异步事件流交给这套封装逐帧推给浏览器。前端为什么不用原生 EventSource浏览器自带EventSource只支持GET而本项目对话是POST请求要带上消息体与session_id。所以 web/src/api/chat.ts 用fetchReadableStream手动解析SSE 流这也是本指南最值得学习的部分const res await fetch(/api/chat, { method: POST, body, signal }) const reader res.body.getReader() const decoder new TextDecoder() let buffer while (true) { const { done, value } await reader.read() if (done) break buffer decoder.decode(value, { stream: true }) // 按换行切分缓存未读完的半行到 buffer const lines buffer.split(\n) buffer lines.pop() ?? for (const line of lines) { if (line.startsWith(event: )) currentEvent line.slice(7).trim() else if (line.startsWith(data: ) currentEvent) onEvent(currentEvent, JSON.parse(line.slice(6))) } }这里有两个必知的工程细节缓冲处理buffer lines.pop() ?? 把最后一个半行留下避免 JSON 恰好被 TCP 分块截断而解析失败——这是手写 SSE 解析器最常见的坑。可中断streamChat接受一个AbortSignal配合AbortController让用户随时停止生成且AbortError不被当作错误抛出。12 类 SSE 事件与前端状态机所有事件类型在 web/src/types.ts 中以**可辨识联合discriminated union**声明类型安全拉满。useSSE.ts用一个switch (event)把它们分发到消息状态上事件界面效果text_delta追加正文逐字打字机效果tool_call新增一张工具调用卡片tool_output_delta/tool_output_done卡片内工具结果流式接收 → 完成thinking显示思考中…状态条agent_delegate/agent_delegate_done正在咨询 某 Agent…完成后标记跳过项agent_progress子 Agent 的计划、进度、工具结果更新childCallsinput_request卡片内弹出内联输入框单选/文本done/error收尾 / 顶部错误提示条 一个精巧设计tool_output_delta用partial-json边收边解析tool_output_done到达后再用完整result覆盖界面因此能流式预览购物车、菜品等结构化结果。子 Agent 的计划 → 执行映射采购等场景会委托子 Agent 批量执行搜索 → 加购。agent_progress事件里的type: plan会一次性预生成全部childCalls后续tool_call/tool_result通过group_id精确匹配回填找不到再按顺序兜底。这套先占位、后填充的思路是处理并行工具流的关键。实时流式对话界面组件打字机效果StreamingTextweb/src/components/chat/StreamingText.vue 用marked把累积的 Markdown 实时渲染成 HTML流式结束前在末尾追加一个闪烁光标span v-ifstreaming classinline-block w-1.5 h-4 bg-gray-600 animate-pulse /工具卡片按工具类型渲染web/src/components/chat/ToolCallCard.vue 是界面的重头戏——它根据info.tool的值把不同工具的结果渲染成专属 UIdish_query画菜品卡、shopping_list画可勾选采购清单、hema_search画商品列表、agent_call画子任务清单。通用结果则回退到preJSON 展示。这样结构化数据 → 友好界面的映射全部收敛在一个组件里。页面编排ChatViewweb/src/views/ChatView.vue 负责整体交互自动滚动跟随watch消息数量与末条正文长度scrollIntoView平滑滚到底部历史分页加载loadMoreHistory往前翻页加载后补偿滚动高度避免页面跳动防抖持久化勾选采购项后 500ms 防抖再调PATCH /api/chat/message/:id落库。Vite API 代理配置开发环境前后端分离web/vite.config.ts 把/api全部代理到后端server: { port: 5173, proxy: { /api: { target: http://localhost:8000, changeOrigin: true, ws: true } } }生产环境则由 nginx 反向代理承担同样的职责。ws: true为设备网关的 WebSocket 预留了升级通道。运行与测试在web/目录下npm install # 安装依赖 npm run dev # 启动开发服务器5173 端口自动代理 /api npm run test # 运行 Vitest 单测对话事件处理已有针对性单测例如 web/src/composables/tests/useSSE-delegate.test.ts 覆盖了agent_delegate的思考中状态设置与清除可作为你新增事件处理逻辑时的测试范例。总结回顾 Life-Agent-RU-YEE 前端这套SSE 实时流式对话界面可提炼出四条可复用的经验POST 场景下手写 SSE 解析务必做好半行缓冲与AbortController中断用类型系统建模事件流可辨识联合 单一switch分发状态机一目了然partial-json 实现边收边画让大 JSON 工具结果也能流式呈现**先占位、后填充**处理并行的子 Agent 工具流界面稳定不抖动。掌握了这条api → composable → component的数据流你就能在这个 AI 生活 Agent 上扩展新的对话事件与工具卡片了。赞分享【免费下载链接】Life-Agent-RU-YEELife Agent RU YEE — An AI-powered life management agent that autonomously handles daily routines including meal planning, grocery shopping, schedule coordination, and household task automation via cloud-based mobile agents.项目地址https://gitcode.com/gh_mirrors/li/Life-Agent-RU-YEE点击查看免费下载相关推荐Life-Agent-RU-YEE 开发者指南从零编写第一个 Agent 插件并通过 pytest 完整验证Life Agent RU YEE 开发者指南从零编写第一个 Agent 插件并通过 pytest 完整验证 Life Agent RU YEE 是一个 AIDataEase Vue3前端架构现代化BI界面开发实践DataEase Vue3前端架构现代化BI界面开发实践 引言BI工具前端的现代化挑战 在数据可视化与商业智能Business Intelligence数据可视化数据分析后端前端NLWeb 前端多会话聊天界面架构解析SSE 流式对话、模块化组件与安全渲染实践NLWeb 前端多会话聊天界面架构解析SSE 流式对话、模块化组件与安全渲染实践 本文以仓库 static/FRONTEND_SUMMARY.md httpsAI 应用MCP 服务AI Agent后端前端上一篇Open English WordNet贡献指南如何为开源词网添砖加瓦下一篇开发者必看tiny_vit_5m_224.dist_in22k_ft_in1k模型配置文件(config.json)详解与参数调优创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考