@tencentcloud/chat-uikit-react 2.1.2 → 2.1.3

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/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,
     });

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 (