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 run 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
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 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 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";
﻿
function App() {
  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
  const [activeTab, setActiveTab] = useState('chats');
  const { status } = useLoginState({
    SDKAppID: 0, // See procedure 4
    userID: '',  // See procedure 5
    userSig: '', // See procedure 5
  })
﻿
  if (status !== LoginStatus.SUCCESS) {
    return <div>Loading...</div>
  }
  
  // Language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // Theme supports 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;
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 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 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.
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﻿
﻿