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

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 1.6.3 @2025.11.13
+
+### Features
+- 转人工排队阶段支持展示排队信息，提升用户体验。
+- 转人工成功后支持展示人工客服的昵称和头像。
+- 优化 markdown 图片尺寸。
+
+### Fixed
+- 没有消息时显示查看更多。
+- 流式消息的字体跟主字体不一致的问题。
+
 ## 1.6.2 @2025.10.30
 
 ### Features

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

@@ -0,0 +1,138 @@
+<template>
+  <div class="customer-queue">
+    <div class="customer-queue-header">
+      {{ TUITranslateService.t("AIDesk.排队等待中") }}...
+    </div>
+    <div class="customer-queue-info">
+      {{ TUITranslateService.t("AIDesk.排队等待话术") }}
+    </div>
+    <div class="customer-queue-container">
+      <div class="customer-queue-content-title">
+        {{ TUITranslateService.t("AIDesk.当前前方排队人数") }}
+      </div>
+      <div class="customer-queue-content-number">
+        {{ props.queueNumber }}
+      </div>
+    </div>
+    <div class="customer-queue-end-button">
+      <div :class="['customer-queue-end-button-content', isClicked ? 'button-clicked' : '']" @click="endQueuing">
+        {{ TUITranslateService.t("AIDesk.结束排队") }}
+      </div>
+    </div>
+  </div>
+</template>
+<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';
+const currentConversation = ref<IConversationModel>();
+const isClicked = ref(false);
+const props = defineProps({
+  queueNumber: {
+    type: Number,
+    default: 0
+  },
+});
+onMounted(() => {
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversation: onCurrentConversationUpdate,
+  });
+});
+
+const onCurrentConversationUpdate = (conversation: IConversationModel) => {
+  currentConversation.value = conversation;
+};
+
+const endQueuing = () => {
+  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 });
+}
+</script>
+<style lang="scss">
+.customer-queue {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.customer-queue-header {
+  height: 52px;
+  background-color: #1C66E5;
+  color: white;
+  line-height: 52px;
+  padding-left: 20px;
+}
+.customer-queue-info {
+  padding: 20px;
+  color: #666;
+}
+.customer-queue-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;    
+  justify-content: center;
+  color: #1C66E5;
+}
+
+.customer-queue-content-title {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.customer-queue-content-number {
+  font-size: 40px;
+  font-weight: bold;
+}
+.customer-queue-end-button {
+  color: white;
+  padding: 8px 23px;
+  border-radius: 10px;
+}
+.customer-queue-end-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  &-content {
+    background: #1c66e5;
+    color: white;
+    padding: 8px 23px;
+    border-radius: 10px;
+    width: fit-content;
+    min-width: 70px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+  }
+}
+.button-clicked {
+  cursor: default;
+  background: #cccccc;
+  color: #666666;
+}
+</style>

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"
+      v-if="currentConversationID && (!props.showQueuePage || queueNumber < 0 || queueNumber === undefined)"
       :class="['tui-chat', !isPC && 'tui-chat-h5']"
     >
       <ChatHeader
@@ -94,6 +94,9 @@
           @close="() => { showFeedbackModal = false }"
         />
     </div>
+    <div v-if="props.showQueuePage && queueNumber >= 0" :class="['tui-chat', !isPC && 'tui-chat-h5']">
+      <CustomerQueuePage :queueNumber="queueNumber"/>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -122,6 +125,7 @@ import state from '../../utils/state.js';
 import { switchReadStatus,isNonEmptyObject } from '../../utils/utils';
 import { getCountryForTimezone } from 'countries-and-timezones';
 import FeedbackModal from './feedback-modal/index.vue';
+import CustomerQueuePage from './customer-queue-page/index.vue';
 const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
