@tencentcloud/chat-uikit-react 2.1.2 → 2.1.3

package/src/components/TUIContact/TUIContactInfo/hooks/useContactInfo.tsx

@@ -6,14 +6,12 @@ import { useTUIKitContext } from '../../../../context';
 function useContactInfo() {
   const { chat } = useTUIKitContext('useContactInfo');
 
-  // 移除黑名单
   const removeFromBlocklist = useCallback((userID: string) => {
     chat.removeFromBlacklist({
       userIDList: [userID],
     });
   }, [chat]);
 
-  // 添加好友
   const addFriend = useCallback((param: any) => {
     chat.addFriend({
       to: param?.userID,
@@ -29,14 +27,12 @@ function useContactInfo() {
     });
   }, [chat]);
 
-  // 删除好友
   const deleteFriend = useCallback((userID: string) => {
     chat.deleteFriend({
       userIDList: [userID],
     });
   }, [chat]);
 
-  // 添加黑名单
   const addToBlocklist = useCallback((userID: string) => {
     chat.addToBlacklist({
       userIDList: [userID],
@@ -55,8 +51,6 @@ function useContactInfo() {
       userID,
     });
   }, [chat]);
-  // 好友相关
-  // 判断是否为双向好友关系
   const isFriend = (info: any): Promise<boolean> => (
     new Promise((resolve, reject) => {
       chat.checkFriend({
@@ -65,19 +59,15 @@ function useContactInfo() {
       })
         .then((res: any) => {
           switch (res?.data?.successUserIDList[0]?.relation) {
-            // 无好友关系：A 的好友表中没有 B，B 的好友表中也没有 A
             case TencentCloudChat.TYPES.SNS_TYPE_NO_RELATION:
               resolve(false);
               break;
-            // 单项好友：A 的好友表中有 B，但 B 的好友表中没有 A
             case TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B:
               resolve(false);
               break;
-            // 单项好友：A 的好友表中没有 B，但 B 的好友表中有 A
             case TencentCloudChat.TYPES.SNS_TYPE_B_WITH_A:
               resolve(false);
               break;
-            // 双向好友关系
             case TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY:
               resolve(true);
               break;

package/src/components/TUIContact/TUIContactList/TUIContactList.tsx

@@ -30,6 +30,8 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
     acceptFriendApplication(userID);
     setActiveContact();
   };
+  // eslint-disable-next-line
+  // @ts-ignore
   return (
     isShowContactList && (
       <div className={`tui-contacts-list ${isH5 ? 'tui-contacts-list-h5' : ''} `}>
@@ -45,7 +47,7 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
           </div>
         </div>
         {iShowFriendApplication
-          && friendApplicationList.map((item, index) => {
+          && friendApplicationList?.map((item, index) => {
             const {
               userID, avatar, nick, wording, type,
             } = item;
@@ -106,7 +108,7 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
           </div>
         </div>
         {isShowBlocklist
-          && blocklistProfile.map((item, index) => {
+          && blocklistProfile?.map((item, index) => {
             const { userID, avatar, nick } = item;
             return (
               <div
@@ -137,7 +139,7 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
           </div>
         </div>
         {iShowFriends
-          && friendList.map((item, index) => {
+          && friendList?.map((item, index) => {
             const { userID, avatar, nick } = item.profile;
             return (
               <div

package/src/components/TUIContact/hooks/useTUIContact.tsx

@@ -35,7 +35,6 @@ function useTUIContact() {
       setFriendList(data);
     }
   };
-  // todo: 获取 100个
   const getBlocklist = async () => {
     const { data: _blocklist } = await chat.getBlacklist();
     if (_blocklist.length === 0) {
@@ -51,15 +50,15 @@ function useTUIContact() {
     });
     setBlocklistProfile(data);
   };
-  const onFriendApplicationListUpdated = (event) => {
+  const onFriendApplicationListUpdated = (event: any) => {
     setFriendApplicationList(event?.data?.friendApplicationList);
   };
-  const onBlocklistUpdated = (event) => {
+  const onBlocklistUpdated = (event: any) => {
     setBlockList(event.data);
     getBlocklistProfile(event.data);
   };
 
-  const onFriendListUpdated = (event) => {
+  const onFriendListUpdated = (event: any) => {
     setFriendList(event.data);
   };
 

package/src/components/TUIContactSearch/TUIContactSearch.tsx

@@ -16,19 +16,19 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
   const [searchedValue, setSearchedValue] = useState('');
   const [searchResult, setSearchResult] = useState([]);
 
-  const searchValueChange = (e) => {
+  const searchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target?.value === '') {
-      setShowContactList(true);
+      setShowContactList && setShowContactList(true);
       setShowSearchResult(false);
       setSearchResult([]);
       return;
     }
     setShowSearchResult(true);
     setSearchedValue(e.target?.value);
-    setShowContactList(false);
+    setShowContactList && setShowContactList(false);
   };
 
-  const searchValueBlur = (e) => {
+  const searchValueBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchedValue(e.target?.value);
   };
 
@@ -47,15 +47,14 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
   const setContactProfile = async (profile: any) => {
     const isFriend = await checkFriend(profile);
     if (isFriend) {
-      const friendProfile = friendList.find((item) => item.userID === searchedValue);
-      setActiveContact({ type: 'friend', data: friendProfile });
+      const friendProfile = friendList?.find((item) => item.userID === searchedValue);
+      friendProfile && setActiveContact({ type: 'friend', data: friendProfile });
       return;
     }
     if (isBlock(profile.userID)) {
       setActiveContact({ type: 'block', data: profile });
       return;
     }
-    // set 数据
     setActiveContact({ type: 'addFriend', data: profile });
   };
   return (

package/src/components/TUIContactSearch/hooks/useContactSearch.tsx

@@ -5,8 +5,6 @@ function useContactSearch() {
   const { blockList } = useTUIContactContext('TUIContactList');
   const { chat } = useTUIKitContext('TUIContactSearch');
 
-  // 好友相关
-  // 判断是否为双向好友关系
   const checkFriend = (info: any): Promise<any> => chat.checkFriend({
     userIDList: [info?.userID],
     type: TencentCloudChat.TYPES.SNS_CHECK_TYPE_BOTH,
@@ -14,7 +12,7 @@ function useContactSearch() {
       === TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY);
 
   const isBlock = (userID: string) => (
-    blockList.includes(userID)
+    blockList?.includes(userID)
   );
   const getUserProfile = (userID: string) => (
     chat.getUserProfile({

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -82,7 +82,7 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
   const [conversationCreated, setConversationCreated] = useState(false);
   const [activeConversationID, setActiveConversationID] = useState('');
 
-  const handleSearchValueChange = (e) => {
+  const handleSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target?.value);
     if (e.target?.value) {
       const result = conversationList.filter(

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

@@ -23,7 +23,7 @@ function useConversationList(
         resConversationList = filterConversation(res.data.conversationList);
       } else {
         resConversationList = res.data.conversationList.filter(
-          (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
+          (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
         );
       }
       const newConversationList = queryType === 'reload'

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

@@ -22,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,

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) {