Docs Overview/
Chat/
UIKit/
Web/
Getting Started/
Integration/
React/

React

chat-uikit-react Introduction

chat-uikit-react is a React UI component library based on Tencent Cloud Chat SDK. It provides universal UI components for features such as session, chat, and group. With these finely designed UI components, you can quickly build elegant, reliable, and scalable Chat applications.
You can directly experience the chat below. Additionally, you can quickly try online code implementation through the Try On CodeSandbox.


Environment Requirements

React version 18+ (not supporting version 17.x)
TypeScript
Node.js version 16+
npm (use a version that matches the Node version in use)

chat-uikit-react Integration

Step 1. Create a project

Create a new React project. You can choose whether or not to use a TS template.
npx create-react-app sample-chat --template typescript
After the project is created, go to the project directory.
cd sample-chat

Step 2. Download the chat-uikit-react component

Use npm to download chat-uikit-react and use it in your project. Additionally, related open source code is also provided on GitHub, which you can use as a basis to develop your own component library.
npm i @tencentcloud/chat-uikit-react @tencentcloud/uikit-base-component-react

Step 3. Include the chat-uikit-react component

Note:
The following code does not include SDKAppID, userID, and userSig. You need to replace them with the relevant information obtained in Step 4.
To respect the copyright of emoji designs, the Chat Demo/TUIKit project does not include cutouts of large emoji elements. Please replace them with your own designs or other emoji packs for which you hold the copyright before officially launching for commercial use. The default smiley face emoji pack shown below is copyrighted by Tencent RTC and is available for licensed use for a fee. If you need to obtain a license, please contact us.



Replace the content in App.tsx, or you may create a new component for inclusion.
Example 1: Integration of ConversationList & Chat
Example 2: Integration of Chat
import React from 'react';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { Profile, ConversationList, Chat, ChatHeader, MessageList, MessageInput, ChatSetting } from '@tencentcloud/chat-uikit-react';

import '@tencentcloud/chat-uikit-react/dist/esm/index.css'

const config = {
  SDKAppID: 0, // Your SDKAppID, number type, Get it from Step 4
  userID: 'YOUR_USER_ID', // Login UserID, string type,  Get it from Step 5
  userSig: 'YOUR_USER_SIG', // Your userSig, string type,  Get it from Step 5
}

TUILogin.login({
  ...config,
  useUploadPlugin: true
}).then(() => {
  openDefaultChat();
}).catch(() => {});

function openDefaultChat() {
  // 1v1 chat: conversationID = `C2C${userID}`
  // group chat: conversationID = `GROUP${groupID}`
  const userID = 'administrator'; // userID: Recipient of the Message userID, Get it from Step 5
  const conversationID = `C2C${userID}`;
  TUIConversationService.switchConversation(conversationID);
}


export default function App() {
  // language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // theme support light(default) / dark
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language='en-US' theme='light'>
        <div style={{ display: 'flex', flexDirection: 'column', maxWidth: '30%' }}>
          <Profile />
          <ConversationList />
        </div>
        <Chat>
          <ChatHeader />
          <MessageList />
          <MessageInput />
        </Chat>
        <ChatSetting />
      </UIKitProvider>
    </div>   
  );
}
import React from 'react';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { Chat, ChatHeader, MessageList, MessageInput } from '@tencentcloud/chat-uikit-react';

import '@tencentcloud/chat-uikit-react/dist/esm/index.css';

const config = {
  SDKAppID: 0, // Your SDKAppID, number type, Get it from Step 4
  userID: 'YOUR_USER_ID', // Login UserID, string type,  Get it from Step 5
  userSig: 'YOUR_USER_SIG', // Your userSig, string type,  Get it from Step 5
}

TUILogin.login({
  ...config,
  useUploadPlugin: true
}).then(() => {
  openDefaultChat();
}).catch(() => {});

function openDefaultChat() {
  // 1v1 chat: conversationID = `C2C${userID}`
  // group chat: conversationID = `GROUP${groupID}`
  const userID = 'administrator'; // userID: Recipient of the Message userID, Get it from Step 5
  const conversationID = `C2C${userID}`;
  TUIConversationService.switchConversation(conversationID);
}

