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

package/components/CustomerServiceChat/style/common.scss

@@ -1,63 +1,66 @@
-body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
-  margin:0;
-  padding:0;
-  font-style:normal;
-
-  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
-}
-
-ol, ul, li {
-  list-style:none;
-}
-
-img {
-  border:0;
-  vertical-align:middle;
-  pointer-events:none;
-}
-
-body {
-  color:#000;
-  background:#FFF;
-}
-
-.clear {
-  clear:both;
-  height:1px;
-  width:100%;
-  overflow:hidden;
-  margin-top:-1px;
-}
-
-a {
-  color:#000;
-  text-decoration:none;
-  cursor: pointer;
-}
-
-a:hover {
-  text-decoration:none;
-}
-
-input, textarea {
-  user-select: auto;
-}
-
-input:focus, input:active, textarea:focus, textarea:active {
-  outline: none;
-}
-
-.chat-aside {
-  position: absolute;
-  top: 50px;
-  right: 0;
-  box-sizing: border-box;
-  width: 360px !important;
-  border-radius: 8px 0 0 8px;
-  z-index: 9999;
-  max-height: calc(100% - 50px);
-}
-
-pre, button, input, select, textarea { 
-  font-family: inherit;
+.ai-desk-customer {
+  :where(ul, ol, li) {
+    margin: 0;
+    padding: 0;
+    font-style: normal;
+    list-style: none;
+  }
+
+  :where(dt, dd, dl, h1, h2, h3, h4, p) {
+    margin: 0;
+    padding: 0;
+    font-style: normal;
+  }
+
+  :where(img) {
+    border:0;
+    vertical-align:middle;
+    pointer-events:none;
+  }
+
+  :where(body) {
+    color:#000;
+    background:#FFF;
+  }
+
+  .clear {
+    clear:both;
+    height:1px;
+    width:100%;
+    overflow:hidden;
+    margin-top:-1px;
+  }
+
+  :where(a) {
+    color:#000;
+    text-decoration:none;
+    cursor: pointer;
+  }
+
+  :where(a:hover) {
+    text-decoration:none;
+  }
+
+  :where(input, textarea) {
+    user-select: auto;
+  }
+
+  :where(input:focus, input:active, textarea:focus, textarea:active) {
+    outline: none;
+  }
+
+  .chat-aside {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    box-sizing: border-box;
+    width: 360px !important;
+    border-radius: 8px 0 0 8px;
+    z-index: 9999;
+    max-height: calc(100% - 50px);
+  }
+
+  :where(pre, button, input, select, textarea) { 
+    font-family: inherit;
+  }
 }

package/components/common/common.scss

@@ -1,50 +1,52 @@
-body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
-  margin:0;
-  padding:0;
-  font-style:normal;
-
-  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
-}
-
-ol, ul, li {
-  list-style:none;
-}
-
-img {
-  border:0;
-  vertical-align:middle;
-  pointer-events:none;
-}
-
-body {
-  color:#000;
-  background:#FFF;
-}
-
-.clear {
-  clear:both;
-  height:1px;
-  width:100%;
-  overflow:hidden;
-  margin-top:-1px;
-}
-
-a {
-  color:#000;
-  text-decoration:none;
-  cursor: pointer;
-}
-
-a:hover {
-  text-decoration:none;
-}
-
-input, textarea {
-  user-select: auto;
-}
-
-input:focus, input:active, textarea:focus, textarea:active {
-  outline: none;
+.ai-desk-customer {
+  :where(body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p) {
+    margin:0;
+    padding:0;
+    font-style:normal;
+
+    /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
+  }
+
+  :where(ol, ul, li) {
+    list-style:none;
+  }
+
+  :where(img) {
+    border:0;
+    vertical-align:middle;
+    pointer-events:none;
+  }
+
+  :where(body) {
+    color:#000;
+    background:#FFF;
+  }
+
+  .clear {
+    clear:both;
+    height:1px;
+    width:100%;
+    overflow:hidden;
+    margin-top:-1px;
+  }
+
+  :where(a) {
+    color:#000;
+    text-decoration:none;
+    cursor: pointer;
+  }
+
+  :where(a:hover) {
+    text-decoration:none;
+  }
+
+  :where(input, textarea) {
+    user-select: auto;
+  }
+
+  :where(input:focus, input:active, textarea:focus, textarea:active) {
+    outline: none;
+  }
 }
 
 .chat-aside {

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.2",
   "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,27 @@ 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
+    }
+
+    const encodedUrl = encodeURI(matchedUrl);
+    return `<a target="_blank" rel="noreferrer noopener" class="${className}" style="color:${linkColor}; text-decoration:underline" href="${encodedUrl}" title="${title || ''}">${title ? title : matchedUrl}</a>`;
+  });
+  return ret;
 }