@tencentcloud/ai-desk-customer-vue 1.6.6 → 1.6.7

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.6.7 @2025.12.30
+
+### Features
+- initWithProfile 接口 Options 新增参数 clientCustomData，支持用户登录时传入自定义字段。
+
+### Fixed
+- 优化关闭排队页面的用户体验。
+- H5 端已知问题。
+
 ## 1.6.6 @2025.12.22
 
 ### Features

package/components/CustomerServiceChat/customer-queue-page/index.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="customer-queue-end-button">
-      <div :class="['customer-queue-end-button-content', isClicked ? 'button-clicked' : '']" @click="endQueuing">
+      <div :class="['customer-queue-end-button-content', isClicked ? 'button-clicked' : '']" @click="leaveQueue">
         {{ TUITranslateService.t("AIDesk.结束排队") }}
       </div>
     </div>
@@ -24,9 +24,8 @@
 <script lang="ts" setup>
 import vue from '../../../adapter-vue';
 const { ref, onMounted, onUnmounted } = vue;
-import { IConversationModel, StoreName, TUIChatService, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-import { CUSTOM_MESSAGE_SRC } from '../../../constant';
-import { getTo, isEnabledMessageReadReceiptGlobal } from '../../../utils/utils';
+import { IConversationModel, StoreName, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { getTo, leaveQueuing } from '../../../utils/utils';
 const currentConversation = ref<IConversationModel>();
 const isClicked = ref(false);
 const props = defineProps({
@@ -35,6 +34,7 @@ const props = defineProps({
     default: 0
   },
 });
+const emits = defineEmits(['closeQueuePage']);
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
@@ -51,22 +51,13 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
   currentConversation.value = conversation;
 };
 
-const endQueuing = () => {
+const leaveQueue = () => {
   if (isClicked.value) {
     return;
   }
   isClicked.value = true;
-  TUIChatService.sendCustomMessage({
-    to: getTo(currentConversation.value),
-    conversationType: currentConversation.value.type,
-    payload: {
-      data: JSON.stringify({
-        customerServicePlugin: 0,
-        src: CUSTOM_MESSAGE_SRC.USER_END_CONVERSATION,
-      }),
-    },
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-  },{ onlineUserOnly:true });
+  leaveQueuing(getTo(currentConversation.value));
+  emits('closeQueuePage');
 }
 </script>
 <style lang="scss">

package/components/CustomerServiceChat/index-web.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['tui-chat', !isPC && 'tui-chat-h5']" :key="currentLanguage">
     <div
-      v-if="currentConversationID && (!props.showQueuePage || queueNumber < 0 || queueNumber === undefined)"
+      v-if="currentConversationID && (!props.showQueuePage || queueNumber < 0 || queueNumber === undefined || hasLeftQueue)"
       :class="['tui-chat', !isPC && 'tui-chat-h5']"
     >
       <ChatHeader
@@ -94,8 +94,8 @@
           @close="() => { showFeedbackModal = false }"
         />
     </div>
-    <div v-if="props.showQueuePage && queueNumber >= 0" :class="['tui-chat', !isPC && 'tui-chat-h5']">
-      <CustomerQueuePage :queueNumber="queueNumber"/>
+    <div v-if="props.showQueuePage && queueNumber >= 0 && !hasLeftQueue" :class="['tui-chat', !isPC && 'tui-chat-h5']">
+      <CustomerQueuePage :queueNumber="queueNumber" @closeQueuePage="closeQueuePage"/>
     </div>
   </div>
 </template>
@@ -178,6 +178,7 @@ const languageForShowList = ref<Array<string>>([]);
 const feedbackModalRef = ref();
 const showFeedbackModal = ref(false);
 const queueNumber = ref(-1);
+const hasLeftQueue = ref(false);
 let timezone = '';
 let countryID = '';
 const props = withDefaults(defineProps<IProps>(), {
@@ -528,8 +529,13 @@ function onDislike(messageInfo: Object) {
 function onIsQueuingUpdate(data: {conversationID: string, value: number}) {
   if (data && data.conversationID === currentConversationID.value) {
     queueNumber.value = data.value;
+    hasLeftQueue.value = false;
   }
 }
+
+function closeQueuePage() {
+  hasLeftQueue.value = true;
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -361,7 +361,7 @@ function handlePasteText(e: ClipboardEvent) {
   const text = e.clipboardData?.getData('text/plain') || '';
   // if paste html in pc, paste by tiptap editor default
   // if paste text in pc or mobile, parse text to html to render emoji
-  if (!html) {
+  if (isH5 || !html) {
     const renderArray = parseTextToRenderArray(text);
     insertEditorContent(renderArray);
   }

package/components/CustomerServiceChat/message-input-toolbar/rating-tool/index.vue

@@ -24,7 +24,7 @@ import ratingToolIcon from '../../../../assets/rating_tool_icon.svg'
 import ratingToolIconH5 from '../../../../assets/rating_tool_icon_h5.svg';
 import { getTo } from '../../../../utils/utils';
 import { CUSTOM_MESSAGE_SRC } from '../../../../constant';
-const { ref, onMounted, onUnmounted } = vue;
+const { ref } = vue;
 
 const props = defineProps({
   isH5ToolShow:{

package/components/CustomerServiceChat/message-list/index-web.vue

@@ -208,7 +208,6 @@ import {
   getBoundingClientRect,
   getScrollInfo,
 } from '@tencentcloud/universal-api';
-import { throttle } from 'lodash';
 import MessageText from './message-elements/message-text.vue';
 import MessageImage from './message-elements/message-image-web.vue';
 import MessageAudio from './message-elements/message-audio-web.vue';
@@ -237,6 +236,7 @@ import {
   deepCopy,
   isNonEmptyObject,
   updateCustomStore,
+  throttle
 } from '../../../utils/utils';
 import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject, isTransferMessageWithoutDesc } from '../../../utils/index';
 import { isCustomerConversation } from '../../../index';

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

@@ -85,6 +85,9 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
       }
 
       const _payloadObject = JSONToObject(props.payload);
+      if (!_payloadObject.chunks) {
+        return;
+      }
       chunks.value = Array.isArray(_payloadObject.chunks) ? _payloadObject.chunks.join('') : _payloadObject.chunks;
       isFinished.value = _payloadObject.isFinished === 1;
 

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

@@ -11,7 +11,7 @@
 import vue from '../../../../adapter-vue';
 import Icon from '../../../common/Icon.vue';
 import loading_message from '../../../../assets/loading_message.svg';
-const { ref, watchEffect,onMounted,onUnmounted} = vue;
+const { ref, onMounted, onUnmounted} = vue;
 export default {
     components:{
         Icon

package/components/CustomerServiceChat/message-list/message-elements/simple-message-list/index.vue

@@ -158,7 +158,6 @@ import TUIChatEngine, {
   TUITranslateService,
 } from '@tencentcloud/chat-uikit-engine';
 import addIcon from '../../../../../assets/back.svg';
-import playIcon from '../../../../../assets/video-play.png';
 import Icon from '../../../../common/Icon.vue';
 import MessageContainer from './message-container.vue';
 import MessageRecord from '../message-record/index.vue';

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

@@ -44,7 +44,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, isNonEmptyObject, transferToTaskFlow, transferToHuman, debounce, endQueuing } from '../../../utils/utils';
+import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo, isNonEmptyObject, transferToTaskFlow, transferToHuman, debounce, leaveQueuing } 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';
@@ -190,7 +190,7 @@ const onClick = debounce((item:ToolbarButtonModel, index: number) => {
   } else if (item.type === 4 && isNonEmptyObject(item.content)) {
     transferToHuman(getTo(currentConversation.value), item.content.groupID, item.content.specificMemberList, item.content.description);
   } else if (item.type === 5 && queueNumber.value >= 0) {
-    endQueuing(getTo(currentConversation.value));
+    leaveQueuing(getTo(currentConversation.value));
   } else if (props.toolbarButtonList !== undefined && typeof props.toolbarButtonList[index].clickEvent === 'function') {
     props.toolbarButtonList[index].clickEvent();
   }

package/locales/en/aidesk.ts

@@ -38,6 +38,6 @@ const AIDesk = {
   "排队等待中": "In Queue",
   "排队等待话术": "We apologize for the wait. All agents are currently assisting other customers. You will be connected shortly. Thank you for your patience.",
   "当前前方排队人数": "Queue Position",
-  "结束排队": "Exit Queue"
+  "结束排队": "Leave Queue"
 }
 export default AIDesk;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Vue2/Vue3 UIKit for AI Desk",
   "main": "index",
   "keywords": [
@@ -31,11 +31,9 @@
     "@tiptap/extension-text": "2.0.0-beta.220",
     "@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",
     "js-audio-recorder": "^1.0.7",
-    "lodash": "^4.17.21",
     "marked": "^6.0.0",
     "mp-html": "^2.5.0",
     "vue-clipboard3": "2.0.0"

package/server.ts

@@ -29,6 +29,7 @@ interface IInitWithProfile {
   nickName?: string,
   avatar?: string,
   customerServiceID?: string,
+  clientCustomData?: string,
 }
 
 interface IProfile {
@@ -45,6 +46,7 @@ export default class TUICustomerServer {
   private myProfile: IProfile;
   private paramsForActiveAgain: any;
   private loginFailToasts: any[];
+  private clientCustomData: string;
   constructor() {
     TUICore.registerService(TUIConstants.TUICustomerServicePlugin.SERVICE.NAME, this);
     TUICore.registerExtension(TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID, this);
@@ -54,6 +56,7 @@ export default class TUICustomerServer {
     this.isLoggedIn = false;
     this.loggedInUserID = '';
     this.myProfile = {};
+    this.clientCustomData = '';
   }
 
   static getInstance(): TUICustomerServer {
@@ -138,7 +141,7 @@ export default class TUICustomerServer {
   }
 
   public async initWithProfile(options: IInitWithProfile) {
-    const { SDKAppID, userID, userSig, nickName, avatar, customerServiceID } = options;
+    const { SDKAppID, userID, userSig, nickName, avatar, customerServiceID, clientCustomData } = options;
     Log.l(`TUICustomerServer.initWithProfile version:${version}`);
     if (nickName) {
       // chat 个人资料的昵称是 nick
@@ -155,6 +158,12 @@ export default class TUICustomerServer {
         this.customerServiceIDList.push(this.currentCustomerServiceID);
       }
     }
+
+    if (clientCustomData) {
+      this.clientCustomData = clientCustomData;
+    } else {
+      this.clientCustomData = '';
+    }
     return this.init(SDKAppID, userID, userSig);
   }
 
@@ -276,7 +285,7 @@ export default class TUICustomerServer {
 
   // 激活会话服务流
   private activeServiceFlow(params: any) {
-    Log.i(`TUICustomerServer.activeServiceFlow params: language:${params.robotLang} country:${params.country} timezone:${params.timezone}`);
+    Log.i(`TUICustomerServer.activeServiceFlow params: language:${params.robotLang} country:${params.country} timezone:${params.timezone} clientCustomData:${this.clientCustomData}`);
     this.paramsForActiveAgain = { ...params };
     TUIChatService.sendCustomMessage({
       to: params.conversationID.slice(3),
@@ -289,6 +298,7 @@ export default class TUICustomerServer {
             language: params.robotLang,
             country: params.country,
             timezone: params.timezone,
+            clientCustomData: this.clientCustomData,
           }
         }),
       },

package/utils/utils.ts

@@ -378,7 +378,7 @@ export function debounce(func, delay) {
   }
 }
 
-export function endQueuing(conversationID: string) {
+export function leaveQueuing(conversationID: string) {
   TUIChatService.sendCustomMessage({
     to: conversationID,
     conversationType: TUIChatEngine.TYPES.CONV_C2C,
@@ -390,4 +390,32 @@ export function endQueuing(conversationID: string) {
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   },{ onlineUserOnly: true });
-};
+};
+
+export function throttle(
+  func,
+  wait = 200,
+  options?: { leading?: boolean;}
+) {
+  let last = 0;
+  let timeout;
+  const leading = options?.leading !== undefined ? options.leading : true;
+
+  return function (this: any, ...args: any[]) {
+    const now = Date.now();
+    if (!last && !leading) {
+      last = now;
+    }
+
+    const remaining = wait - (now - last);
+
+    if (remaining <= 0) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      last = now;
+      func.apply(this, args);
+    }
+  };
+}

package/components/CustomerServiceChat/message-list/message-elements/video-play.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="dialog-video">
-    <video
-      v-if="isShow"
-      id="videoEle"
-      class="video-box"
-      :src="videoData"
-      controls
-      autoplay
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import vue from '../../TencentCloudCustomer/tui-customer-service-plugin-test/adapter-vue';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import { onLoad, onReady } from '@dcloudio/uni-app';
-const { ref } = vue;
-
-const videoData = ref();
-const isShow = ref(false);
-const videoContext = ref();
-onLoad((option: any) => {
-  const decodedUrl = decodeURIComponent(option?.videoUrl);
-  videoData.value = decodedUrl;
-  isShow.value = true;
-});
-
-onReady(() => {
-  isShow.value = true;
-  videoContext.value = TUIGlobal.createVideoContext('videoEle');
-});
-</script>
-<style lang="scss" scoped>
-.dialog-video {
-  position: fixed;
-  z-index: 999;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(#000, 0.6);
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .video-box {
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-</style>