Merge pull request #417 from easyops-cn/steve/parse-module

feat(tsx-parser): refactor as module

Author: weareoutman

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

@@ -36,7 +36,6 @@ import { NodeRequirement } from "./NodeRequirement/NodeRequirement.js";
 import { NodeInstruction } from "./NodeInstruction/NodeInstruction.js";
 import { NodeJob } from "./NodeJob/NodeJob.js";
 import { NodeEnd } from "./NodeEnd/NodeEnd.js";
-import { NodeView } from "./NodeView/NodeView.js";
 import {
   CANVAS_PADDING_BOTTOM,
   CANVAS_PADDING_LEFT,
@@ -740,29 +739,19 @@ export function CruiseCanvasComponent(
       if (action === "scroll") {
         scrollBy(keyboardAction.direction, keyboardAction.range);
       } else if (action === "enter") {
-        if (node.type !== "job" && node.type !== "view") {
-          return;
-        }
-        const askUser = node.job.toolCall?.name === "ask_human";
-        const askUserPlan =
-          node.job.toolCall?.name === "ask_human_confirming_plan";
-        if (askUser || askUserPlan) {
+        if (node.type !== "job") {
           return;
         }
       }
       e.preventDefault();
       e.stopPropagation();
 
       if (action === "enter") {
-        if (node.type === "view") {
-          setActiveExpandedViewJobId(node.job.id);
-        } else {
-          setActiveToolCallJobId((node as JobGraphNode).job.id);
-        }
+        setActiveToolCallJobId((node as JobGraphNode).job.id);
       } else if (action === "switch-active-node") {
         if (node) {
           setActiveNodeId(node.id);
-          if (node.type === "job" || node.type === "view") {
+          if (node.type === "job") {
             scrollTo({
               jobId: node.job.id,
               behavior: "smooth",
@@ -1006,8 +995,6 @@ function NodeComponent({
           content={job!.instruction}
           loading={instructionLoading}
         />
-      ) : type === "view" ? (
-        <NodeView job={job!} active={active} />
       ) : (
         <NodeJob job={job!} active={active} isLeaf={isLeaf} />
       )}

bricks/ai-portal/src/cruise-canvas/NodeJob/NodeJob.module.css

@@ -54,6 +54,7 @@
 .heading {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 0 5px 5px;
   font-size: 13px;
   color: #8c8c8c;
@@ -127,3 +128,7 @@
     background: transparent; /* 轨道背景透明 */
   }
 }
+
+.view-container {
+  margin-top: 10px;
+}

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

@@ -1,5 +1,11 @@
 // istanbul ignore file: experimental
-import React, { useMemo } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import classNames from "classnames";
 import styles from "./NodeJob.module.css";
 import sharedStyles from "../shared.module.css";
@@ -11,6 +17,9 @@ import { CmdbInstanceDetail } from "../CmdbInstanceDetail/CmdbInstanceDetail";
 import { FileList } from "../FileList/FileList";
 import { RequestHumanAction } from "../../shared/RequestHumanAction/RequestHumanAction";
 import { AIEmployeeAvatar } from "../AIEmployeeAvatar/AIEmployeeAvatar";
+import { CreatedView } from "../../shared/CreatedView/CreatedView";
+import { CanvasContext } from "../CanvasContext";
+import { ViewToolbar } from "../../shared/CreatedView/ViewToolbar";
 
 // 当 markdown 中包含超过 4 列的表格时，对节点使用大尺寸样式
 const RegExpLargeTableInMarkdown = /^\s*\|(?:\s*:?-+:?\s*\|){4,}\s*$/m;
@@ -64,18 +73,25 @@ export function NodeJob({ job, active, isLeaf }: NodeJobProps): JSX.Element {
       return [markdownContent, instanceDetails, files, large] as const;
     }, [job.messages, toolName]);
 
+  const [viewSize, setViewSize] = useState<"medium" | "large">("medium");
+
+  const handleViewSizeChange = useCallback((value: "medium" | "large") => {
+    setViewSize(value);
+  }, []);
+
   return (
     <div
       className={classNames(styles["node-job"], {
         [styles.error]: job.isError,
         [styles.active]: active,
-        [styles.large]: sizeLarge,
+        [styles.large]: sizeLarge || viewSize === "large",
       })}
     >
       <div className={styles.background} />
       {job.aiEmployeeId ? (
         <div className={styles.heading}>
           <AIEmployeeAvatar aiEmployeeId={job.aiEmployeeId} />
+          {job.generatedView ? <ViewToolbar job={job} /> : null}
         </div>
       ) : null}
       <div className={styles.body}>
@@ -124,6 +140,70 @@ export function NodeJob({ job, active, isLeaf }: NodeJobProps): JSX.Element {
             <RequestHumanAction action={job.requestHumanAction} />
           )}
       </div>
+      {job.generatedView ? (
+        <ViewContainer job={job} onSizeChange={handleViewSizeChange} />
+      ) : null}
+    </div>
+  );
+}
+
+interface ViewContainerProps {
+  job: Job;
+  onSizeChange?: (value: "medium" | "large") => void;
+}
+
+function ViewContainer({ job, onSizeChange }: ViewContainerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { setHoverOnScrollableContent } = useContext(CanvasContext);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      let found = false;
+      let scrollableContent: HTMLElement | undefined;
+      for (const el of e.nativeEvent.composedPath()) {
+        if (el === ref.current) {
+          break;
+        }
+        if (!(el instanceof HTMLElement)) {
+          continue;
+        }
+        if (el.tagName === "PRE") {
+          if (el.scrollWidth > el.clientWidth) {
+            found = true;
+            break;
+          }
+        } else if (el.classList.contains("ant-table-content")) {
+          scrollableContent = el;
+        } else if (
+          el.classList.contains("ant-table") &&
+          el.classList.contains("ant-table-scroll-horizontal")
+        ) {
+          if (
+            scrollableContent &&
+            scrollableContent.scrollWidth > scrollableContent.clientWidth
+          ) {
+            found = true;
+            break;
+          }
+        }
+      }
+      setHoverOnScrollableContent(found);
+    },
+    [setHoverOnScrollableContent]
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    setHoverOnScrollableContent(false);
+  }, [setHoverOnScrollableContent]);
+
+  return (
+    <div
+      className={styles["view-container"]}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+    >
+      <CreatedView job={job} noHeading onSizeChange={onSizeChange} />
     </div>
   );
 }

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

@@ -20,7 +20,6 @@ export type GraphNode =
   | LoadingGraphNode
   | InstructionGraphNode
   | JobGraphNode
-  | ViewGraphNode
   | StartGraphNode
   | EndGraphNode
   | ErrorGraphNode
@@ -47,11 +46,6 @@ export interface JobGraphNode extends BaseGraphNode {
   job: Job;
 }
 
-export interface ViewGraphNode extends BaseGraphNode {
-  type: "view";
-  job: Job;
-}
-
 export interface StartGraphNode extends BaseGraphNode {
   type: "start";
 }

bricks/ai-portal/src/cruise-canvas/useConversationGraph.spec.ts

@@ -134,7 +134,7 @@ describe("useConversationGraph", () => {
     });
   });
 
