@tencent-rtc/mcp 1.3.9 → 1.4.0

package/resource/doc/{chatuikit → chatkit}/android/integration.md

@@ -9,7 +9,6 @@ TUIKit Compose provides a complete set of instant messaging UI components, depen
 
 - AtomicXCore (Data Layer): Provides data management and business logic, including various Stores and Managers.
 
-
 ## Prerequisites
 - Android Studio Ladybug | 2024.2.1 and above
 
@@ -28,18 +27,16 @@ TUIKit Compose provides a complete set of instant messaging UI components, depen
   - 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
 
@@ -79,20 +76,13 @@ TUIKit Compose provides a complete set of instant messaging UI components, depen
 ### 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:
-   
 
    > **Note:**
-   > 
+   >
 
    > TUIKit_Android_Compose can be placed anywhere, as long as the relative path is correctly set in settings.gradle.
-   > 
-
-
-   
-
+   >
 
 【Kotlin DSL (Recommended)】
 ``` java
@@ -101,7 +91,6 @@ include(":atomicx")
 project(":atomicx").projectDir = file("../TUIKit_Android_Compose/atomic-x")
 ```
 
-
 【Groovy DSL】
 ``` java
 // settings.gradle
@@ -111,10 +100,6 @@ project(':atomicx').projectDir = new File(settingsDir, '../TUIKit_Android_Compos
 
 3. Add the following dependencies in the build.gradle.kts/build.gradle of the app module:
 
-
-   
-
-
 【Kotlin DSL (Recommended)】
 ``` java
 // app/build.gradle.kts
@@ -123,7 +108,6 @@ dependencies {
 }
 ```
 
-
 【Groovy DSL】
 ``` java
 // app/build.gradle
@@ -131,14 +115,12 @@ dependencies {
     api project(':atomicx')
 }
 ```
-   
 
    > **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.
 
@@ -155,7 +137,6 @@ dependencies {
    ```
 2. Configure dependencies.
 
-
    Add the following dependencies in your project's gradle/libs.versions.toml file:
 
    ``` python
@@ -172,7 +153,7 @@ dependencies {
    runner = "1.0.2"
    espressoCoreVersion = "3.0.2"
    appcompatV7 = "28.0.0"
-   
+
    tuicore = "8.6.7021"
    lifecycleRuntimeKtx = "2.8.7"
    ui = "1.8.0"
@@ -181,7 +162,7 @@ dependencies {
    activityCompose = "1.10.1"
    activity = "1.8.0"
    constraintlayout = "2.2.1"
-   
+
    [libraries]
    androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
    junit = { group = "junit", name = "junit", version.ref = "junit" }
@@ -192,7 +173,7 @@ dependencies {
    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" }
-   
+
    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" }
@@ -206,23 +187,18 @@ dependencies {
    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" }
-   
+
    [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" }
-   
+
    kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
    ```
 3. Enable Compose support.
 
-
    Add the following configuration in the build.gradle.kts/build.gradle of the app module:
 
-
-   
-
-
 【Kotlin DSL (Recommended)】
 ``` java
 // app/build.gradle.kts
@@ -231,14 +207,13 @@ plugins {
     alias(libs.plugins.kotlin.compose)
 }
 android {
-    // Enable Compose 
+    // Enable Compose
     buildFeatures {
         compose = true
     }
 }
 ```
 
-
 【Groovy DSL】
 ``` java
 // app/build.gradle
@@ -247,7 +222,7 @@ plugins {
     id libs.plugins.kotlin.compose.get().pluginId
 }
 android {
-    // Enable Compose 
+    // Enable Compose
     buildFeatures {
         compose true
     }
@@ -256,7 +231,6 @@ android {
 
 4. Configure obfuscation rules.
 
-
    Add the following obfuscation rules to your app/proguard-rules.pro file:
 
    ``` java
@@ -264,16 +238,12 @@ android {
    ```
 5. Click **File > Sync Project with Gradle Files** in Android Studio to integrate components.
 
-
 ## Integration Steps
 
 ### 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/ee78464abee111f09a6b525400454e06.png)
-
-
 ### Step 2: User Login
 
 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:
@@ -291,11 +261,10 @@ LoginStore.shared.login(context, SDKAPPID, userID, userSig,
 ```
 
 > **Note:**
-> 
+>
 
 > 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).
