Refa: Pdf 2 Slices page to new style (#8386)

### What problem does this PR solve?

Refactor Pdf 2 Slices page to new style

### Type of change

- [X] Refactoring

web/src/hooks/logic-hooks/navigate-hooks.ts

@@ -64,7 +64,8 @@ export const useNavigatePage = () => {
   const navigateToChunkParsedResult = useCallback(
     (id: string, knowledgeId?: string) => () => {
       navigate(
-        `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
+        // `${Routes.ParsedResult}/${id}?${QueryStringMap.KnowledgeId}=${knowledgeId}`,
+        `${Routes.ParsedResult}/chunks?id=${knowledgeId}&doc_id=${id}`,
       );
     },
     [navigate],

web/src/hooks/use-chunk-request.ts

@@ -0,0 +1,91 @@
+import { ResponseGetType } from '@/interfaces/database/base';
+import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
+import kbService from '@/services/knowledge-service';
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from 'ahooks';
+import { useCallback, useState } from 'react';
+import { IChunkListResult } from './chunk-hooks';
+import {
+  useGetPaginationWithRouter,
+  useHandleSearchChange,
+} from './logic-hooks';
+import { useGetKnowledgeSearchParams } from './route-hook';
+
+export const useFetchNextChunkList = (): ResponseGetType<{
+  data: IChunk[];
+  total: number;
+  documentInfo: IKnowledgeFile;
+}> &
+  IChunkListResult => {
+  const { pagination, setPagination } = useGetPaginationWithRouter();
+  const { documentId } = useGetKnowledgeSearchParams();
+  const { searchString, handleInputChange } = useHandleSearchChange();
+  const [available, setAvailable] = useState<number | undefined>();
+  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
+
+  const { data, isFetching: loading } = useQuery({
+    queryKey: [
+      'fetchChunkList',
+      documentId,
+      pagination.current,
+      pagination.pageSize,
+      debouncedSearchString,
+      available,
+    ],
+    placeholderData: (previousData: any) =>
+      previousData ?? { data: [], total: 0, documentInfo: {} }, // https://github.com/TanStack/query/issues/8183
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await kbService.chunk_list({
+        doc_id: documentId,
+        page: pagination.current,
+        size: pagination.pageSize,
+        available_int: available,
+        keywords: searchString,
+      });
+      if (data.code === 0) {
+        const res = data.data;
+        return {
+          data: res.chunks,
+          total: res.total,
+          documentInfo: res.doc,
+        };
+      }
+
+      return (
+        data?.data ?? {
+          data: [],
+          total: 0,
+          documentInfo: {},
+        }
+      );
+    },
+  });
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      setPagination({ page: 1 });
+      handleInputChange(e);
+    },
+    [handleInputChange, setPagination],
+  );
+
+  const handleSetAvailable = useCallback(
+    (a: number | undefined) => {
+      setPagination({ page: 1 });
+      setAvailable(a);
+    },
+    [setAvailable, setPagination],
+  );
+
+  return {
+    data,
+    loading,
+    pagination,
+    setPagination,
+    searchString,
+    handleInputChange: onInputChange,
+    available,
+    handleSetAvailable,
+  };
+};