@tencent-rtc/mcp 1.3.9 → 1.4.1

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

@@ -9,7 +9,6 @@ TUIKit provides a complete set of instant messaging UI components, relying on th
 
 - AtomicXCore (Data Layer): Provides data management and business logic, including various Stores and Managers.
 
-
 ## Prerequisites
 - Flutter >= 3.29.0, Dart >= 3.7.0, Kotlin >= 1.9.
 
@@ -22,10 +21,9 @@ TUIKit provides a complete set of instant messaging UI components, relying on th
   - SDKAppID: The ID of the Chat application obtained from the console, serving as the unique identifier for the application.
 
   - SDKSecretKey: The application's secret key.
-      
 
       > **Note:**
-      > 
+      >
 >     - This project currently only supports manual integration and does not support integration via pub.dev.
 >     - 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).
@@ -33,8 +31,7 @@ TUIKit provides a complete set of instant messaging UI components, relying on th
 >     - Use JDK 17, as other versions may cause compilation failures. Refer to: [Java Version Switching](https://developer.android.com/build/jdks#kts).
 
       > We recommend that you choose a version combination that fully matches the project requirements according to the above guidelines.
-      > 
-
+      >
 
 ## Integration and Import Components
 
@@ -69,21 +66,18 @@ chat/
 ### Integrate Components
 1. Copy the complete component directory to your Flutter project, as shown below. Here flutter_demo is the example project, and TUIKit_Flutter is the component source code downloaded from GitHub:
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/b47217aac39011f0a6dd5254005ef0f7.png)
-
 2. Add TUIKit Flutter components to your pubspec.yaml file. Note that TUIKit_Flutter can be placed anywhere, as long as the relative path is correctly set in pubspec.yaml:
 
    ``` bash
      tuikit_atomic_x:
        path: ../TUIKit_Flutter/atomic-x
-   ```   
+   ```
 
    > **Note:**
-   > 
+   >
 >   - When using the local integration solution, if you need to upgrade, you need to obtain the latest component code from GitHub and overwrite the TUIKit_Flutter directory in your local project.
 >   - When there are conflicts between private modifications and remote changes, you need to manually merge and resolve conflicts.
 
-
 ### Configure Project
 
 Add necessary permission configurations on the iOS side. Open ios/Podfile and add the following permission code at the end of the file:
@@ -91,10 +85,10 @@ Add necessary permission configurations on the iOS side. Open ios/Podfile and ad
 post_install do |installer|
   installer.pods_project.targets.each do |target|
     flutter_additional_ios_build_settings(target)
-    target.build_configurations.each do |config|        
-          config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'               
-          config.build_settings['ENABLE_BITCODE'] = 'NO'        
-          config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"    
+    target.build_configurations.each do |config|
+          config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
+          config.build_settings['ENABLE_BITCODE'] = 'NO'
+          config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
         end
     target.build_configurations.each do |config|
           config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
@@ -115,7 +109,6 @@ end
 
 Obtain UserSig according to UserID in the [Chat Console](https://console.trtc.io/usersig) for subsequent user authentication during login.
 
-
 ### Step 2: User Login
 
 After login authentication, you can use the component features normally. You can call the login interface and pass the SDKAPPID, userID, and userSig obtained above for login authentication:
@@ -133,11 +126,10 @@ if (result.errorCode == 0) {
 ```
 
 > **Note:**
-> 
+>
 
 > In a formal production environment, it is recommended to generate UserSig on your server. When UserSig is needed, your App should send a request to your business server to obtain dynamic UserSig for authentication. See [Generate UserSig on Server](https://trtc.io/document/34385).
-> 
-
+>
 
 ### Step 3: Build Conversation List Interface
 
@@ -146,12 +138,8 @@ 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 your existing App page, or build a complete new conversation list page. One assembled UI effect is shown below:
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/acbda867c3a611f08c0e52540044a08e.png)
-
-
    To encapsulate ConversationList as a conversation list page, refer to the implementation in the `chat/uikit/lib/conversations_page.dart` file. `ConversationsPage` mainly does the following:
 
 1. Adds AppBar above ConversationList.
@@ -166,7 +154,6 @@ You can build a conversation list page based on the ConversationList component i
 
   3. Supports selecting multiple friends to create group chats
 
