@tencentcloud/chat-uikit-react 2.1.0 → 2.1.3

package/src/components/TUIConversationList/hooks/useConversationUpdate.tsx

@@ -19,7 +19,7 @@ export const useConversationUpdate = (
           setConversationList(filterConversation(event.data));
         } else {
           setConversationList(event.data.filter(
-            (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
+            (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
           ));
         }
       }
@@ -27,7 +27,7 @@ export const useConversationUpdate = (
         forceUpdate();
       }
       if (customHandler && typeof customHandler === 'function') {
-        customHandler(setConversationList, event);
+        setConversationList && customHandler(setConversationList, event);
       }
     };
     chat?.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);

package/src/components/TUIKit/TUIKit.tsx

@@ -3,7 +3,7 @@ import { ChatSDK, Conversation } from '@tencentcloud/chat';
 import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { useTranslation } from 'react-i18next';
 import { isH5, isPC } from '../../utils/env';
-import { useTUIKit } from './hooks/useTUIKit';
+import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
 import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
 import { TUIKitProvider } from '../../context/TUIKitContext';
 import './styles/index.scss';
@@ -14,6 +14,7 @@ import { TUIManage } from '../TUIManage';
 import { TUIProfile } from '../TUIProfile';
 import { TUIContact } from '../TUIContact';
 import { TUIContactInfo } from '../TUIContact/TUIContactInfo/TUIContactInfo';
+import { TUIKIT_TABBAR } from '../../constants';
 import '../../locales/index';
 import chats from '../Icon/images/chats.svg';
 import chatsSelected from '../Icon/images/chats-selected.svg';
