Fix: The dataset on the search page is not displaying the required field error message. (#14041)

### What problem does this PR solve?

Fix: The dataset on the search page is not displaying the required field
error message.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/knowledge-base-item.tsx

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { RAGFlowAvatar } from './ragflow-avatar';
-import { FormControl, FormField, FormItem, FormLabel } from './ui/form';
+import { RAGFlowFormItem } from './ragflow-form';
 import { MultiSelect } from './ui/multi-select';
 
 function buildQueryVariableOptionsByShowVariable(showVariable?: boolean) {
@@ -74,7 +74,6 @@ export function KnowledgeBaseFormField({
   name?: string;
   required?: boolean;
 }) {
-  const form = useFormContext();
   const { t } = useTranslation();
 
   const { datasetOptions } = useDisableDifferenceEmbeddingDataset(name);
@@ -113,31 +112,27 @@ export function KnowledgeBaseFormField({
   }, [knowledgeOptions, nextOptions, showVariable, t]);
 
   return (
-    <FormField
-      control={form.control}
+    <RAGFlowFormItem
       name={name}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('chat.knowledgeBasesTip')} required={required}>
-            {t('chat.knowledgeBases')}
-          </FormLabel>
-          <FormControl>
-            <MultiSelect
-              data-testid="chat-datasets-combobox"
-              options={options}
-              onValueChange={field.onChange}
-              placeholder={t('chat.knowledgeBasesPlaceholder')}
-              variant="inverted"
-              maxCount={100}
-              defaultValue={field.value}
-              showSelectAll={false}
-              popoverTestId="datasets-options"
-              optionTestIdPrefix="datasets"
-              {...field}
-            />
-          </FormControl>
-        </FormItem>
+      tooltip={t('chat.knowledgeBasesTip')}
+      required={required}
+      label={t('chat.knowledgeBases')}
+    >
+      {(field) => (
+        <MultiSelect
+          data-testid="chat-datasets-combobox"
+          options={options}
+          onValueChange={field.onChange}
+          placeholder={t('chat.knowledgeBasesPlaceholder')}
+          variant="inverted"
+          maxCount={100}
+          defaultValue={field.value}
+          showSelectAll={false}
+          popoverTestId="datasets-options"
+          optionTestIdPrefix="datasets"
+          {...field}
+        />
       )}
-    />
+    </RAGFlowFormItem>
   );
 }