refactor: RAG Refactor (#985)

Co-authored-by: Aralhi <xiaoping0501@gmail.com>
Co-authored-by: csunny <cfqsunny@163.com>

web/pages/knowledge/chunk/index.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { Breadcrumb, Button, Card, Divider, Empty, List } from 'antd';
+import { Breadcrumb, Card, Empty, Pagination, Spin } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { apiInterceptors, getChunkList } from '@/client/api';
 import DocIcon from '@/components/knowledge/doc-icon';
 
-const page_size = 20;
+const DEDAULT_PAGE_SIZE = 10;
 
 function ChunkList() {
   const router = useRouter();
@@ -13,21 +13,16 @@ function ChunkList() {
   const [chunkList, setChunkList] = useState<any>([]);
   const [total, setTotal] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(false);
-  const currentPageRef = useRef(1);
   const {
     query: { id, spaceName },
   } = useRouter();
 
-  const hasMore = useMemo(() => {
-    return chunkList?.length < total;
-  }, [chunkList.length, total]);
-
   const fetchChunks = async () => {
     const [_, data] = await apiInterceptors(
       getChunkList(spaceName as string, {
         document_id: id as string,
-        page: currentPageRef.current,
-        page_size,
+        page: 1,
+        page_size: DEDAULT_PAGE_SIZE,
       }),
     );
 
@@ -35,21 +30,16 @@ function ChunkList() {
     setTotal(data?.total!);
   };
 
-  const loaderMoreChunks = async () => {
-    if (loading) {
-      return;
-    }
+  const loaderMore = async (page: number, page_size: number) => {
     setLoading(true);
-    currentPageRef.current += 1;
     const [_, data] = await apiInterceptors(
       getChunkList(spaceName as string, {
         document_id: id as string,
-        page: currentPageRef.current,
+        page,
         page_size,
       }),
     );
-
-    setChunkList([...chunkList, ...(data?.data || [])]);
+    setChunkList(data?.data || []);
     setLoading(false);
   };
 
@@ -58,7 +48,7 @@ function ChunkList() {
   }, [id, spaceName]);
 
   return (
-    <div className="h-full overflow-y-scroll">
+    <div className="h-full overflow-y-scroll relative">
       <Breadcrumb
         className="m-6"
         items={[
@@ -74,8 +64,8 @@ function ChunkList() {
           },
         ]}
       />
-      <div className="flex justify-center flex-col">
-        <div>
+      <Spin spinning={loading}>
+        <div className="flex justify-center flex-col">
           {chunkList?.length > 0 ? (
             chunkList?.map((chunk: any) => {
               return (
@@ -99,14 +89,15 @@ function ChunkList() {
             <Empty image={Empty.PRESENTED_IMAGE_DEFAULT}></Empty>
           )}
         </div>
-        {hasMore && (
-          <Divider>
-            <span className="cursor-pointer" onClick={loaderMoreChunks}>
-              {t('Load_more')}
-            </span>
-          </Divider>
-        )}
-      </div>
+      </Spin>
+      <Pagination
+        className="mx-2 my-4 float-right right-6 bottom-4"
+        defaultCurrent={1}
+        defaultPageSize={DEDAULT_PAGE_SIZE}
+        total={total}
+        showTotal={(total) => `Total ${total} items`}
+        onChange={loaderMore}
+      />
     </div>
   );
 }