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

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

@@ -548,8 +548,21 @@ const onCurrentConversationIDUpdated = (conversationID: string) => {
     // Synchronize storage about whether the audio has been played when converstaion switched
     chatStorage.setChatStorage('audioPlayedMapping', audioPlayedMapping.value);
   }
+  preloadEmoji();
 };
 
+const preloadEmoji = () => {
+  setTimeout(() => {
+    let url;
+    let img;
+    for (let i = 0; i <= 61; i++) {
+      url = `https://web.sdk.qcloud.com/im/assets/emoji-plugin/emoji_${i}@2x.png`;
+      img = new Image();
+      img.src = url;
+    }
+  }, 0);
+}
+
 const getHistoryMessageList = () => {
   TUIChatService.getMessageList().then((res: any) => {
     const { nextReqMessageID: ID } = res.data;

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

@@ -9,24 +9,22 @@
     @click.stop="play"
   >
     <div class="audio-icon-container">
-      <!-- <div :class="{ mask: true, play: isAudioPlaying }" /> -->
       <Icon
         :class="{icon:true,play: isAudioPlaying}"
         width="16px"
-        height="20px"
-        :file="audioIcon"
-        
+        height="16px"
+        :file="currentAudioIcon"
       />
     </div>
     <span
       class="time"
-      :style="{ width: `${data.second * 10 + 20}px` }"
+      :style="{ width: `${data.second * 2 + 20}px` }"
     >
-      {{ data.second || 1 }} "
+      {{ data.second || 1 }}"
     </span>
     <audio
       ref="audioRef"
-      :src="data.url"
+      :src="audioUrl"
     />
   </div>
 </template>
@@ -34,9 +32,16 @@
 <script lang="ts" setup>
 import vue from '../../../../adapter-vue';
 import Icon from '../../../common/Icon.vue';
-import audioIcon from '../../../../assets/msg-audio.svg';
+import audioIcon1 from '../../../../assets/audio_icon_1.svg';
+import audioIcon2 from '../../../../assets/audio_icon_2.svg';
+import audioIcon3 from '../../../../assets/audio_icon_3.svg';
 import { isMobile } from '../../../../utils/env';
-const { watchEffect, ref, onMounted, onUnmounted } = vue;
+import {
+  Toast,
+  TOAST_TYPE,
+} from '../../../common/Toast/index-web';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+const { watchEffect, ref, onMounted, onUnmounted, computed } = vue;
 
 interface IEmits {
   (e: 'setAudioPlayed', messageID: string): void;
@@ -58,6 +63,11 @@ const data = ref();
 const message = ref();
 const isAudioPlaying = ref();
 const audioRef = ref<HTMLAudioElement>();
+const audioIcons = [audioIcon1, audioIcon2, audioIcon3];
+const currentAudioIconIndex = ref(2);
+const audioUrl = ref('');
+const currentAudioIcon = computed(() => audioIcons[currentAudioIconIndex.value]);
+let audioIconTimer: any = null;
 
 onMounted(() => {
   if (audioRef.value) {
@@ -76,6 +86,7 @@ onUnmounted(() => {
 watchEffect(() => {
   message.value = props.messageItem;
   data.value = props.content;
+  audioUrl.value = data.value.url || message.value.payload.remoteAudioUrl;
 });
 
 function play() {
@@ -95,45 +106,57 @@ function play() {
       audio.currentTime = 0;
     }
   });
-  audioRef.value.play();
+  try {
+    if (!audioUrl.value) {
+      const message = `${TUITranslateService.t("TUIChat.语音播放失败")}`;
+      Toast({
+        message,
+        type: TOAST_TYPE.ERROR,
+        duration: 2000,
+      });
+      return;
+    }
+    audioRef.value.play();
+    if (!audioIconTimer) {
+      audioIconTimer = setInterval(() => {
+        currentAudioIconIndex.value = (currentAudioIconIndex.value + 1) % audioIcons.length;
+      }, 500);
+    }
+    
+  } catch (e) {
+    console.warn(e);
+  }
   isAudioPlaying.value = true;
   if (message.value.flow === 'in') {
     emits('setAudioPlayed', message.value.ID);
   }
 }
 
+function initAudioIcon() {
+  clearInterval(audioIconTimer);
+  audioIconTimer = null;
+  currentAudioIconIndex.value = 2;
+}
+
 function onAudioEnded() {
   isAudioPlaying.value = false;
+  initAudioIcon();
 }
 
 function onAudioPaused() {
   isAudioPlaying.value = false;
+  initAudioIcon();
 }
 </script>
 <style lang="scss" scoped>
 @import "../../style/common";
-
-$flow-in-bg-color: #fbfbfb;
-$flow-out-bg-color: #dceafd;
-
-@keyframes blink {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 .message-audio {
   flex-direction: row;
   display: flex;
   flex: 0 0 auto;
   cursor: pointer;
   overflow: hidden;
+  align-items: center;
 
   .time {
     flex: 1 1 auto;
@@ -156,47 +179,6 @@ $flow-out-bg-color: #dceafd;
   position: relative;
   margin: 0 7px 0 0;
   overflow: hidden;
-
-  .mask {
-    position: absolute;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    transform-origin: right;
-    transform: scaleX(0);
-    background-color: $flow-in-bg-color;
-    
-    &.play {
-      animation: audio-play 2s steps(1, end) infinite;
-    }
-  }
-  .icon{
-    &.play{
-      animation: blink 1s infinite;
-    }
-  }
-}
-
-@keyframes audio-play {
-  0% {
-    transform: scaleX(0.7056);
-  }
-
-  50% {
-    transform: scaleX(0.3953);
-  }
-
-  75% {
-    transform: scaleX(0);
-    visibility: hidden;
-  }
-
-  100% {
-    transform: scaleX(0);
-    visibility: hidden;
-  }
 }
 
 .message-audio.reserve {
@@ -206,18 +188,8 @@ $flow-out-bg-color: #dceafd;
     text-align: end;
   }
 
-  .icon {
-    transform: rotate(180deg);
-  }
-
   .audio-icon-container {
-    margin: 0 0 0 7px;
-
-    .mask {
-      transform-origin: left;
-      background-color: $flow-out-bg-color;
-      // mask: linear-gradient(0deg, transparent 50%);
-    }
+    margin: 0 0 0 4px;
   }
 }
 </style>

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

@@ -364,7 +364,7 @@ function onDislike(messageInfo: Object) {
 }
 
 .message-bubble {
-  padding: 10px 5px;
+  padding: 10px;
   display: flex;
   flex-direction: row;
   user-select: none;

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

@@ -2,7 +2,7 @@ import {Marked} from 'marked';
 import Log from '../../../../../../utils/logger';
 
 export const marked = new Marked(
-  {mangle: false, headerIds: false},
+  {mangle: false, headerIds: false, breaks: true, gfm: false, smartLists: true,},
   {
     renderer: {
       image(this: any, href: string | null, title: string | null, text: string) {
@@ -24,9 +24,10 @@ export const marked = new Marked(
                 <video class="message-img video-web" src="${videoSrc}" onloadeddata="onMarkdownMediaLoad()" preload="auto" controls/>
               </div>
             </div>`;
+          }
         }
-        }
-        return text
+        // 在段落中用 p 包裹，避免 \n\n 无法换行
+        return `<p>${text}</p>`;
       },
       link(this: any, href: string | null, title: string | null, text: string) {
         if (href) {
@@ -57,6 +58,7 @@ const extractVideoSrc = (text: string) => {
 }
 
 export const parseMarkdown = (text: string) => {
+  // 不要手动替换，如把 \n\n 替换成 p 或者 <br/>，否则可能会导致Markdown结构被破坏，进而导致 bad case
   let ret = marked.parse(text);
   return typeof ret === 'string' ? ret : '';
 };

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

@@ -24,7 +24,9 @@
         class="welcome-item"
         @click="handleContentListItemClick(item)"
       >
-        <div class="item-content">{{ item.content }}</div>
+        <div class="item-container">
+          <div class="item-content">{{ item.content }}</div>
+        </div>
       </div>
       <div class="welcome-item welcome-item-hidden">
         {{ longestContent }}
@@ -195,13 +197,18 @@ export default {
       color: #1c66e5;
       gap: 10px;
       box-sizing: border-box;
-      .item-content {
+      .item-container {
         text-align: center; 
-        overflow-wrap: break-word;
-        word-break: normal;
-        width: 100%;
-        padding: 0 10px;
+        max-width: 100%;
+        .item-content {
+          display: inline-block;
+          text-align: left; 
+          overflow-wrap: break-word;
+          word-break: normal;
+          width: 100%;
+        }
       }
+      
     }
 
     .welcome-item:hover {

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

@@ -3,7 +3,7 @@
     <span
       v-for="(item, index) in textMessageData.text"
       :key="index"
-    > 
+    >
       <span v-if="item.name === 'text' && enableURLDetection === 1"
         class="text"
         v-html="item.text"
@@ -64,7 +64,8 @@ const textMessageData = computed(() => {
             + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey];
         }
       } else if (item.name === 'text' && enableURLDetection.value) {
-        item.text = item.text.replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (url) => {
+        // 开启 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>`;
         }) || '';
       }

package/components/CustomerServiceChat/message-list/scroll-button/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     v-if="isScrollButtonVisible"
-    class="scroll-button"
+    :class="['scroll-button', isPC ? 'scroll-button-pc' : '']"
     @click="scrollToMessageListBottom"
   >
     <Icon
-      width="10px"
-      height="10px"
-      :file="doubleArrowIcon"
+      width="15px"
+      height="15px"
+      :file="isPC ? arrowDownIconWhite : arrowDownIcon"
     />
-    <div class="scroll-button-text">
+    <div v-if="scrollButtonContent" :class="isPC ? 'scroll-button-text-pc' : 'scroll-button-text'">
       {{ scrollButtonContent }}
     </div>
   </div>
@@ -26,10 +26,11 @@ import {
   TUITranslateService,
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
-import doubleArrowIcon from '../../../../assets/double-arrow.svg';
+import arrowDownIcon from '../../../../assets/arrow_down_icon.svg';
+import arrowDownIconWhite from '../../../../assets/arrow_down_icon_white.svg';
 import { getBoundingClientRect } from '@tencentcloud/universal-api';
 import { JSONToObject } from '../../../../utils';
-
+import { isPC } from '../../../../utils/env';
 
 interface IEmits {
   (key: 'scrollToLatestMessage'): void;
@@ -197,7 +198,6 @@ defineExpose({
   bottom: 10px;
   right: 10px;
   width: auto;
-  height: 28px;
   background: #fff;
   border: 1px solid #e0e0e0;
   box-shadow: 0 4px 12px -5px rgba(0, 0, 0, 0.1);
@@ -205,7 +205,8 @@ defineExpose({
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  border-radius: 3px;
+  border-radius: 20px;
+  padding: 8px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
@@ -216,4 +217,11 @@ defineExpose({
     margin-right: 3px;
   }
 }
+.scroll-button-pc {
+  background: #1c66e5;
+}
+.scroll-button-text-pc {
+  color: #ffffff;
+  font-size: 10px;
+}
 </style>

package/components/common/Toast/index-web.ts

@@ -5,7 +5,7 @@ import TOAST_TYPE from './type';
 import MessageConstructor from './index-web.vue';
 //@ts-ignore
 import { vueVersion } from '../../../adapter-vue-web';
-import { VNode } from 'vue';
+import { VNode, ref } from 'vue';
 //@ts-ignore
 const { createVNode, render } = vue;
 
@@ -39,6 +39,7 @@ const Toast = function (options: IToast): IToastReturnType {
     zIndex: 20 + seed,
     offset: verticalOffset,
     id,
+    visible: true,
     ...options,
     onClose: () => {
       Toast.close(id, userOnClose);
@@ -66,8 +67,20 @@ const Toast = function (options: IToast): IToastReturnType {
         },
       };
     case 3:
+      let visible = ref(true);
       // @ts-ignore
-      vm = createVNode(MessageConstructor, props);
+      vm = createVNode(MessageConstructor, {
+        ...props,
+        'onUpdate:visible': (val: boolean) => {
+          visible.value = val;
+          if (!val) {
+            render(null, container);
+            if (container.parentNode) {
+              container.parentNode.removeChild(container);
+            }
+          }
+        },
+      });
       container = document.createElement('div');
       vm?.props
       && (vm.props!.onDestroy = () => {
@@ -83,7 +96,7 @@ const Toast = function (options: IToast): IToastReturnType {
       appendTo.appendChild(container.firstElementChild!);
       return {
         close: () => {
-          vm?.component?.proxy && (vm.component!.proxy.visible = false);
+          vm?.component?.emit('update:visible', false);
         },
       };
   }

package/components/common/Toast/index-web.vue

@@ -4,7 +4,7 @@
     @after-leave="$emit('destroy')"
   >
     <div
-      v-show="visible"
+      v-show="toastVisible"
       class="message"
       :class="[handleStyle(type), isH5 && 'message-h5']"
       :style="customStyle"
@@ -20,7 +20,7 @@
 import vue from '../../../adapter-vue';
 import { isH5 } from '../../../utils/env';
 import TOAST_TYPE from './type';
-const { computed, onMounted, ref, watch } = vue;
+const { computed, onMounted, ref, watch, onUnmounted } = vue;
 
 const props = defineProps({
   message: {
@@ -55,14 +55,19 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
 });
-const visible = ref(false);
+const emit = defineEmits(['update:visible']);
+const toastVisible = ref(props.visible);
 let timer: any;
 
 const startTimer = () => {
   if (props.duration > 0) {
     timer = setTimeout(() => {
-      if (visible.value) {
+      if (toastVisible.value) {
         close();
       }
     }, props.duration);
@@ -74,7 +79,7 @@ const clearTimer = () => {
 };
 
 const close = () => {
-  visible.value = false;
+  emit('update:visible', false);
   if (typeof props.onClose === 'function') {
     props.onClose();
   }
@@ -95,7 +100,12 @@ const customStyle = computed<CSSProperties>(() => ({
 
 onMounted(() => {
   startTimer();
-  visible.value = true;
+  toastVisible.value = true;
+});
+
+onUnmounted(() => {
+  clearTimer();
+  toastVisible.value = false;
 });
 
 const handleStyle = (type?: string) => {

package/constant.ts

@@ -162,6 +162,7 @@ export const INPUT_TOOLBAR_TYPE = {
   FILE: 'file',
   VIDEO: 'video',
   RATING: 'rating',
+  AUDIO: 'audio',
 };
 
 export const USER_DEFAULT_AVATAR = 'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png';

package/locales/en/TUIChat.ts

@@ -20,7 +20,7 @@ const TUIChat = {
   '关闭阅读状态': 'Read status closed',
   '管理员开启全员禁言': 'The admin enables Mute All',
   '欢迎使用TUICallKit': 'Welcome to TUICallKit',
-  '回到最新位置': 'Back to the latest location',
+  '回到最新位置': '',
   '回复': 'Reply',
   '回复详情': 'Replies',
   '集成TUICallKit': ' Integrate TUICallKit ',
@@ -105,8 +105,12 @@ const TUIChat = {
   '空': 'Empty',
   '文本包含本地审核拦截词': 'Text contains local moderation blocking words',
   '按住说话': 'Hold to speak',
-  '抬起发送': 'Release to send',
-  '抬起取消': 'Release to cancel',
+  '松开发送': 'Release to send',
+  '松手取消': 'Release to cancel',
+  '录音结束提醒': 'Recording will stop in',
+  '语音播放失败': 'Voice playback failed',
+  '请检查麦克风访问权限': 'Please check microphone access permissions',
+  '按压时间过短，请按压超过1秒': 'Press time too short, please hold for more than 1 second',
   '正在录音': 'Recording',
   '继续上滑可取消': 'Continue to swipe to cancel',
   '松开手指 取消发送': 'Release to cancel',

package/locales/en/aidesk.ts

@@ -7,7 +7,6 @@ const AIDesk = {
   "提交": "Submit",
   "查看内容": "View content",
   "请填写必填项": "Please fill in the required fields",
-  "Hi，我是": "Hi, I'm ",
   "请输入内容":"Please enter the content",
   "如果满意请给好评哦～":"If you're satisfied, please give a good review~",
   "请对本次服务进行评价": "Please rate this service",

package/locales/fil/TUIChat.ts

@@ -42,7 +42,7 @@ const TUIChat = {
   '该消息不存在': 'Ang mensaheng ito ay hindi umiiral',
   '无法定位到原消息': 'Hindi mahanap ang orihinal na mensahe',
   '对方正在输入': 'Ang kabilang panig ay nagta-type...',
-  '回到最新位置': 'Bumalik sa Pinakabagong Posisyon',
+  '回到最新位置': '',
   '条新消息': 'bagong mensahe',
   '点此投诉': 'I-click dito para magreklamo',
   '语音通话': 'Voice Call',
@@ -106,8 +106,12 @@ const TUIChat = {
   '空': 'Walang laman',
   '文本包含本地审核拦截词': 'May mga salitang sinusuri sa lokal na pagbabawal sa teksto',
   '按住说话': 'Pindutin at magsalita',
-  '抬起发送': 'Ibaba at ipadala',
-  '抬起取消': 'Ibaba at kanselahin',
+  '松开发送': 'Ibaba at ipadala',
+  '松手取消': 'Ibaba at kanselahin',
+  '录音结束提醒': 'Magtatapos ang pag-record sa loob ng',
+  '语音播放失败': 'Nabigo ang pag-play ng boses',
+  '请检查麦克风访问权限': 'Mangyaring suriin ang mga pahintulot sa access ng mikropono',
+  '按压时间过短，请按压超过1秒': 'Masyadong maikli ang pagpindot, pindutin nang higit sa 1 segundo',
   '正在录音': 'Nagre-record',
   '继续上滑可取消': 'Magpatuloy sa pag-swipe pataas para kanselahin',
   '松开手指 取消发送': 'Bitawan ang daliri para kanselahin',

package/locales/fil/aidesk.ts

@@ -7,7 +7,6 @@ const AIDesk = {
   "提交": "Isumite",
   "查看内容": "Tingnan ang Nilalaman",
   "请填写必填项": "Mangyaring punan ang mga kinakailangang field",
-  "Hi，我是": "Hi, ako ",
   "请输入内容":"Pakilagay ang nilalaman",
   "如果满意请给好评哦～":"Kung nasiyahan ka, mangyaring magbigay ng magandang pagsusuri~",
   "请对本次服务进行评价": "Mangyaring suriin ang serbisyong ito",