@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/livekit/preset/live/vue/components/barrage.md

@@ -0,0 +1,291 @@
+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** |
+| --- | --- |
+| **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. |
+
+## Component Integration
+
+### Step 1: Configuring the Environment and Activating the Service
+
+Before performing quick integration, you need to refer to preparations, meet the related environment configuration and activate the corresponding service.
+
+### Step 2: Installing Dependencies
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @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.
+``` typescript
+<template>
+  <UIKitProvider theme="dark" language="en-US">
+    <div class="app">
+      <div class="chat-container">
+        <div class="chat-content">
+          <BarrageList class="barrage-list" />
+        </div>
+        <div class="chat-input">
+          <BarrageInput class="barrage-input" />
+        </div>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<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';
+
+const { login, loginUserInfo } = useLoginState();
+const { joinLive } = useLiveState();
+
+async function initLogin() {
+  try {
+    await login({
+      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);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();
+  await joinLive({
+    liveId: 'input corresponding live streaming room LiveId',     // enter live room by inputting corresponding liveId
+  });
+});
+</script>
+
+<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.chat-container{width:100%;max-width:500px;height:600px;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.chat-content{flex:1;overflow:hidden}.barrage-list{width:100%;height:100%}.chat-input{background-color:var(--bg-color-dialog);padding:16px}.barrage-input{width:100%}</style>
+```
+
+## Customize Component
+
+**Barrage Message Component** provides users with various and dimensional `Props` APIs for custom requirements, allowing users to customize features or UI. Parameter content is as shown in the table below.
+
+> **Note:**
+>
+
+> 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;
+>
+
+### 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. |
+
+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** |
+| --- | --- |
+| **Component Property** | `filter`,`messageAggregationTime` |
+| **Replaceable subcomponent** | `Message`,`MessageTimeDivider`,`LocalNoticeMessage` |
+| **Custom style** | `ContainerStyle`,`ItemStyle`,`height`,`style` |
+
+#### Filter Message
+
+By setting the `filter` parameter, you can flexibly control the message content displayed in the barrage message component.
+``` typescript
+<BarrageList :filter="(message) => message.type === 'TIMTextElem'" />
+```
+
+#### Message Aggregation Time
+
+By setting the `messageAggregationTime` parameter, you can control the grouping time interval.
+``` typescript
+<BarrageList :messageAggregationTime="300" />
+```
+
+#### Custom Style
+
+Barrage Message Component provides `containerStyle`, `itemStyle`, `custom child component`, etc., for customizing component styles.
+1. To customize the message list container style, you can pass a style object to the `containerStyle` attribute.
+
+   **Example: Custom container padding**
+
+   ``` typescript
+   <BarrageList :containerStyle="{ padding: '0px' }" />
+   ```
+2. To customize a single message style, you can pass a style object to the `itemStyle` attribute.
+
+   **Example: Custom message item spacing, border, and message bubble color**
+
+   ``` typescript
+   <BarrageList :itemStyle="{ borderRadius: '10px', background: '#1C66e5', padding: '10px', boxSizing: 'border-box'}" />
+   ```
+3. The barrage message component supports custom message display components, and you can fully control the rendering method.
+
+   **Example: Custom Message Component**
+
+   ``` typescript
+   // MyCustomMessage.vue
+   <template>
+     <div class="custom-message">
+       <div class="message-header">
+         <span class="user-name">{{ getUserName(message) }}</span>
+         <span class="message-time">{{ formatTime(message.time) }}</span>
+       </div>
+       <div class="message-content">
+         {{ getMessageText(message) }}
+       </div>
+     </div>
+   </template>
+
+   <script setup lang="ts">
+   interface SimpleMessage {
+     id: string;
+     from: string;
+     nick?: string;
+     nameCard?: string;
+     time: number;
+     type: string;
+     content: string;
+     avatar?: string;
+   }
+
+   interface Props {
+     message: SimpleMessage;
+     isLastInChunk?: boolean;
+   }
+
+   const props = defineProps<Props>();
+
+   const formatTime = (timestamp: number) => {
+     return new Date(timestamp * 1000).toLocaleTimeString('zh-CN', {
+       hour: '2-digit',
+       minute: '2-digit'
+     });
+   };
+
+   const getUserName = (message: SimpleMessage) => {
+     return message.nameCard || message.nick || message.from || 'anonymous user';
+   };
+
+   const getMessageText = (message: SimpleMessage) => {
+     if (message.type === 'text') {
+       return message.content || '';
+     } else if (message.type === 'image') {
+       return '[image message]';
+     } else if (message.type === 'emoji') {
+       return '[emoji message]';
+     }
+     return '[other types of messages]';
+   };
+   </script>
+
+   <style scoped>.custom-message{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:12px;border-radius:12px;margin:4px 0;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease}.custom-message:hover{transform:translateY(-2px)}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;opacity:0.9}.user-name{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{font-size:11px;opacity:0.7}.message-content{font-size:14px;line-height:1.4;word-break:break-word}</style>
+
+   // Use the barrage message component for use in
+   <template>
+      <BarrageList :Message="MyCustomMessage" />
+   </template>
+
+   <script setup lang="ts">
+   import MyCustomMessage from "./MyCustomMessage.vue";
+   </script>
+   ```
+| **Before modification** | **After modification** |  |  |
+| --- | --- | --- | --- |
+| **Custom container padding** | **Custom message item spacing and border** | **Custom Message Component** |  |
+|  |  |  |  |
+
+### 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. |
+
+#### **Events**
+| **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** |
+| --- | --- |
+| **Size control** | `width`,`height`,`minHeight`,`minWidth` |
+| **Input restriction** | `maxLength` |
+| **Custom style** | `ContainerStyle`,`ContainerClass` |
+
+#### Size Control
+
+By setting `width`, `height`, `minHeight`, `maxHeight` parameters, you can flexibly control the size of **BarrageInput**.
+``` typescript
+<BarrageInput width="400px" height="60px" minHeight="40px" maxHeight="120px" />
+```
+
+#### Input Restriction
+
+By setting the `maxLength` parameter, you can control the maximum number of characters for input content.
+``` typescript
+<BarrageInput :maxLength="100" />
+```
+
+#### Custom Style
+
+The message send 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**
+
+   ``` typescript
+   <BarrageInput :containerStyle="{ backgroundColor: '#a8abb2', borderRadius: '0 0', boxShadow: '0 2px 8px rgba(0,0,0,0.1)'}" />
+   ```
+2. To customize the input box container class name, you can pass a class name string to the `containerClass` attribute.
+
+   **Example: Custom container class name**
+
+   ``` typescript
+   <template>
+     <BarrageInput containerClass="my-custom-input-container" />
+   </template>
+
+   <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** |  |
+| --- | --- | --- |
+| **Custom container background and border rounded corners** | **Custom message item spacing and border** |  |
+|  |  |  |

package/resource/doc/livekit/{live → preset/live}/vue/components/co-guest-panel.md

@@ -1,59 +1,30 @@
 This document provides a detailed introduction to **Link Management Panel (CoGuestPanel)**. You can refer to the sample code in this document for seamless integration of our pre-developed components in your existing project, or customize the style and layout according to your needs by following the customization section of components in the document.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/37463362991511f0961e52540099c741.png)
-
-
 ## Core Features
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Feature Name**</td>
-
-<td rowspan="1" colSpan="1" >**Detailed Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Tab switchover**</td>
-
-<td rowspan="1" colSpan="1" >The UI offers dual tabs, allowing users to quickly switch between the Mic Connection Request and Mic Connection Management feature modules. It supports status memory and message prompts.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Application List**</td>
-
-<td rowspan="1" colSpan="1" >Display all pending Mic Connection Requests in real time, showing user avatars, Nicknames, and status. Supports sorting by time and the filter function.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Anchor Operations**</td>
-
-<td rowspan="1" colSpan="1" >Provide abundant one-click operation buttons, support accept application, reject application, disconnect and other features, with real-time feedback on operation results.</td>
-</tr>
-</table>
-
+| **Feature Name** | **Detailed Description** |
+| --- | --- |
+| **Tab switchover** | The UI offers dual tabs, allowing users to quickly switch between the Mic Connection Request and Mic Connection Management feature modules. It supports status memory and message prompts. |
+| **Application List** | Display all pending Mic Connection Requests in real time, showing user avatars, Nicknames, and status. Supports sorting by time and the filter function. |
+| **Anchor Operations** | Provide abundant one-click operation buttons, support accept application, reject application, disconnect and other features, with real-time feedback on operation results. |
 
 ## Component Integration
 
 ### Step 1: Configuring the Environment and Activating the Service
 
-Before performing quick integration, you need to refer to [preparations](https://write.woa.com/document/185222107981008896) to meet the related environment configuration and activate the corresponding service.
+Before performing quick integration, you need to refer to preparations to meet the related environment configuration and activate the corresponding service.
 
 ### Step 2: Dependency Installation
 
-
-
-
 【npm】
 ``` bash
 npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
