@tencentcloud/ai-desk-customer-vue 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.0.1] (2025-4-16)
+
+### Features
+- 简化接入。
+- TUICustomerServer 新增 sendTextMessage/sendCustomMessage/changeLanguage 等接口。
+
 ## [1.0.0] (2025-4-10)
 
 ### Features

package/README.md

@@ -177,37 +177,11 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
 <template>
   <CustomerServiceChat
       :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
-      :toolbarButtonList="toolbarButtonList"
   />
 </template>
 <script setup lang="ts">
-import TUICustomerServer from './ai-desk-customer-vue/server';
-import { CustomerServiceChat } from './ai-desk-customer-vue';
-import { onMounted, ref } from "vue";
-import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
-
-// 配置工具栏 button list，例如【转人工】
-const toolbarButtonList = ref([
-  {
-    title: '转人工',
-    renderCondition: () => {
-      // return true 即渲染，您可以在这里控制 button 显隐时机
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      if (TUIChatEngine.isReady()) {
-        TUIChatService.sendTextMessage({
-          to: '@customer_service_account',
-          conversationType: TUIChatEngine.TYPES.CONV_C2C,
-          payload: {
-            text: '转人工'
-          }
-        });
-      }
-    }
-  }
-]);
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
+import { onMounted } from "vue";
 
 onMounted(() => {
   const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
@@ -226,40 +200,14 @@ onMounted(() => {
   <div id="app">
     <CustomerServiceChat
         :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
-        :toolbarButtonList="toolbarButtonList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import TUICustomerServer from './ai-desk-customer-vue/server';
-import { CustomerServiceChat } from './ai-desk-customer-vue';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
 import vue from './ai-desk-customer-vue/adapter-vue';
-import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
-
-const { ref, onMounted } = vue;
 
-// 配置工具栏 button list，例如【转人工】
-const toolbarButtonList = ref([
-  {
-    title: '转人工',
-    renderCondition: () => {
-      // return true 即渲染，您可以在这里控制 button 显隐时机
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      if (TUIChatEngine.isReady()) {
-        TUIChatService.sendTextMessage({
-          to: '@customer_service_account',
-          conversationType: TUIChatEngine.TYPES.CONV_C2C,
-          payload: {
-            text: '转人工'
-          }
-        });
-      }
-    }
-  }
-]);
+const { onMounted } = vue;
 
 onMounted(() => {
   const SDKAppID = 0; // Your SDKAppID
@@ -278,40 +226,14 @@ onMounted(() => {
   <div id="app">
     <CustomerServiceChat
         :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
-        :toolbarButtonList="toolbarButtonList"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import TUICustomerServer from './ai-desk-customer-vue/server';
-import { CustomerServiceChat } from './ai-desk-customer-vue';
+import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
 import vue from './ai-desk-customer-vue/adapter-vue';
-import TUIChatEngine, { TUIChatService } from "@tencentcloud/chat-uikit-engine";
 
-const { ref, onMounted } = vue;
-
-// 配置工具栏 button list，例如【转人工】
-const toolbarButtonList = ref([
-  {
-    title: '转人工',
-    renderCondition: () => {
-      // return true 即渲染，您可以在这里控制 button 显隐时机
-      return true;
-    },
-    clickEvent: () => {
-      // 点击 button 后的回调
-      if (TUIChatEngine.isReady()) {
-        TUIChatService.sendTextMessage({
-          to: '@customer_service_account',
-          conversationType: TUIChatEngine.TYPES.CONV_C2C,
-          payload: {
-            text: '转人工'
-          }
-        });
-      }
-    }
-  }
-]);
+const { onMounted } = vue;
 
 onMounted(() => {
   const SDKAppID = 0; // Your SDKAppID
@@ -433,6 +355,177 @@ npm run serve
 npm run dev
 ```
 
+## 高级特性
+
+### 国际化界面语言
+
+从 v1.0.0 起，UIKit 支持以下界面语言：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >语言代码（userLang）</td>
+
+<td rowspan="1" colSpan="1" >语言</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_cn</td>
+
+<td rowspan="1" colSpan="1" >简体中文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >en</td>
+
+<td rowspan="1" colSpan="1" >英文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >zh_tw</td>
+
+<td rowspan="1" colSpan="1" >繁体中文</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ja</td>
+
+<td rowspan="1" colSpan="1" >日语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >id</td>
+
+<td rowspan="1" colSpan="1" >印尼语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ms</td>
+
+<td rowspan="1" colSpan="1" >马来语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >vi</td>
+
+<td rowspan="1" colSpan="1" >越南语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >th</td>
+
+<td rowspan="1" colSpan="1" >泰语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >fil</td>
+
+<td rowspan="1" colSpan="1" >菲律宾语</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >ru</td>
+
+<td rowspan="1" colSpan="1" >俄语</td>
+</tr>
+</table>
+
+
+如果您的业务需要出海，且用户语言以英语为主，可在引入智能客服时设置`userLang="en"`。如果您不指定`userLang`, UIKit 会使用浏览器设置的语言。
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        userLang="en"
+    />
+</template>
+```
+
+如果您需要支持动态切换用户语言，可使用`TUICustomerServer.changeLanguage`接口，并通过切换 页面/组件 key 的方式，实现语言动态修改与展示。
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        :key="locale"
+        :userLang="locale"
+    />
+</template>
+<script setup lang="ts">
+import TUICustomerServer, { CustomerServiceChat }  from '../../ai-desk-customer-uniapp';
+import { onMounted, ref } from "vue";
+
+const locale = ref('en');
+
+const changeLanguage = (language: string) => {
+  TUICustomerServer.changeLanguage(language).then(() => {
+    locale.value = language;
+  });
+}
+</script>
+<style scoped lang="scss">
+</style>
+```
+
+### 工具栏快捷 button
+
+如果您想实现输入框上方增加快捷 button，方便用户使用，比如增加“人工客服”，“发送订单消息”等，可在引入智能客服时设置 `toolbarButtonList`。效果如下所示：
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/b727aeef19cd11f0abe05254005ef0f7.png)
+
+``` javascript
+<template>
+    <CustomerServiceChat style="height: 100%;"
+        :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;
+    },
+    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"
+            }
+          }),
+        }
+      });
+    }
+  }
+]);
+</script>
+<style scoped lang="scss">
+</style>
+```
+
 ## 常见问题
 
 ##### 什么是 UserSig？如何生成 UserSig？

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/styles/common.scss

@@ -118,7 +118,7 @@
 .message-marked {
   overflow: hidden;
   word-break: break-word;
-  white-space: pre-wrap;
+  white-space: normal;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

package/components/CustomerServiceChat/message-toolbar-button/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="toolbar-button-container">
         <template v-for="(item, index) in props.toolbarButtonList">
-            <div v-if="item.renderCondition()" :key="index"
+            <div v-if="shouldRender(item)" :key="index"
                 :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(index)">
                 <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
                 <div class="toolbar-button-text">
@@ -26,7 +26,13 @@ const props = withDefaults(defineProps<IProps>(), {
 });
 
 function onClick(index: number) {
-    props.toolbarButtonList[index].clickEvent();
+    if (typeof props.toolbarButtonList[index].clickEvent === 'function') {
+        props.toolbarButtonList[index].clickEvent();
+    }
+}
+
+function shouldRender(item: ToolbarButtonModel) {
+    return typeof item.renderCondition === 'function' ? item.renderCondition() : false;
 }
 
 </script>

package/index.ts

@@ -13,4 +13,6 @@ export {
   isMessageInvisible,
   CustomerServiceChat,
   isCustomerConversation
-};
+};
+
+export default TUICustomerServer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Vue UIKit for AI Desk",
   "main": "index",
   "keywords": [

package/server.ts

@@ -9,22 +9,25 @@ import TUIChatEngine, {
   TUIChatService,
   TUIConversationService,
   IMessageModel,
-  TUITranslateService
+  TUITranslateService,
+  SendMessageParams,
+  SendMessageOptions,
 } from '@tencentcloud/chat-uikit-engine';
 import Log from './utils/logger';
 import { version } from './package.json'
 import { Toast, TOAST_TYPE } from "./components/common/Toast/index-web";
 
 export default class TUICustomerServer {
-  static isInitialized: boolean;
+  private isLoggedIn: boolean;
   static instance: TUICustomerServer;
   private customerServiceAccounts: any[];
-  static loggedInUserID: string;
+  private loggedInUserID: string;
   constructor() {
     TUICore.registerService(TUIConstants.TUICustomerServicePlugin.SERVICE.NAME, this);
     TUICore.registerExtension(TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID, this);
     this.customerServiceAccounts = ['@customer_service_account'];
-    Log.i('TUICustomerServer.init ok');
+    this.isLoggedIn = false;
+    this.loggedInUserID = '';
   }
 
   static getInstance(): TUICustomerServer {
@@ -34,7 +37,7 @@ export default class TUICustomerServer {
     return TUICustomerServer.instance;
   }
 
-  static loginCustomerUIKit(SDKAppID:number, userID:string, userSig:string) {
+  private loginCustomerUIKit(SDKAppID:number, userID:string, userSig:string) {
     clearChatStorage(SDKAppID, userID);
     TUIChatEngine.login({
       SDKAppID,
@@ -43,41 +46,63 @@ export default class TUICustomerServer {
       useUploadPlugin: true,
     }).then(() => {
       Log.i(`login success. userID:${userID}`);
-      TUICustomerServer.loggedInUserID = userID;
+      this.isLoggedIn = true;
+      this.loggedInUserID = userID;
       TUIConversationService.switchConversation('C2C@customer_service_account');
       TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
     })
-    .catch((error) => {
-      Toast({
-        message: TUITranslateService.t('TUIChat.登录失败'),
-        type: TOAST_TYPE.ERROR,
-        duration: 30000,
-      });
-      Log.l(error);
-    })
+      .catch((error) => {
+        Toast({
+          message: TUITranslateService.t('TUIChat.登录失败'),
+          type: TOAST_TYPE.ERROR,
+          duration: 30000,
+        });
+        Log.l(error);
+      })
   }
 
-  public static init(SDKAppID:number, userID:string, userSig:string) {
-    Log.l(`TUICustomerServer.init version:${version} SDKAppID:${SDKAppID} userID:${userID} isInitialized:${TUICustomerServer.isInitialized} loggedInUserID:${TUICustomerServer.loggedInUserID}`);
+  /**
+   * init
+   */
+  public init(SDKAppID:number, userID:string, userSig:string) {
+    Log.l(`TUICustomerServer.init version:${version} SDKAppID:${SDKAppID} userID:${userID} isLoggedIn:${this.isLoggedIn} loggedInUserID:${this.loggedInUserID}`);
     // Backward compatibility, the new version executes the init operation by default in index.ts
-    if (TUICustomerServer.isInitialized) {
-      if (TUICustomerServer.loggedInUserID === userID) {
+    if (this.isLoggedIn) {
+      if (this.loggedInUserID === userID) {
         return;
       }
-      TUICustomerServer.unInit().finally(() => {
+      this.unInit().finally(() => {
+        this.isLoggedIn = false;
         this.loginCustomerUIKit(SDKAppID, userID, userSig);
       });
     } else {
-      TUICustomerServer.isInitialized = true;
       // Execute call server when native plugin TUICallKit exists
       this.loginCustomerUIKit(SDKAppID, userID, userSig);
     }
   }
 
-  public static async unInit() {
+  public unInit() {
     return TUIChatEngine.logout();
   }
 
+  public sendTextMessage(options: SendMessageParams, sendMessageOptions?: SendMessageOptions) {
+    return TUIChatService.sendTextMessage(options, sendMessageOptions);
+  }
+
+  public sendCustomMessage(options: SendMessageParams, sendMessageOptions?: SendMessageOptions) {
+    return TUIChatService.sendCustomMessage(options, sendMessageOptions);
+  };
+
+  public changeLanguage(language: string) {
+    return TUITranslateService.changeLanguage(language).then(() => {
+      Log.i(`language changed to ${language}`);
+    });
+  }
+
+  public getLoggedInUserID() {
+    return this.loggedInUserID;
+  }
+
   // Determine if the current session is a customer service session
   public isCustomerConversation(conversationID: string) {
     const userID = (conversationID && conversationID.slice(3)) || '';
@@ -125,7 +150,7 @@ export default class TUICustomerServer {
               triggeredContent: typeof params.robotLang === 'undefined' ? undefined : { language: params.robotLang }
             }),
           },
-        }, { onlineUserOnly: true});
+        }, { onlineUserOnly: true });
       }
     }
   }