Integration

Introduction
chat-uikit-react is a react UI component library based on Tencent Cloud Chat SDK. It provides some common UI components, including session, chat, group and other features. Based on these well-designed UI components, you can quickly build elegant, reliable and scalable chat applications.
You can directly experience the chat below. Meanwhile, you can quickly try online code implementation through Try On CodeSandbox.
﻿
Development Environment Requirement
React version 18
TypeScript
﻿Node.js version 18+
npm (version should match node version)
chat-uikit-react Integration
Step 1: Create Project
Create a new React project named chat-app (select React 18 during project creation and recommend using the Typescript template), and follow the prompt to set up the initial project.
npm create rsbuild@latest
Step 2: Download the Chat-Uikit-React Component
Download chat-uikit-react via npm for use in the project.
npm i @tencentcloud/chat-uikit-react
Copy the debug directory to the src/debug folder in the project directory. This is required when generating user signatures locally.
MacOS
Windows
cp -r node_modules/@tencentcloud/chat-uikit-react/debug ./src
xcopy node_modules\@tencentcloud\chat-uikit-react\debug .\src\debug /i /e
Step 3: Introducing 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 large emoji graphics. 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 submit a ticket contact us.
﻿
﻿
﻿
Replace the content in App.tsx, or you can create a new component and import it. → Experience in sandbox.
import {
  UIKitProvider,
  useLoginState,
  LoginStatus,
  ConversationList,
  Chat,
  ChatHeader,
  MessageList,
  MessageInput,
  useUIOpenControlState,
  ChatSetting,
  Search,
  VariantType,
  ContactList,
  ContactInfo,
} from "@tencentcloud/chat-uikit-react";
import { useState } from "react";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";
﻿
﻿
function App() {
  const userID = '';        // TODO: Replace with your userID
  const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
  const SDKSecretKey = '';   // TODO: Replace with your SDKSecretKey
﻿
  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
  const [activeTab, setActiveTab] = useState('chats');
﻿
  const { userSig } = GenerateTestUserSig.genTestUserSig({ 
    userID,
    SDKAppID,
    SecretKey: SDKSecretKey,
  });
  
  const { status } = useLoginState({
    SDKAppID,
    userID,
    userSig,
  })
﻿
  if (status !== LoginStatus.SUCCESS) {
    return <div>Loading...</div>
  }
  
  // Language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // Theme support light(default) / dark
  return (
    <UIKitProvider>
      <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'row' }}>
        <ul>
          <li onClick={() => {setActiveTab('chats')}}>chats</li>
          <li onClick={() => {setActiveTab('contacts')}}>contact</li>
        </ul>
        {
          activeTab === 'chats' && (
            <>
              <ConversationList style={{ minWidth: '300px', maxWidth: '350px' }}/>
              <Chat PlaceholderEmpty="No messages yet">
                <ChatHeader />
                <MessageList />
                <MessageInput />
              </Chat>
              {isChatSettingOpen && <ChatSetting />}
              {isChatSearchOpen &&  <Search style={{ minWidth: '300px'}} variant={VariantType.EMBEDDED} />}
            </>
          )
        }
        {
          activeTab === 'contacts' && (
            <>
              <ContactList style={{ minWidth: '300px', maxWidth: '350px' }}/>
              <ContactInfo 
                PlaceholderEmpty="No contact yet"
                onSendMessage={() => {setActiveTab('chats')}}
                onEnterGroup={() => {setActiveTab('chats')}}
              />
            </>
          )
        }
      </div>
    </UIKitProvider>
  );
}
﻿
export default App;
Parameter
Type
Note
userID
String
Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.
SDKAppID
Number
The unique identifier for the audio and video application created in the Tencent RTC Console.
SDKSecretKey
String
The SDKSecretKey of the audio and video application created in the Tencent RTC Console.
userSig
String
A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.
Explanation of UserSig：
Development environment: If you are running a demo locally and developing or debugging, you can use the genTestUserSig (Refer to Step 3.2) function in the debug file to generate a 'userSig'. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
Production environment: If your project is going live, please use the Server-side Generation of UserSig method.
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 Application Status, service version, SDKAppID, creation time, Tag, and expiration time of the new application on the console overview page.
﻿
Step 5: Start the Project
Replace SDKAppID, UserID, and UserSig in App.tsx, then run the following command:
 npm run dev
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 6: 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.
Communication 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﻿
﻿
Parameter	Type	Note
userID	String	Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.
SDKAppID	Number	The unique identifier for the audio and video application created in the Tencent RTC Console.
SDKSecretKey	String	The SDKSecretKey of the audio and video application created in the Tencent RTC Console.
userSig	String	A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.