diff --git a/web/src/components/knowledge-base-item.tsx b/web/src/components/knowledge-base-item.tsx
index 90faf38f3c..8248662311 100644
--- a/web/src/components/knowledge-base-item.tsx
+++ b/web/src/components/knowledge-base-item.tsx
@@ -3,25 +3,36 @@ import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
 import { IKnowledge } from '@/interfaces/database/knowledge';
 import { useBuildQueryVariableOptions } from '@/pages/agent/hooks/use-get-begin-query';
 import { toLower } from 'lodash';
-import { useEffect, useMemo, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+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 { MultiSelect, MultiSelectOptionType } from './ui/multi-select';
+import { MultiSelect } from './ui/multi-select';
 
 function buildQueryVariableOptionsByShowVariable(showVariable?: boolean) {
   return showVariable ? useBuildQueryVariableOptions : () => [];
 }
 
-export function useDisableDifferenceEmbeddingDataset() {
-  const [datasetOptions, setDatasetOptions] = useState<MultiSelectOptionType[]>(
-    [],
+function DatasetLabel({ text }: { text: string }) {
+  return (
+    <div className="text-xs px-3 p-1 bg-bg-card text-text-secondary rounded-lg border border-bg-card">
+      {text}
+    </div>
   );
-  const [datasetSelectEmbedId, setDatasetSelectEmbedId] = useState('');
-  const { list: datasetListOrigin } = useFetchKnowledgeList(true);
+}
 
-  useEffect(() => {
+export function useDisableDifferenceEmbeddingDataset(name: string) {
+  const { list: datasetListOrigin } = useFetchKnowledgeList(true);
+  const form = useFormContext();
+  const datasetId = useWatch({ name, control: form.control });
+
+  const selectedEmbedId = useMemo(() => {
+    const data = datasetListOrigin?.find((item) => item.id === datasetId?.[0]);
+    return data?.embedding_model ?? '';
+  }, [datasetId, datasetListOrigin]);
+
+  const nextOptions = useMemo(() => {
     const datasetListMap = datasetListOrigin
       .filter((x) => x.chunk_method !== DocumentParserType.Tag)
       .map((item: IKnowledge) => {
@@ -35,48 +46,38 @@ export function useDisableDifferenceEmbeddingDataset() {
             />
           ),
           suffix: (
-            <div className="text-xs px-4 p-1 bg-bg-card text-text-secondary rounded-lg border border-bg-card">
-              {item.embedding_model}
-            </div>
+            <section className="flex gap-2">
+              <DatasetLabel text={item.nickname} />
+              <DatasetLabel text={item.embedding_model} />
+            </section>
           ),
           value: item.id,
           disabled:
-            item.embedding_model !== datasetSelectEmbedId &&
-            datasetSelectEmbedId !== '',
+            item.embedding_model !== selectedEmbedId && selectedEmbedId !== '',
         };
       });
-    setDatasetOptions(datasetListMap);
-  }, [datasetListOrigin, datasetSelectEmbedId]);
 
-  const handleDatasetSelectChange = (
-    value: string[],
-    onChange: (value: string[]) => void,
-  ) => {
-    if (value.length) {
-      const data = datasetListOrigin?.find((item) => item.id === value[0]);
-      setDatasetSelectEmbedId(data?.embedding_model ?? '');
-    } else {
-      setDatasetSelectEmbedId('');
-    }
-    onChange?.(value);
-  };
+    return datasetListMap;
+  }, [datasetListOrigin, selectedEmbedId]);
 
   return {
-    datasetOptions,
-    handleDatasetSelectChange,
+    datasetOptions: nextOptions,
   };
 }
 
 export function KnowledgeBaseFormField({
   showVariable = false,
+  name = 'kb_ids',
+  required = false,
 }: {
   showVariable?: boolean;
+  name: string;
+  required?: boolean;
 }) {
   const form = useFormContext();
   const { t } = useTranslation();
 
-  const { datasetOptions, handleDatasetSelectChange } =
-    useDisableDifferenceEmbeddingDataset();
+  const { datasetOptions } = useDisableDifferenceEmbeddingDataset(name);
 
   const nextOptions = buildQueryVariableOptionsByShowVariable(showVariable)();
 
@@ -114,19 +115,17 @@ export function KnowledgeBaseFormField({
   return (
     <FormField
       control={form.control}
-      name="kb_ids"
+      name={name}
       render={({ field }) => (
         <FormItem>
-          <FormLabel tooltip={t('chat.knowledgeBasesTip')}>
+          <FormLabel tooltip={t('chat.knowledgeBasesTip')} required={required}>
             {t('chat.knowledgeBases')}
           </FormLabel>
           <FormControl>
             <MultiSelect
               data-testid="chat-datasets-combobox"
               options={options}
-              onValueChange={(value) => {
-                handleDatasetSelectChange(value, field.onChange);
-              }}
+              onValueChange={field.onChange}
               placeholder={t('chat.knowledgeBasesPlaceholder')}
               variant="inverted"
               maxCount={100}
diff --git a/web/src/pages/next-search/search-setting.tsx b/web/src/pages/next-search/search-setting.tsx
index eb5acb6d24..75fedb6261 100644
--- a/web/src/pages/next-search/search-setting.tsx
+++ b/web/src/pages/next-search/search-setting.tsx
@@ -1,6 +1,7 @@
 // src/pages/next-search/search-setting.tsx
 
 import { AvatarUpload } from '@/components/avatar-upload';
+import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
 import {
   LlmSettingFieldItems,
   LlmSettingSchema,
@@ -21,21 +22,15 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import {
-  MultiSelect,
-  MultiSelectOptionType,
-} from '@/components/ui/multi-select';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { Spin } from '@/components/ui/spin';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
-import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
 import {
   useComposeLlmOptionsByModelTypes,
   useSelectLlmOptionsByModelType,
 } from '@/hooks/use-llm-request';
 import { useFetchTenantInfo } from '@/hooks/use-user-setting-request';
-import { IKnowledge } from '@/interfaces/database/knowledge';
 import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { X } from 'lucide-react';
@@ -115,8 +110,6 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
     resolver: zodResolver(SearchSettingFormSchema),
   });
 
-  const [datasetList, setDatasetList] = useState<MultiSelectOptionType[]>([]);
-  const [datasetSelectEmbdId, setDatasetSelectEmbdId] = useState('');
   const { t } = useTranslation();
   const descriptionDefaultValue = t('search.descriptionValue');
   const resetForm = useCallback(() => {
@@ -178,40 +171,6 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
     }
   }, [open]);
 
-  const { list: datasetListOrigin } = useFetchKnowledgeList();
-
-  useEffect(() => {
-    const datasetListMap = datasetListOrigin.map((item: IKnowledge) => {
-      return {
-        label: item.name,
-        suffix: (
-          <div className="text-xs px-4 p-1 bg-bg-card text-text-secondary rounded-lg border border-bg-card">
-            {item.embd_id}
-          </div>
-        ),
-        value: item.id,
-        disabled:
-          item.embd_id !== datasetSelectEmbdId && datasetSelectEmbdId !== '',
-      };
-    });
-    setDatasetList(datasetListMap);
-  }, [datasetListOrigin, datasetSelectEmbdId]);
-
-  const handleDatasetSelectChange = (
-    value: string[],
-    onChange: (value: string[]) => void,
-  ) => {
-    console.log(value);
-    if (value.length) {
-      const data = datasetListOrigin?.find((item) => item.id === value[0]);
-      setDatasetSelectEmbdId(data?.embd_id ?? '');
-    } else {
-      setDatasetSelectEmbdId('');
-    }
-    formMethods.setValue('search_config.kb_ids', value);
-    onChange?.(value);
-  };
-
   const allOptions = useSelectLlmOptionsByModelType();
   const rerankModelOptions = useMemo(() => {
     return allOptions[LlmModelType.Rerank];
@@ -378,37 +337,10 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                 </FormItem>
               )}
             />
-            {/* Datasets */}
-            <FormField
-              control={formMethods.control}
+            <KnowledgeBaseFormField
               name="search_config.kb_ids"
-              rules={{ required: 'Datasets is required' }}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    <span className="text-destructive mr-1"> *</span>
-                    {t('search.datasets')}
-                  </FormLabel>
-                  <FormControl className="bg-bg-input">
-                    <MultiSelect
-                      data-testid="search-datasets-combobox"
-                      options={datasetList}
-                      onValueChange={(value) => {
-                        handleDatasetSelectChange(value, field.onChange);
-                      }}
-                      showSelectAll={false}
-                      placeholder={t('chat.knowledgeBasesMessage')}
-                      maxCount={10}
-                      defaultValue={field.value}
-                      popoverTestId="datasets-options"
-                      optionTestIdPrefix="datasets"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+              required
+            ></KnowledgeBaseFormField>
             <MetadataFilter prefix="search_config."></MetadataFilter>
             <SimilaritySliderFormField
               isTooltipShown