@@ -21,7 +22,7 @@ import contacts from '../Icon/images/contacts.svg';
 import contactsSelected from '../Icon/images/contacts-selected.svg';
 
 export interface ChatProps {
-  chat?: ChatSDK | null,
+  chat?: any,
   language?: string,
   customClasses?: unknown,
   activeConversation?: Conversation,
@@ -33,23 +34,27 @@ interface RenderPCProps {
   setModuleValue: (value: string) => void
 }
 interface RenderH5Props {
-  currentConversationID: string
+  moduleValue: string,
+  currentConversationID: string,
+  tabbarRender: any,
+  contactData: UseContactParams,
+  setModuleValue: (value: string) => void
 }
 
 const tabbarList = [
   {
     id: 1,
-    name: 'chats',
+    name: TUIKIT_TABBAR.CHATS,
     icon: chats,
     selectedIcon: chatsSelected,
-    value: 'chats',
+    value: TUIKIT_TABBAR.CHATS,
   },
   {
     id: 2,
-    name: 'contacts',
+    name: TUIKIT_TABBAR.CONTACTS,
     icon: contacts,
     selectedIcon: contactsSelected,
-    value: 'contacts',
+    value: TUIKIT_TABBAR.CONTACTS,
   },
 ];
 const TUIMessageInputConfig = {
@@ -63,20 +68,20 @@ function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCPro
       <div className="sample-chat-left-container">
         <TUIProfile className="sample-chat-profile" />
         {tabbarRender}
-        {moduleValue === 'chats' && <TUIConversation />}
-        {moduleValue === 'contacts' && <TUIContact />}
+        {moduleValue === TUIKIT_TABBAR.CHATS && <TUIConversation />}
+        {moduleValue === TUIKIT_TABBAR.CONTACTS && <TUIContact />}
       </div>
-      {moduleValue === 'chats' && (
+      {moduleValue === TUIKIT_TABBAR.CHATS && (
       <>
         <TUIChat />
         <TUIManage />
       </>
       )}
-      {moduleValue === 'contacts' && (
+      {moduleValue === TUIKIT_TABBAR.CONTACTS && (
       <TUIContact>
         <TUIContactInfo
           showChat={() => {
-            setModuleValue('chats');
+            setModuleValue(TUIKIT_TABBAR.CHATS);
           }}
         />
       </TUIContact>
@@ -85,21 +90,34 @@ function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCPro
   );
 }
 
-function RenderForH5({ currentConversationID }: RenderH5Props) {
+function RenderForH5({
+  moduleValue, contactData, tabbarRender, currentConversationID, setModuleValue,
+}: RenderH5Props) {
   return (
     <>
-      {!currentConversationID && (
+      {!currentConversationID && !contactData && (
       <div className="sample-chat-h5-container">
         <TUIProfile className="sample-profile" />
-        <TUIConversation />
+        {tabbarRender}
+        {moduleValue === TUIKIT_TABBAR.CHATS && <TUIConversation />}
+        {moduleValue === TUIKIT_TABBAR.CONTACTS && <TUIContact />}
       </div>
       )}
-      {currentConversationID && (
+      {moduleValue === TUIKIT_TABBAR.CHATS && currentConversationID && (
       <>
         <TUIChat TUIMessageInputConfig={TUIMessageInputConfig} />
         <TUIManage />
       </>
       )}
+      { moduleValue === TUIKIT_TABBAR.CONTACTS && contactData && (
+        <TUIContact>
+          <TUIContactInfo
+            showChat={() => {
+              setModuleValue(TUIKIT_TABBAR.CHATS);
+            }}
+          />
+        </TUIContact>
+      )}
     </>
   );
 }
@@ -183,7 +201,7 @@ export function TUIKit<
     <TUIKitProvider value={chatContextValue}>
       <div className="tui-kit">
         {children || (isPC && <RenderForPC moduleValue={moduleValue} tabbarRender={tabbarRender} setModuleValue={setModuleValue} />)
-        || (isH5 && <RenderForH5 currentConversationID={currentConversationID} />)}
+        || (isH5 && <RenderForH5 contactData={contactData} moduleValue={moduleValue} tabbarRender={tabbarRender} currentConversationID={currentConversationID} setModuleValue={setModuleValue} />)}
       </div>
     </TUIKitProvider>
   );

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -42,7 +42,7 @@ export const useTUIKit = ({
   language,
 }:UseChatParams) => {
   const { i18n } = useTranslation();
-  const [conversation, setConversation] = useState<Conversation>(paramsActiveConversation);
+  const [conversation, setConversation] = useState<Conversation | undefined>(paramsActiveConversation);
   const [myProfile, setMyProfile] = useState<Profile>();
   const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
   const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
@@ -61,10 +61,10 @@ export const useTUIKit = ({
       if (activeConversation) {
         chat?.setMessageRead({ conversationID: activeConversation.conversationID });
       }
-      if (conversation && (activeConversation.conversationID !== conversation.conversationID)) {
+      if (conversation && (activeConversation?.conversationID !== conversation.conversationID)) {
         setTUIManageShow(false);
       }
-      setConversation(activeConversation);
+      activeConversation && setConversation(activeConversation);
     },
     [chat],
   );
@@ -73,7 +73,7 @@ export const useTUIKit = ({
   };
 
   useEffect(() => {
-    setConversation(paramsActiveConversation);
+    paramsActiveConversation && setConversation(paramsActiveConversation);
   }, [paramsActiveConversation]);
   return {
     conversation,

package/src/components/TUIManage/TUIManage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Conversation} from '@tencentcloud/chat';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
@@ -10,11 +11,13 @@ import { getMessageProfile } from '../ConversationPreview/utils';
 import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
 import { useConversation } from '../../hooks';
 
-export function TUIManage() {
+
+function UnMemoizedTUIManage<T>(
+):React.ReactElement {
   const { t } = useTranslation();
-  const [conversation, setConversation] = useState(null);
-  const [profile, setProfile] = useState(null);
-  const [isPinned, setIsPinned] = useState(false);
+  const [conversation, setConversation] = useState<Conversation>();
+  const [profile, setProfile] = useState<any>();
+  const [isPinned, setIsPinned] = useState<boolean>(false);
   const [forceUpdateCount, setForceUpdateCount] = useState(0);
   const {
     conversation: activeConversation,
@@ -23,30 +26,31 @@ export function TUIManage() {
     TUIManageShow,
     setTUIManageShow,
   } = useTUIKitContext('TUIManage');
-  useConversationUpdate(null, () => {
+  useConversationUpdate(undefined, () => {
     setForceUpdateCount((count) => count + 1);
   });
   const { pinConversation, deleteConversation } = useConversation(chat);
-  const pinChatChange = (e) => {
+  const pinChatChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsPinned(e.target.checked);
-    pinConversation({
+    conversation?.conversationID && pinConversation({
       conversationID: conversation.conversationID,
       isPinned: e.target.checked,
     });
   };
   const handleDelete = () => {
-    deleteConversation(conversation.conversationID);
-    setActiveConversation(null);
+    conversation?.conversationID && deleteConversation(conversation.conversationID);
+    setActiveConversation(undefined);
   };
   const close = () => {
-    setTUIManageShow(false);
+    setTUIManageShow && setTUIManageShow(false);
   };
   useEffect(() => {
     setConversation(activeConversation);
-    setProfile(getMessageProfile(activeConversation));
+    activeConversation && setProfile(getMessageProfile(activeConversation));
     setIsPinned(activeConversation ? activeConversation.isPinned : false);
   }, [activeConversation, forceUpdateCount]);
-
+  // eslint-disable-next-line
+  // @ts-ignore
   return (
     TUIManageShow
     && activeConversation && (
@@ -91,7 +95,7 @@ export function TUIManage() {
               <div className="manage-handle-title">
                 {t('TUIConversation.Pin')}
               </div>
-              <Switch onChange={pinChatChange} checked={isPinned} />
+              <Switch onChange={(e: any)=> {pinChatChange(e)}} checked={isPinned} />
             </div>
             {isPC && (
               <div
@@ -110,3 +114,6 @@ export function TUIManage() {
     )
   );
 }
+
+export const TUIManage = React.memo(UnMemoizedTUIManage) as unknown as
+typeof UnMemoizedTUIManage;

package/src/components/TUIMessage/MessageAudio.tsx

@@ -24,7 +24,7 @@ function MessageAudioWithContext <T extends MessageContextProps>(
     if (audioSource && audioSource !== audioRef?.current) {
       audioSource.pause();
       audioSource.currentTime = 0;
-      setAudioSource(null);
+      setAudioSource && setAudioSource(null);
     }
     if (audioRef?.current) {
       if (!audioRef.current.paused) {
@@ -33,7 +33,7 @@ function MessageAudioWithContext <T extends MessageContextProps>(
       } else {
         audioRef.current.play();
         setPlayClassName(true);
-        setAudioSource(audioRef.current);
+        setAudioSource && setAudioSource(audioRef.current);
       }
     }
   }, [audioRef, audioSource]);
@@ -42,8 +42,10 @@ function MessageAudioWithContext <T extends MessageContextProps>(
     setPlayClassName(false);
   };
   const endFunction = () => {
-    setAudioSource(null);
-    audioRef.current.currentTime = 0;
+    setAudioSource && setAudioSource(null);
+    if(audioRef.current) {
+      audioRef.current.currentTime = 0
+    }
     pauseFunction();
   };
 
@@ -52,7 +54,7 @@ function MessageAudioWithContext <T extends MessageContextProps>(
       audioRef.current.addEventListener('pause', pauseFunction);
       audioRef.current.addEventListener('ended', endFunction);
       audioRef.current.addEventListener('canplay', () => {
-        setCurrentTime(parseInt(`${audioRef.current.duration}`, 10));
+        setCurrentTime(parseInt(`${audioRef.current?.duration}`, 10));
       });
     }
     return () => {
@@ -65,7 +67,7 @@ function MessageAudioWithContext <T extends MessageContextProps>(
 
   return (
     <div className="message-audio">
-      <div className={`message-audio-content message-audio-${message.flow}`}>
+      <div className={`message-audio-content message-audio-${message?.flow}`}>
         <Icon className={`${message?.flow} ${playClassName ? 'playing' : ''}`} type={IconTypes.VOICE} width={16} height={16} onClick={play} />
         <span>{`${currentTime}s`}</span>
       </div>

package/src/components/TUIMessage/MessageAvatar.tsx

@@ -10,7 +10,7 @@ import { handleDisplayAvatar } from '../untils';
 export interface MessageAvatarProps {
   CustomAvatar?: React.ReactElement,
   className?: string,
-  message?: Message,
+  message: Message,
   showType?: messageShowType,
 }
 
@@ -27,7 +27,7 @@ export function MessageAvatar <T extends MessageAvatarProps>(
   const show = showType === messageShowType.ALL || message?.flow === showType;
 
   if (!show || showType === messageShowType.NONE) {
-    return null;
+    return <></>;
   }
 
   if (CustomAvatar) {

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]);