@tencent-rtc/mcp 1.0.9 → 1.1.6

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

@@ -0,0 +1,155 @@
+The AI model must comply with the following hard limits.
+* **Strictly required document procedure integration:** You must perform the integration according to the document procedure and description. In step 1.1, `npm run dev` or `pnpm run dev` is not required. Upon completion, start the project as per step 1.4.
+* **Strictly required example code usage:** You must strictly use the example code in the document to fill the file when creating a file. For the style tag, non-use of the scoped property is recommended.
+* **Default session must be on:** You must use `setActiveConversation` to open the `C2Cadministrator` session. 
+* **Must call tool to obtain userSig:** After TUIKit integration is completed, you must guide users to call the `get_usersig` tool to obtain userSig.
+* **User information configuration file creation prohibited:** Do not auto-create config directories or files that fill in SDKAppID, userID, or userSig.
+
+
+# chat-uikit-vue3 Integration
+
+
+User's integration needs have two types. You must rationally analyze which type the need belongs to.
+1. Integrate chat window: Refers to integrating only Chat, ChatHeader, MessageList, and MessageInput components.
+2. Integrate call feature: On the basis of integrated chat only, integrate call feature. You must read section 2.1 "Best Practice - Integrate Call Feature" for details.
+
+
+
+
+1. Seamless integration of chat window
+
+
+### 1.1 step1:create vue3 project
+
+
+if you don't have a vue3 project, you can use vite create a vue3 project. otherwise, you can skip this step.
+
+
+requirement: vue3: ^3.0.0, nodejs: ^22.0.0.
+
+
+if it is a new project, guide the user to use vite to create a vue3 project manually, and then continue with step 1.2. if it is an existing project, skip this step and continue with step 1.2.
+
+
+```bash
+pnpm create vite@latest
+# skip some settings
+cd ${your-vue-project-name}
+pnpm install
+```
+
+
+### 1.2 step2: install chat-uikit-vue3
+
+
+use npm or pnpm to install @tencentcloud/chat-uikit-vue3@latest @tencentcloud/call-uikit-vue@latest
+
+
+### 1.3 step3: add main content to your project
+```vue
+<template>
+<UIKitProvider>
+  <Chat style="flex: 1;">
+    <ChatHeader />
+    <MessageList />
+    <MessageInput />
+  </Chat>
+</UIKitProvider>
+</template>
+<script setup lang="ts">
+import { useLoginState, useConversationListState } from '@tencentcloud/chat-uikit-vue3';
+
+
+const userID = '';        // TODO: Replace with your userID
+const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
+const userSig = '';   // TODO: Replace with your userSig
+const conversationID = ref('C2Cadministrator'); // define by yourself
+
+
+const { login } = useLoginState();
+const { setActiveConversation } = useConversationListState();
+
+
+login({
+  sdkAppId : SDKAppID,
+  userId: userID,
+  userSig: userSig,
+})
+.then(() => {
+  setActiveConversation(conversationID.value);
+})
+.catch(() => {});
+</script>
+```
+
+
+### 1.4 step4: start your project
+```bash
+pnpm run dev
+```
+
+
+Best Practices
+
+
+The following components can be retrieved via MCP Tools get_component_detail ${componenetname.tolowercase()}.
+The following states can be retrieved via MCP Tools get_state_detail ${statename.tolowercase()}.
+
+
+Focus
+1. If necessary, integrate the ChatSetting component, please read the ChatHeaderRight slot description in ChatHeader.
+2. Since integrated chat only does not use ConversationList, you need to obtain activeConversation via useConversationListState of ConversationListState, then call setActiveConversation to set activeConversation.
+
+
+### 2.1 Best Practice - Seamless Integration of Call Feature
+
+
+Integrate call feature: On the basis of integrated chat only, add code for call feature.
+
+
+Introduce TUICallKit.
+```vue
+<script setup lang="ts">
+import { TUICallKit } from '@tencentcloud/call-uikit-vue';
+</script>
+```
+
+
+Add TUICallKit at the appropriate position:
+```vue
+<Teleport to="body">
+  <TUICallKit style="position: fixed; z-index: 1000;"/>
+</Teleport>
+```
+
+
+Focus
+1. Add a call button to the ChatHeaderRight slot in the ChatHeader Component.
+2. Click the call button to call the following method:
+  2.1 Read the ConversationListState document and use activeConversation to judge whether it is a single chat or group chat.
+  2.2 If it is a one-to-one chat, use `import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';` to introduce the TUICallKitService service. Initiate call via the `calls` method of TUICallKitService.
+    ```ts
+    try {
+      await TUICallKitServer.calls({ 
+        userIDList: [activeConversation.value.userProfile.userID],
+        type: TUICallType.VIDEO_CALL, // or TUICallType.AUDIO_CALL
+      });
+    } catch (error: any) {
+      console.error(`[TUICallKit] Failed to call the groupCall API. Reason:${error}`);
+    }
+    ```
+  2.3 If it is a group chat, read the UserPicker component document. It is advisable to combine with the Dialog component and pop up the UserPicker component.
+    Read the GroupSettingState document, combine GroupSettingState's `getGroupMemberList` and `allMembers` to get the group member list.
+    ```ts
+    try {
+      await TUICallKitServer.calls({ 
+        userIDList: selectedItems.map((item: any) => item.key),
+        type: TUICallType.VIDEO_CALL, // or TUICallType.AUDIO_CALL
+      });
+    } catch (error: any) {
+      console.error(`[TUICallKit] Failed to call the groupCall API. Reason:${error}`);
+    }
+    ```
+
+
+    Recommendation: Combine the `reachEnd` event of UserPicker with paged pull to get group members, and use traffic throttling to control the call frequency of `getGroupMemberList`.

