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/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>
   );
 }