Merge pull request #470 from easyops-cn/steve/aside

fix(): show tool call detail in aside

Author: weareoutman

bricks/ai-portal/src/chat-stream/Aside/Aside.module.css

@@ -47,6 +47,10 @@
   flex-direction: column;
 }
 
+.body.scrollable {
+  overflow-y: auto;
+}
+
 .app {
   flex: 1;
   min-height: 0;

bricks/ai-portal/src/chat-stream/Aside/Aside.tsx

@@ -1,19 +1,18 @@
-import React, { useContext, useMemo } from "react";
+import React, { useContext } from "react";
 import classNames from "classnames";
 import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
 import styles from "./Aside.module.css";
 import sharedStyles from "../../cruise-canvas/shared.module.css";
 import { WrappedCodeBlock, WrappedIconButton } from "../../shared/bricks";
-import type { CmdbInstanceDetailData } from "../../cruise-canvas/interfaces";
 import { ToolCallStatus } from "../../cruise-canvas/ToolCallStatus/ToolCallStatus";
 import { TaskContext } from "../../shared/TaskContext";
 import { StreamContext } from "../StreamContext";
 import type {
   ActiveDetailOfActivity,
-  FileInfo,
   FulfilledActiveDetail,
 } from "../../shared/interfaces";
 import { FlowApp } from "./FlowApp/FlowApp";
+import { ToolCallDetail } from "../../cruise-canvas/ToolCallDetail/ToolCallDetail";
 
 const ICON_SHRINK: GeneralIconProps = {
   lib: "easyops",
@@ -30,38 +29,6 @@ export function Aside({ detail, isSubTask, faded }: AsideProps) {
   const { setActiveDetail, setSubActiveDetail } = useContext(TaskContext);
   const { setUserClosedAside } = useContext(StreamContext);
 
-  const [toolMarkdownContent, cmdbInstanceDetails /* , files */] =
-    useMemo(() => {
-      const contents: string[] = [];
-      const instanceDetails: CmdbInstanceDetailData[] = [];
-      const files: FileInfo[] = [];
-
-      if (detail.type === "job") {
-        detail.job.messages?.forEach((message) => {
-          if (message.role === "tool") {
-            for (const part of message.parts) {
-              if (part.type === "data") {
-                switch (part.data?.type) {
-                  case "markdown":
-                    contents.push(part.data.content);
-                    break;
-                  case "cmdb_instance_detail":
-                    instanceDetails.push(part.data as CmdbInstanceDetailData);
-                    break;
-                }
-              } else if (part.type === "file") {
-                files.push(part.file);
-              }
-            }
-          }
-        });
-      }
-
-      const markdownContent = contents.join("");
-
-      return [markdownContent, instanceDetails, files] as const;
-    }, [detail]);
-
   return (
     <div
       className={classNames(styles.aside, {
@@ -85,7 +52,12 @@ export function Aside({ detail, isSubTask, faded }: AsideProps) {
             }}
           />
         </div>
-        <div className={styles.body}>
+        <div
+          className={classNames(styles.body, {
+            [styles.scrollable]:
+              detail.type === "job" && !detail.job.generatedView,
+          })}
+        >
           {detail.type === "job" ? (
             <>
               <ToolCallStatus job={detail.job} variant="read-only" />
@@ -95,19 +67,9 @@ export function Aside({ detail, isSubTask, faded }: AsideProps) {
                   source={detail.job.generatedView.code}
                   language="jsx"
                 />
-              ) : toolMarkdownContent ? (
-                <EditorApp
-                  name="Content"
-                  source={toolMarkdownContent}
-                  language="md"
-                />
-              ) : cmdbInstanceDetails.length > 0 ? (
-                <EditorApp
-                  name="CMDB"
-                  source={JSON.stringify(cmdbInstanceDetails, null, 2)}
-                  language="json"
-                />
-              ) : null}
+              ) : (
+                <ToolCallDetail job={detail.job} />
+              )}
             </>
           ) : (
             <FlowApp

bricks/ai-portal/src/cruise-canvas/CruiseCanvas.tsx

@@ -50,7 +50,7 @@ import {
 import { DONE_STATES, GENERAL_DONE_STATES } from "../shared/constants.js";
 import { WrappedIcon } from "../shared/bricks";
 import { CanvasContext } from "./CanvasContext.js";
-import { ToolCallDetail } from "./ToolCallDetail/ToolCallDetail.js";
+import { ToolCallDetailDrawer } from "./ToolCallDetail/ToolCallDetailDrawer";
 import { getScrollTo } from "./utils/getScrollTo.js";
 import { handleKeyboardNav } from "./utils/handleKeyboardNav.js";
 import { ExpandedView } from "../shared/ExpandedView/ExpandedView.js";
@@ -962,7 +962,7 @@ export function CruiseCanvasComponent(
           ) : null}
         </div>
         {fulfilledActiveDetail?.type === "job" && (
-          <ToolCallDetail job={fulfilledActiveDetail.job} />
+          <ToolCallDetailDrawer job={fulfilledActiveDetail.job} />
         )}
         {activeExpandedViewJobId && <ExpandedView views={views!} />}
         {activeFile && <FilePreview file={activeFile} />}

bricks/ai-portal/src/cruise-canvas/ToolCallDetail/ToolCallDetail.tsx

@@ -1,41 +1,23 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type { Drawer } from "@next-bricks/containers/drawer";
+import React, { useMemo } from "react";
 import classNames from "classnames";
+import { initializeI18n } from "@next-core/i18n";
 import type { DataPart, Job, Part } from "../../shared/interfaces";
-import { WrappedCodeBlock, WrappedDrawer } from "../../shared/bricks";
+import { WrappedCodeBlock } from "../../shared/bricks";
 import styles from "./ToolCallDetail.module.css";
 import sharedStyles from "../shared.module.css";
-import { K, t } from "../i18n";
-import { TaskContext } from "../../shared/TaskContext";
-import { ToolCallStatus } from "../ToolCallStatus/ToolCallStatus";
+import { K, t, locales, NS } from "./i18n";
 import { ToolProgressLine } from "../ToolProgressLine/ToolProgressLine";
 import { EnhancedMarkdown } from "../EnhancedMarkdown/EnhancedMarkdown";
 import { MarkdownPre } from "../../shared/MarkdownPre";
 
+initializeI18n(NS, locales);
+
 export interface ToolCallDetailProps {
   job: Job;
 }
 
-function getDrawerWidth() {
-  const { innerWidth } = window;
-  return innerWidth < 800
-    ? Math.min(500, innerWidth)
-    : innerWidth < 1000
-      ? innerWidth * 0.8
-      : 800;
-}
-
 export function ToolCallDetail({ job }: ToolCallDetailProps): JSX.Element {
-  const { setActiveDetail } = useContext(TaskContext);
   const toolCall = job.toolCall!;
-  const toolTitle = toolCall.annotations?.title;
 
   const [progress, intermediateParts, responseParts] = useMemo(() => {
     const toolCallMessages = job.messages?.filter((msg) => msg.role === "tool");
@@ -67,32 +49,6 @@ export function ToolCallDetail({ job }: ToolCallDetailProps): JSX.Element {
     return [progress, intermediateParts, responseParts];
   }, [job.messages]);
 
-  const handleClose = useCallback(() => {
-    setTimeout(() => {
-      setActiveDetail(null);
-    }, 300);
-  }, [setActiveDetail]);
-
-  const ref = useRef<Drawer>(null);
-
-  useEffect(() => {
-    setTimeout(() => {
-      ref.current?.open();
-    });
-  }, []);
-
-  const [width, setWidth] = useState(getDrawerWidth);
-
-  useEffect(() => {
-    const onResize = () => {
-      setWidth(getDrawerWidth);
-    };
-    window.addEventListener("resize", onResize);
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  }, []);
-
   const hasProcessParts = intermediateParts.length > 0 || !!progress;
   const hasResponseParts = responseParts.length > 0;
   const toolState =
@@ -104,18 +60,7 @@ export function ToolCallDetail({ job }: ToolCallDetailProps): JSX.Element {
   const failed = job.isError || toolState === "failed";
 
   return (
-    <WrappedDrawer
-      ref={ref}
-      customTitle={toolTitle || toolCall.name}
-      width={width}
-      closable
-      mask
-      maskClosable
-      keyboard
-      themeVariant="elevo"
-      onClose={handleClose}
-    >
-      <ToolCallStatus job={job} variant="read-only" />
+    <>
       <div className={styles.detail}>
         <div className={styles.heading}>{t(K.ARGUMENTS)}:</div>
         <div className={`${styles.body} ${sharedStyles.markdown}`}>
@@ -180,7 +125,7 @@ export function ToolCallDetail({ job }: ToolCallDetailProps): JSX.Element {
           </div>
         </div>
       )}
-    </WrappedDrawer>
+    </>
   );
 }
 

bricks/ai-portal/src/cruise-canvas/ToolCallDetail/ToolCallDetailDrawer.tsx

@@ -0,0 +1,77 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import type { Drawer } from "@next-bricks/containers/drawer";
+import type { Job } from "../../shared/interfaces";
+import { WrappedDrawer } from "../../shared/bricks";
+import { TaskContext } from "../../shared/TaskContext";
+import { ToolCallStatus } from "../ToolCallStatus/ToolCallStatus";
+import { ToolCallDetail } from "./ToolCallDetail";
+
+export interface ToolCallDetailDrawerProps {
+  job: Job;
+}
+
+function getDrawerWidth() {
+  const { innerWidth } = window;
+  return innerWidth < 800
+    ? Math.min(500, innerWidth)
+    : innerWidth < 1000
+      ? innerWidth * 0.8
+      : 800;
+}
+
+export function ToolCallDetailDrawer({
+  job,
+}: ToolCallDetailDrawerProps): JSX.Element {
+  const { setActiveDetail } = useContext(TaskContext);
+  const toolCall = job.toolCall!;
+  const toolTitle = toolCall.annotations?.title;
+
+  const handleClose = useCallback(() => {
+    setTimeout(() => {
+      setActiveDetail(null);
+    }, 300);
+  }, [setActiveDetail]);
+
+  const ref = useRef<Drawer>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      ref.current?.open();
+    });
+  }, []);
+
+  const [width, setWidth] = useState(getDrawerWidth);
+
+  useEffect(() => {
+    const onResize = () => {
+      setWidth(getDrawerWidth);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return (
+    <WrappedDrawer
+      ref={ref}
+      customTitle={toolTitle || toolCall.name}
+      width={width}
+      closable
+      mask
+      maskClosable
+      keyboard
+      themeVariant="elevo"
+      onClose={handleClose}
+    >
+      <ToolCallStatus job={job} variant="read-only" />
+      <ToolCallDetail job={job} />
+    </WrappedDrawer>
+  );
+}

bricks/ai-portal/src/cruise-canvas/ToolCallDetail/i18n.ts

@@ -0,0 +1,29 @@
+import { i18n } from "@next-core/i18n";
+
+export enum K {
+  ARGUMENTS = "ARGUMENTS",
+  PROCESS = "PROCESS",
+  RESPONSE = "RESPONSE",
+}
+
+const en: Locale = {
+  ARGUMENTS: "Arguments",
+  PROCESS: "Process",
+  RESPONSE: "Response",
+};
+
+const zh: Locale = {
+  ARGUMENTS: "参数",
+  PROCESS: "过程",
+  RESPONSE: "响应",
+};
+
+export const NS = "bricks/ai-portal/ToolCallDetail";
+
+export const locales = { en, zh };
+
+export const t = i18n.getFixedT(null, NS);
+
+type Locale = { [k in K]: string } & {
+  [k in K as `${k}_plural`]?: string;
+};

bricks/ai-portal/src/cruise-canvas/i18n.ts

@@ -6,9 +6,6 @@ export enum K {
   TASK_COMPLETED = "TASK_COMPLETED",
   SHARE = "SHARE",
   TYPE_YOUR_MESSAGE_HERE = "TYPE_YOUR_MESSAGE_HERE",
-  ARGUMENTS = "ARGUMENTS",
-  PROCESS = "PROCESS",
-  RESPONSE = "RESPONSE",
   SWITCH_TO_CHAT = "SWITCH_TO_CHAT",
   BACK_TO_CENTER = "BACK_TO_CENTER",
   ZOOM_IN = "ZOOM_IN",
@@ -27,9 +24,6 @@ const en: Locale = {
   TASK_COMPLETED: "Task completed",
   SHARE: "Share",
   TYPE_YOUR_MESSAGE_HERE: "Type your message here",
-  ARGUMENTS: "Arguments",
-  PROCESS: "Process",
-  RESPONSE: "Response",
   SWITCH_TO_CHAT: "Switch to chat",
   BACK_TO_CENTER: "Back to center",
   ZOOM_IN: "Zoom in",
@@ -48,9 +42,6 @@ const zh: Locale = {
   TASK_COMPLETED: "任务完成",
   SHARE: "分享",
   TYPE_YOUR_MESSAGE_HERE: "在这里输入信息",
-  ARGUMENTS: "参数",
-  PROCESS: "过程",
-  RESPONSE: "响应",
   SWITCH_TO_CHAT: "切换为聊天",
   BACK_TO_CENTER: "回中",
   ZOOM_IN: "放大",