feat: 工作台聊天室功能

docs/development/frontend.md

@@ -6,14 +6,15 @@
 
 ## 技术栈
 
-| 层面   | 技术                                                | 用途                     |
-| ------ | --------------------------------------------------- | ------------------------ |
-| 框架   | React 19                                            | UI 组件开发              |
-| 构建   | Vite（开发）+ Bun compile（生产）                   | 开发服务 HMR 与生产构建  |
-| 语言   | TypeScript                                          | 类型安全                 |
-| UI 库  | Ant Design (antd) + @ant-design/icons               | UI 组件与图标            |
-| 数据层 | TanStack Query (React Query) + React Query Devtools | 服务端状态管理与自动刷新 |
-| 路由   | React Router v7 (Declarative mode)                  | SPA 路由与页面导航       |
+| 层面   | 技术                                                  | 用途                     |
+| ------ | ----------------------------------------------------- | ------------------------ |
+| 框架   | 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 路由与页面导航       |
 
 不引入额外状态管理库。TanStack Query 承担服务端状态，组件内状态使用 useState。
 
@@ -123,7 +124,7 @@ token 和 CSS 变量规则：
 前端提供两个入口外壳，共享通用 Console Shell 组件：
 
 - **Admin（管理台）**：`src/web/consoles/admin/AdminConsoleLayout.tsx`，菜单配置在 `menu.tsx`，路由 `/`、`/projects`、`/models`。
-- **Workbench（工作台）**：`src/web/consoles/workbench/WorkbenchProjectGate.tsx` → `WorkbenchConsoleLayout.tsx`，菜单配置和路由构造在 `routes.ts`，路由 `/workbench/:projectId`。
+- **Workbench（工作台）**：`src/web/consoles/workbench/WorkbenchProjectGate.tsx` → `WorkbenchConsoleLayout.tsx`，菜单配置和路由构造在 `routes.ts`，路由 `/workbench/:projectId`。默认菜单为"聊天室"，使用 `ChatPage` 作为主页面。
 
 通用 Console Shell（`src/web/components/ConsoleShell/ConsoleShell.tsx`）包含 Layout、Header、Sider、Content、主题切换、版本展示和侧边栏折叠状态，由 Admin 和 Workbench 复用。Header 显示品牌名、版本号和控制台标题（Admin 显示"管理台"，Workbench 显示"工作台 · 项目名"）。
 
@@ -135,6 +136,15 @@ Workbench 项目上下文通过 `ProjectContext` 提供，在 `WorkbenchProjectG
 
 供应商表单必须支持未保存配置的连通性测试，新建供应商时 type 默认 `openai-compatible`，baseURL 不设默认值。连通性测试返回 `ok: false` 时应展示失败反馈，不得使用成功提示样式；`/models` 不支持或响应格式不兼容属于可忽略提醒，不得阻止保存。
 
+### 聊天页面
+
+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）。
+- **use-conversations hook**：位于 `src/web/hooks/use-conversations.ts`，封装会话 CRUD 的 fetch 调用。
+
 - 生产入口必须启用 `ErrorBoundary`，运行时渲染异常使用 antd `Result status="500"` 或等价组件展示。
 - `ReactQueryDevtools` 仅在 `import.meta.env.DEV` 条件下渲染，不进入生产渲染路径。
 - 主题切换统一通过 `ConfigProvider` 的 antd theme algorithm 控制，不使用硬编码主题色。