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

package/resource/{doc/roomkit/vue/features → knowledge/roomkit/core-sdk/vue}/room-participant-state.md

@@ -1,24 +1,24 @@
-This document will guide you on how to manage participants in a room. Atomicx provides an out-of-the-box list component `RoomParticipantList` for quick integration, and exposes the [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) Hook to facilitate custom member control logic implementation.
+This document guides you on how to manage participants in a room. Atomicx provides the ready-to-use list component `RoomParticipantList` for quick integration, and exposes the [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomParticipantState) Hook to help you implement custom participant control logic.
 
-## Feature Introduction
+## Feature Overview
 
-The member management module covers a complete set of capabilities for displaying user information and handling permissions in the room:
-- **Real-time List Display:** Dynamically presents nicknames, roles, audio/video status, and volume fluctuation of all members in the room.
+The participant management module covers a full set of capabilities for displaying user information in a room and handling permissions:
+- **Real-time list display:** Dynamically presents the nickname, role, audio/video status, and volume fluctuations of all participants in the room.
 
-- **Permission Control:** Supports room owner or administrator to perform management operations such as kicking out, muting all, and transferring ownership.
+- **Permission control:** Supports the room owner or administrators performing management operations such as removing participants, muting all participants, and transferring the room owner role.
 
-- **Tiered Management:** Supports differentiated permission strategies for room owners, administrators, and regular members.
+- **Tiered management:** Supports differentiated permission strategies for the room owner, administrators, and regular participants.
 
 ## Prerequisites
-- User has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to Integration Overview.
+- The user has completed login authentication via [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-LoginState). For details, refer to the Integration Overview.
 
-- User has entered the room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), please refer to Room Management.
+- The user has entered a room via [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomState). For details, refer to Room Management.
 
-## Integrating Member Management Component
+## Integrating the Participant Management Component
 
-If you need to quickly build a member list interface, it's recommended to directly use the `RoomParticipantList` component. `RoomParticipantList` is an out-of-the-box participant list component with built-in complete member management UI and interactions.
+If you need to quickly build a participant list interface, we recommend using the `RoomParticipantList` component directly. `RoomParticipantList` is a ready-to-use participant list component with a complete built-in participant management UI and interactions.
 
