@tencent-rtc/mcp 1.3.8 → 1.3.9

package/resource/doc/chatuikit/android/integration.md

@@ -1,287 +1,583 @@
-This article introduces how to integrate `TUIKit` components. 
+TUIKit Compose is a Jetpack Compose component library based on Tencent Cloud IM SDK, providing complete solutions for instant messaging features such as chat, conversation list, and contact management. This document describes how to manually integrate these components and implement core functionality.
 
-> **Note:**
-> 
-> - Starting from version 5.7.1435, TUIKit supports modular integration and the classic UI. You can integrate the necessary modules according to your needs.
-> - Starting from version 6.9.3557, TUIKit introduces a brand new minimalist UI.
+## Key Concepts
 
+TUIKit Compose provides a complete set of instant messaging UI components, depending on the AtomicXCore data layer below and capable of building various functional Pages above.
+- Page Layer: Complete functional pages encapsulated based on TUIKit Compose components: ChatPage, ContactsPage, ConversationsPage, which you can use directly.
 
-You can freely choose between the classic or minimalist UI components according to your needs. If you are not familiar with the effects of the interface libraries, you can refer to the document [TUIKit Overview](https://www.tencentcloud.com/document/product/1047/50062).
+- TUIKit Compose (UI Component Layer): Jetpack Compose components built on AtomicXCore, which you can embed into your existing App pages.
 
-## Environment Requirements
-- Android Studio-Giraffe 
+- AtomicXCore (Data Layer): Provides data management and business logic, including various Stores and Managers.
 
-- Gradle-7.2
 
-- Android Gradle Plugin Version-7.0.0
+## Prerequisites
+- Android Studio Ladybug | 2024.2.1 and above
 
-- kotlin-gradle-plugin-1.5.31
+- Android 5.0 and above system version
 
+- Gradle 8.9 and above
 
-## Integrate Module Source Code
-1. Download the TUIKit source code from [GitHub](https://github.com/TencentCloud/chat-uikit-android). Ensure that the TUIKit folder is at the same level as your project folder, for example:
+- Android Gradle Plugin 8.6 and above
 
+- JDK 17 and above
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/8ea160a453a211ee84f2525400494e51.png)
+- Kotlin 1.9.0 and above
 
-2. Add the corresponding TUIKit components to settings.gradle according to your business requirements. TUIKit components are independent of each other, and adding or removing them does not affect project compilation.
+- A valid Tencent Cloud account and Chat application. You can refer to [Enable Service](https://trtc.io/document/45907?product=chat&menulabel=uikit&platform=android) to get the following information from the console:
 
-   ``` java
-   // Include the upper-layer app module
-   include ':app'
-   
-   // Include the internal communication module (required module)
-   include ':tuicore'
-   project(':tuicore').projectDir = new File(settingsDir, '../TUIKit/TUICore/tuicore')
-   
-   // Include the common module of IM component (required module)
-   include ':timcommon'
-   project(':timcommon').projectDir = new File(settingsDir, '../TUIKit/TIMCommon/timcommon')
-   
-   // Include the chat feature module (basic feature module)
-   include ':tuichat'
-   project(':tuichat').projectDir = new File(settingsDir, '../TUIKit/TUIChat/tuichat')
+  - SDKAppID: The ID of the Chat application obtained from the console, which is the unique identifier of the application
+
+  - SDKSecretKey: The secret key of the application
+      
+
+      > **Note:**
+      > 
+>     - This project currently only supports manual integration and does not support integration through package managers like Maven.
+>     - To ensure a stable build environment, please strictly follow the official compatibility requirements for configuration:
+>     - For compatibility between Gradle, Android Gradle Plugin, JDK and Android Studio, please refer to the Android official documentation: [Version Notes](https://developer.android.com/build/releases/gradle-plugin#updating-gradle).
+>     - For version correspondence between Kotlin, Android Gradle Plugin and Gradle, please refer to the Kotlin official documentation: [Kotlin-Gradle Plugin Compatibility](https://kotlinlang.org/docs/gradle-configure-project.html#apply-the-plugin).
+
+      > We recommend that you choose a version combination that fully matches your project requirements according to the above guidelines.
+      > 
+
+
+## Integrate and Import Components
+
+### Download Source Code
+1. Download [TUIKit Compose](https://github.com/Tencent-RTC/TUIKit_android_compose) source code from GitHub:
+
+   ``` bash
+   git clone https://github.com/Tencent-RTC/TUIKit_Android_Compose.git
+   ```
+
+   Project directory structure description:
+
+   ``` bash
+   atomic-x/
+   ├── src/main/
+   │   ├── java/io/trtc/tuikit/atomicx/     # UI component source code (required integration)
+   │       ├── messagelist/      # Message list component
+   │       ├── messageinput/     # Message input component
+   │       ├── conversationlist/ # Conversation list component
+   │       ├── contactlist/      # Contact list component
+   │       ├── basecomponent/    # Base components
+   │       └── ...               # Other UI components
+   │   # Resource files (required integration)
+   │   ├── res/                    # Common resources
+   │   ├── res-message-list/       # Message list component resources
+   │   ├── res-message-input/      # Message input component resources
+   │   ├── res-conversation-list/  # Conversation list component resources
+   │   └── ...                     # Other component resources
+   chat/
+   ├── uikit/src/main/java/io/trtc/tuikit/chat/pages    # Page components (reference implementation)
+   │   ├── ChatPage.kt
+   │   ├── ContactsPage.kt
+   │   └── ConversationsPage.kt
+   └── demo/                 # Sample application (optional reference)
+   ```
+
+### Integrate Components
+1. Copy the component directory completely to your Android project, as shown in the figure below, where ComposeDemo is the sample project and TUIKit_Android_Compose is the component source code downloaded from GitHub:
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/b784e12db56a11f0b0cf525400e889b2.png)
+
+2. Add TUIKit Compose components in your settings.gradle.kts/settings.gradle file:
    
-   // Include the relationship chain feature module (basic feature module)
-   include ':tuicontact'
-   project(':tuicontact').projectDir = new File(settingsDir, '../TUIKit/TUIContact/tuicontact')
+
+   > **Note:**
+   > 
+
+   > TUIKit_Android_Compose can be placed anywhere, as long as the relative path is correctly set in settings.gradle.
+   > 
+
+
    
-   // Include the conversation list feature module (basic feature module)
-   include ':tuiconversation'
-   project(':tuiconversation').projectDir = new File(settingsDir, '../TUIKit/TUIConversation/tuiconversation')
+
+
+【Kotlin DSL (Recommended)】
+``` java
+// settings.gradle.kts
+include(":atomicx")
+project(":atomicx").projectDir = file("../TUIKit_Android_Compose/atomic-x")
+```
+
+
+【Groovy DSL】
+``` java
+// settings.gradle
+include ':atomicx'
+project(':atomicx').projectDir = new File(settingsDir, '../TUIKit_Android_Compose/atomic-x')
+```
+
+3. Add the following dependencies in the build.gradle.kts/build.gradle of the app module:
+
+
    
-   // Include the search feature module (To use this module, you need to purchase the Pro edition、Pro Plus edition or Enterprise edition)
-   include ':tuisearch'
-   project(':tuisearch').projectDir = new File(settingsDir, '../TUIKit/TUISearch/tuisearch')
+
+
+【Kotlin DSL (Recommended)】
+``` java
+// app/build.gradle.kts
+dependencies {
+    implementation(project(":atomicx"))
+}
+```
+
+
+【Groovy DSL】
+``` java
+// app/build.gradle
+dependencies {
+    api project(':atomicx')
+}
+```
    
-   // Include the community topic feature module (To use this module, you need to purchase the Pro edition、Pro Plus edition or Enterprise edition)
-   include ':tuicommunity'
-   project(':tuicommunity').projectDir = new File(settingsDir, '../TUIKit/TUICommunity/tuicommunity')
+
+   > **Note:**
+   > 
+>   - When using the local integration solution, if you need to upgrade, you need to get the latest component code from GitHub and overwrite the TUIKit Compose directory in your local project.
+>   - When there are conflicts between private modifications and remote changes, manual merging and conflict resolution are required.
+
+
+### Configure Project
+1. Find the AndroidManifest.xml file in the app directory, add `tools:replace="android:allowBackup"` in the `application` node to override the settings in the component and use your own settings.
+
+   ``` java
+     // app/src/main/AndroidManifest.xml
+     <application
+       android:name=".BaseApplication"
+       android:allowBackup="false"
+       android:icon="@drawable/app_ic_launcher"
+       android:label="@string/app_name"
+       android:largeHeap="true"
+       android:theme="@style/AppTheme"
+       tools:replace="android:allowBackup">
+   ```
+2. Configure dependencies.
+
+
+   Add the following dependencies in your project's gradle/libs.versions.toml file:
+
+   ``` python
+   # gradle/libs.versions.toml
+   [versions]
+   agp = "8.13.0"
+   kotlin = "2.0.21"
+   coreKtx = "1.10.1"
+   junit = "4.13.2"
+   junitVersion = "1.1.5"
+   espressoCore = "3.5.1"
+   appcompat = "1.7.1"
+   material = "1.13.0"
+   runner = "1.0.2"
+   espressoCoreVersion = "3.0.2"
+   appcompatV7 = "28.0.0"
    
-   // Include the audio/video call feature module
-   include ':tuicallkit-kt'
-   project(':tuicallkit-kt').projectDir = new File(settingsDir, '../TUIKit/TUICallKit/tuicallkit-kt')
+   tuicore = "8.6.7021"
+   lifecycleRuntimeKtx = "2.8.7"
+   ui = "1.8.0"
+   foundation = "1.8.0"
+   composeBom = "2024.09.00"
+   activityCompose = "1.10.1"
+   activity = "1.8.0"
+   constraintlayout = "2.2.1"
    
-   // Include the video conference module
-   include ':tuiroomkit'
-   project(':tuiroomkit').projectDir = new File(settingsDir, '../TUIKit/TUIRoomKit/tuiroomkit')
+   [libraries]
+   androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+   junit = { group = "junit", name = "junit", version.ref = "junit" }
+   androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
+   androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
+   androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
+   material = { group = "com.google.android.material", name = "material", version.ref = "material" }
+   runner = { group = "com.android.support.test", name = "runner", version.ref = "runner" }
+   espresso-core = { group = "com.android.support.test.espresso", name = "espresso-core", version.ref = "espressoCoreVersion" }
+   appcompat-v7 = { group = "com.android.support", name = "appcompat-v7", version.ref = "appcompatV7" }
    
-   // Include speech-to-text plugin, supported from version 7.5
-   include ':tuivoicetotextplugin'
-   project(':tuivoicetotextplugin').projectDir = new File(settingsDir, '../TUIKit/TUIVoiceToTextPlugin/tuivoicetotextplugin')
+   androidx-lifecycle-viewmodel-compose = { module = "androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "lifecycleRuntimeKtx" }
+   androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
+   androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "foundation" }
+   androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "ui" }
+   androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
+   androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
+   androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
+   androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
+   androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
+   androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
+   androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
+   tuicore = { module = "com.tencent.liteav.tuikit:tuicore", version.ref = "tuicore" }
+   com-tencent-mmkv = { group = "com.tencent", name = "mmkv", version = "1.3.14" }
    
-   // Include chat message translation plugin, supported from version 7.2 (Value-added feature activation is required. Please contact Tencent Cloud sales)
-   include ':tuitranslationplugin'
-   project(':tuitranslationplugin').projectDir = new File(settingsDir, '../TUIKit/TUITranslationPlugin/tuitranslationplugin')
+   [plugins]
+   android-application = { id = "com.android.application", version.ref = "agp" }
+   kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
+   android-library = { id = "com.android.library", version.ref = "agp" }
    
-   // Include emoji reaction plugin, supported from version 7.8 (To use this module, you need to purchase the Pro Edition、Pro Plus edition or Enterprise edition)
-   include ':tuiemojiplugin'
-   project(':tuiemojiplugin').projectDir = new File(settingsDir, '../TUIKit/TUIEmojiPlugin/tuiemojiplugin')
+   kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
    ```
-3. Add the following to `build.gradle` in App:
+3. Enable Compose support.
 
-   ``` java
-   dependencies {
-    api project(':tuiconversation')
-    api project(':tuicontact')
-    api project(':tuichat')
-    api project(':tuisearch')
-    api project(':tuicommunity')
-    api project(':tuicallkit-kt') 
-    api project(':tuiroomkit') 
-    // Integrate speech-to-text plugin, supported from version 7.5
-    api project(':tuivoicetotextplugin') 
-    // Integrate translation plugin, supported from version 7.2 (Value-added feature activation is required. Please contact Tencent Cloud sales)
-    api project(':tuitranslationplugin')
-    // Integrate emoji reaction plugin, supported from version 7.8 (To use this module, you need to purchase the Premium Edition)
-    api project(':tuiemojiplugin')
-    // Integrate group chain plugin, supported from version 7.1
-    api 'com.tencent.imsdk:tuigroupnote-plugin:8.4.6667'
-    // Integrate group voting plugin, supported from version 7.1
-    api 'com.tencent.imsdk:tuipoll-plugin:8.4.6667'
-    // Integrate session grouping plugin, supported from version 7.3
-    api 'com.tencent.imsdk:tuiconversationgroup-plugin:8.4.6667'
-    // Integrate session tagging plugin, supported from version 7.3
-    api 'com.tencent.imsdk:tuiconversationmark-plugin:8.4.6667'
-    // Integrate message push plugin, supported from version 7.6
-    api 'com.tencent.timpush:timpush:8.4.6667'
-    // Integrate the corresponding manufacturer's push package as needed
-    api 'com.tencent.timpush:fcm:8.4.6667'
-    api 'com.tencent.timpush:xiaomi:8.4.6667'
-    api 'com.tencent.timpush:meizu:8.4.6667'
-    api 'com.tencent.timpush:oppo:8.4.6667'
-    api 'com.tencent.timpush:vivo:8.4.6667'
-    api 'com.tencent.timpush:huawei:8.4.6667'
-    api 'com.tencent.timpush:honor:8.4.6667'
-   }
-   ```
-4. Add the following to the `gradle.properties` file to automatically convert third-party libraries to use AndroidX:
-
-   ``` java
-   android.enableJetifier=true
-   ```
-5. 
 
-Add the following to the `build.gradle` file (in the same level as `settings.gradle`) of the root project to add the Maven repository and
+   Add the following configuration in the build.gradle.kts/build.gradle of the app module:
 
 
    
 
-Kotlin support:  
 
-   ``` java
-   buildscript {
-    repositories {
-        mavenCentral()
-        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
+【Kotlin DSL (Recommended)】
+``` java
+// app/build.gradle.kts
+plugins {
+    // Add Compose plugin
+    alias(libs.plugins.kotlin.compose)
+}
+android {
+    // Enable Compose 
+    buildFeatures {
+        compose = true
     }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:7.0.0'
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
+}
+```
+
+
+【Groovy DSL】
+``` java
+// app/build.gradle
+plugins {
+    // Add Compose plugin
+    id libs.plugins.kotlin.compose.get().pluginId
+}
+android {
+    // Enable Compose 
+    buildFeatures {
+        compose true
     }
-   }
-   ```
+}
+```
+
+4. Configure obfuscation rules.
 
-   If you use Gradle 8.x, you need to add the following code.
+
+   Add the following obfuscation rules to your app/proguard-rules.pro file:
 
    ``` java
-   buildscript {
-    repositories {
-        mavenCentral()
-        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
-    }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.2'
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.0"
-    }
-   }
-   ```   
+   -keep class com.tencent.** { *; }
+   ```
+5. Click **File > Sync Project with Gradle Files** in Android Studio to integrate components.
 
-   > **Note:**
-   > 
->   - The compatibility between Kotlin, Gradle, and AGP versions can be [viewed here](https://kotlinlang.org/docs/gradle-configure-project.html#apply-the-plugin).
->   - 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](https://trtc.io/contact).
 
-   > ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027202808/401fe37097f711ef834b525400f69702.png)
-   > 
+## Integration Steps
 
-6. Sync the project, and compile and run it. The expected project structure is shown in the following figure:
+### Step 1: Configure User Authentication
 
+Get UserSig based on UserID in [Chat Console](https://console.trtc.io/usersig) for subsequent user authentication during login.
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/da00968953a211eeabd75254005810a4.png)
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/ee78464abee111f09a6b525400454e06.png)
 
