fix: [Chat]Fixed the issue where sending files was allowed before the upload was successful (#3035)

packages/semi-foundation/chat/chat.scss

@@ -498,13 +498,17 @@ $module: #{$prefix}-chat;
             color: $color-chat_attachment_clear_icon;
         }
 
-        &-process.#{$prefix}-progress-circle {
+        &-process.#{$prefix}-progress-circle, &-fail {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
         }
 
+        &-fail {
+            color: $color-chat_attachment_fail;
+        }
+
         &-file {
             display: inline-flex;
             flex-direction: row;

packages/semi-foundation/chat/constants.ts

@@ -49,6 +49,15 @@ const SEND_HOT_KEY = {
     SHIFT_PLUS_ENTER: 'shift+enter'
 };
 
+const FILE_STATUS = {
+    UPLOADING: 'uploading',
+    SUCCESS: 'success',
+    UPLOAD_FAIL: 'uploadFail',
+    VALIDATING: 'validating',
+    VALID_FAIL: 'validateFail',
+    WAIT_UPLOAD: 'wait',
+};
+
 const strings = {
     ROLE,
     CHAT_ALIGN,
@@ -59,6 +68,7 @@ const strings = {
     SHOW_SCROLL_GAP,
     MODE,
     SEND_HOT_KEY,
+    FILE_STATUS
 };
 
 

packages/semi-foundation/chat/inputboxFoundation.ts

@@ -61,7 +61,15 @@ export default class InputBoxFoundation <P = Record<string, any>, S = Record<str
     getDisableSend = () => {
         const { content, attachment } = this.getStates();
         const { disableSend: disableSendInProps } = this.getProps();
-        const disabledSend = disableSendInProps || (content.length === 0 && attachment.length === 0);
+        /** 不能发送的条件：（满足任1）
+         *  1. props 中禁止发送；2. 没有文本输入，且没有上传文件； 3.上传文件中有状态不为 success 的
+         *  Conditions under which content cannot be sent: (any one of the following conditions must be met)
+         *  1. Sending is disabled in props; 2. No text input and no file upload; 3. There are files uploaded that do not have a success status.
+         */
+        const disabledSend = disableSendInProps || 
+            (content.length === 0 && attachment.length === 0) || 
+            attachment.find(item => item.status !== strings.FILE_STATUS.SUCCESS)
+        ;
         return disabledSend;
     }
 

packages/semi-foundation/chat/variables.scss

@@ -28,6 +28,7 @@ $color-chat_inputBottom_sendButton_icon-disable: var(--semi-color-primary-disabl
 $color-chat_inputBox_container-border: var(--semi-color-border);  // 输入框容器边框颜色
 $color-chat_attachment_clear_icon: var(--semi-color-text-2);  // 附件清除图标颜色
 $color-chat_attachment_file-bg: var(--semi-color-fill-0); // 附件文件背景颜色
+$color-chat_attachment_fail: var(--semi-color-danger); // 附件上传失败的提示图标颜色
 $color-chat_chatBox_user_attachment_file-bg: var(--semi-color-bg-0); // 用户聊天框附件文件背景颜色
 $color-chat_chatBox_other_attachment_file-bg: var(--semi-color-fill-2); // 聊天框附件文件背景颜色
 $color-chat_attachment_file_icon: var(--semi-color-text-2); // 附件文件图标颜色

packages/semi-ui/chat/attachment.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FileItem } from '../upload/interface';
 import Image from '../image';
-import { IconBriefStroked, IconClear } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconBriefStroked, IconClear } from '@douyinfe/semi-icons';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/chat/constants';
 import cls from 'classnames';
 import { Progress } from "../index";
@@ -20,7 +20,7 @@ interface FileProps {
     url?: string;
     name?: string;
     size?: string;
-    type?: string;
+    type?: string
 }
 
 export const FileAttachment = React.memo((props: FileProps) => {
@@ -38,18 +38,18 @@ export const FileAttachment = React.memo((props: FileProps) => {
                 {type ? ' · ' : ''}{size}
             </span>
         </div>
-    </a>
-})
+    </a>;
+});
 
 export const ImageAttachment = React.memo((props: {src: string}) => {
     const { src } = props;
     return <Image
-    className={`${PREFIX_ATTACHMENT}-img`}
-    width={60}
-    height={60}
-    src={src}
-/>
-})
+        className={`${PREFIX_ATTACHMENT}-img`}
+        width={60}
+        height={60}
+        src={src}
+    />;
+});
 
 const Attachment = React.memo((props: AttachmentProps) => {
     const { attachment, onClear, showClear = true, className } = props;
@@ -64,7 +64,7 @@ const Attachment = React.memo((props: AttachmentProps) => {
                     const suffix = item?.name.split('.').pop();
                     const isImg = item?.fileInstance?.type?.startsWith(PIC_PREFIX) || PIC_SUFFIX_ARRAY.includes(suffix);
                     const realType = suffix ?? item?.fileInstance?.type?.split('/').pop();
-                    const showProcess = !(percent === 100 || typeof percent === 'undefined') && status === 'uploading';
+                    const showProcess = !(percent === 100 || typeof percent === 'undefined') && status === strings.FILE_STATUS.UPLOADING;
                     return <div 
                         className={`${PREFIX_ATTACHMENT}-item`}
                         key={item.uid}
@@ -82,11 +82,12 @@ const Attachment = React.memo((props: AttachmentProps) => {
                         {showClear && <IconClear 
                             size="large" 
                             className={`${PREFIX_ATTACHMENT}-clear`}
-                            onClick={()=> {
+                            onClick={() => {
                                 onClear && onClear(item);
                             }}
                         />}
-                       {showProcess && <Progress percent={percent}  type="circle" size="small"  width={30} className={`${PREFIX_ATTACHMENT}-process`} aria-label="upload progress" />}
+                        {showProcess && <Progress percent={percent} type="circle" size="small" width={30} className={`${PREFIX_ATTACHMENT}-process`} aria-label="upload progress" />}
+                        {[strings.FILE_STATUS.UPLOAD_FAIL, strings.FILE_STATUS.VALID_FAIL].includes(status) && <IconAlertCircle className={`${PREFIX_ATTACHMENT}-fail`} />}
                     </div>;
                 })
             }