@tencentcloud/ai-desk-customer-vue 0.2.0 → 0.3.0

package/README.md

@@ -1,9 +1,6 @@
 ## 介绍
 
-智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品降本增效。其流程如下图所示：
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027960326/7de563a1f4cf11efa8355254001c06ec.png)
-
+智能客服用户端 Web UIKit。使用此 UIKit，您可以在一天内将智能客服的能力集成到您的 Web 或 Hybrid 项目。极简接入，用 AI 为您的产品增收提效。
 
 ## 效果展示
 
@@ -107,13 +104,25 @@ npm install
 npm i -D sass sass-loader
 ```
 
-> **说明：**
-> 
+清除项目默认的样式，避免样式问题：
 
-> 请删除 **src/style.css** 内的项目默认样式，避免样式问题。
-> 
 
 
+【macOS 端】
+``` bash
+echo -n > src/style.css
+```
+
+【Windows 端（PowerShell）​】
+``` bash
+Clear-Content -Path src/style.css
+```
+
+【Windows 端（CMD）】
+``` bash
+echo. > src\style.css
+```
+
 ### 步骤2：下载 UI 组件
 
 通过 npm 方式下载 UI 组件，并将 UI 组件复制到自己工程的 src 目录下：
@@ -170,7 +179,7 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
     :SDKAppID=""
     userID=""
     userSig=""
-    :style="{ width: '600px', height: '970px', 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">
@@ -188,7 +197,7 @@ xcopy .\node_modules\@tencentcloud\ai-desk-customer-vue .\src\ai-desk-customer-v
     :SDKAppID=""
     userID=""
     userSig=""
-    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -210,7 +219,7 @@ body {
     :SDKAppID=""
     userID=""
     userSig=""
-    :style="{ width: '600px', height: '970px', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
+    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
     />
   </div>
 </template>
@@ -223,18 +232,13 @@ body {
 }
 </style>
 ```
-1. 安装支持 composition-api 以及 script setup 的相关依赖，以及 vue2.6 相关依赖。
-
-``` javascript
-npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
-```
-2. 在 `main.ts/mian.js `中引入 VueCompositionAPI。
+1. 在 `main.ts/mian.js `中引入 VueCompositionAPI。
 
 ``` javascript
 import VueCompositionAPI from "@vue/composition-api";
 Vue.use(VueCompositionAPI);
 ```
-3. 在 `vue.config.js `中增加，若没有该文件请新建。
+2. 在 `vue.config.js `中增加，若没有该文件请新建。
 
 ``` javascript
 const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;
@@ -253,7 +257,7 @@ module.exports = {
   },
 };
 ```
