@tencentcloud/chat-uikit-react 1.2.2 → 2.1.0

package/src/components/TUIManage/styles/index.scss

@@ -13,7 +13,7 @@
     align-items: center;
     padding: 24px 20px;
     span {
-      margin-left: 10px;
+      margin-right: 10px;
       font-weight: 700;
       font-size: 14px;
       font-family: PingFangSC-Medium;
@@ -69,3 +69,17 @@
     }
   }
 }
+
+.tui-manage.tui-h5-manage {
+  border-left: 1px solid #f9fafb;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  z-index: 1;
+  background: #fff;
+}

package/src/components/TUIMessage/MessageBubble.tsx

@@ -1,11 +1,12 @@
 import React, {
   PropsWithChildren,
   ReactNode,
+  useEffect,
   useState,
 } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_STATUS } from '../../constants';
-import { useTUIChatActionContext } from '../../context';
+import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { useMessageReply } from './hooks/useMessageReply';
 import { MessageProgress } from './MessageProgress';
@@ -36,7 +37,8 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
     sender,
   } = useMessageReply({ message });
 
-  const { setHighlightedMessageId } = useTUIChatActionContext('MessageBubbleWithContext');
+  const { setHighlightedMessageId, setActiveMessageID } = useTUIChatActionContext('MessageBubbleWithContext');
+  const { activeMessageID } = useTUIChatStateContext('MessageBubbleWithContext');
 
   const handleLoading = () => !!((
     message?.type === TencentCloudChat.TYPES.MSG_IMAGE
@@ -45,12 +47,24 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
   ) && message?.status === MESSAGE_STATUS.UNSEND);
 
   const handleMouseEnter = () => {
+    setActiveMessageID(message.ID);
     setPluginsShow(true);
   };
   const handleMouseLeave = () => {
+    setActiveMessageID(message.ID);
     setPluginsShow(false);
   };
 
+  const activeMessage = () => {
+    setActiveMessageID(message.ID);
+  };
+
+  useEffect(() => {
+    if (activeMessageID !== message.ID) {
+      setPluginsShow(false);
+    }
+  }, [activeMessageID]);
+
   const handleReplyMessage = () => {
     setHighlightedMessageId(replyMessage?.ID);
   };
@@ -59,8 +73,11 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
     <div className="meesage-bubble">
       <div
         className={`meesage-bubble-context ${message?.flow}`}
