@tencentcloud/ai-desk-customer-vue 1.5.10 → 1.5.11

package/CHANGELOG.md

@@ -1,4 +1,12 @@
-## 1.5.9 @2025.9.18
+## 1.5.11 @2025.9.28
+
+### Features
+- 支持自定义 header 的 logo 和 title。
+- 优化 markdown url 识别的准确性。
+- 点赞点踩信令不存漫游。
+- toolbar button 增加点击防抖。
+
+## 1.5.10 @2025.9.18
 
 ### Features
 - 支持展示工作台快捷回复的视频。

package/README.md

@@ -1,3 +1,4 @@
+[简体中文](./README.md) / [English](./README_EN.md)
 ## 介绍
 
 智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用智能客服为您的产品增收提效，提升用户满意度和付费转化。
@@ -6,6 +7,10 @@
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/0a01bc0b572411f095485254005ef0f7.png)
 
+## 智能客服
+
+如果您想要关于智能客服的更详细的内容，请访问[腾讯云智能客服(Desk)](https://cloud.tencent.com/document/product/269/96056)。
+
 
 ## 开发环境要求
 - Vue ( 全面支持 Vue2 & Vue3 ， 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
@@ -23,11 +28,11 @@
 
 ### 步骤1：创建项目
 
-支持使用 webpack 或 vite 创建项目工程，配置 Vue3 / Vue2 + TypeScript + sass。以下是几种项目工程搭建示例：
+支持使用 [webpack](#vue-cli) 或 [vite](#vite) 创建项目工程，配置 Vue3 / Vue2 + TypeScript + sass。以下是几种项目工程搭建示例：
 
 
-
-【vue-cli】
+<span id="vue-cli"></span>
+#### vue-cli
 
 > **说明：**
 >
@@ -39,16 +44,12 @@
 
 如果您尚未安装 vue-cli 或者 vue-cli 版本低于 5.0.0 ，可以在 terminal 或 cmd 中采用如下方式进行安装：
 
-
-【shell】
-``` bash
+``` shell
 npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
 ```
 
 通过 vue-cli 创建项目，并选择下图中所选配置项。
 
-
-【shell】
 ``` bash
 vue create ai-desk-example
 ```
@@ -65,25 +66,22 @@ cd ai-desk-example
 如果您是 vue2 项目，请根据您所使用的 Vue 版本进行以下相应的环境配置， vue3 项目请忽略。
 
 
-
-【vue2.7】
+##### vue2.7
 ``` bash
 npm i vue@2.7.9 vue-template-compiler@2.7.9
 ```
 
-【vue2.6及以下】
+##### vue2.6及以下
 ``` bash
 npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
 ```
 
-【vite】
+<span id="vue-cli"></span>
+#### vite
 
 > **说明：**
 >
-
 > Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [Vite 官网](https://cn.vitejs.dev/guide/)。
->
-
 
 使用 vite 方式创建项目，按照下图选项配置 Vue + TypeScript 。
 ``` bash
@@ -106,8 +104,6 @@ npm i -D sass sass-loader
 
 清除项目默认的样式，避免样式问题：
 
-
-
 【macOS 端】
 ``` bash
 echo -n > src/style.css
@@ -127,33 +123,17 @@ echo. > src\style.css
 
 通过 npm 方式下载 UI 组件，并将 UI 组件复制到自己工程的 src 目录下：
 
-
-
 【macOS  端】
 
-
-【shell】
 ``` bash
 npm i @tencentcloud/ai-desk-customer-vue@latest
-```
-
-
-【shell】
-``` bash
 mkdir -p ./src/ai-desk-customer-vue && rsync -av --exclude={'node_modules','excluded-list.txt'} ./node_modules/@tencentcloud/ai-desk-customer-vue/ ./src/ai-desk-customer-vue
 ```
 
 【Windows  端】
 
-
-【shell】
 ``` bash
 npm i @tencentcloud/ai-desk-customer-vue@latest
-```
-
-
-【shell】
-``` bash
 xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-vue /i /e /exclude:.\node_modules\@tencentcloud\ai-desk-customer-vue\excluded-list.txt
 ```
 
@@ -165,14 +145,9 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 
 > **说明：**
 >
-
 > 以下示例代码使用了 setup 语法，如果您的项目没有使用 setup 语法，请按照 Vue3/Vue2 的标准方式注册组件。
->
-
-
-
 
-【vue3】
+##### vue3
 ``` javascript
 <template>
   <CustomerServiceChat
@@ -194,7 +169,7 @@ onMounted(() => {
 </style>
 ```
 
-【vue2.7】
+##### vue2.7
 ``` javascript
 <template>
   <div id="app">
@@ -220,7 +195,7 @@ onMounted(() => {
 </style>
 ```
 
-【vue2.6及以下】
+##### vue2.6及以下
 ``` javascript
 <template>
   <div id="app">
@@ -285,9 +260,9 @@ export * from "@vue/composition-api";
 - SDKAppID 信息，可在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 单击**应用管理** > **创建新应用**，并选择**智能客服 Desk**， [开通智能客服](https://console.cloud.tencent.com/im/ai-desk) 后获取。
 
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/328524a8533011f0abce52540099c741.png)
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/328524a8533011f0abce52540099c741.png)
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/bd6edb6a572911f0922d5254007c27c5.png)
+  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/bd6edb6a572911f0922d5254007c27c5.png)
 
 - userID 信息，可本地生成一个随机的字符串，例如 test-1234。
 
@@ -300,22 +275,13 @@ export * from "@vue/composition-api";
 
 执行以下命令启动项目：
 
-
-
-【vue-cli】
+#### vue-cli
 
 > **说明：**
 >
-
 > 由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示，为了您有更好的体验，**建议您关闭全局 overlay 报错提示。**
->
-
 > 在 vue.config.js 中添加以下代码
->
-
->
-
-【webpack4及以上】
+> ##### webpack4及以上
 > `module.exports = defineConfig({`
 > `  devServer: {`
 > `    client: {`
@@ -323,15 +289,13 @@ export * from "@vue/composition-api";
 > `    },`
 > `  },`
 > `});`
-
-【webpack3】
+> ##### webpack3
 > `module.exports = {`
 > `  devServer: {`
 > `    overlay: false,`
 > `  },`
 > `};`
 >
-
 > 在 tsconfig.json 中关闭 ai-desk-customer-vue  的ts检测。
 >
 > `{`
@@ -342,16 +306,11 @@ export * from "@vue/composition-api";
 > `}`
 
 
-
-【shell】
 ``` bash
 npm run serve
 ```
+#### vite
 
-【vite】
-
-
-【shell】
 ``` bash
 npm run dev
 ```
@@ -486,8 +445,7 @@ TUICustomerServer.initWithProfile({
 ### 工具栏快捷按钮
 
 如果您想实现输入框上方增加快捷按钮，方便用户使用，例如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png)
+<img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png" width="450px"></img>
 
 
 `toolbarButtonList` 是一个包含了一个或多个配置的数组，配置的描述如下：
@@ -606,14 +564,13 @@ onMounted(() => {
 
 > **说明：**
 >
-
 > 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.2 或更高版本。
 >
 
 
 如果您想实现打开客服会话时在聊天区域底部展示快捷订单，可以配置 `bottomQuickOrder`，效果如下所示：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d9eb994a572211f0b3f05254001c06ec.png)
+<img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d9eb994a572211f0b3f05254001c06ec.png" width="400px"></img>
 
 
 `bottomQuickOrder` 的参数描述如下：
@@ -718,14 +675,74 @@ onMounted(() => {
 </style>
 ```
 
+### 转指定坐席或客服分组
+
+> **说明：**
+> 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.6 或更高版本。
+> 
+
+
+如果您的应用需要在用户登录后自动转指定坐席或客服分组，请参考以下代码实现。
+
+【转指定坐席】
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1852010****',
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+}).then(() => {
+  TUICustomerServer.transferToHuman({
+    specificMemberList: ['agent_account_1', 'agent_account_2'], // 请替换为您应用的人工坐席账号
+    description: 'your description'
+  });
+});
+```
+
+【转客服分组】
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1852010****',
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+}).then(() => {
+  TUICustomerServer.transferToHuman({
+    groupID: 0, // 请替换为您应用的客服分组 ID
+    description: 'your description'
+  });
+});
+```
+
+### 触发指定任务流
+
+> **说明：**
+> 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.6 或更高版本。
+> 
+
+如果您的应用需要在用户登录后自动触发指定任务流，请参考以下代码实现。
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1852010****',
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+}).then(() => {
+  TUICustomerServer.transferToTaskFlow({
+    taskFlowID: 0, // 请替换为您应用的任务流 ID
+    description: 'your description'
+  });
+});
+```
+
 ### 多客服号
 
 > **说明：**
 >
-
 > 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.3 或更高版本。
->
-
 
 如果您的应用内需要多个客服号，为用户提供专属客服功能，以提高服务质量和响应速度，可用 UIKit 提供的多客服号功能实现。效果如下所示：
 
@@ -747,13 +764,24 @@ TUICustomerServer.initWithProfile({
 });
 ```
 
+### 识别文本消息超链接并支持点击​
+
+> **说明：**
+> 
+
+> 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.9 或更高版本。
+> 
+
+
+如果您的应用需要识别文本消息超链接并支持点击，请设置`enableURLDetection`值为 1，效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/01bc7ab8921411f089d25254007c27c5.png)
+
 ### 用户端主动结束人工会话
 
 > **说明：**
 >
-
 > 用户端可以通过发送自定义消息的方式实现主动结束会话，适用于以下 3 种情况：
->
 > 1. 用户转人工触发排队，发送此消息可以结束排队。
 > 2. 客服接待方式为手动接待，用户转人工分配客服成功后等待客服确认接待，发送此消息可以结束等待。
 > 3. 用户转人工且成功接入人工客服，发送此消息可以结束本次会话。
@@ -783,9 +811,7 @@ UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并
 
 UIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 UIKit 中 ts 代码共存。
 
-
-
-【vue-cli】
+###### vue-cli
 
 请在您 vue-cli 脚手架创建的工程根目录执行：
 ``` bash
@@ -796,7 +822,7 @@ vue add typescript
 
 **完成以上步骤后，请重新运行项目！**
 
-【Vite】
+###### Vite
 
 请在您 vite 创建的工程根目录执行：
 ``` bash
@@ -829,4 +855,4 @@ npm i marked@6.0.0 --legacy-peer-deps
 
 ## 交流与反馈
 
-[点此进入 IM 社群](https://zhiliao.qq.com/s/c5GY7HIM62CK)，享有专业工程师的支持，解决您的难题。
+[腾讯云智能客服(Desk)](https://cloud.tencent.com/document/product/269/96056)