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

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

@@ -2,10 +2,12 @@
   <div
     :class="[
       'message-input-editor-container',
-      isPC && !props.hasInputTool && 'message-input-editor-container-no-inputTool',
+      isPC && !props.shouldShowToolbar && 'message-input-editor-container-no-inputTool',
       isH5 && 'message-input-editor-container-h5',
-      isH5 && !props.hasEmojiTool && props.hasInputTool && 'message-input-editor-container-h5-no-emoji-no-tool',
-      isH5 && !props.hasEmojiTool && !props.hasInputTool && 'message-input-editor-container-h5-no-emoji',
+      isH5 && !props.shouldShowEmoji && props.shouldShowToolbar && 'message-input-editor-container-h5-no-emoji-no-tool',
+      isH5 && !props.shouldShowEmoji && !props.shouldShowToolbar && 'message-input-editor-container-h5-no-emoji',
+      isH5 && props.shouldShowAudio && 'message-input-editor-container-h5-audio',
+      isH5 && isInAudioMode && 'message-input-editor-container-h5-audio-mode',
     ]"
   >
     <div
@@ -14,8 +16,35 @@
     >
       {{ muteText }}
     </div>
+    <div v-if="isInAudioMode" 
+      class="audio-mode no-copy"
+      @touchstart="startRecording"
+      @touchend="stopRecording"
+      @touchcancel="stopRecording"
+      @touchmove="handleTouchMove"
+      @contextmenu.prevent
+    >
+      {{ TUITranslateService.t('TUIChat.按住说话') }}
+      <div v-if="isRecording" class="record-container">
+        <div class="record-tip">
+          {{ recordTip }}
+        </div>
+        <div class="audio-wave-container">
+          <div :class="['audio-wave-bubble', recordCancel ? 'audio-wave-bubble-cancel' : '']">
+            <div class="audio-wave">
+              <div 
+                v-for="(bar, index) in audioWaveBars" 
+                :key="index" 
+                class="wave-bar" 
+                :style="{ height: bar.height + 'px' }"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
-      v-if="!isMuted && enableInput"
+      v-if="!isMuted && enableInput && !isInAudioMode"
       ref="editorDom"
       class="message-input-editor-area"
       :contenteditable="isH5"
@@ -30,10 +59,12 @@
 </template>
 <script setup lang="ts">
 import vue from '../../../adapter-vue';
