Feat: Add agent tool CrawlerForm #3221 (#8859)

### What problem does this PR solve?

Feat: Add agent tool CrawlerForm #3221

### Type of change


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

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

 import { Input } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useMemo } from 'react';
-import { useForm } from 'react-hook-form';
+import { memo, useMemo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 import { initialCrawlerValues } from '../../constant';
 import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { CrawlerResultOptions } from '../../options';
 import { QueryVariable } from '../components/query-variable';
 
-const FormSchema = z.object({
-  query: z.string().optional(),
+export function CrawlerProxyFormField() {
+  const { t } = useTranslate('flow');
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name="proxy"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('proxy')}</FormLabel>
+          <FormControl>
+            <Input placeholder="like: http://127.0.0.1:8888" {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function CrawlerExtractTypeFormField() {
+  const { t } = useTranslate('flow');
+  const form = useFormContext();
+  const crawlerResultOptions = useMemo(() => {
+    return CrawlerResultOptions.map((x) => ({
+      value: x,
+      label: t(`crawlerResultOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <FormField
+      control={form.control}
+      name="extract_type"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('extractType')}</FormLabel>
+          <FormControl>
+            <SelectWithSearch {...field} options={crawlerResultOptions} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export const CrawlerFormSchema = {
   proxy: z.string().url(),
   extract_type: z.string(),
+};
+
+const FormSchema = z.object({
+  query: z.string().optional(),
+  ...CrawlerFormSchema,
 });
+
 function CrawlerForm({ node }: INextOperatorForm) {
-  const { t } = useTranslate('flow');
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: initialCrawlerValues,
 
   useWatchFormChange(node?.id, form);
 
-  const crawlerResultOptions = useMemo(() => {
-    return CrawlerResultOptions.map((x) => ({
-      value: x,
-      label: t(`crawlerResultOptions.${x}`),
-    }));
-  }, [t]);
-
   return (
     <Form {...form}>
       <form
         }}
       >
         <QueryVariable></QueryVariable>
-        <FormField
-          control={form.control}
-          name="proxy"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('proxy')}</FormLabel>
-              <FormControl>
-                <Input placeholder="like: http://127.0.0.1:8888" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="extract_type"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('extractType')}</FormLabel>
-              <FormControl>
-                <SelectWithSearch {...field} options={crawlerResultOptions} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        <CrawlerProxyFormField></CrawlerProxyFormField>
+        <CrawlerExtractTypeFormField></CrawlerExtractTypeFormField>
       </form>
     </Form>
   );
 }
 
-export default CrawlerForm;
+export default memo(CrawlerForm);

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

 import AkShareForm from '../akshare-form';
 import ArXivForm from '../arxiv-form';
 import BingForm from '../bing-form';
-import CrawlerForm from '../crawler-form';
 import DeepLForm from '../deepl-form';
 import DuckDuckGoForm from '../duckduckgo-form';
 import EmailForm from '../email-form';
 import PubMedForm from '../pubmed-form';
 import WikipediaForm from '../wikipedia-form';
 import YahooFinanceForm from '../yahoo-finance-form';
+import CrawlerForm from './crawler-form';
 import RetrievalForm from './retrieval-form';
 import TavilyForm from './tavily-form';
 

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

+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  CrawlerExtractTypeFormField,
+  CrawlerFormSchema,
+  CrawlerProxyFormField,
+} from '../../crawler-form';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+export const FormSchema = z.object({
+  ...CrawlerFormSchema,
+});
+
+const CrawlerForm = () => {
+  const defaultValues = useValues();
+
+  const form = useForm({
+    defaultValues: defaultValues,
+    resolver: zodResolver(FormSchema),
+    mode: 'onChange',
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <CrawlerProxyFormField></CrawlerProxyFormField>
+        <CrawlerExtractTypeFormField></CrawlerExtractTypeFormField>
+      </form>
+    </Form>
+  );
+};
+
+export default CrawlerForm;