@tencentcloud/chat-uikit-react 2.1.2 → 2.1.4

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
+import TencentCloudChat, { Conversation, Friend, Profile } from '@tencentcloud/chat';
 import { strChineseFirstPy } from '../static/word';
 import { useProfile } from '../../../hooks';
 
 export const useConversationCreate = (
-  chat,
-  conversationList,
+  chat: any,
+  conversationList: Array<Conversation>,
   setFriendListResultHandler?:(
     newFriendListResult: object,
     setFriendListResult: React.Dispatch<React.SetStateAction<{string:Array<object>}>>
   ) => void,
 ) => {
-  const [friendListSortResult, setFriendListSortResult] = useState({});
+  const [friendListSortResult, setFriendListSortResult] = useState<any>();
   const getFirstLetter = (str: string) => {
     const temp = str.trim();
     const uni = temp.charCodeAt(0);
@@ -22,12 +22,12 @@ export const useConversationCreate = (
   };
   const queryFriendList = async () => {
     const frequentlyConversationProfile = conversationList.filter(
-      (item) => item.type === TencentCloudChat.TYPES.CONV_C2C,
-    ).slice(0, 5).map((item) => item.userProfile);
+      (item: Conversation) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
+    ).slice(0, 5).map((item: Conversation) => item?.userProfile);
     const { code, data } = await chat.getFriendList();
     if (code === 0) {
       const sortResult = handleData(
-        data.map((item) => item.profile),
+        data.map((item: Friend) => item.profile),
         frequentlyConversationProfile,
       );
       setFriendListSortResult(sortResult);
@@ -36,8 +36,8 @@ export const useConversationCreate = (
       }
     }
   };
-  const handleData = (profileList, frequentlyConversationProfile = []) => {
-    const sortResult = {
+  const handleData = (profileList: Array<Profile>, frequentlyConversationProfile?: any) => {
+    const sortResult: any = {
       '#': [],
     };
     for (let i = 65; i <= 90; i += 1) {
@@ -55,7 +55,7 @@ export const useConversationCreate = (
       }
     });
     Object.keys(sortResult).forEach((key) => {
-      sortResult[key].sort((a, b) => {
+      sortResult[key].sort((a: any, b: any) => {
         const { nick: aNick, userID: aUserID } = a;
         const { nick: bNick, userID: bUserID } = b;
         if (aNick || aUserID < bNick || bUserID) {
@@ -73,12 +73,14 @@ export const useConversationCreate = (
     if (!searchValue) return friendListSortResult;
     const { data: profileList } = await getUserProfile([searchValue]);
 
-    const result = {};
+    const result: any = {};
     let isIncludes = false;
     Object.keys(friendListSortResult).forEach((key) => {
       result[key] = friendListSortResult[key].filter(
+        // eslint-disable-next-line
+        // @ts-ignore
         ({ nick, userID }) => {
-          const tempNick = nick.toLocaleLowerCase();
+          const tempNick = nick?.toLocaleLowerCase();
           const tempSearchValue = searchValue.toLocaleLowerCase();
           const userIDValue = userID.toLocaleLowerCase();
           let includes;

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -50,14 +50,14 @@ export function ConversationPreview<T extends ConversationPreviewProps>(
   } = useTUIKitContext('ConversationPreview');
   const [displayImage, setDisplayImage] = useState(getDisplayImage(conversation));
   const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(conversation, searchValue));
-  const [displayMessage, setDisplayMessage] = useState(getDisplayMessage(conversation, myProfile, language));
+  const [displayMessage, setDisplayMessage] = useState(myProfile && getDisplayMessage(conversation, myProfile, language));
   const [displayTime, setDisplayTime] = useState(getDisplayTime(conversation, language));
   const [unread, setUnread] = useState(conversation.unreadCount);
   const isActive = activeConversation?.conversationID === conversation?.conversationID;
-  if (!Preview) return null;
+  if (!Preview) return <></>;
   useEffect(() => {
     setDisplayTitle(getDisplayTitle(conversation, searchValue));
-    setDisplayMessage(getDisplayMessage(conversation, myProfile, language));
+    myProfile && setDisplayMessage(getDisplayMessage(conversation, myProfile, language));
     setDisplayImage(getDisplayImage(conversation));
     setDisplayTime(getDisplayTime(conversation, language));
     setUnread(conversation.unreadCount);

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-key */
 import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
@@ -11,6 +12,9 @@ import { Plugins } from '../Plugins';
 import { useConversation } from '../../hooks';
 import { useTUIKitContext } from '../../context';
 
+export interface IPluginsRef {
+  closeMore?: () => void,
+}
 export function unMemoConversationPreviewContent<T extends ConversationPreviewUIComponentProps>(
   props: T,
 ):React.ReactElement {
@@ -36,7 +40,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
   const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
   const pinClass = conversation.isPinned ? 'conversation-preview-content--pin' : '';
   const [isHover, setIsHover] = useState(false);
-  const pluginsRef = useRef(null);
+  const pluginsRef = useRef<IPluginsRef>(null);
 
   const onSelectConversation = () => {
     TUIConversationService.switchConversation(conversation?.conversationID);
@@ -63,7 +67,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
   const handleH5LongPress = (type: string) => {
     if (isPC) return;
     const { conversationID } = conversation;
-    setActiveConversationID(conversationID);
+    setActiveConversationID && setActiveConversationID(conversationID);
     function longPressHandler() {
       clearTimeout(timer);
       setIsHover(true);
@@ -92,15 +96,15 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
     const { conversationID, isPinned } = conversation;
     e.stopPropagation();
     setIsHover(false);
-    pluginsRef.current.closeMore();
+    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
     switch (type) {
       case 'pin':
         pinConversation({ conversationID, isPinned: !isPinned });
         break;
       case 'delete':
         deleteConversation(conversationID);
-        if (conversation === activeConversation) {
-          setActiveConversation(null);
+        if (setActiveConversation && conversation === activeConversation) {
+          setActiveConversation(undefined);
         }
         break;
       default:

package/src/components/ConversationPreview/utils.tsx

@@ -27,12 +27,13 @@ export const getDisplayTitle = (
   }
   const handleTitle = (str:string) => {
     const tempStr = str.toLocaleLowerCase();
-    const pos = tempStr.indexOf(searchValue.toLocaleLowerCase());
+    const pos = searchValue && tempStr.indexOf(searchValue.toLocaleLowerCase());
+    if (pos === '') return <></>
     return (
       <div>
         <span>{str.slice(0, pos)}</span>
-        <span style={{ color: highlightColor }}>{str.slice(pos, pos + searchValue.length)}</span>
-        <span>{str.slice(pos + searchValue.length)}</span>
+        <span style={{ color: highlightColor }}>{pos && str.slice(pos, pos + searchValue.length)}</span>
+        <span>{pos && str.slice(pos + searchValue.length)}</span>
       </div>
     );
   };
@@ -94,6 +95,8 @@ export const getDisplayMessage = (
 };
 interface TProfile extends Profile, Group {}
 export const getMessageProfile = (conversation: Conversation):TProfile => {
+  // eslint-disable-next-line
+  // @ts-ignore
   if (!conversation) return null;
   let result = {};
   const { type, groupProfile, userProfile } = conversation;

package/src/components/DivWithEdit/DivWithEdit.tsx

@@ -22,7 +22,7 @@ interface DivWithEditProps {
   type?: string,
   isEdit?: boolean,
   toggle?: (name:string) => void,
-  close?: () => void,
+  close: () => void,
 }
 
 export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<T>) {
@@ -40,15 +40,16 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
   } = props;
 
   const [value, setValue] = useState(propsValue);
-
+  // eslint-disable-next-line
+  // @ts-ignore
   const WithEditElements = elements[type] || WithText;
 
   useLayoutEffect(() => {
     setValue(propsValue);
   }, [propsValue]);
 
-  const handleConfirm = (data) => {
-    confirm({
+  const handleConfirm = (data: any) => {
+    confirm && confirm({
       name,
       value: data,
     });
@@ -66,7 +67,7 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
         <div className="show">
           <p>{value || '-'}</p>
           <div className="icon">
-            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle(name); }} />
+            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle && name && toggle(name); }} />
           </div>
         </div>
         )

package/src/components/DivWithEdit/WithText.tsx

@@ -31,10 +31,12 @@ export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
   };
 
   const handleConfirm = () => {
-    confirm(value);
+    confirm && confirm(value);
   };
   return (
     <div className={`edit ${className}`}>
+      {/* // eslint-disable-next-line 
+      // @ts-ignore */}
       <input ref={inputRef} type="text" value={value} onChange={handleChange} />
       <Icon className="icon" width={15} height={10.5} type={IconTypes.CONFIRM} onClick={handleConfirm} />
     </div>

package/src/components/DivWithEdit/styles/index.scss

@@ -52,7 +52,7 @@
       min-width: 100%;
       z-index: 2;
       background: #FFFFFF;
-      box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
+      box-shadow: 0 11px 20px 0 rgb(0,0,0.3);
       top: 100%;
       border-radius: 5px;
       padding: 10px 0;

package/src/components/Icon/Icon.tsx

@@ -28,13 +28,13 @@ export function Icon(props: React.PropsWithChildren<IconProps>) {
   };
   return (
     <div
-      className={`tui-kit-icon ${changeTypeToIconClassName(type)} ${className}`}
+      className={`tui-kit-icon ${type && changeTypeToIconClassName(type)} ${className}`}
       role="button"
       tabIndex={0}
       style={iconStyle}
       onClick={onClick}
     >
-      {children || changeTypeToIconComponent(type)}
+      {children || (type && changeTypeToIconComponent(type))}
     </div>
   );
 }

package/src/components/Input/Input.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, {
   useRef, useState, useImperativeHandle, InputHTMLAttributes,
 } from 'react';
@@ -25,10 +26,10 @@ export interface InputRef {
   input: HTMLInputElement | null;
 }
 export const Input = React.forwardRef<InputRef, InputProps>(
-  (props:InputProps, ref):React.ReactElement => {
+  (props: InputProps, ref): React.ReactElement => {
     const {
-      className = '',
-      customClassName = '',
+      className = "",
+      customClassName = "",
       placeholder,
       clearable = false,
       prefix,
@@ -37,25 +38,25 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       onBlur,
       onFocus,
       onKeyDown,
-      value: propsValue = '',
-      border = '',
+      value: propsValue = "",
+      border = "",
       disabled = false,
       maxLength = undefined,
     } = props;
 
     const [focused, setFocused] = useState<boolean>(false);
-    const enterCodeList = ['Enter', 'NumpadEnter'];
+    const enterCodeList = ["Enter", "NumpadEnter"];
     const [value, setValue] = useState(propsValue);
     const inputRef = useRef<HTMLInputElement>(null);
-    const handleFocus = (e) => {
+    const handleFocus = (e: any) => {
       setFocused(true);
       onFocus?.(e);
     };
-    const handleBlur = (e) => {
+    const handleBlur = (e: any) => {
       setFocused(false);
       onBlur?.(e);
     };
-    const handleEnterKeyDown = (e) => {
+    const handleEnterKeyDown = (e: any) => {
       if (enterCodeList.indexOf(e?.key) > -1 && onKeyDown) {
         e?.preventDefault();
         onKeyDown(e);
@@ -64,7 +65,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
     const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       setValue('');
       focus();
-      const currentTarget = inputRef.current.cloneNode(true) as HTMLInputElement;
+      const currentTarget = inputRef?.current?.cloneNode(
+        true
+      ) as HTMLInputElement;
       const event = Object.create(e, {
         target: { value: currentTarget },
         currentTarget: { value: currentTarget },
@@ -109,9 +112,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           />
           {suffix}
           {(clearable && value)
-          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={clearInput} />}
+          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => {clearInput(e)}} />}
         </div>
       </div>
     );
-  },
+  }
 );

package/src/components/Model/index.tsx

@@ -4,7 +4,7 @@ import './styles/index.scss';
 
 interface PopupProps {
   className?: string,
-  onClick?: (e?) => void,
+  onClick?: (e: Event) => void,
 }
 
 export function Model<
@@ -17,7 +17,7 @@ T extends PopupProps
   } = props;
 
   return (
-    <div role="button" tabIndex={0} className={`model ${className}`} onClick={onClick}>
+    <div role="button" tabIndex={0} className={`model ${className}`} onClick={(e: any) => onClick && onClick(e)}>
       {children}
     </div>
   );

package/src/components/Plugins/index.tsx

@@ -22,6 +22,8 @@ export interface PluginsProps {
 
 function PluginsWithContext<T extends PluginsProps>(
   props:PropsWithChildren<T>,
+ // eslint-disable-next-line 
+ // @ts-ignore
   ref,
 ):React.ReactElement {
   const {
@@ -36,31 +38,31 @@ function PluginsWithContext<T extends PluginsProps>(
   } = props;
 
   useImperativeHandle(ref, () => ({
-    closeMore: (newVal) => {
+    closeMore: (newVal: boolean) => {
       setShow(false);
     },
   }));
 
   const { showPicker, elements } = usePluginsElement({ plugins, showNumber });
-  const pluginRef = useRef(null);
+  const pluginRef = useRef<HTMLDivElement>(null);
 
   const [show, setShow] = useState(false);
 
-  const handleShow = (e) => {
+  const handleShow = (e: any) => {
     e.stopPropagation();
     setShow(!show);
     if (!show) {
-      pluginRef.current.offsetParent.removeEventListener('scroll', handleShow);
+      pluginRef?.current?.offsetParent?.removeEventListener('scroll', handleShow);
     }
   };
 
-  const pluginHandleVisible = (data) => {
+  const pluginHandleVisible = (data: any) => {
     if (handleVisible) {
       const {
         width, height,
-      } = pluginRef.current.children[1].getBoundingClientRect();
-      const { x = 0, y = 0 } = pluginRef.current.getBoundingClientRect();
-      pluginRef.current.offsetParent.addEventListener('scroll', handleShow);
+      } = pluginRef?.current?.children[1].getBoundingClientRect() || {};
+      const { x = 0, y = 0 } = pluginRef?.current?.getBoundingClientRect() || {};
+      pluginRef.current?.offsetParent?.addEventListener('scroll', handleShow);
       handleVisible({
         ...data,
         width,
@@ -70,11 +72,12 @@ function PluginsWithContext<T extends PluginsProps>(
       });
     }
   };
-
+// eslint-disable-next-line
+// @ts-ignore
   return (
-    (showPicker.length > 0 || elements?.length > 0) && (
+    ((showPicker && showPicker.length > 0) || (elements && elements?.length > 0)) && (
       <ul className={`plugin ${className}`}>
-        {showPicker?.length > 0 && showPicker.map((Item, index:number) => {
+        {showPicker && showPicker?.length > 0 && showPicker.map((Item, index:number) => {
           const key = `${Item}${index}`;
           return (
             <li className="plugin-item" key={key}>
@@ -83,7 +86,7 @@ function PluginsWithContext<T extends PluginsProps>(
           );
         })}
         {
-        elements?.length > 0 && (
+        elements && elements?.length > 0 && (
           <div className="plugin-popup" ref={pluginRef}>
             <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
               {

package/src/components/Popup/index.tsx

@@ -6,7 +6,7 @@ interface PopupProps {
   className?: string,
   style?: any,
   show?: boolean,
-  close?: (e) => void,
+  close: (e: any) => void,
   root?: any,
   handleVisible?: (isVisible:any) => void,
 }
@@ -49,7 +49,7 @@ T extends PopupProps
         rootBounds: changeRootBounds,
         intersectionRatio,
       } = change;
-      const popupBoundingClientRect = popup.current.getBoundingClientRect() || {};
+      const popupBoundingClientRect = popup.current?.getBoundingClientRect() || {};
       const rootRootBounds = root?.getBoundingClientRect() || {};
       const boundingClientRect = {
         ...changeBoundingClientRec,
@@ -73,7 +73,7 @@ T extends PopupProps
       threshold: [1],
     });
 
-    if (popup && show) {
+    if (popup?.current && show) {
       io.observe(popup?.current);
     }
     return () => {
@@ -82,13 +82,17 @@ T extends PopupProps
     };
   }, [popup, show]);
 
-  const stopImmediatePropagation = (e) => {
+  const stopImmediatePropagation = (e: Event) => {
     e.stopPropagation();
   };
 
-  return show && (
-    <div role="button" tabIndex={0} style={style} className={`popup ${className} ${isSetPos && 'popup-show'}`} ref={popup}>
-      {children}
-    </div>
-  );
+  return (
+    <>{show && (
+      // eslint-disable-next-line 
+      // @ts-ignore
+      <div role="button" tabIndex={0} style={style} className={`popup ${className} ${isSetPos && 'popup-show'}`} ref={popup}>
+        {children}
+      </div>)}
+    </>
+  )
 }

package/src/components/Profile/index.ts

@@ -1,2 +1 @@
-export * from './Profile';
-export * from './hooks/useProfile';
+export * from './Profile';

package/src/components/Switch/Switch.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef } from 'react';
-// Switch样式的大概逻辑：
-//    隐藏input,然后将通过label标签和label里的span来控制样式，并通过伪元素选择器:checked来为选中情况添加样式
-//    需要注意：设置display: inline;属性后，最好添加vertical-align:top;，否则会出现一些莫名其妙的bug
+// The general logic of Switch style:
+// Hide the input, then control the style through the label label and the span in the label, and add styles to the selected situation through 
+// the pseudo-element selector: checked
+// Note: After setting the display: inline; attribute, it is best to add vertical-align:top;, otherwise some inexplicable bugs will appear
 import './Switch.scss';
 import { creteNewId } from './utils/newId';
 
@@ -14,7 +15,7 @@ interface Props {
 // : React.FunctionComponent<Props>
 export function Switch(props:Props) {
   const {
-    checked, onChange, checkedColor, className,
+    checked, onChange, checkedColor = '#34C759', className,
   } = props;
   const idRef = useRef<string>(creteNewId());
   return (
@@ -36,6 +37,3 @@ export function Switch(props:Props) {
     </div>
   );
 }
-Switch.defaultProps = {
-  checkedColor: '#34C759',
-};

package/src/components/TUIChat/TUIChat.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, {
   PropsWithChildren, useEffect, useMemo, useReducer, useRef, useState,
 } from 'react';
@@ -122,14 +123,14 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     TUIMessageListConfig,
   } = props;
 
-  const [state, dispatch] = useReducer<ChatStateReducer>(chatReducer, {
+  const [state, dispatch] = useReducer<any>(chatReducer, {
     ...initialState,
     conversation,
   });
 
   const messageListRef = useRef(null);
   const textareaRef = useRef<HTMLTextAreaElement>();
-  const chatStateContextValue = useCreateTUIChatStateContext({
+  const chatStateContextValue = state && useCreateTUIChatStateContext({
     chat,
     conversation,
     messageListRef,
@@ -147,6 +148,8 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   } = useHandleMessageList({
     chat,
     conversation,
+    // eslint-disable-next-line
+    // @ts-ignore
     state,
     dispatch,
     filterMessage,
@@ -159,11 +162,12 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     setHighlightedMessageId,
     setActiveMessageID,
   } = useHandleMessage({
+    // eslint-disable-next-line 
+    // @ts-ignore
     state,
     dispatch,
   });
 
-  // 消息 messageList
   useEffect(() => {
     TUIStore.watch(StoreName.CHAT, {
       messageList: onMessageListUpdated,
@@ -179,6 +183,8 @@ function TUIChatInner <T extends TUIChatInnerProps>(
 
   const onMessageListUpdated = (list: IMessageModel[]) => {
     const messageList = list.filter((message) => !message.isDeleted);
+    // eslint-disable-next-line
+      // @ts-ignore
     dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
       value: filterMessage ? filterMessage(messageList) : messageList,
@@ -187,6 +193,8 @@ function TUIChatInner <T extends TUIChatInnerProps>(
 
   const isCompletedUpdated = (flag: boolean) => {
     if (flag) {
+      // eslint-disable-next-line
+      // @ts-ignore
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
         value: flag,
@@ -194,7 +202,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     }
   };
 
-  // 加载历史消息 | Load historical messages
+  // Load historical messages
   const loadMore = async () => {
     TUIChatService.getMessageList();
   };
@@ -202,15 +210,20 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   const setFirstSendMessage = async (message: any) => {
     if (
       !(message.type === 'TIMCustomElem' && JSONStringToParse(message.payload.data)?.src === 7)
+      // eslint-disable-next-line
+      // @ts-ignore
       && !state.firstSendMessage
     ) {
+      // eslint-disable-next-line
+      // @ts-ignore
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE,
         value: message,
       });
     }
   };
-
+      // eslint-disable-next-line
+      // @ts-ignore
   const chatActionContextValue: TUIChatActionContextValue = useMemo(
     () => ({
       editLocalMessage,
@@ -255,6 +268,8 @@ function TUIChatInner <T extends TUIChatInnerProps>(
 
   return (
     <div className={`chat ${className}`}>
+            {/* // eslint-disable-next-line
+      // @ts-ignore */}
       <TUIChatStateContextProvider value={chatStateContextValue}>
         <TUIChatActionProvider value={chatActionContextValue}>
           <ComponentProvider value={componentContextValue}>

package/src/components/TUIChat/TUIChatState.tsx

@@ -71,14 +71,14 @@ export const chatReducer = (
   switch (action?.type) {
     case CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE:
       return { ...state, conversation: action.value };
-    // messageList 设置
+    // messageList set
     case CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST:
       return {
         ...state,
         messageList: action.value,
       };
     case CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE:
-      return {
+      return state.messageList &&  action.value && {
         ...state,
         messageList: [...handleEditMessage(state.messageList, action.value)],
       };
@@ -97,7 +97,7 @@ export const chatReducer = (
     case CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE:
       return { ...state, vidoeSource: action.value };
     case CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST:
-      return {
+      return state?.uploadPendingMessageList && action.value && {
         ...state,
         uploadPendingMessageList: [
           ...handleUploadPendingMessage(state.uploadPendingMessageList, action.value),

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

@@ -21,35 +21,35 @@ export function useHandleMessage<T extends CreateMessageProps>(props:T) {
   } = props;
 
   const operateMessage = useCallback((data: OperateMessageParams) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE,
       value: data,
     });
   }, [dispatch]);
 
   const setAudioSource = useCallback((data: HTMLAudioElement | null) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE,
       value: data,
     });
   }, [dispatch]);
 
   const setVideoSource = useCallback((data: HTMLVideoElement | null) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE,
       value: data,
     });
   }, [dispatch]);
 
   const setHighlightedMessageId = useCallback((highlightedMessageId: string) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID,
       value: highlightedMessageId,
     });
   }, [dispatch]);
 
   const setActiveMessageID = useCallback((messageID: string) => {
-    dispatch({
+    dispatch && dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID,
       value: messageID,
     });