Feat: Add CrawlerForm component #3221 (#8857)

### What problem does this PR solve?

Feat: Add CrawlerForm component #3221

### Type of change


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

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

@@ -1,38 +1,84 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Input, Select } from 'antd';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useMemo } from 'react';
-import { IOperatorForm } from '../../interface';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { initialCrawlerValues } from '../../constant';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
 import { CrawlerResultOptions } from '../../options';
-import DynamicInputVariable from '../components/dynamic-input-variable';
-const CrawlerForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+import { QueryVariable } from '../components/query-variable';
+
+const FormSchema = z.object({
+  query: z.string().optional(),
+  proxy: z.string().url(),
+  extract_type: z.string(),
+});
+function CrawlerForm({ node }: INextOperatorForm) {
   const { t } = useTranslate('flow');
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: initialCrawlerValues,
+    mode: 'onChange',
+  });
+
+  useWatchFormChange(node?.id, form);
+
   const crawlerResultOptions = useMemo(() => {
     return CrawlerResultOptions.map((x) => ({
       value: x,
       label: t(`crawlerResultOptions.${x}`),
     }));
   }, [t]);
+
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('proxy')} name={'proxy'}>
-        <Input placeholder="like: http://127.0.0.1:8888"></Input>
-      </Form.Item>
-      <Form.Item
-        label={t('extractType')}
-        name={'extract_type'}
-        initialValue="markdown"
+    <Form {...form}>
+      <form
+        className="space-y-6 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
       >
-        <Select options={crawlerResultOptions}></Select>
-      </Form.Item>
+        <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>
+          )}
+        />
+      </form>
     </Form>
   );
-};
+}
 
 export default CrawlerForm;