refactor: 聊天室 Agent 重构 — ToolLoopAgent + 论坛式布局
后端: - 删除 agent-stream.ts，新建 alfred-agent.ts (ToolLoopAgent 工厂) - 新建 get-current-time.ts 工具 (zod schema) - 重构 send.ts: createAgentUIStreamResponse + onFinish 可靠持久化 前端: - 删除 MessageBubble.tsx，新建 ToolCallCard.tsx (四态) - 重构 ChatPanel.tsx: 论坛式 Card 布局 + PartRenderer 分派 - 移除 @ant-design/x 依赖，改用 antd 组件 + streamdown 依赖: + zod + streamdown - @ant-design/x - @ant-design/x-markdown 测试: 306 pass, typecheck/lint 0 errors
This commit is contained in:
@@ -25,7 +25,10 @@ src/
|
||||
ai/ AI 服务层
|
||||
types.ts AI 配置类型定义
|
||||
registry.ts AI Provider Registry 构建与连接测试
|
||||
agent-stream.ts AI Agent 流式调用
|
||||
agents/ Agent 工厂
|
||||
alfred-agent.ts Agent 工厂（ToolLoopAgent + 工具）
|
||||
tools/ 工具定义
|
||||
get-current-time.ts 获取当前时间工具
|
||||
dev.ts 开发模式启动入口
|
||||
main.ts 生产模式启动入口
|
||||
server.ts HTTP server 启动工厂（Bun.serve routes 声明式路由）
|
||||
|
||||
@@ -87,7 +87,7 @@ middleware.ts 提供 API 参数校验函数：
|
||||
|
||||
### Agent 流式调用
|
||||
|
||||
`src/server/ai/agent-stream.ts` 提供 `agentStream(options)` 函数，封装 Vercel AI SDK `streamText` 调用。接收数据库实例、消息数组和模型 DB ID，从 DB 查询模型与供应商信息后构建 Provider Registry，使用 `:` 作为 provider 和 modelId 的分隔符。默认使用 `stepCountIs(1)` 限制单步调用。返回 `StreamTextResult`，路由层通过 `result.toUIMessageStreamResponse()` 转为 SSE 响应。
|
||||
`src/server/ai/agents/alfred-agent.ts` 提供 `createAlfredAgent(model)` 工厂函数，返回 AI SDK `ToolLoopAgent` 实例。默认使用 `stepCountIs(20)` 限制最大迭代次数，配置 `getCurrentTime` 工具供 AI 调用。路由层通过 `createAgentUIStreamResponse()` 转为 SSE 响应，流结束通过 `onFinish` 回调可靠持久化 AI 回复（含完整 `parts`）。
|
||||
|
||||
### 供应商连通性测试
|
||||
|
||||
@@ -119,7 +119,7 @@ middleware.ts 提供 API 参数校验函数：
|
||||
| GET | `/api/projects/:id/conversations/:cid/messages` | 获取会话消息列表 |
|
||||
| POST | `/api/projects/:id/chat` | 发送消息并流式回复 |
|
||||
|
||||
聊天路由处理器位于 `src/server/routes/chat/`，遵循统一的 handler 模式。`send.ts` 处理发送消息：验证会话归属后保存用户消息到 DB，调用 `agentStream` 获取流式响应，返回 SSE UI 消息流，流结束后后台保存 AI 回复到 DB。
|
||||
聊天路由处理器位于 `src/server/routes/chat/`，遵循统一的 handler 模式。`send.ts` 处理发送消息：验证会话归属后只保存最后一条用户消息到 DB，通过 `createAlfredAgent` 创建 agent，调用 `createAgentUIStreamResponse` 返回 SSE UI 消息流，流结束通过 `onFinish` 回调保存 AI 回复到 DB。
|
||||
|
||||
## 类型规范
|
||||
|
||||
|
||||
@@ -6,15 +6,15 @@
|
||||
|
||||
## 技术栈
|
||||
|
||||
| 层面 | 技术 | 用途 |
|
||||
| ------ | ----------------------------------------------------- | ------------------------ |
|
||||
| 框架 | React 19 | UI 组件开发 |
|
||||
| 构建 | Vite（开发）+ Bun compile（生产） | 开发服务 HMR 与生产构建 |
|
||||
| 语言 | TypeScript | 类型安全 |
|
||||
| UI 库 | Ant Design (antd) + @ant-design/icons + @ant-design/x | UI 组件、图标与聊天 UI |
|
||||
| 数据层 | TanStack Query (React Query) + React Query Devtools | 服务端状态管理与自动刷新 |
|
||||
| AI 层 | Vercel AI SDK (`@ai-sdk/react`) | 聊天状态管理与流式通信 |
|
||||
| 路由 | React Router v7 (Declarative mode) | SPA 路由与页面导航 |
|
||||
| 层面 | 技术 | 用途 |
|
||||
| ------ | --------------------------------------------------- | ------------------------ |
|
||||
| 框架 | React 19 | UI 组件开发 |
|
||||
| 构建 | Vite（开发）+ Bun compile（生产） | 开发服务 HMR 与生产构建 |
|
||||
| 语言 | TypeScript | 类型安全 |
|
||||
| UI 库 | Ant Design (antd) + @ant-design/icons | UI 组件与图标 |
|
||||
| 数据层 | TanStack Query (React Query) + React Query Devtools | 服务端状态管理与自动刷新 |
|
||||
| AI 层 | Vercel AI SDK (`@ai-sdk/react`) | 聊天状态管理与流式通信 |
|
||||
| 路由 | React Router v7 (Declarative mode) | SPA 路由与页面导航 |
|
||||
|
||||
不引入额外状态管理库。TanStack Query 承担服务端状态，组件内状态使用 useState。
|
||||
|
||||
@@ -141,8 +141,9 @@ Workbench 项目上下文通过 `ProjectContext` 提供，在 `WorkbenchProjectG
|
||||
Workbench 聊天页面位于 `src/web/consoles/workbench/pages/ChatPage.tsx`，组合 `ChatSidebar` 和 `ChatPanel` 两个子组件。
|
||||
|
||||
- **ChatSidebar**：使用 TanStack Query 管理会话列表，提供创建和删除会话操作。
|
||||
- **ChatPanel**：使用 Vercel AI SDK `useChat` hook（来自 `@ai-sdk/react`）管理聊天状态，通过 `DefaultChatTransport`（来自 `ai` 包）与后端 SSE 端点通信。使用 `@ant-design/x` 的 `Bubble.List` 和 `Sender` 组件渲染消息列表和输入框。`useChat` 返回的 `UIMessage` 使用 `parts` 数组存储内容，不包含 `content` 属性；需从 `parts` 中提取 `type: "text"` 的文本内容用于 Bubble 展示。
|
||||
- **MessageBubble**：简单的纯文本消息气泡组件（MVP）。
|
||||
- **ChatPanel**：使用 Vercel AI SDK `useChat` hook（来自 `@ai-sdk/react`）管理聊天状态，通过 `DefaultChatTransport`（来自 `ai` 包）与后端 SSE 端点通信。采用论坛式单列垂直布局，使用 antd `Card` 组件承载每条消息，通过 `PartRenderer` 按 `part.type` 分派渲染（文本/工具调用/推理/步骤分隔）。AI 文本使用 `streamdown` 流式 Markdown 渲染，工具调用使用 `ToolCallCard` 展示参数和执行结果。输入区使用 antd `Input.TextArea` + `Button`。
|
||||
- **ToolCallCard**：工具调用状态组件，支持 input-streaming/input-available/output-available/output-error 四态。
|
||||
- **MessageBubble**：已删除，由 PartRenderer + Card 容器替代。
|
||||
- **use-conversations hook**：位于 `src/web/hooks/use-conversations.ts`，封装会话 CRUD 的 fetch 调用。
|
||||
|
||||
- 生产入口必须启用 `ErrorBoundary`，运行时渲染异常使用 antd `Result status="500"` 或等价组件展示。
|
||||
|
||||
Reference in New Issue
Block a user