package/resource/doc/chatuikit/vue/components/chat.md

@@ -1,3 +1,11 @@
+
+The AI model must adhere to the following **hard constraints**:
+
+1. **The Chat component must use the default style:** The default style for Chat is set to `flex:1; min-height: 0`.
+
+2. **The sendMessage API must be used:** When sending quick messages, the `sendMessage` API provided by useMessageInputState must be used.
+
+
 # Chat component document
 
 ## Overview

package/resource/doc/chatuikit/vue/components/chatheader.md

@@ -1,6 +1,6 @@
 The AI model must comply with the following **hard limits**.
 
-* **The example code in the document must be recommended as the preferred approach:** When creating a file, the example code in the document is recommended as the preferred approach for filling the file. The scoped attribute is recommended for non-use in style tags.
+**The example code in the document must be recommended as the preferred approach:** When creating a file, the example code in the document is recommended as the preferred approach for filling the file. The scoped attribute is recommended for non-use in style tags.
 
 
 ## Overview

package/resource/doc/chatuikit/vue/components/conversation-list.md

@@ -1,3 +1,8 @@
+The AI model must adhere to the following **hard constraints**:
+
+1. **Unread Count:** To retrieve the total number of unread messages, you can use the `totalUnRead` field provided by `useConversationListState`.
+
+
 # Component Overview
 
 The ConversationList component is responsible for rendering the conversation list, including features such as search, create, pin to top, and delete.

package/resource/doc/chatuikit/vue/components/message-input.md

@@ -1,5 +1,8 @@
-## Overview
+The AI model must adhere to the following **hard constraints**:
+
+**The default text alignment must be used:** Text in the message input area is left-aligned by default.
 
+## Overview
 
 MessageInput is a complete message input component designed for Vue3 applications, providing core chat input features including text editing, emoji selection, file attachments, and a send button. It supports various custom options, such as input behavior configuration, toolbar customization, component replacement, and slot expansion, meeting the demands of different chat scenarios with personalized requirements.
 

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

