@tencentcloud/sdk-mcp 1.0.2 → 1.0.4

package/resource/doc/chatuikit/react/integrate_tuichat_only_react.md

@@ -0,0 +1,185 @@
+## 适用场景
+
+Web & H5 平台，独立集成私信聊天（1V1）或者群聊（Group），例如房产中介咨询、电商在线客服、保险远程定损等。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/d6a3e0917e4811ef96bb5254000dcb0f.png)
+
+
+## 开发环境要求
+- React ≥ v18.0 （17.x 版本不支持）
+
+- TypeScript
+
+- node（node.js ≥ 16.0.0）
+
+- npm（版本请与 node 版本匹配）
+
+
+## chat-uikit-react 集成
+
+### 步骤1：创建项目
+1. 创建一个新的 React 项目，您可自行选择是否需要使用 ts 模板。
+
+   
+   
+   【shell】
+   ``` bash
+   npx create-react-app sample-chat --template typescript
+   ```
+2. 创建项目完成后，切换到项目所在目录。
+
+   
+   
+   【shell】
+   ``` bash
+   cd sample-chat
+   ```
+
+### 步骤2：下载 chat-uikit-react 组件
+
+通过 npm 方式下载  [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) 并在项目中使用。
+
+
+【shell】
+``` bash
+npm i @tencentcloud/chat-uikit-react @tencentcloud/uikit-base-component-react
+```
+
+### 步骤3：引入 chat-uikit-react 组件，创建并打开会话进行聊天
+
+> **注意：**
+> 
+
+> 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 [步骤4](https://write.woa.com/#step4) 中获取相关信息后进行替换。
+> 
+
+
+> **说明：**
+> 
+> - 关于群聊： 
+> - 可以通过调用 API [createC2CConversation](https://write.woa.com/document/157860942511771648) 来创建单聊。
+> - 可以通过调用 API [createGroupConversation](https://write.woa.com/document/157860942511771648) 来创建群聊。
+> - 进入聊天的方式：
+> - 通过调用 API [setActiveConversation](https://write.woa.com/document/157860942511771648)，传入 conversationID 进入聊天页面。
+
+
+替换 App.tsx 中的内容，或者您可以新建一个组件引入。
+``` javascript
+import React from 'react';
+import {
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+  ChatSetting,
+  Search,
+  VariantType,
+  useUIOpenControlState,
+  useLoginState,
+  useConversationListState,
+} from '@tencentcloud/chat-uikit-react';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
+
+const config = {
+  SDKAppID: 0, // 您的 SDKAppID， 参考步骤4
+  userID: 'test-user1', // 您登录的 UserID， 参考步骤4
+  userSig: '', // 您的 userSig, 参考步骤4
+}
+
+export default function App() { 
+  // 语言支持 en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
+  // 主题支持 light(default) / dark
+  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
+  const { setActiveConversation, createC2CConversation } = useConversationListState();
+  const { login } = useLoginState();
+  login(config).then(() => {
+      const userID = 'test-user2'; // userID: 消息接收方的 userID
+      createC2CConversation(userID).then((conversation) => {
+        setActiveConversation(conversation.conversationID);
+      })
+  }).catch(() => {});
+  return (
+    <div style={{display: 'flex', height: '100vh'}}>
+      <UIKitProvider language='en-US' theme='light'>
+        <Chat>
+          <ChatHeader />
+          <MessageList />
+          <MessageInput />
+        </Chat>
+        {isChatSettingOpen && <ChatSetting />}
+        {isChatSearchOpen &&  <Search style={{ minWidth: '300px'}} variant={VariantType.EMBEDDED} />}
+      </UIKitProvider>
+    </div>   
+  );
+}
+```
+
+### 步骤4：获取 SDKAppID、userID 和 userSig
+- SDKAppID：SDKAppID 是腾讯云 IM 服务区分客户账号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
+
+
+   您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 查看所有的 SDKAppID，单击**创建新应用**，可以创建新的 SDKAppID。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/bd48a26f1c9a11efb275525400720cb5.png)
+
+- userID：可通过单击 [即时通信 IM 控制台 > 账号管理](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，即可创建账号并获取 userID。**您可以创建两个或多个 userID 便于体验聊天。**
+
+
+   **例如：创建 test-user1、test-user2 两个账号**
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/bd56161b1c9a11efb7495254005ac0ca.png)
+
+- userSig：可单击 [即时通信 IM 控制台 > 开发工具 > UserSig生成&校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 UserID，即可生成 UserSig。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/bd2617a61c9a11ef949d52540019e87e.png)
+
+
+### 步骤5：启动项目
+
+
+【shell】
+``` bash
+ npm run start
+```
+
+> **注意：**
+> 
+> 1. 请确保 [步骤3](https://write.woa.com/#step3) 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+> 2. userID 和 userSig  为一一对应关系，具体参见 [生成 UserSig](https://console.cloud.tencent.com/im/tool-usersig)。
+> 3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
+
+
+### 步骤6：发送您的第一条消息
+
+在输入框输入消息，按下 **enter **键发送。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/511f1c4d7e4811efb9d8525400f69702.png)
+
+
+## 常见问题
+
+#### 什么是 UserSig？
+
+UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
+
+#### 如何生成 UserSig？
+
+UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
+
+> **注意：**
+> 
+
+> 本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见上文。
+> 
+
+
+#### 是否支持 react 17.x 版本？
+
+目前不支持 17.x 版本，仅支持 React ≥ v18.0。
+
+## 参考文档
+- [chat-uikit-react npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react)
+
+- [Demo源码及跑通示例](https://github.com/TencentCloud/chat-uikit-react)
+
+

package/resource/doc/chatuikit/react/integrate_tuichat_react.md

@@ -0,0 +1,212 @@
+## chat-uikit-react 介绍
+
+chat-uikit-react 是基于腾讯云 Chat SDK 的一款 react UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-react 界面效果如下图所示：
+
+您可以在线体验：
+- [Web Demo](https://web.sdk.qcloud.com/im/demo/react/index.html?scene=social)
+
+- [H5 Demo](https://trtc.io/demo/homepage/#/detail?scene=messenger)
+
+
+   **TUIKit Web 端**界面效果如下图所示：
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/73e9ee987e4611efa9f2525400044e04.png)
+
+
+   **TUIKit H5 端**界面效果如下图所示：
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/847619c67e4611ef80ff525400d5f8ef.png)
+
+
+## 开发环境要求
+- React v18
+
+- TypeScript
+
+- Node.js ≥ v18
+
+- npm（版本请与 node 版本匹配）
+
+
+## chat-uikit-react 集成
+
+### 步骤1：创建项目
+
+创建一个新的名为 **chat-app** 的 React 项目（创建项目时选择 React 18，并且建议使用 TypeScript 模板），并按照提示跑通脚手架初始项目。
+
+
+【shell】
+``` bash
+npm create rsbuild@latest
+```
+
+### 步骤2：下载 chat-uikit-react 组件
+
+通过 npm 方式下载 [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) 并在项目中使用。
+
+
+【shell】
+``` bash
+npm i @tencentcloud/chat-uikit-react
+```
+
+### 步骤3：引入 chat-uikit-react 组件
+
+> **注意：**
+> 
+> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 [步骤4](https://write.woa.com/#step4) 中获取相关信息后进行替换。
+> - 为了尊重表情符号设计的版权，Demo/UIKit 项目不包括大型表情元素的剪切图。请在正式商业发布之前，用您自己设计或拥有版权的表情包替换它们。默认的小黄脸表情包由腾讯云拥有版权，并可以收费授权。如果您希望获得授权，请提交工单与我们联系。
+
+
+替换 App.tsx 中的内容，或者您可以新建一个组件引入。
+``` typescript
+import {
+  UIKitProvider,
+  useLoginState,
+  LoginStatus,
+  ConversationList,
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+  useUIOpenControlState,
+  ChatSetting,
+  Search,
+  VariantType,
+  ContactList,
+  ContactInfo,
+} from "@tencentcloud/chat-uikit-react";
+import { useState } from "react";
+
+function App() {
+  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
+  const [activeTab, setActiveTab] = useState('chats');
+
+  const { status } = useLoginState({
+    SDKAppID: 0, // 参考步骤 4
+    userID: '',  // 参考步骤 4
+    userSig: '', // 参考步骤 4
+  })
+
+  if (status !== LoginStatus.SUCCESS) {
+    return <div>Loading...</div>
+  }
+  
+  // 语言支持 en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
+  // 主题支持 light(default) / dark
+  return (
+    <UIKitProvider>
+      <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'row' }}>
+        <ul>
+          <li onClick={() => {setActiveTab('chats')}}>chats</li>
+          <li onClick={() => {setActiveTab('contacts')}}>contact</li>
+        </ul>
+        {
+          activeTab === 'chats' && (
+            <>
+              <ConversationList style={{ minWidth: '300px', maxWidth: '350px' }}/>
+              <Chat PlaceholderEmpty="No messages yet">
+                <ChatHeader />
+                <MessageList />
+                <MessageInput />
+              </Chat>
+              {isChatSettingOpen && <ChatSetting />}
+              {isChatSearchOpen &&  <Search style={{ minWidth: '300px'}} variant={VariantType.EMBEDDED} />}
+            </>
+          )
+        }
+        {
+          activeTab === 'contacts' && (
+            <>
+              <ContactList style={{ minWidth: '300px', maxWidth: '350px' }}/>
+              <ContactInfo 
+                PlaceholderEmpty="No contact yet"
+                onSendMessage={() => {setActiveTab('chats')}}
+                onEnterGroup={() => {setActiveTab('chats')}}
+              />
+            </>
+          )
+        }
+      </div>
+    </UIKitProvider>
+  );
+}
+
+export default App;
+```
+
+### 步骤4：获取 SDKAppID、userID 和 userSig
+- SDKAppID：SDKAppID 是腾讯云 IM 服务区分客户账号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
+
+
+   您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 查看所有的 SDKAppID，单击**创建新应用**，可以创建新的 SDKAppID。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/ce047e42ce0d11eeb6e6525400170219.png)
+
+- userID：可通过单击 [ 即时通信 IM 控制台 -【账号管理】](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，即可创建账号并获取 userID。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/f1d10c67175311efa66f525400f65c2a.png)
+
+- userSig：可单击 [ 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 userID，即可生成 userSig。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/47b38334175311ef9c015254002977b6.png)
+
+
+### 步骤5：启动项目
+
+
+【shell】
+``` bash
+ npm run dev
+```
+
+> **注意：**
+> 
+> 1. 请确保 [步骤3](https://write.woa.com/#step3) 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+> 2. userID 和 userSig  为一一对应关系，具体参见 [生成 UserSig（用户鉴权）](https://write.woa.com/document/107052240244191232)。
+> 3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
+
+
+### 步骤6：发送您的第一条消息
+1. 项目启动成功后，单击 **+ **图标，创建会话。
+
+2. 在输入框中搜索另一个用户的 userID（参考：[步骤4 -> 创建账号并获取 userID](https://write.woa.com/#step4)）。
+
+3. 单击用户头像发起会话。
+
+4. 在输入框输入消息，按下 **Enter **键发送。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100025598411/6bd24a6ecd3d11ed9d66525400c56988.gif)
+
+
+## 常见问题
+
+#### 什么是 UserSig？
+
+UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
+
+#### 如何生成 UserSig？
+
+UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
+
+> **注意：**
+> 
+
+> 本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见上文。
+> 
+
+
+#### 是否支持 react 17.x 版本？
+
+目前不支持 17.x 版本，仅支持 React v18。
+
+## 相关文档
+
+## 参考文档
+
+#### UIKit 相关：
+- [chat-uikit-react npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react)
+
+- [Demo 跑通示例](https://github.com/TencentCloud/chat-uikit-react)
+
+

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

@@ -0,0 +1,149 @@
+## 适用场景
+
+Web & H5 平台，独立集成私信聊天（1V1）或者群聊（Group），例如房产中介咨询、电商在线客服、保险远程定损等。
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/003531a5822811f0b3fe525400bf7822.png)
+
+
+## 开发环境要求
+- vue3
+
+- TypeScript
+
+- node（node.js ≥ 16.0.0）
+
+- npm（版本请与 node 版本匹配）
+
+
+## 集成指引
+
+### 步骤1：创建项目
+1. 创建一个新的名称为 **chat-example** 的 Vue3 项目，您可自行选择是否需要使用 ts 模板。
+
+   
+   
+   【shell】
+   ``` bash
+   npm create vite@latest
+   ```
+2. 创建项目完成后，切换到项目所在目录。
+
+   
+   
+   【shell】
+   ``` bash
+   cd chat-example
+   npm install
+   ```
+
+### 步骤2：下载 chat-uikit-vue3 组件
+
+
+【shell】
+``` bash
+npm i @tencentcloud/chat-uikit-vue3
+```
+
+### 步骤3：仅引入 Chat 相关组件
+
+##### 在 App.vue 页面中实现以下代码，即可快速搭建聊天界面并开启指定会话：
+
+> **说明：**
+> 
+
+> conversationID：会话 ID。会话ID组成方式如下：
+> 
+> - C2C${userID}（单聊），例如 `C2C123456`
+> - GROUP${groupID}（群聊），例如 `GROUP123456`
+
+``` javascript
+<template>
+  <div class="app">
+      <UIKitProvider>
+        <Chat style="flex: 1;">
+          <ChatHeader />
+          <MessageList />
+          <MessageInput />
+        </Chat>
+      </UIKitProvider>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  Chat,
+  MessageList,
+  MessageInput,
+  ChatHeader,
+  UIKitProvider,
+  useLoginState,
+  useConversationListState,
+} from '@tencentcloud/chat-uikit-vue3';
+const config = {
+  sdkAppId : 0, // SDKAppID, 可以参考步骤 4 获取
+  userId: 'xxx', // UserID, 可以参考步骤 4 获取
+  userSig: 'xxx', // userSig, 可以参考步骤 4 获取
+}
+
+const { login } = useLoginState();
+const { setActiveConversation } = useConversationListState();
+const conversationID="YOUR_CONVERSATIONID"; // 参考说明设置您需要的会话 ID。
+
+login({
+  ...config,
+  useUploadPlugin: true
+})
+.then(() => {
+    setActiveConversation(conversationID)
+})
+.catch(() => {});
+</script>
+<style lang="scss">
+.app {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+</style>
+```
+
+### 步骤4：获取 SDKAppID、userID 和 userSig
+- SDKAppID：SDKAppID 是腾讯云 IM 服务区分客户账号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
+
+
+   您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 查看所有的 SDKAppID，单击**创建新应用**，可以创建新的 SDKAppID。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/a8b350bd822a11f08aa952540099c741.png)
+
+- userID：可通过单击 [ 即时通信 IM 控制台 -【账号管理】](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，即可创建账号并获取 userID。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/a8c18ed1822a11f0b3fe525400bf7822.png)
+
+- userSig：可单击 [ 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验](https://console.cloud.tencent.com/im/tool-usersig)，填写创建的 userID，即可生成 userSig。
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/a8bd7f1e822a11f0b1df52540044a08e.png)
+
+
+### 步骤5：启动项目
+
+
+【shell】
+``` bash
+ npm run dev
+```
+
+> **注意：**
+> 
+> 1. 请确保 [步骤3](https://write.woa.com/#step3) 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+> 2. userID 和 userSig  为一一对应关系，具体参见 生成 UserSig。
+> 3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
+
+
+## 相关文档
+- [chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
+
+- [github Demo](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/demos/rtcube-vite-vue3)
+
+
+## 交流与反馈
+
+如遇任何问题，可联系 [官网售后](https://cloud.tencent.com/act/event/connect-service#/) 反馈，享有专业工程师的支持，解决您的难题。