@tencent-rtc/mcp 1.4.7 → 1.6.0

package/resource/{doc/livekit/preset/live/vue/components → knowledge/livekit/preset/live/vue/features}/barrage.md

@@ -1,10 +1,10 @@
 This document provides a detailed introduction to the **barrage component**, including the **barrage message component (BarrageList)** and the **message sending component (BarrageInput)**. You can refer to the sample code in this document for seamless integration of our pre-developed components into your existing project, or customize the style and layout according to your needs by following the component customization section in the document.
 
 ## Component Composition
-| **Component Name** | **Detailed Description** |
+| <strong>Component Name</strong> | <strong>Detailed Description</strong> |
 | --- | --- |
-| **Barrage Message Component (BarrageList)** | A component responsible for real-time display and management of barrage message streams, providing a complete message display solution including **message list rendering, time aggregation, user interaction, and responsive adaptation**. |
-| **Message Sending Component (BarrageInput)** | An input component that provides rich text editing and message sending features, with seamless integration of **emoji selector, character limit, status management, and cross-platform adaptation**, offering users a smooth input experience. |
+| <strong>Barrage Message Component (BarrageList)</strong> | A component responsible for real-time display and management of barrage message streams, providing a complete message display solution including <strong>message list rendering, time aggregation, user interaction, and responsive adaptation</strong>. |
+| <strong>Message Sending Component (BarrageInput)</strong> | An input component that provides rich text editing and message sending features, with seamless integration of <strong>emoji selector, character limit, status management, and cross-platform adaptation</strong>, offering users a smooth input experience. |
 
 ## Component Integration
 
@@ -16,25 +16,25 @@ Before performing quick integration, you need to refer to preparations, meet the
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### Step 3: Integrating the Barrage Component
 