-
       Core example code is as follows:
 
       ``` java
@@ -211,24 +198,18 @@ Built-in features of MessageList include:
 
 - Support operations on individual messages: view large images for image messages, play video or voice messages, copy text messages, recall messages, delete messages, etc.
 
-
    Built-in features of MessageInput include:
 
 - Support users in composing and sending various types of messages: text, emoji, image, voice, video, file, etc.
 
-
    You can integrate MessageList and MessageInput directly into your existing App page, or build a complete new chat page. One assembled UI effect is shown below:
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/a2c04843c3a811f0a6dd5254005ef0f7.png)
-
-
    To assemble MessageList and MessageInput as a chat page, refer to the implementation in the `chat/uikit/lib/chat_page.dart` file. `ChatPage` mainly does the following:
 
 1. Adds AppBar at the top to display the conversation name.
 
 2. Vertically combines MessageList and MessageInput according to mobile user habits.
 
-
    Core example code is as follows:
 
    ``` java
@@ -299,12 +280,8 @@ You can build a contact page based on the ContactList component in TUIKit Flutte
 
 - View friends.
 
-
    You can integrate ContactList directly into your existing App, or build a complete new contact list page. One assembled UI effect is shown below:
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/4bf1d883c3a911f0b35752540099c741.png)
-
-
    To encapsulate ContactList as a contact list page, refer to the implementation in the `chat/uikit/lib/contacts_page.dart` file. `ContactsPage` mainly does the following:
 
 1. Adds AppBar above ContactList.
@@ -319,7 +296,6 @@ You can build a contact page based on the ContactList component in TUIKit Flutte
 
   3. Supports searching for target groups by GroupID
 
-
       Core example code is as follows:
 
       ``` java
@@ -350,58 +326,14 @@ You can build a contact page based on the ContactList component in TUIKit Flutte
 ### Step 6: Complete Navigation Logic Between Interfaces
 
 ConversationsPage, ChatPage, and ContactsPage implement default 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: (conversation) {}`</td>
-
-<td rowspan="1" colSpan="1" >Triggered when clicking a conversation in the conversation list, recommended to navigate to the chat page (ChatPage).</td>
-</tr>
-
-<tr>
-<td rowspan="2" colSpan="1" >**ContactsPage**</td>
-
-<td rowspan="1" colSpan="1" >`onContactClick: (ContactInfo contactInfo) {}`</td>
-
-<td rowspan="1" colSpan="1" >Triggered when clicking a contact cell, recommended to navigate to the user info page (C2CChatSetting).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`onGroupClick: (ContactInfo contactInfo) {}`</td>
-
-<td rowspan="1" colSpan="1" >Triggered when clicking a group cell, recommended to navigate to the group chat page (ChatPage).</td>
-</tr>
-
-<tr>
-<td rowspan="3" colSpan="1" >**ChatPage**</td>
-
-<td rowspan="1" colSpan="1" >`onUserClick: (String userID) {}`</td>
-
-<td rowspan="1" colSpan="1" >Triggered when clicking a user avatar or nickname in a message, recommended to navigate to the user info page (C2CChatSetting).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`onChatHeaderClick: () {}`</td>
-
-<td rowspan="1" colSpan="1" >Triggered when clicking the avatar in the navigation bar, recommended to navigate to the user info page (C2CChatSetting) or group chat info page (GroupChatSetting)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`onBackClick: () {}`</td>
-
-<td rowspan="1" colSpan="1" >Triggered when clicking the back button, recommended to return to the previous page.</td>
-</tr>
-</table>
-
+| Page | Callback | Suggested Navigation Logic |
+| --- | --- | --- |
+| **ConversationsPage** | `onConversationClick: (conversation) {}` | Triggered when clicking a conversation in the conversation list, recommended to navigate to the chat page (ChatPage). |
+| **ContactsPage** | `onContactClick: (ContactInfo contactInfo) {}` | Triggered when clicking a contact cell, recommended to navigate to the user info page (C2CChatSetting). |
+| `onGroupClick: (ContactInfo contactInfo) {}` | Triggered when clicking a group cell, recommended to navigate to the group chat page (ChatPage). |  |
+| **ChatPage** | `onUserClick: (String userID) {}` | Triggered when clicking a user avatar or nickname in a message, recommended to navigate to the user info page (C2CChatSetting). |
+| `onChatHeaderClick: () {}` | Triggered when clicking the avatar in the navigation bar, recommended to navigate to the user info page (C2CChatSetting) or group chat info page (GroupChatSetting) |  |
+| `onBackClick: () {}` | Triggered when clicking the back button, recommended to return to the previous page. |  |
 
 You can refer to the above callback descriptions and reference code to implement interaction logic between Pages.
 
