feat(chat): 优化聊天面板交互体验 — 推理折叠/智能滚动/工具中文名/代码块按钮

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

@@ -1,5 +1,5 @@
 import { useChat } from "@ai-sdk/react";
-import { CopyOutlined, EditOutlined, RedoOutlined, RobotOutlined } from "@ant-design/icons";
+import { ArrowDownOutlined, CopyOutlined, EditOutlined, RedoOutlined, RobotOutlined } from "@ant-design/icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { DefaultChatTransport, type UIMessage } from "ai";
 import { App, Button, Card, Flex, Input, Spin, Typography } from "antd";
@@ -17,6 +17,7 @@ import { ChatInputArea } from "./ChatInputArea";
 import { ReasoningPart } from "./parts/ReasoningPart";
 import { TextPart } from "./parts/TextPart";
 import { ToolPart } from "./parts/ToolPart";
+import { useChatScroll } from "./use-chat-scroll";
 
 interface ChatPanelProps {
   conversationId: null | string;
@@ -55,6 +56,8 @@ export function ChatPanel({ conversationId, onConversationCreated, projectId }:
 
   const isLoading = status === "submitted" || status === "streaming";
 
+  const { isAtBottom, scrollToBottom } = useChatScroll({ messages, scrollRef, status });
+
   useEffect(() => {
     if (!conversationId) {
       setMessages([]);
@@ -125,10 +128,6 @@ export function ChatPanel({ conversationId, onConversationCreated, projectId }:
       });
   }, [conversationId, textModels, projectId, logger]);
 
-  useEffect(() => {
-    scrollRef.current?.scrollTo({ behavior: "smooth", top: scrollRef.current.scrollHeight });
-  }, [messages]);
-
   useEffect(() => {
     if (status === "ready" && conversationId) {
       void queryClient.invalidateQueries({ queryKey: ["conversations", projectId] });
@@ -380,6 +379,15 @@ export function ChatPanel({ conversationId, onConversationCreated, projectId }:
           </Flex>
         </div>
       )}
+      {!isAtBottom && (
+        <Button
+          className="chat-scroll-bottom-btn"
+          icon={<ArrowDownOutlined />}
+          onClick={scrollToBottom}
+          shape="circle"
+          size="small"
+        />
+      )}
       <ChatInputArea
         displayModelId={displayModelId}
         input={input}

src/web/consoles/workbench/components/chat/parts/ReasoningPart.tsx

@@ -1,20 +1,40 @@
 import { CheckCircleFilled, LoadingOutlined } from "@ant-design/icons";
 import { Collapse, Flex, Typography } from "antd";
+import { useCallback, useMemo, useState } from "react";
 
 import type { PartProps } from "./types";
 
+const REASONING_KEY = "reasoning";
+
 export function ReasoningPart({ part }: PartProps) {
   const text = typeof part["text"] === "string" ? part["text"] : "";
   const state = typeof part["state"] === "string" ? part["state"] : "";
   const isStreaming = state === "streaming";
 
+  const [userToggled, setUserToggled] = useState(false);
+  const [userActiveKey, setUserActiveKey] = useState<string[]>([]);
+
+  const autoActiveKey = useMemo(() => {
+    if (isStreaming) return [REASONING_KEY];
+    if (state === "complete" || text.length > 0) return [];
+    return [];
+  }, [isStreaming, state, text]);
+
+  const activeKey = userToggled ? userActiveKey : autoActiveKey;
+
+  const handleChange = useCallback((keys: string | string[]) => {
+    setUserToggled(true);
+    setUserActiveKey(keys as string[]);
+  }, []);
+
   return (
     <Collapse
+      activeKey={activeKey}
       ghost
       items={[
         {
           children: <Typography.Text type="secondary">{text}</Typography.Text>,
-          key: "reasoning",
+          key: REASONING_KEY,
           label: isStreaming ? (
             <Flex align="center" component="span" gap={4}>
               <LoadingOutlined className="icon-primary" />
@@ -28,6 +48,7 @@ export function ReasoningPart({ part }: PartProps) {
           ),
         },
       ]}
+      onChange={handleChange}
       size="small"
     />
   );

src/web/consoles/workbench/components/chat/parts/TextPart.tsx

@@ -1,8 +1,25 @@
+import type { ComponentType, SVGProps } from "react";
+
+import { CheckOutlined, CopyOutlined, DownloadOutlined } from "@ant-design/icons";
 import { Typography } from "antd";
 import { Streamdown } from "streamdown";
 
 import type { PartProps } from "./types";
 
+type IconComponent = ComponentType<SVGProps<SVGSVGElement> & { size?: number }>;
+
+const STREAMDOWN_ICONS: Partial<Record<"CheckIcon" | "CopyIcon" | "DownloadIcon", IconComponent>> = {
+  CheckIcon: CheckOutlined as IconComponent,
+  CopyIcon: CopyOutlined as IconComponent,
+  DownloadIcon: DownloadOutlined as IconComponent,
+};
+
+const STREAMDOWN_TRANSLATIONS = {
+  copied: "已复制",
+  copyCode: "复制",
+  downloadFile: "下载",
+};
+
 interface TextPartProps extends PartProps {
   role: string;
 }
@@ -15,7 +32,9 @@ export function TextPart({ part, role }: TextPartProps) {
       {role === "user" ? (
         <Typography.Paragraph className="message-body-text">{text}</Typography.Paragraph>
       ) : (
-        <Streamdown parseIncompleteMarkdown>{text}</Streamdown>
+        <Streamdown icons={STREAMDOWN_ICONS} parseIncompleteMarkdown translations={STREAMDOWN_TRANSLATIONS}>
+          {text}
+        </Streamdown>
       )}
     </div>
   );

src/web/consoles/workbench/components/chat/parts/ToolPart.tsx

@@ -8,6 +8,7 @@ interface ToolPartData {
   input?: unknown;
   output?: unknown;
   toolCallId?: string;
+  toolMetadata?: Record<string, unknown>;
   toolName?: string;
   type?: string;
 }
@@ -24,7 +25,9 @@ const FORMAT_JSON = (v: unknown) => JSON.stringify(v, null, 2);
 export function ToolPart({ part }: PartProps) {
   const toolPart = part as unknown as ToolPartData;
   const state = getToolState(toolPart);
-  const toolName = toolPart.toolName ?? (toolPart.type ?? "unknown").replace(/^tool-/, "");
+  const rawToolName = toolPart.toolName ?? (toolPart.type ?? "unknown").replace(/^tool-/, "");
+  const toolName =
+    typeof toolPart.toolMetadata?.["displayName"] === "string" ? toolPart.toolMetadata["displayName"] : rawToolName;
 
   const isStreaming = state === "input-streaming" || state === "input-available";
 

src/web/consoles/workbench/components/chat/use-chat-scroll.ts

@@ -0,0 +1,55 @@
+import type { UIMessage } from "ai";
+
+import { useCallback, useEffect, useState } from "react";
+
+const NEAR_BOTTOM_THRESHOLD = 80;
+
+interface UseChatScrollOptions {
+  messages: UIMessage[];
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  status: string;
+}
+
+export function useChatScroll({ messages, scrollRef, status }: UseChatScrollOptions) {
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const isStreaming = status === "streaming";
+
+  const checkNearBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD;
+  }, [scrollRef]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    setIsAtBottom(checkNearBottom());
+
+    const handleScroll = () => {
+      setIsAtBottom(checkNearBottom());
+    };
+
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [scrollRef, checkNearBottom]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !isAtBottom) return;
+
+    el.scrollTo({
+      behavior: isStreaming ? "instant" : "smooth",
+      top: el.scrollHeight,
+    });
+  }, [messages, isStreaming, isAtBottom, scrollRef]);
+
+  const scrollToBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTo({ behavior: "smooth", top: el.scrollHeight });
+    setIsAtBottom(true);
+  }, [scrollRef]);
+
+  return { isAtBottom, scrollToBottom };
+}

src/web/styles.css

@@ -141,6 +141,7 @@ body {
   flex-direction: column;
   min-height: 0;
   min-width: 0;
+  position: relative;
 }
 
 .chat-welcome-area {
@@ -251,6 +252,47 @@ body {
   color: var(--ant-color-text-secondary);
 }
 
+.chat-scroll-bottom-btn {
+  position: absolute;
+  bottom: 115px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+[data-streamdown="code-block-actions"] {
+  gap: 4px;
+}
+
+[data-streamdown="code-block-actions"] button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  border-radius: var(--ant-border-radius-sm);
+  border: 1px solid var(--ant-color-border-secondary);
+  background: var(--ant-color-bg-container);
+  color: var(--ant-color-text-secondary);
+  font-size: 12px;
+  transition: all 0.2s;
+}
+
+[data-streamdown="code-block-actions"] button:hover {
+  color: var(--ant-color-primary);
+  border-color: var(--ant-color-primary);
+}
+
+[data-streamdown="code-block-actions"] button svg {
+  width: 14px;
+  height: 14px;
+}
+
 .app-page-flex {
   flex: 1;
 }