-Introduce and use the barrage component in your project. You can copy the following example directly to show **a complete live streaming room barrage message component and message send component** in your project.
+Introduce and use the barrage component in your project. You can copy the following example directly to show **a complete live streaming room barrage message component and message sending component** in your project.
 ``` typescript
 <template>
-  <UIKitProvider theme="dark" language="en-US">
+  <UIKitProvider theme="dark">
     <div class="app">
       <div class="chat-container">
         <div class="chat-content">
@@ -51,10 +51,10 @@ Introduce and use the barrage component in your project. You can copy the follow
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { BarrageList, BarrageInput, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
+import { BarrageList, BarrageInput, useLoginState, useLiveListState } from 'tuikit-atomicx-vue3';
 
-const { login, loginUserInfo } = useLoginState();
-const { joinLive } = useLiveState();
+const { login } = useLoginState();
+const { joinLive } = useLiveListState();
 
 async function initLogin() {
   try {
@@ -71,7 +71,7 @@ async function initLogin() {
 onMounted(async () => {
   await initLogin();
   await joinLive({
-    liveId: 'input corresponding live streaming room LiveId',     // enter live room by inputting corresponding liveId
+    liveId: 'input corresponding live streaming room LiveId', // enter live room by inputting corresponding liveId
   });
 });
 </script>
@@ -89,30 +89,31 @@ onMounted(async () => {
 > Note: To directly learn about the custom details of the Barrage Message Component (BarrageList), quickly jump to the following link: Barrage Message Component Customization;
 >
 
-> Note: To directly learn about the custom details of the Message Sending Component (BarrageInput), quickly jump to the following link: Message Sending Component Customization;
+> Note: To directly learn about the custom details of the Message Sending Component (BarrageInput), quickly jump to the following link: Message Sending Component Customization.
 >
 
 ### Barrage Message Component (BarrageList) Customization
 
 #### **Props**
-| **Parameter Name** | **Parameter Type** | **Default Value** | **Description** |
-| --- | --- | --- | --- |
-| messageAggregationTime | Number | 300 | Maximum time interval for message grouping (seconds). |
-| filter | (message: IMessageModel) => boolean | - | Functions for filtering messages. |
-| Message | Component | Message | Custom Message Component |
-| MessageTimeDivider | Component | MessageTimeDivider | Custom Message Time Segmentation Component. |
-| LocalNoticeMessage | Component | LocalNoticeMessage | Custom Local Notification Component. |
-| containerStyle | CSSProperties | - | Custom message list container style. |
-| itemStyle | CSSProperties | - | Custom single message item style. |
-| height | String | - | Component height, supports CSS units. |
-| style | CSSProperties | - | Specify the root element's custom style. |
+
+|**Parameter Name**|**Parameter Type**|**Default Value**|**Description**|
+|---------|---------|---------|---------|
+|messageAggregationTime|Number|300|Maximum time interval for message grouping (seconds).|
+|filter|(message: IMessageModel) => boolean|-|Functions for filtering messages.|
+|Message|Component|Message|Custom Message Component|
+|MessageTimeDivider|Component|MessageTimeDivider|Custom Message Time Segmentation Component.|
+|LocalNoticeMessage|Component|LocalNoticeMessage|Custom Local Notification Component.|
+|containerStyle|CSSProperties|-|Custom message list container style.|
+|itemStyle|CSSProperties|-|Custom single message item style.|
+|height|String|-|Component height, supports CSS units.|
+|style|CSSProperties|-|Specify the root element's custom style.|
 
 As indicated in the table above, the Props custom part of the Barrage Message Component consists of three sections: **component properties, replaceable subcomponents, and custom styles.** Specific content is as shown in the table below.
-| **Content** | **Parameter** |
+| <strong>Content</strong> | <strong>Parameter</strong> |
 | --- | --- |
-| **Component Property** | `filter`,`messageAggregationTime` |
-| **Replaceable subcomponent** | `Message`,`MessageTimeDivider`,`LocalNoticeMessage` |
-| **Custom style** | `ContainerStyle`,`ItemStyle`,`height`,`style` |
+| <strong>Component Property</strong> | <code>filter</code>,<code>messageAggregationTime</code> |
+| <strong>Replaceable subcomponent</strong> | <code>Message</code>,<code>MessageTimeDivider</code>,<code>LocalNoticeMessage</code> |
+| <strong>Custom style</strong> | <code>ContainerStyle</code>,<code>ItemStyle</code>,<code>height</code>,<code>style</code> |
 
 #### Filter Message
 
@@ -216,39 +217,41 @@ Barrage Message Component provides `containerStyle`, `itemStyle`, `custom child
    import MyCustomMessage from "./MyCustomMessage.vue";
    </script>
    ```
-| **Before modification** | **After modification** |  |  |
+| <strong>Before modification</strong> | <strong>After modification</strong> |  |  |
 | --- | --- | --- | --- |
-| **Custom container padding** | **Custom message item spacing and border** | **Custom Message Component** |  |
+| <strong>Custom container padding</strong> | <strong>Custom message item spacing and border</strong> | <strong>Custom Message Component</strong> |  |
 |  |  |  |  |
 
 ### Message Sending Component (BarrageInput) Customization
 
 #### **Props**
-| **Parameter Name** | **Type** | **Default Value** | **Description** |
-| --- | --- | --- | --- |
-| containerClass | String | '' | Custom container CSS class name. |
-| containerStyle | Record | {} | Inline style of custom container. |
-| width | String | - | Component width, supports CSS units. |
-| height | String | - | Component height, supports CSS units. |
-| minHeight | String | '40px' | Minimum component height, supports CSS units. |
-| maxHeight | String | '140px' | Max component height, supports CSS units. |
-| placeholder | String | - | Placeholder text in the input box. |
-| disabled | Boolean | false | Whether to disable the input box. |
-| autoFocus | Boolean | true | Whether to auto-focus into the input box. |
-| maxLength | Number | 80 | Maximum character limit for input content. |
+
+|**Parameter Name**|**Type**|**Default Value**|**Description**|
+|---------|---------|---------|---------|
+|containerClass|String|''|Custom container CSS class name.|
+|containerStyle|Record<br>|{}|Inline style of custom container.|
+|width|String|-|Component width, supports CSS units.|
+|height|String|-|Component height, supports CSS units.|
+|minHeight|String|'40px'|Minimum component height, supports CSS units.|
+|maxHeight|String|'140px'|Max component height, supports CSS units.|
+|placeholder|String|-|Placeholder text in the input box.|
+|disabled|Boolean|false|Whether to disable the input box.|
+|autoFocus|Boolean|true|Whether to auto-focus into the input box.|
+|maxLength|Number|80|Maximum character limit for input content.|
 
 #### **Events**
-| **Event Name** | **Parameter** | **Description** |
-| --- | --- | --- |
-| focus | - | Trigger when the input box gets focus. |
-| blur | - | Trigger when the input box loses focus. |
+
+|**Event Name**|**Parameter**|**Description**|
+|---------|---------|---------|
+|focus|-|Trigger when the input box gets focus.|
+|blur|-|Trigger when the input box loses focus.|
 
 As indicated in the table above, the Props custom part of the Message Sending Component consists of three sections: **size control, input restriction, and custom styles.** Specific content is as shown in the table below.
-| **Content** | **Parameter** |
+| <strong>Content</strong> | <strong>Parameter</strong> |
 | --- | --- |
-| **Size control** | `width`,`height`,`minHeight`,`minWidth` |
-| **Input restriction** | `maxLength` |
-| **Custom style** | `ContainerStyle`,`ContainerClass` |
+| <strong>Size control</strong> | <code>width</code>,<code>height</code>,<code>minHeight</code>,<code>minWidth</code> |
+| <strong>Input restriction</strong> | <code>maxLength</code> |
+| <strong>Custom style</strong> | <code>ContainerStyle</code>,<code>ContainerClass</code> |
 
 #### Size Control
 
@@ -266,7 +269,7 @@ By setting the `maxLength` parameter, you can control the maximum number of char
 
 #### Custom Style
 
-The message send component provides `containerStyle` and `containerClass` attributes for customizing component style.
+The message sending component provides `containerStyle` and `containerClass` attributes for customizing component style.
 1. To customize the input box container style, you can pass a style object to the `containerStyle` attribute.
 
    **Example: Custom container background and border rounded corners**
@@ -285,7 +288,7 @@ The message send component provides `containerStyle` and `containerClass` attrib
 
    <style>.my-custom-input-container {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;border-radius: 20px;padding: 8px 20px;}.my-custom-input-container:focus-within {box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);}</style>
    ```
