@tencentcloud/chat-uikit-react 1.0.3 → 1.1.0

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

package/src/components/TUIMessage/MessageProgress.tsx

@@ -3,7 +3,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_STATUS } from '../../constants';
 import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
 
@@ -31,21 +31,21 @@ function MessageProgressWithContext <T extends MessageProgressProps>(
   const [progressMessage, setProgressMessage] = useState<Message>();
   const [progress, setProgress] = useState<number>(0);
 
-  const { uploadPenddingMessageList } = useTUIChatStateContext('MessageProgressWithContext');
+  const { uploadPendingMessageList } = useTUIChatStateContext('MessageProgressWithContext');
   const { isShowProgress: contextIsShow = false, Progress: contextProgress } = useTUIMessageContext('MessageProgressWithContext');
 
   const Progress = propsProgress || contextProgress;
   const isShow = propsIsShow || contextIsShow;
 
   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);
 
   useEffect(() => {
-    if (uploadPenddingMessageList && uploadPenddingMessageList.length > 0) {
-      uploadPenddingMessageList.map((item:MessageProgressItem) => {
+    if (uploadPendingMessageList && uploadPendingMessageList.length > 0) {
+      uploadPendingMessageList.map((item:MessageProgressItem) => {
         if (item?.ID === message?.ID) {
           setProgressMessage(item);
           setProgress(item?.progress);
@@ -53,7 +53,7 @@ function MessageProgressWithContext <T extends MessageProgressProps>(
         return item;
       });
     }
-  }, [uploadPenddingMessageList]);
+  }, [uploadPendingMessageList]);
 
   if (!isShow) {
     return null;

package/src/components/TUIMessage/MessageRevoke.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatActionContext } from '../../context';
 import type { MessageContextProps } from './MessageText';
@@ -30,7 +30,7 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
       <span> recalled a message</span>
       {
         message?.flow === MESSAGE_FLOW.OUT
-        && message?.type === TIM.TYPES.MSG_TEXT
+        && message?.type === TencentCloudChat.TYPES.MSG_TEXT
         && <span className="edit" role="button" tabIndex={0} onClick={handleRevoke}> Re-edit</span>
       }
     </div>

package/src/components/TUIMessage/MessageStatus.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import { useTUIMessageContext } from '../../context';
 import { getTimeStamp } from '../untils';
 

package/src/components/TUIMessage/MessageText.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { UnknowPorps } from '../../context';
 
 export interface MessageContextProps {
@@ -18,7 +18,7 @@ function MessageTextWithContext <T extends MessageContextProps>(
   } = props;
 
   return (
-    <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`}>
+    <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <div className="message-text-content">
         {context.text.map((item, index) => {
           const key = message.ID + index;

package/src/components/TUIMessage/TUIMessage.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactEventHandler } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 
 import { UnknowPorps, useComponentContext, useTUIChatStateContext } from '../../context';
 

package/src/components/TUIMessage/TUIMessageDefault.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import type { TUIMessageProps } from './TUIMessage';
 
 import { MessageBubble } from './MessageBubble';
@@ -43,35 +43,34 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
     <div
       className={
       `message-default
-      ${(message?.type === TIM.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}
+      ${(message?.type === TencentCloudChat.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}
       ${className}
       `
       }
     >
       {
-        message?.type === TIM.TYPES.MSG_GRP_TIP
+        message?.type === TencentCloudChat.TYPES.MSG_GRP_TIP
         && (<MessageTip message={message} />)
       }
       {
-        message?.type === TIM.TYPES.MSG_GRP_SYS_NOTICE
+        message?.type === TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE
         && (<MessageSystem message={message} />)
       }
       {
         message?.isRevoked
         && (<MessageRevoke message={message} />)
       }
-      {message?.type !== TIM.TYPES.MSG_GRP_TIP
-      && message?.type !== TIM.TYPES.MSG_GRP_SYS_NOTICE
+      {message?.type !== TencentCloudChat.TYPES.MSG_GRP_TIP
+      && message?.type !== TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE
       && !message?.isRevoked
       && (
       <div
         className={`${message?.flow}`}
         key={message?.ID}
-        data-message-id={message?.ID}
       >
         {prefix}
         <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />
-        <main className="content">
+        <main data-message-id={message?.ID} className="content">
           <MessageName message={message} CustomName={customName} showType={showName} />
           <MessageBubble
             message={message}

package/src/components/TUIMessage/hooks/useMessageContextHandler.ts

@@ -1,4 +1,4 @@
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import {
   handleAudioMessageShowContext,
   handleCustomMessageShowContext,
@@ -24,37 +24,37 @@ export const useMessageContextHandler = <T extends messageContextParams>(params:
   let context;
   if (message) {
     switch (message?.type) {
-      case TIM.TYPES.MSG_TEXT:
+      case TencentCloudChat.TYPES.MSG_TEXT:
         context = handleTextMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_FACE:
+      case TencentCloudChat.TYPES.MSG_FACE:
         context = handleFaceMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_IMAGE:
+      case TencentCloudChat.TYPES.MSG_IMAGE:
         context = handleImageMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_AUDIO:
+      case TencentCloudChat.TYPES.MSG_AUDIO:
         context = handleAudioMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_VIDEO:
+      case TencentCloudChat.TYPES.MSG_VIDEO:
         context = handleVideoMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_FILE:
+      case TencentCloudChat.TYPES.MSG_FILE:
         context = handleFileMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_CUSTOM:
+      case TencentCloudChat.TYPES.MSG_CUSTOM:
         context = handleCustomMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_MERGER:
+      case TencentCloudChat.TYPES.MSG_MERGER:
         context = handleMergerMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_LOCATION:
+      case TencentCloudChat.TYPES.MSG_LOCATION:
         context = handleLocationMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_GRP_TIP:
+      case TencentCloudChat.TYPES.MSG_GRP_TIP:
         context = handleTipMessageShowContext(message);
         break;
-      case TIM.TYPES.MSG_GRP_SYS_NOTICE:
+      case TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE:
         context = translateGroupSystemNotice(message);
         break;
 

package/src/components/TUIMessage/hooks/useMessageHandler.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
 import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
 import { Toast } from '../../Toast';
@@ -17,20 +17,20 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const {
     removeMessage,
-    editLocalmessage,
+    editLocalMessage,
     operateMessage,
     revokeMessage,
   } = useTUIChatActionContext('useDeleteHandler');
-  const { tim } = useTUIKitContext('useDeleteHandler');
+  const { chat } = useTUIKitContext('useDeleteHandler');
 
   const handleDelMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !tim || !removeMessage) {
+    if (!message?.ID || !chat || !removeMessage) {
       return;
     }
 
     try {
-      await tim.deleteMessage([message]);
+      await chat.deleteMessage([message]);
       removeMessage(message);
     } catch (error) {
       if (handleError) {
@@ -47,7 +47,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const handleRevokeMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !tim || !editLocalmessage) {
+    if (!message?.ID || !chat || !editLocalMessage) {
       return;
     }
 
@@ -55,9 +55,9 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
       if (revokeMessage) {
         await revokeMessage(message);
       } else {
-        await tim.revokeMessage(message);
+        await chat.revokeMessage(message);
       }
-      editLocalmessage(message);
+      editLocalMessage(message);
     } catch (error) {
       if (handleError) {
         handleError({
@@ -74,7 +74,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const handleReplyMessage = useCallback((event?) => {
     event.preventDefault();
-    if (!message?.ID || !tim || !operateMessage) {
+    if (!message?.ID || !chat || !operateMessage) {
       return;
     }
     operateMessage({
@@ -106,8 +106,8 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const handleResendMessage = useCallback(async (event?) => {
     try {
-      const res = await tim.resendMessage(message);
-      editLocalmessage(res?.data?.message);
+      const res = await chat.resendMessage(message);
+      editLocalMessage(res?.data?.message);
     } catch (error) {
       if (handleError) {
         handleError({
@@ -123,7 +123,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
 
   const handleForWardMessage = useCallback(async (event?) => {
     event.preventDefault();
-    if (!message?.ID || !tim || !operateMessage) {
+    if (!message?.ID || !chat || !operateMessage) {
       return;
     }
     operateMessage({

package/src/components/TUIMessage/hooks/useMessagePluginElement.tsx

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 
 interface MessagePluginElementProps {
   handle?: (event?:React.SyntheticEvent<Element, Event>) => void,
   children: React.ReactNode,
   isShow?: boolean,
-  relateMessageType?: TIM.TYPES[],
+  relateMessageType?: TencentCloudChat.TYPES[],
   message?: Message
 }
 export const useMessagePluginElement = <

package/src/components/TUIMessage/hooks/useMessageReply.ts

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { useTUIChatStateContext, useTUIKitContext } from '../../../context';
 import { JSONStringToParse } from '../../untils';
 
@@ -8,13 +8,13 @@ interface messageContextParams {
 }
 
 const replyType = {
-  [TIM.TYPES.MSG_TEXT]: 1,
-  [TIM.TYPES.MSG_FACE]: 8,
-  [TIM.TYPES.MSG_IMAGE]: 3,
-  [TIM.TYPES.MSG_AUDIO]: 4,
-  [TIM.TYPES.MSG_VIDEO]: 5,
-  [TIM.TYPES.MSG_FILE]: 6,
-  [TIM.TYPES.MSG_CUSTOM]: 2,
+  [TencentCloudChat.TYPES.MSG_TEXT]: 1,
+  [TencentCloudChat.TYPES.MSG_FACE]: 8,
+  [TencentCloudChat.TYPES.MSG_IMAGE]: 3,
+  [TencentCloudChat.TYPES.MSG_AUDIO]: 4,
+  [TencentCloudChat.TYPES.MSG_VIDEO]: 5,
+  [TencentCloudChat.TYPES.MSG_FILE]: 6,
+  [TencentCloudChat.TYPES.MSG_CUSTOM]: 2,
 };
 
 export const useMessageReply = <T extends messageContextParams>(params:T) => {
@@ -26,7 +26,7 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
   const [replyMessage, setReplyMessage] = useState(null);
   const [messageID, setMessageID] = useState('');
 
-  const { tim } = useTUIKitContext('TUIChat');
+  const { chat } = useTUIKitContext('TUIChat');
   const { messageList } = useTUIChatStateContext('useMessageReply');
 
   useLayoutEffect(() => {
@@ -48,11 +48,11 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
     const replyData = messageList.filter((item) => {
       const isSomeID = item.ID === reply?.messageID;
       const isSomeType = isSomeID && replyType[item.type] === reply.messageType;
-      const isSomeContent = item.type === TIM.TYPES.MSG_TEXT
+      const isSomeContent = item.type === TencentCloudChat.TYPES.MSG_TEXT
         ? item.payload.text === reply.messageAbstract : true;
       return isSomeID && isSomeType && isSomeContent;
     });
-    setReplyMessage(replyData[0] || tim.findMessage(reply?.messageID));
+    setReplyMessage(replyData[0] || chat.findMessage(reply?.messageID));
   };
 
   return {

package/src/components/TUIMessage/utils/index.ts

@@ -1,4 +1,4 @@
-import TIM, { Conversation, Group, Message } from 'tim-js-sdk';
+import TencentCloudChat, { Conversation, Group, Message } from '@tencentcloud/chat';
 import { decodeText } from './decodeText';
 import constant, { MESSAGE_STATUS } from '../../../constants';
 import { JSONStringToParse } from '../../untils';
@@ -12,12 +12,12 @@ function t(params:string) {
 export function handleAvatar(item: any) {
   let avatar = '';
   switch (item.type) {
-    case TIM.TYPES.CONV_C2C:
+    case TencentCloudChat.TYPES.CONV_C2C:
       avatar = isUrl(item?.userProfile?.avatar)
         ? item?.userProfile?.avatar
         : 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
       break;
-    case TIM.TYPES.CONV_GROUP:
+    case TencentCloudChat.TYPES.CONV_GROUP:
       avatar = isUrl(item?.groupProfile?.avatar)
         ? item?.groupProfile?.avatar
         : 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/im/demo/TUIkit/web/img/constomer.svg';
@@ -35,10 +35,10 @@ export function handleAvatar(item: any) {
 export function handleName(item: Conversation) {
   let name = '';
   switch (item.type) {
-    case TIM.TYPES.CONV_C2C:
+    case TencentCloudChat.TYPES.CONV_C2C:
       name = item?.userProfile.nick || item?.userProfile?.userID || '';
       break;
-    case TIM.TYPES.CONV_GROUP:
+    case TencentCloudChat.TYPES.CONV_GROUP:
       name = item.groupProfile.name || item?.groupProfile?.groupID || '';
       break;
     default:
@@ -71,7 +71,7 @@ export function handleShowLastMessage(item: Conversation) {
   // Judge the number of unread messages and display them only
   // when the message is enabled without interruption.
   const showUnreadCount = conversation.unreadCount > 0
-    && conversation.messageRemindType === TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
+    && conversation.messageRemindType === TencentCloudChat.TYPES.MSG_REMIND_ACPT_NOT_NOTE
     ? t(`[${conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}条]`)
     : '';
   if (!lastMessage.lastTime) {
@@ -79,7 +79,7 @@ export function handleShowLastMessage(item: Conversation) {
   }
   // Determine the lastmessage sender of the group.
   // Namecard / Nick / userid is displayed by priority
-  if (conversation.type === TIM.TYPES.CONV_GROUP) {
+  if (conversation.type === TencentCloudChat.TYPES.CONV_GROUP) {
     if (lastMessage.fromAccount === conversation.groupProfile.selfInfo.userID) {
       showNick = t('TUIConversation.我');
     } else {
@@ -87,7 +87,7 @@ export function handleShowLastMessage(item: Conversation) {
     }
   }
   // Display content of lastmessage message body
-  if (lastMessage.type === TIM.TYPES.MSG_TEXT) {
+  if (lastMessage.type === TencentCloudChat.TYPES.MSG_TEXT) {
     lastMessagePayload = lastMessage.payload.text;
   } else {
     lastMessagePayload = lastMessage.messageForShow;
@@ -97,7 +97,7 @@ export function handleShowLastMessage(item: Conversation) {
     lastMessagePayload = t('TUIChat.撤回了一条消息');
   }
 
-  if (conversation.type === TIM.TYPES.CONV_GROUP && lastMessage.type === TIM.TYPES.MSG_GRP_TIP) {
+  if (conversation.type === TencentCloudChat.TYPES.CONV_GROUP && lastMessage.type === TencentCloudChat.TYPES.MSG_GRP_TIP) {
     return lastMessagePayload;
   }
   // Specific display content of message box
@@ -120,28 +120,28 @@ export function handleTipMessageShowContext(message: Message) {
     userName = userName.slice(0, -1);
   }
   switch (message.payload.operationType) {
-    case TIM.TYPES.GRP_TIP_MBR_JOIN:
+    case TencentCloudChat.TYPES.GRP_TIP_MBR_JOIN:
       options.text = `${userName} ${t('message.tip.Join in group')}`;
       break;
-    case TIM.TYPES.GRP_TIP_MBR_QUIT:
+    case TencentCloudChat.TYPES.GRP_TIP_MBR_QUIT:
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.quit group')}`;
       break;
-    case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
+    case TencentCloudChat.TYPES.GRP_TIP_MBR_KICKED_OUT:
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')}${message.payload.operatorID}${t(
         'message.tip.kicked out of group',
       )}`;
       break;
-    case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
+    case TencentCloudChat.TYPES.GRP_TIP_MBR_SET_ADMIN:
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.become admin')}`;
       break;
-    case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
+    case TencentCloudChat.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by revoked administrator')}`;
       break;
-    case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
+    case TencentCloudChat.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
       // options.text =  `${userName} 修改群组资料`;
       options.text = handleTipGrpUpdated(message);
       break;
-    case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
+    case TencentCloudChat.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
       message.payload.memberList.map((member:any) => {
         if (member.muteTime > 0) {
           options.text = `${t('message.tip.member')}：${member.userID}${t('message.tip.muted')}`;

package/src/components/TUIMessageInput/InputQuoteDefalut.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useCallback, useEffect } from 'react';
 import './styles/index.scss';
 
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { MESSAGE_OPERATE } from '../../constants';

package/src/components/TUIMessageInput/TUIForward.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren, useCallback, useEffect, useState,
 } from 'react';
-import { Conversation, Message } from 'tim-js-sdk';
+import { Conversation, Message } from '@tencentcloud/chat';
 import { useTUIChatActionContext } from '../../context';
 import './styles/index.scss';
 import { Model } from '../Model';