feat: 工作台聊天室功能

src/server/ai/agent-stream.ts

@@ -0,0 +1,71 @@
+import type { ModelMessage } from "ai";
+import type Database from "bun:sqlite";
+
+import { stepCountIs, streamText } from "ai";
+import { eq } from "drizzle-orm";
+
+import { wrap } from "../db/connection";
+import { models, providers } from "../db/schema";
+import { buildProviderRegistry } from "./registry";
+
+const SYSTEM_PROMPT = "你是 Alfred 的 AI 助手。你可以帮助用户回答问题、分析数据和完成各种任务。请用中文回复。";
+
+export interface AgentStreamOptions {
+  db: Database;
+  messages: IncomingMessage[];
+  modelDbId: string;
+}
+
+export interface IncomingMessage {
+  content?: string;
+  id?: string;
+  parts?: Array<{ text?: string; type: string }>;
+  role?: string;
+}
+
+export function agentStream(options: AgentStreamOptions) {
+  const db = wrap(options.db);
+
+  const modelRow = db.select().from(models).where(eq(models.id, options.modelDbId)).get();
+  if (!modelRow) throw new Error(`模型不存在: ${options.modelDbId}`);
+
+  const providerRow = db.select().from(providers).where(eq(providers.id, modelRow.providerId)).get();
+  if (!providerRow) throw new Error(`供应商不存在: ${modelRow.providerId}`);
+
+  const registry = buildProviderRegistry(options.db);
+  const model = registry.languageModel(`${providerRow.id}:${modelRow.modelId}`);
+
+  return streamText({
+    messages: toCoreMessages(options.messages),
+    model,
+    stopWhen: stepCountIs(1),
+    system: SYSTEM_PROMPT,
+  });
+}
+
+export function extractTextContent(msg: IncomingMessage): string {
+  return (
+    msg.content ??
+    (Array.isArray(msg.parts)
+      ? msg.parts
+          .filter((p) => p.type === "text" && typeof p.text === "string")
+          .map((p) => p.text!)
+          .join("")
+      : "")
+  );
+}
+
+function toCoreMessages(messages: IncomingMessage[]): ModelMessage[] {
+  return messages.map((msg) => {
+    const content =
+      msg.content ??
+      (Array.isArray(msg.parts)
+        ? msg.parts
+            .filter((p) => p.type === "text" && typeof p.text === "string")
+            .map((p) => p.text!)
+            .join("")
+        : "");
+
+    return { content, role: msg.role as ModelMessage["role"] } as ModelMessage;
+  });
+}

src/server/db/conversations.ts

