@tencentcloud/chat-uikit-react 1.0.3 → 1.1.0

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>,

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

@@ -1,11 +1,11 @@
 import { Dispatch, useCallback } from 'react';
-import { ChatSDK, Conversation, Message } from 'tim-js-sdk';
+import TencentCloudChat, { 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>,
@@ -18,25 +18,38 @@ export interface GetMessageListProps{
 
 export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
   const {
-    tim,
+    chat,
     conversation,
     state,
     dispatch,
   } = props;
 
-  const { conversationID } = conversation;
+  const { conversationID, groupProfile, type } = conversation;
+  const isC2CConversation = type === TencentCloudChat.TYPES.CONV_C2C;
 
   const basicConfig = {
     conversationID,
   };
 
-  const getMessageList = useCallback((params?: GetMessageListProps) => {
+  const getMessageList = useCallback(async (params?: GetMessageListProps) => {
     const data = params || {};
-    return tim.getMessageList({
-      ...basicConfig,
-      ...data,
-    });
-  }, [tim]);
+    let groupType = '';
+    if (groupProfile) {
+      try {
+        const res = await chat.searchGroupByID(groupProfile.groupID);
+        groupType = res?.data?.group?.type;
+      } catch (error) {
+        groupType = '';
+      }
+    }
+    if (isC2CConversation || (groupType && groupType !== TencentCloudChat.TYPES.GRP_AVCHATROOM)) {
+      return chat.getMessageList({
+        ...basicConfig,
+        ...data,
+      });
+    }
+    return null;
+  }, [chat]);
 
   const updateMessage = useCallback((messageList: Array<Message>) => {
     dispatch({
@@ -54,16 +67,16 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
     });
   }, [dispatch]);
 
-  const editLocalmessage = useCallback((message: Message) => {
+  const editLocalMessage = useCallback((message: Message) => {
     dispatch({
       type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE,
       value: message,
     });
   }, [dispatch]);
 
-  const updataUploadPenddingMessageList = useCallback((message: Message) => {
+  const updateUploadPendingMessageList = useCallback((message: Message) => {
     dispatch({
-      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDDING_MESSAGE_LIST,
+      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST,
       value: message,
     });
   }, [dispatch]);
@@ -72,7 +85,7 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
     getMessageList,
     updateMessage,
     removeMessage,
-    editLocalmessage,
-    updataUploadPenddingMessageList,
+    editLocalMessage,
+    updateUploadPendingMessageList,
   };
 }

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

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../../context';
 
 export function useMessageReceviedListener(
@@ -9,7 +9,7 @@ export function useMessageReceviedListener(
     event: any,
   ) => void,
 ) {
-  const { tim } = useTUIKitContext('useMessageReceviedListener');
+  const { chat } = useTUIKitContext('useMessageReceviedListener');
   useEffect(() => {
     const handleMessageRecevied = (event: any) => {
       if (customHandler && typeof customHandler === 'function') {
@@ -18,9 +18,9 @@ export function useMessageReceviedListener(
         setMessageList(event.data);
       }
     };
-    tim.on(TIM.EVENT.MESSAGE_RECEIVED, handleMessageRecevied, this);
+    chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, handleMessageRecevied, this);
     return () => {
-      tim.off(TIM.EVENT.MESSAGE_RECEIVED, handleMessageRecevied, this);
+      chat.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, handleMessageRecevied, this);
     };
-  }, [tim]);
+  }, [chat]);
 }

package/src/components/TUIChat/unitls.ts

@@ -1,4 +1,4 @@
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import constant from '../../constants';
 import type { TUIChatStateContextValue } from '../../context';
 import { JSONStringToParse } from '../untils';
@@ -6,7 +6,7 @@ import { JSONStringToParse } from '../untils';
 export const handleMessage = (messageList:Array<Message>):Array<Message> => {
   let customPayloadData = null;
   return messageList.filter((item) => {
-    if (item.type === TIM.TYPES.MSG_CUSTOM) {
+    if (item.type === TencentCloudChat.TYPES.MSG_CUSTOM) {
       customPayloadData = JSONStringToParse(item?.payload?.data);
     }
     if (customPayloadData && customPayloadData?.businessID === constant.TYPE_TYPING) {
@@ -54,7 +54,7 @@ export const handleRemoveMessage = (
   return list;
 };
 
-export const handleUploadPenddingMessage = (
+export const handleUploadPendingMessage = (
   messageList: Array<Message>,
   message: Message,
 ) => {

package/src/components/TUIChatHeader/TUIChatHeader.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { useTUIChatStateContext } from '../../context/TUIChatStateContext';
 import type { TUIChatHeaderDefaultProps } from './TUIChatHeaderDefault';
 import { TUIChatHeaderDefault } from './TUIChatHeaderDefault';

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
-import TIM, { Conversation, Group, Profile } from 'tim-js-sdk';
+import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { Avatar } from '../Avatar';
 import { handleDisplayAvatar } from '../untils';
 
@@ -41,13 +41,13 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
       setAvatar(propAvatar);
     }
     switch (conversation?.type) {
-      case TIM.TYPES.CONV_C2C:
+      case TencentCloudChat.TYPES.CONV_C2C:
         handleC2C(conversation.userProfile);
         break;
-      case TIM.TYPES.CONV_GROUP:
+      case TencentCloudChat.TYPES.CONV_GROUP:
         handleGroup(conversation.groupProfile);
         break;
-      case TIM.TYPES.CONV_SYSTEM:
+      case TencentCloudChat.TYPES.CONV_SYSTEM:
         setTitle('System Notice');
         break;
       default:
@@ -72,7 +72,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     if (!propAvatar) {
       setAvatar(<Avatar
         size={32}
-        image={handleDisplayAvatar(groupProfile.avatar, TIM.TYPES.CONV_GROUP)}
+        image={handleDisplayAvatar(groupProfile.avatar, TencentCloudChat.TYPES.CONV_GROUP)}
       />);
     }
   };
@@ -87,9 +87,9 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
       key={conversation?.conversationID}
     >
       <div
-        className={`tui-chat-header-left ${conversation?.type === TIM.TYPES.CONV_SYSTEM ? 'system' : ''}`}
+        className={`tui-chat-header-left ${conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM ? 'system' : ''}`}
       >
-        {conversation?.type !== TIM.TYPES.CONV_SYSTEM && avatar}
+        {conversation?.type !== TencentCloudChat.TYPES.CONV_SYSTEM && avatar}
       </div>
       <div className="header-content">
         <h3 className="title">{title}</h3>

package/src/components/TUIConversation/TUIConversation.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useMemo } from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { TUIConversationProvider, TUIConversationContextValue } from '../../context/TUIConversationContext';
 import { TUIConversationList } from '../TUIConversationList';
 import { TUIProfile } from '../TUIProfile';

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../context';
 import useConversationList from './hooks/useConversationList';
 import './index.scss';
@@ -36,7 +36,7 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     filterConversation: propsFilterConversation,
   } = props;
   const {
-    tim, customClasses, conversation, setActiveConversation, setTUIProfileShow,
+    chat, customClasses, conversation, setActiveConversation, setTUIProfileShow,
   } = useTUIKitContext('TUIConversationList');
   const {
     filterConversation: contextFilterConversation,
@@ -57,7 +57,7 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
   const {
     conversationList,
     setConversationList,
-  } = useConversationList(tim, activeConversationHandler, filterConversation);
+  } = useConversationList(chat, activeConversationHandler, filterConversation);
   useConversationUpdate(
     setConversationList,
     onConversationListUpdated,

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import TIM, { ChatSDK, Conversation } from 'tim-js-sdk';
+import TencentCloudChat, { ChatSDK, Conversation } from '@tencentcloud/chat';
 
 function useConversationList(
-  tim: ChatSDK,
+  chat: ChatSDK,
   activeConversationHandler?:(
     conversationList: Array<Conversation>,
     setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
@@ -16,14 +16,14 @@ function useConversationList(
     }
     const offset = queryType === 'reload' ? 0 : conversationList.length;
 
-    const res = await tim?.getConversationList();
+    const res = await chat?.getConversationList();
     if (res?.code === 0) {
       let resConversationList = [];
       if (filterConversation) {
         resConversationList = filterConversation(res.data.conversationList);
       } else {
         resConversationList = res.data.conversationList.filter(
-          (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+          (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
         );
       }
       const newConversationList = queryType === 'reload'
@@ -37,7 +37,7 @@ function useConversationList(
   };
   useEffect(() => {
     queryConversation('reload');
-  }, [tim]);
+  }, [chat]);
   return {
     conversationList,
     setConversationList,

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import TIM, { Conversation } from 'tim-js-sdk';
+import TencentCloudChat, { Conversation } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../../context';
 
 export const useConversationUpdate = (
@@ -11,7 +11,7 @@ export const useConversationUpdate = (
   forceUpdate?: () => void,
   filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) => {
-  const { tim } = useTUIKitContext('useConversationUpdate');
+  const { chat } = useTUIKitContext('useConversationUpdate');
   useEffect(() => {
     const onConversationListUpdated = (event:any) => {
       if (setConversationList) {
@@ -19,7 +19,7 @@ export const useConversationUpdate = (
           setConversationList(filterConversation(event.data));
         } else {
           setConversationList(event.data.filter(
-            (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+            (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
           ));
         }
       }
@@ -30,9 +30,9 @@ export const useConversationUpdate = (
         customHandler(setConversationList, event);
       }
     };
-    tim?.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
+    chat?.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
     return () => {
-      tim?.off(TIM.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
+      chat?.off(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
     };
-  }, [tim, customHandler]);
+  }, [chat, customHandler]);
 };

package/src/components/TUIKit/TUIKit.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { ChatSDK, Conversation } from 'tim-js-sdk';
+import { ChatSDK, Conversation } from '@tencentcloud/chat';
 import { useTUIKit } from './hooks/useTUIKit';
 import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
 import { TUIKitProvider } from '../../context/TUIKitContext';
@@ -9,7 +9,7 @@ import { TUIChat } from '../TUIChat';
 import { TUIManage } from '../TUIManage';
 
 export interface ChatProps {
-  tim?: ChatSDK | null,
+  chat?: ChatSDK | null,
   customClasses?: unknown,
   activeConversation?: Conversation,
 }
@@ -19,7 +19,7 @@ export function TUIKit<
   props:PropsWithChildren<T>,
 ):React.ReactElement {
   const {
-    children, tim, customClasses, activeConversation,
+    children, chat, customClasses, activeConversation,
   } = props;
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
   const {
@@ -30,9 +30,9 @@ export function TUIKit<
     setTUIManageShow,
     TUIProfileShow,
     setTUIProfileShow,
-  } = useTUIKit({ tim, activeConversation });
+  } = useTUIKit({ chat, activeConversation });
   const chatContextValue = useCreateTUIKitContext({
-    tim,
+    chat,
     conversation,
     setActiveConversation,
     customClasses,

package/src/components/TUIKit/hooks/useCreateTUIKitContext.tsx

@@ -3,7 +3,7 @@ import { TUIKitContextValue } from '../../../context/TUIKitContext';
 
 export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
   const {
-    tim,
+    chat,
     conversation,
     customClasses,
     setActiveConversation,
@@ -16,7 +16,7 @@ export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
 
   const TUIKitContext = useMemo(
     () => ({
-      tim,
+      chat,
       conversation,
       customClasses,
       setActiveConversation,
@@ -29,7 +29,7 @@ export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
     [
       conversation,
       customClasses,
-      tim,
+      chat,
       TUIManageShow,
       TUIProfileShow,
       setTUIProfileShow,

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -1,38 +1,38 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import TIM, {
+import TencentCloudChat, {
   ChatSDK,
   Conversation,
   Group,
   Profile,
-} from 'tim-js-sdk';
+} from '@tencentcloud/chat';
 
 export interface UseChatParams{
-  tim: ChatSDK,
+  chat: ChatSDK,
   activeConversation?: Conversation,
 }
-export const useTUIKit = ({ tim, activeConversation: paramsActiveConversation }:UseChatParams) => {
+export const useTUIKit = ({ chat, activeConversation: paramsActiveConversation }:UseChatParams) => {
   const [conversation, setConversation] = useState<Conversation>(paramsActiveConversation);
   const [myProfile, setMyProfile] = useState<Profile>();
   const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
   const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
   useEffect(() => {
     const getMyProfile = async () => {
-      const res = await tim?.getMyProfile();
+      const res = await chat?.getMyProfile();
       setMyProfile(res?.data);
     };
     getMyProfile();
-  }, [tim]);
+  }, [chat]);
   const setActiveConversation = useCallback(
     (activeConversation?: Conversation) => {
       if (activeConversation) {
-        tim?.setMessageRead({ conversationID: activeConversation.conversationID });
+        chat?.setMessageRead({ conversationID: activeConversation.conversationID });
       }
       if (conversation && (activeConversation.conversationID !== conversation.conversationID)) {
         setTUIManageShow(false);
       }
       setConversation(activeConversation);
     },
-    [tim],
+    [chat],
   );
 
   useEffect(() => {

package/src/components/TUIManage/TUIManage.tsx

@@ -16,14 +16,14 @@ export function TUIManage() {
   const {
     conversation: activeConversation,
     setActiveConversation,
-    tim,
+    chat,
     TUIManageShow,
     setTUIManageShow,
   } = useTUIKitContext('TUIManage');
   useConversationUpdate(null, () => {
     setForceUpdateCount((count) => count + 1);
   });
-  const { pinConversation, deleteConversation } = useConversation(tim);
+  const { pinConversation, deleteConversation } = useConversation(chat);
   const pinChatChange = (e) => {
     setIsPinned(e.target.checked);
     pinConversation({

package/src/components/TUIMessage/MessageAvatar.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren,
 } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_FLOW } from '../../constants';
 import { messageShowType } from '../../context';
 import { Avatar } from '../Avatar';

package/src/components/TUIMessage/MessageBubble.tsx

@@ -3,7 +3,7 @@ import React, {
   ReactNode,
   useState,
 } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_STATUS } from '../../constants';
 import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
@@ -39,9 +39,9 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
   const { setHighlightedMessageId } = useTUIChatActionContext('MessageBubbleWithContext');
 
   const handleLoading = () => !!((
-    message?.type === TIM.TYPES.MSG_IMAGE
-    || message?.type === TIM.TYPES.MSG_VIDEO
-    || message?.type === TIM.TYPES.MSG_FILE
+    message?.type === TencentCloudChat.TYPES.MSG_IMAGE
+    || message?.type === TencentCloudChat.TYPES.MSG_VIDEO
+    || message?.type === TencentCloudChat.TYPES.MSG_FILE
   ) && message?.status === MESSAGE_STATUS.UNSEND);
 
   const handleMouseEnter = () => {