-  it("should create view node when job has generatedView", () => {
+  it("should collect views when job has generatedView", () => {
     const conversation = { id: "conv-1" } as ConversationBaseDetail;
     const tasks: Task[] = [
       {
@@ -154,12 +154,6 @@ describe("useConversationGraph", () => {
       useConversationGraph(conversation, tasks, [])
     );
 
-    expect(result.current?.nodes).toContainEqual({
-      type: "view",
-      id: "view:job-1",
-      job: expect.objectContaining({ id: "job-1" }),
-    });
-
     expect(result.current?.views).toContainEqual({
       id: "job-1",
       view: { viewId: "view-1" },
@@ -255,11 +249,6 @@ describe("useConversationGraph", () => {
       source: "instruction:job-1",
       target: "job:job-1",
     });
-
-    expect(result.current?.edges).toContainEqual({
-      source: "job:job-1",
-      target: "view:job-1",
-    });
   });
 
   it("should create edges between dependent jobs", () => {

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

@@ -119,15 +119,6 @@ export function useConversationGraph(
 
       const view = job.generatedView;
       if (view) {
-        // Add view node for job
-        const viewNodeId = `view:${job.id}`;
-        nodes.push({
-          type: "view",
-          id: viewNodeId,
-          job,
-        });
-        nodeIds.push(viewNodeId);
-
         views.push({
           id: job.id,
           view,

bricks/ai-portal/src/shared/CreatedView/CreatedView.module.css

@@ -5,12 +5,6 @@
   margin-bottom: 16px;
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .title {
   font-size: 12px;
   min-width: 0;
@@ -28,21 +22,3 @@ ai-portal\.cruise-canvas .title {
 ai-portal\.cruise-canvas .heading {
   margin-bottom: 10px;
 }
-
-.button {
-  display: flex;
-  background: none;
-  border: none;
-  padding: 3px;
-  cursor: pointer;
-  color: #595959;
-}
-
-.button-lucide {
-  font-size: 16px;
-  padding: 2px;
-}
-
-.button:hover {
-  color: var(--elevo-color-brand);
-}