feat: 用自定义侧边栏替换聊天室 Conversations 组件，提取公共 SidebarGroup 和 date-group

tests/web/components/ChatPage.test.tsx

@@ -0,0 +1,177 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Model, Project } from "../../../src/shared/api";
+
+import { ChatPage } from "../../../src/web/features/chat/ChatPage";
+import { ProjectContext } from "../../../src/web/shared/hooks/use-current-project";
+import { installFetchMock, jsonResponse, renderWithProviders } from "../test-utils";
+
+const PROJECT_ID = "proj-1";
+
+const MOCK_PROJECT: Project = {
+  archivedAt: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+  description: "",
+  id: PROJECT_ID,
+  name: "测试项目",
+  status: "active",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+};
+
+const TEXT_MODEL: Model = {
+  capabilities: ["text"],
+  contextLength: null,
+  createdAt: "2024-01-01T00:00:00.000Z",
+  id: "model-1",
+  maxOutputTokens: null,
+  modelId: "gpt-4o",
+  name: "GPT-4o",
+  providerId: "pv1",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+const CONVERSATION = {
+  createdAt: "2026-06-03T00:00:00.000Z",
+  id: "conv-1",
+  modelId: "model-1",
+  projectId: PROJECT_ID,
+  title: "测试对话",
+  updatedAt: "2026-06-03T00:00:00.000Z",
+};
+
+function renderChatPage() {
+  return renderWithProviders(
+    createElement(ProjectContext.Provider, {
+      children: createElement(ChatPage),
+      value: MOCK_PROJECT,
+    }),
+  );
+}
+
+function setupFetchMock() {
+  return installFetchMock((call) => {
+    if (call.url.includes("/models")) {
+      return jsonResponse({ items: [TEXT_MODEL], total: 1 });
+    }
+    if (call.url.includes("/conversations") && call.method === "GET") {
+      return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+    }
+    if (call.url.endsWith("/conversations") && call.method === "POST") {
+      return jsonResponse({ conversation: { ...CONVERSATION, id: "conv-new", title: "新会话" } }, { status: 201 });
+    }
+    if (call.method === "DELETE" && call.url.includes("/conversations/")) {
+      return new Response(null, { status: 204 });
+    }
+    if (call.url.includes("/messages")) {
+      return jsonResponse({ items: [], total: 0 });
+    }
+    if (/\/conversations\/conv-1$/.exec(call.url)) {
+      return jsonResponse({ conversation: CONVERSATION });
+    }
+    return jsonResponse({ error: "not found" }, { status: 404 });
+  });
+}
+
+void vi.mock("@ai-sdk/react", () => ({
+  useChat: () => ({
+    messages: [],
+    regenerate: () => undefined,
+    sendMessage: () => undefined,
+    setMessages: (msgs: unknown) => msgs,
+    status: "ready",
+    stop: () => undefined,
+  }),
+}));
+
+void vi.mock("ai", () => ({
+  DefaultChatTransport: function () {
+    return undefined;
+  },
+}));
+
+describe("ChatPage", () => {
+  test("渲染对话侧边栏和欢迎页", async () => {
+    setupFetchMock();
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+
+    expect(screen.getByText("你好，我是阿福")).not.toBeNull();
+  });
+
+  test("点击新对话按钮创建并选中对话", async () => {
+    const calls = setupFetchMock();
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("新对话")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("新对话"));
+
+    await waitFor(() => {
+      const createCall = calls.find((c) => c.url.endsWith("/conversations") && c.method === "POST");
+      expect(createCall).toBeTruthy();
+    });
+  });
+
+  test("点击对话切换选中", async () => {
+    setupFetchMock();
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("测试对话"));
+
+    await waitFor(() => {
+      expect(screen.queryByText("你好，我是阿福")).toBeNull();
+    });
+  });
+
+  test("删除对话后列表更新", async () => {
+    let deleted = false;
+    installFetchMock((call) => {
+      if (call.method === "DELETE" && call.url.includes("/conversations/conv-1")) {
+        deleted = true;
+        return new Response(null, { status: 204 });
+      }
+      if (call.url.includes("/models")) {
+        return jsonResponse({ items: [TEXT_MODEL], total: 1 });
+      }
+      if (call.url.includes("/conversations") && call.method === "GET") {
+        if (deleted) {
+          return jsonResponse({ items: [], page: 1, pageSize: 200, total: 0 });
+        }
+        return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+      }
+      if (call.url.includes("/messages")) {
+        return jsonResponse({ items: [], total: 0 });
+      }
+      return jsonResponse({ error: "not found" }, { status: 404 });
+    });
+
+    renderChatPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByLabelText("删除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("确认删除该对话？")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("删 除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("暂无对话")).not.toBeNull();
+    });
+  });
+});

