@tencentcloud/chat-uikit-react 2.1.2 → 2.1.3

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 = [

package/src/components/TUIMessageInput/InputQuoteDefalut.tsx

@@ -23,12 +23,14 @@ export function InputQuoteDefalut <T extends InputQuoteProps>(
   const { cloudCustomData, message } = useHandleQuoteMessage(propsMessage);
 
   const handleClose = useCallback(() => {
-    operateMessage({
+    operateMessage && operateMessage({
+      // eslint-disable-next-line
+      // @ts-ignore
       [MESSAGE_OPERATE.QUOTE]: null,
     });
   }, [operateMessage]);
 
-  const context = cloudCustomData?.messageReply;
+  const context: any = cloudCustomData?.messageReply;
 
   return context && (
     <div className="input-quote">

package/src/components/TUIMessageInput/TUIForward.tsx

@@ -38,8 +38,11 @@ export function TUIForward <T extends TUIForwardToProps>(
 
   const { message, sendForwardMessage, conversationList = [] } = useHandleForwardMessage();
 
-  const handleClose = useCallback((e) => {
-    operateMessage({
+  const handleClose = useCallback(() => {
+    
+    operateMessage && operateMessage({
+      // eslint-disable-next-line
+      // @ts-ignore
       [MESSAGE_OPERATE.FORWARD]: null,
     });
   }, [operateMessage]);
@@ -47,7 +50,7 @@ export function TUIForward <T extends TUIForwardToProps>(
   //const FrequentlyList = conversationList.slice(0, 2);
   const RecentList = conversationList;
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target?.value);
     if (e.target?.value) {
       const result = conversationList.filter((item) => {
@@ -61,20 +64,22 @@ export function TUIForward <T extends TUIForwardToProps>(
     }
   };
 
-  const handleCheckboxChange = (e) => {
+  const handleCheckboxChange = (e: any) => {
     if (e.checked) {
+      // eslint-disable-next-line
+      // @ts-ignore
       setSelectList([...selectList, e.value]);
     } else {
       setSelectList(selectList.filter((item) => item !== e.value));
     }
   };
 
-  const handleDisplayForwardName = (value) => {
-    const listName = value?.map((item) => getDisplayTitle(item));
+  const handleDisplayForwardName = (value: any) => {
+    const listName = value?.map((item: any) => getDisplayTitle(item));
     return listName.toString();
   };
 
-  const handleForward = (e) => {
+  const handleForward = () => {
     if (propsHandleForward) {
       propsHandleForward({
         list: selectList,
@@ -83,10 +88,10 @@ export function TUIForward <T extends TUIForwardToProps>(
     } else {
       sendForwardMessage(selectList);
     }
-    handleClose(e);
+    handleClose();
   };
 
-  const stopPropagation = (e) => {
+  const stopPropagation = (e: any) => {
     e.stopPropagation();
   };
 
@@ -95,10 +100,11 @@ export function TUIForward <T extends TUIForwardToProps>(
     setSearchResult([]);
     setSearchValue('');
   }, [message]);
-
+  // eslint-disable-next-line
+  // @ts-ignore
   return message && conversationList.length > 0 && (
     <Model onClick={handleClose}>
-      <div role="button" tabIndex={0} className="tui-forward" onClick={stopPropagation}>
+      <div role="button" tabIndex={0} className="tui-forward" onClick={(e) => {stopPropagation(e)}}>
         <header className="tui-forward-header">
           <Icon
             type={IconTypes.CANCEL}
@@ -124,14 +130,14 @@ export function TUIForward <T extends TUIForwardToProps>(
             <ul className="tui-forward-list">
               <h3 className="tui-forward-list-title">{t('TUIChat.Search Result')}</h3>
               {
-                searchResult.length > 0 && searchResult.map((item) => (
+                searchResult.length > 0 && searchResult.map((item: any) => (
                   <li key={item.conversationID} className="tui-forward-list-item">
                     <label htmlFor={`${item.conversationID}`} className="info">
                       <Avatar image={getDisplayImage(item)} size={40} />
                       <div className="info-nick">{getDisplayTitle(item)}</div>
                     </label>
                     <Checkbox
-                      onChange={handleCheckboxChange}
+                      onChange={(e) => {handleCheckboxChange(e)}}
                       id={`${item.conversationID}`}
                       value={item}
                     />
@@ -148,7 +154,7 @@ export function TUIForward <T extends TUIForwardToProps>(
           { !searchValue && RecentList.length > 0 && (
           <ul className="tui-forward-list">
             {
-                RecentList.map((item) => (
+                RecentList.map((item: any) => (
                   <li key={item.conversationID} className="tui-forward-list-item">
                     <label htmlFor={`${item.conversationID}`} className="info">
                       <Avatar image={getDisplayImage(item)} size={40} />
@@ -167,7 +173,8 @@ export function TUIForward <T extends TUIForwardToProps>(
         </main>
         <footer className="tui-forward-footer">
           <div className="tui-forward-footer-name">{selectList.length > 0 && handleDisplayForwardName(selectList)}</div>
-          <button type="button" className="button" onClick={() => { handleForward(selectList); }} disabled={selectList.length === 0}>{t('TUIChat.Forward')}</button>
+          <button type="button" className="button" onClick={handleForward} 
+          disabled={selectList.length === 0}>{t('TUIChat.Forward')}</button>
         </footer>
       </div>
     </Model>

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -25,31 +25,35 @@ export function TUIMessageInputDefault():React.ReactElement {
 
   // operateData
   useEffect(() => {
-    if (operateData[MESSAGE_OPERATE.REVOKE]) {
-      setText(formatEmojiString(operateData[MESSAGE_OPERATE.REVOKE].payload.text, 1));
+    if (operateData && operateData[MESSAGE_OPERATE.REVOKE]) {
+      setText && setText(formatEmojiString(operateData[MESSAGE_OPERATE.REVOKE].payload.text, 1));
     }
   }, [operateData]);
 
   // Focus
   useEffect(() => {
-    if (focus && textareaRef.current) {
+    if (focus && textareaRef && textareaRef.current) {
       textareaRef.current.autofocus = true;
       isPC && textareaRef?.current?.focus();
+      // eslint-disable-next-line
+      // @ts-ignore
       textareaRef?.current?.addEventListener('paste', handlePasete);
     }
     return () => {
+      // eslint-disable-next-line
+      // @ts-ignore
       textareaRef?.current?.removeEventListener('paste', handlePasete);
     };
-  }, [focus]);
+  }, [focus, textareaRef]);
 
   const [focused, setFocused] = useState<boolean>(false);
 
-  const handleFocus = (e) => {
+  const handleFocus = () => {
     setFocused(true);
   };
-  const handleBlur = (e) => {
-    setCursorPos({
-      start: e.target.selectionStart,
+  const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCursorPos && setCursorPos({
+      start: e?.target?.selectionStart,
       end: e.target.selectionEnd,
     });
     setFocused(false);
@@ -65,11 +69,13 @@ export function TUIMessageInputDefault():React.ReactElement {
           placeholder={t('TUIChat.Enter a message')}
           rows={1}
           value={text}
+          // eslint-disable-next-line
+          // @ts-ignore
           ref={textareaRef}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onFocus={handleFocus}
-          onBlur={handleBlur}
+          onBlur={(e:any) => {handleBlur(e)}}
         />
         )
       }

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

@@ -28,9 +28,9 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
 
   const onSelectEmoji = (emoji:EmojiData) => {
     if (i18n.language === 'zh') {
-      insertText(emoji.data);
+      insertText && insertText(emoji.data);
     } else {
-      insertText(emojiEnKey[emoji.data]);
+      insertText && insertText(emojiEnKey[emoji.data]);
     }
   };