@tencent-rtc/mcp 1.2.8 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent-rtc/mcp",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "description": "Tencent Cloud MCP Server for SDK",
   "type": "module",
   "main": "index.js",

package/resource/doc/chatuikit/faq/common/server.md

@@ -0,0 +1,44 @@
+---
+product: 'Chat'
+tech_stack: 'server'
+framework: 'common'
+title: 'Common Issues Knowledge Base'
+keywords: ['console', 'server-side userSig generation', 'restapi', 'pre-callback', 'post-callback', 'nodejs/go/java/python and other server-side language userSig generation example code']
+---
+
+# Common Issues Knowledge Base
+
+## UserSig Solutions
+
+### Q: How to generate userSig on the server side?
+**A:** For specific methods of generating userSig on the server side, please refer to: https://trtc.io/document/34385?product=chat&menulabel=uikit&platform=react. The documentation provides solutions for multiple server-side languages.
+
+### Q: What's the difference in message format between pre-send and post-send callbacks in Chat? How to distinguish system messages from user messages?
+**A:** 
+1. Group message pre-send callback content does not include MsgSeq, MsgTime and other information. For details, please refer to the following documentation:
+- One-to-one pre-send callback: https://trtc.io/document/34364?product=chat&menulabel=uikit&platform=react
+- One-to-one post-send callback: https://trtc.io/document/34365?product=chat&menulabel=uikit&platform=react
+- Group pre-send callback: https://trtc.io/document/34374?product=chat&menulabel=uikit&platform=react
+- Group post-send callback: https://trtc.io/document/34375?product=chat&menulabel=uikit&platform=react
+2. Normal message format: https://trtc.io/document/33527?product=chat&menulabel=uikit&platform=react
+
+### Q: What are group message priorities and group message frequency controls?
+**A:** Group messages are divided into 3 priorities (`High`, `Normal`, `Low`). If messages in a group exceed the frequency limit, the backend will prioritize delivering high-priority messages. Therefore, users should choose an appropriate priority based on the importance of the message. Total message frequency control refers to the limit on the maximum number of messages that can be sent per second across all endpoints for a single group. The default value is 40 messages/second, using average frequency limiting per second. When the number of messages exceeds the limit, the backend prioritizes delivering messages with relatively higher priority, and messages with the same priority are randomly ordered.
+
+### Q: How to intercept messages sent by users?
+**A:** Business servers can intercept through pre-send callbacks. For specific documentation, please refer to:
+- One-to-one pre-send callback: https://trtc.io/document/34364?product=chat&menulabel=uikit&platform=react
+- Group pre-send callback: https://trtc.io/document/34375?product=chat&menulabel=uikit&platform=react
+
+### Q: How to delete and manage accounts?
+**A:** REST API can be used to delete, import, and query accounts. For specific documentation, please refer to:
+- Delete account: https://trtc.io/document/34955?product=chat&menulabel=uikit&platform=react
+- Import single account: https://trtc.io/document/34953?product=chat&menulabel=uikit&platform=react
+- Import multiple accounts: https://trtc.io/document/34954?product=chat&menulabel=uikit&platform=react
+- Query account: https://trtc.io/document/34956?product=chat&menulabel=uikit&platform=react
+
+### Q: How to handle when the number of accounts exceeds the limit?
+**A:** When importing accounts, if the number of accounts exceeds the limit and you need to create more than 100 accounts, you need to upgrade your application to the Professional Edition. For specific operation instructions, please refer to: https://trtc.io/document/55096.
+
+### Q: How to delete conversations on the server side?
+**A:** Server-side conversation deletion can be done using REST API. For specific documentation, please refer to: https://trtc.io/document/34348?product=chat&menulabel=uikit&platform=react.

package/resource/doc/chatuikit/faq/web_sdk/faq.md

