• UIKit
  • SDK
  • RESTful API
Chat/
UIKit/
Android/
Overview/
UIKit
  • Overview
    • TUIKit Introduction
    • Features Overview
    • Pricing
      • Billing Overview
      • Pricing
      • Billing of Chat Out-of-Package Usage
  • Getting Started
    • Run Demo
    • Sending your first message
    • Installation
      • TUIKit
      • TUIChat Only
    • Secure authentication with UserSig
  • Build Basic Interfaces
    • Chat
    • Conversation List
    • Contact List
    • Add Contact
    • Create Group Chat
    • Video and Audio Call
  • Features
    • Reactions
    • Quote
    • Read Receipt
    • User Online Status
    • Translation
    • Search Messages
    • Integrating Offline Push
      • Manufacturer configuration
      • Quick Integration
      • Client APIs
  • Customization
    • Customize Styles
      • Global
      • Chat
      • Conversation List
      • Group Settings
      • Contact Settings
    • Customize Messages
    • Customize Emojis and Stickers
  • Localization
  • Changelog
  • Console Guide
    • New Console Introduction
    • Creating and Upgrading an Application
    • Basic Configuration
    • Feature Configuration
    • Account Management
    • Group Management
    • Webhook Configuration
    • Usage Statistics
    • Real-Time Monitor
    • Auxiliary Development Tools
  • Product Features
    • Message Management
      • One-to-One Message
      • Message Storage
      • Offline Push
      • Group Message
      • Message Formats
    • Account System
      • Login Authentication
      • Online Status Management
    • Group Related
      • Group System
      • Group Management
    • User Profile and Relationship Chain
      • Profile Management
      • Relationship Chain Management
  • Scenario-based Practice
    • Live Streaming Room Construction
    • How to Integrate Chat into Games
    • AI Chatbot
    • Super Large Entertainment and Collaboration Community
    • Discord Implementation Guide
  • Push Service
    • Overview
    • Activate the Service
    • Quick Start
    • Manufacturer Channel
      • Manufacturer Configuration
        • Android
        • iOS
        • Flutter
        • React-Native
      • Quick Integration
        • Android
        • iOS
        • Flutter
        • React-Native
    • Statistics
    • Troubleshooting Tool
    • Client APIs
      • Android
      • iOS
      • Flutter
      • React Native
    • REST API
      • Pushing to All/Tagged Users
      • UserID-Targeted Push
      • Obtaining Application Attribute Names
      • Setting Application Attribute Names
      • Obtaining User Attributes
      • Setting User Attributes
      • Deleting User Attributes
      • Obtaining User Tags
      • Adding User Tags
      • Deleting User Tags
      • Deleting All User Tags
      • Recalling Push
    • Push Callback
      • All Users / Tags / UserID Push Callback
      • Other Push Callbacks
    • Advanced Features
      • Custom Definition Badge
      • Custom Definition Ringtone
      • Customized Icon
      • Custom Definition Click Redirect
      • Push Message Categorization
    • Release Notes
      • Android
      • iOS
      • Flutter
      • React Native
    • FAQS
  • Error Codes

TUIKit Introduction

TUIKit Overview

TUIKit is a UI component library based on Chat SDK. It provides universal UI components to offer features such as conversation, chat, search, contacts, group, and audio/video call features. With these UI components, you can quickly build your own business logic. When implementing UI features, components in TUIKit will also call the corresponding APIs of the Chat SDK to implement Chat-related logic and data processing, allowing developers to focus on their own business needs or custom extensions. Starting from version 6.9.3557, TUIKit provides a new set of minimalist version UI components. The previous version UI components are still retained, which are called the classic version UI components. You can choose either the classic or minimalist version as needed.
Starting from version 7.5.4852, TUIKit has added support for RTL languages (languages with right-to-left text direction, such as Arabic and Hebrew). When the application language is set to an RTL language, TUIKit will automatically switch to RTL style. Additionally, Arabic language has been added to the built-in language options.

TUIKit Components

TUIKit provides the following UI components: TUISearch, TUIConversation, TUIChat, TUICallKit, TUIContact, TUIGroup, and TUIOfflinePush. Each of these components is responsible for displaying different content. The UI effect is as shown below:
Minimalist
RTL
Classic




TUIChat

TUIChat is responsible for message UI display. You can use it to directly send different types of messages, long press on a message to like/reply to/quote messages, query message read receipt details, etc. The UI effect is as shown below:
Minimalist
RTL
Classic
Message UI | Sending Multiple Types of Messages

Message Liking | Reply

Message Read Receipt | Read Receipt Details

Message UI | Sending Multiple Types of Messages

Message Liking | Reply

Message Read Receipt | Read Receipt Details

Message UI
Sending Multiple Types of Messages






Message Liking
Reply






Message Read Receipt
Read Receipt Details







TUIContact

TUIContact is responsible for contacts display and permission setting. The UI effect is as shown below:
Minimalist
RTL
Classic
Relationship Chain List | Contact Profiles and Management

List of Joined Group Chats | Blocklist

Relationship Chain List | Contact Profiles and Management

List of Joined Group Chats | Blocklist

Relationship Chain List
Contact Profiles and Management






List of Joined Group Chats
Blocklist






Note:
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.




TUIConversation

TUIConversation is responsible for conversation list display and editing. The UI effect is as shown below:
Minimalist
RTL
Classic




TUIGroup

TUIGroup is responsible for managing group profiles, group members, and group permissions. The UI effect is as shown below:
Minimalist
RTL
Classic
Group Profile and Management | Group Member Management



Group Joining Mode Management | Permission Management




Group Profile and Management | Group Member Management



Group Joining Mode Management | Permission Management




Group Profile and Management
Group Member Management






Group Joining Mode Management
Permission Management







TUISearch

TUISearch is responsible for local search, including contacts, group chat, and chat record search. The UI effect is as shown below:
Minimalist
RTL
Classic










TUICallKit

TUICallKit is responsible for audio or video calls. The one-to-one chat UI is as shown below:
Video Call
Audio Call






The group chat UI is as shown below:
Video Call
Audio Call







If you have integrated TUIChat, TUIContact, and TUICallKit, you can initiate an audio or video call via a TUIChat message page or TUIContact individual profile page. The UI effect is as shown below:

Minimalist
RTL
Classic
Initiating a Call via a Message Page | Initiating a Call via a Profile Page



Initiating a Call via a Message Page | Initiating a Call via a Profile Page




Initiating a Call via a Message Page
Initiating a Call via a Profile Page







TUIOfflinePush

TUIOfflinePush is responsible for displaying messages pushed offline. The offline push effect is as shown below:




Ask the community!
Start technical discussions and get instant expert support!