export default function App() {
  // language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // theme support light(default) / dark
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language='en-US' theme='light'>
        <Chat>
          <ChatHeader />
          <MessageList />
          <MessageInput />
        </Chat>
      </UIKitProvider>
    </div>   
  );
}
Note:
conversationID: Session ID. The composition method of the Session ID:
C2C${userID} (Private chat)
GROUP${groupID} (Group chat)
Regarding group chat:
The groupID can be obtained by calling the API createGroup
If it's a live chat group, you need to join the group by calling the API joinGroup before chat is possible.
Enter the Chat
Invoke the API switchConversation and input a 'conversationID' to enter the chat interface.

Step 4: Create an application

1. log in to Chat Console .
2. click Create Application, enter your application name, then click Create.



3. After creation, you can view the status, service version, SDKAppID, creation time, Tag, and expiration time of the new application on the console overview page.




Step 5: Obtain userID and userSig

userID
Click to enter the Application you created above. You will see the Chat product entrance in the left sidebar. Click to enter.
After entering the Chat Product subpage, click on Users to go to the User Management Page.
Click Create account, a form for creating account information will pop up. If you are just a regular member, we recommend you choose the General type.
To enhance your experience with message sending and receiving features, we recommend creating two userIDs.



userSig can be generated in real-time using the development tools provided by the console. To access the development tools, click Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator.




Step 6: Initiate the Project

Replace SDKAppID, userID, and userSig in App.tsx, then run the following command:
 npm run start
Note:
1. Please ensure that in Step 3 code, SDKAppID, userID, and userSig are all successfully replaced. Failure to replace them will result in abnormal project behavior.
2. A userID corresponds to a userSig, for more information, see Generating UserSig.
3. If the project fails to start, please check whether the development environment requirements are met.

Step 7: Send your first message

Enter your message in the input box and press Enter to send.




FAQs

What is UserSig?

A UserSig is a password for users to log in to Chat. It is essentially the ciphertext generated by encrypting information such as the UserID.

How can I generate a UserSig?

The issuance method for UserSig involves integrating the calculation code of UserSig into your server, and providing an interface oriented towards your project. When UserSig is needed, your project sends a request to the business server to access the dynamic UserSig. For more information, please see How to Generate a UserSig on the Server.
Note:
The exemplary code provided in this document retrieves the UserSig by embedding the SECRETKEY in the client code. This approach makes the SECRETKEY highly susceptible to decompilation and reverse engineering. Once your encryption key is compromised, attackers can misappropriate your Tencent Cloud traffic. Hence, this procedure is exclusively recommended for running functional debugging locally. For the correct issuance of UserSig, please refer to the previous sections.

How to integrate UIKit source code?

We recommend integrating with npm first. If npm doesn't meet your deep customization needs, you can opt for source code integration. The steps for source code integration are as follows:
1. Copy TUIKit to the src directory of your project:
macOS
Windows
mkdir -p ./src/TUIKit && rsync -av  ./node_modules/@tencentcloud/chat-uikit-react/src/** ./src/TUIKit
xcopy .\node_modules\@tencentcloud\chat-uikit-react\src\ .\src\TUIKit /i /e
2. Replace all @tencentcloud/chat-uikit-react in the project with ./TUIKit
//  For example, replace the component imports of TUIKit, Chat, etc., with ' './TUIKit'
// before
import { ConversationList } from 'tencentcloud/chat-uikit-react';
// after
import { ConversationList } from './TUIKit';
3. If errors occur, you can refer to the following steps to troubleshoot:
3.1 Install sass create-react-app document
3.2 Turn off isolatedModules of tsconfig.json
3.3 Configure eslint to turn off linting for source code of src/TUIKit
3.4 Modify the font resource path in the file src/TUIKit/styles/fonts/icon-font.scss and locate it relatively to ../../assets/fonts/*
3.5 Configure the alias path resolve.alias for theme color import in webpack.config.js
module.exports = {
    resolve: {
      alias: {
        '~@tencentcloud/uikit-base-component-react/dist/styles/theme/util': path.resolve(__dirname, '../node_modules/@tencentcloud/uikit-base-component-react/dist/styles/theme/_util.scss')
      }
    }
}

Exchange and Feedback

Join the Telegram Technical Exchange Group or WhatsApp Exchange Group to enjoy support from professional engineers and solve your problems.

Documentation

UIKit Related:

chat-uikit-react npm
Demo Source Code and Running Example

For more features, refer to the ChatEngine API documentation:

chat-uikit-engine API Manual
chat-uikit-engine npm