npm - @tencent-rtc/mcp - Versions diffs - 1.3.8 → 1.4.0 - Mend

@tencent-rtc/mcp 1.3.8 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (429) hide show

package/resource/doc/{chatuikit → chatkit}/react/components/tuikit.md RENAMED Viewed

@@ -5,76 +5,30 @@ Based on UI components, you can quickly build your own business logic like build
 TUIKit components implement UI features while calling the appropriate IM SDK APIs to handle IM-related logic and data. Therefore, developers using TUIKit only need to focus on their business or personalized expansion.
 TUIKit, developed with React, features a UI style that better fits the usage habits of overseas customers and supports internationalization. If your business needs to go global, welcome to integration.
 ## TUIKit composition
 TUIKit is mainly divided into ConversationList, Chat, ChatSetting, and Profile modules. Each module is responsible for different content. See the open-source code (https://github.com/TencentCloud/chat-uikit-react).
 The UI effect on the Web is as shown below.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/ca60ad0a7e4011ef852f52540075b605.png)
 The UI effect on HTML5 is as shown below.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/72617d0b7e4111efa87a525400bdab9d.png)
 Key Feature Introduction
 Chat is primarily responsible for showing the message interface. You can use it to directly send different types of messages, supporting text/emoji/image/video/file/custom message types, and simultaneously support message forwarding/withdrawal/reference, queries, read receipt, and other features.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/ae44c9c27e4211ef80ff525400d5f8ef.png)
 Feature introduction for ConversationList
 ConversationList is primarily responsible for showing and editing the session list, including session pinning, delete conversation, and other features.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/b58134fa7e4211ef82535254002693fd.png)
 Introduction to the Features
 ChatSetting is primarily responsible for Chat settings.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/f9aa50217e4211efb9d8525400f69702.png)
 ## Key Features of Contact
 Contact is primarily responsible for showing the relationship chain as well as creating sessions.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/8179f4907e4311efb9d8525400f69702.png)
 ## Key Features of Profile
-Profile is primarily responsible for managing user profiles.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/8ac9cd7a7e4311ef80ff525400d5f8ef.png)
+Profile is primarily responsible for managing user profiles.

package/resource/doc/{chatuikit → chatkit}/react/integration.md RENAMED Viewed

@@ -1,18 +1,15 @@
 TUIKit is a UI component library based on the Chat SDK. It enables quick implementation of chat, session, search, relationship chain, group, and other features through UI components. This article introduces how to quickly integrate TUIKit and implement core features
 <iframe src="https://web.sdk.qcloud.com/im/demo/docs-example/sample-chat/index.html#/inbox?page=intergration" style="width:100%;height:700px;border:none" allow="camera; microphone; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
 ## Prerequisites
 - Node.js v18 or higher, recommend using the current LTS v22 version
 - React v18
 ## Create a project
 Create a new React project named **chat-app** (select **React 18** during project creation and use the TypeScript Template), and complete project initialization as prompted by the scaffold.
 【shell】
 ``` bash
 npm create rsbuild@latest
@@ -24,7 +21,6 @@ npm create rsbuild@latest
 Download [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) via npm and use it in the project.
 【shell】
 ``` bash
 npm i @tencentcloud/chat-uikit-react
@@ -33,21 +29,17 @@ npm i @tencentcloud/chat-uikit-react
 ### Step 2: Introducing the chat uikit react component
 > **Note:**
