@tencentcloud/chat-uikit-react 2.1.2 → 2.1.4

package/src/components/TUIMessage/MessageBubble.tsx

@@ -47,26 +47,28 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
   ) && message?.status === MESSAGE_STATUS.UNSEND);
 
   const handleMouseEnter = () => {
-    setActiveMessageID(message.ID);
+    setActiveMessageID && message && setActiveMessageID(message?.ID);
     setPluginsShow(true);
   };
   const handleMouseLeave = () => {
-    setActiveMessageID(message.ID);
+    setActiveMessageID && message && setActiveMessageID(message.ID);
     setPluginsShow(false);
   };
 
   const activeMessage = () => {
-    setActiveMessageID(message.ID);
+    setActiveMessageID && message && setActiveMessageID(message.ID);
   };
 
   useEffect(() => {
-    if (activeMessageID !== message.ID) {
+    if (activeMessageID !== message?.ID) {
       setPluginsShow(false);
     }
   }, [activeMessageID]);
 
   const handleReplyMessage = () => {
-    setHighlightedMessageId(replyMessage?.ID);
+    // eslint-disable-next-line
+    // @ts-ignore
+    setHighlightedMessageId  && setHighlightedMessageId(replyMessage?.ID);
   };
 
   return (

package/src/components/TUIMessage/MessageContext.tsx

@@ -15,7 +15,7 @@ import { useMessageContextHandler } from './hooks';
 import { MessageStatus } from './MessageStatus';
 import { useTUIMessageContext } from '../../context';
 
-const components = {
+const components: any = {
   [TencentCloudChat.TYPES.MSG_TEXT]: MessageText,
   [TencentCloudChat.TYPES.MSG_FACE]: MessageFace,
   [TencentCloudChat.TYPES.MSG_IMAGE]: MessageImage,
@@ -51,7 +51,7 @@ function MessageContextWithContext <T extends MessageContextProps>(
     LocationElement,
   } = useTUIMessageContext('MessageCustom');
 
-  const CustemComponents = {
+  const CustemComponents: any = {
     [TencentCloudChat.TYPES.MSG_TEXT]: TextElement,
     [TencentCloudChat.TYPES.MSG_FACE]: FaceElement,
     [TencentCloudChat.TYPES.MSG_IMAGE]: ImageElement,
@@ -63,7 +63,7 @@ function MessageContextWithContext <T extends MessageContextProps>(
     [TencentCloudChat.TYPES.MSG_LOCATION]: LocationElement,
   };
 
-  const Elements = CustemComponents[message?.type] || components[message?.type];
+  const Elements = message?.type && (CustemComponents[message.type] || components[message.type]);
   return Elements
   && (
   <Elements context={context} message={message}>

package/src/components/TUIMessage/MessageCustom.tsx

@@ -15,11 +15,11 @@ function MessageCustomWithContext <T extends MessageContextProps>(
   } = props;
   const { t } = useTranslation();
   const { MessageCustomPlugins } = useComponentContext('MessageCustom');
-  const handleContext = (data) => {
+  const handleContext = (data: any) => {
     if (data.data === 'Hyperlink') {
       const extension = JSONStringToParse(data?.extension);
       if (extension?.item) {
-        return extension?.item.map((item) => <a target="_blank" key={item.value} href={item.value} rel="noreferrer">{item.value}</a>);
+        return extension?.item.map((item: any) => <a target="_blank" key={item.value} href={item.value} rel="noreferrer">{item.value}</a>);
       }
       if (extension?.hyperlinks_text) {
         const hyperlinks = extension.hyperlinks_text;
@@ -38,6 +38,8 @@ function MessageCustomWithContext <T extends MessageContextProps>(
     const botMessage = JSONStringToParse(data.data);
     if (botMessage?.chatbotPlugin === 1 && botMessage?.src === 15 && (botMessage?.subtype === 'welcome_msg' || botMessage?.subtype === 'clarify_msg')) {
       return (
+        // eslint-disable-next-line
+        // @ts-ignore
         <MessageCustomPlugins data={JSONStringToParse(data.data).content} />
       );
     }
@@ -45,7 +47,7 @@ function MessageCustomWithContext <T extends MessageContextProps>(
   };
 
   return (
-    <div className={`bubble message-custom bubble-${message.flow}  ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
+    <div className={`bubble message-custom bubble-${message?.flow}  ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       {handleContext(context?.custom)}
       {children}
     </div>

package/src/components/TUIMessage/MessageFace.tsx

@@ -11,8 +11,8 @@ function MessageFaceWithContext <T extends MessageContextProps>(
   } = props;
 
   return (
-    <div className={`bubble message-face bubble-${message.flow}`}>
-      <img className="img" src={context.url} alt="" />
+    <div className={`bubble message-face bubble-${message?.flow}`}>
+      <img className="img" src={context?.url} alt="" />
       {children}
     </div>
   );

package/src/components/TUIMessage/MessageFile.tsx

@@ -13,18 +13,18 @@ function MessageFileWithContext <T extends MessageContextProps>(
   } = props;
   return (
     <a
-      href={context.url}
-      download={context.name}
+      href={context?.url}
+      download={context?.name}
       target="_parent"
-      className={`bubble message-file bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}
+      className={`bubble message-file bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}
       rel="noreferrer"
     >
       <main className="message-file-main">
         <Icon className="icon" width={15} height={20} type={IconTypes.FILE} />
-        <label htmlFor="message-file">{ context.name }</label>
+        <label htmlFor="message-file">{ context?.name }</label>
       </main>
       <div className="message-file-footer">
-        <span className="message-file-size">{ context.size }</span>
+        <span className="message-file-size">{ context?.size }</span>
         {children}
       </div>
     </a>

package/src/components/TUIMessage/MessageImage.tsx

@@ -15,12 +15,14 @@ function MessageImageWithContext <T extends MessageContextProps>(
 
   const [show, setShow] = useState(false);
 
-  const bigImageInfo = message?.payload?.imageInfoArray?.filter((item) => item.type === 0);
+  const bigImageInfo = message?.payload?.imageInfoArray?.filter((item: any) => item.type === 0);
 
   return (
     <div className="message-image">
       <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <img className={`img ${isH5 ? 'img-h5' : ''} 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/MessageLocation.tsx

@@ -11,9 +11,9 @@ function MessageLocationWithContext <T extends MessageContextProps>(
   } = props;
 
   return (
-    <a className="bubble message-location" href={context.href} target="_blank" title="点击查看详情" rel="noreferrer">
-      <span>{context.description}</span>
-      <img src={context.url} alt="" />
+    <a className="bubble message-location" href={context?.href} target="_blank" title="点击查看详情" rel="noreferrer">
+      <span>{context?.description}</span>
+      <img src={context?.url} alt="" />
       {children}
     </a>
   );

package/src/components/TUIMessage/MessageMerger.tsx

@@ -12,12 +12,12 @@ function MessageMergerWithContext <T extends MessageContextProps>(
   } = props;
 
   return (
-    <div className={`bubble message-merger bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
-      <h3>{context.title}</h3>
+    <div className={`bubble message-merger bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
+      <h3>{context?.title}</h3>
       <ul className="message-merger-list">
         {
           context?.abstractList.length > 0
-          && context.abstractList.map((item:string, index:number) => {
+          && context?.abstractList.map((item:string, index:number) => {
             const key = item + index;
             return (<li className="message-merger-item" key={key}>{item}</li>);
           })

package/src/components/TUIMessage/MessageName.tsx

@@ -26,7 +26,7 @@ export function MessageName <T extends MessageNameProps>(
   && message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP;
 
   if (!show || showType === messageShowType.NONE) {
-    return null;
+    return <></>;
   }
 
   if (CustomName) {

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -4,6 +4,7 @@ import TencentCloudChat from '@tencentcloud/chat';
 import './styles/index.scss';
 
 import { Plugins, PluginsProps } from '../Plugins';
+import { IPluginsRef } from '../ConversationPreview';
 import { Icon, IconTypes } from '../Icon';
 import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
 import { useMessagePluginElement, useMessageHandler } from './hooks';
@@ -41,7 +42,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const { t } = useTranslation();
   const [className, setClassName] = useState('');
   const [popStyle, setPopStyle] = useState({});
-  const pluginsRef = useRef(null);
+  const pluginsRef = useRef<IPluginsRef>();
 
   const { message, plugin: contextPlugin } = useTUIMessageContext('MessagePlugins');
   const { messageListRef } = useTUIChatStateContext('MessageBubbleWithContext');
@@ -88,7 +89,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
     },
   };
 
-  const handleVisible = (data) => {
+  const handleVisible = (data: any) => {
     if (data.x && data.y) {
       const isTop = data.y < data.height ? true : data.top;
       const isLeft = data.x < data.width ? true : data.left;
@@ -108,7 +109,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
       </div>
     ),
     handle: (e) => {
-      pluginsRef.current.closeMore();
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       handleRevokeMessage(e);
     },
     message,
@@ -125,7 +126,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
       </div>
     ),
     handle: (e) => {
-      pluginsRef.current.closeMore();
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       handleDelMessage(e);
     },
     message,
@@ -141,7 +142,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
       </div>
     ),
     handle: (e) => {
-      pluginsRef.current.closeMore();
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       handleReplyMessage(e);
     },
     message,
@@ -157,7 +158,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
       </div>
     ),
     handle: (e) => {
-      pluginsRef.current.closeMore();
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       handleCopyMessage(e);
     },
     message,
@@ -173,8 +174,8 @@ export function MessagePlugins <T extends MessagePluginsProps>(
       </div>
     ),
     handle: (e) => {
-      pluginsRef.current.closeMore();
-      handleResendMessage(e);
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
+      handleResendMessage();
     },
     message,
     isShow: pluginConfig.resend.isShow && message?.status !== MESSAGE_STATUS.SUCCESS,
@@ -189,7 +190,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
       </div>
     ),
     handle: (e) => {
-      pluginsRef.current.closeMore();
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       handleForWardMessage(e);
     },
     message,
@@ -211,7 +212,8 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const MoreIcon = propsMoreIcon || contextPlugin?.MoreIcon || <Icon className="icon-more" width={16} height={16} type={IconTypes.MORE} />;
 
   const showNumber = propsShowNumber || contextPlugin?.showNumber || 0;
-
+  // eslint-disable-next-line
+  // @ts-ignore
   return message?.status !== MESSAGE_STATUS.UNSEND && (
   <Plugins
     className="message-plugin"

package/src/components/TUIMessage/MessageProgress.tsx

@@ -48,7 +48,7 @@ function MessageProgressWithContext <T extends MessageProgressProps>(
       uploadPendingMessageList.map((item:MessageProgressItem) => {
         if (item?.ID === message?.ID) {
           setProgressMessage(item);
-          setProgress(item?.progress);
+          item?.progress && setProgress(item.progress);
         }
         return item;
       });
@@ -56,13 +56,14 @@ function MessageProgressWithContext <T extends MessageProgressProps>(
   }, [uploadPendingMessageList]);
 
   if (!isShow) {
-    return null;
+    return <></>;
   }
 
-  if (Progress) {
+  if (Progress && progressMessage) {
     return <Progress message={progressMessage} />;
   }
-
+  // eslint-disable-next-line
+  // @ts-ignore
   return handleLoading() && (
     <div className="progress-box">
       <span

package/src/components/TUIMessage/MessageRevoke.tsx

@@ -15,7 +15,7 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
   const { operateMessage } = useTUIChatActionContext('MessageRevokeWithContext');
 
   const handleRevoke = useCallback(() => {
-    operateMessage({
+    operateMessage && message && operateMessage({
       [MESSAGE_OPERATE.REVOKE]: message,
     });
   }, [operateMessage]);

package/src/components/TUIMessage/MessageText.tsx

@@ -18,7 +18,7 @@ function MessageTextWithContext <T extends MessageContextProps>(
   } = props;
   const { MessageTextPlugins } = useComponentContext('MessageText');
   const { firstSendMessage } = useTUIChatStateContext('MessageText');
-  if (MessageTextPlugins && message.flow === 'in' && (firstSendMessage?.time <= message?.time)) {
+  if (MessageTextPlugins && message?.flow === 'in' && (firstSendMessage && firstSendMessage?.time <= message?.time)) {
     return (
       <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
         <MessageTextPlugins data={message} />
@@ -34,10 +34,10 @@ function MessageTextWithContext <T extends MessageContextProps>(
     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={`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;
+        {context?.text.map((item: any, index: number) => {
+          const key = message && message?.ID + index;
           if (item.name === 'text') {
             return (
               <p

package/src/components/TUIMessage/MessageVideo.tsx

@@ -19,15 +19,15 @@ function MessageVideoWithContext <T extends MessageContextProps>(
   return (
     <div className={`message-video ${isH5 ? 'message-video-h5' : ''}`}>
       <div className={`${message?.status === MESSAGE_STATUS.SUCCESS ? 'snap-video' : ''}`} role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        {isPC && (<video muted controls={false} src={context.url} />)}
-        {isH5 && (<img src={message.payload.snapshotUrl || transparentPosterUrl} style={{ maxHeight: '200px', maxWidth: '200px', borderRadius: '10px' }} />)}
+        {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={(e) => { e.stopPropagation(); setShow(false); }}>
-          <video className="play-video" autoPlay controls src={context.url} />
+          <video className="play-video" autoPlay controls src={context?.url} />
         </Model>
         )
       }

package/src/components/TUIMessage/TUIMessage.tsx

@@ -92,7 +92,7 @@ function TUIMessageWithContext <T extends TUIMessageProps>(
 
   const filter = propsFilter || messageConfig?.filter;
   const message = propsMessage || messageConfig?.message;
-  if (filter) {
+  if (filter && message) {
     filter(message);
   }
 

package/src/components/TUIMessage/TUIMessageDefault.tsx

@@ -69,7 +69,7 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
         key={message?.ID}
       >
         {prefix}
-        <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />
+        {message && <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />}
         <main data-message-id={message?.ID} className="content">
           <MessageName message={message} CustomName={customName} showType={showName} />
           <MessageBubble
@@ -77,6 +77,8 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
             Context={MessageContextUIComponent}
             Plugins={MessagePlugins}
           >
+            {/* // eslint-disable-next-line
+             // @ts-ignore */}
             <MessageContextUIComponent message={message} />
           </MessageBubble>
         </main>

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

@@ -8,11 +8,11 @@ import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
 import { Toast } from '../../Toast';
 
 interface MessageHandlerProps {
-  handleError?: (error) => void,
+  handleError?: (error: any) => void,
   message?: Message,
 }
 
-export const useMessageHandler = (props?: MessageHandlerProps) => {
+export const useMessageHandler = (props: MessageHandlerProps) => {
   const {
     message,
     handleError,
@@ -26,19 +26,19 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
   const { t } = useTranslation();
   const { chat } = useTUIKitContext('useDeleteHandler');
 
-  const handleDelMessage = useCallback(async (event?) => {
+  const handleDelMessage = useCallback(async (event?: any) => {
     event.preventDefault();
     if (!message) return;
     const messageModel = TUIStore.getMessageModel(message?.ID);
     messageModel.deleteMessage();
   }, [message]);
 
-  const handleRevokeMessage = useCallback(async (event?) => {
+  const handleRevokeMessage = useCallback(async (event?: any) => {
     event.preventDefault();
     if (!message) return;
     const messageModel = TUIStore.getMessageModel(message?.ID);
     messageModel.revokeMessage().then(() => {
-      editLocalMessage(message);
+      editLocalMessage && editLocalMessage(message);
       enableSampleTaskStatus('revokeMessage');
     }).catch((error: any) => {
       if (handleError) {
@@ -54,7 +54,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     });
   }, [message]);
 
-  const handleReplyMessage = useCallback((event?) => {
+  const handleReplyMessage = useCallback((event?:any) => {
     event.preventDefault();
     if (!message?.ID || !chat || !operateMessage) {
       return;
@@ -64,11 +64,11 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     });
   }, [message]);
 
-  const handleCopyMessage = useCallback((event?) => {
+  const handleCopyMessage = useCallback((event?:any) => {
     event.preventDefault();
     if (navigator.clipboard) {
       // clipboard api
-      navigator.clipboard.writeText(message.payload.text);
+      navigator.clipboard.writeText(message?.payload.text);
     } else {
       const textarea = document.createElement('textarea');
       document.body.appendChild(textarea);
@@ -76,7 +76,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
       textarea.style.position = 'fixed';
       textarea.style.clip = 'rect(0 0 0 0)';
       textarea.style.top = '10px';
-      textarea.value = message.payload.text;
+      textarea.value = message?.payload.text;
       // select
       textarea.select();
       // copy
@@ -86,10 +86,10 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     }
   }, [message]);
 
-  const handleResendMessage = useCallback(async (event?) => {
+  const handleResendMessage = useCallback(async () => {
     try {
-      const res = await chat.resendMessage(message);
-      editLocalMessage(res?.data?.message);
+      const res = message && await chat.resendMessage(message);
+      editLocalMessage && editLocalMessage(res?.data?.message);
     } catch (error: any) {
       if (handleError) {
         handleError({
@@ -103,7 +103,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     }
   }, [message]);
 
-  const handleForWardMessage = useCallback(async (event?) => {
+  const handleForWardMessage = useCallback(async (event?:any) => {
     event.preventDefault();
     if (!message?.ID || !chat || !operateMessage) {
       return;

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

@@ -7,7 +7,7 @@ interface messageContextParams {
   message?: Message,
 }
 
-const replyType = {
+const replyType: any = {
   [TencentCloudChat.TYPES.MSG_TEXT]: 1,
   [TencentCloudChat.TYPES.MSG_FACE]: 8,
   [TencentCloudChat.TYPES.MSG_IMAGE]: 3,
@@ -30,14 +30,14 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
   const { messageList } = useTUIChatStateContext('useMessageReply');
 
   useLayoutEffect(() => {
-    handleMessageReply(message);
+    message && handleMessageReply(message);
   }, [message]);
 
   const handleMessageReply = (data:Message) => {
     if (!data?.cloudCustomData) {
       return;
     }
-    const cloudCustomData = JSONStringToParse(message?.cloudCustomData);
+    const cloudCustomData = JSONStringToParse(data?.cloudCustomData);
     const reply = cloudCustomData?.messageReply || '';
     if (!reply) {
       return;
@@ -45,13 +45,15 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
     setMessageReply(reply);
     setSender(reply?.messageSender);
     setMessageID(reply?.messageID);
-    const replyData = messageList.filter((item) => {
+    const replyData = messageList?.filter((item) => {
       const isSomeID = item.ID === reply?.messageID;
       const isSomeType = isSomeID && replyType[item.type] === reply.messageType;
       const isSomeContent = item.type === TencentCloudChat.TYPES.MSG_TEXT
         ? item.payload.text === reply.messageAbstract : true;
       return isSomeID && isSomeType && isSomeContent;
     });
+    // eslint-disable-next-line
+    // @ts-ignore
     setReplyMessage(replyData[0] || chat.findMessage(reply?.messageID));
   };
 

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

@@ -1,15 +1,14 @@
 import { emojiMap, emojiUrl } from './emojiMap';
-/** 传入messageBody（群系统消息SystemMessage，群提示消息GroupTip除外）
+/** Pass in messageBody (group system message SystemMessage, except group prompt message GroupTip）
  * payload = {
  *  msgType: 'TIMTextElem',
  *  msgContent: {
- *    text: 'AAA[龇牙]AAA[龇牙]AAA[龇牙AAA]'
+ *    text: 'AAA[smile]AAA[smile]AAA[smile]'
  *  }
  *}
  * */
 export function decodeText(payload:any) {
   const renderDom = [];
-  // 文本消息
   let temp = payload.text;
   let left = -1;
   let right = -1;

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

@@ -138,7 +138,6 @@ export function handleTipMessageShowContext(message: Message) {
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by revoked administrator')}`;
       break;
     case TencentCloudChat.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
-      // options.text =  `${userName} 修改群组资料`;
       options.text = handleTipGrpUpdated(message);
       break;
     case TencentCloudChat.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
@@ -448,7 +447,7 @@ export function formatTime(secondTime:number) {
   if (time >= 3600) {
     hour = parseInt(`${time / 3600}`, 10) < 10 ? `0${parseInt(`${time / 3600}`, 10)}` : parseInt(`${time / 3600}`, 10);
     minite = parseInt(`${(time % 60) / 60}`, 10) < 10 ? `0${parseInt(`${(time % 60) / 60}`, 10)}` : parseInt(`${(time % 60) / 60}`, 10);
-    seconds = time % 3600 < 10 ? `0${time % 3600}` : time % 3600;
+    seconds  = time % 3600 < 10 ? parseInt(`0${time % 3600}`) : time % 3600;
     if (seconds > 60) {
       minite = parseInt(`${seconds / 60}`, 10) < 10 ? `0${parseInt(`${seconds / 60}`, 10)}` : parseInt(`${seconds / 60}`, 10);
       seconds = seconds % 60 < 10 ? `0${seconds % 60}` : seconds % 60;

package/src/components/TUIMessageInput/EmojiPicker.tsx

@@ -22,7 +22,7 @@ export function EmojiPicker():React.ReactElement {
     sendFaceMessage,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
 
-  const handleSelectEmoji = (e) => {
+  const handleSelectEmoji = (e: any) => {
     const emoji: EmojiData = {
       index,
       data: e.target.dataset.data,
@@ -31,14 +31,14 @@ export function EmojiPicker():React.ReactElement {
       return;
     }
     if (index === 0) {
-      onSelectEmoji(emoji);
+      onSelectEmoji && onSelectEmoji(emoji);
     } else {
-      sendFaceMessage(emoji);
+      sendFaceMessage && sendFaceMessage(emoji);
       handleShow();
     }
   };
 
-  const handleVisible = (data) => {
+  const handleVisible = (data: any) => {
     setClassName(`${!data.top && 'emoji-plugin-top'} ${!data.left && 'emoji-plugin-right'}`);
   };
 

package/src/components/TUIMessageInput/InputPluginsDefalut.tsx

@@ -4,12 +4,12 @@ import './styles/index.scss';
 
 import { EmojiPicker } from './EmojiPicker';
 import { Plugins } from '../Plugins';
+import { IPluginsRef } from '../ConversationPreview';
 import { useUploadElement } from './hooks/useUploadElement';
 import { MESSAGE_TYPE_NAME } from '../../constants';
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 import { useTUIChatStateContext } from '../../context';
-
 export function InputPluginsDefalut():React.ReactElement {
   const {
     sendUploadMessage,
@@ -60,7 +60,7 @@ export function InputPluginsDefalut():React.ReactElement {
     true,
   );
 
-  const pluginsRef = useRef(null);
+  const pluginsRef = useRef<IPluginsRef>();
 
   const ImagePicker = isImagePicker && useUploadElement({
     children: (
@@ -72,8 +72,8 @@ export function InputPluginsDefalut():React.ReactElement {
     type: 'image',
     accept: 'image/*',
     onChange: (file:HTMLInputElement | File) => {
-      pluginsRef.current.closeMore();
-      sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
+      sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
     },
   });
 
@@ -87,8 +87,8 @@ export function InputPluginsDefalut():React.ReactElement {
     type: 'video',
     accept: 'video/*',
     onChange: (file:HTMLInputElement | File) => {
-      pluginsRef.current.closeMore();
-      sendUploadMessage({ file }, MESSAGE_TYPE_NAME.VIDEO);
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
+      sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.VIDEO);
     },
   });
 
@@ -102,8 +102,8 @@ export function InputPluginsDefalut():React.ReactElement {
     type: 'file',
     accept: 'file/*',
     onChange: (file:HTMLInputElement | File) => {
-      pluginsRef.current.closeMore();
-      sendUploadMessage({ file }, MESSAGE_TYPE_NAME.FILE);
+      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
+      sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.FILE);
     },
   });
   const plugins = [