@@ -0,0 +1,178 @@
+import type Database from "bun:sqlite";
+
+import { desc, eq } from "drizzle-orm";
+
+import type { Conversation, Message } from "../../shared/api";
+
+import { paginateQuery, wrap } from "./connection";
+import { conversations, messages, models } from "./schema";
+
+export function createConversation(
+  raw: Database,
+  projectId: string,
+  defaultModelId?: string,
+): { conversation: Conversation } | { error: string; status: number } {
+  const db = wrap(raw);
+
+  let modelId = defaultModelId;
+  if (!modelId) {
+    const firstModel = db.select().from(models).limit(1).get();
+    if (!firstModel) return { error: "没有可用的模型，请先配置模型", status: 400 };
+    modelId = firstModel.id;
+  } else {
+    const model = db.select().from(models).where(eq(models.id, modelId)).get();
+    if (!model) return { error: "模型不存在", status: 400 };
+  }
+
+  const id = crypto.randomUUID();
+  const now = new Date().toISOString();
+
+  db.insert(conversations)
+    .values({
+      createdAt: now,
+      id,
+      modelId,
+      projectId,
+      title: "新会话",
+      updatedAt: now,
+    })
+    .run();
+
+  const row = db.select().from(conversations).where(eq(conversations.id, id)).get();
+  return { conversation: toConversation(row!) };
+}
+
+export function createMessage(
+  raw: Database,
+  data: {
+    content: string;
+    conversationId: string;
+    parts?: string;
+    role: "assistant" | "system" | "user";
+  },
+): Message {
+  const db = wrap(raw);
+  const id = crypto.randomUUID();
+  const now = new Date().toISOString();
+
+  db.insert(messages)
+    .values({
+      content: data.content,
+      conversationId: data.conversationId,
+      createdAt: now,
+      id,
+      parts: data.parts ?? null,
+      role: data.role,
+    })
+    .run();
+
+  const row = db.select().from(messages).where(eq(messages.id, id)).get();
+  return toMessage(row!);
+}
+
+export function createMessages(
+  raw: Database,
+  data: Array<{
+    content: string;
+    conversationId: string;
+    parts?: string;
+    role: "assistant" | "system" | "user";
+  }>,
+): Message[] {
+  const db = wrap(raw);
+  const now = new Date().toISOString();
+  const results: Message[] = [];
+
+  for (const item of data) {
+    const id = crypto.randomUUID();
+    db.insert(messages)
+      .values({
+        content: item.content,
+        conversationId: item.conversationId,
+        createdAt: now,
+        id,
+        parts: item.parts ?? null,
+        role: item.role,
+      })
+      .run();
+    const row = db.select().from(messages).where(eq(messages.id, id)).get();
+    results.push(toMessage(row!));
+  }
+
+  return results;
+}
+
+export function deleteConversation(raw: Database, id: string): { error: string; status: number } | { success: true } {
+  const db = wrap(raw);
+  const existing = db.select().from(conversations).where(eq(conversations.id, id)).get();
+  if (!existing) return { error: "会话不存在", status: 404 };
+
+  db.delete(messages).where(eq(messages.conversationId, id)).run();
+  db.delete(conversations).where(eq(conversations.id, id)).run();
+  return { success: true };
+}
+
+export function getConversation(
+  raw: Database,
+  id: string,
+): { conversation: Conversation } | { error: string; status: number } {
+  const db = wrap(raw);
+  const row = db.select().from(conversations).where(eq(conversations.id, id)).get();
+  if (!row) return { error: "会话不存在", status: 404 };
+  return { conversation: toConversation(row) };
+}
+
+export function listConversations(
+  raw: Database,
+  projectId: string,
+  options: { page: number; pageSize: number },
+): { items: Conversation[]; page: number; pageSize: number; total: number } {
+  return paginateQuery(raw, conversations, {
+    conditions: [eq(conversations.projectId, projectId)],
+    mapRow: toConversation,
+    orderBy: () => desc(conversations.updatedAt),
+    page: options.page,
+    pageSize: options.pageSize,
+  });
+}
+
+export function listMessages(
+  raw: Database,
+  conversationId: string,
+  options: { page: number; pageSize: number },
+): { items: Message[]; page: number; pageSize: number; total: number } {
+  return paginateQuery(raw, messages, {
+    conditions: [eq(messages.conversationId, conversationId)],
+    mapRow: toMessage,
+    orderBy: () => desc(messages.createdAt),
+    page: options.page,
+    pageSize: options.pageSize,
+  });
+}
+
+export function updateConversationTimestamp(raw: Database, id: string): void {
+  const db = wrap(raw);
+  db.update(conversations).set({ updatedAt: new Date().toISOString() }).where(eq(conversations.id, id)).run();
+}
+
+function toConversation(row: typeof conversations.$inferSelect): Conversation {
+  return {
+    createdAt: row.createdAt,
+    id: row.id,
+    modelId: row.modelId,
+    projectId: row.projectId,
+    title: row.title,
+    updatedAt: row.updatedAt,
+  };
+}
+
+function toMessage(row: typeof messages.$inferSelect): Message {
+  return {
+    content: row.content,
+    conversationId: row.conversationId,
+    createdAt: row.createdAt,
+    id: row.id,
+    parts: row.parts,
+    role: row.role,
+  };
+}

src/server/db/index.ts

@@ -1,4 +1,14 @@
 export { createDatabase } from "./connection";
+export {
+  createConversation,
+  createMessage,
+  createMessages,
+  deleteConversation,
+  getConversation,
+  listConversations,
+  listMessages,
+  updateConversationTimestamp,
+} from "./conversations";
 export { loadMigrationsFromDir, type MigrationRecord } from "./load-migrations";
 export { runMigrations } from "./migrate";
-export { projects, schemaMigrations } from "./schema";
+export { conversations, messages, projects, schemaMigrations } from "./schema";

src/server/db/schema.ts

@@ -45,6 +45,38 @@ export const models = sqliteTable(
   ],
 );
 
