@tencentcloud/ai-desk-customer-vue 1.5.3 → 1.5.5

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-transfer-with-desc.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="['text', isPC && 'text-select']">
+    {{ description }}
+  </div>
+</template>
+
+<script lang="ts">
+import { customerServicePayloadType } from '../../../../../../interface';
+import { isPC } from '../../../../../../utils/env';
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  setup(props: Props) {
+    return {
+      description: props.payload.description,
+      isPC,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.text-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.text {
+  white-space: pre-wrap;
+  font-size: 14px;
+  text-size-adjust: none;
+  font-family: PingFangSC-Regular;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+</style>

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

@@ -3,7 +3,7 @@
     <template v-for="(item, index) in props.toolbarButtonList">
       <ToolbarButtonHumanService v-if="item.presetId === TOOLBAR_BUTTON_TYPE.HUMAN_SERVICE && shouldRender(item) && !isInHumanService" :title="item.title" :icon="item.icon"/>
       <ToolbarButtonServiceRating v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.SERVICE_RATING && shouldRender(item) && isInHumanService" :title="item.title" :icon="item.icon"/>
-      <ToolbarButtonEndHumanService v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && isInHumanService" :title="item.title" :icon="item.icon"/>
+      <ToolbarButtonEndHumanService v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && ((item.displayFlag === 1 && isInSession) || isInHumanService)" :title="item.title" :icon="item.icon"/>
       <div v-else-if="shouldRender(item) && !item.presetId" :key="index"
         :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(item, index)">
         <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
@@ -27,7 +27,7 @@ import { isH5 } from '../../../utils/env';
 import { ToolbarButtonModel } from '../../../interface';
 import Icon from '../../common/Icon.vue';
 import { TOOLBAR_BUTTON_TYPE } from '../../../constant';
-import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo } from '../../../utils/utils';
+import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo, isNonEmptyObject, transferToTaskFlow, transferToHuman } from '../../../utils/utils';
 import ToolbarButtonHumanService from './toolbar-button-human-service.vue';
 import ToolbarButtonServiceRating from './toolbar-button-service-rating.vue';
 import ToolbarButtonEndHumanService from './toolbar-button-end-human-service.vue';
@@ -39,6 +39,7 @@ const props = withDefaults(defineProps<IProps>(), {});
 
 const isInHumanService = ref(false);
 const currentConversation = ref<IConversationModel>();
+const isInSession = ref(true);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
@@ -46,6 +47,7 @@ onMounted(() => {
   });
   TUIStore.watch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
+    isInSession: onInSessionUpdate
   });
 });
 
@@ -55,6 +57,7 @@ onUnmounted(() => {
   });
   TUIStore.unwatch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
+    isInSession: onInSessionUpdate
   });
 });
 
@@ -66,6 +69,10 @@ const onInHumanServiceUpdate = (value: boolean) => {
   isInHumanService.value = value;
 };
 