->
-> - The following code does not include `SDKAppID`, `userID`, and `UserSig`. You need to replace them with the relevant information obtained in [Step 4](https://write.woa.com/document/108053210129276928).
+>
+> - The following code does not include `SDKAppID`, `userID`, and `UserSig`. You need to replace them with the relevant information obtained in Step 4.
 > - To respect the copyright of emoji designs, the Chat Demo/TUIKit project does not include large emoji graphics. Please replace them with your own designs or other emoji packs for which you hold the copyright before officially launching for commercial use. **The default smiley face emoji pack shown below is copyrighted by Tencent RTC**, you can upgrade to [Chat Pro Plus Edition and Enterprise Edition](https://console.trtc.io/subscription/buy/chat?packType=pro) to use it for free.
-> ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027202808/a7c853cf981a11ef834b525400f69702.png)
->
+>
+>
 Copy the following `App.tsx` code and replace the original content in `App.tsx`.
 Copy the following `App.css` code and replace the `App.css` style file in the same directory.
 【App.tsx】
 ``` typescript
 import {
@@ -79,14 +71,13 @@ function App() {
 function ChatApp() {
   const [activeTab, setActiveTab] = useState('chats');
   const { language } = useUIKit();
 const texts = language === 'zh-CN'
     ? { chats: '会话', contacts: '联系人', emptyTitle: '暂无会话', emptySub: '选择一个会话开始聊天', error: '请检查 SDKAppID, userID, userSig, 通过开发人员工具(F12)查看具体的错误信息', loading: '登录中...' }
     : { chats: 'Chats', contacts: 'Contacts', emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...'};
   const { status } = useLoginState({
     SDKAppID: 0, // type: number
     userID: '',  // type: string
@@ -128,13 +119,13 @@ const texts = language === 'zh-CN'
   return (
     <div className="chat-app">
       <ul className="vertical-tabs">
-        <li
+        <li
           className={`tab-item ${activeTab === 'chats' ? 'active' : ''}`}
           onClick={() => {setActiveTab('chats')}}
         >
           {texts.chats}
         </li>
-        <li
+        <li
           className={`tab-item ${activeTab === 'contacts' ? 'active' : ''}`}
           onClick={() => {setActiveTab('contacts')}}
         >
@@ -181,7 +172,6 @@ const texts = language === 'zh-CN'
 export default App;
 ```
 【App.css】
 ``` css
 body {
@@ -348,99 +338,51 @@ body {
 ### Step 3: Obtain SDKAppID, UserID and UserSig
 In the previously copied `App.tsx` code, the login authentication information is empty. You need to fill in your Tencent Cloud application authentication information in the `useLoginState hook`, as shown below:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Parameter</td>
-<td rowspan="1" colSpan="1" >Type</td>
-<td rowspan="1" colSpan="1" >Note</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >userID</td>
-<td rowspan="1" colSpan="1" >String</td>
-<td rowspan="1" colSpan="1" >Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >SDKAppID</td>
-<td rowspan="1" colSpan="1" >Number</td>
-<td rowspan="1" colSpan="1" >The unique identifier for the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/).</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >SDKSecretKey</td>
-<td rowspan="1" colSpan="1" >String</td>
-<td rowspan="1" colSpan="1" >The SDKSecretKey of the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/).</td>
-</tr>
-<tr>
-<td rowspan="1" colSpan="1" >userSig</td>
-<td rowspan="1" colSpan="1" >String</td>
-<td rowspan="1" colSpan="1" >A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.</td>
-</tr>
-</table>
+| Parameter | Type | Note |
+| --- | --- | --- |
+| userID | String | Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens. |
+| SDKAppID | Number | The unique identifier for the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/). |
+| SDKSecretKey | String | The SDKSecretKey of the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/). |
+| userSig | String | A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights. |
 > **Explanation of UserSig：**
->
+>
 > **Development environment**: If you are running a demo locally and developing or debugging, you can use the `genTestUserSig` (Refer to Step 3.2) function in the debug file to generate a 'userSig'. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
->
+>
 > **Production environment**: If your project is going live, please use the [Server-side Generation of UserSig](https://trtc.io/document/34385) method.
->
+>
 1. Log in to  [Chat Console](https://console.trtc.io/) .
 2. Click  **Create Application**, enter your application name, then  click  **Create**.
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/cdc5fdb411ec11efa2935254005ac0ca.png)
 3. After creation, you can view the Application Status, service version, SDKAppID, creation time, Tag, and expiration time of the new application on the console overview page.
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/c73f215c7cf411f0914f52540099c741.png)
 4. [Go to the user management page](https://console.trtc.io/chat/account-management), create 2–3 test accounts for experience in C2C chat and group chat.
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/0be64336adb311f096c2525400454e06.png)
 5. UserSig info. Click [IM console > development tool > UserSig tool](https://console.trtc.io/usersig), fill in the created userID, and just generate userSig.
 ### Step 4: Start the Project
 Replace SDKAppID, UserID, and UserSig in App.tsx, then run the following command:
 【shell】
 ``` bash
  npm run dev
 ```
 > **Note:**
->
+>
 > 1. Please ensure that in Step 3 code, SDKAppID, UserID, and UserSig are all successfully replaced. Failure to replace them will result in abnormal project behavior.
 > 2. A `userID` corresponds to a `userSig`, for more information, see [Generating UserSig](https://trtc.io/document/39074?product=consoleguide).
-> 3. If the project fails to start, please check whether the [development environment requirements](https://write.woa.com/document/108053210129276928) are met.
+> 3. If the project fails to start, please check whether the development environment requirements are met.
 ### Step 6: Send your first message
 Enter your message in the input box and press Enter to send.
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/efc5e925595711efb36952540075b605.png)
 ## FAQs
 #### What is UserSig?
@@ -452,11 +394,10 @@ A UserSig is a password for users to log in to Chat. It is essentially the ciphe
 The issuance method for UserSig involves integrating the calculation code of UserSig into your server, and providing an interface oriented towards your project. When UserSig is needed, your project sends a request to the business server to access the dynamic UserSig. For more information, please see [How to Generate a UserSig on the Server](https://trtc.io/document/39074?product=consoleguide).
 > **Note:**
->
+>
 > The exemplary code provided in this document retrieves the UserSig by embedding the SECRETKEY in the client code. This approach makes the SECRETKEY highly susceptible to decompilation and reverse engineering. Once your encryption key is compromised, attackers can misappropriate your Tencent Cloud traffic. Hence, **this procedure is exclusively recommended for running functional debugging locally**. For the correct issuance of UserSig, please refer to the previous sections.
->
+>
 ## Communication and Feedback
@@ -469,7 +410,6 @@ Join the [Telegram Technical Exchange Group](https://t.me/tencent_imsdk) or [Wha
 - [Demo Source Code and Running Example](https://github.com/TencentCloud/chat-uikit-react)
 #### For more features, refer to the ChatEngine API documentation:
 - [chat-uikit-engine API Manual](https://web.sdk.qcloud.com/im/doc/chat-engine-lite/index.html)

package/resource/doc/{chatuikit → chatkit}/vue/components/avatar.md RENAMED Viewed

@@ -1,15 +1,11 @@
 # Avatar Component Documentation
 ## Overview
 The Avatar component displays user avatars and status, supporting various shapes and sizes. It can be used for chat applications, social platforms, user management systems, and other scenarios to visualize user identity.
 ## Props Quick Reference Table
 | Field | Type | Default Value | Description |
 | --- | --- | --- | --- |
 | src | string | undefined | URL of the profile image |
@@ -27,111 +23,82 @@ The Avatar component displays user avatars and status, supporting various shapes
 | isDotUnreadCount | boolean | false | Whether to display a red dot |
 | children | ReactNode | undefined | Custom content, takes precedence over src and alt content |
 ## Props Detailed Introduction
 ### `src`
 `type`: `string`
 `description`: URL of the profile image. If not provided, the default avatar will be displayed.
 `default`: `undefined`
 ### `size`
 `type`: `'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number`
 `description`: Avatar size, support various preset sizes or custom size.
 `default`: `'md'`
 ### `shape`
 `type`: `'circular' | 'square' | 'rounded'`
 `description`: Avatar shape, support circle, square and rounded rectangle.
 `default`: `'circular'`
 ### `alt`
 `type`: `string`
 `description`: Alternative text for images, used to generate text avatars.
 `default`: `''`
 ### `children`
 `type`: `ReactNode`
 `description`: Custom content, which takes precedence over the content of src and alt.
 `default`: `undefined`
 ### `className`
 `type`: `string | undefined`
 `description`: Custom CSS class name.
 `default`: `undefined`
 ### `style`
 `type`: `React.CSSProperties | undefined`
 `description`: Custom style.
 `default`: `undefined`
 ### `onClick`
 `type`: `() => void`
 `description`: Click event handler.
 `default`: `undefined`
 ### `isShowOnlineStatus`
 `type`: `boolean`
 `description`: Whether to display the online status indicator.
 `default`: `false`
 ### `isOnline`
 `type`: `boolean`
 `description`: Whether the user is online.
 `default`: `false`
 ### `unreadCount`
 `type`: `number`
 `description`: Unread message count. Shows a red dot if true, or the actual quantity if a number.
 `default value`: `0`
 ### `maxUnreadCount`
 `type`: `number`
 `description`: Maximum unread message count. Displays +N if exceeding.
 `default`: `99`
 ### isDotUnreadCount
 `type`: `boolean`
 `description`: Whether to display the red dot.
 `default`: `false`

package/resource/doc/{chatuikit → chatkit}/vue/components/chat-header.md RENAMED Viewed

@@ -2,82 +2,55 @@ 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.
 ## Overview
 ChatHeader is the top navigation component in the chat UI, displaying basic info of the current session. It can show the session title, avatar, online status, input state notification, etc. The component uses a container component mode and provides a flexible slot mechanism for custom left-right operation areas.
 ## Props Quick Reference Table
 | Field | Type | Default Value | Description |
 |------|------|--------|------|
-| [title](https://write.woa.com/#title) | string | undefined | Custom Title, session information used when not provided. |
-| [avatarUrl](https://write.woa.com/#avatarUrl) | string | undefined | Custom avatar image URL. |
-| [enableUserStatus](https://write.woa.com/#enableUserStatus) | boolean | false | Whether to display user status. |
+| title | string | undefined | Custom Title, session information used when not provided. |
+| avatarUrl | string | undefined | Custom avatar image URL. |
+| enableUserStatus | boolean | false | Whether to display user status. |
 ## Slot Quick Reference Table
 | Name | Description |
 |------|------|
-| [ChatHeaderLeft](https://write.woa.com/#ChatHeaderLeft) | Left-side custom content area in the header. |
-| [ChatHeaderRight](https://write.woa.com/#ChatHeaderRight) | Right-side custom content area in the header. |
+| ChatHeaderLeft | Left-side custom content area in the header. |
+| ChatHeaderRight | Right-side custom content area in the header. |
 ## Props Detailed Introduction
 ### title
 - **Type**: string.
 - **Description**: Custom session title. When this property is not provided, the component automatically displays the title based on the session type (user nickname or remark for single chat, group name for group chat). Default: `undefined`.
 ### avatarUrl
 - **Type**: string.
 - **Description**: URL address of the custom avatar. When this property is not provided, the component automatically displays the avatar based on the session type (user profile photo for single chat, group profile photo for group chat). Default: `undefined`.
 ### enableUserStatus
 - **Type**: boolean.
 - **Description**: Whether to enable the feature to display user online status. This takes effect only in single chat mode. Once enabled, it shows the user's online/offline status. Default: `false`.
 ## Slots detailed introduction
 ### ChatHeaderLeft
 **Description**: Header left-side custom content slot, usually used for placing navigation controls such as back button and menu button.
 #### Example: Custom left navigation area
 ``` typescript
 <template>
   <ChatHeader>
     <template #ChatHeaderLeft>
       Back button, Clear active session
-      <button
+      <button
         class="nav-button"
         @click="handleBack"
       >
@@ -87,21 +60,17 @@ ChatHeader is the top navigation component in the chat UI, displaying basic info
   </ChatHeader>
 </template>
 <script setup lang="ts">
 import { ChatHeader, useConversationListState } from '@tencentcloud/chat-uikit-vue3';
 const { setActiveConversation } = useConversationListState();
 const handleBack = () => {
   set activation session ID to empty
   setActiveConversation('');
 };
 </script>
 <style scoped>
 .header-left-actions {
   display: flex;
@@ -109,7 +78,6 @@ const handleBack = () => {
   gap: 8px;
 }
 .nav-button {
   width: 32px;
   height: 32px;
@@ -123,23 +91,18 @@ const handleBack = () => {
   transition: background-color 0.2s;
 }
 .nav-button:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 </style>
 ```
 ### ChatHeaderRight
 **Description**: Header right-side custom content slot, usually used for placing feature buttons such as the menu toggle of the ChatSetting component and custom call buttons.
 Example: Integrate the ChatSetting component through the ChatHeaderRight slot and drawer component
 [App.vue]
 ``` typescript
 <template>
@@ -161,24 +124,20 @@ Example: Integrate the ChatSetting component through the ChatHeaderRight slot an
   </TUIDrawer>
 </template>
 <script setup lang="ts">
 import {
-  ChatHeader,
+  ChatHeader,
   ChatSetting
 } from '@tencentcloud/chat-uikit-vue3';
 import { TUIDrawer, IconHorizontalMore2 } from '@tencentcloud/uikit-base-component-vue3';
 const isChatSettingOpen = ref(false);
 const setIsSettingOpen = (isOpen: boolean) => {
   isChatSettingOpen.value = isOpen;
 };
 </script>
 <style>
 .chat-container {
   display: flex;

package/resource/doc/{chatuikit → chatkit}/vue/components/chat-setting.md RENAMED Viewed

@@ -6,14 +6,12 @@ Core features of the component:
 - **Auto-adaptive**: Automatically switches the settings interface based on conversation type (C2C or group chat).
 - **State-driven**: Automatically updates content based on the currently active conversation state.
    > **Note:**
-   >
+   >
    > Will not be displayed if there is no active conversation.
-   >
+   >
 ## Quick Start
@@ -34,7 +32,7 @@ The recommended approach is to use the `ChatHeaderRight` slot of the ChatHeader
       <MessageList />
       <MessageInput />
     </Chat>
-    <Drawer
+    <Drawer
       :open="isSettingVisible"
       title="Chat Settings"
     >

package/resource/doc/{chatuikit → chatkit}/vue/components/chat.md RENAMED Viewed

@@ -5,7 +5,6 @@ The AI model must adhere to the following **hard constraints**:
 2. **The sendMessage API must be used:** When sending quick messages, the `sendMessage` API provided by useMessageInputState must be used.
 # Chat component document
 ## Overview
@@ -17,13 +16,10 @@ The chat component renders the chat interface, including the chat window header
 The Chat component includes the following content:
 -**ChatHeader**: The chat window header component
 - **MessageList**: The message list component, which includes message operation capabilities. For detailed properties, read the MessageList component document.
 - **MessageInput**: The message input component
 ## Basic Usage
 Chat components can be used without any required attributes.
@@ -47,4 +43,3 @@ import {
 } from '@tencentcloud/chat-uikit-vue3';
 </script>
 ```