Feat: Add a tool operator node from the agent form #3221 (#8344)

### What problem does this PR solve?
Feat: Add a tool operator node from the agent form #3221

### Type of change


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

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

@@ -63,6 +63,13 @@ function InnerAgentNode({
           id="e"
           style={{ left: 180 }}
         ></Handle>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          id={NodeHandleId.Tool}
+          style={{ left: 20 }}
+        ></Handle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
       </NodeWrapper>
     </ToolBar>

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

@@ -1,12 +1,8 @@
 import { IToolNode } from '@/interfaces/database/agent';
-import { NodeProps, Position } from '@xyflow/react';
+import { Handle, NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
 
 function InnerToolNode({
   id,
@@ -15,19 +11,14 @@ function InnerToolNode({
   selected,
 }: NodeProps<IToolNode>) {
   return (
-    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Top}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-      </NodeWrapper>
-    </ToolBar>
+    <NodeWrapper>
+      <Handle
+        id={NodeHandleId.End}
+        type="target"
+        position={Position.Top}
+        isConnectable={isConnectable}
+      ></Handle>
+    </NodeWrapper>
   );
 }