fix: Change the data in the dataset page to be obtained using the interface (#8726)

### What problem does this PR solve?

Change the data in the dataset page to be obtained using the interface,
and change the import to obtain all data every 15 seconds to obtain the
data of the current page every 5 seconds when parsing the existing file.
[#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/components/chunk-card/index.less

@@ -24,11 +24,13 @@
 
 .chunkCard {
   width: 100%;
+  padding: 18px 10px;
 }
 
 .cardSelected {
   background-color: @selectedBackgroundColor;
 }
+
 .cardSelectedDark {
   background-color: #ffffff2f;
 }

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

@@ -1,11 +1,18 @@
 import Image from '@/components/image';
+import { useTheme } from '@/components/theme-provider';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Switch } from '@/components/ui/switch';
 import { IChunk } from '@/interfaces/database/knowledge';
-import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
+import { CheckedState } from '@radix-ui/react-checkbox';
 import classNames from 'classnames';
 import DOMPurify from 'dompurify';
 import { useEffect, useState } from 'react';
-
-import { useTheme } from '@/components/theme-provider';
 import { ChunkTextMode } from '../../constant';
 import styles from './index.less';
 
@@ -39,8 +46,8 @@ const ChunkCard = ({
     switchChunk(available === 0 ? 1 : 0, [item.chunk_id]);
   };
 
-  const handleCheck: CheckboxProps['onChange'] = (e) => {
-    handleCheckboxClick(item.chunk_id, e.target.checked);
+  const handleCheck = (e: CheckedState) => {
+    handleCheckboxClick(item.chunk_id, e === 'indeterminate' ? false : e);
   };
 
   const handleContentDoubleClick = () => {
@@ -54,7 +61,7 @@ const ChunkCard = ({
   useEffect(() => {
     setEnabled(available === 1);
   }, [available]);
-
+  const [open, setOpen] = useState<boolean>(false);
   return (
     <Card
       className={classNames(styles.chunkCard, {
@@ -62,19 +69,34 @@ const ChunkCard = ({
           selected,
       })}
     >
-      <Flex gap={'middle'} justify={'space-between'}>
-        <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
+      <div className="flex items-start justify-between gap-2">
+        <Checkbox onCheckedChange={handleCheck} checked={checked}></Checkbox>
         {item.image_id && (
-          <Popover
-            placement="right"
-            content={
-              <Image id={item.image_id} className={styles.imagePreview}></Image>
-            }
-          >
-            <Image id={item.image_id} className={styles.image}></Image>
+          <Popover open={open}>
+            <PopoverTrigger
+              asChild
+              onMouseEnter={() => setOpen(true)}
+              onMouseLeave={() => setOpen(false)}
+            >
+              <div>
+                <Image id={item.image_id} className={styles.image}></Image>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              align={'start'}
+              side={'right'}
+              sideOffset={-20}
+            >
+              <div>
+                <Image
+                  id={item.image_id}
+                  className={styles.imagePreview}
+                ></Image>
+              </div>
+            </PopoverContent>
           </Popover>
         )}
-
         <section
           onDoubleClick={handleContentDoubleClick}
           onClick={handleContentClick}
@@ -89,11 +111,15 @@ const ChunkCard = ({
             })}
           ></div>
         </section>
-
         <div>
-          <Switch checked={enabled} onChange={onChange} />
+          <Switch
+            checked={enabled}
+            onCheckedChange={onChange}
+            aria-readonly
+            className="!m-0"
+          />
         </div>
-      </Flex>
+      </div>
     </Card>
   );
 };

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx

@@ -2,6 +2,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Ban, CircleCheck, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type ICheckboxSetProps = {
   selectAllChunk: (e: any) => void;
@@ -11,6 +12,7 @@ type ICheckboxSetProps = {
 };
 export default (props: ICheckboxSetProps) => {
   const { selectAllChunk, removeChunk, switchChunk, checked } = props;
+  const { t } = useTranslation();
   const handleSelectAllCheck = useCallback(
     (e: any) => {
       console.log('eee=', e);
@@ -33,35 +35,35 @@ export default (props: ICheckboxSetProps) => {
 
   return (
     <div className="flex gap-[40px] p-4">
-      <div className="flex items-center gap-3 cursor-pointer">
+      <div className="flex items-center gap-3 cursor-pointer text-muted-foreground hover:text-white">
         <Checkbox
           id="all_chunks_checkbox"
           onCheckedChange={handleSelectAllCheck}
           checked={checked}
-          className=" data-[state=checked]:bg-[#1668dc] data-[state=checked]:border-[#1668dc] data-[state=checked]:text-white"
+          className=" data-[state=checked]:bg-white data-[state=checked]:border-white data-[state=checked]:text-black  border-muted-foreground text-muted-foreground hover:text-black hover:border-white "
         />
-        <Label htmlFor="all_chunks_checkbox">All Chunks</Label>
+        <Label htmlFor="all_chunks_checkbox">{t('chunk.selectAll')}</Label>
       </div>
       <div
-        className="flex items-center cursor-pointer"
+        className="flex items-center cursor-pointer text-muted-foreground hover:text-white"
         onClick={handleEnabledClick}
       >
         <CircleCheck size={16} />
-        <span className="block ml-1">Enable</span>
+        <span className="block ml-1">{t('chunk.enable')}</span>
       </div>
       <div
-        className="flex items-center cursor-pointer"
+        className="flex items-center cursor-pointer text-muted-foreground hover:text-white"
         onClick={handleDisabledClick}
       >
         <Ban size={16} />
-        <span className="block ml-1">Disable</span>
+        <span className="block ml-1">{t('chunk.disable')}</span>
       </div>
       <div
-        className="flex items-center text-red-500 cursor-pointer"
+        className="flex items-center cursor-pointer text-red-400 hover:text-red-500"
         onClick={handleDeleteClick}
       >
         <Trash2 size={16} />
-        <span className="block ml-1">Delete</span>
+        <span className="block ml-1">{t('chunk.delete')}</span>
       </div>
     </div>
   );

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

@@ -183,9 +183,9 @@ const Chunk = () => {
             <Spin spinning={loading} className={styles.spin} size="large">
               <div className="h-[100px] flex flex-col justify-end pb-[5px]">
                 <div>
-                  <h2 className="text-[24px]">Chunk Result</h2>
+                  <h2 className="text-[24px]">{t('chunk.chunkResult')}</h2>
                   <div className="text-[14px] text-[#979AAB]">
-                    View the chunked segments used for embedding and retrieval.
+                    {t('chunk.chunkResultTip')}
                   </div>
                 </div>
               </div>