@tencentcloud/chat-uikit-react 1.0.3 → 1.1.0

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

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

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren, useMemo,
 } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import { UnknowPorps } from '../../../context';
 import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
 import { getTimeStamp } from '../../untils';
@@ -22,21 +22,18 @@ function useMessageListElement <T extends MessageListElementProps>(
   } = props;
 
   return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
-    const key = `${JSON.stringify(item)}${index}`;
+    const key = `${item.ID}-${index}`;
     const preMessageTImer = index > 0 ? enrichedMessageList[index - 1]?.time : -1;
     const currrentTimer = item?.time || 0;
-    const isShowIntervalsTImer = preMessageTImer !== -1
+    const isShowIntervalsTimer = preMessageTImer !== -1
       ? (currrentTimer - preMessageTImer) >= intervalsTimer : false;
     return (
-      <>
+      <li className="message-list-item" key={key}>
         {
-         isShowIntervalsTImer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000) : 0}</div>
-       }
-        <li className="message-list-item" key={key}>
-          <TUIMessage message={item} key={key} />
-        </li>
-
-      </>
+         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000) : 0}</div>
+        }
+        <TUIMessage message={item} />
+      </li>
     );
   }), [enrichedMessageList]);
 }

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useState } from 'react';
 import DatePicker from 'react-date-picker';
-import TIM, { Profile } from 'tim-js-sdk';
+import TencentCloudChat, { Profile } from '@tencentcloud/chat';
 
 import { useTUIKitContext } from '../../context';
 