+export const conversations = sqliteTable(
+  "conversations",
+  {
+    createdAt: text("created_at").notNull(),
+    id: text("id").primaryKey(),
+    modelId: text("model_id")
+      .notNull()
+      .references(() => models.id),
+    projectId: text("project_id")
+      .notNull()
+      .references(() => projects.id),
+    title: text("title").notNull().default("新会话"),
+    updatedAt: text("updated_at").notNull(),
+  },
+  (table) => [index("conversations_project_id_idx").on(table.projectId)],
+);
+
+export const messages = sqliteTable(
+  "messages",
+  {
+    content: text("content").notNull().default(""),
+    conversationId: text("conversation_id")
+      .notNull()
+      .references(() => conversations.id, { onDelete: "cascade" }),
+    createdAt: text("created_at").notNull(),
+    id: text("id").primaryKey(),
+    parts: text("parts"),
+    role: text("role", { enum: ["assistant", "system", "user"] }).notNull(),
+  },
+  (table) => [index("messages_conversation_id_idx").on(table.conversationId)],
+);
+
 export const schemaMigrations = sqliteTable("schema_migrations", {
   appliedAt: text("applied_at").notNull(),
   checksum: text("checksum").notNull(),

src/server/routes/chat/create.ts

@@ -0,0 +1,29 @@
+import type Database from "bun:sqlite";
+
+import type { CreateConversationRequest, RuntimeMode } from "../../../shared/api";
+
+import { createConversation } from "../../db/conversations";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export async function handleCreateConversation(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  const url = new URL(req.url);
+  const projectId = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(projectId ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  let body: CreateConversationRequest = {};
+  try {
+    body = (await req.json()) as CreateConversationRequest;
+  } catch {
+    // empty body is ok, defaults will be used
+  }
+
+  const result = createConversation(db, validated.id, body.modelId);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse({ conversation: result.conversation }, { mode, status: 201 });
+}

src/server/routes/chat/delete.ts

@@ -0,0 +1,35 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { deleteConversation, getConversation } from "../../db/conversations";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleDeleteConversation(req: Request, db: Database, mode: RuntimeMode): Response {
+  const parts = new URL(req.url).pathname.split("/");
+  const projectId = parts[3];
+  const conversationId = parts[5];
+
+  const validatedProject = validateIdParam(projectId ?? "", mode);
+  if (validatedProject instanceof Response) return validatedProject;
+
+  const validatedConv = validateIdParam(conversationId ?? "", mode);
+  if (validatedConv instanceof Response) return validatedConv;
+
+  const convResult = getConversation(db, validatedConv.id);
+  if ("error" in convResult) {
+    return jsonResponse(createApiError(convResult.error, convResult.status), { mode, status: convResult.status });
+  }
+
+  if (convResult.conversation.projectId !== validatedProject.id) {
+    return jsonResponse(createApiError("会话不属于该项目", 403), { mode, status: 403 });
+  }
+
+  const result = deleteConversation(db, validatedConv.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  return jsonResponse({ success: true }, { mode });
+}

src/server/routes/chat/get.ts

@@ -0,0 +1,30 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { getConversation } from "../../db/conversations";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export function handleGetConversation(req: Request, db: Database, mode: RuntimeMode): Response {
+  const parts = new URL(req.url).pathname.split("/");
+  const projectId = parts[3];
+  const conversationId = parts[5];
+
+  const validatedProject = validateIdParam(projectId ?? "", mode);
+  if (validatedProject instanceof Response) return validatedProject;
+
+  const validatedConv = validateIdParam(conversationId ?? "", mode);
+  if (validatedConv instanceof Response) return validatedConv;
+
+  const result = getConversation(db, validatedConv.id);
+  if ("error" in result) {
+    return jsonResponse(createApiError(result.error, result.status), { mode, status: result.status });
+  }
+
+  if (result.conversation.projectId !== validatedProject.id) {
+    return jsonResponse(createApiError("会话不属于该项目", 403), { mode, status: 403 });
+  }
+
+  return jsonResponse({ conversation: result.conversation }, { mode });
+}

src/server/routes/chat/list.ts

@@ -0,0 +1,28 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { listConversations } from "../../db/conversations";
+import { jsonResponse } from "../../helpers";
+import { validateIdParam, validatePagination } from "../../middleware";
+
+export function handleListConversations(req: Request, db: Database, mode: RuntimeMode): Response {
+  const url = new URL(req.url);
+  const projectId = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(projectId ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  const pageParam = url.searchParams.get("page");
+  const pageSizeParam = url.searchParams.get("pageSize");
+
+  const pagination = validatePagination(pageParam, pageSizeParam, mode);
+  if (pagination instanceof Response) return pagination;
+
+  const result = listConversations(db, validated.id, {
+    page: pagination.page,
+    pageSize: pagination.pageSize,
+  });
+
+  return jsonResponse(result, { mode });
+}

src/server/routes/chat/messages.ts

@@ -0,0 +1,42 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+
+import { getConversation, listMessages } from "../../db/conversations";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam, validatePagination } from "../../middleware";
+
+export function handleListMessages(req: Request, db: Database, mode: RuntimeMode): Response {
+  const parts = new URL(req.url).pathname.split("/");
+  const projectId = parts[3];
+  const conversationId = parts[5];
+
+  const validatedProject = validateIdParam(projectId ?? "", mode);
+  if (validatedProject instanceof Response) return validatedProject;
+
+  const validatedConv = validateIdParam(conversationId ?? "", mode);
+  if (validatedConv instanceof Response) return validatedConv;
+
+  const convResult = getConversation(db, validatedConv.id);
+  if ("error" in convResult) {
+    return jsonResponse(createApiError(convResult.error, convResult.status), { mode, status: convResult.status });
+  }
+
+  if (convResult.conversation.projectId !== validatedProject.id) {
+    return jsonResponse(createApiError("会话不属于该项目", 403), { mode, status: 403 });
+  }
+
+  const url = new URL(req.url);
+  const pageParam = url.searchParams.get("page");
+  const pageSizeParam = url.searchParams.get("pageSize");
+
+  const pagination = validatePagination(pageParam, pageSizeParam, mode);
+  if (pagination instanceof Response) return pagination;
+
+  const result = listMessages(db, validatedConv.id, {
+    page: pagination.page,
+    pageSize: pagination.pageSize,
+  });
+
+  return jsonResponse(result, { mode });
+}

src/server/routes/chat/send.ts

@@ -0,0 +1,91 @@
+import type Database from "bun:sqlite";
+
+import type { RuntimeMode } from "../../../shared/api";
+import type { IncomingMessage } from "../../ai/agent-stream";
+
+import { agentStream, extractTextContent } from "../../ai/agent-stream";
+import { createMessage, getConversation, updateConversationTimestamp } from "../../db/conversations";
+import { createApiError, jsonResponse } from "../../helpers";
+import { validateIdParam } from "../../middleware";
+
+export async function handleSendChat(req: Request, db: Database, mode: RuntimeMode): Promise<Response> {
+  const url = new URL(req.url);
+  const projectId = url.pathname.split("/")[3];
+
+  const validated = validateIdParam(projectId ?? "", mode);
+  if (validated instanceof Response) return validated;
+
+  let body: { conversationId?: string; messages?: IncomingMessage[] };
+  try {
+    body = (await req.json()) as typeof body;
+  } catch {
+    return jsonResponse(createApiError("Invalid JSON body", 400), { mode, status: 400 });
+  }
+
+  if (!body.conversationId || typeof body.conversationId !== "string") {
+    return jsonResponse(createApiError("conversationId is required", 400), { mode, status: 400 });
+  }
+
+  if (!Array.isArray(body.messages) || body.messages.length === 0) {
+    return jsonResponse(createApiError("messages is required and must be a non-empty array", 400), {
+      mode,
+      status: 400,
+    });
+  }
+
+  const conversationResult = getConversation(db, body.conversationId);
+  if ("error" in conversationResult) {
+    return jsonResponse(createApiError(conversationResult.error, conversationResult.status), {
+      mode,
+      status: conversationResult.status,
+    });
+  }
+
+  const conversation = conversationResult.conversation;
+  if (conversation.projectId !== validated.id) {
+    return jsonResponse(createApiError("会话不属于该项目", 403), { mode, status: 403 });
+  }
+
+  for (const msg of body.messages ?? []) {
+    createMessage(db, {
+      content: extractTextContent(msg),
+      conversationId: conversation.id,
+      role: (msg.role ?? "user") as "assistant" | "system" | "user",
+    });
+  }
+
+  updateConversationTimestamp(db, conversation.id);
+
+  try {
+    const result = agentStream({
+      db,
+      messages: body.messages,
+      modelDbId: conversation.modelId,
+    });
+
+    const stream = result.toUIMessageStreamResponse();
+
+    const saveReply = async () => {
+      try {
+        const fullContent = await result.text;
+        if (fullContent) {
+          createMessage(db, {
+            content: fullContent,
+            conversationId: conversation.id,
+            role: "assistant",
+          });
+          updateConversationTimestamp(db, conversation.id);
+        }
+      } catch {
+        // stream ended without content, nothing to persist
+      }
+    };
+
+    void saveReply();
+
+    return stream;
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    return jsonResponse(createApiError(`AI 调用失败：${msg}`, 500), { mode, status: 500 });
+  }
+}

src/server/server.ts

@@ -156,6 +156,62 @@ export function startServer(options: StartServerOptions) {
           logger,
         ),
       },
+      "/api/projects/:id/chat": {
+        POST: withErrorHandler(
+          async (req) => {
+            const { handleSendChat } = await import("./routes/chat/send");
+            return handleSendChat(req, db, mode);
+          },
+          mode,
+          logger,
+        ),
+      },
+      "/api/projects/:id/conversations": {
+        GET: withErrorHandler(
+          async (req) => {
+            const { handleListConversations } = await import("./routes/chat/list");
+            return handleListConversations(req, db, mode);
+          },
+          mode,
+          logger,
+        ),
+        POST: withErrorHandler(
+          async (req) => {
+            const { handleCreateConversation } = await import("./routes/chat/create");
+            return handleCreateConversation(req, db, mode);
+          },
+          mode,
+          logger,
+        ),
+      },
+      "/api/projects/:id/conversations/:cid": {
+        DELETE: withErrorHandler(
+          async (req) => {
+            const { handleDeleteConversation } = await import("./routes/chat/delete");
+            return handleDeleteConversation(req, db, mode);
+          },
+          mode,
+          logger,
+        ),
+        GET: withErrorHandler(
+          async (req) => {
+            const { handleGetConversation } = await import("./routes/chat/get");
+            return handleGetConversation(req, db, mode);
+          },
+          mode,
+          logger,
+        ),
+      },
+      "/api/projects/:id/conversations/:cid/messages": {
+        GET: withErrorHandler(
+          async (req) => {
+            const { handleListMessages } = await import("./routes/chat/messages");
+            return handleListMessages(req, db, mode);
+          },
+          mode,
+          logger,
+        ),
+      },
       "/api/projects/:id/restore": {
         POST: withErrorHandler(
           async (req) => {

src/shared/api.ts

@@ -3,6 +3,31 @@ export interface ApiErrorResponse {
   status: number;
 }
 
+export interface Conversation {
+  createdAt: string;
+  id: string;
+  modelId: string;
+  projectId: string;
+  title: string;
+  updatedAt: string;
+}
+
+export interface ConversationListResponse {
+  items: Conversation[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface ConversationResponse {
+  conversation: Conversation;
+}
+
+export interface CreateConversationRequest {
+  modelId?: string;
+  title?: string;
+}
+
 export interface CreateModelRequest {
   capabilities: ModelCapability[];
   contextLength?: null | number;
@@ -29,6 +54,22 @@ export interface CreateProviderRequest {
   type: ProviderType;
 }
 
+export interface Message {
+  content: string;
+  conversationId: string;
+  createdAt: string;
+  id: string;
+  parts: null | string;
+  role: "assistant" | "system" | "user";
+}
+
+export interface MessageListResponse {
+  items: Message[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
 export interface MetaResponse {
   ok: true;
   service: string;
@@ -58,6 +99,11 @@ export type ModelCapability =
   | "video-generation"
   | "video-recognition";
 
+export interface SendMessageRequest {
+  conversationId: string;
+  messages: Array<{ content: string; role: "assistant" | "system" | "user" }>;
+}
+
 export const MODEL_CAPABILITIES: readonly ModelCapability[] = [
   "audio-generation",
   "audio-recognition",

src/web/consoles/workbench/components/chat/ChatPanel.tsx

@@ -0,0 +1,132 @@
+import type { BubbleItemType } from "@ant-design/x";
+
+import { useChat } from "@ai-sdk/react";
+import { Bubble, Sender } from "@ant-design/x";
+import { DefaultChatTransport } from "ai";
+import { App, Empty, Spin } from "antd";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { fetchMessages } from "../../../../hooks/use-conversations";
+import { MessageBubble } from "./MessageBubble";
+
+interface ChatPanelProps {
+  conversationId: null | string;
+  onConversationCreated: (id: string) => void;
+  projectId: string;
+}
+
+export function ChatPanel({ conversationId, projectId }: ChatPanelProps) {
+  const { message } = App.useApp();
+  const [input, setInput] = useState("");
+  const [loadingHistory, setLoadingHistory] = useState(false);
+  const fetchRef = useRef(fetchMessages);
+
+  const conversationIdRef = useRef(conversationId);
+  useEffect(() => {
+    conversationIdRef.current = conversationId;
+  });
+
+  const { messages, sendMessage, setMessages, status } = useChat({
+    onError: (err) => {
+      void message.error(`发送失败：${err.message}`);
+    },
+    transport: new DefaultChatTransport({
+      api: `/api/projects/${projectId}/chat`,
+    }),
+  });
+
+  const isLoading = status === "submitted" || status === "streaming";
+
+  useEffect(() => {
+    if (!conversationId) {
+      setMessages([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const load = async () => {
+      setLoadingHistory(true);
+      setMessages([]);
+      try {
+        const data = await fetchRef.current(projectId, conversationId);
+        if (cancelled) return;
+        const history = data.items
+          .filter((m: { role: string }) => m.role === "user" || m.role === "assistant")
+          .reverse()
+          .map((m: { content: string; id: string; role: string }) => ({
+            id: m.id,
+            parts: [{ text: m.content, type: "text" as const }],
+            role: m.role as "assistant" | "user",
+          }));
+        setMessages(history);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          const msg = err instanceof Error ? err.message : String(err);
+          void message.error(`加载历史失败：${msg}`);
+        }
+      } finally {
+        if (!cancelled) setLoadingHistory(false);
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [conversationId, projectId, setMessages, message]);
+
+  const bubbleItems: BubbleItemType[] = messages.map((msg) => ({
+    content: msg.parts
+      .filter((p): p is { text: string; type: "text" } => p.type === "text")
+      .map((p) => p.text)
+      .join(""),
+    key: msg.id,
+    role: msg.role === "user" ? "user" : "ai",
+  }));
+
+  const onSubmit = useCallback(
+    (nextInput: string) => {
+      if (!nextInput.trim()) return;
+      setInput("");
+      void sendMessage({ text: nextInput }, { body: { conversationId: conversationIdRef.current } });
+    },
+    [sendMessage],
+  );
+
+  if (!conversationId) {
+    return (
+      <div className="app-chat-panel app-chat-panel-empty">
+        <Empty description="选择或创建一个会话开始聊天" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-chat-panel">
+      {loadingHistory ? (
+        <div className="app-chat-panel-loading">
+          <Spin />
+        </div>
+      ) : (
+        <Bubble.List
+          items={bubbleItems}
+          role={{
+            ai: {
+              contentRender: (content: string) => <MessageBubble content={content} />,
+              placement: "start",
+            },
+            user: {
+              placement: "end",
+            },
+          }}
+          style={{ flex: 1, overflow: "auto", padding: "16px" }}
+        />
+      )}
+      <div className="app-chat-panel-sender">
+        <Sender loading={isLoading} onChange={setInput} onSubmit={onSubmit} placeholder="输入消息..." value={input} />
+      </div>
+    </div>
+  );
+}

src/web/consoles/workbench/components/chat/ChatSidebar.tsx

@@ -0,0 +1,97 @@
+import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { App, Button, Flex, Popconfirm, Spin, Typography } from "antd";
+
+import type { Conversation } from "../../../../../shared/api";
+
+import { createConversation, deleteConversation, fetchConversations } from "../../../../hooks/use-conversations";
+
+interface ChatSidebarProps {
+  activeId: null | string;
+  onSelect: (id: null | string) => void;
+  projectId: string;
+}
+
+export function ChatSidebar({ activeId, onSelect, projectId }: ChatSidebarProps) {
+  const queryClient = useQueryClient();
+  const { message } = App.useApp();
+
+  const CONVERSATIONS_KEY = ["conversations", projectId] as const;
+
+  const { data, isLoading } = useQuery({
+    queryFn: () => fetchConversations(projectId),
+    queryKey: CONVERSATIONS_KEY,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () => createConversation(projectId),
+    onError: (err: Error) => {
+      void message.error(`创建会话失败：${err.message}`);
+    },
+    onSuccess: (conversation: Conversation) => {
+      void queryClient.invalidateQueries({ queryKey: CONVERSATIONS_KEY });
+      onSelect(conversation.id);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteConversation(projectId, id),
+    onError: (err: Error) => {
+      void message.error(`删除会话失败：${err.message}`);
+    },
+    onSuccess: (_data: void, id: string) => {
+      void queryClient.invalidateQueries({ queryKey: CONVERSATIONS_KEY });
+      if (activeId === id) onSelect(null);
+    },
+  });
+
+  const conversations = data?.items ?? [];
+
+  return (
+    <div className="app-chat-sidebar">
+      <div className="app-chat-sidebar-header">
+        <Button
+          block
+          icon={<PlusOutlined />}
+          loading={createMutation.isPending}
+          onClick={() => createMutation.mutate()}
+          type="primary"
+        >
+          新会话
+        </Button>
+      </div>
+      <div className="app-chat-sidebar-list">
+        {isLoading ? (
+          <div className="app-chat-sidebar-loading">
+            <Spin />
+          </div>
+        ) : (
+          conversations.map((item: Conversation) => (
+            <Flex
+              align="center"
+              className={`app-chat-sidebar-item ${activeId === item.id ? "app-chat-sidebar-item-active" : ""}`}
+              gap="small"
+              justify="space-between"
+              key={item.id}
+              onClick={() => onSelect(item.id)}
+            >
+              <Typography.Text className="app-chat-sidebar-item-title" ellipsis>
+                {item.title}
+              </Typography.Text>
+              <Popconfirm onConfirm={() => deleteMutation.mutate(item.id)} title="确定删除此会话？">
+                <Button
+                  className="app-chat-sidebar-item-action"
+                  danger
+                  icon={<DeleteOutlined />}
+                  onClick={(e) => e.stopPropagation()}
+                  size="small"
+                  type="text"
+                />
+              </Popconfirm>
+            </Flex>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/web/consoles/workbench/components/chat/MessageBubble.tsx

@@ -0,0 +1,7 @@
+interface MessageBubbleProps {
+  content: string;
+}
+
+export function MessageBubble({ content }: MessageBubbleProps) {
+  return <div className="app-chat-message-bubble">{content}</div>;
+}

src/web/consoles/workbench/pages/ChatPage.tsx

@@ -0,0 +1,22 @@
+import { Flex } from "antd";
+import { useState } from "react";
+
+import { ChatPanel } from "../components/chat/ChatPanel";
+import { ChatSidebar } from "../components/chat/ChatSidebar";
+import { useCurrentProject } from "../useCurrentProject";
+
+export function ChatPage() {
+  const project = useCurrentProject();
+  const [activeConversationId, setActiveConversationId] = useState<null | string>(null);
+
+  return (
+    <Flex className="app-chat-page" gap={0} vertical={false}>
+      <ChatSidebar activeId={activeConversationId} onSelect={setActiveConversationId} projectId={project.id} />
+      <ChatPanel
+        conversationId={activeConversationId}
+        onConversationCreated={setActiveConversationId}
+        projectId={project.id}
+      />
+    </Flex>
+  );
+}

src/web/consoles/workbench/routes.ts

@@ -1,10 +1,10 @@
-import { DashboardOutlined } from "@ant-design/icons";
+import { MessageOutlined } from "@ant-design/icons";
 import { createElement } from "react";
 
 import type { MenuItemConfig } from "../../menu";
 
 export const WORKBENCH_MENU_ITEMS: readonly MenuItemConfig[] = [
-  { icon: createElement(DashboardOutlined), label: "总览", path: "", value: "overview" },
+  { icon: createElement(MessageOutlined), label: "聊天室", path: "", value: "chat" },
 ] as const;
 
 export function buildWorkbenchPath(projectId: string, relativePath = ""): string {

src/web/hooks/use-conversations.ts

@@ -0,0 +1,45 @@
+import type {
+  Conversation,
+  ConversationListResponse,
+  ConversationResponse,
+  MessageListResponse,
+} from "../../shared/api";
+
+import { handleResponse, handleVoidResponse } from "../utils/api";
+
+export async function createConversation(projectId: string, modelId?: string): Promise<Conversation> {
+  const response = await fetch(`/api/projects/${projectId}/conversations`, {
+    body: JSON.stringify({ modelId }),
+    headers: { "Content-Type": "application/json" },
+    method: "POST",
+  });
+  return handleResponse(response, (data) => (data as ConversationResponse).conversation);
+}
+
+export async function deleteConversation(projectId: string, conversationId: string): Promise<void> {
+  const response = await fetch(`/api/projects/${projectId}/conversations/${conversationId}`, { method: "DELETE" });
+  return handleVoidResponse(response);
+}
+
+export async function fetchConversation(projectId: string, conversationId: string): Promise<Conversation> {
+  const response = await fetch(`/api/projects/${projectId}/conversations/${conversationId}`);
+  return handleResponse(response, (data) => (data as ConversationResponse).conversation);
+}
+
+export async function fetchConversations(projectId: string): Promise<ConversationListResponse> {
+  const response = await fetch(`/api/projects/${projectId}/conversations?pageSize=100`);
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  return response.json() as Promise<ConversationListResponse>;
+}
+
+export async function fetchMessages(projectId: string, conversationId: string): Promise<MessageListResponse> {
+  const response = await fetch(`/api/projects/${projectId}/conversations/${conversationId}/messages?pageSize=200`);
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as null | { error?: string };
+    throw new Error(body?.error ?? `HTTP ${response.status}`);
+  }
+  return response.json() as Promise<MessageListResponse>;
+}

src/web/pages/workbench/index.tsx

@@ -1,22 +0,0 @@
-import { Card, Descriptions, Space, Typography } from "antd";
-
-import { useCurrentProject } from "../../consoles/workbench/useCurrentProject";
-
-export function WorkbenchOverviewPage() {
-  const project = useCurrentProject();
-
-  const items = [
-    { children: project.name, key: "name", label: "项目名称" },
-    { children: project.description || "暂无描述", key: "description", label: "项目描述" },
-    { children: project.status === "active" ? "进行中" : "已归档", key: "status", label: "状态" },
-  ];
-
-  return (
-    <Space size="large" vertical>
-      <Typography.Title level={2}>总览</Typography.Title>
-      <Card>
-        <Descriptions column={1} items={items} title={project.name} />
-      </Card>
-    </Space>
-  );
-}

src/web/routes.tsx

@@ -1,12 +1,12 @@
 import { Route, Routes } from "react-router";
 
 import { AdminConsoleLayout } from "./consoles/admin/AdminConsoleLayout";
+import { ChatPage } from "./consoles/workbench/pages/ChatPage";
 import { WorkbenchProjectGate } from "./consoles/workbench/WorkbenchProjectGate";
 import { NotFoundPage } from "./pages/404";
 import { DashboardPage } from "./pages/dashboard";
 import { ModelsPage } from "./pages/models";
 import { ProjectsPage } from "./pages/projects";
-import { WorkbenchOverviewPage } from "./pages/workbench";
 
 export function AppRoutes() {
   return (
@@ -17,7 +17,8 @@ export function AppRoutes() {
         <Route element={<ModelsPage />} path="/models" />
       </Route>
       <Route element={<WorkbenchProjectGate />} path="/workbench/:projectId">
-        <Route element={<WorkbenchOverviewPage />} path="" />
+        <Route element={<ChatPage />} path="" />
+        <Route element={<ChatPage />} path="chat" />
       </Route>
       <Route element={<NotFoundPage />} path="*" />
     </Routes>

src/web/styles.css

@@ -53,6 +53,10 @@ body {
   padding: var(--ant-padding-xl) var(--ant-padding-xl);
 }
 
+.app-chat-page {
+  height: 100%;
+}
+
 .app-console-title {
   color: var(--ant-color-text-secondary);
   font-size: var(--ant-font-size);
@@ -72,3 +76,87 @@ body {
   justify-content: center;
   min-height: 60vh;
 }
+
+.app-chat-sidebar {
+  display: flex;
+  width: 260px;
+  flex-direction: column;
+  border-right: 1px solid var(--ant-color-border-secondary);
+  background: var(--ant-color-bg-container);
+}
+
+.app-chat-sidebar-header {
+  padding: var(--ant-padding-sm);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.app-chat-sidebar-list {
+  flex: 1;
+  overflow: auto;
+}
+
+.app-chat-sidebar-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ant-padding-xl);
+}
+
+.app-chat-sidebar-item {
+  cursor: pointer;
+  padding: var(--ant-padding-xs) var(--ant-padding-sm);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.app-chat-sidebar-item:hover {
+  background: var(--ant-color-bg-text-hover);
+}
+
+.app-chat-sidebar-item-active {
+  background: var(--ant-color-bg-text-hover);
+}
+
+.app-chat-sidebar-item-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.app-chat-sidebar-item-action {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.app-chat-sidebar-item:hover .app-chat-sidebar-item-action,
+.app-chat-sidebar-item-active .app-chat-sidebar-item-action {
+  opacity: 1;
+}
+
+.app-chat-panel {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.app-chat-panel-empty {
+  align-items: center;
+  justify-content: center;
+}
+
+.app-chat-panel-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.app-chat-panel-sender {
+  padding: var(--ant-padding-sm) var(--ant-padding);
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+.app-chat-message-bubble {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.6;
+}