@@ -410,4 +342,3 @@ You can refer to the above callback descriptions and reference code to implement
 ### **After integrating the tuikit_atomic_x component, what should I do about errors related to **`theme_state`** and **`atomic_localizations`**?**
 
 The component supports theme color and internationalized string switching. You need to use `ComponentTheme` to wrap the root `widget` in the `main.dart` file in the project root directory, and add the `AtomicLocalizations.delegate` configuration to the `localizationsDelegates` of `MaterialApp`. You can refer to the `main.dart` file in the source code Demo for usage.
-

package/resource/doc/{chatuikit/iOS → chatkit/ios}/faq.md

@@ -7,7 +7,6 @@ Yes.
 
 - If you are using Chat Free edition and upgrade to Chat Pro Edition, after the upgrade, you can configure your SDKAppID in the console to ensure proper login. For pricing details, see [Pricing](https://intl.cloud.tencent.com/document/product/1047/34350).
 
-
 ### Why do I encounter a 6013 "SDK Not Initialized" error?
 
 If the 6013 "SDK Not Initialized" error occurs, try the following troubleshooting methods:
@@ -17,7 +16,6 @@ If the 6013 "SDK Not Initialized" error occurs, try the following troubleshootin
 
 3. For Android, verify that all library files have been loaded or repossessed by the system during use.
 
-
 ### Why do I encounter "code: 6205 desc: QALSERVICE not ready" error?
 
 This error is caused by calling `stopQALService` after initialization. To fix it, refer to the [configuration method](https://blog.csdn.net/qq_16131393/article/details/54895733) shared by one of our customers.
@@ -31,10 +29,8 @@ There are two ways to use emojis:
 
 - Use data in TIMFaceElem. For example, the names of emoji images are string-type. Use the word "smile" to represent the smile emoji, and store "smile" in data. Then, both iOS and Android devices use data as the key to retrieve and display the corresponding emoji.
 
-
    You can also use the two fields at the same time. For example, use data to specify the emoji set and index to indicate the specific index in this emoji set. This way, you can implement many different emoji effects as in QQ. It is possible to store more complex data structures in data as long as the devices follow the same parsing rules.
 
-
 ### Why do I encounter error 10002 during operations?
 
 This status code is returned when a network exception, timeout, or ticket switching failure occurs during server-side authentication. If you see this status code, wait a moment and try again.
@@ -60,7 +56,6 @@ These errors occur because UserID and UserSig do not match. To fix it, check the
 
 - -5: When the login attempt is not completed and the SDK has not received the a2key and tinyID returned by the server, directly calling other APIs returns the "tinyid or a2 is empty" error message and -5 error code.
 
-
 ### What should I do when the SDK on the armeabi platform reports "java.lang.UnsatisfiedLinkError: No implementation found for"?
 
 Copy jni/armeabi-v7a/libImSDK.so in the Chat SDK’s aar file to the src/main/jniLibs/armeabi directory in your source code project and load it in build.gradle.
@@ -77,44 +72,40 @@ This error occurs because App Store does not support the x86_64 and i386 archite
  c. Add the following code:
 
    ``` bash
-   APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"  
-   
-   # This script loops through the frameworks embedded in the application and  
-   
-   # removes unused architectures.  
-   
-    find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK  
-    do  
-    FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)  
-    FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"  
-    echo "Executable is $FRAMEWORK_EXECUTABLE_PATH"  
-   
-    EXTRACTED_ARCHS=()  
-   
-    for ARCH in $ARCHS  
-    do  
-    echo "Extracting $ARCH from $FRAMEWORK_EXECUTABLE_NAME"  
-    lipo -extract "$ARCH" "$FRAMEWORK_EXECUTABLE_PATH" -o "$FRAMEWORK_EXECUTABLE_PATH-$ARCH"  
-    EXTRACTED_ARCHS+=("$FRAMEWORK_EXECUTABLE_PATH-$ARCH")  
-    done  
-   
-    echo "Merging extracted architectures: ${ARCHS}"  
-    lipo -o "$FRAMEWORK_EXECUTABLE_PATH-merged" -create "${EXTRACTED_ARCHS[@]}"  
-    rm "${EXTRACTED_ARCHS[@]}"  
-   
-    echo "Replacing original executable with thinned version"  
-    rm "$FRAMEWORK_EXECUTABLE_PATH"  
-    mv "$FRAMEWORK_EXECUTABLE_PATH-merged" "$FRAMEWORK_EXECUTABLE_PATH"  
-   
+   APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"
+
+   # This script loops through the frameworks embedded in the application and
+
+   # removes unused architectures.
+
+    find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK
+    do
+    FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)
+    FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"
+    echo "Executable is $FRAMEWORK_EXECUTABLE_PATH"
+
+    EXTRACTED_ARCHS=()
+
+    for ARCH in $ARCHS
+    do
+    echo "Extracting $ARCH from $FRAMEWORK_EXECUTABLE_NAME"
+    lipo -extract "$ARCH" "$FRAMEWORK_EXECUTABLE_PATH" -o "$FRAMEWORK_EXECUTABLE_PATH-$ARCH"
+    EXTRACTED_ARCHS+=("$FRAMEWORK_EXECUTABLE_PATH-$ARCH")
+    done
+
+    echo "Merging extracted architectures: ${ARCHS}"
+    lipo -o "$FRAMEWORK_EXECUTABLE_PATH-merged" -create "${EXTRACTED_ARCHS[@]}"
+    rm "${EXTRACTED_ARCHS[@]}"
+
+    echo "Replacing original executable with thinned version"
+    rm "$FRAMEWORK_EXECUTABLE_PATH"
+    mv "$FRAMEWORK_EXECUTABLE_PATH-merged" "$FRAMEWORK_EXECUTABLE_PATH"
+
     done
    ```
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/ac95ba51e28011eeb1eb525400b5f95f.png)
 
 3. Package the app and upload it again.
 
-
 ### Can developers directly utilize the emoticon packs demonstrated in the Chat various client demos/TUIKit projects?
 
 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/a44543c197f611ef820f525400d5f8ef.png)

