@tencent-rtc/mcp 1.3.0 → 1.3.2

package/resource/doc/chatuikit/vue/workflow.md

@@ -0,0 +1,395 @@
+# Vue Chat TUIKit Code Generation Workflow Instructions
+
+## 📋 Instruction Purpose
+
+Provide Agents with a **code generation blueprint for implementing Vue Chat TUIKit core features** and guide Agents to **prioritize using real-time documentation content obtained from tools**, specifically targeting Vue3 Web application scenarios.
+
+---
+
+## 🛑 Agent Execution Hard Constraints (Guardrails)
+
+Agents must strictly follow these instructions when generating code:
+
+### 1. Documentation-Driven Integration
+- Must strictly follow the steps in `llm_code_generation_instructions_md` from tool return results
+- **Must strictly generate code according to example code in integration documentation**, do not modify code structure and implementation methods arbitrarily
+- Code generation should completely follow best practices and examples provided by integration documentation to ensure code correctness and runnability
+
+### 2. CSS Style Mandatory Standards 🔴
+- **Must strictly generate according to complete CSS style code in integration documentation**, including:
+  - Official CSS class names (such as `.chat-layout`, `.chat-content-panel`, etc.)
+  - Official CSS variable definitions (such as `--bg-color-operate`, `--stroke-color-primary`, etc.)
+  - Official layout structure and style properties
+  - Official `#app` style configuration
+- **Prohibit creating any custom style class names or modifying official styles**
+- All style code must be completely copied from integration documentation without modification
+
+### 3. Silent Integration Execution 🔥
+**CRITICAL**: After all code writing is completed, dependencies must be automatically installed and the project started in the final step without waiting for user confirmation.
+
+**Mandatory Execution Requirements**:
+- **No Asking**: Do not ask users whether they need to start the project
+- **No Waiting**: Do not wait for users to manually execute startup commands
+- **Must Automate**: Must immediately execute integration steps after code completion
+- **Batch Execution**: Dependency installation and startup commands must be completed in the same execute_command call
+
+**Standard Execution Command**:
+```bash
+cd [project_path] && npm install && npm run dev
+```
+
+### 4. Zero External Configuration
+- Prohibit automatically creating any `config.js` or `.env` files
+- Key credentials like SDKAppID, UserID, and UserSig must be directly injected into code variables
+
+### 5. Automatic Authentication Credential Acquisition
+- Must call `get_usersig` tool to obtain test credentials, prohibit requiring users to manually input
+- UserID generation should remain simple (prohibit concatenating dynamic timestamps to prevent logic errors)
+
+### 6. Default Active Conversation
+- Integration logic must include `setActiveConversation` call
+- Default to open `C2Cadministrator` conversation
+
+### 7. Vue3 Composition API
+- Prioritize using `<script setup>` syntax
+- Use Vue3 Composition API (ref, reactive, computed, etc.)
+- Correctly import and use TUIKit components
+
+### 8. chat-only Mode Feature Restrictions (⚠️ Default Constraints + Exceptions When Users Actively Request)
+
+**Default Behavior**:
+When users choose chat-only mode, Agents **default exclude** the following extended features:
+- **Default no Sidebar integration** (sidebar)
+- **Default no ChatSetting integration** (chat settings)
+- **Default no in-conversation search functionality integration**
+- **Default no ConversationList integration** (conversation list)
+- **Default only retain core chat components**: `Chat`, `MessageList`, `ChatHeader`, `MessageInput`
+
+**Exception Handling**:
+If users **explicitly request** adding certain extended features (such as "need ChatSetting", "want to integrate search", etc.), Agents **should allow and execute**:
+- ✅ On the basis of core chat components, additionally integrate features explicitly requested by users
+- ✅ Only add features explicitly requested by users, do not arbitrarily expand other features
+- ✅ Correctly integrate required components according to integration documentation specifications
+
+**Judgment Criteria**:
+- User requirements contain explicit feature keywords (such as "ChatSetting", "search", "settings", "sidebar", etc.)
+- Users explicitly state they need a certain extended feature
+
+---
+
+## 📦 TUIKit Version and Dependency Automation
+
+After Agents generate code, they must automatically execute the following dependency chain:
+
+### 1. Core Dependency Version Recommendations
+
+```json
+{
+  "@tencentcloud/chat-uikit-vue3": "latest",
+  "@tencentcloud/call-uikit-vue": "latest"
+}
+```
+
+### 2. Build Environment Patches (Vite/esbuild)
+
+If a Vite project is detected, Agents must automatically add patch configuration in `package.json` to be compatible with esbuild-wasm:
+
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+---
+
+## 📦 Vue3 TUIKit Component Description
+
+When generating code, Agents must understand and correctly use the following Vue3 components:
+
+| Component Name | Description | Use Case |
+|----------------|-------------|----------|
+| `ConversationList` | Conversation list component | full-featured mode, display all conversations |
+| `Chat` | Conversation container component | All modes, main chat container |
+| `MessageList` | Conversation message list component | Display chat message history |
+| `ChatHeader` | Conversation header information component | Display conversation title, member information, etc. |
+| `MessageInput` | Input box component | Message input and sending |
+| `ChatSetting` | Single chat and group chat management component | Conversation settings, group management, etc. |
+| `Search` | Cloud search component | Search messages, contacts, etc. |
+| `ContactList` | Contact component | full-featured mode, address book functionality |
+
+**Important Notes**:
+- Agents must strictly generate code according to component names and usage in integration documentation
+- Do not create or modify component names arbitrarily
+- Specific component usage methods are subject to integration documentation returned by tools
+
+---
+
+## 🛠️ Integration Mode Distribution (Goals)
+
+According to user requirements, Agents must choose corresponding execution paths:
+
+### 1. Full-Featured Integration (full-featured)
+
+**Objective**: Implement complete IM application similar to WeChat
+
+**Core Components**: 
+- `ConversationList` (conversation list)
+- `Chat` (chat container)
+- `ContactList` (address book)
+- `Search` (cloud search)
+
+**Execution Reference**: 
+- Refer to real-time acquired `integration.md` instructions in tool return results
+
+**Applicable Scenarios**:
+- Build independent chat applications
+- Need complete conversation management, address book, group management functionality
+- As core functional module of Web applications
+
+---
+
+### 2. Chat Window Only Integration (chat-only)
+
+**Objective**: Suitable for pure dialogue scenarios like customer service, consultation, detail page private chat
+
+**Core Components**: 
+- `Chat` (chat container)
+- `MessageList` (message list)
+- `ChatHeader` (chat header)
+- `MessageInput` (input box)
+
+**Execution Reference**: 
+- Refer to real-time acquired `integration.md` instructions in tool return results
+
+**Applicable Scenarios**:
+- Customer service consultation scenarios (users click consultation button to enter chat page)
+- Medical online consultation (patient-doctor one-on-one communication)
+- Order detail page private chat (buyer-seller communication)
+- Private messaging functionality in social applications
+
+**🔴 Default Excluded Features (Agents Must Comply)**:
+
+When generating chat-only mode code, Agents **default exclude** the following features and components:
+
+1. **Default no Sidebar integration (sidebar)**
+   - Default no generation of any sidebar-related code
+   - Default no import of conversation list, address book and other sidebar components
+   - Chat window should default to independent, sidebar-free pure chat interface
+
+2. **Default no ChatSetting integration (chat settings)**
+   - Default no generation of conversation settings, group management and other functionality
+   - Default no addition of settings button on the right side of ChatHeader
+   - Default no import of ChatSetting component
+
+3. **Default no in-conversation search functionality integration**
+   - Default no addition of message search functionality
+   - Default no addition of search entry in chat interface
+   - Default no import of Search component
+
+4. **Default no ConversationList integration (conversation list)**
+   - In chat-only mode, users specify conversation ID through external routing/parameters
+   - Default no need for conversation switching functionality
+
+---
+
+**⚠️ Exception Handling When Users Actively Request**:
+
+If users **explicitly request** adding certain extended features in chat-only mode, Agents **should allow and execute**:
+
+**Trigger Conditions** (any one satisfied):
+- Users explicitly state: "need ChatSetting", "want to integrate chat settings", "add conversation settings functionality"
+- Users explicitly state: "need Search", "want to add search functionality", "integrate in-conversation search"
+- Users explicitly state: "need Sidebar", "want to add sidebar"
+- Users explicitly propose other extended feature requirements
+
+**Agent Execution Process**:
+1. ✅ **Confirm User Requirements**: Recognize that users actively request adding extended features
+2. ✅ **Allow Integration**: On the basis of chat-only mode, additionally integrate components requested by users
+3. ✅ **Maintain Restraint**: Only add features explicitly requested by users, do not arbitrarily expand other features
+4. ✅ **Follow Documentation**: Correctly integrate required components according to integration documentation specifications
+
+---
+
+## 📞 Extended Features: Audio/Video Calling (TUICallKit)
+
+If requirements contain "calling" or "video" functionality, Agents must execute:
+
+### Component Mounting
+- Use `Teleport` to mount TUICallKit component to body
+
+### Interaction Injection
+
+**Inject calling buttons in the right slot of ChatHeader component**:
+- Icons: phone, camera, etc.
+- Component usage methods refer to integration documentation
+
+**Single Chat Logic**:
+- Initiate calls through `TUICallKitServer.call`
+- UserID automatically taken from currently active conversation
+
+**Group Chat Logic**:
+- Need to integrate member selection component
+- Guide users to select group members before initiating calls
+
+---
+
+## ✍️ Agent Code Generation Example Instructions (Prompts)
+
+When Agents start writing code, they should follow these semantic logics:
+
+**Full-Featured Integration (full-featured)**:
+> "According to `full-featured` mode, generate a Vue3 TUIKit integration page for me. Please automatically configure `C2Cadministrator` default active conversation and inject credentials obtained by `get_usersig` tool. Prohibit creating config files. **🔴 Important: Must strictly generate according to complete CSS style code in integration documentation, prohibit any customization or modification.**"
+
+**Chat Window Only Integration (chat-only)**:
+> "According to `chat-only` mode, generate a Vue3 TUIKit chat window for me. Please automatically configure `C2Cadministrator` default active conversation and inject credentials obtained by `get_usersig` tool. Prohibit creating config files. **Strictly exclude Sidebar, ChatSetting, in-conversation search and other features, only retain core chat components. 🔴 Important: Must strictly generate according to complete CSS style code in integration documentation, prohibit any custom styles.**"
+
+---
+
+## 📝 Key Points Summary
+
+| Category | Requirement |
+|----------|-------------|
+| **Framework Version** | Specifically for Vue3 projects |
+| **Documentation Priority** | Strictly follow latest documentation instructions returned by tools |
+| **🔴 CSS Styles** | **Strictly follow integration documentation CSS, prohibit any customization or modification** |
+| **Silent Integration** | Automatically install dependencies and start development server after code writing completion |
+| **Credential Injection** | Automatically call `get_usersig`, directly inject into code |
+| **Default Conversation** | Automatically activate `C2Cadministrator` conversation |
+| **Dependency Management** | Automatically detect and install required dependency packages |
+| **Build Tools** | Vite projects need to add esbuild-wasm patch configuration |
+| **Integration Modes** | Support full-featured (complete) and chat-only (chat only) two modes |
+| **chat-only Restrictions** | ⚠️ Default exclude Sidebar, ChatSetting, search functionality; allow integration when users actively request |
+
+---
+
+## 🎯 Agent Execution Checklist
+
+After completing code generation, Agents must confirm all the following items:
+
+### Project Initialization
+- [ ] Created Vue3 project or integrated into existing project
+- [ ] Installed `@tencentcloud/chat-uikit-vue3` dependency
+- [ ] If audio/video calling is needed, installed `@tencentcloud/call-uikit-vue`
+- [ ] If Vite project, added esbuild-wasm patch configuration
+
+### Code Generation
+- [ ] Correctly registered TUIKit components in main.js
+- [ ] Created main chat container component (ChatContainer.vue or similar)
+- [ ] Components use `<script setup>` syntax
+- [ ] 🔴 **CSS Styles Strictly Compliant**:
+  - [ ] Completely obtained all CSS style code from integration documentation
+  - [ ] Used official class names from integration documentation
+  - [ ] Completely copied CSS variable definitions from integration documentation
+  - [ ] Used layout style configuration from integration documentation
+  - [ ] Prohibited creating any custom style class names
+  - [ ] Prohibited modifying any style properties from integration documentation
+  - [ ] Style code completely consistent with integration documentation
+
+### Credentials and Login
+- [ ] 🔴 Called `get_usersig` tool to obtain test credentials
+- [ ] Directly injected SDKAppID, UserID, UserSig into code
+- [ ] Prohibited creating config.js or .env files
+- [ ] Implemented TUILogin.login() login logic
+
+### Conversation Activation
+- [ ] Added logic to default activate `C2Cadministrator` conversation
+- [ ] Used correct API (setActiveConversation)
+
+### Integration Mode
+- [ ] Selected correct integration mode according to user requirements (full-featured or chat-only)
+- [ ] full-featured mode: Integrated ConversationList, Chat, Contact and other components
+- [ ] chat-only mode: Integrated core components (Chat, MessageList, ChatHeader, MessageInput)
+- [ ] chat-only mode: Judged whether extended features need integration according to user requirements
+  - [ ] If users did not actively request, confirmed not including Sidebar, ChatSetting, Search and other components
+  - [ ] If users actively requested (such as "need ChatSetting"), additionally integrated features explicitly requested by users
+
+### Audio/Video Calling (Optional)
+- [ ] If calling functionality is needed, used Teleport to mount TUICallKit
+- [ ] Added calling buttons in right slot of ChatHeader component
+- [ ] Implemented single chat and group chat calling logic
+
+### Final Check
+- [ ] Called `record_result` to record integration results
+- [ ] Automatically installed dependencies (npm install)
+- [ ] Automatically started development server (npm run dev)
+- [ ] Project can run normally without errors
+
+---
+
+## 💡 Common Issue Handling
+
+### 1. Vite Build Errors
+
+**Problem Symptoms**: Vite project reports esbuild-related errors when running
+
+**Cause**: Some dependency packages are incompatible with esbuild
+
+**Solution**:
+Add patch configuration in `package.json`:
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+### 2. chat-only Mode Contains Unwanted Features
+
+**Problem Symptoms**: chat-only mode generated code contains Sidebar, ChatSetting or in-conversation search functionality not requested by users
+
+**Cause**: Agent did not correctly judge user requirements and arbitrarily added extended features
+
+**Judgment Criteria**:
+- ✅ **Should Add**: Users explicitly state "need ChatSetting", "want to integrate search", "add settings functionality", etc.
+- ❌ **Should Not Add**: Users only say "build chat-only chat window" without mentioning extended features
+
+**Solution**: Regenerate code, ensure default does not include extended features
+
+### 3. CSS Styles Do Not Conform to Integration Documentation
+
+**Problem Symptoms**: Generated code uses custom style class names or modified official styles
+
+**Cause**: Agent did not strictly generate code according to CSS styles in integration documentation
+
+**Solution**:
+1. Re-call `get_web_chat_uikit_integration` to obtain latest integration documentation
+2. Completely copy all CSS style code from integration documentation
+3. Strictly use class names, variable names, style properties according to integration documentation
+4. Prohibit any form of modification or customization
+
+---
+
+## 🔗 Related Tool References
+
+### Must-Use Tools
+
+#### `get_usersig` - Obtain Complete Test Credentials (Mandatory Call)
+**Purpose**: Generate complete test account and authentication credentials, including:
+- `SDKAppID`: Application identifier
+- `userID`: Test user ID
+- `userSig`: User signature (valid for 7 days)
+
+**Call Timing**: Must call before generating login code
+
+**Usage Constraints**:
+- ✅ Must use complete credentials returned by tool
+- ❌ Prohibit requiring users to manually fill in SDKAppID and secretKey
+- ❌ Prohibit creating configuration files to store credentials
+
+#### `record_result` - Record Integration Results
+**Purpose**: Record integration process and results for statistics and analysis
+
+---
+
+**Applicable Framework**: Vue3  
+**TUIKit Version**: @tencentcloud/chat-uikit-vue3 > 4.0.0  
+**Build Tools**: Vite (Recommended) / Webpack

