@tencentcloud/chat-uikit-react 2.1.2 → 2.1.4

package/src/components/TUIChat/hooks/useHandleMessageList.tsx

@@ -27,14 +27,14 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
   } = props;
 
   const editLocalMessage = useCallback((message: Message) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE,
       value: message,
     });
   }, [dispatch]);
 
   const updateUploadPendingMessageList = useCallback((message: Message) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST,
       value: message,
     });

package/src/components/TUIChat/unitls.ts

@@ -3,7 +3,7 @@ import constant from '../../constants';
 import { JSONStringToParse } from '../untils';
 
 export const handleMessage = (messageList:Array<Message>):Array<Message> => {
-  let customPayloadData = null;
+  let customPayloadData: any = null;
   return messageList.filter((item) => {
     if (item.type === TencentCloudChat.TYPES.MSG_CUSTOM) {
       customPayloadData = JSONStringToParse(item?.payload?.data);
@@ -30,7 +30,7 @@ export const handleUploadPendingMessage = (
   message: Message,
 ) => {
   const list = [...messageList];
-  if (!list.some((item:Message) => item.ID === message.ID)) {
+  if (!list.some((item:Message) => item.ID === message?.ID)) {
     list.push(message);
   }
   const index = list.findIndex((item) => item?.ID === message?.ID);

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -84,7 +84,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
   };
   const { setTUIManageShow } = useTUIKitContext();
   const openTUIManage = () => {
-    setTUIManageShow(true);
+    setTUIManageShow && setTUIManageShow(true);
   };
 
   return (

package/src/components/TUIContact/TUIContactInfo/addFriendInfo.tsx

@@ -41,7 +41,7 @@ export function UnMemoizedAddFriendInfo<T extends Props>(
     setIsEditRemark('');
   };
 
-  const handleChange = (e) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setWording(e.target.value);
   };
   return (
@@ -51,7 +51,7 @@ export function UnMemoizedAddFriendInfo<T extends Props>(
         <div className="tui-contact-info-content">
           <div className="content-item-wording">
             <p className="content-item-label">{t('TUIContact.Enter the verification info')}</p>
-            <textarea className="content-item-wording-text" value={wording} onChange={handleChange} />
+            <textarea className="content-item-wording-text" value={wording} onChange={(e: any) => {handleChange(e)}} />
           </div>
           <div className="content-item">
             <p className="content-item-label">{t('TUIContact.remark')}</p>

package/src/components/TUIContact/TUIContactInfo/friendInfo.tsx

@@ -52,7 +52,6 @@ export function UnMemoizedFriendInfo<T extends Props>(
   const addToBlocklistHandler = async () => {
     await addToBlocklist(userID);
     setIsAddToBlocklist(true);
-    // 清空右侧 container 内容
     setActiveContact();
   };
 
@@ -65,7 +64,7 @@ export function UnMemoizedFriendInfo<T extends Props>(
     const conversation = await createConversation(conversationID);
     TUIConversationService.switchConversation(conversationID);
     setActiveConversation(conversation);
-    openChat();
+    openChat && openChat();
   };
 
   return (

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

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import TencentCloudChat, { ChatSDK, Conversation } from '@tencentcloud/chat';
-
+import {
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
 function useConversationList(
   chat: ChatSDK,
   activeConversationHandler?:(
@@ -10,33 +13,25 @@ function useConversationList(
   filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) {
   const [conversationList, setConversationList] = useState<Array<Conversation>>([]);
-  const queryConversation = async (queryType?: string) => {
-    if (queryType === 'reload') {
-      setConversationList([]);
+  const onConversationListUpdated = (list: any) => {
+    let resConversationList = [];
+    if (filterConversation) {
+      resConversationList = filterConversation(list);
+    } else {
+      resConversationList = list.filter(
+        (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
+      );
     }
-    const offset = queryType === 'reload' ? 0 : conversationList.length;
-
-    const res = await chat?.getConversationList();
-    if (res?.code === 0) {
-      let resConversationList = [];
-      if (filterConversation) {
-        resConversationList = filterConversation(res.data.conversationList);
-      } else {
-        resConversationList = res.data.conversationList.filter(
-          (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
-        );
-      }
-      const newConversationList = queryType === 'reload'
-        ? resConversationList
-        : [...conversationList, resConversationList];
-      setConversationList(newConversationList);
-      if (!offset && activeConversationHandler) {
-        activeConversationHandler(newConversationList, setConversationList);
-      }
+    setConversationList(resConversationList);
+    if (activeConversationHandler) {
+      activeConversationHandler(resConversationList, setConversationList);
     }
   };
+
   useEffect(() => {
-    queryConversation('reload');
+    TUIStore.watch(StoreName.CONV, {
+      conversationList: onConversationListUpdated,
+    }); 
   }, [chat]);
   return {
     conversationList,

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

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useState, useEffect } from 'react';
 import { ChatSDK, Conversation } from '@tencentcloud/chat';
-import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { TUILogin } from '@tencentcloud/tui-core';
 import { useTranslation } from 'react-i18next';
 import { isH5, isPC } from '../../utils/env';
 import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
@@ -22,7 +23,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,
@@ -126,13 +127,16 @@ export function TUIKit<
   >(
   props:PropsWithChildren<T>,
 ):React.ReactElement {
-  const [currentConversationID, setCurrentConversationID] = useState<string>('');
   const [moduleValue, setModuleValue] = useState('chats');
   const { t } = useTranslation();
-
   const {
-    children, chat, customClasses, activeConversation, language = 'en',
+    children,
+    chat = TUILogin.getContext().chat,
+    customClasses,
+    activeConversation,
+    language = 'en',
   } = props;
+
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
   const {
     conversation,
@@ -161,21 +165,21 @@ export function TUIKit<
   });
   useEffect(() => {
     TUIStore.watch(StoreName.CONV, {
-      currentConversationID: onCurrentConversationID,
+      currentConversation: onCurrentConversation,
     });
     return () => {
       TUIStore.unwatch(StoreName.CONV, {
-        currentConversationID: onCurrentConversationID,
+        currentConversation: onCurrentConversation,
       });
     };
   }, []);
 
-  const onCurrentConversationID = (id: string) => {
-    setCurrentConversationID(id);
-  };
   const switchTabbar = (value: string) => {
     setModuleValue(value);
   };
+  const onCurrentConversation = (conversationModel: IConversationModel) => {
+    setActiveConversation(conversationModel?.getConversation());
+  };
 
   const tabbarRender = (
     <div className="sample-chat-tab">
@@ -200,8 +204,23 @@ export function TUIKit<
   return (
     <TUIKitProvider value={chatContextValue}>
       <div className="tui-kit">
-        {children || (isPC && <RenderForPC moduleValue={moduleValue} tabbarRender={tabbarRender} setModuleValue={setModuleValue} />)
-        || (isH5 && <RenderForH5 contactData={contactData} moduleValue={moduleValue} tabbarRender={tabbarRender} currentConversationID={currentConversationID} setModuleValue={setModuleValue} />)}
+        {children ||
+          (isPC && (
+            <RenderForPC
+              moduleValue={moduleValue}
+              tabbarRender={tabbarRender}
+              setModuleValue={setModuleValue}
+            />
+          )) ||
+          (isH5 && (
+            <RenderForH5
+              contactData={contactData}
+              moduleValue={moduleValue}
+              tabbarRender={tabbarRender}
+              currentConversationID={conversation?.conversationID || ''}
+              setModuleValue={setModuleValue}
+            />
+          ))}
       </div>
     </TUIKitProvider>
   );

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

@@ -1,4 +1,8 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import {
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
 import { useTranslation } from 'react-i18next';
 import {
   ChatSDK,
@@ -42,7 +46,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);
@@ -50,21 +54,21 @@ export const useTUIKit = ({
 
   useEffect(() => {
     i18n.changeLanguage(language);
-    const getMyProfile = async () => {
-      const res = await chat?.getMyProfile();
-      setMyProfile(res?.data);
-    };
-    getMyProfile();
-  }, [chat, language]);
+    TUIStore.watch(StoreName.USER, {
+      userProfile: (userProfileData: any) => {
+        setMyProfile(userProfileData);
+      },
+    });
+  }, [language]);
   const setActiveConversation = useCallback(
     (activeConversation?: Conversation) => {
       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 +77,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) {