Revert "Feat: Scrolling knowledge base list #3695" (#3708)

Reverts infiniflow/ragflow#3703

web/.umirc.ts

@@ -34,7 +34,7 @@ export default defineConfig({
   proxy: [
     {
       context: ['/api', '/v1'],
-      target: 'http://127.0.0.1:9380/',
+      target: 'http://127.0.0.1:9456/',
       changeOrigin: true,
       ws: true,
       logger: console,

web/package-lock.json

@@ -57,7 +57,6 @@
         "react-force-graph": "^1.44.4",
         "react-hook-form": "^7.53.1",
         "react-i18next": "^14.0.0",
-        "react-infinite-scroll-component": "^6.1.0",
         "react-markdown": "^9.0.1",
         "react-pdf-highlighter": "^6.1.0",
         "react-string-replace": "^1.1.1",
@@ -24706,25 +24705,6 @@
         }
       }
     },
-    "node_modules/react-infinite-scroll-component": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmmirror.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
-      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
-      "dependencies": {
-        "throttle-debounce": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0"
-      }
-    },
-    "node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz",

web/package.json

@@ -68,7 +68,6 @@
     "react-force-graph": "^1.44.4",
     "react-hook-form": "^7.53.1",
     "react-i18next": "^14.0.0",
-    "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
     "react-pdf-highlighter": "^6.1.0",
     "react-string-replace": "^1.1.1",

web/src/hooks/knowledge-hooks.ts

@@ -3,17 +3,14 @@ import { IKnowledge, ITestingResult } from '@/interfaces/database/knowledge';
 import i18n from '@/locales/config';
 import kbService from '@/services/knowledge-service';
 import {
-  useInfiniteQuery,
   useIsMutating,
   useMutation,
   useMutationState,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useDebounce } from 'ahooks';
 import { message } from 'antd';
 import { useSearchParams } from 'umi';
-import { useHandleSearchChange } from './logic-hooks';
 import { useSetPaginationParams } from './route-hook';
 
 export const useKnowledgeBaseId = (): string => {
@@ -53,7 +50,7 @@ export const useNextFetchKnowledgeList = (
     gcTime: 0, // https://tanstack.com/query/latest/docs/framework/react/guides/caching?from=reactQueryV3
     queryFn: async () => {
       const { data } = await kbService.getList();
-      const list = data?.data?.kbs ?? [];
+      const list = data?.data ?? [];
       return shouldFilterListWithoutDocument
         ? list.filter((x: IKnowledge) => x.chunk_num > 0)
         : list;
@@ -63,52 +60,6 @@ export const useNextFetchKnowledgeList = (
   return { list: data, loading };
 };
 
-export const useInfiniteFetchKnowledgeList = () => {
-  const { searchString, handleInputChange } = useHandleSearchChange();
-  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
-
-  const PageSize = 10;
-  const {
-    data,
-    error,
-    fetchNextPage,
-    hasNextPage,
-    isFetching,
-    isFetchingNextPage,
-    status,
-  } = useInfiniteQuery({
-    queryKey: ['infiniteFetchKnowledgeList', debouncedSearchString],
-    queryFn: async ({ pageParam }) => {
-      const { data } = await kbService.getList({
-        page: pageParam,
-        page_size: PageSize,
-        keywords: debouncedSearchString,
-      });
-      const list = data?.data ?? [];
-      return list;
-    },
-    initialPageParam: 1,
-    getNextPageParam: (lastPage, pages, lastPageParam) => {
-      if (lastPageParam * PageSize <= lastPage.total) {
-        return lastPageParam + 1;
-      }
-      return undefined;
-    },
-  });
-  return {
-    data,
-    loading: isFetching,
-    error,
-    fetchNextPage,
-    hasNextPage,
-    isFetching,
-    isFetchingNextPage,
-    status,
-    handleInputChange,
-    searchString,
-  };
-};
-
 export const useCreateKnowledge = () => {
   const queryClient = useQueryClient();
   const {
@@ -144,9 +95,7 @@ export const useDeleteKnowledge = () => {
       const { data } = await kbService.rmKb({ kb_id: id });
       if (data.code === 0) {
         message.success(i18n.t(`message.deleted`));
-        queryClient.invalidateQueries({
-          queryKey: ['infiniteFetchKnowledgeList'],
-        });
+        queryClient.invalidateQueries({ queryKey: ['fetchKnowledgeList'] });
       }
       return data?.data ?? [];
     },

web/src/locales/en.ts

@@ -75,7 +75,6 @@ export default {
       namePlaceholder: 'Please input name!',
       doc: 'Docs',
       searchKnowledgePlaceholder: 'Search',
-      noMoreData: 'It is all, nothing more',
     },
     knowledgeDetails: {
       dataset: 'Dataset',

web/src/locales/zh-traditional.ts

@@ -75,7 +75,6 @@ export default {
       namePlaceholder: '請輸入名稱',
       doc: '文件',
       searchKnowledgePlaceholder: '搜索',
-      noMoreData: 'It is all, nothing more',
     },
     knowledgeDetails: {
       dataset: '數據集',

web/src/locales/zh.ts

@@ -75,7 +75,6 @@ export default {
       namePlaceholder: '请输入名称',
       doc: '文档',
       searchKnowledgePlaceholder: '搜索',
-      noMoreData: '沒有更多的數據了',
     },
     knowledgeDetails: {
       dataset: '数据集',

web/src/pages/knowledge/index.less

@@ -2,7 +2,6 @@
 
 .knowledge {
   padding: 48px 0;
-  overflow: auto;
 }
 
 .topWrapper {

web/src/pages/knowledge/index.tsx

@@ -1,26 +1,18 @@
-import { useInfiniteFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
-import {
-  Button,
-  Divider,
-  Empty,
-  Flex,
-  Input,
-  Skeleton,
-  Space,
-  Spin,
-} from 'antd';
-import { useTranslation } from 'react-i18next';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { useSaveKnowledge } from './hooks';
+import { Button, Empty, Flex, Input, Space, Spin } from 'antd';
 import KnowledgeCard from './knowledge-card';
 import KnowledgeCreatingModal from './knowledge-creating-modal';
 
-import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSaveKnowledge, useSearchKnowledge } from './hooks';
 import styles from './index.less';
 
 const KnowledgeList = () => {
+  const { searchString, handleInputChange } = useSearchKnowledge();
+  const { loading, list: data } = useNextFetchKnowledgeList();
+  const list = data.filter((x) => x.name.includes(searchString));
   const { data: userInfo } = useFetchUserInfo();
   const { t } = useTranslation('translation', { keyPrefix: 'knowledgeList' });
   const {
@@ -30,23 +22,9 @@ const KnowledgeList = () => {
     onCreateOk,
     loading: creatingLoading,
   } = useSaveKnowledge();
-  const {
-    fetchNextPage,
-    data,
-    hasNextPage,
-    searchString,
-    handleInputChange,
-    loading,
-  } = useInfiniteFetchKnowledgeList();
-  console.log('🚀 ~ KnowledgeList ~ data:', data);
-  const nextList = data?.pages?.flatMap((x) => x.kbs) ?? [];
-
-  const total = useMemo(() => {
-    return data?.pages.at(-1).total ?? 0;
-  }, [data?.pages]);
 
   return (
-    <Flex className={styles.knowledge} vertical flex={1} id="scrollableDiv">
+    <Flex className={styles.knowledge} vertical flex={1}>
       <div className={styles.topWrapper}>
         <div>
           <span className={styles.title}>
@@ -75,30 +53,21 @@ const KnowledgeList = () => {
         </Space>
       </div>
       <Spin spinning={loading}>
-        <InfiniteScroll
-          dataLength={nextList?.length ?? 0}
-          next={fetchNextPage}
-          hasMore={hasNextPage}
-          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-          endMessage={total && <Divider plain>{t('noMoreData')} 🤐</Divider>}
-          scrollableTarget="scrollableDiv"
+        <Flex
+          gap={'large'}
+          wrap="wrap"
+          className={styles.knowledgeCardContainer}
         >
-          <Flex
-            gap={'large'}
-            wrap="wrap"
-            className={styles.knowledgeCardContainer}
-          >
-            {nextList?.length > 0 ? (
-              nextList.map((item: any) => {
-                return (
-                  <KnowledgeCard item={item} key={item.name}></KnowledgeCard>
-                );
-              })
-            ) : (
-              <Empty className={styles.knowledgeEmpty}></Empty>
-            )}
-          </Flex>
-        </InfiniteScroll>
+          {list.length > 0 ? (
+            list.map((item: any) => {
+              return (
+                <KnowledgeCard item={item} key={item.name}></KnowledgeCard>
+              );
+            })
+          ) : (
+            <Empty className={styles.knowledgeEmpty}></Empty>
+          )}
+        </Flex>
       </Spin>
       <KnowledgeCreatingModal
         loading={creatingLoading}