@tencentcloud/ai-desk-customer-vue 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 1.5.4 @2025.7.24
+
+### Features
+- 支持直接转指定人工或者客服分组，支持转指定任务流，提升交互体验。
+- 支持点击分支选项打开 url。
+- 新增参数 `enableMultilingual` 和 `langList`，支持多语言切换。
+- 支持手动结束机器人会话并对机器人评分。
+- 优化欢迎卡片样式。
+
+### Fixed
+- 人工会话状态可能不准确的问题。
+
+## 1.5.3 @2025.7.10
+
+### Features
+- 支持多客服号。
+- 支持引用消息。
+
 ## 1.5.2 @2025.7.2
 
 ### Features

package/README.md

@@ -1,10 +1,10 @@
 ## 介绍
 
-智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品增收提效。
+智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用智能客服为您的产品增收提效，提升用户满意度和付费转化。
 
 ## 效果展示
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/2f5444f4095b11f0990f52540099c741.png)
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/0a01bc0b572411f095485254005ef0f7.png)
 
 
 ## 开发环境要求
@@ -81,7 +81,7 @@ npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-co
 > **说明：**
 >
 
-> Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [vite 官网](https://cn.vitejs.dev/guide/)。
+> Vite 需要[**Node.js**](https://nodejs.org/en/)** 版本 18+，20+。**当您的包管理器发出警告时，请注意升级您的 Node 版本，详情请参考 [Vite 官网](https://cn.vitejs.dev/guide/)。
 >
 
 
@@ -176,7 +176,7 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 ``` javascript
 <template>
   <CustomerServiceChat
-      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
   />
 </template>
 <script setup lang="ts">
@@ -199,7 +199,7 @@ onMounted(() => {
 <template>
   <div id="app">
     <CustomerServiceChat
-        :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -225,7 +225,7 @@ onMounted(() => {
 <template>
   <div id="app">
     <CustomerServiceChat
-        :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+      :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -282,11 +282,12 @@ export * from "@vue/composition-api";
 ### 步骤4： 获取 SDKAppID 、userID 、 userSig
 
 设置`App.vue`中的 `SDKAppID`、`userID`、`userSig` 。
-- SDKAppID 信息，可在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 单击**应用管理** > **创建新应用**，并选择**客服服务 Desk** > **智能客服**， [开通智能客服](https://console.cloud.tencent.com/im/ai-desk) 后获取。
+- 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/100031390357/7ac165770ae411f088bd525400e889b2.png)
 
-  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/c5699ccc0ae411f0b3015254001c06ec.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)
 
 - userID 信息，可本地生成一个随机的字符串，例如 test-1234。
 
@@ -359,7 +360,7 @@ npm run dev
 
 ### 国际化界面语言
 
-从 v1.0.0 起，UIKit 支持以下界面语言：
+UIKit 支持以下界面语言：
 <table>
 <tr>
 <td rowspan="1" colSpan="1" >语言代码（userLang）</td>
@@ -432,22 +433,24 @@ npm run dev
 如果您的业务需要出海，且用户语言以英语为主，可在引入智能客服时设置`userLang="en"`。如果您不指定`userLang`, UIKit 会使用浏览器设置的语言。
 ``` javascript
 <template>
-    <CustomerServiceChat style="height: 100%;"
-        userLang="en"
-    />
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    userLang="en"
+  />
 </template>
 ```
 
 如果您需要支持动态切换用户语言，可使用`TUICustomerServer.changeLanguage`接口，并通过切换 页面/组件 key 的方式，实现语言动态修改与展示。
 ``` javascript
 <template>
-    <CustomerServiceChat style="height: 100%;"
-        :key="locale"
-        :userLang="locale"
-    />
+  <CustomerServiceChat 
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :key="locale"
+    :userLang="locale"
+  />
 </template>
 <script setup lang="ts">
-import TUICustomerServer, { CustomerServiceChat }  from '../../ai-desk-customer-uniapp';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
 import { onMounted, ref } from "vue";
 
 const locale = ref('en');
@@ -462,79 +465,321 @@ const changeLanguage = (language: string) => {
 </style>
 ```
 
-### 工具栏快捷 button
+### 用户端带昵称和头像登录
+
+如果人工客服在工作台接待用户咨询时，希望能看到用户的昵称、头像等信息以提升沟通效率，效果如下图所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/8d0d240f572311f09fd0525400bf7822.png)
 
-如果您想实现输入框上方增加快捷 button，方便用户使用，比如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
+
+请使用 `initWithProfile` 接口初始化，传入昵称和头像即可。
+``` javascript
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1852010****',
+  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
+})
+```
+
+### 工具栏快捷按钮
+
+如果您想实现输入框上方增加快捷按钮，方便用户使用，例如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
 
 ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png)
 
+
+`toolbarButtonList` 是一个包含了一个或多个配置的数组，配置的描述如下：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >参数</td>
+
+<td rowspan="1" colSpan="1" >类型</td>
+
+<td rowspan="1" colSpan="1" >是否必填</td>
+
+<td rowspan="1" colSpan="1" >说明</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >title</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >button 标题。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >icon</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >button 图标 url。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >isPreset</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >- 1：客服组件内置功能。<br>- 0：非内置功能。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >presetId</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >当 isPreset 为 1 时，可选值如下：<br>- humanService：人工服务。<br>- serviceRating：服务评价。<br>- endHumanService：结束对话。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >isEnabled</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >- 1：渲染。<br>- 0：不渲染。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >content</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >当 isPreset 为 0 时，填入文本内容或者 url。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >type</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >- 1：点击 button 后客服组件发送 content 对应的文本。<br>- 2：点击 button 后客服组件打开 content 对应的 url（小程序打开 url 可能会受限，请提前参考相关文档解决）。</td>
+</tr>
+</table>
+
 ``` javascript
 <template>
-    <CustomerServiceChat style="height: 100%;"
-        :toolbarButtonList="toolbarButtonList"
-    />
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :toolbarButtonList="toolbarButtonList"
+  />
 </template>
 <script setup lang="ts">
-import TUICustomerServer, { CustomerServiceChat }  from '../../ai-desk-customer-uniapp';
-import { ref } from "vue";
-
-const toolbarButtonList = ref([
-  { 
-    title: '人工客服', 
-    renderCondition: () => {
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      TUICustomerServer.sendTextMessage({
-        to: '@customer_service_account',
-        conversationType: 'C2C',
-        payload: {
-          text: '人工客服'
-        }
-      });
-    }
-  },
-  {
-    title: '发送订单',
-    renderCondition: () => {
-      return true;
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from 'vue';
+
+const toolbarButtonList = [
+  {"title":"人工服务","icon":"https://tccc-im-agent-avatar-1258344699.cos.ap-nanjing.myqcloud.com/toolbar_button_1.png","type":1,"content":"","isPreset":1,"presetId":"humanService","isEnabled":1},
+  {"title":"服务评价","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_2.png","type":1,"content":"","isPreset":1,"presetId":"serviceRating","isEnabled":1},
+  {"title":"结束对话","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_3.png","type":1,"content":"","isPreset":1,"presetId":"endHumanService","isEnabled":1},
+  {"type":1,"title":"智能客服","content":"智能客服","isPreset":0,"isEnabled":1}
+];
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
+  const userID = ''; // Your userID，可复用您 app 的账号体系，或随机生成
+  const userSig = ''; // Your userSig，接入阶段可控制台生成，生产阶段请务必由服务端生成
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
+</script>
+<style scoped>
+</style>
+```
+
+### 底部快捷订单
+
+> **说明：**
+>
+
+> 请升级 [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)
+
+
+`bottomQuickOrder` 的参数描述如下：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >参数</td>
+
+<td rowspan="1" colSpan="1" >类型</td>
+
+<td rowspan="1" colSpan="1" >是否必填</td>
+
+<td rowspan="1" colSpan="1" >说明</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >header</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >订单标题，对应上图的“智能客服高级版”。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >desc</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >订单描述，对应上图的“3000/月”。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >pic</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >订单图片 url。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >url</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Yes</td>
+
+<td rowspan="1" colSpan="1" >当客服坐席收到订单消息时，点击可打开此 url 对应的页面。</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >customField</td>
+
+<td rowspan="1" colSpan="1" >Array</td>
+
+<td rowspan="1" colSpan="1" >No</td>
+
+<td rowspan="1" colSpan="1" >自定义配置，例如“订单号”，“订单时间”等信息。</td>
+</tr>
+</table>
+
+``` javascript
+<template>
+  <CustomerServiceChat
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :bottomQuickOrder="bottomQuickOrder"
+  />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from 'vue';
+
+const bottomQuickOrder = {
+  header: "高级版智能客服（包含3个客服许可）",
+  desc: "¥3000/月",
+  pic: "https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
+  url: 'https://cloud.tencent.com/document/product/269/97537',
+  customField: [
+    {
+      name: '订单号',
+      value: '11111111111111111111'
     },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      TUICustomerServer.sendCustomMessage({
-        to: '@customer_service_account',
-        conversationType: 'C2C',
-        payload: {
-          data: JSON.stringify({
-            src: '22',
-            customerServicePlugin: 0,
-            content: {
-              desc: "¥3000/月",
-              header: "高级版智能客服",
-              pic: "https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
-              url: "https://cloud.tencent.com/document/product/269/116070"
-            }
-          }),
-        }
-      });
+    {
+      name: '下单时间',
+      value: '2025-07-02 16:23'
     }
-  }
-]);
+  ]
+};
+
+onMounted(() => {
+  const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
+  const userID = ''; // Your userID，可复用您 app 的账号体系，或随机生成
+  const userSig = ''; // Your userSig，接入阶段可控制台生成，生产阶段请务必由服务端生成
+  TUICustomerServer.init(SDKAppID, userID, userSig);
+});
 </script>
-<style scoped lang="scss">
+<style scoped>
 </style>
 ```
 
+### 多客服号
+
+> **说明：**
+>
+
+> 请升级 [ai-desk-customer-vue](https://www.npmjs.com/package/@tencentcloud/ai-desk-customer-vue) 到 v1.5.3 或更高版本。
+>
+
+
+如果您的应用内需要多个客服号，为用户提供专属客服功能，以提高服务质量和响应速度，可用 UIKit 提供的多客服号功能实现。效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/d26c67b65ca811f09fd0525400bf7822.png)
+
+``` javascript
+// 1. 初始化前将业务侧自定义的客服号 ID 传递给 UIKit
+// 自定义客服号请使用 restapi - https://cloud.tencent.com/document/product/269/111798
+TUICustomerServer.setCustomerServiceIDList(['customerServiceID_001', 'customerServiceID_002', 'customerServiceID_003']);
+// 2. 初始化时，带上要发起会话的客服号 ID，比如 'customerServiceID_002'
+// 如果不带上要发起会话的客服号 ID，则 UIKit 默认使用多客服号列表的第 1 个元素
+TUICustomerServer.initWithProfile({
+  SDKAppID,
+  userID,
+  userSig,
+  nickName: '张三 1562010****',
+  avatar: 'your avatar url',
+  customerServiceID: 'customerServiceID_002',
+});
+```
+
+### 用户端主动结束人工会话
+
+> **说明：**
+>
+
+> 用户端可以通过发送自定义消息的方式实现主动结束会话，适用于以下 3 种情况：
+>
+> 1. 用户转人工触发排队，发送此消息可以结束排队。
+> 2. 客服接待方式为手动接待，用户转人工分配客服成功后等待客服确认接待，发送此消息可以结束等待。
+> 3. 用户转人工且成功接入人工客服，发送此消息可以结束本次会话。
+
+``` javascript
+TUICustomerServer.sendCustomMessage({
+  to: '@customer_service_account',
+  conversationType: 'C2C',
+  payload: {
+    data: JSON.stringify({
+      src: '27',
+      customerServicePlugin: 0,
+    }),
+  },
+}, { onlineUserOnly: true });
+```
+
 ## 常见问题
 
 ##### 什么是 UserSig？如何生成 UserSig？
 
 UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
 
-UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
+UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#formal)。
 
-##### js 工程如何接入 TUIKit 组件?
+##### JS 工程如何接入 TUIKit 组件?
 
 UIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 UIKit 中 ts 代码共存。
 
@@ -551,7 +796,7 @@ vue add typescript
 
 **完成以上步骤后，请重新运行项目！**
 
-【vite】
+【Vite】
 
 请在您 vite 创建的工程根目录执行：
 ``` bash

package/assets/language_arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.999 7.26559L8.88284 4.16016L9.6156 4.84063L5.99895 8.7352L2.38281 4.84061L3.11563 4.16018L5.999 7.26559Z" fill="#727A8A" stroke="#727A8A" stroke-width="0.5"/>
+</svg>

package/assets/language_check.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.96 6.81396L8.76147 14.2847L4.05078 9.57397L4.62573 9.00024L5.20068 8.42529L8.7395 11.9641L14.7905 5.68604L15.96 6.81396Z" fill="#4086FF"/>
+</svg>