fix: Change document status with @tanstack/react-query #13306 (#2788)

### What problem does this PR solve?

fix: Change document status with @tanstack/react-query #13306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [ ] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/components/chunk-method-modal/index.tsx

@@ -1,7 +1,5 @@
 import MaxTokenNumber from '@/components/max-token-number';
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { IKnowledgeFileParserConfig } from '@/interfaces/database/knowledge';
-import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import {
   MinusCircleOutlined,
   PlusOutlined,
@@ -22,6 +20,8 @@ import React, { useEffect, useMemo } from 'react';
 import { useFetchParserListOnMount } from './hooks';
 
 import { useTranslate } from '@/hooks/common-hooks';
+import { IParserConfig } from '@/interfaces/database/document';
+import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import Delimiter from '../delimiter';
 import EntityTypesItem from '../entity-types-item';
 import ExcelToHtml from '../excel-to-html';
@@ -39,7 +39,7 @@ interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
   ) => void;
   showModal?(): void;
   parserId: string;
-  parserConfig: IKnowledgeFileParserConfig;
+  parserConfig: IParserConfig;
   documentExtension: string;
   documentId: string;
 }
@@ -115,7 +115,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
   useEffect(() => {
     if (visible) {
       const pages =
-        parserConfig.pages?.map((x) => ({ from: x[0], to: x[1] })) ?? [];
+        parserConfig?.pages?.map((x) => ({ from: x[0], to: x[1] })) ?? [];
       form.setFieldsValue({
         pages: pages.length > 0 ? pages : [{ from: 1, to: 1024 }],
         parser_config: omit(parserConfig, 'pages'),

web/src/components/file-icon/index.tsx

@@ -1,7 +1,8 @@
 import { getExtension } from '@/utils/document-util';
 import SvgIcon from '../svg-icon';
 
-import { useSelectFileThumbnails } from '@/hooks/knowledge-hooks';
+import { useFetchDocumentThumbnailsByIds } from '@/hooks/document-hooks';
+import { useEffect } from 'react';
 import styles from './index.less';
 
 interface IProps {
@@ -11,10 +12,15 @@ interface IProps {
 
 const FileIcon = ({ name, id }: IProps) => {
   const fileExtension = getExtension(name);
-  // TODO: replace this line with react query
-  const fileThumbnails = useSelectFileThumbnails();
+
+  const { data: fileThumbnails, setDocumentIds } =
+    useFetchDocumentThumbnailsByIds();
   const fileThumbnail = fileThumbnails[id];
 
+  useEffect(() => {
+    setDocumentIds([id]);
+  }, [id, setDocumentIds]);
+
   return fileThumbnail ? (
     <img src={fileThumbnail} className={styles.thumbnailImg}></img>
   ) : (

web/src/components/message-item/index.tsx

@@ -1,7 +1,6 @@
 import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
 import { MessageType } from '@/constants/chat';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { useSelectFileThumbnails } from '@/hooks/knowledge-hooks';
 import { IReference } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
 import classNames from 'classnames';
@@ -50,7 +49,6 @@ const MessageItem = ({
 }: IProps) => {
   const isAssistant = item.role === MessageType.Assistant;
   const isUser = item.role === MessageType.User;
-  const fileThumbnails = useSelectFileThumbnails();
   const { data: documentList, setDocumentIds } = useFetchDocumentInfosByIds();
   const { data: documentThumbnails, setDocumentIds: setIds } =
     useFetchDocumentThumbnailsByIds();
@@ -77,12 +75,12 @@ const MessageItem = ({
     const ids = item?.doc_ids ?? [];
     if (ids.length) {
       setDocumentIds(ids);
-      const documentIds = ids.filter((x) => !(x in fileThumbnails));
+      const documentIds = ids.filter((x) => !(x in documentThumbnails));
       if (documentIds.length) {
         setIds(documentIds);
       }
     }
-  }, [item.doc_ids, setDocumentIds, setIds, fileThumbnails]);
+  }, [item.doc_ids, setDocumentIds, setIds, documentThumbnails]);
 
   return (
     <div
@@ -184,7 +182,7 @@ const MessageItem = ({
                 renderItem={(item) => {
                   // TODO:
                   const fileThumbnail =
-                    documentThumbnails[item.id] || fileThumbnails[item.id];
+                    documentThumbnails[item.id] || documentThumbnails[item.id];
                   const fileExtension = getExtension(item.name);
                   return (
                     <List.Item>