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
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.
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 install @tencentcloud/chat-uikit-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 { UIKitProvider, Chat, ChatHeader, ConversationList, ChatSetting, MessageInput, MessageList, Profile } from '@tencentcloud/chat-uikit-react';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
const config = {
SDKAppID: 0,
userID: 'YOUR_USER_ID',
userSig: 'YOUR_USER_SIG',
}
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
openDefaultChat();
}).catch(() => {});
function openDefaultChat() {
const userID = 'administrator';
const conversationID = `C2C${userID}`;
TUIConversationService.switchConversation(conversationID);
}
export default function SampleChat() {
return (
<div style={{display: 'flex', height: '100vh'}}>
<UIKitProvider language={"en-US"}>
<div style={{maxWidth: '400px'}}>
<Profile />
<ConversationList />
</div>
<Chat>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
<ChatSetting />
</UIKitProvider>
</div>
);
}
import React from 'react';
import { UIKitProvider, Chat, ChatHeader, ConversationList, ChatSetting, MessageInput, MessageList, Profile } from '@tencentcloud/chat-uikit-react';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
const config = {
SDKAppID: 0,
userID: 'YOUR_USER_ID',
userSig: 'YOUR_USER_SIG',
}
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
openDefaultChat();
}).catch(() => {});
function openDefaultChat() {
const userID = 'administrator';
const conversationID = `C2C${userID}`;
TUIConversationService.switchConversation(conversationID);
}
export default function SampleChat() {
return (
<div style={{height: '100vh'}}>
<UIKitProvider language={"en-US"}>
<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
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.
Step 6: Initiate the Project
Replace SDKAppID, userID, and userSig in App.tsx, then run the following command:
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.
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:
mkdir -p ./src/TUIKit && rsync -av ./node_modules/@tencentcloud/chat-uikit-react/ ./src/TUIKit
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-react .\\src\\TUIKit /i /e
2. Replace all @tencentcloud/chat-uikit-react
in the project with ./TUIKit
import { Chat, UIKitProvider } from 'tencentcloud/chat-uikit-react'
;
import { Chat, UIKitProvider } from './TUIKit';
Exchange and Feedback
Documentation
UIKit Related:
For more features, refer to the ChatEngine API documentation:
Was this page helpful?