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

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.7.1 @2026.3.17
+
+### Features
+- 转人工排队时，新增二次确认。
+- 转人工排队时，支持检测用户离开页面行为。
+
+### Fixed
+- 修复已知问题。
+
 ## 1.7.0 @2026.2.9
 
 ### Features

package/components/CustomerServiceChat/index-web.vue

@@ -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 || '');
         }
         return text;
       },

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-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>

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

@@ -29,6 +29,7 @@ import {
   CUSTOM_BASIC_EMOJI_URL_MAPPING,
 } from '../../emoji-config';
 import { isPC } from '../../../../utils/env';
+import { getStyledATagFromText } from '../../../../utils/utils';
 import state from '../../../../utils/state.js';
 const {ref, computed } = vue;
 interface IProps {
@@ -64,10 +65,7 @@ const textMessageData = computed(() => {
             + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey];
         }
       } else if (item.name === 'text' && enableURLDetection.value) {
-        // 开启 url 识别时先移除 html 标签，避免 xss 漏洞
-        item.text = item.text.replace(/<[^>]+>/g, '').replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (url) => {
-          return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="message-text-link" style="color: ${linkColor.value}; text-decoration: underline;">${url}</a>`;
-        }) || '';
+        item.text = getStyledATagFromText(item.text || '', "message-text-link", linkColor.value, '');
       }
     },
   );

package/constant.ts

@@ -37,8 +37,10 @@ export const CUSTOM_MESSAGE_SRC = {
   CONCURRENCY_LIMIT: '36',
   TIMEOUT_WARNING: '37',
   TRANSFER_TO_HUMAN: '39',
-  GET_FEEDBACK_MENU: '42',
+  GET_SETTINGS: '42',
   SEND_FEEDBACK: '43',
+  SEND_HEARTBEAT: '44',
+  QUEUE_CONFIRMATION: '45',
 };
 
 // im message extra type
@@ -149,6 +151,12 @@ export const WHITE_LIST = [
   CUSTOM_MESSAGE_SRC.TIMEOUT_WARNING,
   CUSTOM_MESSAGE_SRC.TRANSFER_TO_TASK_FLOW,
   CUSTOM_MESSAGE_SRC.TRANSFER_TO_HUMAN,
+  CUSTOM_MESSAGE_SRC.QUEUE_CONFIRMATION,
+];
+
+export const SHOW_IF_FLOW_IN = [
+  CUSTOM_MESSAGE_SRC.MULTI_FORM,
+  CUSTOM_MESSAGE_SRC.QUEUE_CONFIRMATION,
 ];
 
 export const TOOLBAR_BUTTON_TYPE = {

package/locales/en/aidesk.ts

@@ -40,5 +40,7 @@ const AIDesk = {
   "当前前方排队人数": "Queue Position",
   "结束排队": "Leave Queue",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "Once a review has been submitted for more than 3 minutes, it cannot be modified.",
+  "不能发送空白消息": "Unable to send blank message",
+  "确认转人工": "Confirm transfer to agent",
 }
 export default AIDesk;

package/locales/es/aidesk.ts

@@ -40,5 +40,7 @@ const AIDesk = {
   "当前前方排队人数": "Posición en la cola",
   "结束排队": "Salir de la cola",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "Una valoración enviada hace más de 3 minutos no puede modificarse.",
+  "不能发送空白消息": "No se puede enviar un mensaje vacío",
+  "确认转人工": "Confirmar transferencia a agente",
 }
 export default AIDesk;

package/locales/fil/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "Bilang ng mga tao sa unahan sa pila",
   "结束排队": "Umalis sa pila",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "Kapag lumipas na ang 3 minuto mula sa pagsusumite ng review, hindi na ito mababago.",
+  "不能发送空白消息": "Hindi maaaring magpadala ng blangkong mensahe",
+  "确认转人工": "Kumpirmahin ang paglipat sa ahente",
 }
 export default AIDesk;

package/locales/id/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "Jumlah orang di depan antrian saat ini",
   "结束排队": "Keluar dari antrian",
 	"评价提交超过3分钟，无法更改。感谢您的反馈！": "Ulasan yang dikirim lebih dari 3 menit tidak dapat diubah.",
+	"不能发送空白消息": "Tidak dapat mengirim pesan kosong",
+	"确认转人工": "Konfirmasi transfer ke agen",
 }
 export default AIDesk;

package/locales/ja/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "現在の前方待機人数",
   "结束排队": "待機を終了する",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "レビューは投稿から3分経過すると変更できません。",
+  "不能发送空白消息": "空白のメッセージは送信できません",
+  "确认转人工": "人工サービスに転送する",
 }
 export default AIDesk;

package/locales/ko/aidesk.ts

@@ -40,5 +40,7 @@ const AIDesk = {
   "当前前方排队人数": "현재 대기 인원",
   "结束排队": "대기 취소",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "리뷰는 제출 후 3분이 지나면 수정할 수 없습니다.",
+  "不能发送空白消息": "빈 메시지를 보낼 수 없습니다",
+  "确认转人工": "상담사 연결",
 }
 export default AIDesk;

package/locales/ms/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "Bilangan orang di hadapan dalam barisan sekarang",
   "结束排队": "Tinggalkan barisan",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "Ulasan yang dihantar lebih dari 3 minit tidak boleh diubah.",
+  "不能发送空白消息": "Tidak dapat menghantar mesej kosong",
+  "确认转人工": "Sahkan pindah kepada ejen",
 }
 export default AIDesk;

package/locales/ru/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "Текущее количество человек впереди в очереди",
   "结束排队": "Выйти из очереди",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "Отзыв нельзя изменить после истечения 3 минут с момента отправки.",
+  "不能发送空白消息": "Невозможно отправить пустое сообщение",
+  "确认转人工": "Подтвердить перевод на оператора",
 }
 export default AIDesk;

package/locales/th/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "จำนวนผู้รอคิวด้านหน้าในขณะนี้",
   "结束排队": "ออกจากคิว",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "รีวิวที่ส่งไปแล้วเกิน 3 นาทีจะไม่สามารถแก้ไขได้",
+  "不能发送空白消息": "ไม่สามารถส่งข้อความว่างได้",
+  "确认转人工": "ยืนยันการโอนย้ายไปยังเจ้าหน้าที่",
 }
 export default AIDesk;

package/locales/vi/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "Số người đang chờ trước bạn trong hàng",
   "结束排队": "Rời khỏi hàng",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "Đánh giá sau khi gửi hơn 3 phút sẽ không thể chỉnh sửa.",
+  "不能发送空白消息": "Không thể gửi tin nhắn trống",
+  "确认转人工": "Xác nhận chuyển tiếp sang nhân viên",
 }
 export default AIDesk;

package/locales/zh_cn/aidesk.ts

@@ -40,5 +40,7 @@ const AIDesk = {
   "当前前方排队人数": "当前前方排队人数",
   "结束排队": "结束排队",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "评价提交超过3分钟，无法更改。感谢您的反馈！",
+  "不能发送空白消息": "不能发送空白消息",
+  "确认转人工": "确认转人工",
 }
 export default AIDesk;

package/locales/zh_tw/aidesk.ts

@@ -39,5 +39,7 @@ const AIDesk = {
   "当前前方排队人数": "目前前方排隊人數",
   "结束排队": "結束排隊",
   "评价提交超过3分钟，无法更改。感谢您的反馈！": "評價提交超過3分鐘，無法更改。感謝您的反饋！",
+  "不能发送空白消息": "不能發送空白訊息",
+  "确认转人工": "確認轉人工",
 }
 export default AIDesk;

package/package.json

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

package/utils/heartbeat-handler.ts

@@ -0,0 +1,65 @@
+import { CUSTOM_MESSAGE_SRC } from "../constant";
+import TUIChatEngine, { TUIStore, StoreName, TUIChatService } from "../@aidesk/uikit-engine";
+
+let heartbeatTimer: ReturnType<typeof setTimeout> | null = null;
+let isHeartbeatRunning = false;
+let currentConversationID = TUIStore.getData(StoreName.CONV, 'currentConversationID');
+const HEARTBEAT_INTERVAL = 30000; // 30 秒
+
+// 在人工排队时发送心跳
+export async function sendHeartbeat(conversationID: string, eventName: string) {
+  await TUIChatService.sendCustomMessage({
+    to: conversationID.slice(3),
+    conversationType: TUIChatEngine.TYPES.CONV_C2C,
+    payload: {
+      data: JSON.stringify({
+        customerServicePlugin: 0,
+        src: CUSTOM_MESSAGE_SRC.SEND_HEARTBEAT,
+        userClientEvent: {
+          event: eventName,
+        },
+      }),
+    },
+    needReadReceipt: false,
+  },{ onlineUserOnly: true });
+}
+
+function canSendHeartbeat() {
+  const isQueuing = TUIStore.getData(StoreName.CUSTOM, 'isQueuing');
+  const queueLeavePageTimeoutEnable = TUIStore.getData(StoreName.CUSTOM, 'queueLeavePageTimeoutEnable');
+  currentConversationID = TUIStore.getData(StoreName.CONV, 'currentConversationID');
+  const queueNumber = isQueuing && isQueuing.conversationID === currentConversationID ? isQueuing.value : -1;
+  if (queueNumber < 0 || !queueLeavePageTimeoutEnable || !currentConversationID) {
+    return false;
+  }
+  return true;
+}
+
+export function startHeartbeat() {
+  if (!canSendHeartbeat() || isHeartbeatRunning) {
+    stopHeartbeat();
+    return;
+  }
+
+  isHeartbeatRunning = true;
+  (async function loop() {
+    if (!canSendHeartbeat() || !isHeartbeatRunning) {
+      stopHeartbeat();
+      return;
+    }
+    await sendHeartbeat(currentConversationID, "sessionPageHeartbeat");
+
+    heartbeatTimer = setTimeout(() => {
+      heartbeatTimer = null;
+      loop();
+    }, HEARTBEAT_INTERVAL);
+  })();
+}
+
+export function stopHeartbeat() {
+  if (heartbeatTimer !== null) {
+    clearTimeout(heartbeatTimer!);
+    heartbeatTimer = null;
+  }
+  isHeartbeatRunning = false; 
+}

package/utils/index.ts

@@ -1,5 +1,5 @@
 import { customerServicePayloadType } from '../interface';
-import { CUSTOM_MESSAGE_SRC, TYPES, WHITE_LIST } from '../constant';
+import { CUSTOM_MESSAGE_SRC, SHOW_IF_FLOW_IN, TYPES, WHITE_LIST } from '../constant';
 import { IMessageModel } from '../@aidesk/uikit-engine';
 
 // Determine if it is a JSON string
@@ -71,9 +71,9 @@ export const isMessageInvisible = (message: IMessageModel): boolean => {
   const isCustomerMessage = message?.type === TYPES.MSG_CUSTOM;
   const isGroupTipMessage = message?.type === TYPES.MSG_GROUP_TIP;
   const isCustomerInvisible = customerServicePayload?.src && !WHITE_LIST.includes(customerServicePayload?.src);
-  const isMultiFormMessage: boolean = customerServicePayload?.src !== null && customerServicePayload?.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow === 'out';
+  const isShowIfFlowInMessage: boolean = customerServicePayload?.src !== null && SHOW_IF_FLOW_IN.includes(customerServicePayload?.src as string) && message.flow === 'out';
   const isRobot = customerServicePayload?.src === CUSTOM_MESSAGE_SRC.ROBOT && robotCommandArray.indexOf(customerServicePayload?.content?.command) !== -1;
-  return (isCustomerMessage && (isCustomerInvisible || isRobot || isMultiFormMessage)) || isGroupTipMessage;
+  return (isCustomerMessage && (isCustomerInvisible || isRobot || isShowIfFlowInMessage)) || isGroupTipMessage;
 };
 
 // 如果用户选择 block cookies，此时访问 localStorage 浏览器会抛错

package/utils/utils.ts

@@ -420,4 +420,32 @@ export function throttle(
       func.apply(this, args);
     }
   };
+}
+
+export function getStyledATagFromText(text, className, linkColor, title) {
+  // 开启 url 识别时先移除 html 标签，避免 xss 漏洞
+  // 预处理文本：移除换行符和制表符
+  const preprocessedText = text.replace(/[\n\t]/g, '').trim();
+
+  // 先移除HTML标签避免XSS漏洞
+  const sanitizedText = preprocessedText.replace(/<[^>]+>/g, '');
+
+  // 匹配URL：从http://或https://开始，匹配尽可能长的有效URL字符序列
+  // 包括：字母数字、-._~:/?#[]@!$&'()*+,;=% 等URL允许的字符
+  const ret = sanitizedText.replace(/https?:\/\/[\w\-._~:/?#\[\]@!$&'()*+,;=%]+/g, (matchedUrl) => {
+    // 检查URL是否包含中文字符，如果包含则跳过处理
+    const chineseRegex = /[\u4e00-\u9fff]/;
+    if (chineseRegex.test(matchedUrl)) {
+      return matchedUrl; // 不处理包含中文的URL
+    }
+
+    let isURLInText = false;
+    if (matchedUrl !== preprocessedText) {
+      // 如果 text 里包含 url，我们就用 matchedUrl 作为 a 标签的值；否则用 text 作为值
+      isURLInText = true;
+    }
+    const encodedUrl = encodeURI(matchedUrl);
+    return `<a target="_blank" rel="noreferrer noopener" class="${className}" style="color:${linkColor}; text-decoration:underline" href="${encodedUrl}" title="${title || ''}">${isURLInText ? matchedUrl : text}</a>`;
+  });
+  return ret;
 }