@tencentcloud/sdk-mcp 1.3.8 → 1.3.9

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

@@ -1,612 +1,594 @@
-TUIKit 从 5.7.1435 版本开始支持模块化集成，您可以根据自己的需求集成所需模块。
-TUIKit 从 6.9.3557 版本开始新增了全新的简约版 UI，之前的 UI 依旧保留，我们称之为经典版 UI，您可以根据需求自由选择经典版或简约版 UI。
+TUIKit Compose 是基于腾讯云 IM SDK 的一套 Jetpack Compose 组件库，提供了聊天、会话列表、联系人管理等即时通信功能的完整解决方案。本文介绍如何手动集成该组件并实现核心功能。
 
-如果您还不了解各个界面库的功能，可以查阅文档 [TUIKit 界面库介绍](https://cloud.tencent.com/document/product/269/37190)。
+## 关键概念
 
-下文将介绍如何集成 TUIKit 组件。 
+TUIKit Compose 提供了一套完整的即时通信 UI 组件，向下依赖 AtomicXCore 数据层，向上可构建各种功能性 Page。
+- Page 层：基于 TUIKit Compose 组件封装的完整功能页面：ChatPage、ContactsPage、ConversationsPage，您可以直接使用。
 
-> **说明：**
-> 
+- TUIKit Compose（UI 组件层）：基于 AtomicXCore 构建的 Jetpack Compose 组件，您可将其嵌套到自己已有的 App 页面中。
 
-> 本文主要介绍如何将 TUIKit 集成到您的 App 中。如果想直接快速构建出一个 IM 应用，可以下载 [TUIKit 源码](https://github.com/TencentCloud/TIMSDK/tree/master/Android) 快速跑通 Demo 体验。建议您准备两台设备来体验 IM 的相关功能。
-> 
+- AtomicXCore（数据层）：提供数据管理和业务逻辑，包含各种 Store 和 Manager。
 
 
-## 开发环境要求
-- Android Studio-Giraffe 
+## 前提条件
+- Android Studio Ladybug | 2024.2.1 及以上版本
 
-- Gradle-7.2
+- Android 5.0 及以上系统版本
 
-- Android Gradle Plugin Version-7.0.0
+- Gradle 8.9 及以上版本
 
-- Java 11
+- Android Gradle Plugin 8.6 及以上版本
 
-- kotlin-gradle-plugin-1.5.31
+- JDK 17 及以上版本
 
+- Kotlin 1.9.0 及以上版本
 
-## module 源码集成
-1. 从 GitHub 下载 [TUIKit 源码](https://github.com/TencentCloud/TIMSDK/tree/master/Android)。使 TUIKit 文件夹跟自己的工程文件夹同级，例如：
+- 一个有效的腾讯云账号及 Chat 应用。可参考 [开通服务](https://write.woa.com/document/107052220771086336) 从控制台获取以下信息：
 
-<img src="https://qcloudimg.tencent-cloud.cn/raw/00bc0470857b850436663d9bf2ef9164.png" width="500" /> 
+  - SDKAppID：App 在控制台获取的 Chat 应用的 ID，为应用的唯一标识
 
-2. 根据实际业务需求在 settings.gradle 中添加对应的 TUI 组件。TUI 组件之间相互独立，添加或删除均不影响工程编译。
+  - SDKSecretKey：应用的密钥
+      
 
-   ``` typescript
-   // 引入上层应用模块
-   include ':app'
-   
-   // 引入内部组件通信模块 (必要模块)
-   include ':tuicore'
-   project(':tuicore').projectDir = new File(settingsDir, '../TUIKit/TUICore/tuicore')
-   
-   // 引入 IM 组件公共模块（必要模块）
-   include ':timcommon'
-   project(':timcommon').projectDir = new File(settingsDir, '../TUIKit/TIMCommon/timcommon')
-   
-   // 引入聊天功能模块 (基础功能模块)
-   include ':tuichat'
-   project(':tuichat').projectDir = new File(settingsDir, '../TUIKit/TUIChat/tuichat')
-   
-   // 引入关系链功能模块 (基础功能模块)
-   include ':tuicontact'
-   project(':tuicontact').projectDir = new File(settingsDir, '../TUIKit/TUIContact/tuicontact')
-   
-   // 引入会话功能模块 (基础功能模块)
-   include ':tuiconversation'
-   project(':tuiconversation').projectDir = new File(settingsDir, '../TUIKit/TUIConversation/tuiconversation')
-   
-   // 引入搜索功能模块（需要购买旗舰版或企业版套餐）
-   include ':tuisearch'
-   project(':tuisearch').projectDir = new File(settingsDir, '../TUIKit/TUISearch/tuisearch')
-   
-   // 引入社群话题功能模块（需要购买旗舰版或企业版套餐）
-   include ':tuicommunity'
-   project(':tuicommunity').projectDir = new File(settingsDir, '../TUIKit/TUICommunity/tuicommunity')
-   
-   // 引入音视频通话功能模块
-   include ':tuicallkit-kt'
-   project(':tuicallkit-kt').projectDir = new File(settingsDir, '../TUIKit/TUICallKit/tuicallkit-kt')
-   
-   // 引入视频会议模块
-   include ':tuiroomkit'
-   project(':tuiroomkit').projectDir = new File(settingsDir, '../TUIKit/TUIRoomKit/tuiroomkit')
-   
-   // 引入语音转文字插件，从 7.5 版本开始支持
-   include ':tuivoicetotextplugin'
-   project(':tuivoicetotextplugin').projectDir = new File(settingsDir, '../TUIKit/TUIVoiceToTextPlugin/tuivoicetotextplugin')
-   
-   // 引入聊天消息翻译插件，从 7.2 版本开始支持（需单独购买翻译插件）
-   include ':tuitranslationplugin'
-   project(':tuitranslationplugin').projectDir = new File(settingsDir, '../TUIKit/TUITranslationPlugin/tuitranslationplugin')
-   
-   // 引入表情回应插件，从 7.8 版本开始支持（需要购买旗舰版或企业版套餐）
-   include ':tuiemojiplugin'
-   project(':tuiemojiplugin').projectDir = new File(settingsDir, '../TUIKit/TUIEmojiPlugin/tuiemojiplugin')
-   ```
-3. 在 App 的 build.gradle 中添加：
-
-   ``` typescript
-   dependencies {
-    api project(':tuiconversation')
-    api project(':tuicontact')
-    api project(':tuichat')
-    api project(':tuisearch')
-    api project(':tuicommunity')
-    api project(':tuicallkit-kt') 
-    api project(':tuiroomkit') 
-    // 集成语音转文字插件，从 7.5 版本开始支持
-    api project(':tuivoicetotextplugin') 
-    // 集成翻译插件，从 7.2 版本开始支持（需单独购买翻译插件）
-    api project(':tuitranslationplugin')
-    // 集成表情回应插件，从 7.8 版本开始支持（需要购买旗舰版或企业版套餐）
-    api project(':tuiemojiplugin')
-    // 集成群接龙插件，从 7.1 版本开始支持
-    api "com.tencent.imsdk:tuigroupnote-plugin:8.4.6667"
-    // 集成群投票插件，从 7.1 版本开始支持
-    api "com.tencent.imsdk:tuipoll-plugin:8.4.6667"
-    // 集成会话分组插件，从 7.3 版本开始支持
-    api "com.tencent.imsdk:tuiconversationgroup-plugin:8.4.6667"
-    // 集成会话标记插件，从 7.3 版本开始支持
-    api "com.tencent.imsdk:tuiconversationmark-plugin:8.4.6667"
-    // 集成消息推送插件，从 7.6 版本开始支持
-    api 'com.tencent.timpush:timpush:8.4.6667'
-    // 按需集成对应厂商推送包
-    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. 在 gradle.properties 文件中加入下行，表示自动转换三方库以兼容 AndroidX：
+      > **说明：**
+      > 
+>     - 本项目目前仅支持手动集成，暂不支持通过 Maven 等包管理器集成。
+>     - 为确保构建环境稳定，请严格遵循官方兼容性要求进行配置：
+>     - Gradle、Android Gradle Plugin、JDK 与 Android Studio 的兼容性，请参阅 Android 官方文档：[版本说明](https://developer.android.com/build/releases/gradle-plugin#updating-gradle)。
+>     - Kotlin、Android Gradle Plugin 与 Gradle 的版本对应关系，请参阅 Kotlin 官方文档：[Kotlin-Gradle 插件兼容性](https://kotlinlang.org/docs/gradle-configure-project.html#apply-the-plugin)。
 
-   ``` properties
-   android.enableJetifier=true
-   ```
-5. 
+      > 我们建议您根据上述指南，选择与项目要求完全匹配的版本组合。
+      > 
 
-添加 maven 仓库 和 Kotlin 支持，在 root 工程的 build.gradle 文件（与 settings.gradle 同级）中添加：
 
-   ``` java
-   buildscript {
-    repositories {
-        mavenCentral()
-        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
-    }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:7.0.0'
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
-    }
-   }
+## 集成并引入组件
+
+### 下载源码
+1. 从 GitHub 下载 [TUIKit Compose](https://github.com/Tencent-RTC/TUIKit_android_compose) 源码：
+
+   ``` bash
+   git clone https://github.com/Tencent-RTC/TUIKit_Android_Compose.git
    ```
 
-       如果您使用 Gradle 8.x，则需要添加以下代码。
+   项目目录结构说明：
+
+   ``` bash
+   atomic-x/
+   ├── src/main/
+   │   ├── java/io/trtc/tuikit/atomicx/     # UI 组件源码（必需集成）
+   │       ├── messagelist/      # 消息列表组件
+   │       ├── messageinput/     # 消息输入组件
+   │       ├── conversationlist/ # 会话列表组件
+   │       ├── contactlist/      # 联系人列表组件
+   │       ├── basecomponent/    # 基础组件
+   │       └── ...               # 其他 UI 组件
+   │   # 资源文件（必需集成）
+   │   ├── res/                    # 公共资源
+   │   ├── res-message-list/       # 消息列表组件资源
+   │   ├── res-message-input/      # 消息输入组件资源
+   │   ├── res-conversation-list/  # 会话列表组件资源
+   │   └── ...                     # 其他组件资源
+   chat/
+   ├── uikit/src/main/java/io/trtc/tuikit/chat/pages    # Page 组件（参考实现）
+   │   ├── ChatPage.kt
+   │   ├── ContactsPage.kt
+   │   └── ConversationsPage.kt
+   └── demo/                 # 示例应用（可选参考）
+   ```
 
-   ``` 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"
-    }
-   }
-   ```   
+### 集成组件
+1. 将组件目录完整复制到您的 Android 项目中，如下图所示，其中 ComposeDemo 是示例项目，TUIKit_Android_Compose 是从 GitHub 上下载的组件源码：
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/b784e12db56a11f0b0cf525400e889b2.png)
+
+2. 在您的 settings.gradle.kts/settings.gradle 文件中添加 TUIKit Compose 组件：
+   
 
    > **说明：**
    > 
->   - Kotlin 、Gradle 和 AGP 的版本对应关系可以 [在此查看](https://kotlinlang.org/docs/gradle-configure-project.html#apply-the-plugin)。
->   - 为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前，请您替换为自己设计或拥有版权的其他表情包。请注意，下图所示的**默认小黄脸表情包版权属于腾讯云**。您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
 
-   > ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027937867/1411eabc391911efbec9525400a9236a.png)
+   > TUIKit_Android_Compose 可以放在任何位置，只要在 settings.gradle 中正确设置相对路径即可。
    > 
 
-6. 同步工程，编译运行。工程结构预期效果如图所示：
-
-<img src="https://qcloudimg.tencent-cloud.cn/raw/ce88f3a64812d6d40a26db6189be25b2.png" width="500" /> 
 
-7. 裁剪不需要的 UI 文件（可选）
-`经典版`和`简约版` UI 互不影响，可独立运行。`经典版`和`简约版`的 UI 文件都在各 TUI 组件中，放在不同的文件夹里，以 `TUIChat` 组件为例：
+   
 
-<img src="https://qcloudimg.tencent-cloud.cn/raw/179a15bb72b24a09cf7440c50e5c3442.png" width="400" /> 
 
+【Kotlin DSL (推荐)】
+``` java
+// settings.gradle.kts
+include(":atomicx")
+project(":atomicx").projectDir = file("../TUIKit_Android_Compose/atomic-x")
+```
 
-   classicui 文件夹中存放的是`经典版` UI 文件，minimalistui 文件夹中存放的是`简约版` UI 文件, 如果您要集成简约版 UI，可直接删除 classicui 文件夹，同时删除 AndroidManifest.xml 文件中经典版 UI 对应的 Activity 和 Service 。
-   
 
-   > **说明：**
-   > 
+【Groovy DSL】
+``` java
+// settings.gradle
+include ':atomicx'
+project(':atomicx').projectDir = new File(settingsDir, '../TUIKit_Android_Compose/atomic-x')
+```
 
-   >  经典版和简约版 UI 不能混用，集成多个组件时，您必须同时选择经典版 UI 或者简约版 UI。
-   > 
+3. 在 app 模块的 build.gradle.kts/build.gradle 中添加下列依赖：
 
 
-## 快速搭建
+   
 
-常用的聊天软件都是由会话列表、聊天窗口、好友列表、音视频通话等几个基本的界面组成，参考下面步骤，您仅需几行代码即可在项目中快速搭建这些 UI 界面。
 
-### 步骤1：组件登录
+【Kotlin DSL (推荐)】
 ``` java
-// 在用户 UI 点击登录的时候调用
-TUILogin.login(context, sdkAppID, userID, userSig, new TUICallback() {
-    @Override
-    public void onError(final int code, final String desc) {
-    }
-
-    @Override
-    public void onSuccess() {
-    }
-});
+// app/build.gradle.kts
+dependencies {
+    implementation(project(":atomicx"))
+}
 ```
 
-> **注意**
-> 
 
->  context 必须传 Application 对象，否则部分图片无法加载。
-> 
+【Groovy DSL】
+``` java
+// app/build.gradle
+dependencies {
+    api project(':atomicx')
+}
+```
+   
 
+   > **注意：**
+   > 
+>   - 使用本地集成方案时，如需升级时需要从 GitHub 获取最新的组件代码，覆盖您本地项目的 TUIKit Compose 目录。
+>   - 当私有化修改和远端有冲突时，需要手动合并，处理冲突。
 
-### 步骤2：创建 viewPager
-1. 在 activity_main.xml 中添加界面布局：
 
-   ``` xml
-   <?xml version="1.0" encoding="utf-8"?>
-   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical">
-   
-    <androidx.viewpager2.widget.ViewPager2
-    android:id="@+id/view_pager"
-    android:layout_width="match_parent"
-    android:layout_height="0dp"
-    android:layout_weight = "1"/>
-   </LinearLayout>
-   ```
-2. 创建 FragmentAdapter.java 用来配合 ViewPager2 展示会话和联系人界面。
+### 配置项目
+1. 在 app 目录下找到 AndroidManifest.xml 文件，在 `application` 节点中添加 `tools:replace="android:allowBackup"`，覆盖组件内的设置，使用自己的设置。
 
    ``` java
-   import androidx.annotation.NonNull;
-   import androidx.fragment.app.Fragment;
-   import androidx.fragment.app.FragmentActivity;
-   import androidx.fragment.app.FragmentManager;
-   import androidx.lifecycle.Lifecycle;
-   import androidx.viewpager2.adapter.FragmentStateAdapter;
-   
-   
-   import java.util.List;
-   
-   public class FragmentAdapter extends FragmentStateAdapter {
-    private static final String TAG = FragmentAdapter.class.getSimpleName();
-   
-    private List<Fragment> fragmentList;
-   
-    public FragmentAdapter(@NonNull FragmentActivity fragmentActivity) {
-        super(fragmentActivity);
-    }
+     // 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. 配置依赖项。
+
+
+   在您的项目工程的 gradle/libs.versions.toml 文件中添加如下依赖项：
+
+   ``` 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"
    
-    public FragmentAdapter(@NonNull Fragment fragment) {
-        super(fragment);
-    }
+   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"
    
-    public FragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
-        super(fragmentManager, lifecycle);
-    }
+   [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" }
    
-    public void setFragmentList(List<Fragment> fragmentList) {
-        this.fragmentList = fragmentList;
-    }
+   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" }
    
-    @NonNull
-    @Override
-    public Fragment createFragment(int position) {
-        if (fragmentList == null || fragmentList.size() <= position) {
-            return new Fragment();
-        }
-        return fragmentList.get(position);
-    }
+   [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" }
    
-    @Override
-    public int getItemCount() {
-        return fragmentList == null ? 0 : fragmentList.size();
-    }
-   }
+   kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
    ```
+3. 开启 Compose 支持。
 
-### 步骤3：构建核心 Fragment
 
-会话列表 `TUIConversationFragment` 以及联系人列表 `TUIContactFragment` 界面数据的获取、同步、展示以及交互均已在组件内部封装，UI 的使用与 Android 的普通 Fragment 一样方便。
+   在 app 模块的 build.gradle.kts/build.gradle 中添加下列配置：
 
-在 MainActivity.java 的 onCreate 方法中添加以下代码：
 
+   
 
 
-【经典版】
+【Kotlin DSL (推荐)】
 ``` java
-List<Fragment> fragments = new ArrayList<>();
-// 添加 tuiconversation 组件提供的经典版会话界面
-fragments.add(new TUIConversationFragment());
-
-// 添加 tuicontact 组件提供的经典版联系人界面
-fragments.add(new TUIContactFragment());
-
-ViewPager2 mainViewPager = findViewById(R.id.view_pager);
-FragmentAdapter fragmentAdapter = new FragmentAdapter(this);
-fragmentAdapter.setFragmentList(fragments);
-mainViewPager.setOffscreenPageLimit(2);
-mainViewPager.setAdapter(fragmentAdapter);
-mainViewPager.setCurrentItem(0, false);
+// app/build.gradle.kts
+plugins {
+    // 添加 Compose 插件
+    alias(libs.plugins.kotlin.compose)
+}
+android {
+    // 开启 Compose 
+    buildFeatures {
+        compose = true
+    }
+}
 ```
 
-【简约版】
+
+【Groovy DSL】
 ``` java
-List<Fragment> fragments = new ArrayList<>();
-// 添加 tuiconversation 组件提供的简约版会话界面
-fragments.add(new TUIConversationMinimalistFragment());
-
-// 添加 tuicontact 组件提供的简约版联系人界面
-fragments.add(new TUIContactMinimalistFragment());
-
-ViewPager2 mainViewPager = findViewById(R.id.view_pager);
-FragmentAdapter fragmentAdapter = new FragmentAdapter(this);
-fragmentAdapter.setFragmentList(fragments);
-mainViewPager.setOffscreenPageLimit(2);
-mainViewPager.setAdapter(fragmentAdapter);
-mainViewPager.setCurrentItem(0, false);
+// app/build.gradle
+plugins {
+    // 添加 Compose 插件
+    id libs.plugins.kotlin.compose.get().pluginId
+}
+android {
+    // 开启 Compose 
+    buildFeatures {
+        compose true
+    }
+}
 ```
 
-### 步骤4：构建聊天窗口
+4. 配置混淆规则。
+
 
-启动聊天界面时，传入当前聊天界面对应的聊天信息即可。
+   在您的 app/proguard-rules.pro 文件中添加以下混淆规则：
 
+   ``` java
+   -keep class com.tencent.** { *; }
+   ```
+5. Android Studio 中点击 **File > Sync Project with Gradle Files** 集成组件。
 
 
-【经典版】
-``` java
-Bundle param = new Bundle();
-param.putInt(TUIConstants.TUIChat.CHAT_TYPE, isGroup ? V2TIMConversation.V2TIM_GROUP : V2TIMConversation.V2TIM_C2C);
-// 如果是 C2C 聊天，chatID 是对方的 UserID，如果是 Group 聊天，chatID 是 GroupID 
-param.putString(TUIConstants.TUIChat.CHAT_ID, chatID);
-if (isGroup) {
-    TUICore.startActivity("TUIGroupChatActivity", param);
-} else {
-    TUICore.startActivity("TUIC2CChatActivity", param);
-}
-```
+## 接入步骤
 
-【简约版】
-``` java
-Bundle param = new Bundle();
-param.putInt(TUIConstants.TUIChat.CHAT_TYPE, isGroup ? V2TIMConversation.V2TIM_GROUP : V2TIMConversation.V2TIM_C2C);
-// 如果是 C2C 聊天，chatID 是对方的 UserID，如果是 Group 聊天，chatID 是 GroupID 
-param.putString(TUIConstants.TUIChat.CHAT_ID, chatID);
-if (isGroup) {
-    TUICore.startActivity("TUIGroupChatMinimalistActivity", param);
-} else {
-    TUICore.startActivity("TUIC2CChatMinimalistActivity", param);
-}
-```
+### 步骤1：配置用户鉴权
 
-也可以创建聊天界面Fragment，嵌入到自己的 Activity 中：
+在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im/tool-usersig) 根据 UserID 获取 UserSig 用于后续登录时的用户鉴权。
 
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/ee78464abee111f09a6b525400454e06.png)
 
 
-【经典版】
-``` java
-Fragment fragment;
-// 如果是 C2C 聊天，chatID 是对方的 UserID，如果是 Group 聊天，chatID 是 GroupID 
-if (isGroup) {
-    GroupChatInfo groupChatInfo = new GroupChatInfo();
-    groupChatInfo.setId(chatID);
-    TUIGroupChatFragment tuiGroupChatFragment = new TUIGroupChatFragment();
-    tuiGroupChatFragment.setChatInfo(groupChatInfo);
-    fragment = tuiGroupChatFragment;
-} else {
-    C2CChatInfo c2cChatInfo = new C2CChatInfo();
-    c2cChatInfo.setId(chatID);
-    TUIC2CChatFragment tuic2CChatFragment = new TUIC2CChatFragment();
-    tuic2CChatFragment.setChatInfo(c2cChatInfo);
-    fragment = tuic2CChatFragment;
-}
-getSupportFragmentManager().beginTransaction()
-        .add(R.id.chat_fragment_container, fragment).commitAllowingStateLoss();
-```
+### 步骤2：用户登录
 
-【简约版】
-``` java
-Fragment fragment;
-// 如果是 C2C 聊天，chatID 是对方的 UserID，如果是 Group 聊天，chatID 是 GroupID 
-if (isGroup) {
-    GroupChatInfo groupChatInfo = new GroupChatInfo();
-    groupChatInfo.setId(chatID);
-    TUIGroupChatMinimalistFragment tuiGroupChatFragment = new TUIGroupChatMinimalistFragment();
-    tuiGroupChatFragment.setChatInfo(groupChatInfo);
-    fragment = tuiGroupChatFragment;
-} else {
-    C2CChatInfo c2cChatInfo = new C2CChatInfo();
-    c2cChatInfo.setId(chatID);
-    TUIC2CChatMinimalistFragment tuic2CChatFragment = new TUIC2CChatMinimalistFragment();
-    tuic2CChatFragment.setChatInfo(c2cChatInfo);
-    fragment = tuic2CChatFragment;
-}
-getSupportFragmentManager().beginTransaction()
-        .add(R.id.chat_fragment_container, fragment).commitAllowingStateLoss();
+登录鉴权后才能正常使用组件的功能。您可以调用 login 接口，传入上文获取的 SDKAPPID、userSig 用于登录鉴权:
+``` swift
+// 用户登录
+LoginStore.shared.login(context, SDKAPPID, userID, userSig,
+    object : CompletionHandler {
+        override fun onSuccess() {
+              // 登录成功，可跳转聊天或会话页
+        }
+        override fun onFailure(code: Int, desc: String) {
+              // 登录失败，可弹框报错
+        }
+    })
 ```
 
-### 步骤5：构建音视频通话功能
+> **注意：**
+> 
 
-TUI 组件支持在聊天界面对用户发起音视频通话，仅需要简单几步就可以快速集成：
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >视频通话</td>
+> 在正式的生产环境中，建议在您的服务端生成 UserSig，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
+> 
 
-<td rowspan="1" colSpan="1" >语音通话</td>
-</tr>
 
-<tr>
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7af1c34acc6e11edb580525400088f3a.jpg)</td>
+### 步骤3： 构建会话列表界面
+
+您可以基于 TUIKit Compose 中的 ConversationList 组件，构建一个会话列表页面。ConversationList 内建的功能是：
+- 展示用户的会话列表，包含单聊和群聊会话
+
+- 支持用户操作单个会话：置顶、删除、清空会话消息等
 
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7b15e7a9cc6e11edb580525400088f3a.png)</td>
-</tr>
-</table>
 
-1. **开通音视频服务**
+   您可以将 ConversationList 直接集成到现有的 App 页面中，也可以新构建一个完整的会话列表页，组装后的一种 UI 效果如下图所示：
 
-  1. 登录 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) ，单击目标应用卡片，进入应用的基础配置页面。
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/29853c55b56711f0a5e052540099c741.png)
 