+        role="button"
+        tabIndex={0}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onClick={activeMessage}
       >
         <div
           className={
@@ -88,7 +105,7 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         {
           Plugins && (
           <div className="message-plugin">
-            {PluginsShow && <Plugins />}
+            {PluginsShow && <Plugins message={message} />}
           </div>
           )
         }

package/src/components/TUIMessage/MessageCustom.tsx

@@ -1,7 +1,9 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
+import { useTranslation } from 'react-i18next';
 import { JSONStringToParse } from '../untils';
 import type { MessageContextProps } from './MessageText';
+import { useComponentContext } from '../../context';
 
 function MessageCustomWithContext <T extends MessageContextProps>(
   props: PropsWithChildren<T>,
@@ -11,7 +13,8 @@ function MessageCustomWithContext <T extends MessageContextProps>(
     message,
     children,
   } = props;
-
+  const { t } = useTranslation();
+  const { MessageCustomPlugins } = useComponentContext('MessageCustom');
   const handleContext = (data) => {
     if (data.data === 'Hyperlink') {
       const extension = JSONStringToParse(data?.extension);
@@ -32,7 +35,13 @@ function MessageCustomWithContext <T extends MessageContextProps>(
     if (data.data === 'group_create') {
       return `${message?.nick || message?.from} Create a group`;
     }
-    return data.extension;
+    const botMessage = JSONStringToParse(data.data);
+    if (botMessage?.chatbotPlugin === 1 && botMessage?.src === 15 && (botMessage?.subtype === 'welcome_msg' || botMessage?.subtype === 'clarify_msg')) {
+      return (
+        <MessageCustomPlugins data={JSONStringToParse(data.data).content} />
+      );
+    }
+    return `[${t('TUIChat.Custom message')}]`;
   };
 
   return (

package/src/components/TUIMessage/MessageImage.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useState } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
+import { isH5 } from '../../utils/env';
 import { Model } from '../Model';
 import type { MessageContextProps } from './MessageText';
 
@@ -19,7 +20,7 @@ function MessageImageWithContext <T extends MessageContextProps>(
   return (
     <div className="message-image">
       <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <img className={`img bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
+        <img className={`img ${isH5 ? 'img-h5' : ''} bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
       </div>
       {children}
       {

package/src/components/TUIMessage/MessageName.tsx

@@ -34,7 +34,7 @@ export function MessageName <T extends MessageNameProps>(
   }
 
   return (
-    <label htmlFor="content" className="name">
+    <label htmlFor="content" className="text-ellipsis name">
       {message?.nick || message?.from}
     </label>
   );

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -90,10 +90,12 @@ export function MessagePlugins <T extends MessagePluginsProps>(
 
   const handleVisible = (data) => {
     if (data.x && data.y) {
+      const isTop = data.y < data.height ? true : data.top;
+      const isLeft = data.x < data.width ? true : data.left;
       setPopStyle({
         position: 'fixed',
-        left: `${!data.left ? (data.x - data.width) : data.x}px`,
-        top: `${!data.top ? (data.y - data.height) : data.y}px`,
+        left: `${isLeft ? data.x : (data.x - data.width)}px`,
+        top: `${isTop ? data.y : (data.y - data.height)}px`,
       });
     }
   };

package/src/components/TUIMessage/MessageRevoke.tsx

@@ -26,9 +26,9 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
         message?.flow === MESSAGE_FLOW.IN && <span>{message?.nick || message?.from}</span>
       }
       {
-        message?.flow !== MESSAGE_FLOW.IN && <span>{t('TUIChat.You')}</span>
+        message?.flow !== MESSAGE_FLOW.IN && <span style={{ marginRight: '5px' }}>{t('TUIChat.You')}</span>
       }
-      <span>{t('TUIChat.recalled a message')}</span>
+      <span style={{ marginRight: '5px' }}>{t('TUIChat.recalled a message')}</span>
       {
         message?.flow === MESSAGE_FLOW.OUT
         && message?.type === TencentCloudChat.TYPES.MSG_TEXT

package/src/components/TUIMessage/MessageText.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { UnknowPorps } from '../../context';
+import { UnknowPorps, useTUIChatStateContext, useComponentContext } from '../../context';
 
 export interface MessageContextProps {
   context?: UnknowPorps,
@@ -16,14 +16,36 @@ function MessageTextWithContext <T extends MessageContextProps>(
     message,
     children,
   } = props;
-
+  const { MessageTextPlugins } = useComponentContext('MessageText');
+  const { firstSendMessage } = useTUIChatStateContext('MessageText');
+  if (MessageTextPlugins && message.flow === 'in' && (firstSendMessage?.time <= message?.time)) {
+    return (
+      <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
+        <MessageTextPlugins data={message} />
+      </div>
+    );
+  }
+  const urlToLink = function (text: string) {
+    if (!text) {
+      return text;
+    }
+    // eslint-disable-next-line no-useless-escape
+    const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+    return text.replace(urlRegex, (website) => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
+  };
   return (
     <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <div className="message-text-content">
         {context.text.map((item, index) => {
           const key = message.ID + index;
           if (item.name === 'text') {
-            return <p className="message-text-content-p" key={item.src + key}>{item.text}</p>;
+            return (
+              <p
+                className="message-text-content-p"
+                key={item.src + key}
+                dangerouslySetInnerHTML={{ __html: urlToLink(item.text) }}
+              />
+            );
           }
           return <img className="text-img" key={item.src + key} src={item.src} alt="" />;
         })}

package/src/components/TUIMessage/MessageVideo.tsx

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { MESSAGE_STATUS } from '../../constants';
+import { isH5, isPC } from '../../utils/env';
 import { Model } from '../Model';
 import type { MessageContextProps } from './MessageText';
 
@@ -13,18 +14,20 @@ function MessageVideoWithContext <T extends MessageContextProps>(
   } = props;
 
   const [show, setShow] = useState(false);
+  const transparentPosterUrl = 'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
 
   return (
-    <div className="message-video">
+    <div className={`message-video ${isH5 ? 'message-video-h5' : ''}`}>
       <div className={`${message?.status === MESSAGE_STATUS.SUCCESS ? 'snap-video' : ''}`} role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <video muted controls={false} src={context.url} />
+        {isPC && (<video muted controls={false} src={context.url} />)}
+        {isH5 && (<img src={message.payload.snapshotUrl || transparentPosterUrl} style={{ maxHeight: '200px', maxWidth: '200px', borderRadius: '10px' }} />)}
       </div>
 
       {children}
       {
         show && (
-        <Model onClick={() => { setShow(false); }}>
-          <video className="play-video" muted controls src={context.url} />
+        <Model onClick={(e) => { e.stopPropagation(); setShow(false); }}>
+          <video className="play-video" autoPlay controls src={context.url} />
         </Model>
         )
       }

package/src/components/TUIMessage/hooks/useMessageHandler.ts

@@ -1,7 +1,9 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Message } from '@tencentcloud/chat';
-import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
+import { CONSTANT_DISPATCH_TYPE, MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
+import { enableSampleTaskStatus } from '../../untils';
 import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
 import { Toast } from '../../Toast';
 
@@ -17,7 +19,6 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
   } = props;
 
   const {
-    removeMessage,
     editLocalMessage,
     operateMessage,
     revokeMessage,
@@ -27,40 +28,19 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const handleDelMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !chat || !removeMessage) {
-      return;
-    }
-
-    try {
-      await chat.deleteMessage([message]);
-      removeMessage(message);
-    } catch (error) {
-      if (handleError) {
-        handleError({
-          functionName: 'deleteMessage',
-          error,
-        });
-      } else {
-        Toast({ text: t('TUIChat.Error deleting message'), type: 'error' });
-        throw new Error(error);
-      }
-    }
+    if (!message) return;
+    const messageModel = TUIStore.getMessageModel(message?.ID);
+    messageModel.deleteMessage();
   }, [message]);
 
   const handleRevokeMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !chat || !editLocalMessage) {
-      return;
-    }
-
-    try {
-      if (revokeMessage) {
-        await revokeMessage(message);
-      } else {
-        await chat.revokeMessage(message);
-      }
+    if (!message) return;
+    const messageModel = TUIStore.getMessageModel(message?.ID);
+    messageModel.revokeMessage().then(() => {
       editLocalMessage(message);
-    } catch (error) {
+      enableSampleTaskStatus('revokeMessage');
+    }).catch((error: any) => {
       if (handleError) {
         handleError({
           functionName: 'revokeMessage',
@@ -71,7 +51,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
         Toast({ text, type: 'error' });
         throw new Error(error);
       }
-    }
+    });
   }, [message]);
 
   const handleReplyMessage = useCallback((event?) => {
@@ -110,7 +90,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     try {
       const res = await chat.resendMessage(message);
       editLocalMessage(res?.data?.message);
-    } catch (error) {
+    } catch (error: any) {
       if (handleError) {
         handleError({
           functionName: 'resendMessage',

package/src/components/TUIMessage/styles/color.scss

@@ -27,6 +27,7 @@
   .bubble {
     .edit {
       color: #147aff;
+      padding: 3px;
     }
   }
 }

package/src/components/TUIMessage/styles/layout.scss

@@ -23,6 +23,7 @@
     .name {
       display: inline-block;
       padding-bottom: 3px;
+      max-width: 60%;
     }
   }
 }
@@ -57,7 +58,7 @@
 .bubble {
   padding: 8px 16px;
   &-in {
-    border-radius: 16px 16px 16px 0;
+    border-radius: 0px 16px 16px 16px;
     &.group {
       border-radius: 0px 16px 16px 16px;
     }
@@ -104,8 +105,9 @@
     font-style: normal;
     font-weight: 500;
     font-size: 14px;
-    line-height: 17px;
+    line-height: 24px;
     &-p {
+      white-space: pre-wrap;
       display: inline;
       vertical-align: middle;
     }
@@ -136,9 +138,13 @@
   img {
     max-width: 300px;
   }
+  .img-h5 {
+    max-width: 200px;
+    max-height: 200px;
+  }
   .big-image {
-    max-width: 95%;
-    max-height: 95%;
+    max-width: 90%;
+    max-height: 90%;
   }
 }
 
@@ -146,6 +152,8 @@
   max-width: 300px;
   .snap-video {
     position: relative;
+    height: 100%;
+    border-radius: 10px;
     &::before {
       position: absolute;
       z-index: 1;
@@ -163,14 +171,18 @@
   }
   video {
     width: 100%;
+    height: 100%;
     border-radius: 10px;
   }
   .play-video {
     max-width: 95%;
-    max-height: 95%;
+    max-height: 65%;
   }
 }
-
+.message-video.message-video-h5 {
+  max-width: 200px;
+  max-height: 200px;
+}
 .message-file {
   display: flex;
   flex-direction: column;
@@ -317,6 +329,13 @@
     max-width: 300px;
     border-radius: 10px;
   }
+  .img-h5, .video-h5{
+    min-width: 60px;
+    min-height: 60px;
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: 10px;
+  }
   &::before {
     position: absolute;
     content: "";
@@ -358,6 +377,7 @@
   .plugin-popup-box{
     bottom: auto;
     top: 100%;
+    overflow: hidden;
   }
 
   &-box {
@@ -449,17 +469,20 @@
 @keyframes highLightedAnimation {
   0% {
     opacity: 1;
+    color: #ff9c19;
   }
   25% {
     opacity: 0.3;
   }
   50% {
+    color: #ff9c19;
     opacity: 1;
   }
   75% {
     opacity: 0.3;
   }
   100% {
+    color: #ff9c19;
     opacity: 1;
   }
 }
@@ -478,3 +501,7 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   }
 }
+
+.website {
+  color: #147aff !important;
+}

package/src/components/TUIMessage/utils/index.ts

@@ -127,7 +127,7 @@ export function handleTipMessageShowContext(message: Message) {
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.quit group')}`;
       break;
     case TencentCloudChat.TYPES.GRP_TIP_MBR_KICKED_OUT:
-      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')}${message.payload.operatorID}${t(
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')} ${message.payload.operatorID} ${t(
         'message.tip.kicked out of group',
       )}`;
       break;

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
-
+import { isPC } from '../../utils/env';
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
@@ -34,7 +34,7 @@ export function TUIMessageInputDefault():React.ReactElement {
   useEffect(() => {
     if (focus && textareaRef.current) {
       textareaRef.current.autofocus = true;
-      textareaRef?.current?.focus();
+      isPC && textareaRef?.current?.focus();
       textareaRef?.current?.addEventListener('paste', handlePasete);
     }
     return () => {

package/src/components/TUIMessageInput/hooks/useEmojiPicker.tsx

@@ -4,7 +4,7 @@ import {
   useCallback,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTUIChatActionContext } from '../../../context';
+import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
 import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
@@ -25,7 +25,6 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
   } = props;
 
   const { i18n } = useTranslation();
-  const { sendMessage, createFaceMessage } = useTUIChatActionContext('useEmojiPicker');
 
   const onSelectEmoji = (emoji:EmojiData) => {
     if (i18n.language === 'zh') {
@@ -36,10 +35,7 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
   };
 
   const sendFaceMessage = useCallback((emoji:EmojiData) => {
-    const message = createFaceMessage({
-      payload: emoji,
-    });
-    sendMessage(message);
+    TUIChatService.sendFaceMessage({ payload: emoji });
   }, []);
 
   return {

package/src/components/TUIMessageInput/hooks/useHandleForwardMessage.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';
 import TencentCloudChat, { Conversation, Message } from '@tencentcloud/chat';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
   useTUIChatActionContext, useTUIChatStateContext, useTUIKitContext,
@@ -11,15 +14,13 @@ export function useHandleForwardMessage(msg?:Message) {
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
   const [conversationList, setConversationList] = useState([]);
-  const { sendMessage, createForwardMessage } = useTUIChatActionContext('useHandleForwardMessage');
   const { chat } = useTUIKitContext('TUIChat');
 
   const message = msg || operateData[MESSAGE_OPERATE.FORWARD];
 
   const sendForwardMessage = (list:Array<Conversation>) => {
     list.map((item:Conversation) => {
-      const forwardMessage = createForwardMessage({ conversation: item, message });
-      sendMessage(forwardMessage);
+      TUIChatService.sendForwardMessage([item], [message]);
       return item;
     });
   };

package/src/components/TUIMessageInput/hooks/useMessageInputText.tsx

@@ -3,11 +3,15 @@ import React, {
   ChangeEventHandler,
   MutableRefObject,
 } from 'react';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
   useTUIKitContext,
 } from '../../../context';
+import { enableSampleTaskStatus } from '../../untils';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
@@ -29,7 +33,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
   } = props;
 
   const { chat } = useTUIKitContext('useMessageInputText');
-  const { sendMessage, createTextMessage, operateMessage } = useTUIChatActionContext('TUIMessageInput');
+  const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();
 
@@ -64,8 +68,11 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     if (cloudCustomData.messageReply) {
       options.cloudCustomData = JSON.stringify(cloudCustomData);
     }
-    const message = createTextMessage(options);
-    await sendMessage(message);
+    TUIChatService.sendTextMessage(options).then((res: any) => {
+      const { message } = res.data;
+      setFirstSendMessage(message);
+    });
+    enableSampleTaskStatus('sendMessage');
     dispatch({
       getNewText: (text:string) => '',
       type: CONSTANT_DISPATCH_TYPE.SET_TEXT,

package/src/components/TUIMessageInput/hooks/useUploadPicker.tsx

@@ -2,7 +2,11 @@ import {
   PropsWithChildren,
   useCallback,
 } from 'react';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_TYPE_NAME } from '../../../constants';
+import { enableSampleTaskStatus } from '../../untils';
 import { useTUIChatActionContext } from '../../../context';
 import type { IbaseStateProps } from './useMessageInputState';
 
@@ -12,29 +16,21 @@ export interface filesData {
 
 export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildren<T>) {
   const {
-    sendMessage,
-    createImageMessage,
-    createVideoMessage,
-    createFileMessage,
     updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
   const creatUploadMessage = {
-    [MESSAGE_TYPE_NAME.IMAGE]: createImageMessage,
-    [MESSAGE_TYPE_NAME.VIDEO]: createVideoMessage,
-    [MESSAGE_TYPE_NAME.FILE]: createFileMessage,
+    [MESSAGE_TYPE_NAME.IMAGE]: TUIChatService.sendImageMessage,
+    [MESSAGE_TYPE_NAME.VIDEO]: TUIChatService.sendVideoMessage,
+    [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,
   };
 
   const sendUploadMessage = useCallback((file: filesData, type:MESSAGE_TYPE_NAME) => {
-    const message = creatUploadMessage[type]({
+    creatUploadMessage[type]({
       payload: file,
-      onProgress(num:number) {
-        message.progress = num;
-        updateUploadPendingMessageList(message);
-      },
     });
-    sendMessage(message);
-  }, [sendMessage]);
+    enableSampleTaskStatus('sendMessage');
+  }, []);
 
   return {
     sendUploadMessage,

package/src/components/TUIMessageInput/styles/color.scss

@@ -10,7 +10,7 @@
 
 .input-plugin-popup {
   &-box {
-    background: rgba(249, 249, 249, 0.94);
+    background: #FFFFFF;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
     border-radius: 16px;
   }