package/resource/doc/roomkit/vue/features/call-user-to-room.md

@@ -0,0 +1,256 @@
+The in-room call feature allows users within a meeting (inviter) to send real-time invitations to users outside the room (invitees). This feature is implemented based on `Atomicx State Hooks` and helps developers quickly build interactive scenarios with proactive invitation capabilities.
+
+## Use Cases
+- **Collaborative Office:** During remote meetings, if cross-departmental decisions are involved, you can invite external experts to join the meeting with one click, shortening communication paths.
+
+- **Live Teaching:** During the teaching process, if teachers find that some students are absent, they can directly invite them to join the class.
+
+- **Internet Medical Consultation:** During case analysis, the primary physician can invite senior doctors to enter the virtual consultation room for multi-party consultation through the call feature, or doctors can call patients in the waiting room for consultations.
+
+
+## Prerequisites
+
+Before integrating this feature, please ensure the following conditions are met:
+- **Inviter (User A):** The user has completed login authentication through `useLoginState`, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), and is already in a room as the room owner or member, refer to [Room Lifecycle](https://write.woa.com/document/197379861957083136).
+
+- **Invitee (User B):** The user has completed login authentication through `useLoginState`, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), to receive signaling events.
+
+- **Environment Dependencies:** The project has correctly installed and imported `tuikit-atomicx-vue3`.
+
+
+## Implementing In-Room Call Feature
+
+The core process for implementing in-room calls is as follows:
+
+![In-room call sequence diagram](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/82ba8603dee611f0a4f35254007c27c5.png)
+
+In-room call sequence diagram
+
+
+### Step 1: Initiate Call (Inviter)
+
+The inviter calls the [callUserToRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#callUserToRoom) interface to initiate an invitation. Please ensure the inviter is currently in the room (i.e., [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentRoom) is not empty), otherwise the call cannot be initiated.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { currentRoom, callUserToRoom } = useRoomState();
+
+const inviteUser = async () => {
+  // In-room calls must be associated with an existing roomId, so check the current user's room status first
+  if (!currentRoom.value) {
+    console.warn('Please enter a room first before initiating an invitation');
+    return;
+  }
+
+  try {
+    const resultMap = await callUserToRoom({
+      roomId: currentRoom.value.roomId, // Room ID the invitee will join
+      userIdList: ['user1', 'user2'],    // Target user ID array, supports single or multiple users
+      timeout: 60,                        // Invitation validity period (seconds), both parties will trigger onCallTimeout after timeout
+      // extensionInfo can be used to pass business custom data, such as invitation type, additional messages, etc.
+      extensionInfo: JSON.stringify({ type: 'emergency', priority: 'high' }) 
+    });
+    
+    // resultMap returns the status corresponding to each userId, such as Success, AlreadyInRoom (already in room) or AlreadyInCalling (in call)
+    console.log('Invitation sent successfully, detailed status map:', resultMap);
+  } catch (error) {
+    console.error('Failed to send call request, please check network or login status:', error);
+  }
+};
+```
+
+### Step 2: Listen for Call Events (Invitee)
+
+The invitee needs to listen for the `onCallReceived` event. It is recommended to implement this in long-lived components such as `App.vue` to ensure the user can respond regardless of which page they are on.
+``` typescript
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
+
+const { 
+  subscribeEvent, 
+  unsubscribeEvent, 
+  acceptCall, 
+  rejectCall, 
+  joinRoom, 
+  currentRoom 
+} = useRoomState();
+
+const showInviteDialog = ref(false); // Control UI dialog visibility
+const currentCallInfo = ref(null);   // Cache the received invitation context
+
+const handleCallReceived = async ({ roomInfo, call, extensionInfo }) => {
+  // Conflict handling: If the user is currently in a meeting, according to business policy, usually should directly reject new invitations to prevent interference
+  if (currentRoom.value?.roomId) {
+    await rejectCall({ roomId: roomInfo.roomId });
+    return;
+  }
+
+  // Record invitation details for displaying inviter name or business transparent data in UI
+  currentCallInfo.value = { roomInfo, call };
+  showInviteDialog.value = true;
+};
+
+// Accept invitation logic
+const onUserAccept = async () => {
+  if (!currentCallInfo.value) return;
+  const { roomId } = currentCallInfo.value.roomInfo;
+
+  try {
+    // Key process A: Respond to signaling. Inform the inviter that it has been accepted so they can update UI (e.g., display "Other party answered")
+    await acceptCall({ roomId });
+    
+    // Key process B: Execute room entry. Only by calling joinRoom will the audio and video push-pull stream link be truly opened
+    await joinRoom({ roomId }); 
+  } catch (error) {
+    console.error('Room entry operation failed after accepting call:', error);
+  } finally {
+    closeDialog();
+  }
+};
+
+// Reject invitation logic
+const onUserReject = async () => {
+  if (currentCallInfo.value) {
+    // Inform the inviter that it has been rejected, the inviter will receive onCallRejected event
+    await rejectCall({ roomId: currentCallInfo.value.roomInfo.roomId });
+  }
+  closeDialog();
+};
+
+const closeDialog = () => {
+  showInviteDialog.value = false;
+  currentCallInfo.value = null;
+};
+
+// Event full lifecycle management: Ensure listening on component mount and removal on destroy to prevent event overflow
+onMounted(() => {
+  subscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
+  
+  // Listen for various exceptions/sync events that cause invitation to end, ensuring UI dialog can close in time
+  subscribeEvent(RoomEvent.onCallCancelled, closeDialog); // Inviter cancelled the call
+  subscribeEvent(RoomEvent.onCallTimeout, closeDialog);   // Call timed out without response
+  subscribeEvent(RoomEvent.onCallHandledByOtherDevice, closeDialog); // User already handled the call on another device
+});
+
+onUnmounted(() => {
+  // Remove all listeners to avoid continuing to execute handleCallReceived after component destruction, causing memory leaks or errors
+  unsubscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
+  unsubscribeEvent(RoomEvent.onCallCancelled, closeDialog);
+  unsubscribeEvent(RoomEvent.onCallTimeout, closeDialog);
+  unsubscribeEvent(RoomEvent.onCallHandledByOtherDevice, closeDialog);
+});
+```
+
+## Practical Tutorial: Improving Call Connection Rate
+
+To achieve higher call connection rates in business scenarios, in addition to implementing basic functions, it is recommended to refer to the following strategies to optimize user experience:
+
+### 1. Enhanced Call Awareness (Avoid Users Missing Calls)
+
+Due to Web characteristics, browser mute or page running in background state may cause users to miss calls.
+- **Visual Reminder**: Use [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) to detect page visibility status. If the page is in the background, you can implement title bar flashing prompts by cyclically modifying `document.title` (e.g.: "【New Invitation】UserA invites you to the meeting...") to attract user attention.
+
+- **Audio Reminder**: Play high-priority alert ringtone when the `onCallReceived` event is triggered. Note: Must comply with browser's [Autoplay Policy](https://developer.mozilla.org/zh-CN/docs/Web/Media/Guides/Autoplay), most browsers will restrict audio autoplay in the absence of user interaction (such as clicks, touches, or key presses).
+
+
+### 2. Enrich Invitation Context (Improve Answering Willingness)
+
+Invitations lacking clear intent are easily rejected by users. It is recommended to fully utilize the `extensionInfo` field to pass key business information to improve users' willingness to answer.
+- **Pass Business Context**: Use `extensionInfo` to transparently pass business fields such as `reason` (e.g.: "Project emergency review"), `level` (e.g.: "P0 troubleshooting"), etc., to inform users of the urgency and importance of the call.
+
+
+### 3. Multi-Channel Reach Backup (Ensure Message Delivery)
+
+Limited by Web mechanisms, when the browser process ends, real-time signaling cannot be received. It is recommended to adopt the following alternative solutions to ensure reach:
+- **Browser System Notifications**: Guide users to authorize [Web Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notification). As long as the browser process is not closed (including minimized or in background tabs), OS-level pop-up notifications can be triggered to effectively remind users.
+
+- **Multi-Channel Reach**: It is recommended to combine backend business logic to send meeting links through **SMS**, **Email**, or **Enterprise WeChat** and other external channels when detecting that users are offline or timeout without response, achieving all-around reach.
+
+
+### 4. Intelligent Retry Mechanism (Solve "Room Entry Failed After Accepting Invitation")
+
+In weak network or other unstable environments, calling `joinRoom` after users click accept invitation may experience occasional failures.
+- **Automatic Retry**: It is recommended to introduce 2-3 automatic retry mechanisms (recommended combined with exponential backoff strategy) in the exception handling logic (`catch`) of `onUserAccept` to maximize ensuring users can successfully join the meeting after clicking "accept".
+
+
+## Development Notes
+1. **Accepting Invitation Does Not Equal Entering Room**
+
+
+   `acceptCall` is only a signaling layer reply (informing the other party that the call has been answered). Users must manually call `await joinRoom({ roomId })` immediately after calling `acceptCall` to truly enter the audio and video room.
+
+2. **Lifecycle Management**
+
+
+   Please be sure to call `unsubscribeEvent` in the component destruction cycle (`onUnmounted`). If listeners are not cleaned up, when users switch pages, listeners from old pages will remain in memory, causing one invitation to pop up multiple windows or logic to execute repeatedly.
+
+3. **Timeout Settings**
+
+
+   If the `timeout` parameter is not set, in some network exceptions or program crash situations, invitations may remain in a suspended state for a long time, making it impossible to initiate another call to that user. It is recommended to set it to 30-60 seconds.
+
+
+## Common Questions
+1. **How to pass custom parameters when calling (e.g., "Emergency meeting from XX")?**
+
+
+   Use the `extensionInfo` parameter of `callUserToRoom` to pass a JSON string. The invitee can parse the string to obtain business information in the `extensionInfo` field of the `onCallReceived` event.
+
+2. **If the invitee is not online, can they receive the invitation after coming online?**
+
+
+   No. The invitation event is an instantaneous signaling action, and the SDK currently does not resend call notifications received while offline.
+
+3. **Can issued invitations be cancelled?**
+
+
+   Yes. Call `cancelCall({ roomId, userIdList })` to cancel. At this time, the invitee will receive the `onCallCancelled` event, and you need to listen to this event to close the UI dialog on the invitee side.
+
+4. **What to do if room entry fails after accepting?**
+
+
+   Check if you have logged in to `TUIRoomEngine`, retry `joinRoom({ roomId })` and capture error prompts to the user; if necessary, provide a "retry" button on the UI.
+
+5. **How to prompt when the other party is busy or already in another room?**
+
+
+   If `AlreadyInRoom` / `AlreadyInCalling` appears in the return value `resultMap` of `callUserToRoom`, you should prompt on the inviter UI "The other party is busy/already in a meeting" and decide whether to retry later.
+
+6. **Dialog not closing after timeout/cancellation?**
+
+
+   Make sure to listen to `onCallTimeout`, `onCallCancelled`, `onCallHandledByOtherDevice`, and uniformly close the dialog and clear current invitation data in the callback.
+
+7. **How to handle simultaneous ringing on multiple devices?**
+
+
+   After accepting/rejecting on any device, other devices will receive `onCallHandledByOtherDevice`, and you need to close dialogs on other ends to avoid repeated processing.
+
+8. **How should extensionInfo be agreed upon?**
+
+
+   It is recommended to use a JSON string and agree on fields (e.g., `type`, `priority`, `from`), parse and display friendly text (e.g., "Emergency meeting from XX") in `handleCallReceived`.
+
+
+## **Sample Project**
+
+Tencent Cloud provides a sample project [atomicx-vite-vue3-ts](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts) on GitHub, which you can refer to for implementing complete RoomKit functionality.
+
+## API Documentation
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**State/Component**</td>
+
+<td rowspan="1" colSpan="1" >**Feature Description**</td>
+
+<td rowspan="1" colSpan="1" >**API Documentation**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**useRoomState**</td>
+
+<td rowspan="1" colSpan="1" >Room state management (create, join, schedule, etc.)</td>
+
+<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState)</td>
+</tr>
+</table>