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/tool-form/constant.ts

@@ -0,0 +1,36 @@
+import { Operator } from '../../constant';
+import AkShareForm from '../akshare-form';
+import ArXivForm from '../arxiv-form';
+import BingForm from '../bing-form';
+import CodeForm from '../code-form';
+import CrawlerForm from '../crawler-form';
+import DeepLForm from '../deepl-form';
+import DuckDuckGoForm from '../duckduckgo-form';
+import EmailForm from '../email-form';
+import ExeSQLForm from '../exesql-form';
+import GithubForm from '../github-form';
+import GoogleForm from '../google-form';
+import GoogleScholarForm from '../google-scholar-form';
+import PubMedForm from '../pubmed-form';
+import RetrievalForm from '../retrieval-form/next';
+import WikipediaForm from '../wikipedia-form';
+import YahooFinanceForm from '../yahoo-finance-form';
+
+export const ToolFormConfigMap = {
+  [Operator.Retrieval]: RetrievalForm,
+  [Operator.Code]: CodeForm,
+  [Operator.DuckDuckGo]: DuckDuckGoForm,
+  [Operator.Wikipedia]: WikipediaForm,
+  [Operator.PubMed]: PubMedForm,
+  [Operator.ArXiv]: ArXivForm,
+  [Operator.Google]: GoogleForm,
+  [Operator.Bing]: BingForm,
+  [Operator.GoogleScholar]: GoogleScholarForm,
+  [Operator.DeepL]: DeepLForm,
+  [Operator.GitHub]: GithubForm,
+  [Operator.ExeSQL]: ExeSQLForm,
+  [Operator.AkShare]: AkShareForm,
+  [Operator.YahooFinance]: YahooFinanceForm,
+  [Operator.Crawler]: CrawlerForm,
+  [Operator.Email]: EmailForm,
+};

web/src/pages/agent/form/tool-form/index.tsx

@@ -1,7 +1,20 @@
-import { INextOperatorForm } from '../../interface';
+import useGraphStore from '../../store';
+import { ToolFormConfigMap } from './constant';
 
-const ToolForm = ({ node }: INextOperatorForm) => {
-  return <section>xxx</section>;
+const EmptyContent = () => <div></div>;
+
+const ToolForm = () => {
+  const clickedToolId = useGraphStore((state) => state.clickedToolId);
+
+  const ToolForm =
+    ToolFormConfigMap[clickedToolId as keyof typeof ToolFormConfigMap] ??
+    EmptyContent;
+
+  return (
+    <section>
+      <ToolForm key={clickedToolId}></ToolForm>
+    </section>
+  );
 };
 
 export default ToolForm;