-| **Before modification** | **After modification** |  |
+| <strong>Before modification</strong> | <strong>After modification</strong> |  |
 | --- | --- | --- |
-| **Custom container background and border rounded corners** | **Custom message item spacing and border** |  |
+| <strong>Custom container background and border rounded corners</strong> | <strong>Custom message item spacing and border</strong> |  |
 |  |  |  |

package/resource/{doc/livekit/preset/live/vue/components → knowledge/livekit/preset/live/vue/features}/live-audience-list.md

@@ -1,11 +1,11 @@
 This document provides a detailed introduction to the **Audience List Component (LiveAudienceList)**. You can refer to the sample code in this document for seamless integration into your existing project, or customize the style and layout according to your needs by following the component customization section in the document.
 
 ## Core Features
-| **Feature Category** | **Specific capabilities** |
+| <strong>Feature Category</strong> | <strong>Specific capabilities</strong> |
 | --- | --- |
-| **Real-time audience show** | Display the online audience list in the live streaming room in real time, support avatar and nickname display, and provide a clear audience information view, enabling hosts to intuitively understand audience composition. |
-| **Responsive design** | Component support includes UI solutions for desktop and mobile terminals, automatically adapting to different device screen dimensions to provide consistent user experience and meet multi-platform live streaming needs. |
-| **Customizable UI** | Provide flexible slot mechanism, support customization of audience tags, profile photo style and other elements, enabling you to customize the display effect of the audience list based on business needs, creating a unique visual experience. |
+| <strong>Real-time audience show</strong> | Display the online audience list in the live streaming room in real time, support avatar and nickname display, and provide a clear audience information view, enabling hosts to intuitively understand audience composition. |
+| <strong>Responsive design</strong> | Component support includes UI solutions for desktop and mobile terminals, automatically adapting to different device screen dimensions to provide consistent user experience and meet multi-platform live streaming needs. |
+| <strong>Customizable UI</strong> | Provide flexible slot mechanism, support customization of audience tags, profile photo style and other elements, enabling you to customize the display effect of the audience list based on business needs, creating a unique visual experience. |
 
 ## Component Integration
 
