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

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 1.6.6 @2025.12.22
+
+### Features
+- 新增参数 showAllRobotWelcomeItems，支持一页展示欢迎卡片全部内容
+- 工具栏快捷按钮支持设置【结束排队】。
+
+### Fixed
+- 底部快捷订单的自定义数据类型不是 string 导致的未被机器人正确识别的问题。
+- 用户昵称和头像可能被覆盖的问题。
+- 工具栏快捷按钮超出屏幕时折叠超出按钮
+
+## 1.6.4 @2025.11.25
+
+### Features
+- 支持区分用户端上行消息的来源（用户输入或用户点击分支选项）
+
+### Fixed
+- vue2 已知问题
+
 ## 1.6.3 @2025.11.13
 
 ### 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/feedback-modal/index.vue

@@ -8,7 +8,9 @@
               {{ TUITranslateService.t("AIDesk.感谢您的反馈，我们会持续优化改进") }}  
             </span>
           </div>
-          <Icon :file="DialogCloseIcon" width="20px" height="20px" @click="closeFeedbackModal"/>
+          <div @click="closeFeedbackModal">
+            <Icon :file="DialogCloseIcon" width="20px" height="20px"/>
+          </div>
         </div>
 
         <div class="dialog-select-container">
@@ -86,6 +88,7 @@
 </template>
 <script lang="ts">
 import vue from '../../../adapter-vue';
+import { vueVersion } from '../../../adapter-vue-web';
 import Icon from '../../common/Icon.vue';
 import { StoreName, TUIStore, TUITranslateService, TUIChatService } from '@tencentcloud/chat-uikit-engine';
 import GreenCheck from '../../../assets/green_check.svg';