-> 
-
+>
 
 ### Step 3: Build Conversation List Interface
 
@@ -304,19 +273,14 @@ You can build a conversation list page based on the ConversationList component i
 
 - Support user operations on individual conversations: pin, delete, clear conversation messages, etc.
 
-
    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:
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/29853c55b56711f0a5e052540099c741.png)
-
-
    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.
 
 2. Pass click conversation list cell events.
 
-
    The core sample code is shown below:
 
    ``` swift
@@ -331,11 +295,11 @@ You can build a conversation list page based on the ConversationList component i
                .fillMaxSize()
                .background(Colors.Transparent)
        ) {
-   
+
            PageHeader(stringResource(R.string.chat_uikit_chat)) {
                editContent()
            }
-   
+
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                ConversationList(modifier = Modifier.navigationBarsPadding(), onConversationClick = onConversationClick)
            }
@@ -352,24 +316,18 @@ The built-in functions of MessageList are:
 
 - 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 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
@@ -382,7 +340,7 @@ The built-in functions of MessageList are:
        onBackClick: () -> Unit,
    ) {
        ...
-   
+
        val avatarUrl = conversationState.value?.avatarURL
        val displayName = conversationState.value?.title
        val colors = LocalTheme.current.colors
@@ -415,7 +373,7 @@ The built-in functions of MessageList are:
                ) {
                    MessageInput(modifier = Modifier.navigationBarsPadding(), conversationID = conversationID)
                }
-   
+
            }) { padding ->
            Box(
                modifier = Modifier
@@ -442,19 +400,14 @@ You can build a contact page based on the ContactList component in TUIKit Compos
 
 - 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
@@ -464,7 +417,7 @@ You can build a contact page based on the ContactList component in TUIKit Compos
        onGroupClick: (ContactInfo) -> Unit = {},
        editContent: @Composable () -> Unit = {},
    ) {
-   
+
        val colors = LocalTheme.current.colors
        Column(
            modifier = Modifier
@@ -474,7 +427,7 @@ You can build a contact page based on the ContactList component in TUIKit Compos
            PageHeader(stringResource(R.string.chat_uikit_contacts)) {
                editContent()
            }
-   
+
            Box(
                modifier = Modifier
                    .fillMaxSize()
@@ -489,58 +442,14 @@ You can build a contact page based on the ContactList component in TUIKit Compos
 ### Step 6: Improve Navigation Logic Between Interfaces
 
 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>
-
-<td rowspan="1" colSpan="1" >Callback</td>
-
-<td rowspan="1" colSpan="1" >Suggested Navigation Logic</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**ConversationsPage**</td>
-
-<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>
-
+| Page | Callback | Suggested Navigation Logic |
+| --- | --- | --- |
+| **ConversationsPage** | `onConversationClick: (ConversationInfo) -> Unit` | Triggered when clicking a conversation in the conversation list, suggest navigating to chat page (ChatPage). |
+| **ContactsPage** | `onContactClick: (ContactInfo) -> Unit` | Triggered when clicking a contact cell, suggest navigating to user info page (C2CChatSetting). |
+| `onGroupClick: (ContactInfo) -> Unit` | Triggered when clicking a group cell, suggest navigating to group chat page (ChatPage). |  |
+| **ChatPage** | `onUserClick: (String) -> Unit` | Triggered when clicking user avatar or nickname in messages, suggest navigating to user info page (C2CChatSetting). |
+| `onChatHeaderClick: (String) -> Unit` | Triggered when clicking avatar in navigation bar, suggest navigating to user info page (C2CChatSetting) or group chat info page (GroupChatSetting) |  |
+| `onBackClick: () -> Unit` | Triggered when clicking back button, suggest returning to previous page. |  |
 
 **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
@@ -579,5 +488,3 @@ ChatPage(
 ```
 
 You can refer to the above callback descriptions and reference code to implement interaction logic between Pages.
-
-