@tencentcloud/chat-uikit-react 2.1.2 → 2.1.4

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]);
     }
   };
 

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

@@ -5,7 +5,7 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
-  useTUIChatActionContext, useTUIChatStateContext, useTUIKitContext,
+  useTUIChatStateContext, useTUIKitContext,
 } from '../../../context';
 
 export function useHandleForwardMessage(msg?:Message) {
@@ -16,11 +16,11 @@ export function useHandleForwardMessage(msg?:Message) {
   const [conversationList, setConversationList] = useState([]);
   const { chat } = useTUIKitContext('TUIChat');
 
-  const message = msg || operateData[MESSAGE_OPERATE.FORWARD];
+  const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 
   const sendForwardMessage = (list:Array<Conversation>) => {
     list.map((item:Conversation) => {
-      TUIChatService.sendForwardMessage([item], [message]);
+      message &&  TUIChatService.sendForwardMessage([item], [message]);
       return item;
     });
   };
@@ -29,7 +29,7 @@ export function useHandleForwardMessage(msg?:Message) {
     (async () => {
       const res = await chat.getConversationList();
       setConversationList(res?.data?.conversationList.filter(
-        (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
+        (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
       ));
     })();
   }, [chat]);

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

@@ -3,7 +3,7 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_OPERATE } from '../../../constants';
 import { useTUIChatStateContext } from '../../../context';
 
-const quoteConfigType = {
+const quoteConfigType: any = {
   [TencentCloudChat.TYPES.MSG_TEXT]: 1,
   [TencentCloudChat.TYPES.MSG_CUSTOM]: 2,
   [TencentCloudChat.TYPES.MSG_IMAGE]: 3,
@@ -13,7 +13,7 @@ const quoteConfigType = {
   [TencentCloudChat.TYPES.MSG_FACE]: 8,
 };
 
-const quoteConfigForShow = {
+const quoteConfigForShow: any = {
   [TencentCloudChat.TYPES.MSG_CUSTOM]: '[custom]',
   [TencentCloudChat.TYPES.MSG_IMAGE]: '[image]',
   [TencentCloudChat.TYPES.MSG_AUDIO]: '[audio]',
@@ -27,7 +27,7 @@ export function useHandleQuoteMessage(msg?:Message) {
     operateData,
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
-  const [cloudCustomData, setCloudCustomData] = useState({ messageReply: null });
+  const [cloudCustomData, setCloudCustomData] = useState<any>({ messageReply: null });
 
   const handleQuoteMessage = (message: Message) => {
     const messageType = quoteConfigType[message?.type];
@@ -46,7 +46,7 @@ export function useHandleQuoteMessage(msg?:Message) {
 
   useEffect(
     () => {
-      const message = msg || operateData[MESSAGE_OPERATE.QUOTE];
+      const message = msg || (operateData &&operateData[MESSAGE_OPERATE.QUOTE]);
       setCloudCustomData(
         {
           messageReply: message ? handleQuoteMessage(message) : null,
@@ -59,6 +59,6 @@ export function useHandleQuoteMessage(msg?:Message) {
   return {
     cloudCustomData,
     handleQuoteMessage,
-    message: msg || operateData[MESSAGE_OPERATE.QUOTE],
+    message: msg || (operateData &&operateData[MESSAGE_OPERATE.QUOTE]),
   };
 }

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

@@ -16,8 +16,8 @@ export interface IinitState {
 }
 
 export interface ICursorPos {
-  start?: number,
-  end?: number,
+  start?: number | null,
+  end?: number | null,
 }
 
 export type MessageInputReducerAction =
@@ -38,7 +38,7 @@ const initState:IinitState = {
   },
 };
 
-const reducer = (state:IinitState, action) => {
+const reducer = (state:IinitState, action: any) => {
   switch (action.type) {
     case CONSTANT_DISPATCH_TYPE.SET_TEXT:
       return { ...state, text: action?.getNewText(state.text) };

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

@@ -16,6 +16,7 @@ import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
 import { filesData } from './useUploadPicker';
+import { de } from 'date-fns/locale';
 
 interface useMessageInputTextProps extends IbaseStateProps {
   focus?: boolean,
@@ -70,21 +71,23 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     }
     TUIChatService.sendTextMessage(options).then((res: any) => {
       const { message } = res.data;
-      setFirstSendMessage(message);
+      setFirstSendMessage && setFirstSendMessage(message);
     });
     enableSampleTaskStatus('sendMessage');
     dispatch({
       getNewText: (text:string) => '',
       type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
     });
-    operateMessage({
+    operateMessage && operateMessage({
+      // eslint-disable-next-line
+      // @ts-ignore
       [MESSAGE_OPERATE.QUOTE]: null,
     });
   };
 
   const handleKeyDown = useCallback(
     (event?:React.KeyboardEvent<EventTarget>) => {
-      if (!event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
+      if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
         event?.preventDefault();
         handleSubmit(event);
       }
@@ -105,11 +108,11 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
         return;
       }
       const { types, items } = e.clipboardData;
-      types.find((type, index) => {
+      types.find((type: string, index: number) => {
         const item = items[index];
         switch (type) {
           case 'text/plain':
-            item.getAsString((str) => {
+            item.getAsString((str: string) => {
               dispatch({
                 type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
                 getNewText: (text:string) => `${text}${str}`,
@@ -119,7 +122,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
           case 'Files': {
             const file = item.getAsFile();
             if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
-              sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
+              sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
             }
             return true;
           }
@@ -135,13 +138,13 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     (textToInsert: string) => {
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text:string) => `${text.slice(0, state.cursorPos.start)}${textToInsert}${text.slice(state.cursorPos.start)}`,
+        getNewText: (text:string) => `${text.slice(0, state?.cursorPos?.start || 0)}${textToInsert}${text.slice(state?.cursorPos?.start || 0)}`,
       });
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
         value: {
-          start: state.cursorPos.start + textToInsert.length,
-          end: state.cursorPos.end + textToInsert.length,
+          start: state?.cursorPos?.start && state.cursorPos.start + textToInsert.length,
+          end: state?.cursorPos?.end && state.cursorPos.end + textToInsert.length,
         },
       });
       textareaRef?.current?.focus();

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

@@ -16,13 +16,13 @@ export function useUploadElement<
     onChange,
   } = props;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files.length > 0) {
+    if (e.target.files && e.target.files.length > 0) {
       const { files } = e.target;
       const options = {
         type: files[0].type,
       };
       const file = new File(files as any, files[0].name, options);
-      onChange(file);
+      onChange && onChange(file);
     }
     e.target.value = '';
   };

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

@@ -19,7 +19,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
-  const creatUploadMessage = {
+  const creatUploadMessage: any = {
     [MESSAGE_TYPE_NAME.IMAGE]: TUIChatService.sendImageMessage,
     [MESSAGE_TYPE_NAME.VIDEO]: TUIChatService.sendVideoMessage,
     [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -53,20 +53,19 @@ function TUIMessageListWithContext <T extends MessageListProps>(
 
   const loadMore = propsLoadMore || TUIMessageListConfig?.loadMore || contextLoadMore;
 
-  const elements = useMessageListElement({
+  const elements = contextMessageList && useMessageListElement({
     enrichedMessageList: contextMessageList,
     TUIMessage,
     intervalsTimer,
   });
   useEffect(() => {
-    // messageList 滑动到底部
     (async () => {
       const parentElement = ulElement?.parentElement?.parentElement;
       if (
         !isCompleted
-        && parentElement?.clientHeight >= ulElement?.clientHeight
+        && parentElement && parentElement?.clientHeight >= ulElement?.clientHeight
       ) {
-        await loadMore();
+        loadMore && await loadMore();
       }
       if (ulElement?.children) {
         const HTMLCollection = ulElement?.children || [];
@@ -92,7 +91,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       const timer = setTimeout(() => {
         children[children.length - 1].classList.remove('high-lighted');
         clearTimeout(timer);
-        setHighlightedMessageId('');
+        setHighlightedMessageId && setHighlightedMessageId('');
       }, 1000);
     }
   }, [highlightedMessageId]);
@@ -109,7 +108,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       >
         <ul ref={setUlElement}>
           {
-              elements?.length > 0 ? elements : <EmptyStateIndicator listType="message" />
+              elements?.length && elements.length > 0 ? elements : <EmptyStateIndicator listType="message" />
             }
         </ul>
       </InfiniteScroll>

package/src/components/TUIMessageList/hooks/useMessageListElement.tsx

@@ -26,13 +26,16 @@ function useMessageListElement <T extends MessageListElementProps>(
     const key = `${item.ID}-${index}`;
     const preMessageTImer = index > 0 ? enrichedMessageList[index - 1]?.time : -1;
     const currrentTimer = item?.time || 0;
-    const isShowIntervalsTimer = preMessageTImer !== -1
+    const isShowIntervalsTimer = intervalsTimer && preMessageTImer !== -1
       ? (currrentTimer - preMessageTImer) >= intervalsTimer : false;
     return (
       <li className="message-list-item" key={key}>
         {
-         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}</div>
+         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>
+          {currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}</div>
         }
+        {/* // eslint-disable-next-line
+        // @ts-ignore */}
         <TUIMessage message={item} />
       </li>
     );

package/src/components/TUIProfile/TUIProfile.tsx

@@ -27,10 +27,12 @@ function UnMemoizedTUIProfile<T extends TUIProfileProps>(
 
   return (
     <>
+    {/* //eslint-disable-next-line 
+    @ts-ignore */}
       <Profile
         profile={myProfile}
         handleAvatar={() => {
-          setTUIProfileShow(true);
+          setTUIProfileShow && setTUIProfileShow(true);
         }}
       />
       {TUIProfileShow && (

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-date-picker';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
+import { UpdateMyProfileParams } from "@tencentcloud/chat-uikit-engine";
 import { isH5 } from '../../utils/env';
 import { useTUIKitContext } from '../../context';
 
@@ -9,14 +10,13 @@ import { Avatar } from '../Avatar';
 import { DivWithEdit } from '../DivWithEdit';
 import { Icon, IconTypes } from '../Icon';
 import { handleDisplayAvatar } from '../untils';
-import { ProfileParams } from './hooks';
 
-const gender = {
+const gender: any = {
   [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
   [TencentCloudChat.TYPES.GENDER_MALE]: 'male',
   [TencentCloudChat.TYPES.GENDER_FEMALE]: 'female',
 };
-const allowType = {
+const allowType: any = {
   [TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY]: 'allowAny',
   [TencentCloudChat.TYPES.ALLOW_TYPE_NEED_CONFIRM]: 'needConfirm',
   [TencentCloudChat.TYPES.ALLOW_TYPE_DENY_ANY]: 'denyAny',
@@ -59,7 +59,7 @@ const allowTypeList = [
 
 export interface TUIProfileDefaultProps {
   userInfo?: Profile,
-  update?: (option: ProfileParams) => void,
+  update?: (option: UpdateMyProfileParams) => void,
   className?: string,
 }
 
@@ -108,7 +108,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     return `${year}${month}${day}`;
   };
 
-  let editListMap = [
+  let editListMap: any = [
     {
       name: 'Signature',
       value: userInfo?.selfSignature,
@@ -117,7 +117,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
     {
       name: 'Gender',
-      value: t(gender[userInfo?.gender]?.replace(
+      value: t( userInfo?.gender && gender[userInfo?.gender]?.replace(
         gender[userInfo?.gender][0],
         gender[userInfo?.gender][0]?.toLocaleUpperCase(),
       ) ? `TUIProfile.${gender[userInfo?.gender]?.replace(
@@ -148,9 +148,9 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
     {
       name: 'AllowType',
-      value: t(`TUIProfile.${allowType[userInfo?.allowType]?.replace(
-        allowType[userInfo?.allowType][0],
-        allowType[userInfo?.allowType][0]?.toLocaleUpperCase(),
+      value: t(`TUIProfile.${allowType[userInfo?.allowType || '']?.replace(
+        userInfo && allowType[userInfo?.allowType][0],
+        userInfo && allowType[userInfo?.allowType][0]?.toLocaleUpperCase(),
       )}`),
       type: 'select',
       children: (
@@ -191,14 +191,14 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
   ];
   if (isH5) {
-    editListMap = editListMap.filter((item) => item.name !== 'Birthday');
+    editListMap = editListMap.filter((item: any) => item.name !== 'Birthday');
   }
   const handleSetEditName = (name:string) => {
     setIsEditName(name);
   };
 
-  const confirm = (options) => {
-    update(options);
+  const confirm = (options: any) => {
+    update && update(options);
     setIsEditName('');
   };
 
@@ -228,12 +228,12 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   };
 
   // edit gender
-  const editGender = (data) => {
+  const editGender = (data: any) => {
     confirm({ gender: data.value });
   };
 
   // edit allowType
-  const editAllowType = (data) => {
+  const editAllowType = (data: any) => {
     confirm({ allowType: data.value });
   };
 
@@ -251,14 +251,14 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
           width={9}
           height={16}
           type={IconTypes.BACK}
-          onClick={() => { setTUIProfileShow(false); }}
+          onClick={() => { setTUIProfileShow && setTUIProfileShow(false); }}
         />
         <h1>{t('TUIProfile.Personal information')}</h1>
       </header>
       <main className="tui-profile-main">
         <div className="tui-profile-avatar">
           <Avatar
-            image={handleDisplayAvatar(userInfo?.avatar)}
+            image={userInfo && handleDisplayAvatar(userInfo?.avatar)}
             size={94}
             update={editAvatar}
             list={avatarList}
@@ -281,7 +281,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
       </main>
       <ul className="tui-profile-list">
         {
-          editListMap.map((item) => {
+          editListMap.map((item: any) => {
             const key = `${item.name}`;
             return (
               <li className="tui-profile-list-item" key={key}>

package/src/components/TUIProfile/hooks/useMyProfile.tsx

@@ -1,7 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
-
+import { useEffect, useState } from 'react';
+import { Profile } from '@tencentcloud/chat';
+import {
+  TUIUserService,
+  TUIStore,
+  StoreName,
+  UpdateMyProfileParams,
+} from "@tencentcloud/chat-uikit-engine";
 export interface ProfileParams {
   nick?: string,
   avatar?: string,
@@ -19,43 +23,21 @@ export interface ProfileParams {
 }
 
 export function useMyProfile() {
-  const [myProfile, setMyPofile] = useState(null);
-  const { chat, myProfile: contextProfile } = useTUIKitContext('useMyProfile');
-
-  const getMyProfile = useCallback(async () => {
-    if (contextProfile) {
-      setMyPofile(contextProfile);
-    } else {
-      const res = await chat?.getMyProfile();
-      setMyPofile(res?.data);
-    }
-  }, [chat]);
+  const [myProfile, setMyProfile] = useState<Profile>();
 
-  const updateMyProfile = useCallback(async (options) => {
-    const res = await chat?.updateMyProfile(options);
-    const userInfo = { ...myProfile };
-    const keys = Object.keys(res.data);
-    keys.map((name) => {
-      userInfo[name] = res.data[name];
-      return name;
-    });
-    setMyPofile(userInfo);
-    return res;
-  }, [chat]);
-
-  const onProfileUpdated = (event) => {
-    console.log('onProfileUpdated', event.data); // 包含 Profile 对象的数组
+  const updateMyProfile = (options: UpdateMyProfileParams) => {
+    TUIUserService.updateMyProfile(options);
+    const userInfo: any = { ...myProfile };
+    setMyProfile(userInfo);
   };
 
   useEffect(() => {
-    (async () => {
-      await getMyProfile();
-    })();
-    chat?.on(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);
-    return () => {
-      chat?.off(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);
-    };
-  }, [chat]);
+    TUIStore.watch(StoreName.USER, {
+      userProfile: (userProfileData: any) => {
+        setMyProfile(userProfileData);
+      },
+    });
+  }, []);
 
   return {
     myProfile,