@@ -178,7 +181,20 @@ export default {
     }
 
     const dialogButtonClick = (item) => {
-      item.isSelected = !item.isSelected;
+      if (vueVersion === 3) {
+        // vue 3 
+        item.isSelected = !item.isSelected;
+      } else {
+        // vue 2.6 or vue 2.7
+        const index = feedbackButtonList.value.findIndex(i => i.id === item.id);
+        if (index === -1) return;
+        const newList = feedbackButtonList.value.slice();
+        newList[index] = {
+          ...newList[index],
+          isSelected: !newList[index].isSelected
+        };
+        feedbackButtonList.value = newList;
+      }
     };
 
     const isSubmitEnabled = computed(() => {
@@ -212,12 +228,6 @@ export default {
     const onDislike = (messageInfo) => {
       _messageInfo = messageInfo;
     };
-
-    expose({
-      onLike,
-      onDislike,
-    });
-
     return {
       isPC,
       GreenCheck,
@@ -230,6 +240,8 @@ export default {
       submit,
       isSubmitEnabled,
       feedbackButtonListFromStore,
+      onLike,
+      onDislike,
     };
   }
 }

package/components/CustomerServiceChat/index-web.vue

@@ -157,6 +157,7 @@ interface IProps {
   headerConfig?: IHeaderConfig;
   enableSendingAudio?: number;
   showQueuePage?: number;
+  showAllRobotWelcomeItems?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -204,6 +205,7 @@ const props = withDefaults(defineProps<IProps>(), {
   enableURLDetection: 0,
   enableSendingAudio: 0,
   showQueuePage: 0,
+  showAllRobotWelcomeItems: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -320,6 +322,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 +339,7 @@ try {
   setShowReadStatus();
   setShowTyping();
   setEnableURLDetection();
+  setShowAllRobotWelcomeItems();
   getTimeZoneAndCountry();
   if (isNonEmptyObject(props.bottomQuickOrder)) {
     showBottomQuickOrder.value = true;

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

@@ -20,7 +20,7 @@
         :enableInput="props.enableInput"
         :enableTyping="props.enableTyping"
         :enableDragUpload="props.enableDragUpload"
-        :isInAudioMode="isInAudioMode"
+        :isInAudioModeFromProps="isInAudioMode"
         :shouldShowToolbar="shouldShowToolbar"
         :shouldShowEmoji="shouldShowEmoji"
         :shouldShowAudio="shouldShowAudio"
@@ -60,7 +60,7 @@ import MessageInputButton from './message-input-button.vue';
 import MessageInputQuote from './message-input-quote/index.vue';
 import { sendMessages, sendTyping } from '../utils/sendMessage';
 import { transformTextWithEmojiNamesToKeys } from '../emoji-config';
-import { isPC,isH5 } from '../../../utils/env';
+import { isPC, isH5 } from '../../../utils/env';
 import Icon from '../../common/Icon.vue';
 import emojiIcon from '../../../assets/emoji.png';
 import toolIcon from '../../../assets/more_tools.png';
@@ -68,9 +68,8 @@ import sendButtonIcon from '../../../assets/send_button_h5.svg';
 import audioIcon from '../../../assets/audio-blue.svg';
 import keyboardIcon from '../../../assets/keyboard-icon.svg';
 import { INPUT_TOOLBAR_TYPE } from '../../../constant';
-import { onUnmounted } from 'vue';
 import Log from '../../../utils/logger';
-const { ref, onMounted, onBeforeUnmount, computed } = vue;
+const { ref, onMounted, onBeforeUnmount, computed, onUnmounted } = vue;
 
 const props = defineProps({
   isMuted: {

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

@@ -116,7 +116,7 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  isInAudioMode:{
+  isInAudioModeFromProps:{
     type: Boolean,
     default: false,
   },
@@ -146,7 +146,7 @@ let editor: Editor | null = null;
 const fileMap = new Map<string, any>();
 const recorder = ref();
 const recordTime = ref(0);
-const isInAudioMode = ref(props.isInAudioMode);
+const isInAudioMode = ref(props.isInAudioModeFromProps);
 const isRecording = ref(false);
 let startRecordY = 0;
 const recordCancel = ref(false);
@@ -194,7 +194,7 @@ function focusEditor() {
 }
 
 watch(
-  () => [props.isInAudioMode],
+  () => [props.isInAudioModeFromProps],
   (newValue) => {
     isInAudioMode.value = newValue[0];
   }

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

@@ -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-desk.vue

@@ -130,9 +130,17 @@ export default {
       return props.message && JSONToObject(props.message?.payload?.data);
     });
     const sendTextMessage = async (payload: TextMessagePayload, cloudCustomData?: string) => {
+      let cloudCustomDataFinal = cloudCustomData || '';
+      if (!cloudCustomDataFinal) {
+        cloudCustomDataFinal = JSON.stringify({
+          deskExtInfo: {
+            isPresetContent : 1
+          }
+        });
+      }
       await TUIChatService.sendTextMessage({ 
         payload, 
-        cloudCustomData: cloudCustomData || '',
+        cloudCustomData: cloudCustomDataFinal,
         needReadReceipt: isEnabledMessageReadReceiptGlobal() 
       });
       emit('messageSent');

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-branch/branch-pc.vue

@@ -62,7 +62,10 @@ export default {
               taskID: props.payload.taskInfo?.taskID,
               nodeID: props.payload.taskInfo?.nodeID,
               env: props.payload.taskInfo?.env,
-            }
+            },
+            deskExtInfo: {
+              isPresetContent: 1
+            },
           });
         }
         emit('input-click', branch, cloudCustomData); 

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-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, endQueuing } 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) {
+    endQueuing(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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.6.3",
+  "version": "1.6.6",
   "description": "Vue2/Vue3 UIKit for AI Desk",
   "main": "index",
   "keywords": [

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';
 
@@ -54,7 +53,7 @@ export default class TUICustomerServer {
     this.loginFailToasts = [];
     this.isLoggedIn = false;
     this.loggedInUserID = '';
-    this.myProfile = { avatar: USER_DEFAULT_AVATAR };
+    this.myProfile = {};
   }
 
   static getInstance(): TUICustomerServer {
@@ -144,14 +143,10 @@ export default class TUICustomerServer {
     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) {

package/utils/utils.ts

@@ -376,4 +376,18 @@ export function debounce(func, delay) {
       func.apply(context, args); 
     }, delay);
   }
-}
+}
+
+export function endQueuing(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 });
+};