@tencentcloud/chat-uikit-react 2.1.0 → 2.1.3

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

@@ -32,7 +32,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     isLive,
     opateIcon,
   } = props;
-
+  const { setActiveContact } = useTUIKitContext('TUIContact');
   const [title, setTitle] = useState(propTitle);
   const [avatar, setAvatar] = useState<React.ReactElement | string>('');
 
@@ -80,10 +80,11 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
 
   const back = () => {
     TUIConversationService.switchConversation('');
+    setActiveContact();
   };
   const { setTUIManageShow } = useTUIKitContext();
   const openTUIManage = () => {
-    setTUIManageShow(true);
+    setTUIManageShow && setTUIManageShow(true);
   };
 
   return (

package/src/components/TUIContact/TUIContact.tsx

@@ -4,6 +4,7 @@ import {
   TUIContactContextProvider,
   TUIContactContextValue,
 } from '../../context/TUIContactContext';
+import { isH5 } from '../../utils/env';
 import { useTUIKitContext } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
 import { TUIContactList } from './TUIContactList/TUIContactList';
@@ -55,7 +56,7 @@ export function UnMemoizedTUIContact<T>(
   return (
     <TUIContactContextProvider value={TUIContactValue}>
       {children || (
-        <div className="tui-contacts">
+        <div className={`tui-contacts ${isH5 ? 'tui-contacts-h5' : ''} `}>
             {!isShowAddFriend && (
               <>
                 <div className="tui-contacts-header">

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

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren,
 } from 'react';
 import { useTUIKitContext } from '../../../context';
+import { isH5 } from '../../../utils/env';
 import { FriendInfo } from './friendInfo';
 import { BlockInfo } from './blockInfo';
 import { AddFriendInfo } from './addFriendInfo';
@@ -21,7 +22,7 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
     return (<> </>);
   }
   return (
-    <div className="tui-contact-info">
+    <div className={`tui-contact-info ${isH5 ? 'tui-contact-info-h5' : ''} `}>
       {contactData?.type === 'addFriend' && (<AddFriendInfo profile={contactData?.data} />)}
       {contactData?.type === 'friend' && (<FriendInfo openChat={showChat} friend={contactData?.data} />)}
       {contactData?.type === 'block' && (<BlockInfo profile={contactData?.data} />)}

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/basicInfo.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Profile } from '@tencentcloud/chat';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { useTUIKitContext } from '../../../context';
+import { Icon, IconTypes } from '../../Icon';
+import { isH5 } from '../../../utils/env';
+
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 
 interface Props {
@@ -14,8 +19,21 @@ export function UnMemoizedBasicInfo<T extends Props>(
   const {
     userID, nick, selfSignature, avatar,
   } = profile;
+  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const back = () => {
+    TUIConversationService.switchConversation('');
+    setActiveContact();
+  };
   return (
     <div className="tui-contact-info-header">
+      {isH5 && (
+      <Icon
+        width={9}
+        height={16}
+        type={IconTypes.BACK}
+        onClick={back}
+      />
+      )}
       <div className="header-container">
         <div className="header-container-avatar">
           <Avatar size={60} image={avatar || defaultUserAvatar} />

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/TUIContactInfo/index.scss

@@ -28,6 +28,7 @@
         line-height: 50px;
         font-weight: 400;
         color: #999999;
+        word-break: break-all;
       }
     }
   }
@@ -106,3 +107,7 @@
     }
   }
 }
+.tui-contact-info-h5 {
+  padding: 8px;
+ 
+}

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
+import { isH5 } from '../../../utils/env';
 import { useTUIKitContext, useTUIContactContext } from '../../../context';
 import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
 
@@ -29,9 +30,11 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
     acceptFriendApplication(userID);
     setActiveContact();
   };
+  // eslint-disable-next-line
+  // @ts-ignore
   return (
     isShowContactList && (
-      <div className="tui-contacts-list">
+      <div className={`tui-contacts-list ${isH5 ? 'tui-contacts-list-h5' : ''} `}>
         <div
           className="tui-contacts-title"
           role="button"
@@ -44,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;
@@ -105,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
@@ -136,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/TUIContactList/index.scss

@@ -88,3 +88,8 @@
 ::-webkit-scrollbar {
   display: none;
 }
+.tui-contacts-list-h5 {
+  min-width: 100%;
+  width: 100%;
+  max-width: 100%;
+}

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/TUIContact/index.scss

@@ -65,3 +65,8 @@
     }
   }
 }
+.tui-contacts-h5 {
+  min-width: 100%;
+  width: 100%;
+  max-width: 100%;
+}

package/src/components/TUIContactSearch/TUIContactSearch.tsx

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

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

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

package/src/components/TUIConversationList/TUIConversationList.tsx

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

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

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