Feat: Deleting the last tool of the agent will delete the tool node #3221 (#8376)

### What problem does this PR solve?

Feat: Deleting the last tool of the agent will delete the tool node
#3221

### Type of change


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

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

@@ -1,8 +1,9 @@
 import { IAgentForm, IToolNode } from '@/interfaces/database/agent';
 import { Handle, NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { NodeHandleId } from '../../constant';
+import { ToolCard } from '../../form/agent-form/agent-tools';
 import useGraphStore from '../../store';
 import { NodeWrapper } from './node-wrapper';
 
@@ -16,6 +17,8 @@ function InnerToolNode({
   const upstreamAgentNodeId = edges.find((x) => x.target === id)?.source;
   const upstreamAgentNode = getNode(upstreamAgentNodeId);
 
+  const handleClick = useCallback(() => {}, []);
+
   const tools: IAgentForm['tools'] = get(
     upstreamAgentNode,
     'data.form.tools',
@@ -30,9 +33,16 @@ function InnerToolNode({
         position={Position.Top}
         isConnectable={isConnectable}
       ></Handle>
-      <ul className="space-y-1">
+      <ul className="space-y-2">
         {tools.map((x) => (
-          <li key={x.component_name}>{x.component_name}</li>
+          <ToolCard
+            key={x.component_name}
+            onClick={handleClick}
+            className="cursor-pointer"
+            data-tool={x.component_name}
+          >
+            {x.component_name}
+          </ToolCard>
         ))}
       </ul>
     </NodeWrapper>