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

web/src/pages/agent/canvas/node/retrieval-node.tsx

@@ -1,6 +1,6 @@
 import { NodeCollapsible } from '@/components/collapse';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
-import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
+import { useFetchAllKnowledgeList } from '@/hooks/use-knowledge-request';
 import { useFetchAllMemoryList } from '@/hooks/use-memory-request';
 import { BaseNode } from '@/interfaces/database/agent';
 import { NodeProps, Position } from '@xyflow/react';
@@ -25,7 +25,7 @@ function InnerRetrievalNode({
 }: NodeProps<BaseNode<RetrievalFormSchemaType>>) {
   const knowledgeBaseIds: string[] = get(data, 'form.dataset_ids', []);
   const memoryIds: string[] = get(data, 'form.memory_ids', []);
-  const { list: knowledgeList } = useFetchKnowledgeList(true);
+  const { list: knowledgeList } = useFetchAllKnowledgeList(true);
 
   const { getLabel } = useGetVariableLabelOrTypeByValue({ nodeId: id });
 

web/src/pages/dataset/dataset-setting/components/tag-item.tsx

@@ -10,7 +10,9 @@ import {
 import { MultiSelect } from '@/components/ui/multi-select';
 import { FormLayout } from '@/constants/form';
 import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
+import { useDebounce } from 'ahooks';
 import DOMPurify from 'dompurify';
+import { useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +20,15 @@ export const TagSetItem = () => {
   const { t } = useTranslation();
   const form = useFormContext();
 
-  const { list: knowledgeList } = useFetchKnowledgeList(true);
+  const [searchString, setSearchString] = useState('');
+  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
+
+  const {
+    list: knowledgeList,
+    handleScroll,
+    hasNextPage,
+    loading,
+  } = useFetchKnowledgeList(true, debouncedSearchString);
 
   const knowledgeOptions = knowledgeList
     .filter((x) => x.chunk_method === 'tag')
@@ -60,6 +70,11 @@ export const TagSetItem = () => {
                 <MultiSelect
                   options={knowledgeOptions}
                   onValueChange={field.onChange}
+                  searchValue={searchString}
+                  onSearchChange={setSearchString}
+                  isSearching={loading}
+                  shouldFilter={false}
+                  onListScroll={hasNextPage ? handleScroll : undefined}
                   // placeholder={t('chat.knowledgeBasesMessage')}
                   variant="inverted"
                   maxCount={10}

web/src/pages/datasets/use-select-owners.ts

@@ -1,10 +1,10 @@
 import { FilterCollection } from '@/components/list-filter-bar/interface';
-import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
+import { useFetchAllKnowledgeList } from '@/hooks/use-knowledge-request';
 import { buildOwnersFilter } from '@/utils/list-filter-util';
 import { useTranslation } from 'react-i18next';
 
 export function useSelectOwners() {
-  const { list } = useFetchKnowledgeList();
+  const { list } = useFetchAllKnowledgeList();
   const { t } = useTranslation();
 
   const filters: FilterCollection[] = [

web/src/pages/files/hooks.ts

@@ -86,7 +86,7 @@ export const useHandleConnectToKnowledge = () => {
   const [record, setRecord] = useState<IFile>({} as IFile);
   const [documentIds, setDocumentIds] = useState<string[]>([]);
   const [mode, setMode] = useState<ConnectFileToKnowledgeMode>('replace');
-  const knowledgeOptions = useSelectKnowledgeOptions();
+  const { options: knowledgeOptions } = useSelectKnowledgeOptions();
 
   const initialValue = useMemo(() => {
     return Array.isArray(record?.kbs_info)

web/src/pages/files/link-to-dataset-dialog.tsx

@@ -15,10 +15,12 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { MultiSelect } from '@/components/ui/multi-select';
-import { useSelectKnowledgeOptions } from '@/hooks/use-knowledge-request';
+import { useFetchKnowledgeList } from '@/hooks/use-knowledge-request';
 import { IModalProps } from '@/interfaces/common';
+import { useDebounce } from 'ahooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Link2 } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -47,7 +49,21 @@ function LinkToDatasetForm({
     },
   });
 
-  const options = useSelectKnowledgeOptions();
+  const [searchString, setSearchString] = useState('');
+  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
+  const { list, loading, handleScroll, hasNextPage } = useFetchKnowledgeList(
+    false,
+    debouncedSearchString,
+  );
+
+  const options = useMemo(
+    () =>
+      list.map((item) => ({
+        label: item.name,
+        value: item.id,
+      })),
+    [list],
+  );
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     onConnectToKnowledgeOk(data.knowledgeIds);
@@ -77,6 +93,11 @@ function LinkToDatasetForm({
                   defaultValue={field.value}
                   placeholder={t('fileManager.pleaseSelect')}
                   maxCount={100}
+                  searchValue={searchString}
+                  onSearchChange={setSearchString}
+                  isSearching={loading}
+                  shouldFilter={false}
+                  onListScroll={hasNextPage ? handleScroll : undefined}
                   //   {...field}
                   modalPopover
                 />