@tencentcloud/chat-uikit-react 1.0.4 → 1.1.0

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';

package/src/components/TUIMessageInput/TUIMessageInput.tsx

@@ -1,5 +1,5 @@
 import React, { MutableRefObject, PropsWithChildren } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { TUIMessageInputContextProvider } from '../../context/TUIMessageInputContext';
 import { useMessageInputState, useCreateMessageInputContext } from './hooks';
 import './styles/index.scss';
@@ -53,7 +53,7 @@ function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWit
   const messageInputState = useMessageInputState(props);
   const { textareaRef, conversation } = useTUIChatStateContext('TUIMessageInput');
 
-  const contextDisabled = conversation?.type === TIM.TYPES.CONV_SYSTEM;
+  const contextDisabled = conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM;
 
   const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
 

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import TIM, { Conversation, Message } from 'tim-js-sdk';
+import TencentCloudChat, { Conversation, Message } from '@tencentcloud/chat';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
   useTUIChatActionContext, useTUIChatStateContext, useTUIKitContext,
@@ -12,7 +12,7 @@ export function useHandleForwardMessage(msg?:Message) {
 
   const [conversationList, setConversationList] = useState([]);
   const { sendMessage, createForwardMessage } = useTUIChatActionContext('useHandleForwardMessage');
-  const { tim } = useTUIKitContext('TUIChat');
+  const { chat } = useTUIKitContext('TUIChat');
 
   const message = msg || operateData[MESSAGE_OPERATE.FORWARD];
 
@@ -26,12 +26,12 @@ export function useHandleForwardMessage(msg?:Message) {
 
   useEffect(() => {
     (async () => {
-      const res = await tim.getConversationList();
+      const res = await chat.getConversationList();
       setConversationList(res?.data?.conversationList.filter(
-        (item) => item.type !== TIM.TYPES.CONV_SYSTEM,
+        (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
       ));
     })();
-  }, [tim]);
+  }, [chat]);
 
   return {
     message,

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

@@ -1,25 +1,25 @@
 import { useEffect, useState } from 'react';
-import TIM, { Message } from 'tim-js-sdk';
+import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_OPERATE } from '../../../constants';
 import { useTUIChatStateContext } from '../../../context';
 
 const quoteConfigType = {
-  [TIM.TYPES.MSG_TEXT]: 1,
-  [TIM.TYPES.MSG_CUSTOM]: 2,
-  [TIM.TYPES.MSG_IMAGE]: 3,
-  [TIM.TYPES.MSG_AUDIO]: 4,
-  [TIM.TYPES.MSG_VIDEO]: 5,
-  [TIM.TYPES.MSG_FILE]: 6,
-  [TIM.TYPES.MSG_FACE]: 8,
+  [TencentCloudChat.TYPES.MSG_TEXT]: 1,
+  [TencentCloudChat.TYPES.MSG_CUSTOM]: 2,
+  [TencentCloudChat.TYPES.MSG_IMAGE]: 3,
+  [TencentCloudChat.TYPES.MSG_AUDIO]: 4,
+  [TencentCloudChat.TYPES.MSG_VIDEO]: 5,
+  [TencentCloudChat.TYPES.MSG_FILE]: 6,
+  [TencentCloudChat.TYPES.MSG_FACE]: 8,
 };
 
 const quoteConfigForShow = {
-  [TIM.TYPES.MSG_CUSTOM]: '[custom]',
-  [TIM.TYPES.MSG_IMAGE]: '[image]',
-  [TIM.TYPES.MSG_AUDIO]: '[audio]',
-  [TIM.TYPES.MSG_VIDEO]: '[video]',
-  [TIM.TYPES.MSG_FILE]: '[file]',
-  [TIM.TYPES.MSG_FACE]: '[face]',
+  [TencentCloudChat.TYPES.MSG_CUSTOM]: '[custom]',
+  [TencentCloudChat.TYPES.MSG_IMAGE]: '[image]',
+  [TencentCloudChat.TYPES.MSG_AUDIO]: '[audio]',
+  [TencentCloudChat.TYPES.MSG_VIDEO]: '[video]',
+  [TencentCloudChat.TYPES.MSG_FILE]: '[file]',
+  [TencentCloudChat.TYPES.MSG_FACE]: '[face]',
 };
 
 export function useHandleQuoteMessage(msg?:Message) {
@@ -31,7 +31,7 @@ export function useHandleQuoteMessage(msg?:Message) {
 
   const handleQuoteMessage = (message: Message) => {
     const messageType = quoteConfigType[message?.type];
-    const messageAbstract = message?.type === TIM.TYPES.MSG_TEXT
+    const messageAbstract = message?.type === TencentCloudChat.TYPES.MSG_TEXT
       ? message?.payload?.text
       : quoteConfigForShow[message?.type];
 

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

@@ -28,7 +28,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     sendUploadMessage,
   } = props;
 
-  const { tim } = useTUIKitContext('useMessageInputText');
+  const { chat } = useTUIKitContext('useMessageInputText');
   const { sendMessage, createTextMessage, operateMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();
@@ -46,7 +46,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
         getNewText: (text:string) => event.target.value,
       });
     },
-    [tim],
+    [chat],
   );
 
   const handleSubmit = async (

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

@@ -16,7 +16,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     createImageMessage,
     createVideoMessage,
     createFileMessage,
-    updataUploadPenddingMessageList,
+    updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
   const creatUploadMessage = {
@@ -30,7 +30,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
       payload: file,
       onProgress(num:number) {
         message.progress = num;
-        updataUploadPenddingMessageList(message);
+        updateUploadPendingMessageList(message);
       },
     });
     sendMessage(message);

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useState, useEffect } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import {
   useTUIChatStateContext,
   useTUIChatActionContext,
@@ -88,7 +88,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       if (!element) {
         return;
       }
-      const { children } = element.children[1];
+      const { children } = element;
       children[children.length - 1].classList.add('high-lighted');
       element?.scrollIntoView({ block: 'center' });
       const timer = setTimeout(() => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 
 interface EnrichedMessageListProps {
   messageList: Array<Message>;