React

Applicable Scenarios
Web & H5 platform, integrate independently private chat (1V1) or Group chat. This scenario is applicable for such as real estate consultancy, e-commerce customer service, remote insurance claims assessment.
You can directly experience the chat below. Meanwhile, you can quickly try online code implementation through Experience Sandbox .
﻿
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 and use it in the project.
npm i @tencentcloud/chat-uikit-react
Step 3: Introduce the Chat-Uikit-React Component, Create and Open a Session to Chat
Note:
Note: The following code does not auto-fill SDKAppID, userID, or userSig. Retrieve related information in procedure 4 and replace them.
Note:
  Call API createC2CConversation to create a one-to-one chat.
Call API createGroupConversation to create a group chat.
Ways to enter a chat:
Call API setActiveConversation, input conversationID to enter the chat page.
Replace the content in App.tsx, or you can create a new component and introduce it. Experience Sandbox ->﻿
import {
  UIKitProvider,
  useLoginState,
  LoginStatus,
  useConversationListState,
  Chat,
  MessageList,
  MessageInput,
  ChatHeader,
  useUIOpenControlState,
  ChatSetting,
  Search,
  VariantType,
} from "@tencentcloud/chat-uikit-react"
﻿
export default function App() { 
﻿
  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
  const { setActiveConversation, createC2CConversation } = useConversationListState();
  const { status } = useLoginState({
    SDKAppID: 0, // Your SDKAppID, see procedure 4
    userID: '',  // Your logged in UserID, see procedure 5
    userSig: '', // Your userSig, see procedure 5
    onSuccess() {
      const userID = ''; // userID: recipient's userID
      createC2CConversation(userID).then((conversation) => {
        setActiveConversation(conversation.conversationID);
      })
    }
  });
﻿
  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 (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language='en-US' theme='light'>
        <Chat style={{ width: '100vw' }}>
          <ChatHeader />
          <MessageList />
          <MessageInput />
        </Chat>
        {isChatSettingOpen && <ChatSetting />}
        {isChatSearchOpen &&  <Search style={{ minWidth: '300px'}} variant={VariantType.EMBEDDED} />}
      </UIKitProvider>
    </div>   
  );
}
Step 4: Creating an Application
1. Log in to the Chat Console.
2. Click "Create Application", enter your application name, then click "Create".
﻿
﻿
﻿
3. After creation, you can see the application status, service version, SDKAppID, createTime, tag, and expiration time on the console overview page.
﻿
﻿
﻿
Procedure 5: Obtain UserID and UserSig
userID 
Click to enter the Application you created above. The Chat product entry will be shown in the left sidebar. Click to enter.
After entering the Chat product subpage, click Users to enter the user management page.
Click Create account, and a pop-up input box for account information will appear. If you are merely an ordinary member, we recommend you select the General data type.
For a better experience in message sending and receiving and other features, we recommend creating two userIDs.
﻿
﻿
﻿
userSig, usable development tools provided by the console to generate in real-time. Please click Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator.
﻿
﻿
﻿
Step 6: Start Project
Replace the SDKAppID, userID, and userSig in App.tsx, then run the command as follows:
 npm run start
Note:
1. Please ensure the procedure 3 code has successfully replaced SDKAppID, userID, and userSig. If not replaced, it will lead to abnormal project performance.
2. userID and userSig have a one-to-one relationship. Refer to generate UserSig.
3. If the project fails to start, please check whether the development environment requirement are met.
Step 7: Send Your First Message
enter the message in the input box and press enter to send.
﻿
FAQs
What Is UserSig
UserSig is the password for user login to Chat, which is essentially the encrypted ciphertext of UserID and other information.
How to Generate UserSig
The UserSig issuance method involves integrating the UserSig calculation code into your server and providing a project-oriented API. When UserSig is required, your project initiates a request to the business server to obtain a dynamic UserSig. For more details, see UserSig generation by the server.
Note:
The example code in this document uses a solution to obtain UserSig by configuring SECRETKEY in client-side code. In this method, SECRETKEY can be easily decompiled and reverse-engineered. Once your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for local debugging. For the correct UserSig issuance method, please refer to the context before.
Does React 17.X Version Support
Currently does not support version 17.x. Only React ≥ v18.0 is supported.
Reference Documentation
UIKit Related
﻿chat-uikit-react npm﻿
﻿Demo source code and running example﻿
Implementing More Features, Refer to ChatEngine API Document
﻿chat-uikit-engine API manual﻿
﻿chat-uikit-engine npm﻿