-7. **[Optional] **Delete unnecessary UI files
-The classic and minimalist UI do not affect each other, and they can run independently. Their files are in separate folders. Take TUIChat as an example:
 
+### Step 2: User Login
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/edcee21253a211eeabd75254005810a4.png)
+You can only use the component functions normally after login authentication. You can call the login interface and pass in the SDKAPPID and userSig obtained above for login authentication:
+``` swift
+// User login
+LoginStore.shared.login(context, SDKAPPID, userID, userSig,
+    object : CompletionHandler {
+        override fun onSuccess() {
+              // Login successful, can navigate to chat or conversation page
+        }
+        override fun onFailure(code: Int, desc: String) {
+              // Login failed, can show error dialog
+        }
+    })
+```
 
+> **Note:**
+> 
 
-   The `classicui` folder stores the classic version UI files, while the `minimalistui` folder stores the minimalist version UI files. If you are to integrate the minimalist UI, just delete the classicui folder, Activity and Service in the AndroidManifest.xml file.
-   
+> In a formal production environment, it is recommended to generate UserSig on your server side. When UserSig is needed, your App should send a request to the business server to get dynamic UserSig for authentication. For details, see [Server-side UserSig Generation](https://console.trtc.io/usersig).
+> 
 
-   > **Note：**
-   > 
 
-   > The Classic and Minimalist UI cannot be mixed. When integrating multiple components, you must choose classic UI or minimalist UI at the same time. For instance, the Classic TUIChat component must be used with the Classic versions of the TUIConversation, TUIContact, and TUIGroup. Similarly, the Minimalist version of the TUIChat component must be paired with the Minimalist versions of the TUIConversation, TUIContact, and TUIGroup.
-   > 
+### Step 3: Build Conversation List Interface
+
+You can build a conversation list page based on the ConversationList component in TUIKit Compose. The built-in functions of ConversationList are:
+- Display user's conversation list, including single chat and group chat conversations
 
+- Support user operations on individual conversations: pin, delete, clear conversation messages, etc.
 
-## Build Basic Interfaces
 
-After integrating TUIKit, if you want to continue building basic interfaces for chat, conversation list, etc., please refer to the document: [Build Chat](https://www.tencentcloud.com/document/product/1047/61214), [Build Conversation List.](https://www.tencentcloud.com/document/product/1047/61216)
+   You can integrate ConversationList directly into existing App pages, or build a complete new conversation list page. One assembled UI effect is shown in the figure below:
 
-## FAQs
-- **How to handle error "Manifest merger failed : Attribute application@allowBackup value=(true) from AndroidManifest.xml"?**
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/29853c55b56711f0a5e052540099c741.png)
 
 
-   In the Chat SDK, the value of `allowBackup` is `false` by default, indicating that the backup and restore feature of the app is disabled.
-You can delete the `allowBackup` property from the `AndroidManifest.xml` file to disable the backup and restore feature. You can also add `tools:replace="android:allowBackup"` to the `application` node of the `AndroidManifest.xml` file to overwrite the Chat SDK configuration with your own configuration. 
+   To encapsulate ConversationList as a conversation list page, you can refer to the implementation in the `chat/uikit/src/main/java/io/trtc/tuikit/chat/pages/ConversationsPage.kt` file. `ConversationsPage` mainly does the following:
 
+1. Added headerView above ConversationList.
 
-   For example:
+2. Pass click conversation list cell events.
 
-   ``` css
-   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-       xmlns:tools="http://schemas.android.com/tools"
-       package="com.tencent.qcloud.tuikit.myapplication">
+
+   The core sample code is shown below:
+
+   ``` swift
+   @Composable
+   fun ConversationsPage(
+       onConversationClick: (ConversationInfo) -> Unit = {},
+       editContent: @Composable () -> Unit = {},
+   ) {
+       val colors = LocalTheme.current.colors
+       Column(
+           modifier = Modifier
+               .fillMaxSize()
+               .background(Colors.Transparent)
+       ) {
    
-       <application
-           android:allowBackup="true"
-           android:name=".MApplication"
-           android:icon="@mipmap/ic_launcher"
-           android:label="@string/app_name"
-           android:roundIcon="@mipmap/ic_launcher_round"
-           android:supportsRtl="true"
-           android:theme="@style/Theme.MyApplication"
-           tools:replace="android:allowBackup">
-           <activity android:name=".MainActivity">
-               <intent-filter>
-                   <action android:name="android.intent.action.MAIN" />
-                   <category android:name="android.intent.category.LAUNCHER" />
-               </intent-filter>
-           </activity>
-       </application>
+           PageHeader(stringResource(R.string.chat_uikit_chat)) {
+               editContent()
+           }
    
-   </manifest>
+           Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+               ConversationList(modifier = Modifier.navigationBarsPadding(), onConversationClick = onConversationClick)
+           }
+       }
+   }
    ```
-- **How to handle error "NDK at /Users/***/Library/Android/sdk/ndk-bundle did not have a source.properties file"?**
 
+### Step 4: Build Chat Interface
 
-   You only need to add you NDK path to the `local.properties` file. For example: `ndk.dir=/Users/***/Library/Android/sdk/ndk/16.1.4479499`
+You can build a chat page based on the MessageList and MessageInput components in TUIKit Compose.
 
-- **How to handle error "Cannot fit requested classes in a single dex file"?**
+The built-in functions of MessageList are:
+- Display single chat or group chat message lists.
 
+- Support operations on individual messages: view large images of image messages, play video or voice messages, copy text messages, recall messages, delete messages, etc.
 
-   The possible cause is that your API level is lower than expected. You need to enable `MultiDex` support in the `build.gradle` file in App and add `multiDexEnabled true` and the corresponding dependencies:
 
-   ``` groovy
-   android {
-       defaultConfig {
-           ...
-           minSdkVersion 19
-           targetSdkVersion 30
-           multiDexEnabled true
-       }
+   The built-in functions of MessageInput are:
+
+- Support users to compose and send various types of messages: text, emoji, images, voice, video, files, etc.
+
+
+   You can integrate MessageList and MessageInput directly into existing App pages, or build a complete new chat page. One assembled UI effect is shown in the figure below:
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/4f5f8481b56711f0a6c652540044a08e.png)
+
+
+   To assemble MessageList and MessageInput into a chat page, you can refer to the implementation in the `chat/uikit/src/main/java/io/trtc/tuikit/chat/pages/ChatPage.kt` file. `ChatPage` mainly does the following:
+
+1. Added headerView at the top to display the conversation name.
+
+2. Vertically concatenated MessageList and MessageInput according to mobile user habits.
+
+
+   The core sample code is shown below:
+
+   ``` swift
+   @Composable
+   fun ChatPage(
+       conversationID: String,
+       locateMessage: MessageInfo? = null,
+       onUserClick: (String) -> Unit,
+       onChatHeaderClick: (String) -> Unit,
+       onBackClick: () -> Unit,
+   ) {
        ...
-   }
-   dependencies {
-       implementation "androidx.multidex:multidex:2.0.1"
+   
+       val avatarUrl = conversationState.value?.avatarURL
+       val displayName = conversationState.value?.title
+       val colors = LocalTheme.current.colors
+       Scaffold(
+           modifier = Modifier
+               .background(color = colors.bgColorOperate)
+               .fillMaxSize()
+               .wrapContentHeight(), topBar = {
+               Box(
+                   modifier = Modifier
+                       .background(color = colors.bgColorOperate)
+                       .fillMaxWidth()
+                       .statusBarsPadding()
+               ) {
+                   ChatHeader(
+                       avatarUrl = avatarUrl,
+                       name = displayName ?: "",
+                       onBackClick = onBackClick,
+                       onAvatarClick = {
+                           onChatHeaderClick(conversationID)
+                       }
+                   )
+               }
+           },
+           bottomBar = {
+               Box(
+                   modifier = Modifier
+                       .fillMaxWidth()
+                       .background(color = colors.bgColorOperate)
+               ) {
+                   MessageInput(modifier = Modifier.navigationBarsPadding(), conversationID = conversationID)
+               }
+   
+           }) { padding ->
+           Box(
+               modifier = Modifier
+                   .padding(padding)
+           ) {
+               MessageList(conversationID = conversationID, locateMessage = locateMessage) {
+                   onUserClick(it)
+               }
+           }
+       }
    }
    ```
 
