Feat: Modify the style of the canvas operator node #3221 (#8261)

### What problem does this PR solve?

Feat: Modify the style of the canvas operator node #3221

### Type of change


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

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

@@ -1,13 +1,14 @@
-import { useTheme } from '@/components/theme-provider';
 import { IAgentNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
-import classNames from 'classnames';
 import { memo, useMemo } from 'react';
 import { Operator } from '../../constant';
 import useGraphStore from '../../store';
+import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
-import NodeHeader, { ToolBar } from './node-header';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
 
 function InnerAgentNode({
   id,
@@ -15,7 +16,6 @@ function InnerAgentNode({
   isConnectable = true,
   selected,
 }: NodeProps<IAgentNode>) {
-  const { theme } = useTheme();
   const getNode = useGraphStore((state) => state.getNode);
   const edges = useGraphStore((state) => state.edges);
 
@@ -26,34 +26,25 @@ function InnerAgentNode({
   }, [edges, getNode, id]);
 
   return (
-    <ToolBar selected={selected}>
-      <section
-        className={classNames(
-          styles.ragNode,
-          theme === 'dark' ? styles.dark : '',
-          {
-            [styles.selectedNode]: selected,
-          },
-        )}
-      >
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper>
         {isNotParentAgent && (
           <>
-            <Handle
+            <CommonHandle
               id="c"
               type="source"
               position={Position.Left}
               isConnectable={isConnectable}
-              className={styles.handle}
               style={LeftHandleStyle}
-            ></Handle>
-            <Handle
+            ></CommonHandle>
+            <CommonHandle
               type="source"
               position={Position.Right}
               isConnectable={isConnectable}
               className={styles.handle}
               id="b"
               style={RightHandleStyle}
-            ></Handle>
+            ></CommonHandle>
           </>
         )}
         <Handle
@@ -70,7 +61,7 @@ function InnerAgentNode({
           style={{ left: 180 }}
         ></Handle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-      </section>
+      </NodeWrapper>
     </ToolBar>
   );
 }