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

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.6.7 @2025.12.30
+
+### Features
+- initWithProfile 接口 Options 新增参数 clientCustomData，支持用户登录时传入自定义字段。
+
+### Fixed
+- 优化关闭排队页面的用户体验。
+- H5 端已知问题。
+
+## 1.6.6 @2025.12.22
+
+### Features
+- 新增参数 showAllRobotWelcomeItems，支持一页展示欢迎卡片全部内容
+- 工具栏快捷按钮支持设置【结束排队】。
+
+### Fixed
+- 底部快捷订单的自定义数据类型不是 string 导致的未被机器人正确识别的问题。
+- 用户昵称和头像可能被覆盖的问题。
+- 工具栏快捷按钮超出屏幕时折叠超出按钮
+
 ## 1.6.4 @2025.11.25
 
 ### Features

package/assets/tool_more.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 9C2.44775 9 2 8.55228 2 8C2 7.44772 2.44775 7 3 7C3.55225 7 4 7.44772 4 8C4 8.55228 3.55225 9 3 9Z" fill="black" style="fill:black;fill-opacity:1;"/>
+<path d="M7 8C7 8.55228 7.44775 9 8 9C8.55225 9 9 8.55228 9 8C9 7.44772 8.55225 7 8 7C7.44775 7 7 7.44772 7 8Z" fill="black" style="fill:black;fill-opacity:1;"/>
+<path d="M12 8C12 8.55228 12.4478 9 13 9C13.5522 9 14 8.55228 14 8C14 7.44772 13.5522 7 13 7C12.4478 7 12 7.44772 12 8Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</svg>

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>
@@ -157,6 +157,7 @@ interface IProps {
   headerConfig?: IHeaderConfig;
   enableSendingAudio?: number;
   showQueuePage?: number;
+  showAllRobotWelcomeItems?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -177,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>(), {
@@ -204,6 +206,7 @@ const props = withDefaults(defineProps<IProps>(), {
   enableURLDetection: 0,
   enableSendingAudio: 0,
   showQueuePage: 0,
+  showAllRobotWelcomeItems: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -320,6 +323,10 @@ const setEnableURLDetection = () => {
   state.set('enableURLDetection', props.enableURLDetection);
 }
 
+const setShowAllRobotWelcomeItems = () => {
+  state.set('showAllRobotWelcomeItems', props.showAllRobotWelcomeItems);
+}
+
 try {
   const userContext = TUILogin.getContext();
   if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
@@ -333,6 +340,7 @@ try {
   setShowReadStatus();
   setShowTyping();
   setEnableURLDetection();
+  setShowAllRobotWelcomeItems();
   getTimeZoneAndCountry();
   if (isNonEmptyObject(props.bottomQuickOrder)) {
     showBottomQuickOrder.value = true;
@@ -521,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';
@@ -820,13 +820,23 @@ function closeBottomQuickOrder() {
 }
 
 function sendBottomQuickOrder() {
+  if (!props.bottomQuickOrder) {
+    return;
+  }
+  const normalizedQuickOrder: QuickOrderModel = {
+    ...props.bottomQuickOrder,
+    customField: (props.bottomQuickOrder.customField || []).map(f => ({
+      name: f.name ? String(f.name) : '',
+      value: f.value ? String(f.value) : '',
+    })),
+  }
   TUIChatService.sendCustomMessage({
     to: currentConversationID.value.replace('C2C', ''),
     conversationType: 'C2C',
     payload: {
       data: JSON.stringify({
         src: CUSTOM_MESSAGE_SRC.PRODUCT_CARD,
-        content: props.bottomQuickOrder,
+        content: normalizedQuickOrder,
         customerServicePlugin: 0,
       }),
     },

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-robot-welcome.vue

@@ -12,6 +12,7 @@
       </div>
       <div
         class="change-wrapper"
+        v-if="list.length > 3 && !showAllRobotWelcomeItems"
         @click="changeBranchList()"
       >
         <Icon :src="iconRefresh" />
@@ -44,6 +45,7 @@ import Icon from './customer-icon.vue';
 import iconQuestion from '../../../../../../assets/icon_question.png';
 import iconRefresh from '../../../../../../assets/icon_refresh.png';
 import { customerServicePayloadType } from '../../../../../../interface';
+import state from '../../../../../../utils/state.js';
 const { reactive, toRefs, computed } = vue;
 
 interface Props {
@@ -68,13 +70,15 @@ export default {
   },
   emits: ['sendMessage'],
   setup(props: Props, { emit }) {
+    const showAllRobotWelcomeItems = state.get('showAllRobotWelcomeItems');
+    const welcomeItemList = props.payload.content.items || [];
     const data = reactive({
       // title
-      title: props.payload?.content?.title || '',
+      title: props.payload.content.title || '',
       // all branch list
-      list: props.payload?.content?.items || [],
+      list: welcomeItemList,
       // current branch list
-      showList: (props.payload?.content?.items || []).slice(0, 3),
+      showList: showAllRobotWelcomeItems ? welcomeItemList : welcomeItemList.slice(0, 3),
       // current page number
       pageNumber: 1,
     });
@@ -116,7 +120,8 @@ export default {
       changeBranchList,
       iconQuestion,
       iconRefresh,
-      longestContent
+      longestContent,
+      showAllRobotWelcomeItems,
     };
   },
 };

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

@@ -1,22 +1,39 @@
 <template>
-  <div class="toolbar-button-container">
-    <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) && ((item.displayFlag === 1 && canEndConversation) || 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"/>
-        <div class="toolbar-button-text">
+  <div class="toolbar-button-container" ref="toolbarContainerRef">
+    <template v-for="(item, index) in props.toolbarButtonList" :key="index">
+      <div :class="['toolbar-item-wrapper', index >= visibleCount ? 'measure-offscreen' : '']" :data-index="index" ref="toolbarWrappersRef">
+        <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) && ((item.displayFlag === 1 && canEndConversation) || 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="14px" height="14x"/>
+          <div class="toolbar-button-text">
             {{ item.title }}
+          </div>
         </div>
       </div>
     </template>
+    <div v-if="hiddenItems.length > 0" class="toolbar-button overflow-button" ref="toolbarOverflowRef" @click="togglePopover">
+      <Icon :file="ToolMoreIcon" width="14px" height="14px"/>
+    </div>
+    <div :class="['overflow-popover', showPopover ? 'show-popover' : '' ]" ref="toolbarPopoverRef">
+      <div v-for="(item, index) in hiddenItems" :key="item.id || ('hidden-' + index)">
+        <ToolbarButtonHumanService class="overflow-popover-item" v-if="item.presetId === TOOLBAR_BUTTON_TYPE.HUMAN_SERVICE && shouldRender(item) && !isInHumanService" :title="item.title" :icon="item.icon" @closePopover="closePopover"/>
+        <ToolbarButtonServiceRating class="overflow-popover-item" v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.SERVICE_RATING && shouldRender(item) && isInHumanService" :title="item.title" :icon="item.icon" @closePopover="closePopover"/>
+        <ToolbarButtonEndHumanService  class="overflow-popover-item" v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && ((item.displayFlag === 1 && canEndConversation) || isInHumanService)" :title="item.title" :icon="item.icon" @closePopover="closePopover"/>
+        <div v-else-if="shouldRender(item)" class="overflow-popover-item" @click="onClick(item, visibleCount + index)">
+          <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="16px" height="16px"/>
+          <span class="toolbar-button-text" style="text-align: left;">{{ item.title }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="measure-offscreen" ref="measureOverflowRef">···</div>
   </div>
 </template>
 <script lang="ts" setup>
 import vue from '../../../adapter-vue';
-const { ref, onMounted, onUnmounted } = vue;
+const { ref, onMounted, onUnmounted, computed } = vue;
 import {
   TUIChatService,
   TUIStore,
@@ -27,10 +44,12 @@ 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 } 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';
+import ToolMoreIcon from '../../../assets/tool_more.svg';
+import Log from '../../../utils/logger';
 interface IProps {
   toolbarButtonList?: ToolbarButtonModel[] | undefined;
 }
@@ -40,6 +59,21 @@ const props = withDefaults(defineProps<IProps>(), {});
 const isInHumanService = ref(false);
 const currentConversation = ref<IConversationModel>();
 const canEndConversation = ref(false);
+const queueNumber = ref(-1);
+const visibleCount = ref(props.toolbarButtonList ? props.toolbarButtonList.length : 0);
+const showPopover = ref(false);
+
+const toolbarContainerRef = ref<HTMLElement | null>(null);
+const toolbarWrappersRef = ref<HTMLElement[] | HTMLElement | null>(null);
+const toolbarOverflowRef = ref<HTMLElement | null>(null);
+const toolbarPopoverRef = ref<HTMLElement | null>(null);
+const measureOverflowRef = ref<HTMLElement | null>(null);
+
+const buttonWidthList = ref<number[]>([]);
+const overflowButtonWidth = 38;
+
+let resizeObserver: ResizeObserver | null = null;
+let mutationObserver: MutationObserver | null = null;
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
@@ -47,8 +81,32 @@ onMounted(() => {
   });
   TUIStore.watch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
-    canEndConversation: onCanEndConversationUpdate
+    canEndConversation: onCanEndConversationUpdate,
+    isQueuing: onIsQueuingUpdate,
   });
+  getHiddenList();
+
+  try {
+    if (typeof (window as any).ResizeObserver !== 'undefined') {
+      resizeObserver = new (window as any).ResizeObserver(() => {
+        getHiddenList();
+        showPopover.value = false;
+      });
+      if (resizeObserver && toolbarContainerRef.value) {
+        resizeObserver.observe(toolbarContainerRef.value);
+      }
+    } else {
+      window.addEventListener('resize', getHiddenList);
+    }
+    if (typeof MutationObserver !== 'undefined' && toolbarContainerRef.value) {
+      mutationObserver = new MutationObserver(() => getHiddenList());
+      mutationObserver.observe(toolbarContainerRef.value, { childList: true, subtree: true });
+    }
+  } catch (e) {
+    window.addEventListener('resize', getHiddenList);
+  }
+
+  document.addEventListener('click', closePopoverOutside);
 });
 
 onUnmounted(() => {
@@ -57,8 +115,27 @@ onUnmounted(() => {
   });
   TUIStore.unwatch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
-    canEndConversation: onCanEndConversationUpdate
+    canEndConversation: onCanEndConversationUpdate,
+    isQueuing: onIsQueuingUpdate,
   });
+  if (resizeObserver) {
+    try { 
+      resizeObserver.disconnect(); 
+    } catch {
+      Log.w('ResizeObserver disconnect failed');
+    }
+    resizeObserver = null;
+  }
+  if (mutationObserver) {
+    try { 
+      mutationObserver.disconnect(); 
+    } catch {
+      Log.w('MutationObserver disconnect failed');
+    }
+    mutationObserver = null;
+  }
+  window.removeEventListener('resize', getHiddenList);
+  document.removeEventListener('click', closePopoverOutside);
 });
 
 const onCurrentConversationUpdate = (conversation: IConversationModel) => {
@@ -68,15 +145,31 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
 const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean}) => {
   if (data && data.conversationID === currentConversation.value.conversationID) {
     isInHumanService.value = data.value;
+    if (!mutationObserver) {
+      getHiddenList();
+    }
   }
 };
 
 const onCanEndConversationUpdate = (data: {conversationID: string, value: boolean}) => {
   if (data && data.conversationID === currentConversation.value.conversationID) {
     canEndConversation.value = data.value;
+    if (!mutationObserver) {
+      getHiddenList();
+    }
+  }
+}
+
+const onIsQueuingUpdate = (data: {conversationID: string, value: number}) => {
+  if (data && data.conversationID === currentConversation.value.conversationID) {
+    queueNumber.value = data.value;
   }
 }
 
+const closePopover = () => {
+  showPopover.value = false;
+}
+
 const onClick = debounce((item:ToolbarButtonModel, index: number) => {
   if (!currentConversation.value) {
     return;
@@ -96,13 +189,23 @@ const onClick = debounce((item:ToolbarButtonModel, index: number) => {
     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 (item.type === 5 && queueNumber.value >= 0) {
+    leaveQueuing(getTo(currentConversation.value));
   } else if (props.toolbarButtonList !== undefined && typeof props.toolbarButtonList[index].clickEvent === 'function') {
     props.toolbarButtonList[index].clickEvent();
   }
+  showPopover.value = false;
 }, 300);
 
 const shouldRender = (item: ToolbarButtonModel) => {
   if (item.isEnabled === 1) {
+    if (item.type === 5) {
+      // 转人工排队人数＜0则不展示
+      if (queueNumber.value < 0) {
+        return false;
+      }
+      return true;
+    }
     return true;
   } else if (item.isEnabled === 0) {
     return false;
@@ -112,6 +215,113 @@ const shouldRender = (item: ToolbarButtonModel) => {
   return false;
 }
 
+const togglePopover = () => {
+  showPopover.value = !showPopover.value;
+};
+
+const hiddenItems = computed(() => {
+  if (props.toolbarButtonList) {
+    return props.toolbarButtonList.slice(visibleCount.value) || [];
+  }
+  return [];
+})
+
+const getVisibleCount = () => {
+  const list = props.toolbarButtonList || [];
+  const buttonCount = list.length;
+  const container = toolbarContainerRef.value;
+  if (!container) {
+    visibleCount.value = buttonCount;
+    return;
+  }
+  const requiredRightGap = 11;
+  const available = container.clientWidth - requiredRightGap;
+  let sum = 0;
+  let visible = 0;
+  for (let i = 0; i < buttonCount; i++) {
+    const w = buttonWidthList.value[i] || 0;
+    if (i < buttonCount - 1) {
+      if (sum + w + overflowButtonWidth <= available) {
+        sum += w;
+        visible++;
+      } else {
+        break;
+      }
+    } else {
+      if (sum + w <= available) {
+        sum += w;
+        visible++;
+      } else {
+        break;
+      }
+    }
+  }  
+  if (visible === 0 && buttonCount > 0) {
+    visibleCount.value = 0;
+  } else {
+    visibleCount.value = visible;
+  }
+  updatePopoverPosition();
+};
+
+const getHiddenList = debounce(() => {
+  const container = toolbarContainerRef.value;
+  if (!container) {
+    return;
+  }
+
+  const wrappersRaw = toolbarWrappersRef.value;
+  const buttonList = Array.isArray(wrappersRaw) ? wrappersRaw : (wrappersRaw ? [wrappersRaw] : []);
+  const list = props.toolbarButtonList || [];
+  const newWidths: number[] = [];
+
+  for (let i = 0; i < list.length; i++) {
+    const el = buttonList[i] as HTMLElement | undefined;
+    if (el && typeof el.getBoundingClientRect === 'function') {
+      const rect = el.getBoundingClientRect();
+      const style = window.getComputedStyle(el);
+      const ml = parseFloat(style.marginLeft || '0');
+      const mr = parseFloat(style.marginRight || '0');
+      newWidths[i] = rect.width + ml + mr;
+    } else {
+      newWidths[i] = 0;
+    }
+  }
+  buttonWidthList.value = newWidths;
+  getVisibleCount();
+}, 100);
+
+const closePopoverOutside = (e: MouseEvent) => {
+  const pop = toolbarPopoverRef.value;
+  const btn = toolbarOverflowRef.value;
+  if (!pop) {
+    return;
+  }
+  const target = e.target as Node | null;
+  if (!target) {
+    return;
+  }
+  if (pop.contains(target) || (btn && btn.contains(target))) {
+    return;
+  }
+  showPopover.value = false;
+};
+
+const updatePopoverPosition = () => {
+  const pop = toolbarPopoverRef.value;
+  const btn = toolbarOverflowRef.value;
+  if (!btn) {
+    return;
+  }
+  const btnRect = btn.getBoundingClientRect();
+  if (pop) {
+    const left = btnRect.right - pop.offsetWidth;
+    const top = btnRect.top - pop.offsetHeight - 6; 
+    pop.style.left = `${left}px`;
+    pop.style.top = `${top}px`;
+  }
+};
+
 </script>
 <style>
 .toolbar-button-container {
@@ -119,13 +329,8 @@ const shouldRender = (item: ToolbarButtonModel) => {
   flex-direction: row !important;
   margin: 5px !important;
   align-items: center ;
-  overflow-x: auto; /* 允许横向滚动 */
-  scrollbar-width: none; /* Firefox 隐藏滚动条 */
-  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
+  overflow-x: hidden;
   min-height: 28px;
-  &::-webkit-scrollbar {
-    display: none; /* Chrome 隐藏滚动条 */
-  }
 }
 
 .toolbar-button {
@@ -138,10 +343,11 @@ const shouldRender = (item: ToolbarButtonModel) => {
   margin-left: 10px;
   white-space: nowrap;
   user-select: none;
+  position: relative;
 }
 
 .toolbar-button:first-child {
-  margin-left: 5px;
+  margin-left: 11px;
 }
 
 .toolbar-button-h5 {
@@ -161,4 +367,63 @@ const shouldRender = (item: ToolbarButtonModel) => {
   min-width: 25px;
   text-align: center;
 }
+.overflow-button {
+  position: relative;
+  user-select: none;
+  background-color: #fff;
+  padding: 5px 14px;
+}
+
+.overflow-popover {
+  position: fixed;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid #f9fafc;
+  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.06), 0 6px 16px 0 rgba(0,0,0,0.06);
+  border-radius: 8px;
+  padding: 6px;
+  min-width: 120px;
+  white-space: nowrap;
+  transform-origin: right bottom;
+  visibility: hidden;
+  max-height: 200px;
+  overflow-y: auto;
+  max-width: 100px;
+  min-width: 25px;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.show-popover {
+  display: block;
+  visibility: visible;
+}
+
+.overflow-popover-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 12px;
+  border-radius: 4px;
+  border: none;
+  margin: 0 !important;
+  box-shadow: none;
+}
+.overflow-popover-item:hover { 
+  background: #f9fafc; 
+}
+
+.measure-offscreen {
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  padding: 5px 14px;
+  border-radius: 20px;
+  border: 1px solid #E7EAEF;
+}
 </style>

package/components/CustomerServiceChat/message-toolbar-button/toolbar-button-end-human-service.vue

@@ -26,6 +26,8 @@ const props = withDefaults(defineProps<IProps>(), {
   icon: ''
 })
 
+const emits = defineEmits(['closePopover']);
+
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
@@ -57,7 +59,10 @@ const onClick = () => {
       }),
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-  },{ onlineUserOnly:true });
+  },{ onlineUserOnly:true })
+  .finally(() => {
+    emits('closePopover');
+  });
 }
 
 </script>

package/components/CustomerServiceChat/message-toolbar-button/toolbar-button-human-service.vue

@@ -24,6 +24,8 @@ const props = withDefaults(defineProps<IProps>(), {
   icon: ''
 });
 
+const emits = defineEmits(['closePopover']);
+
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
@@ -51,6 +53,9 @@ const onClick = debounce(() => {
       text: TUITranslateService.t('AIDesk.转人工服务')
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  })
+  .finally(() => {
+    emits('closePopover');
   });
 }, 300);
 

package/components/CustomerServiceChat/message-toolbar-button/toolbar-button-service-rating.vue

@@ -25,6 +25,8 @@ const props = withDefaults(defineProps<IProps>(), {
   icon: ''
 })
 
+const emits = defineEmits(['closePopover']);
+
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
@@ -55,7 +57,10 @@ const onClick = debounce(() => {
       }),
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-  },{ onlineUserOnly: true });
+  },{ onlineUserOnly: true })
+  .finally(() => { 
+    emits('closePopover');
+  });
 }, 300);
 
 </script>