-   In addition, add the following code to the Application file:
+### Step 5: Build Contact Interface
 
-   ``` java
-   public class MyApplication extends SomeOtherApplication {
-       @Override
-       protected void attachBaseContext(Context base) {
-           super.attachBaseContext(base);
-           MultiDex.install(this);
+You can build a contact page based on the ContactList component in TUIKit Compose. The built-in functions of ContactList are:
+- View friend request list.
+
+- View joined group list.
+
+- Handle group invitations and applications.
+
+- Manage blacklist.
+
+- View friends.
+
+
+   You can integrate ContactList directly into existing Apps, or build a complete new contact list page. One assembled UI effect is shown in the figure below:
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/6810fe9db56711f09a6b525400454e06.png)
+
+
+   To encapsulate ContactList as a contact list page, you can refer to the implementation in the `chat/uikit/src/main/java/io/trtc/tuikit/chat/pages/ContactsPage.kt` file. `ContactsPage` mainly does the following:
+
+1. Added headerView above ContactList.
+
+2. Pass click contact list cell events.
+
+
+   The core sample code is shown below:
+
+   ``` swift
+   @Composable
+   fun ContactsPage(
+       onContactClick: (ContactInfo) -> Unit = {},
+       onGroupClick: (ContactInfo) -> Unit = {},
+       editContent: @Composable () -> Unit = {},
+   ) {
+   
+       val colors = LocalTheme.current.colors
+       Column(
+           modifier = Modifier
+               .fillMaxSize()
+               .background(Colors.Transparent)
+       ) {
+           PageHeader(stringResource(R.string.chat_uikit_contacts)) {
+               editContent()
+           }
+   
+           Box(
+               modifier = Modifier
+                   .fillMaxSize()
+                   .navigationBarsPadding(), contentAlignment = Alignment.Center
+           ) {
+               ContactList(onGroupClick = onGroupClick, onContactClick = onContactClick)
+           }
        }
    }
    ```
-- **How to handle error "Plugin with id 'kotlin-android' not found."?**
 
+### Step 6: Improve Navigation Logic Between Interfaces
 
-   Because TUIChat uses Kotlin code, you need to add the Kotlin build plug-in. For details, see [Step 5](https://write.woa.com/document/108053209726623744) above.
+ConversationsPage, ChatPage, and ContactsPage expose some user click events. You can customize events to implement interactions between pages:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Page</td>
 
-- **Why the App function of the Debug version is normal and the App function of the Release version is abnormal？**
+<td rowspan="1" colSpan="1" >Callback</td>
 
+<td rowspan="1" colSpan="1" >Suggested Navigation Logic</td>
+</tr>
 
-   This issue is very likely caused by ProGuard. Please try to avoid ProGuarding TUIKit. You can add the following rule:                 
+<tr>
+<td rowspan="1" colSpan="1" >**ConversationsPage**</td>
 
-   ``` typescript
-   # Avoid deleting code logic
-   -dontshrink
-   -dontoptimize
-   # Avoid aliasing TUIKit
-   -keep class com.tencent.qcloud.** { *; }
-   ```
+<td rowspan="1" colSpan="1" >`onConversationClick: (ConversationInfo) -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >Triggered when clicking a conversation in the conversation list, suggest navigating to chat page (ChatPage).</td>
+</tr>
+
+<tr>
+<td rowspan="2" colSpan="1" >**ContactsPage**</td>
+
+<td rowspan="1" colSpan="1" >`onContactClick: (ContactInfo) -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >Triggered when clicking a contact cell, suggest navigating to user info page (C2CChatSetting).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`onGroupClick: (ContactInfo) -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >Triggered when clicking a group cell, suggest navigating to group chat page (ChatPage).</td>
+</tr>
+
+<tr>
+<td rowspan="3" colSpan="1" >**ChatPage**</td>
+
+<td rowspan="1" colSpan="1" >`onUserClick: (String) -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >Triggered when clicking user avatar or nickname in messages, suggest navigating to user info page (C2CChatSetting).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`onChatHeaderClick: (String) -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >Triggered when clicking avatar in navigation bar, suggest navigating to user info page (C2CChatSetting) or group chat info page (GroupChatSetting)</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`onBackClick: () -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >Triggered when clicking back button, suggest returning to previous page.</td>
+</tr>
+</table>
+
+
+**chat/demo/app/src/main/java/io/trtc/tuikit/chat/MainActivity.kt** and **chat/demo/app/src/main/java/io/trtc/tuikit/chat/chat/ChatActivity.kt** serve as the glue layer for the above Pages, implementing callback events for each Page. The core sample code is as follows:
+``` java
+// chat/demo/app/src/main/java/io/trtc/tuikit/chat/MainActivity.kt
+
+// Click conversation list cell to navigate
+ConversationsPage(onConversationClick = {
+    activity?.startActivity(
+        Intent(activity, ChatActivity::class.java).apply {
+            putExtra("conversationID", it.conversationID)
+        }
+    )
+})
 
-## Contact Us
+// Click contact page to navigate
+ContactsPage(onGroupClick = {
+    ChatSettingActivity.start(context, "", it.contactID, true)
+}, onContactClick = {
+    ChatSettingActivity.start(context, it.contactID, "", true)
+})
+```
+``` java
+// chat/demo/app/src/main/java/io/trtc/tuikit/chat/chat/ChatActivity.kt
 
-If you have any questions about this article, feel free to join the [Telegram Technical Group](https://t.me/+EPk6TMZEZMM5OGY1), where you will receive reliable technical support.
+// Click chat page to navigate
+ChatPage(
+   conversationID = conversationID,
+   locateMessage = message,
+   onUserClick = {
+       handleChatSettingNavigation(it)
+   }, onChatHeaderClick = {
+       val userID = getUserID(conversationID)
+       val groupID = getGroupID(conversationID)
+       handleChatSettingNavigation(userID, groupID)
+   }, onBackClick = { finish() })
+```
 
+You can refer to the above callback descriptions and reference code to implement interaction logic between Pages.