@tencentcloud/chat-uikit-react 1.0.4 → 1.1.0

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 = () => {

package/src/components/TUIMessage/MessageContext.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 
 import { MessageAudio } from './MessageAudio';
 import { MessageCustom } from './MessageCustom';
@@ -16,15 +16,15 @@ import { MessageStatus } from './MessageStatus';
 import { useTUIMessageContext } from '../../context';
 
 const components = {
-  [TIM.TYPES.MSG_TEXT]: MessageText,
-  [TIM.TYPES.MSG_FACE]: MessageFace,
-  [TIM.TYPES.MSG_IMAGE]: MessageImage,
-  [TIM.TYPES.MSG_AUDIO]: MessageAudio,
-  [TIM.TYPES.MSG_VIDEO]: MessageVideo,
-  [TIM.TYPES.MSG_FILE]: MessageFile,
-  [TIM.TYPES.MSG_CUSTOM]: MessageCustom,
-  [TIM.TYPES.MSG_MERGER]: MessageMerger,
-  [TIM.TYPES.MSG_LOCATION]: MessageLocation,
+  [TencentCloudChat.TYPES.MSG_TEXT]: MessageText,
+  [TencentCloudChat.TYPES.MSG_FACE]: MessageFace,
+  [TencentCloudChat.TYPES.MSG_IMAGE]: MessageImage,
+  [TencentCloudChat.TYPES.MSG_AUDIO]: MessageAudio,
+  [TencentCloudChat.TYPES.MSG_VIDEO]: MessageVideo,
+  [TencentCloudChat.TYPES.MSG_FILE]: MessageFile,
+  [TencentCloudChat.TYPES.MSG_CUSTOM]: MessageCustom,
+  [TencentCloudChat.TYPES.MSG_MERGER]: MessageMerger,
+  [TencentCloudChat.TYPES.MSG_LOCATION]: MessageLocation,
 };
 
 export interface MessageContextProps {
@@ -52,15 +52,15 @@ function MessageContextWithContext <T extends MessageContextProps>(
   } = useTUIMessageContext('MessageCustom');
 
   const CustemComponents = {
-    [TIM.TYPES.MSG_TEXT]: TextElement,
-    [TIM.TYPES.MSG_FACE]: FaceElement,
-    [TIM.TYPES.MSG_IMAGE]: ImageElement,
-    [TIM.TYPES.MSG_AUDIO]: AudioElement,
-    [TIM.TYPES.MSG_VIDEO]: VideoElement,
-    [TIM.TYPES.MSG_FILE]: FileElement,
-    [TIM.TYPES.MSG_CUSTOM]: CustemElement,
-    [TIM.TYPES.MSG_MERGER]: MergerElement,
-    [TIM.TYPES.MSG_LOCATION]: LocationElement,
+    [TencentCloudChat.TYPES.MSG_TEXT]: TextElement,
+    [TencentCloudChat.TYPES.MSG_FACE]: FaceElement,
+    [TencentCloudChat.TYPES.MSG_IMAGE]: ImageElement,
+    [TencentCloudChat.TYPES.MSG_AUDIO]: AudioElement,
+    [TencentCloudChat.TYPES.MSG_VIDEO]: VideoElement,
+    [TencentCloudChat.TYPES.MSG_FILE]: FileElement,
+    [TencentCloudChat.TYPES.MSG_CUSTOM]: CustemElement,
+    [TencentCloudChat.TYPES.MSG_MERGER]: MergerElement,
+    [TencentCloudChat.TYPES.MSG_LOCATION]: LocationElement,
   };
 
   const Elements = CustemComponents[message?.type] || components[message?.type];

package/src/components/TUIMessage/MessageCustom.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { JSONStringToParse } from '../untils';
 import type { MessageContextProps } from './MessageText';
 
@@ -36,7 +36,7 @@ function MessageCustomWithContext <T extends MessageContextProps>(
   };
 
   return (
-    <div className={`bubble message-custom bubble-${message.flow}  ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`}>
+    <div className={`bubble message-custom bubble-${message.flow}  ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       {handleContext(context?.custom)}
       {children}
     </div>

package/src/components/TUIMessage/MessageFile.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { Icon, IconTypes } from '../Icon';
 import type { MessageContextProps } from './MessageText';
 
@@ -16,7 +16,7 @@ function MessageFileWithContext <T extends MessageContextProps>(
       href={context.url}
       download={context.name}
       target="_parent"
-      className={`bubble message-file bubble-${message.flow} ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`}
+      className={`bubble message-file bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}
       rel="noreferrer"
     >
       <main className="message-file-main">

package/src/components/TUIMessage/MessageImage.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useState } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { Model } from '../Model';
 import type { MessageContextProps } from './MessageText';
 
@@ -19,7 +19,7 @@ function MessageImageWithContext <T extends MessageContextProps>(
   return (
     <div className="message-image">
       <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <img className={`img bubble-${message.flow} ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
+        <img className={`img bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
       </div>
       {children}
       {

package/src/components/TUIMessage/MessageMerger.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import type { MessageContextProps } from './MessageText';
 
 function MessageMergerWithContext <T extends MessageContextProps>(
@@ -12,7 +12,7 @@ function MessageMergerWithContext <T extends MessageContextProps>(
   } = props;
 
   return (
-    <div className={`bubble message-merger bubble-${message.flow} ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`}>
+    <div className={`bubble message-merger bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <h3>{context.title}</h3>
       <ul className="message-merger-list">
         {

package/src/components/TUIMessage/MessageName.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';
 
@@ -23,7 +23,7 @@ export function MessageName <T extends MessageNameProps>(
   } = props;
 
   const show = (showType === messageShowType.ALL || message?.flow === showType)
-  && message?.conversationType === TIM.TYPES.CONV_GROUP;
+  && message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP;
 
   if (!show || showType === messageShowType.NONE) {
     return null;

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useRef, useState } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import './styles/index.scss';
 
 import { Plugins, PluginsProps } from '../Plugins';
@@ -19,7 +19,7 @@ enum PluginsNameEnum {
 export type MessagePluginConfigProps = {
   [propsName in PluginsNameEnum]?: {
     isShow?: boolean;
-    relateMessageType?: TIM.TYPES[],
+    relateMessageType?: TencentCloudChat.TYPES[],
   };
 };
 
@@ -64,7 +64,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
     },
     copy: {
       isShow: true,
-      relateMessageType: [TIM.TYPES.MSG_TEXT],
+      relateMessageType: [TencentCloudChat.TYPES.MSG_TEXT],
       ...propsPluginConfig?.copy,
       ...contextPlugin?.config?.copy,
     },