@@ -17,17 +17,17 @@ Before performing quick integration, you need to refer to preparations, meet the
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### Step 3: Integrating the Audience List Component
@@ -35,7 +35,7 @@ yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 Introduce and use the **audience list component** in your project. You can copy the following example code directly to display the live broadcast audience list in your project.
 ``` typescript
 <template>
-  <UIKitProvider theme="dark" language="zh-CN">
+  <UIKitProvider theme="dark">
     <div class="app">
         <div class="live-audience-container">
           <LiveAudienceList class="live-audience-list"/>
@@ -47,10 +47,10 @@ Introduce and use the **audience list component** in your project. You can copy
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveAudienceList, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
+import { LiveAudienceList, useLoginState, useLiveListState } from 'tuikit-atomicx-vue3';
 
 const { login } = useLoginState();
-const { joinLive } = useLiveState();
+const { joinLive } = useLiveListState();
 
 async function initLogin() {
   try {
@@ -58,6 +58,7 @@ async function initLogin() {
       sdkAppId: 0,        // SDKAppID, see Step 1 to get
       userId: '',         // UserID, see Step 1 to get
       userSig: '',        // userSig, see Step 1 to get
+
     });
   } catch (error) {
     console.error('login error:', error);
@@ -80,9 +81,9 @@ onMounted(async () => {
 **Audience List Component** provides flexible custom slots, supporting adjustment of audience tags, unique identifiers and other elements' style and layout based on your needs. Below are slot usage examples.
 
 ### Component Slot
-| **Name** | **Parameter** | **Description** |
+| <strong>Name</strong> | <strong>Parameter</strong> | <strong>Description</strong> |
 | --- | --- | --- |
-| **customAudienceInfo** | **audience: AudienceInfo** | **Customize audience information display UI** |
+| <strong>customAudienceInfo</strong> | <strong>audience: AudienceInfo</strong> | <strong>Customize audience information display UI</strong> |
 
 ``` typescript
 // Example of using the customAudienceInfo slot
