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/form/agent-form/index.tsx

@@ -21,8 +21,8 @@ import { AgentInstanceContext } from '../../context';
 import { INextOperatorForm } from '../../interface';
 import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
-import { ToolPopover } from './tool-popover';
-import { useToolOptions, useValues } from './use-values';
+import { AgentTools } from './agent-tools';
+import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
 const FormSchema = z.object({
@@ -67,8 +67,6 @@ const AgentForm = ({ node }: INextOperatorForm) => {
 
   const { addCanvasNode } = useContext(AgentInstanceContext);
 
-  const toolOptions = useToolOptions();
-
   return (
     <Form {...form}>
       <form
@@ -113,17 +111,17 @@ const AgentForm = ({ node }: INextOperatorForm) => {
             )}
           />
         </FormContainer>
-        <ToolPopover>
-          <BlockButton>Add Tool</BlockButton>
-        </ToolPopover>
-        <BlockButton
-          onClick={addCanvasNode(Operator.Agent, {
-            nodeId: node?.id,
-            position: Position.Bottom,
-          })}
-        >
-          Add Agent
-        </BlockButton>
+        <FormContainer>
+          <AgentTools></AgentTools>
+          <BlockButton
+            onClick={addCanvasNode(Operator.Agent, {
+              nodeId: node?.id,
+              position: Position.Bottom,
+            })}
+          >
+            Add Agent
+          </BlockButton>
+        </FormContainer>
         <Output list={outputList}></Output>
       </form>
     </Form>