Feat: Add canvas node toolbar #3221 (#8249)

### What problem does this PR solve?

Feat: Add canvas node toolbar #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/node/agent-node.tsx

@@ -7,7 +7,7 @@ import { Operator } from '../../constant';
 import useGraphStore from '../../store';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
-import NodeHeader from './node-header';
+import NodeHeader, { ToolBar } from './node-header';
 
 function InnerAgentNode({
   id,
@@ -26,50 +26,52 @@ function InnerAgentNode({
   }, [edges, getNode, id]);
 
   return (
-    <section
-      className={classNames(
-        styles.ragNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      {isNotParentAgent && (
-        <>
-          <Handle
-            id="c"
-            type="source"
-            position={Position.Left}
-            isConnectable={isConnectable}
-            className={styles.handle}
-            style={LeftHandleStyle}
-          ></Handle>
-          <Handle
-            type="source"
-            position={Position.Right}
-            isConnectable={isConnectable}
-            className={styles.handle}
-            id="b"
-            style={RightHandleStyle}
-          ></Handle>
-        </>
-      )}
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        id="f"
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        id="e"
-        style={{ left: 180 }}
-      ></Handle>
-      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-    </section>
+    <ToolBar selected={selected}>
+      <section
+        className={classNames(
+          styles.ragNode,
+          theme === 'dark' ? styles.dark : '',
+          {
+            [styles.selectedNode]: selected,
+          },
+        )}
+      >
+        {isNotParentAgent && (
+          <>
+            <Handle
+              id="c"
+              type="source"
+              position={Position.Left}
+              isConnectable={isConnectable}
+              className={styles.handle}
+              style={LeftHandleStyle}
+            ></Handle>
+            <Handle
+              type="source"
+              position={Position.Right}
+              isConnectable={isConnectable}
+              className={styles.handle}
+              id="b"
+              style={RightHandleStyle}
+            ></Handle>
+          </>
+        )}
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          id="f"
+        ></Handle>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          id="e"
+          style={{ left: 180 }}
+        ></Handle>
+        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+      </section>
+    </ToolBar>
   );
 }
 

web/src/pages/agent/canvas/node/hooks.ts

@@ -72,13 +72,13 @@ export const useBuildSwitchHandlePositions = ({
     }> = [];
 
     [...conditions, ''].forEach((x, idx) => {
-      let top = idx === 0 ? 58 + 20 : list[idx - 1].top + 32; // case number (Case 1) height + flex gap
+      let top = idx === 0 ? 58 + 20 : list[idx - 1].top + 10; // case number (Case 1) height + flex gap
       if (idx - 1 >= 0) {
         const previousItems = conditions[idx - 1]?.items ?? [];
         if (previousItems.length > 0) {
-          top += 12; // ConditionBlock padding
+          // top += 12; // ConditionBlock padding
           top += previousItems.length * 22; // condition variable height
-          top += (previousItems.length - 1) * 25; // operator height
+          // top += (previousItems.length - 1) * 25; // operator height
         }
       }
 

web/src/pages/agent/canvas/node/node-header.tsx

@@ -1,13 +1,19 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Flex } from 'antd';
-import { Play } from 'lucide-react';
+import { Copy, Play, Trash2 } from 'lucide-react';
 import { Operator, operatorMap } from '../../constant';
 import OperatorIcon from '../../operator-icon';
 import { needsSingleStepDebugging } from '../../utils';
 import NodeDropdown from './dropdown';
 import { NextNodePopover } from './popover';
 
-import { memo } from 'react';
+import {
+  TooltipContent,
+  TooltipNode,
+  TooltipTrigger,
+} from '@/components/xyflow/tooltip-node';
+import { Position } from '@xyflow/react';
+import { PropsWithChildren, memo } from 'react';
 import { RunTooltip } from '../../flow-tooltip';
 interface IProps {
   id: string;
@@ -74,3 +80,37 @@ const InnerNodeHeader = ({
 const NodeHeader = memo(InnerNodeHeader);
 
 export default NodeHeader;
+
+function IconWrapper({ children }: PropsWithChildren) {
+  return (
+    <div className="p-1.5 bg-text-title rounded-sm cursor-pointer">
+      {children}
+    </div>
+  );
+}
+
+type ToolBarProps = {
+  selected?: boolean | undefined;
+} & PropsWithChildren;
+
+export function ToolBar({ selected, children }: ToolBarProps) {
+  return (
+    <TooltipNode selected={selected}>
+      <TooltipTrigger>{children}</TooltipTrigger>
+
+      <TooltipContent position={Position.Top}>
+        <section className="flex gap-2 items-center">
+          <IconWrapper>
+            <Play className="size-3.5" />
+          </IconWrapper>
+          <IconWrapper>
+            <Copy className="size-3.5" />
+          </IconWrapper>
+          <IconWrapper>
+            <Trash2 className="size-3.5" />
+          </IconWrapper>
+        </section>
+      </TooltipContent>
+    </TooltipNode>
+  );
+}

web/src/pages/agent/canvas/node/switch-node.tsx

@@ -3,7 +3,6 @@ import { useTheme } from '@/components/theme-provider';
 import { Card, CardContent } from '@/components/ui/card';
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
 import classNames from 'classnames';
 import { memo, useCallback } from 'react';
 import { SwitchOperatorOptions } from '../../constant';
@@ -11,7 +10,7 @@ import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
 import { RightHandleStyle } from './handle-icon';
 import { useBuildSwitchHandlePositions } from './hooks';
 import styles from './index.less';
-import NodeHeader from './node-header';
+import NodeHeader, { ToolBar } from './node-header';
 
 const getConditionKey = (idx: number, length: number) => {
   if (idx === 0 && length !== 1) {
@@ -40,10 +39,10 @@ const ConditionBlock = ({
 
   return (
     <Card>
-      <CardContent className="space-y-1 p-1">
+      <CardContent className="p-0 divide-y divide-background-card">
         {items.map((x, idx) => (
           <div key={idx}>
-            <section className="flex justify-between gap-2 items-center text-xs">
+            <section className="flex justify-between gap-2 items-center text-xs p-1">
               <div className="flex-1 truncate text-background-checked">
                 {getLabel(x?.cpn_id)}
               </div>
@@ -61,61 +60,64 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
   const { positions } = useBuildSwitchHandlePositions({ data, id });
   const { theme } = useTheme();
   return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-      <Flex vertical gap={10}>
-        {positions.map((position, idx) => {
-          return (
-            <div key={idx}>
-              <Flex vertical>
-                <Flex justify={'space-between'}>
-                  <span className="text-text-sub-title text-xs translate-y-2">
-                    {idx < positions.length - 1 &&
-                      position.condition?.logical_operator?.toUpperCase()}
-                  </span>
-                  <span>{getConditionKey(idx, positions.length)}</span>
-                </Flex>
-                {position.condition && (
-                  <ConditionBlock
-                    nodeId={id}
-                    condition={position.condition}
-                  ></ConditionBlock>
-                )}
-              </Flex>
-              <Handle
-                key={position.text}
-                id={position.text}
-                type="source"
-                position={Position.Right}
-                isConnectable
-                className={styles.handle}
-                style={{ ...RightHandleStyle, top: position.top }}
-              ></Handle>
-            </div>
-          );
-        })}
-      </Flex>
-    </section>
+    <ToolBar selected={selected}>
+      <section
+        className={classNames(
+          styles.logicNode,
+          theme === 'dark' ? styles.dark : '',
+          {
+            [styles.selectedNode]: selected,
+          },
+          'group/operator hover:bg-slate-100',
+        )}
+      >
+        <Handle
+          type="target"
+          position={Position.Left}
+          isConnectable
+          className={styles.handle}
+          id={'a'}
+        ></Handle>
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          className={styles.nodeHeader}
+        ></NodeHeader>
+        <section className="gap-2.5 flex flex-col">
+          {positions.map((position, idx) => {
+            return (
+              <div key={idx}>
+                <section className="flex flex-col">
+                  <div className="flex justify-between">
+                    <span className="text-text-sub-title text-xs translate-y-2">
+                      {idx < positions.length - 1 &&
+                        position.condition?.logical_operator?.toUpperCase()}
+                    </span>
+                    <span>{getConditionKey(idx, positions.length)}</span>
+                  </div>
+                  {position.condition && (
+                    <ConditionBlock
+                      nodeId={id}
+                      condition={position.condition}
+                    ></ConditionBlock>
+                  )}
+                </section>
+                <Handle
+                  key={position.text}
+                  id={position.text}
+                  type="source"
+                  position={Position.Right}
+                  isConnectable
+                  className={styles.handle}
+                  style={{ ...RightHandleStyle, top: position.top }}
+                ></Handle>
+              </div>
+            );
+          })}
+        </section>
+      </section>
+    </ToolBar>
   );
 }