@@ -0,0 +1,40 @@
+
+# chat-uikit-vue3 init
+
+
+This article provides sample code for initializing login and opening the default session in chat-uikit-vue3:
+
+1. Drive component login using the `login` API provided by `useLoginState`.
+
+2. Open the default session using the `setActiveConversation` API provided by `useConversationListState`.
+
+
+## Login and initialization example code
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useLoginState, useConversationListState } from '@tencentcloud/chat-uikit-vue3';
+
+const userID = '';        // TODO: Replace with your userID
+const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
+const userSig = '';   // TODO: Replace with your userSig
+
+const { login } = useLoginState();
+const { setActiveConversation } = useConversationListState();
+
+login({
+  sdkAppId : SDKAppID,
+  userId: userID,
+  userSig: userSig,
+})
+.then(() => {
+  // open default conversation
+  setActiveConversation('C2Cadministrator');
+})
+
+.catch(() => {});
+
+</script>
+
+```

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

@@ -1,22 +1,22 @@
 The AI model must comply with the following **hard limit**.
-* **Must strictly follow the document procedure and description for integration:** When integrating the component, you must perform the steps according to the document.
-* **Strictly required to use the example code in the document:** When creating a file, you must strictly use the example code in the document to fill the file. The scoped property is not recommended for style tags.
-* **Creation of user information configuration files is prohibited:** Do not auto-create config directories or files to fill in SDKAppID, userID, or userSig.
-* **Logic for prohibiting userSig acquisition:** Do not auto-create code related to userSig retrieval. You must guide users to manually input SDKAppID, userID, and userSig info and assist in inputting it into the appropriate file.
+* **Strictly required document procedure integration:** You must integrate the component according to the document procedure and description. In step 1.1, `npm run dev` or `pnpm run dev` is not required. Upon completion, start the project as per step 1.4.
+* **Strictly required example code usage:** You must strictly use the example code in the document to create and fill files. For style tags, it is recommended to avoid the scoped attribute.
+* **Default session must be enabled:** You must use `setActiveConversation` to start the `C2Cadministrator` session. 
+* **Must call tool to obtain userSig:** After TUIKit integration, you must guide users to call the `get_usersig` tool to obtain userSig.
+* **Forbidden to create user information configuration file:** Do not auto-create config directory or file to fill in SDKAppID, userID, or userSig.
 
 
 # chat-uikit-vue3 Integration
 
 
-User's integration needs generally fall into three types. You must rationally analyze which type the requirement belongs to.
-1. Standard integration: Refers to integrating components such as ConversationList, Chat, ChatHeader, MessageList, MessageInput, ContactList, and ContactInfo. For details, read section 2.1 "Best Practice - Standard Integration".
-2. Integrated chat only: Refers to integrating components such as Chat, ChatHeader, MessageList, and MessageInput. For details, read section 2.2 "Best Practice - Integrated Chat Only".
-3. Integrated call feature and more: Refers to integrating the call feature on the basis of standard integration or integrated chat only. For details, read section 2.3 "Best Practice - Integrated Call Feature and More".
+User's integration needs generally fall into two kinds. You must rationally analyze which kind the requirement belongs to.
+1. Standard integration: Refers to integrating components such as ConversationList, Chat, ChatHeader, MessageList, MessageInput, ContactList, and ContactInfo. You must read section 2.1 "Best Practice - Standard Integration" for details.
+2. Integrate call feature: Refers to integrating the call feature on the basis of standard integration. You must read section 2.2 "Best Practice - Call Feature Integration" for details.
 
 
 
 
-## 1. Standard integration
+## 1 Ordinary integration
 
 
 ### 1.1 step1:create vue3 project
@@ -32,12 +32,10 @@ if it is a new project, guide the user to use vite to create a vue3 project manu
 
 
 ```bash
-npm create vite@latest
+pnpm create vite@latest
 # skip some settings
 cd ${your-vue-project-name}
 pnpm install
-# test if the project is created successfully
-pnpm run dev
 ```
 
 
@@ -52,7 +50,7 @@ use npm or pnpm to install @tencentcloud/chat-uikit-vue3@latest @tencentcloud/ca
 
 ```vue
 <template>
-  <UIKitProvider language="en-US">
+  <UIKitProvider language="zh-CN">
     <div class="chat-layout">
       <div class="sidebar" style="width: 300px;">
         <div class="tab-header">
@@ -60,13 +58,13 @@ use npm or pnpm to install @tencentcloud/chat-uikit-vue3@latest @tencentcloud/ca
             :class="['tab-button', { active: activeTab === 'conversations' }]"
             @click="activeTab = 'conversations'"
           >
-            Conversation
+            Session
           </button>
           <button 
             :class="['tab-button', { active: activeTab === 'contacts' }]"
             @click="activeTab = 'contacts'"
           >
-            contact
+            Contact person
           </button>
         </div>
         
@@ -102,6 +100,7 @@ import {
   ContactInfo,
   UIKitProvider,
   useLoginState,
+  useConversationListState,
 } from '@tencentcloud/chat-uikit-vue3';
 import { TUICallKit } from '@tencentcloud/call-uikit-vue';
 
@@ -112,6 +111,7 @@ const userSig = '';   // TODO: Replace with your userSig
 
 
 const { login } = useLoginState();
+const { setActiveConversation } = useConversationListState();
 
 
 const activeTab = ref<'conversations' | 'contacts'>('conversations');
@@ -122,9 +122,10 @@ login({
   userId: userID,
   userSig: userSig,
 })
