fix: fetch all knowledge bases via pagination in link-to-dataset dialog (#17170)

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

@@ -28,10 +28,12 @@ export function useDisableDifferenceEmbeddingDataset(name: string) {
   const datasetId = useWatch({ name, control: form.control });
   const [searchString, setSearchString] = useState('');
   const debouncedSearchString = useDebounce(searchString, { wait: 500 });
-  const { list: datasetListOrigin, loading } = useFetchKnowledgeList(
-    true,
-    debouncedSearchString,
-  );
+  const {
+    list: datasetListOrigin,
+    loading,
+    handleScroll,
+    hasNextPage,
+  } = useFetchKnowledgeList(true, debouncedSearchString);
   const datasetCacheRef = useRef(new Map<string, IDataset>());
 
   const datasetList = useMemo(() => {
@@ -96,6 +98,8 @@ export function useDisableDifferenceEmbeddingDataset(name: string) {
     handleSearchChange,
     loading,
     searchString,
+    handleScroll,
+    hasNextPage,
   };
 }
 
@@ -110,8 +114,14 @@ export function KnowledgeBaseFormField({
 }) {
   const { t } = useTranslation();
 
-  const { datasetOptions, handleSearchChange, loading, searchString } =
-    useDisableDifferenceEmbeddingDataset(name);
+  const {
+    datasetOptions,
+    handleSearchChange,
+    loading,
+    searchString,
+    handleScroll,
+    hasNextPage,
+  } = useDisableDifferenceEmbeddingDataset(name);
 
   const nextOptions = buildQueryVariableOptionsByShowVariable(showVariable)();
 
@@ -178,6 +188,7 @@ export function KnowledgeBaseFormField({
           onSearchChange={handleSearchChange}
           isSearching={loading}
           shouldFilter={false}
+          onListScroll={hasNextPage ? handleScroll : undefined}
           {...field}
         />
       )}

web/src/components/ui/multi-select.tsx

@@ -192,6 +192,7 @@ interface MultiSelectProps
   onSearchChange?: (value: string) => void;
   isSearching?: boolean;
   shouldFilter?: boolean;
+  onListScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
 }
 
 export const MultiSelect = React.forwardRef<
@@ -217,6 +218,7 @@ export const MultiSelect = React.forwardRef<
       onSearchChange,
       isSearching = false,
       shouldFilter,
+      onListScroll,
       ...props
     },
     ref,
@@ -451,7 +453,7 @@ export const MultiSelect = React.forwardRef<
                 onValueChange={onSearchChange}
               />
             )}
-            <CommandList className="mt-2">
+            <CommandList className="mt-2" onScroll={onListScroll}>
               <CommandEmpty>
                 {isSearching ? t('common.searching') : t('common.noDataFound')}
               </CommandEmpty>