-Example code for integrating `RoomParticipantList` component:
+Example code for integrating the `RoomParticipantList` component:
 ``` typescript
 <template>
   <div class="room-page">
@@ -82,28 +82,28 @@ const { participantList } = useRoomParticipantState();
 
 > **Note:**
 >
-> - `RoomParticipantList` will automatically fill the height and width of its parent container, please ensure its parent container has explicit dimensions.
-> - When using the `RoomParticipantList` component, ensure global `UIKitProvider` is configured in `App.vue`, please refer to [Configure App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e).
+> - `RoomParticipantList` automatically fills the height and width of its parent container, so make sure its parent container has explicit dimensions.
+> - When using the `RoomParticipantList` component, make sure to configure the global `UIKitProvider` in `App.vue`. For details, refer to [Configuring App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e).
 
-## Implementing Member Management Features
+## Implementing Participant Management Features
 
-If you need to customize member list UI or trigger management actions in specific business scenarios, please use [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState).
+If you need to customize the participant list UI or trigger management actions in a specific business scenario, use [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomParticipantState).
 
-### Step 1: Get Member List
+### Step 1: Get the participant list
 
-Get reactive member data [participantList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#participantList) through [getParticipantList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#getParticipantList).
+Use [getParticipantList](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#getParticipantList) to get the reactive participant data [participantList](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#participantList).
 ``` typescript
 import { useRoomState, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';
 
 const { currentRoom } = useRoomState();
 const { participantList, participantListCursor, getParticipantList } = useRoomParticipantState();
 
-// Get room user list after successfully joining room
+// Get the list of users in the room after successfully entering the room
 watch(() => currentRoom.value?.roomId, async () => {
  await getParticipantList();
 })
 
-// Load more users when scrolling to bottom of list
+// Load more users when the list scrolls to the bottom
 const handleLoadMore = async () => {
   if (participantListCursor.value) {
     await getParticipantList({ cursor: participantListCursor.value });
@@ -114,12 +114,12 @@ const handleLoadMore = async () => {
 > **Note:**
 >
 
-> Data successfully fetched by `getParticipantList` interface will be automatically maintained in `participantList`, UI only needs to render data from `participantList`.
+> The data successfully fetched by the `getParticipantList` interface is automatically maintained in `participantList`. The UI only needs to render the data in `participantList`.
 >
 
-### Step 2: Render Participant Information
+### Step 2: Render participant information
 
-Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#participantList) data to customize rendering of user information list.
+Developers can use the [participantList](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#participantList) data to customize the rendering of the user information list.
 ``` typescript
 <template>
   <div class="participant-list">
@@ -141,7 +141,7 @@ Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/do
           :avatar-url="participant.avatarUrl"
         />
 
-        <!-- User info -->
+        <!-- User information -->
         <div class="user-info">
           <div class="user-name">
             <span>{{ participant.userName }}</span>
@@ -150,13 +150,13 @@ Developers can use [participantList](https://web.sdk.qcloud.com/trtc/live/web/do
               v-if="participant.role === RoomParticipantRole.Owner"
               class="role-badge owner"
             >
-              Owner
+              Room owner
             </span>
             <span
               v-else-if="participant.role === RoomParticipantRole.Admin"
               class="role-badge admin"
             >
-              Admin
+              Administrator
             </span>
           </div>
         </div>
@@ -208,9 +208,9 @@ const handleRefresh = async () => {
 </style>
 ```
 
-### Step 3: Set User Custom Information
+### Step 3: Set custom user information
 
-Developers can use the [updateParticipantMetaData](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#updateParticipantMetaData) interface to set custom data for users to **implement job titles**, **purchase status** and other capabilities. After updating, the `metaData` information will be maintained in the reactive data of the corresponding user in `participantList`.
+Developers can use the [updateParticipantMetaData](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#updateParticipantMetaData) interface to set custom user data, used to **implement capabilities such as job title** and **purchase status**. After updating, the `metaData` information is maintained in the reactive data of the corresponding user in `participantList`.
 ``` typescript
 <template>
   <div v-for="participant in participantList" :key="participant.userId">
@@ -233,33 +233,33 @@ const {
 } = useRoomParticipantState();
 
 await updateParticipantMetaData({
- userId: '', // Specify user id
+ userId: '', // Specify the user id
  metaData: JSON.stringify({ level: 1 }),   // Business custom information
 })
 </script>
 ```
 
-### Step 4: Manage Member Roles
+### Step 4: Manage participant roles
 
-Room owner can change user role to administrator through [setAdmin](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setAdmin) interface, and revoke user administrator status through [revokeAdmin](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#revokeAdmin) method.
+The room owner can use the [setAdmin](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#setAdmin) interface to change a user's role to administrator, and use the [revokeAdmin](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#revokeAdmin) method to revoke a user's administrator role.
 ``` typescript
 const { setAdmin, revokeAdmin } = useRoomParticipantState();
 
-// Set regular user as administrator
+// Set a regular user as an administrator
 await setAdmin({ userId });
 
-// Change administrator to regular user
+// Set an administrator back to a regular user
 await revokeAdmin({ userId });
 ```
 
-### Step 5: Manage Member Media Devices
+### Step 5: Manage participant media devices
 
-Room owner and administrators can remotely control other members' media devices through [closeParticipantDevice](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#closeParticipantDevice) interface to maintain a quiet and orderly meeting environment.
+The room owner and administrators can use the [closeParticipantDevice](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#closeParticipantDevice) interface to remotely control other participants' media devices, in order to keep the meeting environment quiet and orderly.
 ``` typescript
 import { useRoomParticipantState, DeviceType } from 'tuikit-atomicx-vue3/room';
 const { closeParticipantDevice } = useRoomParticipantState();
 
-// Force close specified member's microphone
+// Forcibly turn off the microphone of a specified participant
 async function handleCloseUserMicrophone(userId: string) {
   await closeParticipantDevice({
     userId,
@@ -267,7 +267,7 @@ async function handleCloseUserMicrophone(userId: string) {
   });
 }
 
-// Force close specified member's camera
+// Forcibly turn off the camera of a specified participant
 async function handleCloseUserCamera(userId: string) {
   await closeParticipantDevice({
     userId,
@@ -276,16 +276,16 @@ async function handleCloseUserCamera(userId: string) {
 }
 ```
 
-### Step 6: Enable Global State Management
+### Step 6: Enable global state management
 
-Room owner and administrators can enable room global state management through [disableAllDevices](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#disableAllDevices) and [disableAllMessages](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#disableAllMessages) interfaces.
+The room owner and administrators can enable room-wide global state management via the [disableAllDevices](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#disableAllDevices) and [disableAllMessages](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#disableAllMessages) interfaces.
 
-#### **Disable media devices of all regular users in the room**
+#### **Disable the media devices of all regular users in the room**
 ``` typescript
 import { useRoomParticipantState, DeviceType } from 'tuikit-atomicx-vue3/room';
 const { closeParticipantDevice } = useRoomParticipantState();
 
-// Force close all regular members' microphones
+// Forcibly turn off the microphones of all regular participants
 async function handleDisableAllMicrophone() {
   await disableAllDevices({
     deviceType: DeviceType.Microphone,
@@ -293,7 +293,7 @@ async function handleDisableAllMicrophone() {
   });
 }
 
-// Remove microphone restriction for all
+// Lift the microphone disable for all participants
 async function handleEnableAllMicrophone() {
   await disableAllDevices({
     deviceType: DeviceType.Microphone,
@@ -301,7 +301,7 @@ async function handleEnableAllMicrophone() {
   });
 }
 
-// Force close all regular members' cameras
+// Forcibly turn off the cameras of all regular participants
 async function handleDisableAllCamera() {
   await disableAllDevices({
     deviceType: DeviceType.Camera,
@@ -309,7 +309,7 @@ async function handleDisableAllCamera() {
   });
 }
 
-// Remove camera restriction for all
+// Lift the camera disable for all participants
 async function handleEnableAllCamera() {
   await disableAllDevices({
     deviceType: DeviceType.Camera,
@@ -323,7 +323,7 @@ async function handleEnableAllCamera() {
 import { useRoomParticipantState, DeviceType } from 'tuikit-atomicx-vue3/room';
 const { disableAllMessages } = useRoomParticipantState();
 
-// Force disable chat capability for all regular members
+// Forcibly disable the chat capability of all regular participants
 async function handleDisableAllMessage() {
   await disableAllMessages({
     disable: true,
@@ -331,55 +331,56 @@ async function handleDisableAllMessage() {
 }
 ```
 
-### **Step 7:** Monitor Member Speaking Status
+### **Step 7:** Monitor participant speaking status
 
-Through [speakingUsers](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#speakingUsers), you can get real-time information about users currently speaking in the room and their volume levels.
+Using [speakingUsers](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#speakingUsers), you can obtain in real time the users who are currently speaking in the room and their volume levels.
 ``` typescript
 const { speakingUsers } = useRoomParticipantState();
 
-// Check if user is speaking
+// Determine whether a user is currently speaking
 const isSpeaking = (userId: string) => speakingUsers.value.has(userId);
-// Get user real-time volume (0-100)
+// Get a user's real-time volume (0-100)
 const getVolume = (userId: string) => speakingUsers.value.get(userId) || 0;
 ```
 
-### Step 8: Kick Out Room Members
+### Step 8: Remove a participant from the room
 
-Room owner and administrators can remove users from the room through [kickParticipant](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#kickParticipant) interface.
+The room owner and administrators can use the [kickParticipant](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#kickParticipant) interface to remove a user from the room.
 ``` typescript
 const { kickParticipant } = useRoomParticipantState();
 
-// Kick user out of room
+// Remove a user from the room
 await kickParticipant({ userId });
 ```
 
-### Step 9: Invite Others to Join Room
+### Step 9: Invite others to join the room
 
-In real business scenarios, you may need to initiate call invitations to users not yet in the room. Atomicx provides complete call system support, please see In-Meeting Call.
+In actual business scenarios, you may need to send a call invitation to users who have not yet entered the room. Atomicx provides full support for a calling system. For details, refer to In-Meeting Calling.
 
 ## API Documentation
-| **State/Component** | **Feature Description** | **API Documentation** |
-| --- | --- | --- |
-| **useRoomParticipantState** | Contains user data in the room and user management interfaces. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
+
+|**State/Component**|**Description**|**API Documentation**|
+|---------|---------|---------|
+|**useRoomParticipantState**|Contains the user data in the room and the user management interfaces.|[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomParticipantState)|
 
 ## Development Recommendations
 
-**Permission Check:** In the UI layer, it's recommended to determine the current user's operation permissions through `participant.role`, hiding **kick out** or **mute** buttons for users without management permissions.
+**Permission validation:** At the UI layer, we recommend using `participant.role` to determine the current user's operation permissions, and hiding the **Remove** or **Mute** buttons from users who do not have management permissions.
 ``` typescript
 <script setup>
 import { RoomParticipantRole } from 'tuikit-atomicx-vue3/room';
 
 const { localParticipant } = useRoomParticipantState();
 
-// Check if current user has admin permissions
+// Determine whether the current user has management permissions
 const hasAdminPermission = computed(() => {
   return localParticipant.value.role === RoomParticipantRole.Owner ||
          localParticipant.value.role === RoomParticipantRole.Admin;
 });
 </script>
 
-// Use in template
+// Use in the template
 <template>
-<button v-if="hasAdminPermission" @click="handleKick">Kick Out</button>
+<button v-if="hasAdminPermission" @click="handleKick">Remove</button>
 <template>
 ```

package/resource/knowledge/roomkit/core-sdk/vue/room-state.md

@@ -0,0 +1,280 @@
+This document provides a detailed guide on how to use Atomicx's [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomState) to manage the full lifecycle of a room, including creating, joining, leaving, and ending a room, as well as handling key room state notifications. The following sequence diagram illustrates the main flow of a room from creation to destruction.
+
+## Feature Overview
+
+[useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-RoomState) is the core Hook responsible for room management in the Atomicx solution. It encapsulates the complex underlying signaling flow, allowing developers to drive room state through simple reactive data and method calls.
+- **Create and join:** Create and join a room via the [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#createAndJoinRoom) method, or join an existing room via the [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#joinRoom) method.
+
+- **Real-time state synchronization:** The `useRoomState` Hook internally maintains the [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#currentRoom) reactive data, automatically synchronizing information such as the room name, mode, and participant count.
+
+- **Role-based exit mechanism:** Provides clear operation boundaries for different roles. A regular participant can use [leaveRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#leaveRoom) to exit; while the room owner (host) has the [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#endRoom) permission and can end the room and destroy its resources with one click.
+
+## **Prerequisites**
+
+The user has completed login authentication via [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#module-LoginState). Please refer to Integration Overview.
+
+## Implementing Room Management
+
+### Step 1: Import useRoomState
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const {
+  createAndJoinRoom,
+  joinRoom,
+  leaveRoom,
+  endRoom,
+  currentRoom
+} = useRoomState();
+```
+
+### Step 2: Create a Room
+
+Create a room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#createAndJoinRoom). After a successful call, the user automatically gains room owner permissions.
+
+> **Note:**
+>
+
+> It is recommended that the roomId specified when creating a room be generated and delivered by the business backend, to ensure the uniqueness and stability of the room ID across the entire application globally.
+>
+
+- **Example 1: A user creates a room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+   })
+   ```
+- **Example 2: A user creates a room and specifies the room name**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+     options: {
+       roomName: 'My Temporary Room'
+     }
+   })
+   ```
+- **Example 3: A user creates a password-protected room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+     options: {
+       roomName: 'My Temporary Room',
+       password: '123456',
+     }
+   })
+   ```
+
+   > **Note:**
+   >
+
+   > When the creator calls [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#createAndJoinRoom), they automatically join the room without needing to enter the password.
+   >
+
+- **Example 4: A user creates a room and configures member management settings**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+     options: {
+       roomName: 'My Temporary Room',
+       password: '123456',
+       isAllMicrophoneDisabled: true,   // Enable mute-all
+       isAllCameraDisabled: true,       // Enable disable-all-cameras
+       isAllScreenShareDisabled: true,  // Enable disable-all-screen-sharing
+       isAllMessageDisabled: true,      // Enable disable-all-in-room-messages
+     }
+   })
+   ```
+
+   > **Note:**
+   >
+
+   > Member management configuration only applies to regular participants; the room owner and administrators are not restricted. If you need to modify the member management configuration after the room is created or manage individual member permissions separately, please refer to Member Management.
+   >
+
+### Step 3: A User Joins an Existing Room
+
+A logged-in user can call [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#joinRoom) to join an existing room. Atomicx only supports a user joining one room at a time.
+- **Example 1: A user joins a room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { joinRoom } = useRoomState();
+
+   await joinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+   })
+   ```
+- **Example 2: A user joins a password-protected room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { joinRoom } = useRoomState();
+
+   await joinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+     password: '123456',
+   })
+   ```
+
+### Step 4: Update Room Information
+
+The room owner can use [updateRoomInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#updateRoomInfo) to update the room name and password after creating the room.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+const { updateRoomInfo } = useRoomState();
+
+await updateRoomInfo({
+  roomId: 'YOUR_ROOM_ID',    // Specify the room ID, generated by the business backend
+  options: {
+     roomName: 'New Room Name',
+     password: '234567',
+  },
+})
+```
+
+> **Note:**
+>
+
+> The room owner must be inside the room to call [updateRoomInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#updateRoomInfo). If the room owner has already left the room, they need to rejoin before they can update the room information.
+>
+
+### Step 5: Leave a Room
+
+Both the room owner and regular users can call the [leaveRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#leaveRoom) interface to leave a room. The prerequisite for using this interface is that the user has already joined the room via the [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#createAndJoinRoom) or [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#joinRoom) interface.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+const { leaveRoom } = useRoomState();
+
+await leaveRoom();
+```
+
+### Step 6: Destroy a Room
+
+Only the room owner can call the [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#endRoom) interface to destroy a room. The prerequisite for using this interface is that the user has created the room via [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#createAndJoinRoom) or has already obtained the room owner identity.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+const { endRoom } = useRoomState();
+
+await endRoom();
+```
+
+> **Note:**
+>
+> - If the room owner leaves the room but does not call [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#endRoom), the room will continue to exist until the automatic reclamation condition is met (no users for 6 consecutive hours).
+> - The room owner can transfer the room owner identity to another user via the [transferOwner](https://web.sdk.qcloud.com/trtc/live/web/doc/en/index.html#transferOwner) interface.
+
+### Step 7: Handling Abnormal Exits
+
+#### Handling the Room Destroyed Event
+
+Regular users can listen to the `RoomEvent.onRoomEnded` event to handle the business interaction for when a room is destroyed.
+``` typescript
+import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
+import { TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
+const { subscribeEvent, unsubscribeEvent } = useRoomState();
+
+function onRoomEnded() {
+  TUIMessageBox.alert({
+    title: 'Notice',
+    content: 'The room owner has dismissed the room',
+  });
+}
+
+// Listen to RoomEvent when the component is mounted
+subscribeEvent(RoomEvent.onRoomEnded, onRoomEnded);
+// Cancel the RoomEvent listener when the component is destroyed
+unsubscribeEvent(RoomEvent.onRoomEnded, onRoomEnded);
+```
+
+#### Handling the User Kicked Out Event
+
+Regular users can listen to the `RoomParticipantEvent.onKickedFromRoom` event to handle the business interaction for when a user is kicked out of the room.
+``` typescript
+import { useRoomParticipantState, RoomParticipantEvent, KickedOutOfRoomReason } from 'tuikit-atomicx-vue3/room';
+import { TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
+
+const { subscribeEvent, unsubscribeEvent } = useRoomParticipantState();
+
+function onKickedFromRoom({ reason }: { reason: KickedOutOfRoomReason; message: string }) {
+    let notice = '';
+    switch (reason) {
+      case KickedOutOfRoomReason.KickedByAdmin:
+        notice = 'You have been removed from the room by the room owner';
+        break;
+      case KickedOutOfRoomReason.ReplacedByAnotherDevice:
+        notice = 'Your account has logged in on another device';
+        break;
+      case KickedOutOfRoomReason.KickedByServer:
+        notice = 'You have been removed from the room by the server';
+        break;
+      case KickedOutOfRoomReason.ConnectionTimeout:
+        notice = 'Network connection timed out, exiting the room';
+        break;
+      case KickedOutOfRoomReason.InvalidStatusOnReconnect:
+        notice = 'The room has been dismissed or you were removed while offline';
+        break;
+      case KickedOutOfRoomReason.RoomLimitExceeded:
+        notice = 'The room has reached its participant limit and cannot be joined';
+        break;
+      default:
+        notice = 'You have been removed from the room';
+        break;
+    }
+    TUIMessageBox.alert({
+      title: 'Notice',
+      content: notice,
+    });
+  }
+
+// Listen to RoomParticipantEvent when the component is mounted
+subscribeEvent(RoomParticipantEvent.onKickedFromRoom, onKickedFromRoom);
+// Cancel the RoomParticipantEvent listener when the component is destroyed
+unsubscribeEvent(RoomParticipantEvent.onKickedFromRoom, onKickedFromRoom);
+```
+
+## Advanced Implementation
+
+The current document describes quickly creating and immediately joining a room, which is suitable for instant multi-person audio/video communication scenarios.
+
+However, in real-world business scenarios, we often need to plan ahead: set the room topic, schedule specific start and end times, and invite participants. Participants can receive a reminder before the multi-person audio/video room begins and join on time.
+
+Atomicx provides complete scheduled room capabilities, including:
+- **Schedule rooms:** Set the multi-person room time and participant list in advance.
+
+- **Scheduled list**: View and manage all your upcoming multi-person rooms.
+
+- **Join reminders:** Support automatic reminder logic before the start.
+
+   If you need to implement the more complex business logic for managing multi-person audio/video rooms described above, please refer to: Schedule Room.
+
+## FAQ
+
+### If there are no more users in a room but the room has not been dismissed, will the room exist indefinitely?
+
+When there are no users entering a room for 6 consecutive hours, the backend will attempt to reclaim the room.
+
+### If there are no more users in a room but the room has not been dismissed, will it incur any cost?
+
+A room that has no users but has not been dismissed only occupies the group count of your package; it does not incur minute consumption or additional cost.
+
+### Can a user join multiple rooms at the same time?
+
+### What is the maximum number of people that can join a room at the same time?
+
+The maximum number of users in a room depends on your package. For details, see the [TUIRoomKit Package Description](https://cloud.tencent.com/document/product/647/104842#function).