package/resource/doc/{chatuikit/iOS → chatkit/ios}/features/theme.md

@@ -1,28 +1,9 @@
 TUIKit SwiftUI provides powerful appearance customization capabilities, supporting custom theme modes (Light/Dark/Follow System) and theme colors for your application. Through simple configuration, developers can easily implement app-level theme switching and brand color customization.
 
 Taking the message list as an example, the effects of custom theme modes and theme colors are shown below:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Light + Default Color**</td>
-
-<td rowspan="1" colSpan="1" >**Light + Orange**</td>
-
-<td rowspan="1" colSpan="1" >**Dark + Default Color**</td>
-
-<td rowspan="1" colSpan="1" >**Dark + Green Theme**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/6c3b7f7ab2e511f0b96752540044a08e.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/fb4a9542b30c11f097b152540099c741.png)</td>
-
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/6c3aca9bb2e511f0bd1d5254001c06ec.png)</td>
-
-<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/6c3d7e74b2e511f0b96752540044a08e.png)</td>
-</tr>
-</table>
-
+| **Light + Default Color** | **Light + Orange** | **Dark + Default Color** | **Dark + Green Theme** |
+| --- | --- | --- | --- |
+|  |  |  |  |
 
 ## Core Capabilities
 
@@ -33,7 +14,6 @@ Taking the message list as an example, the effects of custom theme modes and the
 
 - Follow System: Automatically follows system appearance settings.
 
-
    **Theme Color Customization**
 
 - Preset Theme Colors: Provides standard colors like blue, green, red, orange, etc.
@@ -44,121 +24,36 @@ Taking the message list as an example, the effects of custom theme modes and the
 
 - Clear Customization: One-click restore to default theme color.
 
