Feat: Render RewriteQuestionForm with shadcn-ui #3221 (#5551)

### What problem does this PR solve?

Feat: Render RewriteQuestionForm with shadcn-ui #3221
### Type of change


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

web/src/components/message-history-window-size-item.tsx

@@ -41,7 +41,9 @@ export function MessageHistoryWindowSizeFormField() {
       name={'message_history_window_size'}
       render={({ field }) => (
         <FormItem>
-          <FormLabel>{t('flow.messageHistoryWindowSize')}</FormLabel>
+          <FormLabel tooltip={t('flow.messageHistoryWindowSizeTip')}>
+            {t('flow.messageHistoryWindowSize')}
+          </FormLabel>
           <FormControl>
             <Input {...field} type={'number'}></Input>
           </FormControl>

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

@@ -114,8 +114,14 @@ export function useFormConfigMap() {
     },
     [Operator.RewriteQuestion]: {
       component: RewriteQuestionForm,
-      defaultValues: {},
+      defaultValues: {
-      schema: z.object({}),
+        message_history_window_size: 6,
+      },
+      schema: z.object({
+        llm_id: z.string(),
+        message_history_window_size: z.number(),
+        language: z.string(),
+      }),
     },
     [Operator.Baidu]: {
       component: BaiduForm,

web/src/pages/agent/form/rewrite-question-form/index.tsx

@@ -1,39 +1,66 @@
-import LLMSelect from '@/components/llm-select';
+import { NextLLMSelect } from '@/components/llm-select';
-import MessageHistoryWindowSizeItem from '@/components/message-history-window-size-item';
+import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
-import { useTranslate } from '@/hooks/common-hooks';
+import {
-import { Form, Select } from 'antd';
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { useTranslation } from 'react-i18next';
 import { GoogleLanguageOptions } from '../../constant';
-import { IOperatorForm } from '../../interface';
+import { INextOperatorForm } from '../../interface';
 
-const RewriteQuestionForm = ({ onValuesChange, form }: IOperatorForm) => {
+const RewriteQuestionForm = ({ form }: INextOperatorForm) => {
-  const { t } = useTranslate('chat');
+  const { t } = useTranslation();
 
   return (
-    <Form
+    <Form {...form}>
-      name="basic"
+      <form
-      labelCol={{ span: 8 }}
+        className="space-y-6"
-      wrapperCol={{ span: 16 }}
+        onSubmit={(e) => {
-      onValuesChange={onValuesChange}
+          e.preventDefault();
-      autoComplete="off"
+        }}
-      form={form}
-    >
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
       >
-        <LLMSelect></LLMSelect>
+        <FormField
-      </Form.Item>
+          control={form.control}
-      <Form.Item
+          name="llm_id"
-        label={t('language')}
+          render={({ field }) => (
-        name={'language'}
+            <FormItem>
-        tooltip={t('languageTip')}
+              <FormLabel tooltip={t('chat.modelTip')}>
-      >
+                {t('chat.model')}
-        <Select options={GoogleLanguageOptions} allowClear={true}></Select>
+              </FormLabel>
-      </Form.Item>
+              <FormControl>
-      <MessageHistoryWindowSizeItem
+                <NextLLMSelect {...field} />
-        initialValue={6}
+              </FormControl>
-      ></MessageHistoryWindowSizeItem>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel tooltip={t('chat.languageTip')}>
+                {t('chat.language')}
+              </FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  options={GoogleLanguageOptions}
+                  allowClear={true}
+                  {...field}
+                ></RAGFlowSelect>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
+      </form>
     </Form>
   );
 };