package/components/common/Avatar/index.vue

@@ -41,12 +41,12 @@ interface IEmits {
 }
 
 const defaultAvatarUrl = ref(
-  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
+  'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png',
 );
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
   // uniapp vue2 does not support constants in defineProps
-  url: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
+  url: 'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png',
   size: '36px',
   borderRadius: '50%',
   useSkeletonAnimation: false,

package/constant.ts

@@ -165,8 +165,6 @@ export const INPUT_TOOLBAR_TYPE = {
   AUDIO: 'audio',
 };
 
-export const USER_DEFAULT_AVATAR = 'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png';
-
 export enum ReadState {
   Read,
   Unread,

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.4",
+  "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

@@ -17,9 +17,8 @@ import TUIChatEngine, {
 import Log from './utils/logger';
 import { version } from './package.json'
 import { Toast, TOAST_TYPE } from "./components/common/Toast/index-web";
-import { switchReadStatus, transferToHuman, transferToTaskFlow, validateUserID, updateCustomStore, isNonEmptyObject } from "./utils/utils";
+import { switchReadStatus, transferToHuman, transferToTaskFlow, validateUserID, isNonEmptyObject } from "./utils/utils";
 import state from "./utils/state";
-import { USER_DEFAULT_AVATAR } from "./constant";
 import { vueVersion } from "./adapter-vue-web";
 import { ITransferToHumanModel, ITransferToTaskFlowModel } from './interface';
 
@@ -30,6 +29,7 @@ interface IInitWithProfile {
   nickName?: string,
   avatar?: string,
   customerServiceID?: string,
+  clientCustomData?: string,
 }
 
 interface IProfile {
@@ -46,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,7 +55,8 @@ export default class TUICustomerServer {
     this.loginFailToasts = [];
     this.isLoggedIn = false;
     this.loggedInUserID = '';
-    this.myProfile = { avatar: USER_DEFAULT_AVATAR };
+    this.myProfile = {};
+    this.clientCustomData = '';
   }
 
   static getInstance(): TUICustomerServer {
@@ -139,19 +141,15 @@ 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
       this.myProfile.nick = nickName;
-    } else {
-      this.myProfile.nick = '';
     }
 
     if (avatar) {
       this.myProfile.avatar = avatar;
-    } else {
-      this.myProfile.avatar = USER_DEFAULT_AVATAR;
     }
     
     if (customerServiceID) {
@@ -160,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);
   }
 
@@ -281,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),
@@ -294,6 +298,7 @@ export default class TUICustomerServer {
             language: params.robotLang,
             country: params.country,
             timezone: params.timezone,
+            clientCustomData: this.clientCustomData,
           }
         }),
       },

package/utils/utils.ts

@@ -376,4 +376,46 @@ export function debounce(func, delay) {
       func.apply(context, args); 
     }, delay);
   }
+}
+
+export function leaveQueuing(conversationID: string) {
+  TUIChatService.sendCustomMessage({
+    to: conversationID,
+    conversationType: TUIChatEngine.TYPES.CONV_C2C,
+    payload: {
+      data: JSON.stringify({
+        customerServicePlugin: 0,
+        src: CUSTOM_MESSAGE_SRC.USER_END_CONVERSATION,
+      }),
+    },
+    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>