Feat: Add sql form #3221 (#8874)

### What problem does this PR solve?

Feat: Add sql form #3221

### Type of change


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

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

@@ -5,7 +5,6 @@ import BingForm from '../bing-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';
@@ -13,6 +12,7 @@ import PubMedForm from '../pubmed-form';
 import WikipediaForm from '../wikipedia-form';
 import YahooFinanceForm from '../yahoo-finance-form';
 import CrawlerForm from './crawler-form';
+import ExeSQLForm from './exesql-form';
 import RetrievalForm from './retrieval-form';
 import TavilyForm from './tavily-form';
 

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

@@ -2,6 +2,7 @@ import { Form } from '@/components/ui/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import { FormWrapper } from '../../components/form-wrapper';
 import {
   CrawlerExtractTypeFormField,
   CrawlerFormSchema,
@@ -27,15 +28,10 @@ const CrawlerForm = () => {
 
   return (
     <Form {...form}>
-      <form
-        className="space-y-6 p-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-        }}
-      >
+      <FormWrapper>
         <CrawlerProxyFormField></CrawlerProxyFormField>
         <CrawlerExtractTypeFormField></CrawlerExtractTypeFormField>
-      </form>
+      </FormWrapper>
     </Form>
   );
 };

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

@@ -0,0 +1,39 @@
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { FormWrapper } from '../../components/form-wrapper';
+import { ExeSQLFormWidgets } from '../../exesql-form';
+import {
+  ExeSQLFormSchema,
+  useSubmitForm,
+} from '../../exesql-form/use-submit-form';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+const FormSchema = z.object(ExeSQLFormSchema);
+
+type FormType = z.infer<typeof FormSchema>;
+
+const ExeSQLForm = () => {
+  const { onSubmit, loading } = useSubmitForm();
+
+  const defaultValues = useValues();
+
+  const form = useForm<FormType>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: defaultValues as FormType,
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper onSubmit={form.handleSubmit(onSubmit)}>
+        <ExeSQLFormWidgets loading={loading}></ExeSQLFormWidgets>
+      </FormWrapper>
+    </Form>
+  );
+};
+
+export default ExeSQLForm;

web/src/pages/agent/form/tool-form/use-values.ts

@@ -1,6 +1,7 @@
 import { isEmpty } from 'lodash';
 import { useMemo } from 'react';
-import { DefaultAgentToolValuesMap } from '../../constant';
+import { Operator } from '../../constant';
+import { useAgentToolInitialValues } from '../../hooks/use-agent-tool-initial-values';
 import useGraphStore from '../../store';
 import { getAgentNodeTools } from '../../utils';
 
@@ -18,6 +19,7 @@ export function useValues() {
   const { clickedToolId, clickedNodeId, findUpstreamNodeById } = useGraphStore(
     (state) => state,
   );
+  const { initializeAgentToolValues } = useAgentToolInitialValues();
 
   const values = useMemo(() => {
     const agentNode = findUpstreamNodeById(clickedNodeId);
@@ -28,10 +30,9 @@ export function useValues() {
     )?.params;
 
     if (isEmpty(formData)) {
-      const defaultValues =
-        DefaultAgentToolValuesMap[
-          clickedToolId as keyof typeof DefaultAgentToolValuesMap
-        ];
+      const defaultValues = initializeAgentToolValues(
+        clickedNodeId as Operator,
+      );
 
       return defaultValues;
     }
@@ -39,7 +40,12 @@ export function useValues() {
     return {
       ...formData,
     };
-  }, [clickedNodeId, clickedToolId, findUpstreamNodeById]);
+  }, [
+    clickedNodeId,
+    clickedToolId,
+    findUpstreamNodeById,
+    initializeAgentToolValues,
+  ]);
 
   return values;
 }