fix:Use use-chunk-request.ts to replace chunk-hooks.ts; implement chunk selectAll, enable, disable and other functions (#8695)

### What problem does this PR solve?

Use use-chunk-request.ts to replace chunk-hooks.ts; implement chunk
selectAll, enable, disable and other functions
[#3221](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -1,6 +1,9 @@
-import { useFetchNextChunkList, useSwitchChunk } from '@/hooks/chunk-hooks';
+import {
+  useFetchNextChunkList,
+  useSwitchChunk,
+} from '@/hooks/use-chunk-request';
 import classNames from 'classnames';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ChunkCard from './components/chunk-card';
 import CreatingModal from './components/chunk-creating-modal';
@@ -43,6 +46,7 @@ const Chunk = () => {
   const { t } = useTranslation();
   const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
   const { switchChunk } = useSwitchChunk();
+  const [chunkList, setChunkList] = useState(data);
   const {
     chunkUpdatingLoading,
     onChunkUpdatingOk,
@@ -53,6 +57,9 @@ const Chunk = () => {
     documentId,
   } = useUpdateChunk();
 
+  useEffect(() => {
+    setChunkList(data);
+  }, [data]);
   const onPaginationChange: RAGFlowPaginationType['onChange'] = (
     page,
     size,
@@ -115,10 +122,22 @@ const Chunk = () => {
         available_int: available,
         doc_id: documentId,
       });
-      if (!chunkIds && resCode === 0) {
+      if (ids?.length && resCode === 0) {
+        chunkList.forEach((x: any) => {
+          if (ids.indexOf(x['chunk_id']) > -1) {
+            x['available_int'] = available;
+          }
+        });
+        setChunkList(chunkList);
       }
     },
-    [switchChunk, documentId, selectedChunkIds, showSelectedChunkWarning],
+    [
+      switchChunk,
+      documentId,
+      selectedChunkIds,
+      showSelectedChunkWarning,
+      chunkList,
+    ],
   );
 
   const { highlights, setWidthAndHeight } =
@@ -156,7 +175,7 @@ const Chunk = () => {
                   </div>
                 </div>
               </div>
-              <div className=" rounded-[16px] bg-[#FFF]/10 pl-[20px] pb-[20px] pt-[20px] box-border	">
+              <div className=" rounded-[16px] bg-[#FFF]/10 pl-[20px] pb-[20px] pt-[20px] box-border	mb-2">
                 <ChunkResultBar
                   handleInputChange={handleInputChange}
                   searchString={searchString}
@@ -169,6 +188,8 @@ const Chunk = () => {
                 <div className="pt-[5px] pb-[5px]">
                   <CheckboxSets
                     selectAllChunk={selectAllChunk}
+                    switchChunk={handleSwitchChunk}
+                    removeChunk={handleRemoveChunk}
                     checked={selectedChunkIds.length === data.length}
                   />
                 </div>
@@ -182,7 +203,7 @@ const Chunk = () => {
                       'flex flex-col gap-4',
                     )}
                   >
-                    {data.map((item) => (
+                    {chunkList.map((item) => (
                       <ChunkCard
                         item={item}
                         key={item.chunk_id}
@@ -199,18 +220,18 @@ const Chunk = () => {
                     ))}
                   </div>
                 </div>
+                <div className={styles.pageFooter}>
+                  <RAGFlowPagination
+                    pageSize={pagination.pageSize}
+                    current={pagination.current}
+                    total={total}
+                    onChange={(page, pageSize) => {
+                      onPaginationChange(page, pageSize);
+                    }}
+                  ></RAGFlowPagination>
+                </div>
               </div>
             </Spin>
-            <div className={styles.pageFooter}>
-              <RAGFlowPagination
-                pageSize={pagination.pageSize}
-                current={pagination.current}
-                total={total}
-                onChange={(page, pageSize) => {
-                  onPaginationChange(page, pageSize);
-                }}
-              ></RAGFlowPagination>
-            </div>
           </div>
         </div>
       </div>