Feat: Render WikipediaForm and BaiduForm with shadcn-ui. #3221 (#5564)

### What problem does this PR solve?

Feat: Render WikipediaForm and BaiduForm with shadcn-ui. #3221

### Type of change


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

web/src/components/top-n-item.tsx

@@ -50,7 +50,7 @@ export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
       name={'top_n'}
       render={({ field }) => (
         <FormItem>
-          <FormLabel>{t('topN')}</FormLabel>
+          <FormLabel tooltip={t('topNTip')}>{t('topN')}</FormLabel>
           <FormControl>
             <SingleFormSlider {...field} max={max}></SingleFormSlider>
           </FormControl>

web/src/pages/agent/form-sheet/use-form-config-map.tsx

@@ -125,23 +125,36 @@ export function useFormConfigMap() {
     },
     [Operator.Baidu]: {
       component: BaiduForm,
-      defaultValues: {},
-      schema: z.object({}),
+      defaultValues: { top_n: 10 },
+      schema: z.object({ top_n: z.number() }),
     },
     [Operator.DuckDuckGo]: {
       component: DuckDuckGoForm,
-      defaultValues: {},
-      schema: z.object({}),
+      defaultValues: {
+        top_n: 10,
+        channel: 'text',
+      },
+      schema: z.object({
+        top_n: z.number(),
+      }),
     },
     [Operator.KeywordExtract]: {
       component: KeywordExtractForm,
-      defaultValues: {},
-      schema: z.object({}),
+      defaultValues: { top_n: 3 },
+      schema: z.object({
+        llm_id: z.string(),
+        top_n: z.number(),
+      }),
     },
     [Operator.Wikipedia]: {
       component: WikipediaForm,
-      defaultValues: {},
-      schema: z.object({}),
+      defaultValues: {
+        top_n: 10,
+      },
+      schema: z.object({
+        language: z.string(),
+        top_n: z.number(),
+      }),
     },
     [Operator.PubMed]: {
       component: PubMedForm,
@@ -206,13 +219,22 @@ export function useFormConfigMap() {
     },
     [Operator.WenCai]: {
       component: WenCaiForm,
-      defaultValues: {},
-      schema: z.object({}),
+      defaultValues: {
+        top_n: 20,
+      },
+      schema: z.object({
+        top_n: z.number(),
+        query_type: z.string(),
+      }),
     },
     [Operator.AkShare]: {
       component: AkShareForm,
-      defaultValues: {},
-      schema: z.object({}),
+      defaultValues: {
+        top_n: 10,
+      },
+      schema: z.object({
+        top_n: z.number(),
+      }),
     },
     [Operator.YahooFinance]: {
       component: YahooFinanceForm,

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

@@ -1,19 +1,20 @@
-import TopNItem from '@/components/top-n-item';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { TopNFormField } from '@/components/top-n-item';
+import { Form } from '@/components/ui/form';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
-const AkShareForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+const AkShareForm = ({ form, node }: INextOperatorForm) => {
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10} max={99}></TopNItem>
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField max={99}></TopNFormField>
+      </form>
     </Form>
   );
 };

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

@@ -1,19 +1,20 @@
-import TopNItem from '@/components/top-n-item';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { TopNFormField } from '@/components/top-n-item';
+import { Form } from '@/components/ui/form';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
-const BaiduForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+const BaiduForm = ({ form, node }: INextOperatorForm) => {
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField></TopNFormField>
+      </form>
     </Form>
   );
 };

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

@@ -1,12 +1,20 @@
-import TopNItem from '@/components/top-n-item';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
 import { useMemo } from 'react';
 import { Channel } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
-const DuckDuckGoForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+const DuckDuckGoForm = ({ form, node }: INextOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const options = useMemo(() => {
@@ -14,23 +22,29 @@ const DuckDuckGoForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   }, [t]);
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item
-        label={t('channel')}
-        name={'channel'}
-        tooltip={t('channelTip')}
-        initialValue={'text'}
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
       >
-        <Select options={options}></Select>
-      </Form.Item>
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField></TopNFormField>
+        <FormField
+          control={form.control}
+          name="channel"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('channelTip')}>{t('channel')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect {...field} options={options} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
     </Form>
   );
 };

web/src/pages/agent/form/keyword-extract-form/index.tsx

@@ -1,30 +1,46 @@
-import LLMSelect from '@/components/llm-select';
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { NextLLMSelect } from '@/components/llm-select';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslation } from 'react-i18next';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
-const KeywordExtractForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
+const KeywordExtractForm = ({ form, node }: INextOperatorForm) => {
+  const { t } = useTranslation();
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
       >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <TopNItem initialValue={3}></TopNItem>
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <FormField
+          control={form.control}
+          name="llm_id"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.modelTip')}>
+                {t('chat.model')}
+              </FormLabel>
+              <FormControl>
+                <NextLLMSelect {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <TopNFormField></TopNFormField>
+      </form>
     </Form>
   );
 };

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

@@ -1,34 +1,53 @@
-import TopNItem from '@/components/top-n-item';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { WenCaiQueryTypeOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
-const WenCaiForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
+const WenCaiForm = ({ form, node }: INextOperatorForm) => {
+  const { t } = useTranslation();
 
   const wenCaiQueryTypeOptions = useMemo(() => {
     return WenCaiQueryTypeOptions.map((x) => ({
       value: x,
-      label: t(`wenCaiQueryTypeOptions.${x}`),
+      label: t(`flow.wenCaiQueryTypeOptions.${x}`),
     }));
   }, [t]);
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={20} max={99}></TopNItem>
-      <Form.Item label={t('queryType')} name={'query_type'}>
-        <Select options={wenCaiQueryTypeOptions}></Select>
-      </Form.Item>
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField max={99}></TopNFormField>
+        <FormField
+          control={form.control}
+          name="query_type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('flow.queryType')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect {...field} options={wenCaiQueryTypeOptions} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
     </Form>
   );
 };

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

@@ -1,26 +1,46 @@
-import TopNItem from '@/components/top-n-item';
+import { TopNFormField } from '@/components/top-n-item';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
 import { LanguageOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { INextOperatorForm } from '../../interface';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
-const WikipediaForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+const WikipediaForm = ({ form, node }: INextOperatorForm) => {
   const { t } = useTranslate('common');
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <TopNItem initialValue={10}></TopNItem>
-      <Form.Item label={t('language')} name={'language'}>
-        <Select options={LanguageOptions}></Select>
-      </Form.Item>
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DynamicInputVariable node={node}></DynamicInputVariable>
+        <TopNFormField></TopNFormField>
+
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('language')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect {...field} options={LanguageOptions} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
     </Form>
   );
 };