-  2. 在开通腾讯实时音视频服务功能区，单击**免费体验**即可开通 TUICallKit 的 7 天免费试用服务。
 
-  3. 在弹出的开通实时音视频 TRTC 服务对话框中，单击确认，系统将为您在 [实时音视频控制台](https://console.cloud.tencent.com/trtc) 创建一个与当前 IM 应用相同 SDKAppID 的实时音视频应用，二者账号与鉴权可复用。
+   将 ConversationList 封装为会话列表页，可参考 `chat/uikit/src/main/java/io/trtc/tuikit/chat/pages/ConversationsPage.kt` 文件里的实现，`ConversationsPage` 主要做了以下工作：
 
-2. **集成 TUICallKit 组件**
+1. 在 ConversationList 上方添加了 headerView。
 
+2. 传递点击会话列表 cell 事件。
 
-   在 App 的 build.gradle 文件中添加对 `TUICallKit` 的依赖：
 
-   ``` groovy
-   api project(':tuicallkit-kt')
+   核心示例代码如下所示：
+
+   ``` swift
+   @Composable
+   fun ConversationsPage(
+       onConversationClick: (ConversationInfo) -> Unit = {},
+       editContent: @Composable () -> Unit = {},
+   ) {
+       val colors = LocalTheme.current.colors
+       Column(
+           modifier = Modifier
+               .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)
+           }
+       }
+   }
    ```
-3. **发起和接收视频或语音通话**
 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >消息页发起通话</td>
+### 步骤4：构建聊天界面
 
-<td rowspan="1" colSpan="1" >联系人页发起通话</td>
-</tr>
+您可以基于 TUIKit Compose 中的 MessageList、MessageInput  组件，构建一个聊天页面。
 
-<tr>
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7b31cd4dcc6e11edb580525400088f3a.png)</td>
+MessageList 内建的功能是：
+- 展示单聊或群聊消息列表。
 
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7b4ac105cc6e11edb580525400088f3a.png)</td>
-</tr>
-</table>
+- 支持对单条消息操作：查看图片消息大图、播放视频或语音消息、复制文本消息、撤回消息、删除消息等。
 
 
-   集成 TUICallKit 组件后，聊天界面和联系人资料界面默认会显示 “视频通话” 和 “语音通话” 两个按钮，当用户点击按钮时，TUIKit 会自动展示通话邀请 UI，并给对方发起通话邀请请求。
+   MessageInput 内建的功能是：
 
-  - 当用户在线并且应用在前台时收到通话邀请时，TUIKit 会自动展示通话接收 UI，用户可以选择同意或者拒绝通话。
+- 支持用户组建并发送多种类型的消息：文本、表情、图片、语音、视频、文件等。
 
-  - 当用户离线收到通话邀请时，如需唤起 App 通话，需要使用离线推送能力。离线推送的实现请参考下一步。
 
-4. **添加离线推送：**
-实现音视频通话的离线推送，请参考以下几个步骤：
+   您可以将 MessageList 和  MessageInput 直接集成到现有的 App 页面中，也可以新构建一个完整的聊天页，组装后的一种 UI 效果如下图所示：
 
-  1. 配置 App 的 [推送功能](https://cloud.tencent.com/document/product/269/100621)。
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/4f5f8481b56711f0a6c652540044a08e.png)
 
-  2. 集成 TUICallKit 组件。
 
-  3. 通过 TUICallKit 发起通话邀请的时候，默认会生成一条离线推送消息。
+   将 MessageList 和 MessageInput 组装为聊天页，可参考  `chat/uikit/src/main/java/io/trtc/tuikit/chat/pages/ChatPage.kt` 文件里的实现，`ChatPage` 主要做了以下工作：
 
-5. **附加增值能力**
-集成 TUIChat 和 TUICallkit 的组件后，在聊天界面发送语音消息时，即可**录制带 AI 降噪和自动增益的语音消息**。该功能需要购买 [音视频通话能力](https://cloud.tencent.com/document/product/1640/79968) 进阶版及以上套餐，仅 IMSDK 7.0 及以上版本支持。当套餐过期后，录制语音消息会切换到系统 API 进行录音。
-下面是使用两台华为 P10 同时录制的语音消息对比：
+1. 在最上方添加了 headerView，展示会话的名称。
 
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/gateway/portal/css/global-20209142343.css?max_age=31536000&amp;t=20191128" />
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/gateway/portal/css/global-components.css?max_age=31536000&amp;t=20180817" />
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/gateway/documentation/documentation-v4/css/pandect-20219091610.css" />
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/gateway/documentation/documentation-v4/css/import-2-markdown-20219091610.css" />
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/platform/documents/css/documents-202205161915.css" />
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/gateway/documentation/documentation-v4/css/pandect-202012171130.css" />
-<link rel="stylesheet" href="//qcloudimg.tencent-cloud.cn/static/document/qcloud-document-sdk.v0.0.17.css" />
-<link rel="stylesheet" href="//cloudcache.tencentcs.com/qcloud/main/components/document-feedback/document-feedback.944df9c907.css" />
-<style>
-* {
-  font-family: 'pingfang SC','helvetica neue',arial,'hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
-}
-</style>
- 
-<div class="markdown-text-box">
-<table style="text-align:center;vertical-align:middle;width:800px">
-  <tr>
-    <th style="text-align:center"><b>系统录制的语音消息<br /></b></th>
-    <th style="text-align:center"><b>TUICallkit 录制的带 AI 降噪和自动增益的语音消息<br /></b></th>
-  </tr>
-  <tr>
-    <td>
-      <audio id="audio" controls preload="none">
-	<source id="m4a" src="https://im.sdk.cloudcachetci.com/tools/resource/rain_system_record.m4a"></source>
-      </audio>
-    </td>
-		
-    <td>
-      <audio id="audio" controls preload="none">
-	<source id="m4a" src="https://im.sdk.cloudcachetci.com/tools/resource/rain_tuicallkit_record_with_agc_aidenoise.m4a"></source>
-      </audio>
-    </td>
-  </tr>
-</table>
+2. 按照移动端用户使用习惯，上下拼接 MessageList 和 MessageInput。
 
-</div>
 
+   核心示例代码如下所示：
 
+   ``` swift
+   @Composable
+   fun ChatPage(
+       conversationID: String,
+       locateMessage: MessageInfo? = null,
+       onUserClick: (String) -> Unit,
+       onChatHeaderClick: (String) -> Unit,
+       onBackClick: () -> Unit,
+   ) {
+       ...
+   
+       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)
+               }
+           }
+       }
+   }
+   ```
+
+### 步骤5：构建联系人界面
+
+您可以基于 TUIKit Compose 中的 ContactList 组件，构建一个联系人页面。ContactList 内建的功能是：
+- 查看好友申请列表。
+
+- 查看已加入的群列表。
+
+- 处理群组邀请和申请。
+
+- 管理黑名单列表。
+
+- 查看好友。
+
+
+   您可以将 ContactList 直接集成到现有的 App 中，也可以新构建一个完整的联系人列表页，组装后的一种 UI 效果如下图所示：
 
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027983637/6810fe9db56711f09a6b525400454e06.png)
+
+
+   将 ContactList 封装为联系人列表页，可参考 `chat/uikit/src/main/java/io/trtc/tuikit/chat/pages/ContactsPage.kt `文件里的实现，`ContactsPage` 主要做了以下工作：
+
+1. 在 ContactList 上方添加了 headerView。
+
+2. 传递点击联系人列表 cell 事件。
+
+
+   核心示例代码如下所示：
+
+   ``` 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)
+           }
+       }
+   }
+   ```
 
-   > **说明**
-   > 
+### 步骤6：完善界面间的跳转逻辑
 
-   >  更多实操教学视频请参见：[极速集成 TUIKit（Android）](https://cloud.tencent.com/edu/learning/course-3130-56399)。
-   > 
+ConversationsPage、ChatPage、ContactsPage 中暴露了一些用户点击事件，您可以自定义事件来实现页面间的交互：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Page</td>
 
+<td rowspan="1" colSpan="1" >回调</td>
 
-## 常见问题
+<td rowspan="1" colSpan="1" >建议跳转逻辑</td>
+</tr>
 
-#### 提示 "Manifest merger failed : Attribute application@allowBackup value=(true) from AndroidManifest.xml" 如何处理？
-
-IM SDK 中默认 `allowBackup` 的值为 `false` ，表示关闭应用的备份和恢复功能。
-您可以在您的 `AndroidManifest.xml` 文件中删除 `allowBackup` 属性，表示关闭备份和恢复功能；也可以在 `AndroidManifest.xml` 文件的 application 节点中添加 `tools:replace="android:allowBackup"` 表示覆盖 IM SDK 的设置，使用您自己的设置。 
-
-例如：
-``` xml
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    package="com.tencent.qcloud.tuikit.myapplication">
-
-    <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>
-
-</manifest>
-```
+<tr>
+<td rowspan="1" colSpan="1" >**ConversationsPage**</td>
 
-#### 提示 "NDK at /Users/***/Library/Android/sdk/ndk-bundle did not have a source.properties file" 如何处理？
+<td rowspan="1" colSpan="1" >`onConversationClick: (ConversationInfo) -> Unit`</td>
 
-只需要在 local.properties 文件中加入您的 NDK 路径，例如：
-`ndk.dir=/Users/***/Library/Android/sdk/ndk/16.1.4479499`
+<td rowspan="1" colSpan="1" >点击会话列表中的会话时触发，建议跳转到聊天页面（ChatPage）。</td>
+</tr>
 
-#### 提示 "Cannot fit requested classes in a single dex file" 如何处理？
+<tr>
+<td rowspan="2" colSpan="1" >**ContactsPage**</td>
 
-出现此问题可能是您的 API 级别设置比较低，需要在 App 的 build.gradle 文件中开启 `MultiDex` 支持, 添加 `multiDexEnabled true` 和对应依赖：
-``` groovy
-android {
-    defaultConfig {
-        ...
-        minSdkVersion 19
-        targetSdkVersion 30
-        multiDexEnabled true
-    }
-    ...
-}
-dependencies {
-    implementation "androidx.multidex:multidex:2.0.1"
-}
-```
+<td rowspan="1" colSpan="1" >`onContactClick: (ContactInfo) -> Unit`</td>
 
-同时，在您的 Application 文件中添加以下代码：
-``` java
-public class MyApplication extends SomeOtherApplication {
-    @Override
-    protected void attachBaseContext(Context base) {
-        super.attachBaseContext(base);
-        MultiDex.install(this);
-    }
-}
-```
+<td rowspan="1" colSpan="1" >点击联系人 cell 时触发，建议跳转用户信息页（C2CChatSetting）。</td>
+</tr>
 
-#### 提示 "Plugin with id 'kotlin-android' not found." 如何处理？
+<tr>
+<td rowspan="1" colSpan="1" >`onGroupClick: (ContactInfo) -> Unit`</td>
 
-因为 `TUIChat` 组件使用了 Kotlin 代码，所以需要添加 Kotlin 构建插件。请参考 [module 源码集成第 5 步](https://write.woa.com/document/107052221649793024)。
+<td rowspan="1" colSpan="1" >点击群组 cell 时触发，建议跳转群聊页面（ChatPage）。</td>
+</tr>
 
-#### Debug 版本的 App 功能正常，Release 版本的 App 功能出现异常 ？
+<tr>
+<td rowspan="3" colSpan="1" >**ChatPage**</td>
 
-出现此问题很大概率是混淆导致的，请尽量不要混淆 TUIKit 。可以添加如下混淆规则：
-``` typescript
-# 避免删除代码逻辑
--dontshrink
--dontoptimize
-# 避免混淆 TUIKit
--keep class com.tencent.qcloud.** { *; }
--keep class com.tencent.imsdk.** { *; }
--keep class * implements com.tencent.qcloud.tuicore.interfaces.TUIInitializer {}
-```
+<td rowspan="1" colSpan="1" >`onUserClick: (String) -> Unit`</td>
 
-#### 复制 TUIKit 代码到自己的工程的模块中，使用时发生空指针等异常问题？
+<td rowspan="1" colSpan="1" >点击消息中的用户头像或昵称时触发，建议跳转用户信息页（C2CChatSetting）。</td>
+</tr>
 
-当您将 TUIKit 的某个模块代码复制到自己工程的某个模块目录下时，除了需要迁移 TUIKit 模块的 Manifest 文件内容外，还必须在目标模块的 build.gradle 文件中添加如下必要的依赖。这一步骤是确保 TUIKit 组件能够正确初始化的关键。如果忽略这些依赖，可能会导致空指针等异常问题。
-``` typescript
-dependencies {
-    annotationProcessor 'com.google.auto.service:auto-service:1.1.1'
-}
+<tr>
+<td rowspan="1" colSpan="1" >`onChatHeaderClick: (String) -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >点击导航栏中的头像时触发，建议跳转用户信息页（C2CChatSetting）或群聊信息页（GroupChatSetting）</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`onBackClick: () -> Unit`</td>
+
+<td rowspan="1" colSpan="1" >点击返回按钮时触发，建议返回上一级页面。</td>
+</tr>
+</table>
+
+
+**chat/demo/app/src/main/java/io/trtc/tuikit/chat/MainActivity.kt **和 **chat/demo/app/src/main/java/io/trtc/tuikit/chat/chat/ChatActivity.kt** 作为上述 Page 的粘合层，实现了各个 Page 的回调事件，核心示例代码如下：
+``` java
+// chat/demo/app/src/main/java/io/trtc/tuikit/chat/MainActivity.kt
+
+// 点击会话列表 cell 跳转
+ConversationsPage(onConversationClick = {
+    activity?.startActivity(
+        Intent(activity, ChatActivity::class.java).apply {
+            putExtra("conversationID", it.conversationID)
+        }
+    )
+})
+
+// 点击联系人页面跳转
+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
+
+// 点击聊天页面跳转
+ChatPage(
+   conversationID = conversationID,
+   locateMessage = message,
+   onUserClick = {
+       handleChatSettingNavigation(it)
+   }, onChatHeaderClick = {
+       val userID = getUserID(conversationID)
+       val groupID = getGroupID(conversationID)
+       handleChatSettingNavigation(userID, groupID)
+   }, onBackClick = { finish() })
+```
+
+您可以参考上述回调说明及参考代码，实现 Page 之间交互逻辑。
+
+## 常见问题
+
+### 功能常见问题
+
+**登录失败，提示签名错误**
+
+请检查 SDKAppID 和 UserSig 是否正确，UserSig 是否已过期。可以参考上文 [配置用户鉴权](https://write.woa.com/#db72233d-96ad-4ea7-b9d1-b591996701b5) 重新生成 UserSig。
 
+## 联系我们
 
+如果您在接入或使用过程有任何疑问或者建议，欢迎 [联系我们](https://cloud.tencent.com/document/product/269/59590) 提交反馈。