+const onInSessionUpdate = (value: boolean) => {
+  isInSession.value = value;
+}
+
 function onClick(item:ToolbarButtonModel, index: number) {
   if (item.type === 1 && item.content) {
     TUIChatService.sendTextMessage({
@@ -78,6 +85,10 @@ function onClick(item:ToolbarButtonModel, index: number) {
     });
   } else if (item.type === 2  && item.content) {
     openSafeUrl(item.content);
+  } else if (item.type === 3 && isNonEmptyObject(item.content)) {
+    transferToTaskFlow(getTo(currentConversation.value), item.content.taskFlowID, item.content.description);
+  } else if (item.type === 4 && isNonEmptyObject(item.content)) {
+    transferToHuman(getTo(currentConversation.value), item.content.groupID, item.content.specificMemberList, item.content.description);
   } else if (props.toolbarButtonList !== undefined && typeof props.toolbarButtonList[index].clickEvent === 'function') {
     props.toolbarButtonList[index].clickEvent();
   }

package/components/CustomerServiceChat/style/web.scss

@@ -19,6 +19,8 @@
     padding: 10px;
     box-sizing: border-box;
     display: flex;
+    justify-content: space-between;
+    width: 100%;
   }
 
   &-message-list {

package/constant.ts

@@ -23,6 +23,7 @@ export const CUSTOM_MESSAGE_SRC = {
   PRODUCT_CARD: '22',
   SATISFACTION_CON: '23',
   USER_SATISFACTION: '24',
+  BOT_STATUS: '25',
   SEAT_STATUS: '26',
   USER_END_SESSION: '27',
   ORDER:'28',
@@ -31,9 +32,12 @@ export const CUSTOM_MESSAGE_SRC = {
   STREAM_TEXT: '31',
   MULTI_BRANCH: '32',
   MULTI_FORM: '33',
+  TRANSFER_TO_TASK_FLOW: '34',
   THINKING: '35',
   CONCURRENCY_LIMIT: '36',
   TIMEOUT_WARNING: '37',
+  TRANSFER_TO_HUMAN: '39',
+  SESSION_RESTARTED: '40',
 };
 
 // im message extra type
@@ -142,6 +146,8 @@ export const WHITE_LIST = [
   CUSTOM_MESSAGE_SRC.CONCURRENCY_LIMIT,
   CUSTOM_MESSAGE_SRC.ORDER,
   CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING,
+  CUSTOM_MESSAGE_SRC.TRANSFER_TO_TASK_FLOW,
+  CUSTOM_MESSAGE_SRC.TRANSFER_TO_HUMAN,
 ];
 
 export const TOOLBAR_BUTTON_TYPE = {
@@ -165,4 +171,18 @@ export enum ReadState {
   AllRead,
   NotShow,
   PartiallyRead,
-};
+};
+
+
+export const SUPPORTED_LANGUAGES = {
+  en: {name: 'English', codeForShow: 'En'},
+  fil: {name: 'Filipino', codeForShow: 'Fil'},
+  id: {name: 'Bahasa Indonesia', codeForShow: 'Id'}, 
+  ja: {name: '日本語', codeForShow: 'Ja'},
+  ms: {name: 'Bahasa Melayu', codeForShow: 'Ms'},
+  th: {name: 'ภาษาไทย', codeForShow: 'Th'},
+  vi: {name: 'Tiếng Việt', codeForShow: 'Vi'},
+  zh: {name: '中文简体', codeForShow: 'Zh'},
+  zh_tw: {name: '中文繁體', codeForShow: 'Zh-TW'},
+  ru: {name:'Русский', codeForShow: 'Ru'}
+}

package/interface.ts

@@ -3,7 +3,7 @@ export interface customerServicePayloadType {
   chatbotPlugin?: number | string;
   customerServicePlugin?: number | string;
   src: string | number;
-  content: any;
+  content?: any;
   subtype?: string;
   isFinished?: number;
   chunks?: string[];
@@ -16,6 +16,7 @@ export interface customerServicePayloadType {
     nodeID?: string;
     env?: string;
   }
+  description?: string;
 }
 
 interface IMenuItem {
@@ -190,12 +191,13 @@ export interface ToolbarButtonModel {
   title: string, // 名称
   icon?: string, // 图标
   type?: number,  // 类型 1:关键词回复 2:跳转链接
-  content?: string, // 发送的文本或跳转的链接
+  content?: string | ITransferToTaskFlowModel | ITransferToHumanModel, // 发送的文本或跳转的链接
   presetId?: ToolbarButtonPresetType, // 若要显示已有功能，填写相关type
   isPreset?: number, // 是否是预置功能  0:非预置 1:预置类型
   isEnabled?: number,  // 是否显示
   renderCondition?: () => {},  // [UIKit] 是否显示
   clickEvent?: () => void, // [UIKit] 点击事件
+  displayFlag?: number,
 }
 
 // 输入框功能 已有功能
@@ -225,4 +227,15 @@ export interface QuickOrderModel {
   pic?: string,
   url: string,
   customField?: QuickOrderCustomFieldModel[],
+}
+
+export interface ITransferToTaskFlowModel {
+  taskFlowID: number;
+  description?: string;
+}
+
+export interface ITransferToHumanModel {
+  groupID?: number;
+  specificMemberList?: Array<string>;
+  description?: string;
 }

package/locales/en/aidesk.ts

@@ -1,6 +1,6 @@
 const AIDesk = {
-  "结束人工会话": "End human service",
-  "转人工服务": "Human service",
+  "结束人工会话": "End Conversation",
+  "转人工服务": "Agent Transfer",
   "跳转": "Open",
   "立即填写": "Fill now",
   "已提交": "Submitted",
@@ -11,10 +11,10 @@ const AIDesk = {
   "请输入内容":"Please enter the content",
   "如果满意请给好评哦～":"If you're satisfied, please give a good review~",
   "请对本次服务进行评价": "Please rate this service",
-  "提交评价": "Feedback",
+  "提交评价": "Service Rating",
   "并发限制": "There are currently too many users accessing the service. Please try again later",
   "分支选项异常": "Content is abnormal, please check the task flow configuration",
-  "服务评价": "Feedback",
+  "服务评价": "Service Rating",
   "满意":"Satisfied",
   "不满意":"Dissatisfied",
   "感谢您的反馈，我们会持续优化改进":"Thank you for your feedback, we will continue to improve",

package/locales/en/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/en/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
   "周": "week(s) ",
   "天": "day(s)",
   "小时": "hour(s) ",
@@ -34,4 +34,4 @@ const Time = {
   "日": "Sun",
 }
 
-export default Time;
+export default time;

package/locales/fil/index.ts

@@ -1,7 +1,7 @@
 import AIDesk from './aidesk';
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 const messages = {
   fil: {
     "取消": 'Kanselahin',
@@ -18,7 +18,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/fil/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
   "周": "linggo/linggo ",
   "天": "araw",
   "小时": "oras/oras ",
@@ -15,4 +15,4 @@ const Time = {
   "星期日": "Linggo",
 }
 
-export default Time;
+export default time;

package/locales/id/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/id/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
   "周": "minggu",
   "天": "hari",
   "小时": "jam",
@@ -16,4 +16,4 @@ const Time = {
   "星期日": "Minggu",
 }
 
-export default Time;
+export default time;

package/locales/ja/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/ja/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
   "周": "週",
   "天": "日",
   "小时": "時間",
@@ -15,4 +15,4 @@ const Time = {
   "星期日": "日曜日",
 }
 
-export default Time;
+export default time;

package/locales/ms/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/ms/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
     "周": "Minggu",
     "天": "Hari",
     "小时": "Jam",
@@ -15,4 +15,4 @@ const Time = {
     "星期日": "Ahad"
 }
 
-export default Time;
+export default time;

package/locales/ru/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -18,7 +18,7 @@ const messages = {
     "拍照": 'Сделать фото',
     TUIChat,
     Component,
-    Time,
+    time,
     AIDesk,
   },
 };

package/locales/ru/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
     "周": "неделя",
     "天": "день",
     "小时": "час",
@@ -27,4 +27,4 @@ const Time = {
     "十二月": "декабрь",
 }
 
-export default Time;
+export default time;

package/locales/th/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/th/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
     "周": "สัปดาห์",
     "天": "วัน",
     "小时": "ชั่วโมง",
@@ -15,4 +15,4 @@ const Time = {
     "星期日": "วันอาทิตย์"
 }
 
-export default Time;
+export default time;

package/locales/vi/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/vi/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
     "周": "tuần",
     "天": "ngày",
     "小时": "giờ",
@@ -15,4 +15,4 @@ const Time = {
     "星期日": "chủ nhật",
 }
   
-export default Time;
+export default time;

package/locales/zh_cn/aidesk.ts

@@ -1,6 +1,6 @@
 const AIDesk = {
   "结束人工会话": "结束会话",
-  "转人工服务": "转人工服务",
+  "转人工服务": "人工服务",
   "跳转": "跳转",
   "立即填写": "立即填写",
   "已提交": "已提交",

package/locales/zh_cn/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -18,7 +18,7 @@ const messages = {
     "拍照": '拍照',
     TUIChat,
     Component,
-    Time,
+    time,
     AIDesk,
   },
 };

package/locales/zh_cn/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
   "周": "周",
   "天": "天",
   "小时": "小时",
@@ -34,4 +34,4 @@ const Time = {
   "日": "日",
 }
 
-export default Time;
+export default time;

package/locales/zh_tw/aidesk.ts

@@ -1,6 +1,6 @@
 const AIDesk = {
   "结束人工会话": "結束會話",
-  "转人工服务": "轉人工服務",
+  "转人工服务": "人工服務",
   "跳转": "跳轉",
   "立即填写": "立即填寫",
   "已提交": "已提交",

package/locales/zh_tw/index.ts

@@ -1,6 +1,6 @@
 import TUIChat from './TUIChat';
 import Component from './component';
-import Time from './time';
+import time from './time';
 import AIDesk from './aidesk';
 
 const messages = {
@@ -19,7 +19,7 @@ const messages = {
     AIDesk,
     TUIChat,
     Component,
-    Time,
+    time,
   },
 };
 

package/locales/zh_tw/time.ts

@@ -1,4 +1,4 @@
-const Time = {
+const time = {
   "周": "週",
   "天": "天",
   "小时": "小時",
@@ -34,4 +34,4 @@ const Time = {
   "日": "日",
 }
 
-export default Time;
+export default time;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "Vue2/Vue3 UIKit for AI Desk",
   "main": "index",
   "keywords": [
@@ -32,6 +32,7 @@
     "@tiptap/pm": "2.0.0-beta.220",
     "@tiptap/suggestion": "2.0.0-beta.220",
     "@types/lodash": "^4.14.202",
+    "countries-and-timezones": "^3.8.0",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
     "marked": "^6.0.0",

package/server.ts

@@ -13,14 +13,17 @@ import TUIChatEngine, {
   SendMessageParams,
   SendMessageOptions,
   TUIUserService,
+  TUIStore,
+  StoreName,
 } 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";
-import { switchReadStatus } from "./utils/utils";
+import { switchReadStatus, transferToHuman, transferToTaskFlow } from "./utils/utils";
 import state from "./utils/state";
-import { USER_DEFAULT_AVATAR } from "./constant";
+import { CUSTOM_MESSAGE_SRC, USER_DEFAULT_AVATAR } from "./constant";
 import { vueVersion } from "./adapter-vue-web";
+import { ITransferToHumanModel, ITransferToTaskFlowModel } from './interface';
 
 interface IInitWithProfile {
   SDKAppID: number,
@@ -119,6 +122,7 @@ export default class TUICustomerServer {
   }
 
   public unInit() {
+    this.isLoggedIn = false;
     return TUIChatEngine.logout();
   }
 
@@ -199,6 +203,14 @@ export default class TUICustomerServer {
     }
   }
 
+  public transferToTaskFlow(options: ITransferToTaskFlowModel) {
+    transferToTaskFlow(this.currentCustomerServiceID, options.taskFlowID, options.description);
+  }
+
+  public transferToHuman(options: ITransferToHumanModel) {
+    transferToHuman(this.currentCustomerServiceID, options.groupID, options.specificMemberList, options.description);
+  }
+
   public onCall(method: string, params: any) {
     Log.l(`TUICustomerServer.onCall method:${method} params:`, params);
     if (method === TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION) {
@@ -218,6 +230,7 @@ export default class TUICustomerServer {
 
   // 激活会话服务流
   private activeServiceFlow(params: any) {
+    Log.i(`activeServiceFlow params: language:${params.robotLang} country:${params.country} timezone:${params.timezone}`)
     TUIChatService.sendCustomMessage({
       to: params.conversationID.slice(3),
       conversationType: TUIChatEngine.TYPES.CONV_C2C,
@@ -225,9 +238,14 @@ export default class TUICustomerServer {
         data: JSON.stringify({
           src: '7',
           customerServicePlugin: 0,
-          triggeredContent: typeof params.robotLang === 'undefined' ? undefined : { language: params.robotLang }
+          triggeredContent: { 
+            language: params.robotLang, 
+            country: params.country,
+            timezone: params.timezone,
+          }
         }),
       },
     }, { onlineUserOnly: true });
+    TUIStore.update(StoreName.CUSTOM, "isInSession", true);
   }
 }