@tencentcloud/ai-desk-customer-vue 1.7.0 → 1.7.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 1.7.2 @2026.3.30
+
+### Features
+- 优化流式消息展示效果
+
+### Fixed
+- 修复已知问题
+
+## 1.7.1 @2026.3.17
+
+### Features
+- 转人工排队时，新增二次确认。
+- 转人工排队时，支持检测用户离开页面行为。
+
+### Fixed
+- 修复已知问题。
+
 ## 1.7.0 @2026.2.9
 
 ### Features

package/components/CustomerServiceChat/feedback-modal/index.vue

@@ -403,5 +403,8 @@ export default {
 }
 .dialog-title {
   gap: 10px;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
 }
 </style>

package/components/CustomerServiceChat/index-web.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="['tui-chat', !isPC && 'tui-chat-h5']" :key="currentLanguage">
+<div :class="['tui-chat', !isPC && 'tui-chat-h5','ai-desk-customer']" :key="currentLanguage">
     <div
       v-if="currentConversationID && (!props.showQueuePage || queueNumber < 0 || queueNumber === undefined || hasLeftQueue)"
-      :class="['tui-chat', !isPC && 'tui-chat-h5']"
+      :class="['tui-chat', !isPC && 'tui-chat-h5','ai-desk-customer']"
     >
       <ChatHeader
         :class="[
@@ -120,10 +120,11 @@ import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
 import state from '../../utils/state.js';
-import { switchReadStatus,isNonEmptyObject } from '../../utils/utils';
+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';
+import { startHeartbeat, stopHeartbeat, sendHeartbeat } from '../../utils/heartbeat-handler';
 const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
@@ -176,7 +177,8 @@ const currentLanguage = ref('');
 const languageForShowList = ref<Array<string>>([]);
 const feedbackModalRef = ref();
 const showFeedbackModal = ref(false);
-const queueNumber = ref(-1);
+const queueNumber = ref(-1); 
+const queueLeavePageTimeoutEnable = ref(false);
 const hasLeftQueue = ref(false);
 let timezone = '';
 let countryID = '';
@@ -341,7 +343,9 @@ onMounted(() => {
   });
   TUIStore.watch(StoreName.CUSTOM, {
     isQueuing: onIsQueuingUpdate,
+    queueLeavePageTimeoutEnable: onQueueLeavePageTimeoutEnable,
   });
