@tencent-rtc/mcp 1.0.7 → 1.1.6

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

@@ -0,0 +1,45 @@
+# TUIKit Introduction
+
+TUIKit is a UI component library based on Tencent Cloud Chat SDK. It provides some common UI components, including session, chat, relationship chain, group, audio and video call and other features.
+Based on UI components, you can quickly build your own business logic like building blocks.
+The components in TUIKit implement UI features while calling the appropriate APIs of the IM SDK to handle IM-related logic and data. Therefore, developers using TUIKit only need to consider their business or personalized expansion.
+
+
+## TUIKit main features
+
+TUIKit is mainly divided into several UI subcomponents: Chat, ConversationList, ChatSetting, ContactList, and Search. Each UI component is responsible for showing different content.
+
+## Chat
+
+Chat is primarily responsible for displaying the message interface. You can use it to directly send different types of messages, including text, emoji, images, video, file, and custom message types. You can also long-press messages to forward, recall, or refer to them, as well as check message read receipt details. 
+
+## ConversationList
+
+ConversationList is primarily responsible for showing and editing the conversation list, including session pinning, mute conversation notifications, delete conversation, and other features. 
+
+## Search
+
+<table>
+<tr>
+<td rowspan="1" colSpan="1">global search</td>
+
+
+<td rowspan="1" colSpan="1">in-conversation search</td>
+</tr>
+
+
+<tr>
+<td rowspan="1" colSpan="1"><br>![Search ALL text containing "hello" via global search](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/bc24fa6e74a311eeb5cb52540099b6dd.gif)<br>Search ALL text containing "hello" via global search</td>
+
+
+<td rowspan="1" colSpan="1"><br>![Search all file messages in specific conversations](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/c05824eb74a311eeb3675254006b5335.gif)<br>Search all file messages in specific conversations</td>
+</tr>
+</table>
+
+## ChatSetting
+
+ChatSetting is primarily responsible for managing group information, group members, and group permissions. 
+
+## ContactList
+
+ContactList is primarily responsible for showing the contact person and permission setting.

package/resource/doc/chatuikit/vue/create-group.md

@@ -0,0 +1,25 @@
+# Create a group conversation in chat-uikit-vue3
+
+This document provides example code for creating a group conversation in chat-uikit-vue3. Use the createGroupConversation API provided by useConversationListState to create a group.
+
+
+## 1. Example code for creating a group
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
+
+const {
+  createGroupConversation,
+  setActiveConversation,
+} = useConversationListState();
+
+createGroupConversation({
+  name: `group-${Math.random()}`,
+  type: 'Public',
+}).then((conversation) => {
+  setActiveConversation(conversation.conversationID);
+});
+</script>
+```

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/{vue3 → 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`.