@tencent-rtc/mcp 1.4.7 → 1.6.0

package/resource/knowledge/chat/preset/android/features/search.md

@@ -0,0 +1,64 @@
+## **Component Overview**
+
+Search component provides users with a complete set of features, including a search box, search results display, and navigation within the interface. The component supports user search, group search, and message search, and offers a comprehensive set of interactive webhook interfaces.
+
+> **Note：**
+>
+
+> Search function is available in the Pro edition or Enterprise edition. You can use this feature after purchasing the Pro edition or Enterprise edition package. For details, see [Pricing Information](https://trtc.io/document/67650).
+>
+
+| <strong>Search Entry</strong> | <strong>Search Results</strong> |
+| --- | --- |
+|  |  |
+
+## Component Integration
+
+The Search component is included in TUIKit Compose. To use the Search component, integrate TUIKit Compose into your project. For integration instructions, refer to the [TUIKit Compose documentation](https://www.tencentcloud.com/document/product/1047/77459) and complete the login process.
+
+## Component Structure
+
+`SearchScreen` is the entry point for the Search component. It only exposes the initialization method for the search component; all other logic is encapsulated within `SearchScreen`.
+| Method | Parameter | Description |
+| --- | --- | --- |
+| SearchScreen | <code>modifier: Modifier</code> | Used in Jetpack Compose to set the style, layout, behavior, and appearance of the component. |
+| <code>onBack: () -> Unit</code> | Webhook triggered when the Cancel button is clicked; optional parameter. |  |
+| <code>onContactSelect: (FriendSearchInfo) -> Unit</code> | Webhook triggered when a searched contact item is clicked; optional parameter. |  |
+| <code>onGroupSelect: (GroupSearchInfo) -> Unit</code> | Webhook triggered when a searched group item is clicked; optional parameter. |  |
+| <code>onConversationSelect: (MessageSearchResultItem) -> Unit</code> | Webhook triggered when a searched conversation item is clicked; optional parameter. |  |
+| <code>onMessageSelect: (MessageInfo) -> Unit</code> | Webhook triggered when a searched message item is clicked; optional parameter. |  |
+
+## Basic Usage
+
+The routing logic for search results in `SearchScreen` is as follows:
+- Automatic Routing: On the search results page, clicking the More button or a chat record entry will automatically trigger internal navigation handled by the component.
+
+- Custom Routing: When a user clicks a specific contact, group, conversation, or message, the component triggers the corresponding webhook (`onContactSelect`, `onGroupSelect`, `onConversationSelect`, or `onMessageSelect`). You must implement custom navigation in these webhook handlers (for example, navigating to your custom chat interface).
+
+    Example:
+
+    Initialize the `SearchScreen` component as shown below:
+
+   ``` java
+   SearchScreen(
+       modifier = Modifier.Companion
+           .fillMaxSize()
+           .statusBarsPadding()
+           .navigationBarsPadding(),
+       onBack = {
+           // Cancel button click event
+       },
+       onContactSelect = {
+           // Contact click event
+       },
+       onGroupSelect = {
+           // Group click event
+       },
+       onConversationSelect = {
+           // Conversation click event
+       },
+       onMessageSelect = {
+           // Message click event
+       }
+   )
+   ```

package/resource/knowledge/chat/preset/android/features/theme.md

@@ -0,0 +1,222 @@
+TUIKit Compose offers flexible appearance customization with support for Light, Dark, and System theme modes, along with customizable primary colors. A simple configuration enables theme switching and brand color application throughout your app.
+
+For example, in the message list, you can see how different theme modes and primary colors affect the UI:
+| <strong>Light + Default Color</strong> | <strong>Light + Orange</strong> | <strong>Dark + Default Color</strong> | <strong>Dark + Green Theme</strong> |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+## Key Features
+
+**Theme Mode**
+- Light Mode: Bright interface for daytime use.
+
+- Dark Mode: Dim interface for nighttime use.
+
+- Follow System: Automatically matches the system appearance setting.
+
+   **Primary Color Customization**
+
+- Preset Theme Colors: Includes standard options like blue, green, red, orange, and more.
+
+- Custom Theme Color: Supports any Hex color value.
+
+- Intelligent Palette Generation: Automatically creates a palette with 10 color shades.
+
+- Quick Reset: Instantly revert to the default theme color.
+
+## API Reference
+
+All theme configuration and queries are handled through concise APIs in `ThemeState`.
+
+### Set Theme Mode
+| Method | Parameter | Return Value | Description |
+| --- | --- | --- | --- |
+| <code>setThemeMode</code> | <code>ThemeMode</code> | <code>Unit</code> | Sets the display mode, automatically saves and refreshes.<br>- <code>ThemeMode.SYSTEM</code>: Follows system appearance.<br>- <code>ThemeMode.LIGHT</code>: Forces light mode.<br>- <code>ThemeMode.DARK</code>: Forces dark mode. |
+
+### Set Primary Color
+
+|Method|Parameter|Return Value|Description|
+|---------|---------|---------|---------|
+|`setPrimaryColor`|`String`|`Unit`|Sets the primary color using a Hex value (e.g., "#1C66E5").|
+|`clearPrimaryColor`|None|`Unit`|Resets the primary color to the default blue.|
+
+> **Note：**
+>
+> - When you call setThemeMode or setPrimaryColor, your settings are automatically saved to persistent storage. No manual saving is required. The configuration will be loaded automatically the next time the app starts.
+> - Changing theme settings automatically clears the cache to ensure real-time color updates. You do not need to manage the cache manually.
+> - Avoid frequent theme switching in your code (for example, do not call these APIs in a loop).
+
+### Query ThemeState Information
+
+You can check the current theme configuration using the following read-only properties:
+
+|Property|Type|Description|
+|---------|---------|---------|
+|`currentMode`|`ThemeMode`|Current theme mode.|
+|`currentPrimaryColor`|`String?`|Current primary color (Hex format).|
+|`hasCustomPrimaryColor`|`Boolean`|Indicates if a custom primary color is set.|
+|`isDarkMode`|`Boolean`|Indicates if the current mode is dark mode.|
+
+## Usage
+
+This section explains how to integrate theme and primary color customization into your app, with three approaches ranging from basic to advanced.
+
+### Option A: Configure with AppBuilder (Recommended)
+
+AppBuilder is a convenient tool for customizing features and UI, managed through a unified JSON configuration file. It’s ideal for keeping Web and Native apps visually consistent.
+
+Try AppBuilder in the [Chat Web Demo Center](https://trtc.io/demo/homepage/#/detail). Entry point:
+
+While the Chat Web Demo Center does not currently support real-time preview for mobile, mobile projects do support AppBuilder configuration.
+
+To apply your custom configuration from the Web Demo Center to your mobile project, follow these two steps:
+1. Download the configuration file.
+
+2. Add the appConfig.json file to your Android project.
+
+#### 1. Download the Configuration File
+
+Go to the [Chat Web Demo Center](https://trtc.io/demo/homepage/#/detail) and download the appConfig.json configuration file. Download path:
+
+The contents of `appConfig.json` map directly to the configuration options in AppBuilder. Appearance settings are under the `theme` section:
+``` json
+{
+  "theme": {
+    "mode": "light", // Theme mode: light - Light mode, dark - Dark mode, system - Follow system
+    "primaryColor": "#E65100" // Primary color, hexadecimal color value
+  },
+  "messageList": {
+    "alignment": "two-sided",
+    "enableReadReceipt": false,
+    "messageActionList": [
+        "copy",
+        "recall",
+        "quote",
+        "forward",
+        "delete"
+    ]
+  },
+  "conversationList": {
+    "enableCreateConversation": true,
+    "conversationActionList": [
+      "delete",
+      "mute",
+      "pin",
+      "markUnread"
+    ]
+  },
+  "messageInput": {
+    "hideSendButton": false,
+    "attachmentPickerMode": "collapsed"
+  },
+  "search": {
+    "hideSearch": false
+  },
+  "avatar": {
+    "shape": "circular"
+  }
+}
+```
+
+**Configuration Option Description**
+
+|Parameter|Type|Optional Values|Description|
+|---------|---------|---------|---------|
+|`mode`|String|`"system"`, `"light"`, `"dark"`|Theme mode|
+|`primaryColor`|String|Hex color value, e.g., `"#0ABF77"`|Primary color|
+
+#### 2. Add the Configuration File to Your Project
+
+Drag appConfig.json into your project. For example, in the open-source demo [TUIKit Android Compose](https://github.com/Tencent-RTC/TUIKit_Android_Compose/blob/main/chat/demo/app/src/main/assets/appConfig.json) on GitHub, appConfig.json is located in the assets folder under demo/app:
+
+Once you’ve added the file, you don’t need to write any extra code. When you launch the app, TUIKit Compose components will automatically use the theme mode and primary color specified in appConfig.json.
+
+### Option B: Set Theme Mode in Code
+
+You can set the theme mode directly using the `setThemeMode` API. Example:
+``` swift
+val themeState = ThemeState.shared
+Column {
+    Button(onClick = {
+        themeState.setThemeMode(ThemeMode.SYSTEM)
+    }) { Text(text = "Follow System") }
+    Button(onClick = {
+        themeState.setThemeMode(ThemeMode.LIGHT)
+    }) { Text(text = "Light Mode") }
+    Button(onClick = {
+        themeState.setThemeMode(ThemeMode.DARK)
+    }) { Text(text = "Dark Mode") }
+}
+```
+
+### Approach 3: Set Primary Color in Code
+
+Set the primary color using the `setPrimaryColor` API. Just provide a Hex color value, and all TUIKit Compose components will automatically use matching colors from the same palette for UI rendering. No manual color adjustments are needed. Example:
+``` swift
+Column {
+    var text: String by remember { mutableStateOf("#1C66E5") }
+
+    fun isValidHexColor(): Boolean {
+        return text.matches(Regex("^#[0-9A-Fa-f]{6}$"))
+    }
+    BasicTextField(
+        value = text,
+        onValueChange = { text = it },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    )
+    Button(
+        enabled = isValidHexColor(),
+        onClick = {
+            themeState.setPrimaryColor(text)
+        }) {
+        Text("Apply Primary Color")
+    }
+}
+```
+
+> **Usage Recommendations****：**
+>
+> - For most apps, using the JSON configuration file is recommended. It’s simple, reliable, and ensures cross-platform consistency.
+> - Use colors from themeState.colors throughout your app to maintain a consistent look when switching themes.
+
+## FAQs
+
+### **How do I check if the current mode is dark mode?**
+``` java
+if themeState.isDarkMode {
+    // Currently in dark mode
+} else {
+    // Currently in light mode
+}
+```
+
+### **Can I set transparency?**
+
+No. Only 6-digit Hex format (RGB) is supported for the primary color. 8-digit Hex (RGBA) is not supported.
+
+### **How do I reset to the default theme?**
+``` swift
+themeState.clearPrimaryColor()  // Remove custom primary color
+themeState.setThemeMode(ThemeMode.SYSTEM)  // Switch to system mode
+```
+
+### **Where is the theme configuration saved?**
+
+Theme settings are stored in the app’s persistent storage. If the app is uninstalled, the configuration is lost and defaults are restored on reinstallation.
+
+### **How do I get the full current theme configuration?**
+``` swift
+val config = themeState.currentTheme
+print("Mode: ${config.mode}")
+print("Primary Color: ${config.primaryColor ?: "Default"}")
+```
+
+### **Can I set both mode and primary color at the same time?**
+
+Yes. Call both methods separately; the system will automatically merge the settings:
+``` swift
+themeState.setThemeMode(ThemeMode.DARK)
+themeState.setPrimaryColor("#0ABF77")
+```

package/resource/knowledge/chat/preset/android-view/integration.md

@@ -0,0 +1,300 @@
+TUIKit is a UI component library built on the Chat SDK. It enables rapid implementation of chat, conversation, search, relationship chain, group, and other features through UI components. This document describes how to quickly integrate TUIKit and implement core features.
+
+## Key Concepts
+
+TUIKit provides a complete set of instant messaging UI components. It depends on the **AtomicXCore data layer** and can be used to build various functional pages.
+- Page layer: Complete functional pages built on TUIKit components, including ChatPageView, ContactsPageView, and ConversationsPageView. You can use them directly.
+
+- TUIKit (UI component layer): View UI components, not Compose components, built on AtomicXCore. You can embed them into your existing app pages.
+
+- AtomicXCore (data layer): Provides data management and business logic, including various stores and managers.
+
+## Prerequisites
+- Android Studio 2022.3.1 or later, JDK 17.
+
+- A physical device or emulator running Android 6.0 or later.
+
+- Your project must support Kotlin, because TUIKit is developed in Kotlin.
+
+- minSdk >= 23.
+
+- A valid Tencent Cloud account and Chat application. See Activate the Service to obtain the following information from the Console:
+
+  - SDKAppID: The ID of the Chat application obtained from the Console. It is the unique identifier of the application.
+
+  - SDKSecretKey: The application secret key.
+
+      >
+
+> **Version Compatibility Notice:**
+>
+      >
+
+      > To ensure a stable build environment, strictly follow the official compatibility requirements:
+      >
+>     - For compatibility between Gradle, Android Gradle Plugin, JDK, and Android Studio, see the Android official documentation: [Release Notes](https://developer.android.com/build/releases/gradle-plugin#updating-gradle)
+>     - For the mapping between Kotlin, Android Gradle Plugin, and Gradle versions, see the Kotlin official documentation: [Kotlin-Gradle Plugin Compatibility](https://kotlinlang.org/docs/gradle-configure-project.html#apply-the-plugin)
+
+      > We recommend selecting a version combination that fully matches your project requirements according to these guidelines.
+      >
+
+## Integrate the TUIKit
+
+### Download the Source Code
+
+Download the source code from the GitHub repository [Tencent-RTC/TUIKit_Android](https://github.com/Tencent-RTC/TUIKit_Android). The project directory structure is as follows:
+``` text
+TUIKit_Android/
+├── atomic_x/              # Base UI component library (required by Chat)
+├── call/
+│   └── tuicallkit-kt/     # Audio/video call component (required by Chat)
+└── chat/
+    ├── demo/              # Chat View Demo project
+    └── uikit/             # Chat View UI component library
+```
+
+### Integrate Components
+1. Copy the `chat`, `atomic_x`, and optionally `call` folders from the repository root to your project root directory. The directory structure after copying is as follows:
+
+   ``` text
+   YourApplication/
+   ├── app/                    # Your app module
+   ├── atomic_x/               # Base UI component library (required)
+   ├── call/                   # Audio/video call component (optional)
+   │   └── tuicallkit-kt/
+   ├── chat/                   # Chat source code
+   │   ├── demo/               # Demo project (for reference, optional)
+   │   └── uikit/              # Chat UIKit component library (required)
+   ├── settings.gradle.kts
+   └── build.gradle.kts
+   ```
+2. Add the corresponding modules in `settings.gradle.kts`. Adjust the relative paths based on where you actually place the source code:
+
+【Kotlin DSL】
+``` kotlin
+// settings.gradle.kts
+
+// Include the Chat UIKit component library (required)
+include(":uikit")
+project(":uikit").projectDir = file("${settingsDir.path}/chat/uikit")
+
+// Include the AtomicX base UI component library (required)
+include(":atomic_x")
+project(":atomic_x").projectDir = file("${settingsDir.path}/atomic_x")
+
+// Include the audio/video call component (optional, required for audio/video calls)
+include(":tuicallkit-kt")
+project(":tuicallkit-kt").projectDir = file("${settingsDir.path}/call/tuicallkit-kt")
+```
+
+【Groovy DSL】
+``` groovy
+// settings.gradle
+
+// Include the Chat UIKit component library (required)
+include ':uikit'
+project(':uikit').projectDir = new File(settingsDir, 'chat/uikit')
+
+// Include the AtomicX base UI component library (required)
+include ':atomic_x'
+project(':atomic_x').projectDir = new File(settingsDir, 'atomic_x')
+
+// Include the audio/video call component (optional, required for audio/video calls)
+include ':tuicallkit-kt'
+project(':tuicallkit-kt').projectDir = new File(settingsDir, 'call/tuicallkit-kt')
+```
+
+3. Add dependencies to the app module's `build.gradle.kts`:
+
+【Kotlin DSL】
+``` kotlin
+// app/build.gradle.kts
+dependencies {
+    // TUIKit component library (required)
+    implementation(project(":uikit"))
+    implementation(project(":atomic_x"))
+    // Audio/video call (optional)
+    implementation(project(":tuicallkit-kt"))
+}
+```
+
+【Groovy DSL】
+``` groovy
+// app/build.gradle
+dependencies {
+    // TUIKit component library (required)
+    implementation project(':uikit')
+    implementation project(':atomic_x')
+    // Audio/video call (optional)
+    implementation project(':tuicallkit-kt')
+}
+```
+
+### Implementation Steps
+
+After completing the integration above, follow these steps to quickly build core UIs such as the conversation list, chat, and contacts with only a few lines of code.
+
+#### Step 1. Configure User Authentication
+
+In [Console > Development Tools > UserSig Tools](https://console.trtc.io/usersig), obtain a UserSig based on the UserID. The UserSig is used for user authentication during login.
+
+> **Description:**
+>
+
+> For more UserSig operations, see UserSig Generation & Verification.
+>
+
+#### Step 2. User Login
+
+You must log in before using component features. Call the `login` API of `LoginStore` and pass in the sdkAppID, userID, and userSig obtained above for login authentication:
+``` java
+import io.trtc.tuikit.atomicxcore.api.CompletionHandler
+import io.trtc.tuikit.atomicxcore.api.login.LoginStore
+
+LoginStore.shared.login(
+    context,
+    sdkAppID, // Int, obtained from the Console
+    userID,   // String
+    userSig,  // String, generated in the Console or on your server
+    object : CompletionHandler {
+        override fun onSuccess() {
+            // Login succeeded. You can navigate to the conversation list or chat page.
+        }
+        override fun onFailure(code: Int, desc: String) {
+            // Login failed. You can show an error dialog.
+        }
+    }
+)
+```
+
+> **Note:**
+>
+
+> In a production environment, we recommend generating UserSig on your server. When needed, your app should request a dynamic UserSig from your business server for authentication. For details, see [Generating UserSig on the Server](https://intl.cloud.tencent.com/document/product/1047/34385).
+>
+
+#### Step 3. Build the Conversation List UI
+
+To build a conversation list, create `ConversationsPageView` and add it to your layout. It automatically reads recent conversations from local storage. When a conversation is tapped, the `onConversationClick` callback returns the conversation's `conversationID`, which you can use to navigate to the chat UI.
+``` kotlin
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import io.trtc.tuikit.chat.uikit.pages.ConversationsPageView
+
+class ConversationActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        val conversationsPage = ConversationsPageView(this)
+        conversationsPage.setHeaderTitle("Messages")
+
+        // Conversation tap callback. conversationID already includes the c2c_ or group_ prefix.
+        conversationsPage.onConversationClick = { conversationID ->
+            // Navigate to your chat UI and pass in conversationID. See ChatActivity in Step 4.
+        }
+        // Optional callbacks for search, starting one-to-one chats, and creating groups.
+        conversationsPage.onSearchClick = { /* Navigate to the search page */ }
+        conversationsPage.onStartChatClick = { /* Start a one-to-one chat */ }
+        conversationsPage.onCreateGroupClick = { /* Create a group */ }
+
+        // Set the conversation list as the page content.
+        setContentView(conversationsPage)
+    }
+}
+```
+
+#### Step 4. Build the Chat UI
+
+Use `ChatPageView` to display and send or receive messages. Pass `conversationID` through `setup`. The `conversationID` format is `c2c_<peer UserID>` for one-to-one chats and `group_<GroupID>` for group chats.
+``` kotlin
+import android.content.Context
+import android.content.Intent
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import io.trtc.tuikit.chat.uikit.pages.ChatPageView
+
+class ChatActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        // Material Components theme is required, otherwise ChatPageView may crash at runtime.
+        setTheme(com.google.android.material.R.style.Theme_MaterialComponents_Light_NoActionBar)
+        super.onCreate(savedInstanceState)
+
+        // conversationID format: "c2c_<peer UserID>" for one-to-one chats, "group_<GroupID>" for group chats.
+        val conversationID = intent.getStringExtra("conversationID") ?: return
+
+        val chatPageView = ChatPageView(this)
+        chatPageView.setup(conversationID = conversationID)
+        setContentView(chatPageView)
+    }
+
+    companion object {
+        fun start(context: Context, conversationID: String) {
+            context.startActivity(Intent(context, ChatActivity::class.java).apply {
+                putExtra("conversationID", conversationID)
+            })
+        }
+    }
+}
+```
+
+> **Note:**
+>
+
+> The Activity that hosts the chat page **must** use a Material Components theme, such as `setTheme(com.google.android.material.R.style.Theme_MaterialComponents_Light_NoActionBar)`. Otherwise, Material controls used inside `ChatPageView` may crash at runtime because required theme attributes are missing.
+>
+
+> **Description:**The Demo project provides `ChatActivity`, a chat page encapsulated based on `ChatPageView` with a title bar, unread badges, group event handling, and more. You can reuse it directly or refer to its implementation for customization: `ChatActivity.start(context, conversationID)`.
+>
+
+#### Step 5. Build the Contacts UI
+
+Use `ContactsPageView` to display friend lists, group lists, and more. Set click callbacks through `setup`. When a contact or group is tapped, navigate to the corresponding chat UI.
+``` kotlin
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import io.trtc.tuikit.chat.uikit.pages.ContactsPageView
+
+class ContactActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        val contactsPage = ContactsPageView(this)
+        contactsPage.setHeaderTitle("Contacts")
+        contactsPage.setup(
+            onContactClick = { contactInfo ->
+                // Navigate to your chat UI. The one-to-one conversation ID is "c2c_" + contactInfo.userID.
+            },
+            onGroupClick = { contactInfo ->
+                // Navigate to your chat UI. The group conversation ID is "group_" + contactInfo.userID.
+            }
+        )
+        setContentView(contactsPage)
+    }
+}
+```
+
+#### Step 6. Theme Settings (Optional)
+
+TUIKit uses `ThemeStore` to support primary color settings and light/dark theme switching.
+``` kotlin
+import io.trtc.tuikit.atomicx.theme.Theme
+import io.trtc.tuikit.atomicx.theme.ThemeStore
+
+// Set primary color.
+ThemeStore.shared(context).setPrimaryColor("#1C66E5")
+
+// Switch between light and dark themes.
+ThemeStore.shared(context).setTheme(Theme.lightTheme(context))
+// ThemeStore.shared(context).setTheme(Theme.darkTheme(context))
+```
+
+## FAQs
+
+##### Using Emoji Packs
+
+To respect emoji design copyrights, the Chat Demo/TUIKit project does not include large emoji image assets. Before commercial release, replace them with emoji packs designed by you or otherwise licensed to you. The default **smiley emoji pack shown below is copyrighted by Tencent Cloud**, and you can use it for free by upgrading to [Chat Pro Plus or Enterprise Edition](https://console.trtc.io/subscription/buy/chat).
+
+## Contact Us
+
+If you have any questions or suggestions during integration or use, [contact us](https://trtc.io/contact) to submit feedback.

package/resource/knowledge/chat/preset/flutter/features/chat-setting.md

@@ -0,0 +1,64 @@
+## Component Overview
+
+ChatSetting is a suite of chat settings components, featuring two primary modules: C2CChatSetting for one-on-one chat settings and GroupChatSetting for group chat settings.
+
+These components offer a complete set of tools for managing chat sessions, including user information management, permission controls, group management, and other essential features.
+| C2C Chat Settings Interface | Group Chat Settings Interface |
+| --- | --- |
+|  |  |
+
+## Component Integration
+
+ChatSetting is included in TUIKit Flutter. To use ChatSetting, integrate TUIKit Flutter into your project. For detailed integration instructions, see the [TUIKit Flutter](https://www.tencentcloud.com/document/product/1047/77489) documentation.
+
+## Component Structure
+
+ChatSetting provides two main components: C2CChatSetting for one-on-one chat settings and GroupChatSetting for group chat settings. Each module supports extensive configuration options.
+
+### C2C Chat Settings (C2CChatSetting)
+
+#### Initialization Parameters
+
+|Parameter Name|Type|Description|
+|---------|---------|---------|
+|`userID`|`String`|The user ID of the chat partner.|
+|`onSendMessageClick`|`void Function({String? userID, String? groupID})`|Callback triggered when the Send Message button is clicked. Optional.|
+|`onContactDelete`|`VoidCallback`|Callback triggered when the Delete Contact button is clicked. Optional.|
+
+### Group Chat Settings (GroupChatSetting)
+
+#### Initialization Parameters
+
+|Parameter Name|Type|Description|
+|---------|---------|---------|
+|`groupID`|`String`|Group ID, used to identify the group chat.|
+|`onSendMessageClick`|`void Function({String? userID, String? groupID})`|Callback triggered when the Send Message button is clicked. Optional.|
+|`onGroupDelete`|`VoidCallback`|Callback triggered when the Dissolve/Leave Group button is clicked. Optional.|
+
+## Basic Usage
+
+To display the one-on-one chat settings page, initialize C2CChatSetting as shown below:
+``` swift
+C2CChatSetting(
+  userID: userID,
+  onSendMessageClick: ({String? userID, String? groupID}) {
+    // Handle send message button click event
+  },
+  onContactDelete: () {
+    // Handle delete contact button click event
+  },
+);
+```
+
+To display the group chat settings page, initialize GroupChatSetting as follows:
+``` swift
+GroupChatSetting(
+  groupID: groupID,
+  onGroupDelete: () {
+    // Handle delete, dissolve, or leave group button click event
+  },
+  onSendMessageClick: ({String? userID, String? groupID}) {
+    // Handle send message button click event
+  },
+);
+```