tests/web/components/ConversationCard.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Conversation } from "../../../src/shared/api";
+
+import { ConversationCard } from "../../../src/web/features/chat/components/ConversationCard";
+import { renderWithProviders } from "../test-utils";
+
+const MOCK_CONVERSATION: Conversation = {
+  createdAt: "2026-06-03T00:00:00.000Z",
+  id: "conv-1",
+  modelId: "model-1",
+  projectId: "proj-1",
+  title: "测试对话",
+  updatedAt: "2026-06-03T00:00:00.000Z",
+};
+
+describe("ConversationCard", () => {
+  test("渲染对话标题", () => {
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    expect(screen.getByText("测试对话")).not.toBeNull();
+  });
+
+  test("点击卡片触发 onSelect", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect,
+        selected: false,
+      }),
+    );
+    const item = screen.getByText("测试对话").closest(".app-sidebar-list-item")!;
+    fireEvent.click(item);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("点击删除按钮弹出确认框，确认后触发 onDelete", async () => {
+    const onDelete = vi.fn();
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete,
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    fireEvent.click(screen.getByLabelText("删除"));
+
+    await waitFor(() => {
+      expect(screen.getByText("确认删除该对话？")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("删 除"));
+
+    await waitFor(() => {
+      expect(onDelete).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test("选中时包含 app-sidebar-list-item--selected 类名", () => {
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: true,
+      }),
+    );
+    const item = screen.getByText("测试对话").closest(".app-sidebar-list-item--selected");
+    expect(item).not.toBeNull();
+  });
+
+  test("未选中时不包含 app-sidebar-list-item--selected 类名", () => {
+    renderWithProviders(
+      createElement(ConversationCard, {
+        conversation: MOCK_CONVERSATION,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selected: false,
+      }),
+    );
+    const item = screen.getByText("测试对话").closest(".app-sidebar-list-item--selected");
+    expect(item).toBeNull();
+  });
+});

tests/web/components/ConversationList.test.tsx

@@ -0,0 +1,160 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import type { Conversation } from "../../../src/shared/api";
+
+import { ConversationList } from "../../../src/web/features/chat/components/ConversationList";
+import { renderWithProviders } from "../test-utils";
+
+const CONVERSATIONS: Conversation[] = [
+  {
+    createdAt: "2026-06-03T00:00:00.000Z",
+    id: "conv-1",
+    modelId: "model-1",
+    projectId: "proj-1",
+    title: "今天对话",
+    updatedAt: "2026-06-03T00:00:00.000Z",
+  },
+  {
+    createdAt: "2026-06-02T00:00:00.000Z",
+    id: "conv-2",
+    modelId: "model-1",
+    projectId: "proj-1",
+    title: "昨天对话",
+    updatedAt: "2026-06-02T00:00:00.000Z",
+  },
+  {
+    createdAt: "2026-05-01T00:00:00.000Z",
+    id: "conv-3",
+    modelId: "model-1",
+    projectId: "proj-1",
+    title: "更早对话",
+    updatedAt: "2026-05-01T00:00:00.000Z",
+  },
+];
+
+describe("ConversationList", () => {
+  test("列表为空时显示暂无对话", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: [],
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(screen.getByText("暂无对话")).not.toBeNull();
+  });
+
+  test("渲染对话列表并按日期分组", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(screen.getByText("今天对话")).not.toBeNull();
+    expect(screen.getByText("昨天对话")).not.toBeNull();
+    expect(screen.getByText("更早对话")).not.toBeNull();
+  });
+
+  test("加载中显示 Skeleton", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: [],
+        loading: true,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    expect(document.querySelector(".ant-skeleton")).not.toBeNull();
+  });
+
+  test("点击新对话按钮触发 onAddClick", () => {
+    const onAddClick = vi.fn();
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: [],
+        loading: false,
+        onAddClick,
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    screen.getByText("新对话").click();
+    expect(onAddClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("点击搜索按钮过滤对话标题", async () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    const searchInput = screen.getByPlaceholderText("搜索对话");
+    fireEvent.change(searchInput, { target: { value: "今天" } });
+    expect(screen.getByText("昨天对话")).not.toBeNull();
+
+    fireEvent.keyDown(searchInput, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("今天对话")).not.toBeNull();
+      expect(screen.queryByText("昨天对话")).toBeNull();
+      expect(screen.queryByText("更早对话")).toBeNull();
+    });
+  });
+
+  test("输入文字未点击搜索时不触发过滤", () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    const searchInput = screen.getByPlaceholderText("搜索对话");
+    fireEvent.change(searchInput, { target: { value: "今天" } });
+
+    expect(screen.getByText("今天对话")).not.toBeNull();
+    expect(screen.getByText("昨天对话")).not.toBeNull();
+    expect(screen.getByText("更早对话")).not.toBeNull();
+  });
+
+  test("搜索无匹配结果时显示无匹配对话", async () => {
+    renderWithProviders(
+      createElement(ConversationList, {
+        conversations: CONVERSATIONS,
+        loading: false,
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        selectedId: null,
+      }),
+    );
+    const searchInput = screen.getByPlaceholderText("搜索对话");
+    fireEvent.change(searchInput, { target: { value: "不存在的对话" } });
+    fireEvent.keyDown(searchInput, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("无匹配对话")).not.toBeNull();
+    });
+  });
+});

