feat: 工作台聊天室功能

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 {