-4. 在 `src/ai-desk-customer-vue/adapter-vue.ts` 文件最后, 替换导出源：
+3. 在 `src/ai-desk-customer-vue/adapter-vue-web.ts` 文件最后, 替换导出源：
 
 ``` javascript
 // 初始写法
@@ -317,12 +321,6 @@ export * from "@vue/composition-api";
 > 在 tsconfig.json 中关闭 ai-desk-customer-vue  的ts检测。
 > 
 > `{`
-> `    "compilerOptions": {`
-> `      ...`
-> `      "preserveValueImports": false,`
-> `      "importsNotUsedAsValues": "preserve",`
-> `      "noImplicitAny": false,`
-> `    },`
 > `    "exclude": [`
 > `      "node_modules",`
 > `      "src/ai-desk-customer-vue",`

package/components/CustomerServiceChat/index-web.vue

@@ -88,7 +88,8 @@ import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isPC, isH5} from '../../utils/env';
 import { ToolbarDisplayType } from '../../interface';
-
+import { isSupportedLang } from '../../utils/';
+import Log from '../../utils/logger';
 
 const { ref, onMounted, onUnmounted, computed } = vue;
 
@@ -97,6 +98,7 @@ interface IProps {
   SDKAppID?:number;
   userID?:string;
   userSig?:string;
+  robotLang?:string;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -112,6 +114,7 @@ const props = withDefaults(defineProps<IProps>(), {
   SDKAppID: 0,
   userID: '',
   userSig: '',
+  robotLang: '',
 });
 
 const loginCustomerUIKit = () => {
@@ -121,7 +124,7 @@ const loginCustomerUIKit = () => {
     userSig: props.userSig,
     useUploadPlugin: true,
   }).then(() => {
-    console.log("ai-desk-customer login success");
+    Log.i(`login success, robotLang:${props.robotLang}`);
     let conversationID = 'C2C@customer_service_account';
     TUIConversationService.switchConversation(conversationID);
     TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
@@ -134,6 +137,9 @@ try {
   const userContext = TUILogin.getContext();
   if(userContext.userID == '' && props.SDKAppID!==0 && props.userID!=='' && props.userSig!==''){
     loginCustomerUIKit();
+    if (props.robotLang && !isSupportedLang(props.robotLang)) {
+      Log.w(`robotLang:${props.robotLang} is not supported`);
+    }
   }
 } catch (e) {
   console.log(e)
@@ -200,6 +206,10 @@ function scrollToLatestMessage() {
 }
 
 function onCurrentConversationIDUpdate(conversationID: string) {
+  if (!conversationID) {
+    return;
+  }
+
   if (currentConversationID.value === conversationID) {
     return;
   }
@@ -210,7 +220,10 @@ function onCurrentConversationIDUpdate(conversationID: string) {
   TUICore.callService({
     serviceName: TUIConstants.TUICustomerServicePlugin.SERVICE.NAME,
     method: TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION,
-    params: { conversationID: conversationID },
+    params: {
+      conversationID: conversationID,
+      robotLang: props.robotLang && isSupportedLang(props.robotLang) ? props.robotLang : undefined,
+    },
   });
 }
 

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-stream.vue

@@ -13,7 +13,7 @@ import vue from '../../../../../../adapter-vue';
 import { customerServicePayloadType } from '../../../../../../interface';
 import { parseMarkdown } from './marked'
 
-const { ref, watchEffect, onBeforeUnmount, onMounted } = vue;
+const { ref, watchEffect, onMounted } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -27,14 +27,12 @@ export default {
     },
   },
   setup(props: Props) {
-    const content = ref<string>('');
     const displayedContent = ref<string>('');
     const isFinished = ref<boolean>(false);
     let currentIndex = 0;
 
     onMounted(() => {
-      content.value = props?.payload?.chunks?.join('') ?? '';
-      displayedContent.value = parseMarkdown(content.value);
+      displayedContent.value = parseMarkdown(props?.payload?.chunks?.join('') ?? '');
       currentIndex = displayedContent.value.length;
     });
 
@@ -43,6 +41,7 @@ export default {
       const parsedContent = parseMarkdown(newContent);
       if (parsedContent.length > currentIndex) {
         displayedContent.value = parsedContent;
+        currentIndex = parsedContent.length;
       }
     });
 
@@ -51,7 +50,6 @@ export default {
     });
 
     return {
-      content,
       props,
       isFinished,
       displayedContent,
@@ -69,21 +67,15 @@ export default {
   .blinking-cursor {
     display: inline-block;
     width: 1px;
-    height: 16px;
+    height: 1em;
     background-color: black;
     animation: blink 1s step-end infinite;
     vertical-align: sub;
   }
 
   @keyframes blink {
-    0%,
-    100% {
-      background-color: transparent;
-    }
-
-    50% {
-      background-color: black;
-    }
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
   }
 }
 </style>

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

@@ -124,6 +124,7 @@
   justify-content: flex-start;
   margin: 0;
   padding: 0;
+  font-family: PingFangSC-Regular;
 
   .message-marked_code-container {
     display: flex;
@@ -176,3 +177,7 @@
     cursor: pointer;
   }
 }
+
+.message-marked >*:last-child {
+  margin-bottom: 0;
+}

package/components/CustomerServiceChat/message-list/message-elements/message-file.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="['file-message-montainer',messageItem.flow === 'in'?'file-in' :'']"
+    :class="['file-message-container']"
     :title="TUITranslateService.t('TUIChat.单击下载')"
     @click="download"
   >
@@ -23,7 +23,7 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import files from '../../../../assets/files.png';
-import { isUniFrameWork,isWeChat } from '../../../../utils/env';
+import { isUniFrameWork } from '../../../../utils/env';
 import type { IFileMessageContent } from '../../../../interface';
 const { withDefaults } = vue;
 
@@ -39,10 +39,10 @@ const props = withDefaults(
 );
 
 const download = () => {
-  if (props.messageItem.hasRiskContent || props.messageItem.flow === 'out') {
+  if (props.messageItem.hasRiskContent) {
     return;
   }
-  
+
   // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
   if (!isUniFrameWork && (window as any)?.fetch) {
     const option = {
@@ -60,89 +60,15 @@ const download = () => {
         a.download = props.content.name;
         a.click();
       });
-  } else if(isWeChat){
-    console.log("isWechat",props.content.url)
-    
-    wx.downloadFile({
-      url: props.content.url,
-      filePath: wx.env.USER_DATA_PATH + '/' + props.content.name,
-      success: function (res) {
-        var filePath = res.filePath;
-        const lastIndex = filePath.lastIndexOf('.');
-        const fileType = filePath.substring(lastIndex + 1);
-        console.log(fileType)
-        wx.openDocument({
-          filePath: filePath,
-          showMenu:true,
-          fileType:fileType,
-          success: function (res) {
-            console.log('打开文档成功');
-          },
-          fail:function(){
-            console.log("fail")
-          }
-        });
-      }
-    });
-  }else if(isUniFrameWork){
-    const lastIndex = props.content.url.lastIndexOf('.');
-    const fileType = props.content.url.substring(lastIndex + 1);
-    uni.downloadFile({
-      url:props.content.url,
-      success:function(res){
-        if(res.statusCode == 200){
-          console.log(res)
-          const tempFilePaths = res.tempFilePath;
-          uni.showToast({
-            title: '下载成功'+tempFilePaths,
-            icon: 'success',
-            duration: 2000
-          });
-          console.log(tempFilePaths);
-          uni.openDocument({
-            filePath: tempFilePaths,
-            fileType: fileType,
-            success: function () {
-                console.log('打开文档成功');
-            },
-            fail: function () {
-                console.log('打开文档失败');
-            }
-          });
-        }
-      }
-    });
-    // uni.openDocument({
-    //     filePath: tempFilePaths[0],
-    //     fileType: 'pdf',
-    //     success: function () {
-    //         console.log('打开文档成功');
-    //     },
-    //     fail: function () {
-    //         console.log('打开文档失败');
-    //     }
-    // });
-  } 
-  
-  else {
-    console.log("no window here")
-    const a = document.createElement('a');
-    a.href = props.content.url;
-    a.target = '_blank';
-    a.download = props.content.name;
-    a.click();
   }
 };
 </script>
 <style lang="scss" scoped>
 @import "../../style/common";
-.file-in{
-  cursor: pointer;
-}
-.file-message-montainer {
+.file-message-container {
   display: flex;
   flex-direction: row;
-  
+  cursor: pointer;
 
   .file-icon {
     margin: auto 8px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "0.2.0",
-  "description": "chat uikit ai-desk-customer",
+  "version": "0.3.0",
+  "description": "chat uikit ai-desk-customer web-mui-uikit",
   "main": "index",
   "keywords": [
     "customer service",
@@ -9,10 +9,9 @@
     "chatbot",
     "vue",
     "tencentcloud",
-    "客服",
     "智能客服",
-    "人工客服",
-    "智能机器人"
+    "智能机器人",
+    "deepseek"
   ],
   "scripts": {
     "sync": "node ./script/fileCopy.js",

package/server.ts

@@ -1,19 +1,20 @@
-import TUICore, { TUIConstants, TUILogin } from '@tencentcloud/tui-core';
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import {
   isCustomerServiceMessage,
   isMessageInvisible,
 } from './utils/index';
 import TUIChatEngine, { TUIChatService, TUIConversationService,IMessageModel  } from '@tencentcloud/chat-uikit-engine';
+import Log from './utils/logger';
 
 export default class TUICustomerServer {
   static isInitialized: boolean;
   static instance: TUICustomerServer;
   private customerServiceAccounts: any[];
   constructor() {
-    console.log('TUICustomerServer.init ok');
     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');
   }
 
   static getInstance(): TUICustomerServer {
@@ -30,12 +31,12 @@ export default class TUICustomerServer {
       userSig,
       useUploadPlugin: true,
     }).then(() => {
-      console.log("login success");
+      Log.i("login success");
       TUIConversationService.switchConversation('C2C@customer_service_account');
       TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
     })
     .catch((error) => {
-      console.log(error);
+      Log.l(error);
     })
   }
 
@@ -73,7 +74,7 @@ export default class TUICustomerServer {
         {
           weight: 0,
           icon: '',
-          text: '客服号',
+          text: '智能客服',
           data: {
             name: 'customer',
             accountList: this.customerServiceAccounts,
@@ -84,16 +85,21 @@ export default class TUICustomerServer {
   }
 
   public onCall(method: string, params: any) {
+    Log.l(`TUICustomerServer.onCall method:${method} params:`, params);
     if (method === TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION) {
       if (this.isCustomerConversation(params.conversationID)) {
         TUIChatService.sendCustomMessage({
           to: params.conversationID.slice(3),
           conversationType: TUIChatEngine.TYPES.CONV_C2C,
           payload: {
-            data: JSON.stringify({src: '7', customerServicePlugin: 0}),
+            data: JSON.stringify({
+              src: '7',
+              customerServicePlugin: 0,
+              triggeredContent: typeof params.robotLang === 'undefined' ? undefined : { language: params.robotLang }
+            }),
           },
         }, { onlineUserOnly: true});
       }
     }
   }
-}
+}

package/utils/console.js

@@ -0,0 +1,28 @@
+let _console; let method;
+if (typeof console !== 'undefined') {
+  _console = console;
+} else if (typeof global !== 'undefined' && global.console) {
+  _console = global.console;
+} else if (typeof window !== 'undefined' && window.console) {
+  _console = window.console;
+} else {
+  _console = {};
+}
+
+const noop = function() {};
+const methods = [
+  'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'group',
+  'groupCollapsed', 'groupEnd', 'info', 'log', 'profile', 'profileEnd',
+  'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn',
+];
+let length = methods.length;
+
+while (length--) {
+  method = methods[length];
+
+  if (!console[method]) {
+    _console[method] = noop;
+  }
+}
+
+export default _console;

package/utils/index.ts

@@ -58,3 +58,15 @@ export const isMessageInvisible = (message: IMessageModel): boolean => {
   const isRobot = customerServicePayload?.src === CUSTOM_MESSAGE_SRC.ROBOT && robotCommandArray.indexOf(customerServicePayload?.content?.command) !== -1;
   return isCustomerMessage && (isCustomerInvisible || isRobot || isMultiFormMessage);
 };
+
+export const isSupportedLang = (lang: string): boolean => {
+  return [
+    'zh', // Simplified Chinese中文简体：zh
+    'zh-TW', // Traditional Chinese中文繁体：zh-TW
+    'en', // English英语：en
+    'id', // Indonesian印度尼西亚语：id
+    'vi', // Vietnamese越南语：vi
+    'ja', // Japanese日语：ja
+    'fil' // Filipino菲律宾语：fil
+  ].indexOf(lang) !== -1;
+}

package/utils/logger.js

@@ -0,0 +1,178 @@
+import console from './console';
+import { getDate } from './time';
+
+const USER_AGENT = window && window.navigator && window.navigator.userAgent || '';
+const IS_IE = /MSIE/.test(USER_AGENT) || (USER_AGENT.indexOf('Trident') > -1 && USER_AGENT.indexOf('rv:11.0') > -1);
+
+const canIUseConsoleStyle = function() {
+  // ie 浏览器不支持 console css style
+  // 小程序仅部分支持 console css style (console.warn/console.error 不支持)
+  return !IS_IE;
+}
+
+const getType = function(input) {
+  return Object.prototype.toString
+    .call(input)
+    .match(/^\[object (.*)\]$/)[1]
+    .toLowerCase();
+};
+
+const isArray = function(input) {
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(input);
+  }
+  return getType(input) === 'array';
+};
+
+const isObject = function(input) {
+  // null is object, hence the extra check
+  return input !== null && typeof input === 'object';
+};
+
+/**
+ * 检测input是否为Error的实例
+ * @param {*} input 任意类型的输入
+ * @returns {Boolean} true->input is an instance of Error
+ */
+const isInstanceOfError = function(input) {
+  return (input instanceof Error);
+};
+
+/**
+ * 检测input类型是否为数组或者object
+ * @param {*} input 任意类型的输入
+ * @returns {Boolean} true->input is an array or an object
+ */
+const isArrayOrObject = function(input) {
+  return isArray(input) || isObject(input);
+};
+
+/**
+ * 对齐毫秒字符串
+ * @param {*} ms 毫秒
+ * @returns {String} 对齐后的毫秒时间字符串
+ */
+function padMs(ms) {
+  const len = ms.toString().length;
+  let ret;
+  switch (len) {
+    case 1:
+      ret = '00' + ms;
+      break;
+    case 2:
+      ret = '0' + ms;
+      break;
+    default:
+      ret = ms;
+      break;
+  }
+
+  return ret;
+}
+
+/**
+ * log前缀
+ * @returns {String} 日志前缀
+ */
+function getPrefix() {
+  if (!canIUseConsoleStyle()) {
+    return 'ai-desk-customer';
+  }
+  return '%c ai-desk-customer %c';
+}
+
+function getPrefixStyle() {
+  return 'background:#0052d9; padding:1px; border-radius:3px; color: #fff';
+}
+
+function getBgStyle() {
+  return 'background:transparent';
+}
+
+function getTime() {
+  const date = getDate();
+  return date.toLocaleTimeString('en-US', { hour12: false }) + '.' + padMs(date.getMilliseconds());
+}
+
+const Log = {
+  // 将函数参数拼成字符串
+  arguments2String(args) {
+    let s = '';
+    if (args.length === 1) {
+      s = args[0];
+    } else {
+      for (let i = 0, length = args.length; i < length; i++) {
+        if (isArrayOrObject(args[i])) {
+          try {
+            s += isInstanceOfError(args[i]) ? JSON.stringify(args[i], ['message', 'code']) : JSON.stringify(args[i]);
+          } catch (error) {
+            s += error ? error.message : '';
+            break;
+          }
+        } else {
+          s += args[i];
+        }
+        s += ' ';
+      }
+    }
+    return s;
+  },
+
+  _exec(api, log) {
+    if (!canIUseConsoleStyle()) {
+      console[api](`${getPrefix()} ${getTime()} ${log}`);
+    } else {
+      console[api](getPrefix(), getPrefixStyle(), getBgStyle(), getTime(), log);
+    }
+  },
+
+  /**
+   * 打印调试日志
+   */
+  d: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('debug', s);
+  },
+
+  /**
+   * 打印普通日志
+   */
+  l: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('log', s);
+  },
+
+  /**
+   * 打印普通日志，等同于 Log.i，为了兼容低版本的本地审核插件（其内部调用了 Logger.log）
+   */
+  log: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('log', s);
+  },
+
+  /**
+   * 打印release日志
+   */
+  i: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('info', s);
+  },
+
+  /**
+   * 打印告警日志
+   */
+  w: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('warn', s);
+  },
+
+  /**
+   * 打印错误日志
+   */
+  e: function() {
+    const s = this.arguments2String(arguments);
+    this._exec('error', s);
+  },
+};
+
+export default Log;

package/utils/time.js

@@ -0,0 +1,15 @@
+// user system clock may be inaccurate, so we need to adjust the timestamp
+// based on the baseTime received from login server
+
+let _offset = 0;
+
+export const getTimestamp = function() {
+  return new Date().getTime() + _offset;
+};
+
+export const getDate = function() {
+  const now = new Date();
+  now.setTime(getTimestamp());
+  return now;
+};
+