@@ -92,13 +93,13 @@ onMounted(async () => {
 ```
 
 `AudienceInfo` defines the basic info and status of each audience in a live streaming room:
-| **Parameter** | **Type** | **Description** |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Description</strong> |
 | --- | --- | --- |
-| `userId` | `string` | The audience's unique identifier must be unique across the entire system. |
-| `userName` | `string` | The name displayed for the audience in the live stream supports Chinese and English characters. If empty, the userId is displayed. |
-| `avatarUrl` | `string` | The complete URL of the audience avatar supports HTTPS protocol. |
-| `isMessageDisabled` | `boolean` | Whether the audience is muted. true indicates muted, false indicates normal speaking. |
-| `joinTime` | `number` | Timestamp of audience entering the live room, for sorting and statistics |
+| <code>userId</code> | <code>string</code> | The audience's unique identifier must be unique across the entire system. |
+| <code>userName</code> | <code>string</code> | The name displayed for the audience in the live stream supports Chinese and English characters. If empty, the userId is displayed. |
+| <code>avatarUrl</code> | <code>string</code> | The complete URL of the audience avatar supports HTTPS protocol. |
+| <code>isMessageDisabled</code> | <code>boolean</code> | Whether the audience is muted. true indicates muted, false indicates normal speaking. |
+| <code>joinTime</code> | <code>number</code> | Timestamp of audience entering the live room, for sorting and statistics |
 
 ``` typescript
 interface AudienceInfo {
@@ -111,10 +112,10 @@ interface AudienceInfo {
 ```
 
 ### Component Properties
-| **Attribute name** | **Type** | **Default Value** | **Description** |
+| <strong>Attribute name</strong> | <strong>Type</strong> | <strong>Default Value</strong> | <strong>Description</strong> |
 | --- | --- | --- | --- |
-| `height` | `string` | **'500px'** | Component height, supports CSS units (px, %, vh) |
-| `style` | `CSSProperties` | **{}** | Custom style object used to override component default style |
+| <code>height</code> | <code>string</code> | <strong>'500px'</strong> | Component height, supports CSS units (px, %, vh) |
+| <code>style</code> | <code>CSSProperties</code> | <strong>{}</strong> | Custom style object used to override component default style |
 
 #### Custom Slot Example
 

package/resource/{doc/livekit/preset/live/vue/components → knowledge/livekit/preset/live/vue/features}/live-view.md

@@ -1,10 +1,10 @@
 This document provides a detailed introduction to the **live stream video component (LiveView)**. You can refer to the sample code in this document to integrate our pre-developed components into your existing project, or customize the style and layout according to your needs by following the component customization section in the document.
 
 ## Core Features
-| **Feature Category** | **Specific Capacity** |
+| <strong>Feature Category</strong> | <strong>Specific Capacity</strong> |
 | --- | --- |
-| **Smart stream switchover** | LiveView can switch stream types automatically based on the current user's identity (audience or host).<br>- Audience mode: The component plays ultra-low-latency video streams to ensure smooth viewing for millions of audience members while drastically reducing traffic costs.<br>- Connected mode: The component automatically switches to TRTC streaming, providing millisecond-level ultra-low latency to ensure real-time, clear interaction experience between connected users. |
-| **Customizable UI** | To meet diverse business scenarios, LiveView provides custom UI slots, enabling full control over the co-broadcasting user's video stream area. You can rewrite the UI display, flexibly define the user's avatar, nickname, status, and other information, and easily create a unique visual experience that matches your brand style. |
+| <strong>Smart stream switchover</strong> | LiveView can switch stream types automatically based on the current user's identity (audience or host).<br>- Audience mode: The component plays ultra-low-latency video streams to ensure smooth viewing for millions of audience members while drastically reducing traffic costs.<br>- Connected mode: The component automatically switches to TRTC streaming, providing millisecond-level ultra-low latency to ensure real-time, clear interaction experience between connected users. |
+| <strong>Customizable UI</strong> | To meet diverse business scenarios, LiveView provides custom UI slots, enabling full control over the co-broadcasting user's video stream area. You can rewrite the UI display, flexibly define the user's avatar, nickname, status, and other information, and easily create a unique visual experience that matches your brand style. |
 
 ## Component Integration
 
@@ -34,7 +34,7 @@ yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 Introduce and use LiveView in your project. Copy the following example code directly to your project to join the corresponding live streaming room for co-streaming.
 ``` typescript
 <template>
-  <UIKitProvider theme="dark" language="zh-CN">
+  <UIKitProvider theme="dark">
     <div class="app">
       <LiveView />
     </div>
@@ -44,11 +44,11 @@ Introduce and use LiveView in your project. Copy the following example code dire
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveView, useLoginState, useLiveState, useCoGuestState } from 'tuikit-atomicx-vue3';
+import { LiveView, useLoginState, useLiveListState, useCoGuestState } from 'tuikit-atomicx-vue3';
 
 const { login } = useLoginState();
-const { joinLive } = useLiveState();
-const { sendCoGuestRequest } = useCoGuestState();
+const { joinLive } = useLiveListState();
+const { applyForSeat } = useCoGuestState();
 
 async function initLogin() {
   try {
@@ -73,6 +73,7 @@ onMounted(async () => {
   // After the audience successfully goes on mic, LiveView autoplays TRTC streaming.
   await sendCoGuestRequest();
 });
+
 </script>
 
 <style>.app {width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center}</style>
@@ -83,9 +84,10 @@ onMounted(async () => {
 LiveView provides flexible component customization slots. These slots support adjusting the style and layout of elements like avatars, nicknames, and status based on your needs, and also allow customizing the video stream area UI for co-streaming. Below are usage examples for the slots.
 
 #### Component Slot
-| **Name** | **Parameter** | **Description** |
-| --- | --- | --- |
-| streamViewUI | userInfo | Display UI for custom seat |
+
+|**Name**|**Parameter**|**Description**|
+|---------|---------|---------|
+|streamViewUI|userInfo|Display UI for custom seat|
 
 ``` java
 // Example of using the streamViewUI slot
@@ -95,9 +97,9 @@ LiveView provides flexible component customization slots. These slots support ad
 ```
 1. `userInfo` defines the basic info and status of each seat in a live streaming room:
 
-| Parameter | Type | Required | Description |
-| --- | --- | --- | --- |
-| `userInfo` | `userInfo` | optional | User information of the current occupant in this seat. If the seat is empty, it is `undefined`. |
+   |Parameter|Type|Required|Description|
+   |---------|---------|---------|---------|
+   |`userInfo`|`userInfo`|optional|User information of the current occupant in this seat. If the seat is empty, it is `undefined`.|
 
    ``` typescript
    interface SeatInfo {
@@ -106,16 +108,16 @@ LiveView provides flexible component customization slots. These slots support ad
    ```
 2. `userInfo` defines the user details of each seat in a live streaming room:
 
-| Parameter | Type | Required | Description |
-| --- | --- | --- | --- |
-| `roomId` | `string` | Required | The unique identifier of the current live streaming room, used to distinguish different live streaming rooms |
-| `userId` | `string` | Required | User's unique identifier must be unique in the entire system |
-| `userName` | `string` | Required | The name displayed for users in live streams supports Chinese and English characters. |
-| `avatarUrl` | `string` | Required | The complete URL address of the user profile photo, supporting HTTPS protocol |
-| `microphoneStatus` | `DeviceStatus` | Required | Microphone status |
-| `microphoneStatusReason` | `DeviceStatusReason` | Required | The cause for mic status change, to distinguish between user proactive operation and administrator operation |
-| `cameraStatus` | `DeviceStatus` | Required | Camera status |
-| `cameraStatusReason` | `DeviceStatusReason` | Required | The cause for camera status change, to distinguish between user proactive operation and administrator operation |
+   |Parameter|Type|Required|Description|
+   |---------|---------|---------|---------|
+   |`roomId`|`string`|Required|The unique identifier of the current live streaming room, used to distinguish different live streaming rooms|
+   |`userId`|`string`|Required|User's unique identifier must be unique in the entire system|
+   |`userName`|`string`|Required|The name displayed for users in live streams supports Chinese and English characters.|
+   |`avatarUrl`|`string`|Required|The complete URL address of the user profile photo, supporting HTTPS protocol|
+   |`microphoneStatus`|`DeviceStatus`|Required|Microphone status|
+   |`microphoneStatusReason`|`DeviceStatusReason`|Required|The cause for mic status change, to distinguish between user proactive operation and administrator operation|
+   |`cameraStatus`|`DeviceStatus`|Required|Camera status|
+   |`cameraStatusReason`|`DeviceStatusReason`|Required|The cause for camera status change, to distinguish between user proactive operation and administrator operation|
 
    ``` typescript
    interface SeatUserInfo {
@@ -142,13 +144,13 @@ LiveView provides flexible component customization slots. These slots support ad
    ```
 3. `RegionInfo` defines the display area and hierarchical information of the seat in the video canvas:
 
-| Parameter | Type | Required | Description |
-| --- | --- | --- | --- |
-| `x` | `number` | Required | X-coordinate of the region's top-left corner relative to the canvas (pixel value) |
-| `y` | `number` | Required | Y-coordinate of the region's top-left corner relative to the canvas (pixel value) |
-| `w` | `number` | Required | Width of the region (pixel value), must be greater than 0 |
-| `h` | `number` | Required | Height of the region (pixel value), must be greater than 0 |
-| `zOrder` | `number` | Required | Z-order, the larger the value, the more positioned towards the front, for processing display priority of overlap regions |
+   |Parameter|Type|Required|Description|
+   |---------|---------|---------|---------|
+   |`x`|`number`|Required|X-coordinate of the region's top-left corner relative to the canvas (pixel value)|
+   |`y`|`number`|Required|Y-coordinate of the region's top-left corner relative to the canvas (pixel value)|
+   |`w`|`number`|Required|Width of the region (pixel value), must be greater than 0|
+   |`h`|`number`|Required|Height of the region (pixel value), must be greater than 0|
+   |`zOrder`|`number`|Required|Z-order, the larger the value, the more positioned towards the front, for processing display priority of overlap regions|
 
    ``` typescript
    interface RegionInfo {
@@ -160,9 +162,9 @@ LiveView provides flexible component customization slots. These slots support ad
    }
    ```
 
-#### Custom Slot Example
+#### Custom Mic Seat Example
 
-To help you better experience and understand the customized capability of the LiveView component's streamViewUI slot, we provide a **live streaming and mic connection scenario** example for your reference. You can refer to the above **Step 3** to incrementally copy the following code into your project to achieve a similar scenario effect.
+To help you better experience and understand the customized capability of the LiveView component's streamViewUI, we provide a **live streaming and mic connection scenario** example for your reference. You can refer to the above **Step 3** to incrementally copy the following code into your project to achieve a similar scenario effect.
 ``` typescript
 <template>
   <LiveView>

package/resource/knowledge/push/config/android.md

@@ -0,0 +1,92 @@
+## Operation step
+
+### Step 1. Register your app with vendor push platforms
+
+Offline push requires registering your app with each vendor's push platform to obtain parameters such as AppID and AppKey to enable the offline push feature. Currently supported mobile manufacturers are: [Mi](https://dev.mi.com/console/doc/detail), [Huawei](https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/service-introduction-0000001050040060), [HONOR](https://developer.hihonor.com/cn/kitdoc), [OPPO](https://open.oppomobile.com/wiki/doc#id=10195), [vivo](https://dev.vivo.com.cn/documentCenter/doc/281), [Meizu](https://open.flyme.cn/service/3), [Google FCM](https://console.firebase.google.com/u/0/).
+
+### Step 2. Create resources in the Chat console
+
+Log in to Tencent Cloud [Chat Console](https://console.trtc.io/chat/push-plugin-push-identifier), then in the **Push Management** > **Access Settings** feature section, add each vendor's push certificate, and configure the AppID, AppKey, AppSecret, and other parameters obtained in Step 1 to the added push certificate.
+
+Explanation of the **Subsequent Actions** option:
+- Open Application: Clicking the notification bar launches the app, by default starting the app's Launcher interface;
+
+- Open Web Page: Clicking the notification bar will redirect to the configured web link;
+
+- Open the specified interface within the app: clicking the notification bar will redirect the interface based on the configured self Definition, see [Custom Redirect on Click](https://www.tencentcloud.com/zh/document/product/1047/60575).
+
+   > **Note：**
+   >
+
+   > Each vendor only supports the configuration of one certificate.
+   >
+
+【Mi】
+
+|Vendor Push Platform|Configuring in the Chat console|
+|---------|---------|
+|||
+
+【Huawei】
+| Vendor Push Platform | Configuring in the Chat console |
+| --- | --- |
+|  | <strong>Note:</strong><br>Client ID corresponds to AppID, Client Secret corresponds to AppSecret. |
+
+【OPPO】
+
+|Vendor Push Platform|Configuring in the Chat console|
+|---------|---------|
+|||
+
+【vivo】
+
+|Vendor Push Platform|Configuring in the Chat console|
+|---------|---------|
+|||
+
+For receipt configuration, please refer to: [Message Delivery Statistics Configuration - vivo](https://www.tencentcloud.com/document/product/1047/60552#daa658b0-1ac0-44a8-8a47-7ec8822ebe82).
+
+【Meizu】
+
+|Vendor Push Platform|Configuring in the Chat console|
+|---------|---------|
+|||
+
+For receipt configuration, please refer to: [Message Delivery Statistics Configuration - Meizu](https://www.tencentcloud.com/document/product/1047/60552#daa658b0-1ac0-44a8-8a47-7ec8822ebe82).
+
+【HONOR】
+
+|Vendor Push Platform|Configuring in the Chat console|
+|---------|---------|
+|||
+
+【Google FCM】
+
+|Vendor Push Platform|Configuring in the Chat console|
+|---------|---------|
+|||
+
+   > **Note:**
+   >
+
+   > Regarding **Click for Subsequent Actions** supports the Report Statistics feature:
+   >
+>   1. If you choose to open an app or a web page, purchasing the plugin will by default support reporting statistics.
+>   2. If you choose to open a specified interface within the application:
+>   - For new certificate status, please directly use the auto-fill default value to support click statistics reporting.
+>   - If there was a certificate configured previously, continue using the old certificate and modify it to the default value to support reporting statistics, or regenerate a new certificate.
+
+### About FCM Data Messaging
+
+FCM provides two push methods: Notification Message and Data Messaging.
+- Notification messages have a simple style and do not differentiate between devices. Once successfully integrated, offline push can be performed.
+
+- Data Messaging, offering rich customization for specific devices, supports reach and click reporting, and requires testing on the device before going live after integration.
+
+   The console defaults to Notification Message, and switching between modes can be done in the Chat Console:
+
+   > **Note:**
+   >
+
+   > FCM data messaging capability only supports TIMPush version 7.8 and above on pixel phones. Other manufacturers' devices need to be tested for support.
+   >

package/resource/knowledge/push/config/harmonyos.md

@@ -0,0 +1,83 @@
+> **Note:**
+>
+
+> Each vendor only supports the configuration of one certificate.
+>
+
+## HarmonyOS Console Configuration
+
+### Step 1: Enabling the Push Service
+1. Log in to [AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/), select **Develop and Services** on the homepage, choose the corresponding project, and click **Enable Now** to enable the push service.
+
+2. In the project setting, search for "Push" on the API management tab and enable the push service.
+
+### Step 2: Certificate and Signature Application
+1. **Certificate application: You must apply for a debug certificate in the debug stage, and apply for a release certificate in the release stage.**
+
+  - Log in to [AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html), select **Certificates, APP ID and Profile**.
+
+  - Select **Certificates, APP ID and Profile** in the left sidebar, choose **Certificate**, then click **Add Certificate** on the **Certificate** page.
+
+  - In the pop-up "Add Certificate" window, fill in the applied certificate information and click **Submit**.
+
+      > **Note:**
+      >
+
+      > Certificate request file (CSR) need to be applied for in DevEco Studio. For details, see [generate certificate request file](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-signing#section462703710326).
+      >
+
+  - After a successful application, the **certificate management** page displays the certificate name and other information. Click **Download** to save the generated certificate to your local directory for subsequent debug signature usage.
+
+2. **Register debug device (required during debug stage only)**
+
+  - Log in to [AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html), select **Certificates, APP ID and Profile**.
+
+  - Select **Certificates, APP ID and Profile** in the left sidebar, choose **Device**, then enter the **Device** page.
+
+  - To add a single device, click **Add Device** in the upper right corner, fill in the device information in the popup window, then click **Submit** once completed.
+
+      > **Note:**
+      >
+
+      > Note: For how to obtain UDID for different device types, please refer to [UDID Retrieval Method](https://developer.huawei.com/consumer/cn/doc/app/agc-help-add-device-0000001946142249#section67331926102911).
+      >
+
+3. **Profile file application: You must apply for a debug profile file in the debug stage, and apply for a release profile file in the release stage.**
+
+  - Log in to [AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html), select **Certificates, APP ID and Profile**.
+
+  - Select **Profile** in the left sidebar, then click **Add**.
+
+  - On the **Add Profile** page, enter the application name, profile name and other required information, then click **Add** once all information is provided.
+
+4. **Manual signing.**
+
+   Configure the SecretKey (.p12) file, applied debug certificate (.cer) file, and debug Profile (.p7b) file in DevEco Studio. In the **File > Project Structure > Project > Signing Configs** window, uncheck "Automatically generate signature" (if it is a HarmonyOS app, check "**Support HarmonyOS**"), then configure the project's signature information.
+
+### Step 3: Create an IM Console Certificate Credential
+1. Log in to the [API Console](https://gitee.com/link), click **My APIs** in the sidebar on the left side of the page. Ensure push service is available under the project name. If not, click **Apply for new HMS API service** on the right.
+
+2. Click in the left sidebar **API service** > **Credential**, then click **Create credential** under **Service account key**.
+
+3. Fill in the required fields and click **Create public/private key**. Create and download the JSON file. The downloaded file is exactly your Service Account credential file.
+
+4.  Save the downloaded file for IM Console Configuration usage.
+
+### Step 4: Apply for Scenario-Based Rights and Interests
+
+Push Kit supports various scenario-based message types. Among them, certain scenario-based message types require you to apply for special rights and interests for normal sending, such as Chat message type scenarios.
+
+Log in to [AppGallery Connect](https://developer.huawei.com/consumer/cn/service/josp/agc/index.html), select **Develop and Services**, click **Push Service**, and on the **Configuration** page, click to apply for self-categorization benefits. Follow the prompts to apply and activate. For detailed introduction, refer to [Push Scenario-Based Message Benefits](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/push-apply-right).
+
+## Chat Console Configuration
+1. Log in to [Chat Console](https://console.qcloud.com/avc), go to the [Chat > Push > Access Settings](https://console.trtc.io/chat/push-plugin-push-identifier) page, and click Add Certificate to create a certificate.
+
+2. Select the certificate credential generated in Procedure 3 above and upload it to the newly added HarmonyOS certificate.
+
+3. Click subsequent actions
+
+  - Open app: Click the notification bar message to pull up the application homepage by default.
+
+  - Open specified in-app page: After receiving a push message, click the notification bar. The component will Webhook this click event and offline message pass-through.
+
+4. After adding a certificate, the IM console will allocate a certificate ID for you to access and use.