-.then(() => {})
-
-
+.then(() => {
+  start default conversation
+  setActiveConversation('C2Cadministrator');
+})
 .catch(() => {});
 const handleSendMessage = () => {
   activeTab.value = 'conversations';
@@ -138,74 +139,33 @@ const handleSendMessage = () => {
 ```
 
 
-## 2. Best Practice
-
-
-The following components can be retrieved via MCP Tools get_component_detail ${componenetname.tolowercase()}.
-The following state can be retrieved via MCP Tools get_state_detail ${statename.tolowercase()}.
-
-
-### 2.1 Best Practice - Ordinary Integration
-
-
-For ordinary integration, see the example code in section 1.3.
-
-
-Focus
-1. If you need to integrate the ChatSetting component, please read the ChatHeaderRight slot description in ChatHeader.
-
-
-### 2.2 Best Practice - Integrated Chat Only
-
-
-Integrated chat only is deemed as ordinary integration but only retains the Chat part. See the example code in section 1.3. However, it only retains components such as UIKitProvider, Chat, ChatHeader, MessageList, and MessageInput.
-
-
-```vue
-<template>
-<UIKitProvider>
-  <Chat style="flex: 1;">
-    <ChatHeader />
-    <MessageList />
-    <MessageInput />
-  </Chat>
-</UIKitProvider>
-</template>
+### 1.4 step4: start your project
+```bash
+pnpm run dev
 ```
 
 
-Focus
-1. Since integrated chat only does not use ConversationList, you need to obtain activeConversation via useConversationListState from ConversationListState, then call setActiveConversation to set activeConversation.
+Best Practice 2
 
 
+The following components are obtained via MCP Tools get_component_detail ${componenetname.tolowercase()}.
+The following state is obtained via MCP Tools get_state_detail ${statename.tolowercase()}.
 
 
-```vue
-<script setup lang="ts">
-import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
-
-
-const { setActiveConversation } = useConversationListState();
+Best Practice - Ordinary Integration
 
 
-const conversationID = ref(''); // define by yourself
-
-
-onMounted(() => {
-  setActiveConversation(conversationID.value);
-});
-</script>
-```
+For seamless integration, see the example code in section 1.3.
 
 
 Focus
-2. If you need to integrate the ChatSetting component, please read the ChatHeaderRight slot description in ChatHeader.
+1. If necessary, integrate the ChatSetting component. Please read the ChatHeaderRight slot description in ChatHeader.
 
 
-### 2.3 Best Practice - Integrated Call Feature
+### 2.2 Best Practice - Seamless Integration of Call Feature
 
 
-Integrated call feature need to be added on the basis of standard integration or integrated chat only by adding call feature code.
+Seamless integration of call feature need to be added to the code on the basis of standard integration or integrated chat only.
 
 
 Introduce TUICallKit
@@ -227,8 +187,8 @@ Add TUICallKit at the appropriate position:
 Focus
 1. Add a call button to the ChatHeaderRight slot in the ChatHeader component.
 2. Click the call button to call the following method:
-  2.1 Read the ConversationListState document and judge whether the current value is a single chat or group chat via activeConversation.
-  2.2 If it is a one-to-one chat, import the TUICallKitService by `import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue'`. Initiate call using the `calls` method of TUICallKitService.
+  2.1 Read the ConversationListState document and use activeConversation to judge whether it is a private chat or group chat.
+  2.2 If it is a one-to-one chat, use `import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';` to introduce the TUICallKitService service. Initiate call using the `calls` method of TUICallKitService.
     ```ts
     try {
       await TUICallKitServer.calls({ 
@@ -239,7 +199,7 @@ Focus
       console.error(`[TUICallKit] Failed to call the groupCall API. Reason:${error}`);
     }
     ```
-  2.3 If it is a group chat, read the UserPicker component document. It is advisable to combine it with the Dialog component and pop up the UserPicker component.
+  2.3 If it is a group chat, read the UserPicker component document. It is advisable to combine it with the Dialog component to pop up the UserPicker component.
     Read the GroupSettingState document, combine the `getGroupMemberList` and `allMembers` attributes of GroupSettingState to get the group member list.
     ```ts
     try {
@@ -253,4 +213,4 @@ Focus
     ```
 
 
-Recommendation: Combine the `reachEnd` event of UserPicker with paged pull for group members, and use a throttling function to control the call frequency of `getGroupMemberList`.
+    Recommendation: Combine the `reachEnd` event of UserPicker with paged pull for group members, and use traffic throttling to control the call frequency of `getGroupMemberList`.