@@ -103,3 +103,60 @@ promise.then(function(imResponse) {
 
 ### Q: How to send file messages with Web SDK?
 **A:** Use [createFileMessage](https://trtc.io/document/47993?product=chat&menulabel=core%20sdk&platform=javascript#creating-a-file-message) to create a file message instance, then use [sendMessage](https://trtc.io/document/47993?product=chat&menulabel=core%20sdk&platform=javascript#sending-a-message) to send the file message.
+
+### Q: How to implement user online status feature in Chat?
+**A:** 
+1. Chat SDK provides **user status query, subscription, unSubscription APIs and status change event notifications**. For details, please refer to: https://trtc.io/document/49561.
+2. For server-side **online status change callback**, please refer to: https://trtc.io/document/34357?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to implement message list feature without UI in Chat SDK?
+**A:** To implement message list feature without UI, you need to combine SDK's `sendMessage`, `getMessageList` APIs and `MESSAGE_RECEIVED` event.
+
+### Q: How to implement @all and @someone features without UI in Chat SDK?
+**A:** SDK provides `createTextAtMessage` API for implementing @ mentions. For details, please refer to: https://trtc.io/document/47993?product=chat&menulabel=core%20sdk&platform=javascript#creating-an-.40-message.
+
+### Q: How to implement search functionality in Chat SDK?
+**A:** SDK provides **cloud search** capabilities, supporting message search, user search, group search, and group member search. API details can be found in the following links:
+- Search messages: https://trtc.io/document/67677?product=chat&menulabel=core%20sdk&platform=javascript
+- Search users: https://trtc.io/document/67679?product=chat&menulabel=core%20sdk&platform=javascript
+- Search groups: https://trtc.io/document/67681?product=chat&menulabel=core%20sdk&platform=javascript
+- Search group members: https://trtc.io/document/67683?product=chat&menulabel=core%20sdk&platform=javascript
+
+### Q: How to create groups, add group members, and set administrators in Chat SDK?
+**A:** For specific information about creating groups, adding group members, and setting administrators in SDK, please refer to the documentation below:
+- Create group: https://trtc.io/document/48465?product=chat&menulabel=core%20sdk&platform=javascript
+- Add group members: https://trtc.io/document/48180?product=chat&menulabel=core%20sdk&platform=javascript#49b805dd-4898-44a3-89a4-3b201f839fce
+- Modify group member role (can set administrator): https://trtc.io/document/48180?product=chat&menulabel=core%20sdk&platform=javascript#f35fb570-648c-4b97-99a1-cef5b81b1284
+
+### Q: How to create a C2C one-to-one conversation?
+**A:** The UI layer can create a one-to-one conversation by querying conversation profile using `getConversationProfile`. The `conversationID` format is: `C2C${userID}`. After SDK successfully creates the conversation, it will notify the conversation list update through the `CONVERSATION_LIST_UPDATE` event.
+
+### Q: How to get total unread message count and listen to real-time changes?
+**A:** For detailed information about total unread message count, please refer to: https://trtc.io/document/48319?product=chat&menulabel=core%20sdk&platform=javascript.
+1. To get total unread message count, call `getTotalUnreadMessageCount` API.
+2. To listen for total unread count changes, monitor the `TOTAL_UNREAD_MESSAGE_COUNT_UPDATED` event.
+Note: During initialization, it's recommended to listen to the `TOTAL_UNREAD_MESSAGE_COUNT_UPDATED` event to get the total unread message count, because the calculation of total unread count depends on the synchronization of cloud conversation list. Calling `getTotalUnreadMessageCount` directly after successful login may return 0 because the cloud conversation list hasn't finished synchronizing yet.
+
+### Q: How to get original and thumbnail images in SDK image messages?
+**A:** For image messages, high-resolution original image (type = 0), thumbnail (type = 1), and large image (type = 2) can be obtained. For details, please refer to the Message structure documentation: https://trtc.io/document/47990?product=chat&menulabel=core%20sdk&platform=javascript#893c75e0-e592-475a-bd9a-0c4ec30114b9.
+
+### Q: How to handle message sending failures in SDK?
+**A:** When SDK message sending fails, the `sendMessage` interface will throw an error, which needs to be caught using `sendMessage().catch()`. The error contains the complete message structure, where message.status is `fail`. You can resend the failed message using `resendMessage`.
+
+### Q: In weak network environments, how does SDK ensure WebSocket stability and reconnection?
+**A:** In weak network environments, if WebSocket disconnects, SDK will automatically reconnect. WebSocket status changes can be monitored through the `NET_STATE_CHANGE` event (https://trtc.io/document/47967?platform=javascript&product=chat&menulabel=sdk#d39fb50f-f0f2-4b67-9b15-acd7e8608105).
+
+### Q: How to delete conversations in SDK?
+**A:** Conversation deletion only supports one-way deletion. SDK delete conversation API is `deleteConversation`. Reference documentation: https://trtc.io/document/48313?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to get friend list in SDK?
+**A:** Get friend list using `getFriendList` API. Friend list updates can be monitored through the `FRIEND_LIST_UPDATED` event. Reference documentation: https://trtc.io/document/48158?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to listen for friend online status updates in SDK?
+**A:** Friend online status changes can be implemented in two ways:
+1. If you have enabled automatic friend status notification in the IM Console, when a friend's status changes, SDK will dispatch the `USER_STATUS_UPDATED` event, where you can get the friend's latest status.
+2. If you haven't enabled automatic friend status notification and still want to sense friend status changes, you need to call `subscribeUserStatus` to actively subscribe to friend status. When a friend's status changes, SDK will dispatch the `USER_STATUS_UPDATED` callback.
+For detailed documentation, please refer to: https://trtc.io/document/49561?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to delete conversation history messages in SDK?
+**A:** SDK provides the `clearHistoryMessage` API to clear conversation history messages. For detailed documentation, please refer to: https://trtc.io/document/53498?product=chat&menulabel=core%20sdk&platform=javascript.

package/resource/doc/livekit/vue/components/co-guest-panel.md

@@ -44,19 +44,19 @@ Before performing quick integration, you need to refer to [preparations](https:/
 
 【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 Link Management Panel

package/resource/doc/livekit/vue/components/live-view.md

@@ -38,19 +38,19 @@ Before quick integration, you need to refer to [preparations](https://write.woa.
 
 【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: Joining the Live Room and Performing Voice Chat
@@ -395,4 +395,4 @@ const isAnchor = (userInfo: SeatUserInfo) => {
 </script>
 
 <style scoped>.live-stream-view{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}.live-stream-view.is-anchor{border:3px solid #ff6b35;box-shadow:0 0 20px rgba(255,107,53,.3)}.live-stream-view.is-guest{border:1px solid #ddd}.video-area{width:100%;height:100%;background:#000}.user-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:10px;color:#fff}.user-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-bottom:5px;background:#666}.anchor-badge{background:#ff6b35;color:#fff}.user-name{font-weight:700;margin-bottom:5px}.device-status span{margin-right:5px;opacity:.8}.device-status .camera.Off,.device-status .mic.Off{opacity:.3}</style>
-```
+```

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

@@ -9,7 +9,7 @@ This document provides a detailed introduction to the **Live Stream List Page**
 
 ### Step 1: Configuring the Environment and Activating the Service
 
-Before performing quick connection, you need to refer to [Preparations](https://write.woa.com/document/189228990450999296) to meet the required environment configuration and activate the corresponding service.
+Before performing quick connection, you need to refer to [Preparations](https://write.woa.com/document/163673134112337920) to meet the required environment configuration and activate the corresponding service.
 
 ### Step 2: Dependency Installation
 
@@ -20,19 +20,19 @@ You can choose any method below to install dependencies:
 
 【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: Live Stream List Page Integration
@@ -118,7 +118,7 @@ As shown in the above feature diagram, we also support you to customize the live
 
 ## Designate a Live Streaming Room
 
-To handle the redirect logic from the live list (or homepage) to the live streaming room, you need to configure Vue Router. In the `src` directory of your project, create a new `router` folder and create the `index.ts` file. Then, in your main file (such as **main.ts** or **index.ts**), import and use the router. See the [GitHub sample code](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts). If you need the live list, see the documentation for the [Live Stream List Page](https://write.woa.com/document/189228992611065856).
+To handle the redirect logic from the live list (or homepage) to the live streaming room, you need to configure Vue Router. In the `src` directory of your project, create a new `router` folder and create the `index.ts` file. Then, in your main file (such as **main.ts** or **index.ts**), import and use the router. See the [GitHub sample code](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts). If you need the live list, see the documentation for the [Live Stream List Page](https://write.woa.com/#).
 ``` typescript
 // live-list.vue can be incrementally added to your code
 <template>
@@ -186,7 +186,7 @@ Congratulations! You have successfully integrated the live broadcast list page.
 
 <td rowspan="1" colSpan="1" >The live streamer's entire live streaming process is supported, including pre-streaming preparation and post-streaming interactions.</td>
 
-<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/189497714561167360)</td>
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/194114399449153536)</td>
 </tr>
 
 <tr>
@@ -194,7 +194,7 @@ Congratulations! You have successfully integrated the live broadcast list page.
 
 <td rowspan="1" colSpan="1" >Viewers can enter the live streamer's room to watch the live stream, connect to the microphone, view live stream room information, view online viewers, and display comments.</td>
 
-<td rowspan="1" colSpan="1" >[Audience Viewing](https://write.woa.com/document/189571398058663936)</td>
+<td rowspan="1" colSpan="1" >[Audience Viewing](https://write.woa.com/document/194114585866043392)</td>
 </tr>
 </table>
 

package/resource/doc/livekit/vue/{components/live-player.md → live-player-desk-integration.md}

@@ -51,32 +51,32 @@ The watch page provides default behavior and style, but if the default behavior
 
 ### Step 1: Environment Configuration and Service Activation
 
-Before using Quick Access, you need to refer to [Preparations](https://write.woa.com/document/189231573727113216) configuration requirements and activate the corresponding services.
+Before using Quick Access, you need to refer to [Preparations](https://write.woa.com/document/163673134112337920) configuration requirements and activate the corresponding services.
 
 
 
 
 【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 2: Access the viewing page
 
 Create a live-player.vue file in your project and copy the following code to integrate the watch page into your project.
-``` vue
+``` java
 <template>
   <UIKitProvider language="zh-CN">
     <div class="container">
@@ -190,7 +190,7 @@ As shown in the functional diagram above, we also support customizing the UI of
 #### Method 1: Playing by Specifying a LiveId
 
 If you need to specify a LiveId for playback, you need to add the following code based on the code in [step 3](https://write.woa.com/#c1b852bc-da02-4c9f-bb11-2a63582ce978) of the Quick Access section above. The reference method is as follows:
-``` typescript
+``` java
 // live-player.vue
 import { onMounted } from 'vue';
 import { useLiveState } from 'tuikit-atomicx-vue3';
@@ -256,7 +256,7 @@ Congratulations! You've successfully integrated the watch page. Next, you can im
 
 <td rowspan="1" colSpan="1" >The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions.</td>
 
-<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/189497714561167360)</td>
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/194114399449153536)</td>
 </tr>
 
 <tr>
@@ -264,6 +264,6 @@ Congratulations! You've successfully integrated the watch page. Next, you can im
 
 <td rowspan="1" colSpan="1" >Display the live broadcast list interface and functions, including live broadcast list and room information display function</td>
 
-<td rowspan="1" colSpan="1" >[Live Stream List](https://write.woa.com/document/189592401543360512)</td>
+<td rowspan="1" colSpan="1" >[Live Stream List](https://write.woa.com/document/194114814480777216)</td>
 </tr>
 </table>

package/resource/doc/livekit/vue/live-player-h5-integration.md

@@ -0,0 +1,269 @@
+This article provides a detailed introduction to the watch page in **TUILiveKit **Demo. You can directly refer to this document to integrate the watch page we developed in your existing project, or you can deeply customize the page style, layout, and functional items according to your needs according to the content in the document.
+
+### Function Overview
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Functional classification**</td>
+
+<td rowspan="1" colSpan="1" >**Specific capabilities**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live video playback**</td>
+
+<td rowspan="1" colSpan="1" >HD and smooth live streaming experience</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Barrage Interaction**</td>
+
+<td rowspan="1" colSpan="1" >Real-time Barrage chat</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Viewer List**</td>
+
+<td rowspan="1" colSpan="1" >View online viewer information</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Follow Streamer**</td>
+
+<td rowspan="1" colSpan="1" >Follow your favorite streamers with one click</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Full Screen Play**</td>
+
+<td rowspan="1" colSpan="1" >Immersive viewing experience</td>
+</tr>
+</table>
+
+
+## Function Display
+
+The watch page provides default behavior and style, but if the default behavior and style don't fully meet your needs, you can also customize the UI. The numbers shown in the figure correspond to categories in the specific function list. These mainly include live broadcast information display, video broadcast area, online audience, audio and video operation, live broadcast duration, screen resolution switching, full screen function, chat interaction, message list, etc.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/722ab157984711f09b0c525400bf7822.png)
+
+
+## Quick Access
+
+### Step 1: Environment Configuration and Service Activation
+
+Before using Quick Access, you need to refer to [Preparations](https://write.woa.com/document/163673134112337920) configuration requirements and activate the corresponding services.
+
+
+
+
+【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
+```
+
+### Step 2: Access the viewing page
+
+Create a live-player.vue file in your project and copy the following code to integrate the watch page into your project.
+``` java
+<template>
+  <UIKitProvider language="zh-CN">
+    <div class="container">
+      <!-- Live core area -->
+      <section class="live">
+        <header class="header">
+          <IconArrowStrokeBack class="back-btn" size="20" />
+          <Avatar :src="currentLive?.liveOwner.avatarUrl" :size="32" class="avatar" />
+          <span class="user-name">{{ currentLive?.liveOwner.userName || currentLive?.liveOwner.userId }}</span>
+        </header>
+        <LiveCoreView class="player" />
+      </section>
+
+      <div class="sidebar">
+        <!-- Online viewers list -->
+        <section class="audience">
+          <header class="section-header">
+            <h3> online viewers <span>({{ audienceList.length }})</span></h3>
+          </header>
+          <LiveAudienceList class="list" />
+        </section>
+
+        <!-- Message List & Message List -->
+        <section class="barrage">
+          <header class="section-header">
+            <h3>MessageList</h3>
+          </header>
+          <BarrageList class="list" />
+          <BarrageInput class="input" height="48px" />
+        </section>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { LiveAudienceList, BarrageList, BarrageInput, useLiveAudienceState, LiveCoreView, useLiveState, Avatar, useLoginState } from 'tuikit-atomicx-vue3';
+import { UIKitProvider, IconArrowStrokeBack } from '@tencentcloud/uikit-base-component-vue3';
+
+const { audienceList } = useLiveAudienceState();
+const { currentLive } = useLiveState();
+const { login } = useLoginState();
+
+async function initLogin() {
+  try {
+    await login({
+      sdkAppId: 0,        // SDKAppId, refer to step 1 to obtain
+      userId: '',         // UserID, refer to step 1 to obtain
+      userSig: '',        // userSig, refer to step 1 to obtain
+    });
+  } catch (error) {
+    console.error('Login Failed:', error);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();
+});
+
+</script>
+
+<style>:global(body){height:100vh;width:100vw;margin:0;padding:0;overflow:hidden;font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:70% 30%;height:100vh;width:100vw;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
+
+```
+
+### Step 3: Start the project
+``` bash
+npm run dev
+```
+
+## Customizable
+
+As shown in the functional diagram above, we also support customizing the UI of the watch page based on your project needs. The following table lists the main customizable features.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Category**</td>
+
+<td rowspan="1" colSpan="1" >**Function**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live information display**</td>
+
+<td rowspan="1" colSpan="1" >Customize the display of the watch page information area</td>
+
+<td rowspan="1" colSpan="1" >**Supports:**<br>- **Show/hide the logo, replace it with your desired logo**<br>- **UI customization, show/hide the follow button, and replace it with your desired button style**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Online viewers**</td>
+
+<td rowspan="1" colSpan="1" >Customize audience information display</td>
+
+<td rowspan="1" colSpan="1" >**Supports:**<br>- **Show/hide audience level**<br>- **Customize audience information font and color UI**<br>- **Replace icon style with your desired style**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**MessageList**</td>
+
+<td rowspan="1" colSpan="1" >Custom message barrage area display</td>
+
+<td rowspan="1" colSpan="1" >**Supports:**<br>- **Show/hide chat input area**<br>- **Supports UI customization for chat bubble style, audience level, etc.**</td>
+</tr>
+</table>
+
+
+## Playing a Live Stream
+
+#### Method 1: Playing by Specifying a LiveId
+
+If you need to specify a LiveId for playback, you need to add the following code based on the code in [step 3](https://write.woa.com/#c1b852bc-da02-4c9f-bb11-2a63582ce978) of the Quick Access section above. The reference method is as follows:
+``` java
+// live-player.vue
+import { onMounted } from 'vue';
+import { useLiveState } from 'tuikit-atomicx-vue3';
+
+const { joinLive } = useLiveState();
+
+onMounted(async () => {
+  // Enter liveId to join the live broadcast room. For the specific meaning of the parameters, 
+  // please refer to the preparation work in step 1.
+  await joinLive({ liveId: 'xxx' });                                  
+});
+```
+
+#### Method 2: Routing Configuration
+
+Because of the logic involved in redirecting from the live stream list (or homepage) to the live stream room, you'll need to configure Vue Router. Create a new router folder in the project's src directory and create an index.ts file. Then, import and use the router in your main file (e.g., main.ts or index.ts). See the [GitHub code examples](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts) for more information. For a live stream list, see the Live Stream List documentation.
+``` typescript
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/live-player',
+    component: () => import('../views/live-player.vue'),
+  },
+  // If you need the live broadcast list function, you can add the following route
+  // {  
+    //   path: '/live-list',  
+    //   component: () => import('../views/live-list.vue'),  
+  // },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;
+
+// src/main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+```
+
+### Next Steps
+
+Congratulations! You've successfully integrated the watch page. Next, you can implement content such as the anchor's start page and live broadcast list page. Please refer to the table below:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Function**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+
+<td rowspan="1" colSpan="1" >**Integration Guide**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Host Streaming**</td>
+
+<td rowspan="1" colSpan="1" >The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions.</td>
+
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/194114399449153536)</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live Stream List**</td>
+
+<td rowspan="1" colSpan="1" >Display the live broadcast list interface and functions, including live broadcast list and room information display function</td>
+
+<td rowspan="1" colSpan="1" >[Live Stream List](https://write.woa.com/document/194114814480777216)</td>
+</tr>
+</table>