-
 ## API Reference
 
 The above functionalities are based on a set of concise APIs provided by `ThemeState` for theme configuration and information queries.
 
 ### Set Theme Mode
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Method</td>
-
-<td rowspan="1" colSpan="1" >Parameters</td>
-
-<td rowspan="1" colSpan="1" >Return Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`setThemeMode(_:)`</td>
-
-<td rowspan="1" colSpan="1" >`ThemeMode`</td>
-
-<td rowspan="1" colSpan="1" >`Void`</td>
-
-<td rowspan="1" colSpan="1" >Sets the display mode, automatically saves and refreshes.<br>• `.system`: Follow system appearance.<br>• `.light`: Force light mode.<br>• `.dark`: Force dark mode.</td>
-</tr>
-</table>
-
+| Method | Parameters | Return Value | Description |
+| --- | --- | --- | --- |
+| `setThemeMode(_:)` | `ThemeMode` | `Void` | Sets the display mode, automatically saves and refreshes.<br>• `.system`: Follow system appearance.<br>• `.light`: Force light mode.<br>• `.dark`: Force dark mode. |
 
 ### Set Theme Color
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Method</td>
-
-<td rowspan="1" colSpan="1" >Parameters</td>
-
-<td rowspan="1" colSpan="1" >Return Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`setPrimaryColor(_:)`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >`Void`</td>
-
-<td rowspan="1" colSpan="1" >Sets the theme color, requires Hex format (e.g., "#1C66E5").</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`clearPrimaryColor()`</td>
-
-<td rowspan="1" colSpan="1" >None</td>
-
-<td rowspan="1" colSpan="1" >`Void`</td>
-
-<td rowspan="1" colSpan="1" >Clears custom theme color and restores default blue.</td>
-</tr>
-</table>
-
+| Method | Parameters | Return Value | Description |
+| --- | --- | --- | --- |
+| `setPrimaryColor(_:)` | `String` | `Void` | Sets the theme color, requires Hex format (e.g., "#1C66E5"). |
+| `clearPrimaryColor()` | None | `Void` | Clears custom theme color and restores default blue. |
 
 > **Note:**
-> 
+>
 > 1. After calling `setThemeMode` or `setPrimaryColor`, the configuration is automatically saved to `UserDefaults` without manual saving. It will automatically load on next app launch.
 > 2. Cache is automatically cleared when modifying theme configuration, ensuring the color scheme updates in real-time. Developers don't need to manage cache.
 > 3. Avoid frequently switching themes when using settings APIs (e.g., calling in a loop).
 
-
 ### Query ThemeState Information
 
 The following read-only properties can be used to query the current theme configuration status and information:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`currentMode`</td>
-
-<td rowspan="1" colSpan="1" >`ThemeMode`</td>
-
-<td rowspan="1" colSpan="1" >Current theme mode.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`currentPrimaryColor`</td>
-
-<td rowspan="1" colSpan="1" >`String?`</td>
-
-<td rowspan="1" colSpan="1" >Current theme color (Hex format).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`hasCustomPrimaryColor`</td>
-
-<td rowspan="1" colSpan="1" >`Bool`</td>
-
-<td rowspan="1" colSpan="1" >Whether a custom theme color is set.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`isDarkMode`</td>
-
-<td rowspan="1" colSpan="1" >`Bool`</td>
-
-<td rowspan="1" colSpan="1" >Whether currently in dark mode.</td>
-</tr>
-</table>
-
+| Property | Type | Description |
+| --- | --- | --- |
+| `currentMode` | `ThemeMode` | Current theme mode. |
+| `currentPrimaryColor` | `String?` | Current theme color (Hex format). |
+| `hasCustomPrimaryColor` | `Bool` | Whether a custom theme color is set. |
+| `isDarkMode` | `Bool` | Whether currently in dark mode. |
 
 ## Usage
 
@@ -170,9 +65,6 @@ AppBuilder is a convenient feature and UI customization configuration tool, mana
 
 You can experience the AppBuilder feature at [Chat Web Demo](https://trtc.io/demo/homepage/#/detail?scene=messenger), experience entry:
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/ab6c76ddb30111f09e195254007c27c5.png)
-
-
 Although the Chat Web Demo currently cannot preview mobile configuration effects in real-time, mobile platforms already support AppBuilder's configuration capabilities.
 
 Next, we'll introduce how to apply custom configurations to mobile projects after setting up AppBuilder in the Web demo. The process is quite simple, with only 3 steps:
@@ -182,14 +74,10 @@ Next, we'll introduce how to apply custom configurations to mobile projects afte
 
 3. Load the configuration file at app launch.
 
-
 #### Step 1: Download Configuration File
 
 Visit [Chat Web Demo](https://trtc.io/demo/homepage/#/detail?scene=messenger) and download the appConfig.json configuration file. The download path is:
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/722a624ab30011f0bb7b525400bf7822.png)
-
-
 The `appConfig.json` file content is shown below, corresponding one-to-one with the configuration items on the AppBuilder page. The appearance-related configurations are `theme` and its subfields:
 ``` json
 {
@@ -231,38 +119,10 @@ The `appConfig.json` file content is shown below, corresponding one-to-one with
 ```
 
 **Configuration Options**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Parameter</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Options</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`mode`</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >`"system"`, `"light"`, `"dark"`</td>