+  document.addEventListener('visibilitychange', handleVisibilityChange);
 });
 
 onUnmounted(() => {
@@ -356,7 +360,10 @@ onUnmounted(() => {
   });
   TUIStore.unwatch(StoreName.CUSTOM, {
     isQueuing: onIsQueuingUpdate,
+    queueLeavePageTimeoutEnable: onQueueLeavePageTimeoutEnable,
   });
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
+  stopHeartbeat();
 });
 
 const isInputToolbarShow = computed<boolean>(() => {
@@ -503,6 +510,27 @@ function onIsQueuingUpdate(data: {conversationID: string, value: number}) {
   if (data && data.conversationID === currentConversationID.value) {
     queueNumber.value = data.value;
     hasLeftQueue.value = false;
+    if (queueNumber.value >= 0) {
+      startHeartbeat();
+    } else {
+      stopHeartbeat();
+    }
+  }
+}
+
+function onQueueLeavePageTimeoutEnable(data: boolean) {
+  queueLeavePageTimeoutEnable.value = data;
+  startHeartbeat();
+}
+
+const handleVisibilityChange = () => {
+  if (document.visibilityState === 'hidden') {
+    if (queueLeavePageTimeoutEnable.value && queueNumber.value >= 0) {
+      sendHeartbeat(currentConversationID.value, "leaveSessionPage");
+    }
+    stopHeartbeat();
+  } else if (document.visibilityState === 'visible') {
+    startHeartbeat();
   }
 }
 

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

@@ -69,6 +69,7 @@ import audioIcon from '../../../assets/audio-blue.svg';
 import keyboardIcon from '../../../assets/keyboard-icon.svg';
 import { INPUT_TOOLBAR_TYPE } from '../../../constant';
 import Log from '../../../utils/logger';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index-web';
 const { ref, onMounted, onBeforeUnmount, computed, onUnmounted } = vue;
 
 const props = defineProps({
@@ -169,14 +170,30 @@ const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
 const sendMessage = async () => {
   const _editorContentList = editor.value?.getEditorContent();
   if (!_editorContentList || !currentConversation.value) return;
+  let hasValidContent = false;
   const editorContentList = _editorContentList.map((editor: any) => {
     if (editor.type === 'text') {
       editor.payload.text = transformTextWithEmojiNamesToKeys(
         editor.payload.text,
       );
+      const isEmptyText = !editor.payload.text || editor.payload.text.trim() === '';
+      if (!isEmptyText) {
+        hasValidContent = true;
+      }
+      return !isEmptyText ? editor : undefined;
     }
+    hasValidContent = true;
     return editor;
-  });
+  }).filter(Boolean);
+  if (!hasValidContent) {
+    editor.value?.resetEditor();
+    Toast({
+      message: TUITranslateService.t('AIDesk.不能发送空白消息'),
+      type: TOAST_TYPE.ERROR,
+      duration: 3000,
+    });
+    return;
+  }
   await sendMessages(editorContentList, currentConversation.value, quoteMessageCloudCustomData);
   // 注意这里不要 emit 'sendMessage'，避免写出死循环
   emit('messageSent');

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

@@ -410,8 +410,9 @@ 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) {
+        } else if (data.src === CUSTOM_MESSAGE_SRC.GET_SETTINGS) {
           TUIStore.update(StoreName.CUSTOM, "feedbackTags", data.content.menu);
+          TUIStore.update(StoreName.CUSTOM, "queueLeavePageTimeoutEnable", data.content.queueLeavePageTimeoutEnable);
         }
       }
     }
