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/message-node.tsx

@@ -1,13 +1,15 @@
-import { useTheme } from '@/components/theme-provider';
 import { IMessageNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
+import { NodeProps, Position } from '@xyflow/react';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo } from 'react';
+import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
 
 function InnerMessageNode({
   id,
@@ -16,52 +18,43 @@ function InnerMessageNode({
   selected,
 }: NodeProps<IMessageNode>) {
   const messages: string[] = get(data, 'form.messages', []);
-  const { theme } = useTheme();
   return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <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}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={classNames({
-          [styles.nodeHeader]: messages.length > 0,
-        })}
-      ></NodeHeader>
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper>
+        <CommonHandle
+          id="c"
+          type="source"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          style={LeftHandleStyle}
+        ></CommonHandle>
+        <CommonHandle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          style={RightHandleStyle}
+          id="b"
+        ></CommonHandle>
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          className={classNames({
+            [styles.nodeHeader]: messages.length > 0,
+          })}
+        ></NodeHeader>
 
-      <Flex vertical gap={8} className={styles.messageNodeContainer}>
-        {messages.map((message, idx) => {
-          return (
-            <div className={styles.nodeText} key={idx}>
-              {message}
-            </div>
-          );
-        })}
-      </Flex>
-    </section>
+        <Flex vertical gap={8} className={styles.messageNodeContainer}>
+          {messages.map((message, idx) => {
+            return (
+              <div className={styles.nodeText} key={idx}>
+                {message}
+              </div>
+            );
+          })}
+        </Flex>
+      </NodeWrapper>
+    </ToolBar>
   );
 }