-
-<td rowspan="1" colSpan="1" >Theme mode.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`primaryColor`</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >Hex color value, e.g., `"#0ABF77"`</td>
-
-<td rowspan="1" colSpan="1" >Theme color.</td>
-</tr>
-</table>
-
+| Parameter | Type | Options | Description |
+| --- | --- | --- | --- |
+| `mode` | String | `"system"`, `"light"`, `"dark"` | Theme mode. |
+| `primaryColor` | String | Hex color value, e.g., `"#0ABF77"` | Theme color. |
 
 #### Step 2: Add Configuration File to Project
 
@@ -270,9 +130,6 @@ Drag appConfig.json into your project, ensuring the correct Target is selected a
 
 Taking the GitHub open source Demo [TUIKit iOS SwiftUI](https://github.com/Tencent-RTC/TUIKit_iOS_SwiftUI/blob/main/chat/demo/ChatDemo/appConfig.json) project as an example, appConfig.json is located in the main bundle of demo/ChatDemo:
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027639409/06269308b30611f099275254005ef0f7.png)
-
-
 #### Step 3: Load Configuration File
 
 Set the JSON file path at app launch to load the configuration file. If you also place appConfig.json in the app's main bundle, you can obtain the JSON file like this:
@@ -287,7 +144,7 @@ struct MyApp: App {
             AppBuilderHelper.setJsonPath(path: path)
         }
     }
-    
+
     var body: some Scene {
         WindowGroup {
             ContentView()
@@ -309,7 +166,7 @@ import AtomicX
 
 struct SettingsView: View {
     @EnvironmentObject var themeState: ThemeState
-    
+
     var body: some View {
         List {
             Section("Appearance Mode") {
@@ -336,7 +193,7 @@ You can set the theme color through the API `setPrimaryColor` by passing a prima
 struct CustomColorPicker: View {
     @EnvironmentObject var themeState: ThemeState
     @State private var customColor = "#1C66E5"
-    
+
     var body: some View {
         VStack(spacing: 20) {
             TextField("Enter color value", text: $customColor)
@@ -344,7 +201,7 @@ struct CustomColorPicker: View {
                 .placeholder(when: customColor.isEmpty) {
                     Text("#1C66E5").foregroundColor(.gray)
                 }
-            
+
             Button("Apply Theme Color") {
                 themeState.setPrimaryColor(customColor)
             }
@@ -352,7 +209,7 @@ struct CustomColorPicker: View {
         }
         .padding()
     }
-    
+
     private func isValidHexColor(_ hex: String) -> Bool {
         let pattern = "^#[0-9A-Fa-f]{6}$"
         return hex.range(of: pattern, options: .regularExpression) != nil
@@ -361,11 +218,10 @@ struct CustomColorPicker: View {
 ```
 
 > **Usage Recommendations:**
-> 
+>
 > - For most applications, it's recommended to use the JSON configuration file approach, which is simple, reliable, and supports multi-platform uniformity.
 > - Consistently use colors from `themeState.colors` throughout the application to ensure interface consistency when switching themes.
 
-
 ## FAQ
 - **How to determine if currently in dark mode?**
 
@@ -378,12 +234,10 @@ struct CustomColorPicker: View {
    ```
 - **How to see effects immediately after setting theme color?**
 
-
    The UI will automatically refresh after setting the theme color because `ThemeState` is an `ObservableObject`. Ensure your views use `@EnvironmentObject` or `@ObservedObject` to observe state changes.
 
 - **Can I set transparency?**
 
-
    Not supported. Theme colors only support 6-digit Hex format (RGB), not 8-digit format (RGBA). If you need transparency effects, add the `.opacity()` modifier when using colors.
 
 - **How to restore default theme?**
@@ -394,7 +248,6 @@ struct CustomColorPicker: View {
    ```
 - **Where is theme configuration stored?**
 
-
    Stored in `UserDefaults` with key `"BaseComponentThemeKey"`. It will be lost after uninstalling the app and will restore to default configuration after reinstalling.
 
 - **How to get the complete current theme configuration?**
@@ -406,11 +259,9 @@ struct CustomColorPicker: View {
    ```
 - **Can I set mode and theme color simultaneously?**
 
-
    Yes, you can call both methods separately, and the system will automatically merge the configurations:
 
    ``` swift
    themeState.setThemeMode(.dark)
    themeState.setPrimaryColor("#0ABF77")
    ```
-