@tencentcloud/chat-uikit-react 1.0.4 → 1.1.0

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import './styles/index.scss';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { Icon, IconTypes } from '../Icon';
 import { ConversationCreateUserSelectList } from './ConversationCreateUserSelectList';
 import { ConversationCreatGroupDetail } from './ConversationCreatGroupDetail';
@@ -22,8 +22,8 @@ export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
   const [isCreateGroup, setIsCreateGroup] = useState(false);
   const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
   const [selectList, setSelectList] = useState([]);
-  const { tim } = useTUIKitContext();
-  const { createConversation } = useConversation(tim);
+  const { chat } = useTUIKitContext();
+  const { createConversation } = useConversation(chat);
   const back = () => {
     if (isCreateGroup) {
       switch (pageState) {

package/src/components/ConversationCreate/ConversationCreateSelectView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Profile } from 'tim-js-sdk';
+import { Profile } from '@tencentcloud/chat';
 import { Avatar, defaultUserAvatar } from '../Avatar';
 import './styles/conversationCreateSelectView.scss';
 import { Icon, IconTypes } from '../Icon';

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { Input } from '../Input';
 import { Icon, IconTypes } from '../Icon';
 import { ConversationCreateSelectView, ConversationCreateSelectViewProps } from './ConversationCreateSelectView';
@@ -30,14 +30,14 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     setPageState,
   } = props;
   const [searchValue, setSearchValue] = useState('');
-  const { tim, setActiveConversation } = useTUIKitContext();
+  const { chat, setActiveConversation } = useTUIKitContext();
   const [friendList, setFriendList] = useState({});
   const {
     getFriendListSortSearchResult,
-  } = useConversationCreate(tim, conversationList, (newFriendListResult) => {
+  } = useConversationCreate(chat, conversationList, (newFriendListResult) => {
     setFriendList(newFriendListResult);
   });
-  const { createConversation } = useConversation(tim);
+  const { createConversation } = useConversation(chat);
   const userCheckedList = useRef(new Map());
   const searchValueChange = async (e) => {
     const { value } = e.target;

package/src/components/ConversationCreate/ConversationGroupTypeInfo.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import './styles/conversationGroupTypeInfo.scss';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { PageStateTypes } from './ConversationCreate';
 import { Icon, IconTypes } from '../Icon';
 
 export enum GroupType {
-  Work= TIM.TYPES.GRP_WORK,
-  Public= TIM.TYPES.GRP_PUBLIC,
-  Meeting= TIM.TYPES.GRP_MEETING,
-  AVChatRoom= TIM.TYPES.GRP_AVCHATROOM,
+  Work= TencentCloudChat.TYPES.GRP_WORK,
+  Public= TencentCloudChat.TYPES.GRP_PUBLIC,
+  Meeting= TencentCloudChat.TYPES.GRP_MEETING,
+  AVChatRoom= TencentCloudChat.TYPES.GRP_AVCHATROOM,
 }
 export interface ConversationGroupTypeInfoProps {
   groupType: string,

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

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { strChineseFirstPy } from '../static/word';
 import { useProfile } from '../../../hooks';
 
 export const useConversationCreate = (
-  tim,
+  chat,
   conversationList,
   setFriendListResultHandler?:(
     newFriendListResult: object,
@@ -22,9 +22,9 @@ export const useConversationCreate = (
   };
   const queryFriendList = async () => {
     const frequentlyConversationProfile = conversationList.filter(
-      (item) => item.type === TIM.TYPES.CONV_C2C,
+      (item) => item.type === TencentCloudChat.TYPES.CONV_C2C,
     ).slice(0, 5).map((item) => item.userProfile);
-    const { code, data } = await tim.getFriendList();
+    const { code, data } = await chat.getFriendList();
     if (code === 0) {
       const sortResult = handleData(
         data.map((item) => item.profile),
@@ -69,7 +69,7 @@ export const useConversationCreate = (
     });
     return sortResult;
   };
-  const { getUserProfile } = useProfile(tim);
+  const { getUserProfile } = useProfile(chat);
   const getFriendListSortSearchResult = async (searchValue: string) => {
     if (!searchValue) return friendListSortResult;
     const { data: profileList } = await getUserProfile([searchValue]);
@@ -95,7 +95,7 @@ export const useConversationCreate = (
   };
   useEffect(() => {
     queryFriendList();
-  }, [tim]);
+  }, [chat]);
   return {
     getFirstLetter,
     queryFriendList,

package/src/components/ConversationPreview/ConversationListContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import './styles/index.scss';
 
 export interface ConversationListContainerProps {

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { TUIKitContextValue, useTUIKitContext } from '../../context';
 import { ConversationPreviewContent } from './ConversationPreviewContent';
 import { AvatarProps } from '../Avatar';

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -41,8 +41,8 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const { tim, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
-  const { pinConversation, deleteConversation } = useConversation(tim);
+  const { chat, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
+  const { pinConversation, deleteConversation } = useConversation(chat);
   const moreHandle = (type: string) => {
     const { conversationID, isPinned } = conversation;
     switch (type) {

package/src/components/ConversationPreview/utils.tsx

@@ -2,7 +2,7 @@ import {
   format, isToday, isYesterday, formatDistance, isThisYear, isThisWeek,
 } from 'date-fns';
 import React from 'react';
-import TIM, { Conversation, Group, Profile } from 'tim-js-sdk';
+import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
@@ -17,10 +17,10 @@ export const getDisplayTitle = (
   const { type } = conversation;
   let title = '';
   switch (type) {
-    case TIM.TYPES.CONV_C2C:
+    case TencentCloudChat.TYPES.CONV_C2C:
       title = nick || userID;
       break;
-    case TIM.TYPES.CONV_GROUP:
+    case TencentCloudChat.TYPES.CONV_GROUP:
       title = name || groupID;
       break;
     default:
@@ -45,10 +45,10 @@ export const getDisplayImage = (conversation: Conversation) => {
   let displayImage = avatar;
   if (!avatar) {
     switch (type) {
-      case TIM.TYPES.CONV_C2C:
+      case TencentCloudChat.TYPES.CONV_C2C:
         displayImage = defaultUserAvatar;
         break;
-      case TIM.TYPES.CONV_GROUP:
+      case TencentCloudChat.TYPES.CONV_GROUP:
         displayImage = defaultGroupAvatarWork;
         break;
       default:
@@ -64,11 +64,11 @@ export const getDisplayMessage = (conversation:Conversation, myProfile:Profile)
   } = lastMessage;
   let from = '';
   switch (type) {
-    case TIM.TYPES.CONV_GROUP:
+    case TencentCloudChat.TYPES.CONV_GROUP:
       from = lastMessage?.fromAccount === myProfile?.userID ? 'You' : `${nameCard || nick || fromAccount || ''}`;
       from = `${from ? `${from}:` : ''}`;
       break;
-    case TIM.TYPES.CONV_C2C:
+    case TencentCloudChat.TYPES.CONV_C2C:
       from = isRevoked ? 'you ' : '';
       break;
     default:
@@ -91,13 +91,13 @@ export const getMessageProfile = (conversation: Conversation):TProfile => {
   let result = {};
   const { type, groupProfile, userProfile } = conversation;
   switch (type) {
-    case TIM.TYPES.CONV_C2C:
+    case TencentCloudChat.TYPES.CONV_C2C:
       result = userProfile;
       break;
-    case TIM.TYPES.CONV_GROUP:
+    case TencentCloudChat.TYPES.CONV_GROUP:
       result = groupProfile;
       break;
-    case TIM.TYPES.CONV_SYSTEM:
+    case TencentCloudChat.TYPES.CONV_SYSTEM:
     default:
   }
   return result as TProfile;

package/src/components/ConversationSearch/ConversationSearchResult.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import {
   ConversationPreview,
   ConversationPreviewUIComponentProps,

package/src/components/Profile/Profile.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './styles/index.scss';
-import { Profile as TProfile } from 'tim-js-sdk';
+import { Profile as TProfile } from '@tencentcloud/chat';
 import { Avatar, defaultUserAvatar } from '../Avatar';
 import { Icon, IconTypes } from '../Icon';
 

package/src/components/Profile/hooks/useProfile.tsx

@@ -1,25 +1,25 @@
 import React, { useState, useEffect } from 'react';
-import { ChatSDK, Profile } from 'tim-js-sdk';
+import { ChatSDK, Profile } from '@tencentcloud/chat';
 
-export function useProfile(tim: ChatSDK, profileHandler?: (
+export function useProfile(chat: ChatSDK, profileHandler?: (
   profile: Profile,
   setProfile?: React.Dispatch<React.SetStateAction<Profile>>,
 ) => void) {
   const [myProfile, setMyProfile] = useState<Profile>();
 
   const getProfile = async (userIDList: Array<string>) => {
-    const res = await tim?.getUserProfile({
+    const res = await chat?.getUserProfile({
       userIDList,
     });
     return res.data;
   };
   const getMyProfile = async () => {
-    const res = await tim?.getMyProfile();
+    const res = await chat?.getMyProfile();
     setMyProfile(res?.data);
   };
   useEffect(() => {
     getMyProfile();
-  }, [tim]);
+  }, [chat]);
   return {
     myProfile,
     setMyProfile,

package/src/components/TUIChat/TUIChat.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren, useEffect, useMemo, useReducer, useRef, useState,
 } from 'react';
-import { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import { ChatSDK, Conversation, Message } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../context/TUIKitContext';
 import { TUIChatStateContextProvider } from '../../context/TUIChatStateContext';
 import { TUIChatActionProvider } from '../../context/TUIChatActionContext';
@@ -58,7 +58,7 @@ interface TUIChatProps {
 }
 
 interface TUIChatInnerProps extends TUIChatProps {
-  tim?: ChatSDK,
+  chat?: ChatSDK,
   key?: string;
 }
 
@@ -70,7 +70,7 @@ function UnMemoizedTUIChat <T extends TUIChatProps>(
     EmptyPlaceholder = <EmptyStateIndicator listType="chat" />,
   } = props;
 
-  const { conversation: contextConversation, tim } = useTUIKitContext('TUIChat');
+  const { conversation: contextConversation, chat } = useTUIKitContext('TUIChat');
 
   const conversation = propsConversation || contextConversation;
 
@@ -78,7 +78,7 @@ function UnMemoizedTUIChat <T extends TUIChatProps>(
 
   return (
     <TUIChatInner
-      tim={tim}
+      chat={chat}
       {...props}
       conversation={conversation}
       key={conversation.conversationID}
@@ -90,7 +90,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   props: PropsWithChildren<T>,
 ):React.ReactElement {
   const {
-    tim,
+    chat,
     conversation,
     className,
     children,
@@ -118,7 +118,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   const messageListRef = useRef(null);
   const textareaRef = useRef<HTMLTextAreaElement>();
   const chatStateContextValue = useCreateTUIChatStateContext({
-    tim,
+    chat,
     conversation,
     messageListRef,
     textareaRef,
@@ -141,16 +141,16 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     createTextAtMessage,
     createLocationMessage,
     createMergerMessage,
-  } = useCreateMessage({ tim, conversation, cloudCustomData });
+  } = useCreateMessage({ chat, conversation, cloudCustomData });
 
   const {
     getMessageList,
     updateMessage,
-    editLocalmessage,
+    editLocalMessage,
     removeMessage,
-    updataUploadPenddingMessageList,
+    updateUploadPendingMessageList,
   } = useHandleMessageList({
-    tim, conversation, state, dispatch,
+    chat, conversation, state, dispatch,
   });
 
   const {
@@ -168,12 +168,12 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       if (propsSendMessage) {
         await propsSendMessage(message, options);
       } else {
-        await tim.sendMessage(message, options);
+        await chat.sendMessage(message, options);
       }
-      editLocalmessage(message);
+      editLocalMessage(message);
     } catch (error) {
       Toast({ text: error, type: 'error' });
-      editLocalmessage(message);
+      editLocalMessage(message);
       throw new Error(error);
     }
   };
@@ -189,6 +189,9 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     const historyMessageData = await getMessageList({
       nextReqMessageID: state.nextReqMessageID,
     });
+    if (!historyMessageData) {
+      return;
+    }
     dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_HISTORY_MESSAGELIST,
       value: historyMessageData.data.messageList,
@@ -208,6 +211,9 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   useEffect(() => {
     (async () => {
       const res = await getMessageList();
+      if (!res) {
+        return;
+      }
       if (res.data.messageList.length > 0) {
         dispatch({
           type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
@@ -245,14 +251,14 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       createTextAtMessage,
       createLocationMessage,
       createMergerMessage,
-      editLocalmessage,
+      editLocalMessage,
       operateMessage,
       loadMore,
       revokeMessage,
       setAudioSource,
       setVideoSource,
       setHighlightedMessageId,
-      updataUploadPenddingMessageList,
+      updateUploadPendingMessageList,
     }),
     [
       sendMessage,
@@ -269,14 +275,14 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       createTextAtMessage,
       createLocationMessage,
       createMergerMessage,
-      editLocalmessage,
+      editLocalMessage,
       operateMessage,
       loadMore,
       revokeMessage,
       setAudioSource,
       setVideoSource,
       setHighlightedMessageId,
-      updataUploadPenddingMessageList,
+      updateUploadPendingMessageList,
     ],
   );
 

package/src/components/TUIChat/TUIChatState.tsx

@@ -1,5 +1,5 @@
 import type { Reducer } from 'react';
-import { Conversation, Message } from 'tim-js-sdk';
+import { Conversation, Message } from '@tencentcloud/chat';
 import { CONSTANT_DISPATCH_TYPE } from '../../constants';
 import type { TUIChatStateContextValue } from '../../context';
 import { OperateMessageParams } from './hooks/useHandleMessage';
@@ -8,7 +8,7 @@ import {
   handleMessageList,
   handleEditMessage,
   handleRemoveMessage,
-  handleUploadPenddingMessage,
+  handleUploadPendingMessage,
 } from './unitls';
 
 export type ChatStateReducerAction =
@@ -70,7 +70,7 @@ export type ChatStateReducerAction =
       value?: HTMLVideoElement | null,
     }
   | {
-      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDDING_MESSAGE_LIST,
+      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST,
       value?: Message,
     }
 export type ChatStateReducer = Reducer<TUIChatStateContextValue, ChatStateReducerAction>;
@@ -128,11 +128,11 @@ export const chatReducer = (
       return { ...state, audioSource: action.value };
     case CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE:
       return { ...state, vidoeSource: action.value };
-    case CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDDING_MESSAGE_LIST:
+    case CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST:
       return {
         ...state,
-        uploadPenddingMessageList: [
-          ...handleUploadPenddingMessage(state.uploadPenddingMessageList, action.value),
+        uploadPendingMessageList: [
+          ...handleUploadPendingMessage(state.uploadPendingMessageList, action.value),
         ],
       };
     default: return state;
@@ -152,5 +152,5 @@ export const initialState:TUIChatStateContextValue = {
   noMore: false,
   audioSource: null,
   vidoeSource: null,
-  uploadPenddingMessageList: [],
+  uploadPendingMessageList: [],
 };

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

@@ -1,16 +1,16 @@
 import { useCallback, useEffect, useState } from 'react';
-import TIM, { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import TencentCloudChat, { ChatSDK, Conversation, Message } from '@tencentcloud/chat';
 
 export interface CreateMessageProps {
-  tim?: ChatSDK,
+  chat?: ChatSDK,
   conversation?: Conversation,
   to?: string,
-  type?: TIM.TYPES,
+  type?: TencentCloudChat.TYPES,
   cloudCustomData?: string,
 }
 export interface BasicCreateMessageProps {
   needReadReceipt?: boolean,
-  priority?: TIM.TYPES,
+  priority?: TencentCloudChat.TYPES,
   onProgress?: (num:number) => void,
   cloudCustomData?: string;
   receiverList?: Array<string>;
@@ -74,7 +74,7 @@ export interface CreateMergerMessageProps extends BasicCreateMessageProps{
 
 export function useCreateMessage<T extends CreateMessageProps>(props:T) {
   const {
-    tim,
+    chat,
     conversation,
     to = '',
     type: propType,
@@ -86,7 +86,7 @@ export function useCreateMessage<T extends CreateMessageProps>(props:T) {
   const type = propType || conversationType;
 
   const [basicConfig, setBasicConfig] = useState({
-    to: to || (type === TIM.TYPES.CONV_C2C ? userProfile?.userID : groupProfile?.groupID),
+    to: to || (type === TencentCloudChat.TYPES.CONV_C2C ? userProfile?.userID : groupProfile?.groupID),
     conversationType: type,
     cloudCustomData,
   });
@@ -96,36 +96,36 @@ export function useCreateMessage<T extends CreateMessageProps>(props:T) {
     setBasicConfig(basicConfig);
   }, [cloudCustomData]);
 
-  const createTextMessage = useCallback((params: CreateTextMessageProps) => tim.createTextMessage({
+  const createTextMessage = useCallback((params: CreateTextMessageProps) => chat.createTextMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
-  const createFaceMessage = useCallback((params: CreateFaceMessageProps) => tim.createFaceMessage({
+  const createFaceMessage = useCallback((params: CreateFaceMessageProps) => chat.createFaceMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createImageMessage = useCallback((
     params: CreateUploadMessageProps,
-  ) => tim.createImageMessage({
+  ) => chat.createImageMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createVideoMessage = useCallback((
     params: CreateUploadMessageProps,
-  ) => tim.createVideoMessage({
+  ) => chat.createVideoMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createFileMessage = useCallback((
     params: CreateUploadMessageProps,
-  ) => tim.createFileMessage({
+  ) => chat.createFileMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createForwardMessage = useCallback((
     params: CreateForwardMessageProps,
@@ -136,51 +136,51 @@ export function useCreateMessage<T extends CreateMessageProps>(props:T) {
       userProfile: forwardUserProfile,
       groupProfile: forwardGroupProfile,
     } = forwardConversation;
-    const forwardTo = forwardType === TIM.TYPES.CONV_C2C
+    const forwardTo = forwardType === TencentCloudChat.TYPES.CONV_C2C
       ? forwardUserProfile?.userID : forwardGroupProfile?.groupID;
-    return tim.createForwardMessage({
+    return chat.createForwardMessage({
       to: forwardTo,
       conversationType: forwardType,
       payload: message,
       ...other,
     });
-  }, [tim]);
+  }, [chat]);
 
   const createCustomMessage = useCallback((
     params: CreateCustomMessageProps,
     // ChatSDK < V2.26.0 createCustomMessage ts declaration error
-  ) => (tim as any).createCustomMessage({
+  ) => (chat as any).createCustomMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createAudioMessage = useCallback((
     params: CreateUploadMessageProps,
-  ) => tim.createAudioMessage({
+  ) => chat.createAudioMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createTextAtMessage = useCallback((
     params: CreateTextAtMessageProps,
-  ) => tim.createTextAtMessage({
+  ) => chat.createTextAtMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createLocationMessage = useCallback((
     params: CreateLocationMessageProps,
-  ) => tim.createLocationMessage({
+  ) => chat.createLocationMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   const createMergerMessage = useCallback((
     params: CreateMergerMessageProps,
-  ) => tim.createMergerMessage({
+  ) => chat.createMergerMessage({
     ...basicConfig,
     ...params,
-  }), [tim]);
+  }), [chat]);
 
   return {
     createTextMessage,

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

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
-import { ChatSDK } from 'tim-js-sdk';
+import { ChatSDK } from '@tencentcloud/chat';
 import { TUIChatStateContextValue } from '../../../context';
 
 interface CreateTUIChatStateContextProp extends TUIChatStateContextValue {
-  tim?: ChatSDK,
+  chat?: ChatSDK,
 }
 
 function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
   const {
-    tim,
+    chat,
     conversation,
     messageList,
     messageListRef,
@@ -19,7 +19,7 @@ function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
     ...state
   } = props;
   const TUIChatStateContext = useMemo(() => ({
-    tim,
+    chat,
     conversation,
     messageList,
     messageListRef,
@@ -29,7 +29,7 @@ function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
     TUIMessageListConfig,
     ...state,
   }), [
-    tim,
+    chat,
     conversation,
     messageList,
     messageListRef,

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

@@ -1,11 +1,11 @@
 import { Dispatch, useCallback } from 'react';
-import { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import { ChatSDK, Conversation, Message } from '@tencentcloud/chat';
 import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
 import type { TUIChatStateContextValue } from '../../../context';
 import type { ChatStateReducerAction } from '../TUIChatState';
 
 export interface CreateMessageProps {
-  tim?: ChatSDK,
+  chat?: ChatSDK,
   conversation?: Conversation,
   state?: TUIChatStateContextValue,
   dispatch?: Dispatch<ChatStateReducerAction>,