feat: Delete the file from the upload control of the message input box #1880 (#1946)

### What problem does this PR solve?

feat: Delete the file from the upload control of the message input box
#1880

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/indented-tree/modal.tsx

@@ -15,7 +15,7 @@ const IndentedTreeModal = ({
 
   return (
     <Modal
-      title={t('chunk.graph')}
+      title={t('chunk.mind')}
       open={visible}
       onCancel={hideModal}
       width={'90vw'}

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

@@ -1,5 +1,6 @@
 import { Authorization } from '@/constants/authorization';
 import { useTranslate } from '@/hooks/common-hooks';
+import { useRemoveNextDocument } from '@/hooks/document-hooks';
 import { getAuthorization } from '@/utils/authorization-util';
 import { PlusOutlined } from '@ant-design/icons';
 import type { GetProp, UploadFile } from 'antd';
@@ -14,7 +15,7 @@ interface IProps {
   value: string;
   sendDisabled: boolean;
   sendLoading: boolean;
-  onPressEnter(documentIds: string[]): Promise<any>;
+  onPressEnter(documentIds: string[]): void;
   onInputChange: ChangeEventHandler<HTMLInputElement>;
   conversationId: string;
 }
@@ -37,50 +38,41 @@ const MessageInput = ({
   conversationId,
 }: IProps) => {
   const { t } = useTranslate('chat');
+  const { removeDocument } = useRemoveNextDocument();
 
-  const [fileList, setFileList] = useState<UploadFile[]>([
-    // {
-    //   uid: '-1',
-    //   name: 'image.png',
-    //   status: 'done',
-    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    // },
-    // {
-    //   uid: '-xxx',
-    //   percent: 50,
-    //   name: 'image.png',
-    //   status: 'uploading',
-    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    // },
-    // {
-    //   uid: '-5',
-    //   name: 'image.png',
-    //   status: 'error',
-    // },
-  ]);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
 
   const handlePreview = async (file: UploadFile) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj as FileType);
     }
-
-    // setPreviewImage(file.url || (file.preview as string));
-    // setPreviewOpen(true);
   };
 
   const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
     console.log('🚀 ~ newFileList:', newFileList);
     setFileList(newFileList);
   };
+  const isUploadingFile = fileList.some((x) => x.status === 'uploading');
 
   const handlePressEnter = useCallback(async () => {
+    if (isUploadingFile) return;
     const ids = fileList.reduce((pre, cur) => {
       return pre.concat(get(cur, 'response.data', []));
     }, []);
 
-    await onPressEnter(ids);
+    onPressEnter(ids);
     setFileList([]);
-  }, [fileList, onPressEnter]);
+  }, [fileList, onPressEnter, isUploadingFile]);
+
+  const handleRemove = useCallback(
+    (file: UploadFile) => {
+      const ids = get(file, 'response.data', []);
+      if (ids.length) {
+        removeDocument(ids[0]);
+      }
+    },
+    [removeDocument],
+  );
 
   const uploadButton = (
     <button style={{ border: 0, background: 'none' }} type="button">
@@ -101,7 +93,7 @@ const MessageInput = ({
             type="primary"
             onClick={handlePressEnter}
             loading={sendLoading}
-            disabled={sendDisabled}
+            disabled={sendDisabled || isUploadingFile}
           >
             {t('send')}
           </Button>
@@ -119,6 +111,7 @@ const MessageInput = ({
         headers={{ [Authorization]: getAuthorization() }}
         data={{ conversation_id: conversationId }}
         method="post"
+        onRemove={handleRemove}
       >
         {fileList.length >= 8 ? null : uploadButton}
       </Upload>

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

@@ -7,7 +7,8 @@
     width: 80%;
   }
   .messageItemSectionRight {
-    width: 80%;
+    // width: 80%;
+    // max-width: 50vw;
   }
   .messageItemContent {
     display: inline-flex;

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

@@ -7,15 +7,20 @@ import { IChunk } from '@/interfaces/database/knowledge';
 import classNames from 'classnames';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useFetchDocumentInfosByIds } from '@/hooks/document-hooks';
+import {
+  useFetchDocumentInfosByIds,
+  useFetchDocumentThumbnailsByIds,
+} from '@/hooks/document-hooks';
 import MarkdownContent from '@/pages/chat/markdown-content';
 import { getExtension, isImage } from '@/utils/document-util';
-import { Avatar, Button, Flex, List } from 'antd';
+import { Avatar, Button, Flex, List, Typography } from 'antd';
 import IndentedTreeModal from '../indented-tree/modal';
 import NewDocumentLink from '../new-document-link';
 import SvgIcon from '../svg-icon';
 import styles from './index.less';
 
+const { Text } = Typography;
+
 interface IProps {
   item: Message;
   reference: IReference;
@@ -38,7 +43,8 @@ const MessageItem = ({
   const { t } = useTranslate('chat');
   const fileThumbnails = useSelectFileThumbnails();
   const { data: documentList, setDocumentIds } = useFetchDocumentInfosByIds();
-  console.log('🚀 ~ documentList:', documentList);
+  const { data: documentThumbnails, setDocumentIds: setIds } =
+    useFetchDocumentThumbnailsByIds();
   const { visible, hideModal, showModal } = useSetModalState();
   const [clickedDocumentId, setClickedDocumentId] = useState('');
 
@@ -66,8 +72,12 @@ const MessageItem = ({
     const ids = item?.doc_ids ?? [];
     if (ids.length) {
       setDocumentIds(ids);
+      const documentIds = ids.filter((x) => !(x in fileThumbnails));
+      if (documentIds.length) {
+        setIds(documentIds);
+      }
     }
-  }, [item.doc_ids, setDocumentIds]);
+  }, [item.doc_ids, setDocumentIds, setIds, fileThumbnails]);
 
   return (
     <div
@@ -117,6 +127,7 @@ const MessageItem = ({
                 dataSource={referenceDocumentList}
                 renderItem={(item) => {
                   const fileThumbnail = fileThumbnails[item.doc_id];
+
                   const fileExtension = getExtension(item.doc_name);
                   return (
                     <List.Item>
@@ -151,7 +162,8 @@ const MessageItem = ({
                 bordered
                 dataSource={documentList}
                 renderItem={(item) => {
-                  const fileThumbnail = fileThumbnails[item.id];
+                  const fileThumbnail =
+                    documentThumbnails[item.id] || fileThumbnails[item.id];
                   const fileExtension = getExtension(item.name);
                   return (
                     <List.Item>
@@ -181,7 +193,12 @@ const MessageItem = ({
                             type={'text'}
                             onClick={handleUserDocumentClick(item.id)}
                           >
-                            {item.name}
+                            <Text
+                              style={{ maxWidth: '40vw' }}
+                              ellipsis={{ tooltip: item.name }}
+                            >
+                              {item.name}
+                            </Text>
                           </Button>
                         )}
                       </Flex>