@@ -427,7 +428,7 @@ async function onMessageListUpdated(list: IMessageModel[]) {
   const oldLastMessage = currentLastMessage.value;
   let hasEmojiReaction = false;
   allMessageList.value = list;
-
+  
   messageList.value = list.filter((message, index) => {
     if (message.reactionList?.length && !message.isDeleted) {
       hasEmojiReaction = true;

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

@@ -1,5 +1,5 @@
 import {Marked} from 'marked';
-import Log from '../../../../../../utils/logger';
+import { getStyledATagFromText } from '../../../../../../utils/utils';
 import DOMPurify from 'dompurify';
 
 export const marked = new Marked(
@@ -32,19 +32,7 @@ export const marked = new Marked(
       },
       link(this: any, href: string | null, title: string | null, text: string) {
         if (href) {
-          // 匹配以 http:// 或 https:// 开头，所有 URL 主体字符，遇到第一个非主体字符（如中文括号、空格、表情符号等）时停止
-          let ret = href.replace(/&/g, '&').replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (matchedUrl) => {
-            let isURLInText = false;
-            if (matchedUrl !== href) {
-              // 如果 text 里包含 url，我们就用 matchedUrl 作为 a 标签的值；否则用 text 作为值
-              isURLInText = true;
-            }
-            return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${matchedUrl || ''}" title="${title || ''}">${isURLInText ? matchedUrl : text}</a>`;
-          });
-          if (ret === href) {
-            Log.w(`Unable to extract url, href:${href}`);
-          }
-          return ret;
+          return getStyledATagFromText(href, "message-marked_link", undefined, title || text || '');
         }
         return text;
       },
@@ -64,7 +52,7 @@ export const parseMarkdown = (text: string) => {
   if (typeof ret === 'string') {
     const purified = DOMPurify.sanitize(ret,{
       USE_PROFILES: { html: true,},
-      ADD_ATTR: ['onclick'],
+      ADD_ATTR: ['onclick', 'target'],
       FORBID_TAGS: ['style']
     });
     return purified;

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

@@ -74,6 +74,12 @@
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.TRANSFER_TO_HUMAN || payload.src === CUSTOM_MESSAGE_SRC.TRANSFER_TO_TASK_FLOW">
         <MessageTransferWithDesc :payload="payload" />
       </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.QUEUE_CONFIRMATION">
+        <MessageQueueConfirmation 
+          :payload="payload" 
+          @sendMessage="sendCustomMessage"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -95,6 +101,7 @@ import MessageMultiForm from './message-multi-form/index.vue';
 import MessageConcurrencyLimit from "./message-concurrency-limit.vue";
 import MessageOrder from './message-order.vue';
 import MessageTransferWithDesc from './message-transfer-with-desc.vue';
+import MessageQueueConfirmation from './message-queue-confirmation.vue';
 import {
   IMessageModel,
   TUIChatService,
@@ -116,7 +123,8 @@ export default {
     MessageRating,
     MessageConcurrencyLimit,
     MessageOrder,
-    MessageTransferWithDesc
+    MessageTransferWithDesc,
+    MessageQueueConfirmation
   },
   props: {
     message: {

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/input-pc.vue

@@ -63,7 +63,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 input:disabled {
   background-color: #dbdbdb;
   opacity: 0.5;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/form-mobile.vue

@@ -197,7 +197,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../styles/common.scss";
 
 .edit-profile-container {
@@ -382,6 +382,7 @@ export default {
 .dialog-show-content {
   overflow-y: auto;
   max-height: 68vh;
+  padding: 0 20px;
 }
 
 .variable-value-container-mobile {

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-queue-confirmation.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="message-queue-confirmation">
+    <div class="message-queue-confirmation-tip">
+      <span v-for="(part, index) in formattedTips" :key="index">
+      <span v-if="part.isNumber" class="message-queue-confirmation-tip-number">{{ part.content }}</span>
+      <span v-else>{{ part.content }}</span>
+    </span>
+    </div>
+    <div v-if="!props.payload.status && !isConfirmed" class="message-queue-confirmation-button" @click="sendMessage">
+      {{ TUITranslateService.t('AIDesk.确认转人工') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { TUITranslateService } from '../../../../../../@aidesk/uikit-engine';
+import { CUSTOM_MESSAGE_SRC } from '../../../../../../constant';
+import vue from '../../../../../../adapter-vue';
+const { ref, computed } = vue;
+import { customerServicePayloadType } from '../../../../../../interface';
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  emits:['sendMessage'],
+  setup(props: Props, {emit}) {
+    const isConfirmed = ref<boolean>(false);
+    const { transferConfirmTips, waitingQueueLength, sessionId, skillGroupId, transferConfirmId } = props.payload.content;
+    const formattedTips = computed(() => {
+      if (!transferConfirmTips) return [];
+      
+      const parts = transferConfirmTips.split('${WaitNo}');
+      const result: { content: any; isNumber: boolean; }[] = [];
+      
+      parts.forEach((part, index) => {
+        if (part) {
+          result.push({ content: part, isNumber: false });
+        }
+        if (index < parts.length - 1) {
+          result.push({ content: waitingQueueLength, isNumber: true });
+        }
+      });
+      
+      return result;
+    });
+
+    const sendMessage = () => {
+      let data = {
+        data: JSON.stringify({
+          src: CUSTOM_MESSAGE_SRC.QUEUE_CONFIRMATION,
+          content: {
+            sessionId: sessionId,
+            skillGroupId: skillGroupId,
+            transferConfirmId: transferConfirmId,
+          }
+        })
+      };
+      emit('sendMessage', data);
+      isConfirmed.value = true;
+    }
+
+    return {
+      props,
+      formattedTips,
+      isConfirmed,
+      sendMessage,
+      TUITranslateService
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message-queue-confirmation-tip-number {
+  color: #006AF6;
+}
+.message-queue-confirmation-button {
+  color: #006AF6;
+  cursor: pointer;
+  margin-top: 12px;
+  border: 1px solid #adcfff;
+  width: fit-content;
+  padding: 0px 16px;
+  height: 32px;
+  border-radius: 999px;
+  line-height: 32px;
+  background-color: #fff;
+}
+</style>