tencent cloud

Feedback

Web React

Last updated: 2024-05-31 14:55:06
    Chat UIKit is a UI component library based on Tencent Cloud IM SDK. It provides universal UI components to offer features such as conversation, chat, relationship chain, group, and audio/video call features. With these UI components, you can quickly build your own business logic.
    When implementing UI features, components in Chat UIKit will also call the corresponding APIs of the IM SDK to implement IM-related logic and data processing, allowing developers to focus on their own business needs or custom extensions.
    You can experience it online:
    Web Demo
    H5 Demo
    TUIKit Web interface is shown in the following figure:
    
    TUIKit H5 interface is shown in the following figure:
    
    
    
    LiveChat interface is shown in the following figure:
    
    ChatBot interface is shown in the following figure:
    

    Running Demo

    Step 1: Download the source code

    MacOS
    Windows
    # Run the code in CLI
    git clone https://github.com/TencentCloud/chat-uikit-react
    # Go to the project
    cd chat-uikit-react
    # Install dependencies of the demo
    npm install && cd examples/sample-chat && npm install
    # Run the code in CLI
    git clone https://github.com/TencentCloud/chat-uikit-react
    # Go to the project
    cd chat-uikit-react
    # Install dependencies of the demo
    npm install
    cd examples/sample-chat
    npm install

    Step 2: Configure the demo

    1. Open the examples/sample-chat project and find the GenerateTestUserSig.js file in the path ./examples/sample-chat/src/debug/GenerateTestUserSig.js.
    2. In the GenerateTestUserSig.js file, set SDKAPPID and SECRETKEY. Their values can be obtained in the IM console. Click the target application tab to enter its configuration page.
    Information such as SDKAppID and secretKey can be obtained in the IM console
    
    
    3. Copy the key information and save it to the ./examples/sample-chat/src/debug/GenerateTestUserSig.js file.
    
    Note:
    This document mentions a method for generating UserSig by configuring a secret key in the client code. This method makes the secret key susceptible to decompilation and reverse engineering. Once your key is compromised, attackers can misappropriate your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo and debugging features.
    The correct way to generate UserSig is to integrate the UserSig computation code into your server and provide an API for the app. When UserSig is needed, your app should request a dynamic UserSig from the business server. For more information, see How to Generate a UserSig on the Server.

    Step 3: Start the project

    # Launch the project
    npm run start

    Step 4: Send your first message

    1. After the project is started successfully, click + to create a conversation.
    2. Enter a userID in the search box.
    3. Click the user's avatar to initiate a conversation.
    4. Enter a message in the input box and press Enter to send.
    

    Integrating chat-uikit-react

    If you wish to integrate chat-uikit-react into your project, please go to Integration (UI Included)/Integrating Basic Features (React) .

    Contact Us

    Join the Telegram technical discussion group or WhatsApp discussion group, enjoy the support of professional engineers, and solve your difficulties.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support