-
 【pnpm】
 ``` bash
 pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
-
 【yarn】
 ``` bash
 yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
@@ -95,7 +66,7 @@ onMounted(async () => {
   await initLogin();
   // enter live room by inputting corresponding liveId
   await joinLive({
-    liveId: 'input corresponding live streaming room LiveId',     
+    liveId: 'input corresponding live streaming room LiveId',
   });
 });
 </script>
@@ -115,16 +86,6 @@ The Link Management Panel supports style customization via CSS variables. You ca
 .co-guest-panel{--text-color-primary:#2d3748;--text-color-secondary:#93a3bb;--text-color-link:#20c9e7;--bg-color-primary:#ffffff;--bg-color-hover:#d6e7f3;--stroke-color-primary:#8bb6ef;--stroke-color-secondary:#90c0f4;--shadow-light:0 2px 8px rgba(69,67,67,0.08);--shadow-medium:0 4px 16px rgba(93,87,87,0.12);--transition:all 0.3s ease;}.co-guest-panel .panel-content{background:var(--bg-color-primary);border-radius:16px;border:1px solid var(--stroke-color-primary);box-shadow:var(--shadow-medium);transition:var(--transition);overflow:hidden;}.co-guest-panel .panel-content:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-2px);border-color:var(--stroke-color-secondary);}.co-guest-panel .user-item{padding:16px;margin:8px 0;background:var(--bg-color-primary);border:1px solid var(--stroke-color-primary);border-radius:12px;transition:var(--transition);cursor:pointer;}.co-guest-panel .user-item:hover{background:var(--bg-color-hover);border-color:var(--text-color-link);box-shadow:var(--shadow-light);transform:translateY(-1px);}.co-guest-panel .user-item:active{transform:translateY(0);transition:all 0.15s ease;}.co-guest-panel .user-item.selected{background:rgba(102,126,234,0.08);border-color:var(--text-color-link);box-shadow:var(--shadow-light);}
 </style>
 ```
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Before modification**</td>
-
-<td rowspan="1" colSpan="1" >**After modification**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/e2fef49f991611f0b38f5254001c06ec.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/1b99086e991711f0b38f5254001c06ec.png)</td>
-</tr>
-</table>
+| **Before modification** | **After modification** |
+| --- | --- |
+|  |  |

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

@@ -1,59 +1,30 @@
 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.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/254194d798f511f081465254007c27c5.png)
-
-
 ## Core Features
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Feature Category**</td>
-
-<td rowspan="1" colSpan="1" >**Specific capabilities**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Real-time audience show**</td>
-
-<td rowspan="1" colSpan="1" >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.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Responsive design**</td>
-
-<td rowspan="1" colSpan="1" >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.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Customizable UI**</td>
-
-<td rowspan="1" colSpan="1" >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.</td>
-</tr>
-</table>
-
+| **Feature Category** | **Specific capabilities** |
+| --- | --- |
+| **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. |
 
 ## Component Integration
 
 ### Step 1: Configuring the Environment and Activating the Service
 
-Before performing quick integration, you need to refer to [preparations](https://write.woa.com/document/185222107981008896), meet the required environment configuration and activate the corresponding service.
+Before performing quick integration, you need to refer to preparations, meet the required environment configuration and activate the corresponding service.
 
 ### Step 2: Dependency Installation
 
-
-
-
 【npm】
 ``` bash
 npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
 ```
 
-
 【pnpm】
 ``` bash
 pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 ```
 
-
 【yarn】
 ``` bash
 yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
@@ -94,7 +65,7 @@ async function initLogin() {
 }
 
 onMounted(async () => {
-  await initLogin();                    
+  await initLogin();
   await joinLive({
     liveId: 'input the corresponding live streaming room LiveId',     // enter live room
   });
@@ -109,23 +80,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
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Name**</td>
-
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**customAudienceInfo**</td>
-
-<td rowspan="1" colSpan="1" >**audience: AudienceInfo**</td>
-
-<td rowspan="1" colSpan="1" >**Customize audience information display UI**</td>
-</tr>
-</table>
+| **Name** | **Parameter** | **Description** |
+| --- | --- | --- |
+| **customAudienceInfo** | **audience: AudienceInfo** | **Customize audience information display UI** |
 
 ``` typescript
 // Example of using the customAudienceInfo slot
@@ -135,55 +92,13 @@ onMounted(async () => {
 ```
 
 `AudienceInfo` defines the basic info and status of each audience in a live streaming room:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userId`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >The audience's unique identifier must be unique across the entire system.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userName`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >The name displayed for the audience in the live stream supports Chinese and English characters. If empty, the userId is displayed.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`avatarUrl`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >The complete URL of the audience avatar supports HTTPS protocol.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`isMessageDisabled`</td>
-
-<td rowspan="1" colSpan="1" >`boolean`</td>
-
-<td rowspan="1" colSpan="1" >Whether the audience is muted. true indicates muted, false indicates normal speaking.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`joinTime`</td>
-
-<td rowspan="1" colSpan="1" >`number`</td>
-
-<td rowspan="1" colSpan="1" >Timestamp of audience entering the live room, for sorting and statistics</td>
-</tr>
-</table>
+| **Parameter** | **Type** | **Description** |
+| --- | --- | --- |
+| `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 |
 
 ``` typescript
 interface AudienceInfo {
@@ -192,42 +107,14 @@ interface AudienceInfo {
   avatarUrl?: string;          // Audience avatar URL (optional)
   isMessageDisabled?: boolean; // Whether muted (optional)
   joinTime?: number;           // Entry timestamp (optional)
-} 
+}
 ```
 
 ### Component Properties
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Attribute name**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Default Value**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`height`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >**'500px'**</td>
-
-<td rowspan="1" colSpan="1" >Component height, supports CSS units (px, %, vh)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`style`</td>
-
-<td rowspan="1" colSpan="1" >`CSSProperties`</td>
-
-<td rowspan="1" colSpan="1" >**{}**</td>
-
-<td rowspan="1" colSpan="1" >Custom style object used to override component default style</td>
-</tr>
-</table>
-
+| **Attribute name** | **Type** | **Default Value** | **Description** |
+| --- | --- | --- | --- |
+| `height` | `string` | **'500px'** | Component height, supports CSS units (px, %, vh) |
+| `style` | `CSSProperties` | **{}** | Custom style object used to override component default style |
 
 #### Custom Slot Example
 
@@ -238,18 +125,13 @@ To help you better experience and understand the **audience list component**'s *
     <template #customAudienceInfo="{ audience }">
       <div class="custom-audience-info">
         avatar
-        <img 
-          :src="audience.avatarUrl || defaultAvatar" 
-          :alt="audience.userName || audience.userId"
-          class="audience-avatar"
-        />
-        
+
         audience information
         <div class="audience-details">
           <span class="audience-name">{{ audience.userName || audience.userId }}</span>
           <span class="join-time">{{ formatJoinTime(audience.joinTime) }}</span>
         </div>
-        
+
         status indicator
         <div v-if="audience.isMessageDisabled" class="muted-indicator">🔇</div>
       </div>
@@ -264,13 +146,13 @@ const defaultAvatar = 'xxx'; // Input default avatar Url
 
 const formatJoinTime = (timestamp?: number) => {  // Format join time
   if (!timestamp) return 'just now join';
-  
+
   const now = Date.now();
   const diff = now - timestamp;
   const minutes = Math.floor(diff / (1000 * 60));
   const hours = Math.floor(diff / (1000 * 60 * 60));
   const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  
+
   if (days > 0) return `${days} days ago join`;
   if (hours > 0) return `${hours} hours ago join`;
   if (minutes > 0) return `${minutes} minutes ago join`;