-import {
+import TUIChatEngine, {
   TUIStore,
   StoreName,
   IMessageModel,
+  TUIChatService,
+  TUITranslateService,
 } from '@tencentcloud/chat-uikit-engine';
 import { Editor, JSONContent } from '@tiptap/core';
 import Document from '@tiptap/extension-document';
@@ -46,6 +77,14 @@ import { ITipTapEditorContent } from '../../../interface';
 import { parseTextToRenderArray } from '../emoji-config';
 import { isH5, isPC } from '../../../utils/env';
 import DraftManager from '../utils/conversationDraft';
+import {
+  Toast,
+  TOAST_TYPE,
+} from '../../common/Toast/index-web';
+import Recorder from "js-audio-recorder";
+import { isEnabledMessageReadReceiptGlobal } from '../../../utils/utils';
+import Log from '../../../utils/logger';
+import state from '../../../utils/state.js';
 const { toRefs, ref, onMounted, watch, onUnmounted } = vue;
 
 const props = defineProps({
@@ -77,14 +116,22 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  hasEmojiTool: {
+  isInAudioMode:{
+    type: Boolean,
+    default: false,
+  },
+  shouldShowEmoji: {
     type: Boolean,
     default: true,
   },
-  hasInputTool: {
+  shouldShowToolbar: {
     type: Boolean,
     default: true,
-  }
+  },
+  shouldShowAudio: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emits = defineEmits(['sendMessage', 'onTyping', 'blurToolAndEmojiH5', 'isInputNotEmpty']);
@@ -97,6 +144,17 @@ const currentQuoteMessage = ref<{ message: IMessageModel; type: string }>();
 const editorDom = ref();
 let editor: Editor | null = null;
 const fileMap = new Map<string, any>();
+const recorder = ref();
+const recordTime = ref(0);
+const isInAudioMode = ref(props.isInAudioMode);
+const isRecording = ref(false);
+let startRecordY = 0;
+const recordCancel = ref(false);
+const recordTip = ref(TUITranslateService.t('TUIChat.松开发送'));
+let recordTimer: any = null;
+const audioWaveBars = ref(Array(24).fill({ height: 6 }));
+let audioWaveAnimation = -1;
+let pressStartTime: any = null;
 
 function onCurrentConversationIDUpdated(conversationID: string) {
   if (currentConversationID.value !== conversationID) {
@@ -134,6 +192,13 @@ function focusEditor() {
   }
 }
 
+watch(
+  () => [props.isInAudioMode],
+  (newValue) => {
+    isInAudioMode.value = newValue[0];
+  }
+);
+
 onMounted(() => {
   editor = isPC
     ? new Editor({
@@ -209,6 +274,15 @@ onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     quoteMessage: onQuoteMessageUpdated,
   });
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+
+  recorder.value = new Recorder({
+    sampleBits: 16,
+    sampleRate: 44100,
+    numChannels: 1,
+    compiling: false,
+  });
 });
 
 onUnmounted(() => {
@@ -222,6 +296,8 @@ onUnmounted(() => {
 
   // clear map store
   fileMap.clear();
+  initRecorder();
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
 });
 
 function handleEnter(e: any) {
@@ -250,9 +326,12 @@ function handleH5Blur() {
   isH5 && (isEditorBlur.value = true);
 }
 
-async function handleH5Focus() {
+async function handleH5Focus(e: any) {
   emits('blurToolAndEmojiH5');
   isH5 && (isEditorBlur.value = false);
+  if (e.target) {
+    e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
 }
 
 function handlePCFileDrop(e: any) {
@@ -619,7 +698,9 @@ function resetEditor() {
   editor?.commands?.clearContent(true);
   isEditorBlur.value = true;
   isEditorEmpty.value = true;
-  isH5 && (editorDom.value.innerHTML = '');
+  if (!isInAudioMode.value) {
+    isH5 && (editorDom.value.innerHTML = '');
+  }
 }
 
 function getEditorHTML(): string {
@@ -712,7 +793,163 @@ watch(
     deep: true,
   },
 );
+async function initRecorder() {
+  clearInterval(recordTimer);
+  recordTimer = undefined;
+  recordTime.value = 0;
+  await recorder.value.stop();
+  cancelAnimationFrame(audioWaveAnimation);
+}
+
+watch(
+  recordTime,
+  (newVal: number) => {
+    if(newVal >= 50 && newVal < 60) {
+      let tip = '';
+      const currentLanguage = state.get('currentLanguage');
+      if (currentLanguage === 'zh' || currentLanguage === 'zh_tw' || currentLanguage === 'ja') {
+        tip = `${10 - newVal}${TUITranslateService.t('TUIChat.录音结束提醒')}`
+      } else {
+        tip = `${TUITranslateService.t('TUIChat.录音结束提醒')} ${10 - newVal}s`
+      }
+      recordTip.value = tip;
+    } else if (newVal >= 60) {
+      stopRecording();
+    }
+  }
+);
+
+const startRecording = async(e) => {
+  if (isRecording.value) {
+    return;
+  }
+  isRecording.value = true;
+  pressStartTime = new Date();
+  recordCancel.value = false;
+  Recorder.getPermission().then(async() => {
+    if (!isRecording.value) {
+      return;
+    }
+    if (recordTimer !== undefined) {
+      initRecorder();
+    }
+    recorder.value.start().then(() => {
+      updateRecordWave();
+      startRecordY = getRecordY(e);
+      recordTimer = setInterval(() => {
+        recordTime.value = recordTime.value + 1;
+      }, 1000);
+    }, (error) => {
+      Log.e(`Error in recording ${error.name} : ${error.message}`);
+      isRecording.value = false;
+      let toastMessage = `${error.name} : ${error.message}`;
+      Toast({
+        message:toastMessage,
+        type: TOAST_TYPE.ERROR,
+        duration: 2000,
+      });
+      initRecorder();
+    });
+  }, (error) => {
+    isRecording.value = false;
+    initRecorder();
+    Toast({
+      message:TUITranslateService.t("TUIChat.请检查麦克风访问权限"),
+      type: TOAST_TYPE.ERROR,
+      duration: 2000,
+    });
+    Log.w(`Error in mic permission ${error.name} : ${error.message}`);
+  });
+  e.preventDefault();
+};
 
+const stopRecording = async () => {
+  isRecording.value = false;
+  const duration = recordTime.value;
+  initRecorder();
+  const pressDuration = Date.now() - pressStartTime;
+  if (pressDuration < 1000) {
+    // 按压时间过短，还没开始录音就结束
+    Toast({
+      message: TUITranslateService.t("TUIChat.按压时间过短，请按压超过1秒"),
+      type: TOAST_TYPE.ERROR,
+      duration: 3000,
+    });
+  } else if (!recordCancel.value && duration) {
+    // 已经录音 && 没有取消录音
+    if (duration <= 60) {
+      let wavBlob = recorder.value.getWAVBlob();
+      let tempFilePath = new File([wavBlob], `ai_desk_customer_vue_${Date.now()}.wav`, { type: "wav" });
+      (tempFilePath as any).duration = duration * 1000;
+      if (tempFilePath && duration <= 60) {
+        try {
+          TUIChatService.sendAudioMessage({
+            to: currentConversationID.value.replace(TUIChatEngine.TYPES.CONV_C2C, ''),
+            conversationType: TUIChatEngine.TYPES.CONV_C2C,
+            payload: { file: tempFilePath },
+            needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+          });
+        } catch (error) {
+          const message = `${TUITranslateService.t("TUIChat.发送失败")}: ${error}`;
+          Toast({
+            message,
+            type: TOAST_TYPE.ERROR,
+            duration: 2000,
+          });
+        }
+      }
+    }
+  }
+};
+
+const getRecordY = (e) => {
+  return e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
+}
+
+const handleTouchMove = (e) => {
+  if (!isRecording.value) return;
+  let currentRecordY = getRecordY(e);
+  let deltaY = Math.abs(currentRecordY - startRecordY);
+  if (recordTime.value <= 50) {
+    if (deltaY > 40) {
+      recordCancel.value = true;
+      recordTip.value = TUITranslateService.t("TUIChat.松手取消");
+    } else {
+      recordCancel.value = false;
+      recordTip.value = TUITranslateService.t("TUIChat.松开发送");
+    }
+  }
+}
+
+const updateRecordWave = () => {
+  if (!isRecording.value) return;
+  const dataArray = recorder.value.getRecordAnalyseData();
+  const chunkSize = Math.floor(dataArray.length / 24);
+  const newBars = [{height: 0}];
+  const SILENCE_THRESHOLD = 129;
+  for (let i = 0; i < 24; i++) {
+    const chunk = dataArray.slice(i * chunkSize, (i + 1) * chunkSize);
+    const avg = chunk.reduce((sum, val) => sum + Math.abs(val), 0) / chunkSize; // 使用绝对值确保正值
+    let height;
+    if (avg < SILENCE_THRESHOLD) {
+      // 静音时固定为5px
+      height = 5;
+    } else {
+      // 动态映射：静音(5px) ~ 最大音量(60px)
+      const normalized = Math.min(avg / 255, 1); // 限制到[0,1]范围
+      height = 5 + normalized * 55; // 5 + (0~1)*55 => 5~60px
+    }
+    newBars.push({ height });
+  }
+  audioWaveBars.value = newBars;
+  audioWaveAnimation = requestAnimationFrame(updateRecordWave);
+}
+
+const handleVisibilityChange = () => {
+  if (document.visibilityState === 'hidden') {
+    initRecorder();
+  }
+}
 defineExpose({
   getEditorContent,
   addEmoji,
@@ -721,6 +958,8 @@ defineExpose({
   getEditorHTML,
   insertEditorContent,
   blur,
+  startRecording,
+  stopRecording
 });
 </script>
 
@@ -822,6 +1061,12 @@ defineExpose({
 .message-input-editor-container-h5-no-emoji-no-tool {
   border-radius: 10px;
 }
+.message-input-editor-container-h5-audio {
+  margin: 10px 0 0 5px;
+}
+.message-input-editor-container-h5-audio-mode {
+  padding: 0;
+}
 </style>
 <style lang="scss">
 /* stylelint-disable-next-line selector-class-pattern */
@@ -915,7 +1160,93 @@ defineExpose({
     pointer-events: none;
   }
 }
-
+.audio-mode {
+  text-align: center;
+  font-size: 14px;
+  color: rgb(0,0,0);
+  padding: 8px 0 8px 10px !important;
+}
+.no-copy {
+  user-select: none;  /* 标准属性 */
+  -webkit-user-select: none;  /* Safari/Chrome */
+  -moz-user-select: none;  /* Firefox */
+  -ms-user-select: none;  /* IE10+ */
+}
+.record-container{
+  height: 30vh;
+  width: 100vw;
+  position:fixed;
+  overflow: hidden;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, #FFF 0%, #FFF 64.35%);
+  background: linear-gradient(180deg, color(display-p3 1 1 1 / 0.00) 0%, color(display-p3 1 1 1) 64.35%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  .audio-wave-container {
+    box-sizing: border-box;
+    width: 100vw;
+    margin-bottom: 10px;
+    display: flex;
+    .audio-wave-bubble {
+      background: #006AF6;
+      margin: 0 10px;
+      height: 34px;
+      border-radius: 10px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .audio-wave-bubble-cancel {
+      background: #FF002F;
+    }
+    .audio-wave {
+      color: white;
+      display: flex;
+      gap: 4px;
+      .wave-bar {
+        width: 3px;
+        background: white;
+        border-radius: 6px;
+        transition: height 0.1s ease-out;
+        margin-top: auto;
+        margin-bottom: auto;
+        transform-origin: center bottom;
+      }
+    }
+  }
+  .icon-container{
+    position: absolute;
+    bottom: -190%;
+    left: -80%;
+    width: 950px;
+    height: 950px;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #E8EDF3 -1.18%, #FBFBFB 4.94%);
+    box-shadow: 0px -7.5px 5px 0px rgba(218, 224, 232, 0.15);
+  }
+  .record-tip{
+    color:#656A72;
+    font-size: 12px;
+    margin-bottom: 12px;
+  }
+  .audio-record-icon{
+    position:absolute;
+    bottom:50px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index:2;
+  }
+  .audio-close-icon {
+    position:absolute;
+    bottom:160px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index:2;
+  }
+}
 .message-input-mute {
   color: #721c24;
   background-color: #f8d7da;

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;