@@ -134,12 +138,13 @@ interface IProps {
   toolbarButtonList?: ToolbarButtonModel[];
   showAvatar?: number;
   robotAvatar?: string;
-  staffAvatar?: string;
+  memberAvatar?: string;
   userAvatar?: string;
   showNickName?: number;
   robotNickName?: string;
-  staffNickName?: string;
+  memberNickName?: string;
   userNickName?: string;
+  enableUnifiedMemberProfile?: number;
   inputToolbarList?: InputToolbarModel[];
   showReadStatus?: number;
   showTyping?: number;
@@ -151,6 +156,7 @@ interface IProps {
   enableURLDetection?: number;
   headerConfig?: IHeaderConfig;
   enableSendingAudio?: number;
+  showQueuePage?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -170,6 +176,7 @@ const currentLanguage = ref('');
 const languageForShowList = ref<Array<string>>([]);
 const feedbackModalRef = ref();
 const showFeedbackModal = ref(false);
+const queueNumber = ref(-1);
 let timezone = '';
 let countryID = '';
 const props = withDefaults(defineProps<IProps>(), {
@@ -182,12 +189,13 @@ const props = withDefaults(defineProps<IProps>(), {
   showReadStatus: 1,
   showAvatar: 1,
   robotAvatar: '',
-  staffAvatar: '',
+  memberAvatar: '',
   userAvatar: '',
   showNickName: 0,
   robotNickName: '',
-  staffNickName: '',
+  memberNickName: '',
   userNickName: '',
+  enableUnifiedMemberProfile: 1,
   showTyping: 0,
   enableMultilingual: 0,
   enableFeedback: 0,
@@ -195,6 +203,7 @@ const props = withDefaults(defineProps<IProps>(), {
   langList: () => [],
   enableURLDetection: 0,
   enableSendingAudio: 0,
+  showQueuePage: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -290,11 +299,12 @@ const setAvatarNickName = () => {
     showAvatar: props.showAvatar,
     showNickName: props.showNickName,
     userAvatar: props.userAvatar,
-    staffAvatar: props.staffAvatar,
+    memberAvatar: props.memberAvatar,
     robotAvatar: props.robotAvatar,
     userNickName: props.userNickName,
-    staffNickName: props.staffNickName,
+    memberNickName: props.memberNickName,
     robotNickName: props.robotNickName,
+    enableUnifiedMemberProfile: props.enableUnifiedMemberProfile,
   });
 }
 
@@ -346,6 +356,9 @@ onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     quoteMessage: onQuoteMessageUpdated,
   });
+  TUIStore.watch(StoreName.CUSTOM, {
+    isQueuing: onIsQueuingUpdate,
+  });
 });
 
 onUnmounted(() => {
@@ -358,6 +371,9 @@ onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     quoteMessage: onQuoteMessageUpdated,
   });
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isQueuing: onIsQueuingUpdate,
+  });
 });
 
 const isInputToolbarShow = computed<boolean>(() => {
@@ -501,6 +517,12 @@ function onDislike(messageInfo: Object) {
   showFeedbackModal.value = true;
   feedbackModalRef.value.onDislike(messageInfo);
 }
+
+function onIsQueuingUpdate(data: {conversationID: string, value: number}) {
+  if (data && data.conversationID === currentConversationID.value) {
+    queueNumber.value = data.value;
+  }
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

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

@@ -16,7 +16,7 @@
         @click="onMessageListBackgroundClick"
       >
         <p
-          v-if="!isCompleted"
+          v-if="!isCompleted && messageList && messageList.length"
           class="message-more"
           @click="getHistoryMessageList"
         >
@@ -382,6 +382,11 @@ function onNewMessageList(list: IMessageModel[]) {
         } else if (data.src === CUSTOM_MESSAGE_SRC.SEAT_STATUS) {
           updateCustomStore("canEndConversation", { conversationID, value: true });
           if (data.content.command === "updateSeatStatus") {
+            if (data.content.content === 'queuing') {
+              updateCustomStore("isQueuing", { conversationID, value: data.content.waitingQueueLength });
+            } else if (data.content.content !== 'WaitingForAgentAnswering') {
+              updateCustomStore("isQueuing", { conversationID, value: -1 });
+            }
             if (data.content.content === 'inSeat') {
               updateCustomStore("isInHumanService", { conversationID, value: true });
             } else if (data.content.content === 'outSeat') {
@@ -396,6 +401,7 @@ function onNewMessageList(list: IMessageModel[]) {
           }
         } else if (data.src === CUSTOM_MESSAGE_SRC.NO_SEAT_ONLINE || data.src === CUSTOM_MESSAGE_SRC.TIMEOUT || data.src === CUSTOM_MESSAGE_SRC.END) {
           updateCustomStore("canEndConversation", { conversationID, value: false });
+          updateCustomStore("isQueuing", { conversationID, value: -1 });
         } else if (data.src === CUSTOM_MESSAGE_SRC.GET_FEEDBACK_MENU) {
           TUIStore.update(StoreName.CUSTOM, "feedbackTags", data.content.menu);
         }

package/components/CustomerServiceChat/message-list/message-elements/message-bubble-web.vue

@@ -207,13 +207,24 @@ const {
   showAvatar,
   showNickName,
   robotAvatar,
-  staffAvatar,
+  memberAvatar,
   userAvatar,
   robotNickName,
-  staffNickName,
+  memberNickName,
   userNickName,
+  enableUnifiedMemberProfile,
 } = state.get('avatarNickName');
 let prevStatus = ReadState.Unread;
+
+const getCloudCustomData = () => {
+  try {
+    return JSONToObject(message.value.cloudCustomData);
+  } catch (e) {
+    return {};
+  }
+};
+let cloudCustomData = getCloudCustomData();
+
 const isDisplayUnplayMark = computed<boolean>(() => {
   return (
     message.value.flow === 'in'
@@ -252,22 +263,23 @@ const computedShowAINote = computed(() => {
   return props.enableAINote === 1 && (state.get('currentLanguage') === 'zh' || state.get('currentLanguage') === 'en') && canShowAINote(message.value.cloudCustomData);
 });
 
-function isFromRobot(cloudCustomData: string) {
-  try {
-    const jsonObj = JSONToObject(cloudCustomData);
-    return jsonObj.hasOwnProperty("role") && jsonObj.role === "robot";
-  } catch (e) {
-    return false;
-  }
+function isFromSeat() {
+  return cloudCustomData.hasOwnProperty("role") && cloudCustomData.role === "seat";
 }
 
 const avatarUrl = computed(() => {
   let url = '';
   if (message.value.flow === 'in') {
-    if (isFromRobot(message.value.cloudCustomData)) {
-      url = robotAvatar || message.value.avatar;
+    if (isFromSeat()) {
+      if (enableUnifiedMemberProfile) {
+        url = memberAvatar || message.value.avatar;
+      } else if (cloudCustomData.memberInfo && cloudCustomData.memberInfo.memberAvatar) {
+        url = cloudCustomData.memberInfo.memberAvatar
+      } else {
+        url = message.value.avatar;
+      }
     } else {
-      url = staffAvatar || message.value.avatar;
+      url = robotAvatar || message.value.avatar;
     }
   } else {
     url = userAvatar || message.value.avatar || '';
@@ -278,10 +290,16 @@ const avatarUrl = computed(() => {
 const nickName = computed(() => {
   let nick = '';
   if (message.value.flow === 'in') {
-    if (isFromRobot(message.value.cloudCustomData)) {
-      nick = robotNickName || props.content.showName;
+    if (isFromSeat()) {
+      if (enableUnifiedMemberProfile) {
+        nick = memberNickName || props.content.showName;
+      } else if (cloudCustomData.memberInfo && cloudCustomData.memberInfo.memberNickName) {
+        nick = cloudCustomData.memberInfo.memberNickName;
+      } else {
+        nick = props.content.showName;
+      }
     } else {
-      nick = staffNickName || props.content.showName;
+      nick = robotNickName || props.content.showName;
     }
   } else {
     nick = userNickName || props.content.showName;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/marked.ts

@@ -11,7 +11,7 @@ export const marked = new Marked(
           class="image-container"
           onclick="onMarkdownImageClicked('${safeHref}')"
           style="cursor:pointer;" >
-            <img src="${href}" alt="${text}" onload="onMarkdownMediaLoad()"/>
+            <img src="${href}" alt="${text}" onload="onMarkdownMediaLoad()" style="max-width: 100%; height: auto; max-height: 300px; object-fit: contain; margin: 8px 0;"/>
           </div>
         `;
       },

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

@@ -146,6 +146,7 @@ const closeImage = () => {
 
 </script>
 <style lang="scss" scoped>
+@import "../../../../style/common.scss";
 .message-stream {
   overflow-wrap: break-word;
   word-break: normal;

package/locales/en/aidesk.ts

@@ -35,5 +35,9 @@ const AIDesk = {
   "userID 长度不能超过45字节": "The length of the userID cannot exceed 45 bytes",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "We appreciate your feedback. Please share any suggestions to help us improve.",
   "该回复由AI生成，内容仅供参考": "AI-Generated Content",
+  "排队等待中": "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"
 }
 export default AIDesk;

package/locales/fil/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "Ang UserID ay hindi dapat maglaman ng 'administrator'",
   "userID 长度不能超过45字节": "Ang haba ng UserID ay hindi dapat lumampas sa 45 bytes",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "Pinahahalagahan namin ang iyong feedback. Mangyaring ibahagi ang anumang mga mungkahi upang matulungan kaming mapabuti.",
+  "排队等待中": "Nasa pila na",
+  "排队等待话术": "Paumanhin, puno na ang aming mga customer service. Mangyaring maghintay nang matiisin, tutulungan ka namin agad. Salamat sa iyong pag-unawa.",
+  "当前前方排队人数": "Bilang ng mga tao sa unahan sa pila",
+  "结束排队": "Umalis sa pila",
 }
 export default AIDesk;

package/locales/id/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "UserID tidak boleh mengandung 'administrator'",
   "userID 长度不能超过45字节": "Panjang UserID tidak boleh melebihi 45 byte",
 	"我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "Kami menghargai masukan Anda. Silakan bagikan saran apa pun untuk membantu kami meningkatkan layanan.",
+	"排队等待中": "Sedang antre",
+  "排队等待话术": "Mohon maaf, seluruh customer service kami sedang sibuk. Silakan tunggu dengan sabar, kami akan segera membantu Anda. Terima kasih atas pengertiannya.",
+  "当前前方排队人数": "Jumlah orang di depan antrian saat ini",
+  "结束排队": "Keluar dari antrian",
 }
 export default AIDesk;

package/locales/ja/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "UserIDに'administrator'を含めることはできません",
   "userID 长度不能超过45字节": "UserIDの長さは45バイトを超えてはいけません",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "皆様からのフィードバックをお待ちしております。改善に役立つご提案がございましたら、ぜひお聞かせください。",
+  "排队等待中": "ただいま待機中",
+  "排队等待话术": "申し訳ございません、現在すべてのカスタマーサービスが対応中です。しばらくお待ちください。ご理解いただきありがとうございます。",
+  "当前前方排队人数": "現在の前方待機人数",
+  "结束排队": "待機を終了する",
 }
 export default AIDesk;

package/locales/ms/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "UserID tidak boleh mengandung 'administrator'",
   "userID 长度不能超过45字节": "Panjang UserID tidak boleh melebihi 45 bait",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "Kami menghargai maklum balas anda. Sila kongsi sebarang cadangan untuk membantu kami menambah baik.",
+  "排队等待中": "Sedang beratur",
+  "排队等待话术": "Maaf, semua wakil khidmat pelanggan kami sedang sibuk. Sila tunggu sebentar, kami akan membantu anda tidak lama lagi. Terima kasih atas pemahaman anda.",
+  "当前前方排队人数": "Bilangan orang di hadapan dalam barisan sekarang",
+  "结束排队": "Tinggalkan barisan",
 }
 export default AIDesk;

package/locales/ru/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "UserID не должен содержать 'administrator'",
   "userID 长度不能超过45字节": "Длина UserID не должна превышать 45 байт",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "Мы ценим ваши отзывы. Пожалуйста, поделитесь предложениями, которые помогут нам стать лучше.",
+  "排队等待中": "В ожидании в очереди",
+  "排队等待话术": "Извините, все наши операторы сейчас заняты. Пожалуйста, ожидайте, мы скоро будем с вами. Благодарим за понимание.",
+  "当前前方排队人数": "Текущее количество человек впереди в очереди",
+  "结束排队": "Выйти из очереди",
 }
 export default AIDesk;

package/locales/th/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "UserID ห้ามมี 'administrator'",
   "userID 长度不能超过45字节": "ความยาว UserID ต้องไม่เกิน 45 ไบต์",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "เราขอขอบคุณสำหรับความคิดเห็นของคุณ โปรดแบ่งปันข้อเสนอแนะใดๆ เพื่อช่วยเราปรับปรุง",
+  "排队等待中": "กำลังรอคิว",
+  "排队等待话术": "ขออภัย เจ้าหน้าที่ให้บริการลูกค้าทุกคนกำลังให้บริการเต็มประสิทธิภาพ กรุณารอคอยอย่างอดทน เราจะให้บริการคุณในไม่ช้า ขอบคุณสำหรับความเข้าใจ",
+  "当前前方排队人数": "จำนวนผู้รอคิวด้านหน้าในขณะนี้",
+  "结束排队": "ออกจากคิว",
 }
 export default AIDesk;

package/locales/vi/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "UserID không được chứa 'administrator'",
   "userID 长度不能超过45字节": "Độ dài UserID không được vượt quá 45 byte",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "Chúng tôi rất cảm kích phản hồi của bạn. Vui lòng chia sẻ bất kỳ đề xuất nào để giúp chúng tôi cải thiện.",
+  "排队等待中": "Đang chờ trong hàng",
+  "排队等待话术": "Xin lỗi, tất cả nhân viên chăm sóc khách hàng hiện đang bận. Vui lòng chờ đợi, chúng tôi sẽ phục vụ bạn sớm nhất có thể. Cảm ơn bạn đã thông cảm.",
+  "当前前方排队人数": "Số người đang chờ trước bạn trong hàng",
+  "结束排队": "Rời khỏi hàng",
 }
 export default AIDesk;

package/locales/zh_cn/aidesk.ts

@@ -35,5 +35,9 @@ const AIDesk = {
   "userID 长度不能超过45字节": "userID 长度不能超过45字节",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？",
   "该回复由AI生成，内容仅供参考": "该回复由AI生成，内容仅供参考",
+  "排队等待中": "排队等待中",
+  "排队等待话术": "抱歉，当前所有人工客服已达到服务上限，请耐心等待，我们很快就来接待您，感谢您的理解。",
+  "当前前方排队人数": "当前前方排队人数",
+  "结束排队": "结束排队",
 }
 export default AIDesk;

package/locales/zh_tw/aidesk.ts

@@ -34,5 +34,9 @@ const AIDesk = {
   "userID 不能包含'administrator'": "userID 不能包含'administrator'",
   "userID 长度不能超过45字节": "userID 長度不能超過45位元組",
   "我们想知道你对此回答不满意的原因，你认为更好的回答是什么？": "我們想知道你對此回答不滿意的原因，你認為更好的答案是什麼?",
+  "排队等待中": "排隊等待中",
+  "排队等待话术": "抱歉，目前所有人工客服已達到服務上限，請耐心等待，我們很快就來接待您，感謝您的理解。",
+  "当前前方排队人数": "目前前方排隊人數",
+  "结束排队": "結束排隊",
 }
 export default AIDesk;

package/package.json

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

package/utils/utils.ts

@@ -361,7 +361,7 @@ export function validateUserID(userID: string) {
   return ret;
 }
 
-export function updateCustomStore(key: string, data: {conversationID: string, value: boolean}) {
+export function updateCustomStore(key: string, data: {conversationID: string, value: any}) {
   TUIStore.update(StoreName.CUSTOM, key, data);
 }