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/components/originui/select-with-search.tsx

@@ -31,7 +31,7 @@ import { RAGFlowSelectOptionType } from '../ui/select';
 export type SelectWithSearchFlagOptionType = {
   label: string;
   value?: string;
-  options: RAGFlowSelectOptionType[];
+  options?: RAGFlowSelectOptionType[];
 };
 
 export type SelectWithSearchFlagProps = {
@@ -64,7 +64,9 @@ export const SelectWithSearch = forwardRef<
   const selectLabel = useMemo(() => {
     const optionTemp = options[0];
     if (optionTemp?.options) {
-      return optionTemp.options.find((opt) => opt.value === value)?.label || '';
+      return options
+        .map((group) => group?.options?.find((item) => item.value === value))
+        .filter(Boolean)[0]?.label;
     } else {
       return options.find((opt) => opt.value === value)?.label || '';
     }

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -98,7 +98,7 @@ function AccordionOperators() {
         <AccordionTrigger className="text-xl">Tools</AccordionTrigger>
         <AccordionContent className="flex flex-col gap-4 text-balance">
           <OperatorItemList
-            operators={[Operator.TavilySearch]}
+            operators={[Operator.TavilySearch, Operator.Crawler]}
           ></OperatorItemList>
         </AccordionContent>
       </AccordionItem>

web/src/pages/agent/constant.tsx

@@ -622,7 +622,7 @@ export const initialNoteValues = {
 
 export const initialCrawlerValues = {
   extract_type: 'markdown',
-  ...initialQueryBaseValues,
+  query: '',
 };
 
 export const initialInvokeValues = {

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;

web/src/pages/agent/hooks/use-watch-form-change.ts

@@ -2,14 +2,14 @@ import { useEffect } from 'react';
 import { UseFormReturn, useWatch } from 'react-hook-form';
 import useGraphStore from '../store';
 
-export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+export function useWatchFormChange(id?: string, form?: UseFormReturn<any>) {
   let values = useWatch({ control: form?.control });
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
 
   useEffect(() => {
     // Manually triggered form updates are synchronized to the canvas
-    if (id && form?.formState.isDirty) {
-      values = form?.getValues();
+    if (id) {
+      values = form?.getValues() || {};
       let nextValues: any = values;
 
       updateNodeForm(id, nextValues);