@tencentcloud/chat-uikit-react 1.0.3 → 1.1.0

package/dist/esm/hooks/useConversation.js

@@ -1 +1 @@
-import{__awaiter as t,__generator as o}from"tslib";import e from"tim-js-sdk";import{useTUIConversationContext as n}from"../context/TUIConversationContext.js";var r=function(r){var i=n("useConversation");return{createConversation:i.createConversation||function(n){return t(void 0,void 0,void 0,(function(){var t,i,a,s,u,c,p,v,m,d,C,f,l,g,b;return o(this,(function(o){switch(o.label){case 0:return"string"!=typeof n?[3,2]:[4,r.getConversationProfile(n)];case 1:return[2,o.sent().data.conversation];case 2:return t=n.name,i=n.type,a=n.groupID,s=n.introduction,u=n.notification,c=n.avatar,p=n.maxMemberNum,v=n.joinOption,m=n.memberList,d=void 0===m?[]:m,C=n.groupCustomField,f=void 0===C?[]:C,l=n.isSupportTopic,[4,r.createGroup({name:t,type:i,groupID:a,introduction:s,notification:u,avatar:c,maxMemberNum:p,joinOption:v,memberList:d,groupCustomField:f,isSupportTopic:l})];case 3:return g=o.sent(),b=g.data.group.groupID,i!==e.TYPES.GRP_AVCHATROOM?[3,5]:[4,r.joinGroup({groupID:b,type:e.TYPES.GRP_AVCHATROOM})];case 4:o.sent(),o.label=5;case 5:return[4,r.getConversationProfile("GROUP".concat(b))];case 6:return[2,o.sent().data.conversation]}}))}))},pinConversation:function(t){return r.pinConversation(t)},deleteConversation:i.deleteConversation||function(t){return r.deleteConversation(t)}}};export{r as useConversation};
+import{__awaiter as t,__generator as o}from"tslib";import e from"@tencentcloud/chat";import{useTUIConversationContext as n}from"../context/TUIConversationContext.js";var r=function(r){var i=n("useConversation");return{createConversation:i.createConversation||function(n){return t(void 0,void 0,void 0,(function(){var t,i,a,s,u,c,p,v,m,d,C,f,l,g,b;return o(this,(function(o){switch(o.label){case 0:return"string"!=typeof n?[3,2]:[4,r.getConversationProfile(n)];case 1:return[2,o.sent().data.conversation];case 2:return t=n.name,i=n.type,a=n.groupID,s=n.introduction,u=n.notification,c=n.avatar,p=n.maxMemberNum,v=n.joinOption,m=n.memberList,d=void 0===m?[]:m,C=n.groupCustomField,f=void 0===C?[]:C,l=n.isSupportTopic,[4,r.createGroup({name:t,type:i,groupID:a,introduction:s,notification:u,avatar:c,maxMemberNum:p,joinOption:v,memberList:d,groupCustomField:f,isSupportTopic:l})];case 3:return g=o.sent(),b=g.data.group.groupID,i!==e.TYPES.GRP_AVCHATROOM?[3,5]:[4,r.joinGroup({groupID:b,type:e.TYPES.GRP_AVCHATROOM})];case 4:o.sent(),o.label=5;case 5:return[4,r.getConversationProfile("GROUP".concat(b))];case 6:return[2,o.sent().data.conversation]}}))}))},pinConversation:function(t){return r.pinConversation(t)},deleteConversation:i.deleteConversation||function(t){return r.deleteConversation(t)}}};export{r as useConversation};

package/dist/esm/hooks/useProfile.d.ts

@@ -1,4 +1,4 @@
-declare const useProfile: (tim: any) => {
+declare const useProfile: (chat: any) => {
     getUserProfile: (userIDList: any) => any;
 };
 

package/dist/esm/index.js

@@ -1 +1 @@
-export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"tim-js-sdk";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";
+export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"@tencentcloud/chat";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -60,14 +60,13 @@
   "dependencies": {
     "date-fns": "^2.29.3",
     "react-date-picker": "^9.0.0",
-    "tim-js-sdk": "^2.26.1",
     "tim-upload-plugin": "^1.0.5"
   },
   "peerDependencies": {
+    "@tencentcloud/chat": "^3.2.0",
     "date-fns": "^2.29.3",
     "react": "^18.2.0",
     "react-date-picker": "^9.0.0",
-    "tim-js-sdk": "^2.24.2",
     "tim-upload-plugin": "^1.0.5",
     "tslib": "^2.4.1"
   }

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Conversation, Profile } from 'tim-js-sdk';
+import { Conversation, Profile } from '@tencentcloud/chat';
 import { Input } from '../Input';
 import './styles/ConversationCreatGroupDetail.scss';
 import { Icon, IconTypes } from '../Icon';
@@ -71,9 +71,12 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
   const getDes = () => typeInfoList.find((item) => item.type === groupType).des;
 
   const next = async () => {
+    const memberList = profileList.map((item) => ({
+      userID: item.userID,
+    }));
     const avatar = getDefaultAvatar(groupType);
     const conversation = await createConversation({
-      name: groupName, type: GroupType[groupType], groupID, avatar,
+      name: groupName, type: GroupType[groupType], groupID, avatar, memberList,
     });
     setActiveConversation(conversation);
     setConversationCreated(false);

package/src/components/ConversationCreate/ConversationCreate.tsx

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

package/src/components/ConversationCreate/ConversationCreateSelectView.tsx

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

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

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

package/src/components/ConversationCreate/ConversationGroupTypeInfo.tsx

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

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

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

package/src/components/ConversationPreview/ConversationListContainer.tsx

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

package/src/components/ConversationPreview/ConversationPreview.tsx

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

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

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

package/src/components/ConversationPreview/utils.tsx

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

package/src/components/ConversationSearch/ConversationSearchResult.tsx

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

package/src/components/Profile/Profile.tsx

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

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

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

package/src/components/TUIChat/TUIChat.tsx

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

package/src/components/TUIChat/TUIChatState.tsx

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