@tencent-rtc/mcp 1.4.7 → 1.6.0-beta.1

package/resource/doc/chatkit/ios/features/theme.md

@@ -1,267 +0,0 @@
-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:
-| **Light + Default Color** | **Light + Orange** | **Dark + Default Color** | **Dark + Green Theme** |
-| --- | --- | --- | --- |
-|  |  |  |  |
-
-## Core Capabilities
-
-**Mode Switching**
-- Light Mode: Bright interface suitable for daytime use.
-
-- Dark Mode: Dark interface suitable for nighttime use.
-
-- Follow System: Automatically follows system appearance settings.
-
-   **Theme Color Customization**
-
-- Preset Theme Colors: Provides standard colors like blue, green, red, orange, etc.
-
-- Custom Theme Colors: Supports any Hex format color.
-
-- Smart Palette Generation: Automatically generates a complete palette of 10 color shades.
-
-- 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
-| 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
-| 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:
-| 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
-
-This section introduces how to integrate and use theme and theme color customization features in your application, providing three approaches from simple to complex.
-
-### Approach 1: Using AppBuilder Configuration (Recommended)
-
-AppBuilder is a convenient feature and UI customization configuration tool, managed through JSON configuration files, suitable for scenarios where Web + Native dual-platform applications need to maintain a unified appearance.
-
-You can experience the AppBuilder feature at [Chat Web Demo](https://trtc.io/demo/homepage/#/detail?scene=messenger), experience entry:
-
-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:
-1. Download the configuration file.
-
-2. Drag the configuration file appConfig.json into your iOS project.
-
-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:
-
-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
-{
-  "theme": {
-    "mode": "light", // Theme mode: light-Light mode, dark-Dark mode, system-Follow system
-    "primaryColor": "#E65100" // Primary color, hex 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 Options**
-| 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
-
-Drag appConfig.json into your project, ensuring the correct Target is selected and Copy Bundle Resources is properly checked.
-
-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:
-
-#### 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:
-``` swift
-import AtomicX
-
-@main
-struct MyApp: App {
-    init() {
-        // Load theme configuration file
-        if let path = Bundle.main.path(forResource: "appConfig", ofType: "json") {
-            AppBuilderHelper.setJsonPath(path: path)
-        }
-    }
-
-    var body: some Scene {
-        WindowGroup {
-            ContentView()
-                // Inject ThemeState.shared into the app's root view
-                .environmentObject(ThemeState.shared)
-        }
-    }
-}
-```
-
-After this, without writing additional code, when you launch the app, the mode and theme color of TUIKit SwiftUI components will automatically display the values you set in appConfig.json.
-
-### Approach 2: Set Theme Mode via Code
-
-You can directly set the theme mode through the API `setThemeMode`, where themeState is the ThemeState.shared singleton object obtained from the environment. Example code:
-``` swift
-import SwiftUI
-import AtomicX
-
-struct SettingsView: View {
-    @EnvironmentObject var themeState: ThemeState
-
-    var body: some View {
-        List {
-            Section("Appearance Mode") {
-                Button("Follow System") {
-                    themeState.setThemeMode(.system)
-                }
-                Button("Light Mode") {
-                    themeState.setThemeMode(.light)
-                }
-                Button("Dark Mode") {
-                    themeState.setThemeMode(.dark)
-                }
-            }
-        }
-        .navigationTitle("Settings")
-    }
-}
-```
-
-### Approach 3: Set Theme Color via Code
-
-You can set the theme color through the API `setPrimaryColor` by passing a primary color value. The entire TUIKit SwiftUI component will automatically adapt a set of similar color values in the same color scheme based on this primary color value to render the interface, without the need for manual UI adaptation. Example code:
-``` swift
-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)
-                .textFieldStyle(RoundedBorderTextFieldStyle())
-                .placeholder(when: customColor.isEmpty) {
-                    Text("#1C66E5").foregroundColor(.gray)
-                }
-
-            Button("Apply Theme Color") {
-                themeState.setPrimaryColor(customColor)
-            }
-            .disabled(!isValidHexColor(customColor))
-        }
-        .padding()
-    }
-
-    private func isValidHexColor(_ hex: String) -> Bool {
-        let pattern = "^#[0-9A-Fa-f]{6}$"
-        return hex.range(of: pattern, options: .regularExpression) != nil
-    }
-}
-```
-
-> **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?**
-
-   ``` swift
-   if themeState.isDarkMode {
-       // Currently in dark mode
-   } else {
-       // Currently in light mode
-   }
-   ```
-- **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?**
-
-   ``` swift
-   themeState.clearPrimaryColor()  // Clear custom theme color
-   themeState.setThemeMode(.system) // Restore follow system
-   ```
-- **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?**
-
-   ``` swift
-   let config = themeState.currentTheme
-   print("Mode: \(config.mode)")
-   print("Theme Color: \(config.primaryColor ?? "Default")")
-   ```
-- **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")
-   ```

package/resource/doc/chatkit/react/components/avatar.md

@@ -1,104 +0,0 @@
-# Avatar Component Document
-
-## Overview
-
-The Avatar component displays user avatars and status, supporting avatars in various shapes and sizes. It can be used for chat applications, social media platforms, user management systems, and other scenarios to provide a visual representation of user identity.
-
-## Props Quick Reference Table
-
-| Field | Type | Default | Description |
-| --- | --- | --- | --- |
-| src | string | undefined | URL of the profile image |
-| size | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number | 'md' | Avatar size, support various preset sizes or custom size |
-| shape | 'circular' | 'square' | 'rounded' | 'circular' | Avatar shape, support circular, square and rounded rectangle |
-| alt | string | '' | Alternative text for the image, used to generate text avatar |
-| children | ReactNode | undefined | Custom content, takes precedence over src and alt content |
-| className | string | undefined | Custom CSS class name |
-| style | React.CSSProperties | undefined | Custom style |
-| onClick | () => void | undefined | Click event handler |
-| isShowOnlineStatus | boolean | false | Whether to display online status indicator |
-| isOnline | boolean | false | Whether the user is online |
-| unreadCount | number | 0 | Unread message count. Displays a red dot if true, or the actual quantity if a number |
-| maxUnreadCount | number | 99 | Maximum unread message count, displays +N if exceeded |
-| isDotUnreadCount | boolean | false | Whether to display a red dot |
-| children | ReactNode | undefined | Custom content, takes precedence over src and alt content |
-
-## Props Detailed Introduction
-
-### `src`
-
-Type: string
-`Description`: URL of the avatar image. If not provided, the default avatar will be displayed.
-`Default`: `undefined`
-
-### `size`
-
-`Type`: `'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number`
-`Description`: Avatar size, support various preset sizes or custom size.
-`Default`: `'md'`
-
-### `shape`
-
-`Type`: `'circular' | 'square' | 'rounded'`
-`Description`: Avatar shape, support circular, square and rounded rectangle.
-`Default`: `'circular'`
-
-### `alt`
-
-Type: string
-`Description`: Alternative text for images, used for generating text avatars.
-`Default`: `''`
-
-### `children`
-
-`Type`: `ReactNode`
-`Description`: Custom content, which takes precedence over the content of src and alt.
-`Default`: `undefined`
-
-### `className`
-
-`Type`: `string | undefined`
-`Description`: Custom CSS class name.
-`Default`: `undefined`
-
-### `style`
-
-`Type`: `React.CSSProperties | undefined`
-`Description`: Custom style.
-`Default`: `undefined`
-
-### `onClick`
-
-`Type`: `() => void`
-`Description`: Click event handler.
-`Default`: `undefined`
-
-### `isShowOnlineStatus`
-
-`Type`: `boolean`
-`Description`: Whether to display online status indicator.
-`Default`: `false`
-
-### `isOnline`
-
-`Type`: `boolean`
-`Description`: Whether the user is online.
-`Default`: `false`
-
-### `unreadCount`
-
-`Type`: `number`
-`Description`: Unread message count. Displays a red dot if true, or the actual quantity if a number.
-`Default`: `0`
-
-### `maxUnreadCount`
-
-`Type`: `number`
-`Description`: Maximum unread message count, displays +N if exceeded.
-`Default`: `99`
-
-### isDotUnreadCount
-
-`Type`: `boolean`
-`Description`: Whether to display the red dot.
-`Default`: `false`

package/resource/doc/chatkit/react/components/chat-header.md

@@ -1,148 +0,0 @@
-The AI model must comply with the following **hard limits**.
-
-* **Use the example code in the document as the preferred approach:** When creating a file, use the example code in the document to fill the file as the preferred approach. For the style tag, non-use of the scoped property is recommended.
-
-# Overview
-
-ChatHeader is the top navigation component of the chat UI, displaying basic info of the current session. It can show the session title, avatar, online status, input state notification, etc. The component uses a container component mode and provides a flexible slot mechanism for custom left-right operation areas.
-
-## Props quick reference table
-
-| Field | Type | Default Value | Description |
-|------|------|--------|------|
-| title | string | undefined | Custom Title, session information used when not provided. |
-| avatarUrl | string | undefined | Custom avatar image URL. |
-| enableUserStatus | boolean | false | Whether to display user status. |
-
-## Slot quick reference table
-
-| Name | Description |
-|------|------|
-| ChatHeaderLeft | Custom content area in the left side of the header. |
-| ChatHeaderRight | Custom content area on the right side of the header. |
-
-## Props detailed introduction
-
-### title
--**Type**: string.
-
-- **Description**: Custom session title. When this property is not provided, the component will automatically display the title based on the session type (showing user nickname or remark for single chat, group name for group chat). Default value is `undefined`.
-
-### avatarUrl
--**Type**: string.
-
-- **Description**: URL address of the custom avatar image. When this property is not provided, the component will automatically display the avatar based on the session type (showing user avatar for single chat, group profile photo for group chat). Default value is `undefined`.
-
-### enableUserStatus
-- **Type**: boolean.
-
-- **Description**: Whether to enable the display user online status feature, which only takes effect in single chat mode. When enabled, it shows the user's online/offline status. Default value is `false`.
-
-## Slots detailed introduction
-
-### ChatHeaderLeft
-
-**Description**: Header left-side custom content slot, usually used for placing navigation controls such as back button and menu button.
-
-#### Example: Customize the left sidebar menu
-``` typescript
-<template>
-  <ChatHeader>
-    <template #ChatHeaderLeft>
-      Back button, clear active session
-      <button
-        class="nav-button"
-        @click="handleBack"
-      >
-        ⬅️
-      </button>
-    </template>
-  </ChatHeader>
-</template>
-
-<script setup lang="ts">
-import { ChatHeader, useConversationListState } from '@tencentcloud/chat-uikit-react';
-
-const { setActiveConversation } = useConversationListState();
-
-const handleBack = () => {
-  Set active session ID to empty
-  setActiveConversation('');
-};
-</script>
-
-<style scoped>
-.header-left-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.nav-button {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s;
-}
-
-.nav-button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-</style>
-```
-
-### ChatHeaderRight
-
-**Description**: Header right-side custom content slot, usually used for placing feature buttons such as the menu toggle of the ChatSetting component and custom call buttons.
-
-#### Example: Integrate the ChatSetting component through the ChatHeaderRight slot and drawer component
-
-[App.vue]
-``` typescript
-<template>
-  <ChatHeader>
-    <template #ChatHeaderRight>
-      <div style="display: flex; align-items: center;">
-        <IconHorizontalMore2
-         :size="20"
-          @click="setIsChatSettingOpen(true)" />
-      </div>
-    </template>
-  </ChatHeader>
-  <TUIDrawer
-    :model-value="isChatSettingOpen"
-    :title="Setting"
-    @close="setIsChatSettingOpen(false)"
-  >
-    <ChatSetting style="flex: 1;" />
-  </TUIDrawer>
-</template>
-
-<script setup lang="ts">
-import {
-  ChatHeader,
-  ChatSetting
-} from '@tencentcloud/chat-uikit-vue3';
-import { TUIDrawer, IconHorizontalMore2 } from '@tencentcloud/uikit-base-component-vue3';
-
-const isChatSettingOpen = ref(false);
-
-const setIsSettingOpen = (isOpen: boolean) => {
-  isChatSettingOpen.value = isOpen;
-};
-</script>
-
-<style>
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-</style>
-```

package/resource/doc/chatkit/react/components/chat-setting.md

@@ -1,57 +0,0 @@
-## Component Overview
-
-`ChatSetting` is an intelligent chat settings component that can automatically render the appropriate settings interface based on the currently activated session type. This component internally integrates two modes: C2C (one-on-one) chat settings and group chat settings, providing users with a uniform chat settings portal.
-
-Core features of components:
-- **Automatic adaptation** - The settings interface is automatically switched based on session type
-
-- **Status-driven** - Auto-update content based on the current active session status
-
-## Props Parameters
-| Parameter | Type | Default Value | Description |
-| --- | --- | --- | --- |
-| className | string \\| undefined | undefined | Custom CSS class name |
-| style | React.CSSProperties \\| undefined | undefined | Custom inline style |
-
-## Quick Usage
-
-`ChatSetting` is an independent component that can be used freely. By default, the switch control is on the ChatHeader Component. Alternatively use the useUIOpenControlState Hook to customize the ChatSetting switch.
-``` tsx
-function App() {
-  const { isChatSettingOpen, setChatSettingOpen } = useUIOpenControlState();
-
-  function toggleChatSettingOpen() {
-    setChatSettingOpen(!isChatSettingOpen);
-  }
-
-  return (
-     <UIKitProvider>
-        <div style={{ maxWidth: '300px' }}>
-          <ConversationList />
-        </div>
-        <Chat
-          PlaceholderEmpty={null}
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            flex: 1,
-            maxHeight: '100vh',
-          }}
-        >
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            minWidth: '0',
-          }}
-          >
-            <button onClick={toggleChatSetting}>toggle</button>
-            <MessageList />
-            <MessageInput />
-          </div>
-          {isChatSettingOpen && <ChatSetting style={{ width: '350px' }} />}
-        </Chat>
-      </UIKitProvider>
-  );
-}
-```

package/resource/doc/chatkit/react/components/chat.md

@@ -1,38 +0,0 @@
-# Chat component document
-
-## Overview
-
-The chat component is responsible for rendering the chat interface, including the chat window header component ChatHeader, the message list component MessageList, and the message input component MessageInput.
-
-## Component composition
-
-The Chat component includes the following content:
--**ChatHeader**: Chat window header component
-
-- **MessageList**: Message list component. The message list component includes message operation capabilities. For detailed properties, read the MessageList component document.
-
-- **MessageInput**: Message input component
-
-## Basic Usage
-
-Chat components can be used without any required attributes.
-``` typescript
-<template>
-<UIKitProvider>
-  <Chat style="flex: 1;">
-    <ChatHeader />
-    <MessageList />
-    <MessageInput />
-  </Chat>
-</UIKitProvider>
-</template>
-<script setup lang="ts">
-import {
-  UIKitProvider,
-  Chat,
-  ChatHeader,
-  MessageList,
-  MessageInput,
-} from '@tencentcloud/chat-uikit-react';
-</script>
-```

package/resource/doc/chatkit/react/components/component-list.md

@@ -1,37 +0,0 @@
-# atomicx component library Application scenarios and considerations for components
-
-## component list
-
-25 components:
-
-### Components suitable for chat scenario
-
-1. ConversationList
-  Session list component, suitable for chat scenario, in vertical list form, can switch sessions through click. If only chat is needed, this component is optional.
-2. MessageInput
-  Message input component, the core component for chat scenario, can send chat messages. To send messages, this component must be used.
-3. MessageList
-  Message list component, the core component for chat scenario, can display chat message list and support swipe. This component must use in chat scenario.
-4. ContactList
-  Contact list component, suitable for chat scenario, can display and manage user contacts. If only chat is needed, this component is optional.
-5. ChatSetting
-  Chat settings component, suitable for chat scenario, manages chat-related configuration such as pin to top, do not disturb, add/remove users in group chat, admin management and muting. If only chat is needed, this component is optional.
-6. Search
-  Search component, used for message search, user search, etc. If only chat is needed, this component is optional.
-
-  Microphone control button, suitable for meeting and live-streaming scenarios, used for mute/unmute.
-
-universal component
-
-1. Avatar
-  Common avatar component, displays user profile photo/online status/message unread count
-2. UserPicker
-  User selector, used for initiating group chat, group video, or group voice calls in user selection scenarios.
-
-Must-Knows
-
-1. When receiving user needs, the response should be divided into two parts: the first part is the minimum components to meet the requirements, and the second part is the recommended additional extension components. Do not enlarge user needs.
-2. Components for different scenarios have intersection.
-3. Determine if it might be a comprehensive scenario according to user needs, such as chat + live stream, with low probability. Proceed with caution.
-4. To learn about the method of use for specific components, ask the user: "You can ask how to use ${components[0].name}?"
-5. When creating a real project, call MCP Tools get_component_detail ${integration} integration guide of components