@@ -11,9 +11,9 @@ import { handleDisplayAvatar } from '../untils';
 import { ProfileParams } from './hooks';
 
 const gender = {
-  [TIM.TYPES.GENDER_UNKNOWN]: 'unknow',
-  [TIM.TYPES.GENDER_MALE]: 'male',
-  [TIM.TYPES.GENDER_FEMALE]: 'female',
+  [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
+  [TencentCloudChat.TYPES.GENDER_MALE]: 'male',
+  [TencentCloudChat.TYPES.GENDER_FEMALE]: 'female',
 };
 
 const avatarList = [
@@ -28,11 +28,11 @@ const avatarList = [
 const genderList = [
   {
     label: 'Male',
-    value: TIM.TYPES.GENDER_MALE,
+    value: TencentCloudChat.TYPES.GENDER_MALE,
   },
   {
     label: 'Female',
-    value: TIM.TYPES.GENDER_FEMALE,
+    value: TencentCloudChat.TYPES.GENDER_FEMALE,
   },
 ];
 

package/src/components/TUIProfile/hooks/useMyProfile.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../../context';
 
 export interface ProfileParams {
@@ -20,19 +20,19 @@ export interface ProfileParams {
 
 export function useMyProfile() {
   const [myProfile, setMyPofile] = useState(null);
-  const { tim, myProfile: contextProfile } = useTUIKitContext('useMyProfile');
+  const { chat, myProfile: contextProfile } = useTUIKitContext('useMyProfile');
 
   const getMyProfile = useCallback(async () => {
     if (contextProfile) {
       setMyPofile(contextProfile);
     } else {
-      const res = await tim?.getMyProfile();
+      const res = await chat?.getMyProfile();
       setMyPofile(res?.data);
     }
-  }, [tim]);
+  }, [chat]);
 
   const updateMyProfile = useCallback(async (options) => {
-    const res = await tim?.updateMyProfile(options);
+    const res = await chat?.updateMyProfile(options);
     const userInfo = { ...myProfile };
     const keys = Object.keys(res.data);
     keys.map((name) => {
@@ -41,7 +41,7 @@ export function useMyProfile() {
     });
     setMyPofile(userInfo);
     return res;
-  }, [tim]);
+  }, [chat]);
 
   const onProfileUpdated = (event) => {
     console.log('onProfileUpdated', event.data); // 包含 Profile 对象的数组
@@ -51,11 +51,11 @@ export function useMyProfile() {
     (async () => {
       await getMyProfile();
     })();
-    tim?.on(TIM.EVENT.PROFILE_UPDATED, onProfileUpdated);
+    chat?.on(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);
     return () => {
-      tim?.off(TIM.EVENT.PROFILE_UPDATED, onProfileUpdated);
+      chat?.off(TencentCloudChat.EVENT.PROFILE_UPDATED, onProfileUpdated);
     };
-  }, [tim]);
+  }, [chat]);
 
   return {
     myProfile,

package/src/components/untils.ts

@@ -6,7 +6,7 @@ import {
   isToday,
   isYesterday,
 } from 'date-fns';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
 
 // Determine if it is a JSON string
@@ -33,14 +33,14 @@ export function JSONStringToParse(str: string) {
   return JSON.parse(str);
 }
 
-export const handleDisplayAvatar = (avatar: string, type:string = TIM.TYPES.CONV_C2C) => {
+export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudChat.TYPES.CONV_C2C) => {
   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:

package/src/constants.ts

@@ -44,7 +44,7 @@ export enum CONSTANT_DISPATCH_TYPE {
   SET_CURSOR_POS = 'setCursorPos',
   SET_AUDIO_SOURCE = 'setAudioSource',
   SET_VIDEO_SOURCE = 'setVideoSource',
-  UPDATE_UPLOAD_PENDDING_MESSAGE_LIST = 'updateUploadPenddingMessageList'
+  UPDATE_UPLOAD_PENDING_MESSAGE_LIST = 'updateUploadPendingMessageList'
 }
 
 export enum MESSAGE_TYPE {

package/src/context/TUIChatActionContext.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import type {
   CreateCustomMessageProps,
   CreateFaceMessageProps,
@@ -27,14 +27,14 @@ export interface TUIChatActionContextValue {
   createTextAtMessage?: (options: CreateTextAtMessageProps) => Message,
   createLocationMessage?: (options: CreateLocationMessageProps) => Message,
   createMergerMessage?: (options: CreateMergerMessageProps) => Message,
-  editLocalmessage?: (message: Message) => void,
+  editLocalMessage?: (message: Message) => void,
   operateMessage?: (data?: OperateMessageParams) => void,
   loadMore?: () => Promise<void>,
   revokeMessage?: (message:Message) => Promise<Message>,
   setAudioSource?: (source: HTMLAudioElement | null) => void,
   setVideoSource?: (source: HTMLVideoElement | null) => void,
   setHighlightedMessageId?: (highlightedMessageId: string) => void,
-  updataUploadPenddingMessageList?: (message?:Message) => void,
+  updateUploadPendingMessageList?: (message?:Message) => void,
 }
 
 export const TUIChatActionContext = React.createContext<

package/src/context/TUIChatStateContext.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren, useContext, MutableRefObject, RefObject,
 } from 'react';
-import { Conversation, Message } from 'tim-js-sdk';
+import { Conversation, Message } from '@tencentcloud/chat';
 import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
 import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
 
@@ -24,7 +24,7 @@ export interface TUIChatStateContextValue {
   audioSource?: HTMLAudioElement,
   vidoeSource?: HTMLVideoElement,
   TUIMessageListConfig?: MessageListProps,
-  uploadPenddingMessageList?: Array<Message>,
+  uploadPendingMessageList?: Array<Message>,
 }
 
 export const TUIChatStateContext = React.createContext<TUIChatStateContextValue>(null);

package/src/context/TUIConversationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Conversation } from 'tim-js-sdk';
+import { Conversation } from '@tencentcloud/chat';
 import { TUIConversationList } from '../components';
 
 export interface TUIConversationContextValue {

package/src/context/TUIKitContext.tsx

@@ -3,10 +3,10 @@ import {
   ChatSDK,
   Conversation,
   Profile,
-} from 'tim-js-sdk';
+} from '@tencentcloud/chat';
 
 export interface TUIKitContextValue {
-    tim: ChatSDK,
+    chat: ChatSDK,
     conversation?: Conversation,
     setActiveConversation: (conversation?: Conversation) => void,
     customClasses?: unknown,

package/src/context/TUIMessageContext.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
-import { Message } from 'tim-js-sdk';
+import { Message } from '@tencentcloud/chat';
 import { MessagePluginsProps } from '../components';
 
 export enum messageShowType {

package/src/hooks/useConversation.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import TIM from 'tim-js-sdk';
+import TencentCloudChat from '@tencentcloud/chat';
 import { useTUIConversationContext } from '../context/TUIConversationContext';
 
 export interface CreateGroupConversationParams {
   name: string;
-  type?: TIM.TYPES;
+  type?: TencentCloudChat.TYPES;
   groupID?: string;
   introduction?: string;
   notification?: string;
@@ -15,7 +15,7 @@ export interface CreateGroupConversationParams {
   groupCustomField?: Array<object>;
   isSupportTopic?: boolean;
 }
-export const useConversation = (tim) => {
+export const useConversation = (chat) => {
   const {
     createConversation: contextCreateConversation,
     deleteConversation: contextDeleteConversation,
@@ -25,7 +25,7 @@ export const useConversation = (tim) => {
   ) => {
     // create c2c conversation
     if (typeof params === 'string') {
-      const { data } = await tim.getConversationProfile(params);
+      const { data } = await chat.getConversationProfile(params);
       return data.conversation;
     }
     // create group conversation
@@ -42,7 +42,7 @@ export const useConversation = (tim) => {
       groupCustomField = [],
       isSupportTopic,
     } = params;
-    const res = await tim.createGroup({
+    const res = await chat.createGroup({
       name,
       type,
       groupID,
@@ -56,20 +56,20 @@ export const useConversation = (tim) => {
       isSupportTopic,
     });
     const { groupID: createdGroupId } = res.data.group;
-    if (type === TIM.TYPES.GRP_AVCHATROOM) {
-      await tim.joinGroup({
+    if (type === TencentCloudChat.TYPES.GRP_AVCHATROOM) {
+      await chat.joinGroup({
         groupID: createdGroupId,
-        type: TIM.TYPES.GRP_AVCHATROOM,
+        type: TencentCloudChat.TYPES.GRP_AVCHATROOM,
       });
     }
-    const { data } = await tim.getConversationProfile(`GROUP${createdGroupId}`);
+    const { data } = await chat.getConversationProfile(`GROUP${createdGroupId}`);
     return data.conversation;
   };
   const pinConversation = (options: {
     conversationID: string;
     isPinned: boolean;
-  }) => tim.pinConversation(options);
-  const deleteConversation = (conversationID: string) => tim.deleteConversation(conversationID);
+  }) => chat.pinConversation(options);
+  const deleteConversation = (conversationID: string) => chat.deleteConversation(conversationID);
   return {
     createConversation: contextCreateConversation || createConversation,
     pinConversation,

package/src/hooks/useProfile.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-export const useProfile = (tim) => {
-  const getUserProfile = (userIDList) => tim.getUserProfile({ userIDList });
+export const useProfile = (chat) => {
+  const getUserProfile = (userIDList) => chat.getUserProfile({ userIDList });
   return {
     getUserProfile,
   };

package/readme.zh_cn.md

@@ -1,60 +0,0 @@
-_[English](README.md) | 简体中文_
-# [chat-uikit-react](https://www.tencentcloud.com/document/product/1047/34279/)
->Chat UIKit 是基于腾讯云 IM SDK 的一款 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。
-基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
-Chat UIKit  中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 Chat UIKit  时只需关注自身业务或个性化扩展即可。
-
-## Demos
-我们已经构建了用于展示聊天功能的实例演示程序，您可以在我们的网站上预览这些
-
-|  | sample-chat | live-chat |
-| ------ | ------ | ------ |
-|  | ![img.png](https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/home.png) | ![img.png](https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/live-demo.png) |
-| demo 在线体验地址 | [sample-chat](https://web.sdk.qcloud.com/im/demo/intl/index.html) | [live-chat](https://web.sdk.qcloud.com/im/demo/intl/index.html?scene=live) |
-| 源码地址 | [sample-chat-code](https://github.com/TencentCloud/chat-uikit-react/tree/main/examples/sample-chat) | [live-chat-code](https://github.com/TencentCloud/chat-uikit-react/tree/main/examples/live-chat) |
-
-您可以通过 [demos](https://web.sdk.qcloud.com/im/demo/intl/index.html) 体验效果, 并可以通过 [open source code](https://github.com/TencentCloud/chat-uikit-react) 获取源码
-
-
-## Running Demo
-
-### 步骤一：下载源码
-```
-# Run the code in CLI
-$ git clone https://github.com/TencentCloud/chat-uikit-react
-# Go to the project  
-$ cd chat-uikit-react
-# Install dependencies of the demo
-$ npm install && cd examples/sample-chat && npm install
-```
-### 步骤二：配置 demo
-1. 打开`examples/sample-chat`项目，通过路径`./examples/sample-chat/src/debug/GenerateTestUserSig.js`找到`GenerateTestUserSig.js`文件。
-2. 在`GenerateTestUserSig.js`文件中设置 `SDKAPPID` 和 `SECRETKEY` ，其值可以在[IM控制台](https://console.tencentcloud.com/im)中获取。 点击目标应用卡片，进入其配置页面。
-   ![](https://qcloudimg.tencent-cloud.cn/raw/8d469e975f1ca5a2f3dbc9c6fe8774f5.png)
-3. 在 **Basic Information** 区域，点击  **Display key**，将密钥信息复制并保存到 GenerateTestUserSig 文件中。
->!
->- 本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通 Demo 和功能调试。**
->- 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://www.tencentcloud.com/document/product/1047/34385)。
-
-### 步骤三：启动项目
-```
-# Launch the project
-$ cd examples/sample-chat
-$ npm run start
-```
-
-### 步骤四：发送您的第一条消息
-1. 项目启动成功后，点击“+”图标，进行创建会话。
-2. 在输入框中搜索另一个用户的 userID。
-3. 点击用户头像发起会话。
-4. 在输入框输入消息，按下"enter"键发送。
-   ![](https://web.sdk.qcloud.com/im/demo/TUIkit/react-static/images/chat.gif)
-
-
-### Quick links
-- [Web demo](https://web.sdk.qcloud.com/im/demo/intl/index.html)
-- [Client APIs](https://www.tencentcloud.com/document/product/1047/33999)
-- [Free demo download](https://www.tencentcloud.com/document/product/1047/34279)
-- [FAQs](https://www.tencentcloud.com/document/product/1047/34455)
-- [Source code in GitHub](https://github.com/TencentCloud/chat-uikit-react)
-- [Generating UserSig](https://www.tencentcloud.com/document/product/1047/34385)

package/src/@types/index.d.ts

@@ -1 +0,0 @@
-export default TIM;

package/src/@types/index.js

@@ -1,3 +0,0 @@
-import TIM from 'tim-js-sdk/tim-js-friendship';
-
-export default TIM;