tests/web/components/ConversationSidebar.test.tsx

@@ -0,0 +1,104 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, test, vi } from "bun:test";
+import { createElement } from "react";
+
+import { ConversationSidebar } from "../../../src/web/features/chat/components/ConversationSidebar";
+import { installFetchMock, jsonResponse, renderWithProviders } from "../test-utils";
+
+const PROJECT_ID = "proj-1";
+
+const CONVERSATION = {
+  createdAt: "2026-06-03T00:00:00.000Z",
+  id: "conv-1",
+  modelId: "model-1",
+  projectId: PROJECT_ID,
+  title: "测试对话",
+  updatedAt: "2026-06-03T00:00:00.000Z",
+};
+
+function setupSuccessMock() {
+  return installFetchMock((call) => {
+    if (call.url.includes("/conversations") && call.method === "GET") {
+      return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+    }
+    return jsonResponse({ error: "not found" }, { status: 404 });
+  });
+}
+
+describe("ConversationSidebar", () => {
+  test("加载成功后渲染对话列表", async () => {
+    setupSuccessMock();
+    renderWithProviders(
+      createElement(ConversationSidebar, {
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        projectId: PROJECT_ID,
+        selectedId: null,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+  });
+
+  test("加载失败时显示错误和重试按钮", async () => {
+    installFetchMock((call) => {
+      if (call.url.includes("/conversations") && call.method === "GET") {
+        return jsonResponse({ error: "服务器错误" }, { status: 500 });
+      }
+      return jsonResponse({ error: "not found" }, { status: 404 });
+    });
+
+    renderWithProviders(
+      createElement(ConversationSidebar, {
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        projectId: PROJECT_ID,
+        selectedId: null,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("加载对话列表失败")).not.toBeNull();
+    });
+
+    expect(screen.getByText("重试")).not.toBeNull();
+  });
+
+  test("点击重试重新请求", async () => {
+    let callCount = 0;
+    installFetchMock((call) => {
+      if (call.url.includes("/conversations") && call.method === "GET") {
+        callCount++;
+        if (callCount === 1) {
+          return jsonResponse({ error: "服务器错误" }, { status: 500 });
+        }
+        return jsonResponse({ items: [CONVERSATION], page: 1, pageSize: 200, total: 1 });
+      }
+      return jsonResponse({ error: "not found" }, { status: 404 });
+    });
+
+    renderWithProviders(
+      createElement(ConversationSidebar, {
+        onAddClick: vi.fn(),
+        onDelete: vi.fn(),
+        onSelect: vi.fn(),
+        projectId: PROJECT_ID,
+        selectedId: null,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("加载对话列表失败")).not.toBeNull();
+    });
+
+    fireEvent.click(screen.getByText("重试"));
+
+    await waitFor(() => {
+      expect(screen.getByText("测试对话")).not.toBeNull();
+    });
+  });
+});