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

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,18 @@ 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;
+const hasMicPermission = ref(false);
 
 function onCurrentConversationIDUpdated(conversationID: string) {
   if (currentConversationID.value !== conversationID) {
@@ -134,6 +193,13 @@ function focusEditor() {
   }
 }
 
+watch(
+  () => [props.isInAudioMode],
+  (newValue) => {
+    isInAudioMode.value = newValue[0];
+  }
+);
+
 onMounted(() => {
   editor = isPC
     ? new Editor({
@@ -209,6 +275,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 +297,8 @@ onUnmounted(() => {
 
   // clear map store
   fileMap.clear();
+  initRecorder();
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
 });
 
 function handleEnter(e: any) {
@@ -250,9 +327,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 +699,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 +794,167 @@ watch(
     deep: true,
   },
 );
+async function initRecorder() {
+  clearInterval(recordTimer);
+  recordTimer = null;
+  recordTime.value = 0;
+  await recorder.value.stop();
+  isRecording.value = false;
+  recordTip.value = TUITranslateService.t("TUIChat.松开发送");
+  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(() => {
+    hasMicPermission.value = true;
+    if (!isRecording.value) {
+      return;
+    }
+    if (recordTimer !== null) {
+      initRecorder();
+    }
+    // 提前获取音频流，避免开始录音时启动过长
+    recorder.value.start().then(() => {
+      if (!isRecording.value) {
+        return;
+      }
+      updateRecordWave();
+      startRecordY = getRecordY(e);
+      recordTimer = setInterval(() => {
+        recordTime.value = recordTime.value + 1;
+      }, 1000);
+    }, (error) => {
+      Log.e(`Error in recording ${error.name} : ${error.message}`);
+      let toastMessage = `${error.name} : ${error.message}`;
+      Toast({
+        message:toastMessage,
+        type: TOAST_TYPE.ERROR,
+        duration: 2000,
+      });
+      initRecorder();
+    });
+  }, (error) => {
+    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 () => {
+  const duration = recordTime.value;
+  initRecorder();
+  const pressDuration = Date.now() - pressStartTime;
+  if (pressDuration < 1000 && hasMicPermission.value) {
+    // 按压时间过短，还没开始录音就结束
+    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 +963,8 @@ defineExpose({
   getEditorHTML,
   insertEditorContent,
   blur,
+  startRecording,
+  stopRecording
 });
 </script>
 
@@ -822,6 +1066,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 +1165,92 @@ 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, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 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-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue

@@ -1,60 +1,54 @@
 <template>
-
-    <div class="emojiDialog">
-        <ul ref="emojiPickerListRef" class="emojiDialogList">
-            <li
-                v-for="(childrenItem, childrenIndex) in currentEmojiList"
-                :key="childrenIndex"
-                class="emojiDialogList-item"
-                @click="select(childrenItem, childrenIndex)"
-            >
-                <img
-                    v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
-                    class="emoji"
-                    :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
-                    >
-            </li>
-        </ul>
-        <div class="sendButtonContainer">
-            <div class="sendButton" @click="sendMessage">
-              {{ TUITranslateService.t("发送") }}
-            </div>
-        </div>
+  <div class="emojiDialog">
+    <ul ref="emojiPickerListRef" class="emojiDialogList">
+      <li
+        v-for="(childrenItem, childrenIndex) in currentEmojiList"
+        :key="childrenIndex"
+        class="emojiDialogList-item"
+        @click="select(childrenItem, childrenIndex)"
+      >
+        <img
+          class="emoji"
+          :src="BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[childrenItem]"
+        >
+      </li>
+    </ul>
+    <div class="sendButtonContainer">
+      <div class="sendButton" @click="sendMessage">
+        {{ TUITranslateService.t("发送") }}
+      </div>
     </div>
-    
+  </div>
 </template>
 <script lang="ts" setup>
 import vue from '../../../../adapter-vue';
-import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';
+import { IEmojiGroupList } from '../../../../interface';
 const { ref, onMounted, onUnmounted } = vue;
 import {
-  TUIChatService,
   TUIStore,
   StoreName,
   IConversationModel,
   TUITranslateService,
-  SendMessageParams,
 } from '@tencentcloud/chat-uikit-engine';
 import {
   EMOJI_GROUP_LIST,
   BASIC_EMOJI_URL_MAPPING,
   convertKeyToEmojiName,
+  BASIC_EMOJI_URL,
+  filterEmojisInNonChineseEnv,
 } from '../../emoji-config';
-import { EMOJI_TYPE } from '.././../../../constant';
-import { isPC, } from '../../../../utils/env';
 
 const emits = defineEmits(['insertEmoji', 'onClose', 'sendMessage']);
 const list = ref<IEmojiGroupList>(initEmojiList());
 const currentConversation = ref();
 const emojiPickerListRef = ref();
-const currentTabIndex = ref<number>(0);
 const currentEmojiList = ref<string[]>(list?.value[0]?.list);
-    const currentTabItem = ref<IEmojiGroup>(list?.value[0]);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
   });
+  currentEmojiList.value = filterEmojisInNonChineseEnv(list.value[0].list);
 });
 
 onUnmounted(() => {
@@ -66,24 +60,10 @@ onUnmounted(() => {
 const select = (item: any, index: number) => {
   const options: any = {
     emoji: { key: item, name: convertKeyToEmojiName(item) },
-    type: currentTabItem?.value?.type,
+    type: 'basic',
+    url : BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[item],
   };
-  switch (currentTabItem?.value?.type) {
-    case EMOJI_TYPE.BASIC:
-      options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
-        emits('insertEmoji', options);
-      
-      break;
-    case EMOJI_TYPE.BIG:
-    //   sendFaceMessage(index, currentTabItem.value);
-      break;
-    case EMOJI_TYPE.CUSTOM:
-    //   sendFaceMessage(index, currentTabItem.value);
-      break;
-    default:
-      break;
-  }
-  isPC && emits('onClose');
+  emits('insertEmoji', options);
 };
 
 function sendMessage(){

package/components/CustomerServiceChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue

@@ -17,9 +17,8 @@
         @click="select(childrenItem, childrenIndex)"
       >
         <img
-          v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
           class="emoji"
-          :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
+          :src="BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[childrenItem]"
         >
 <!--        <img-->
 <!--          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"-->
@@ -76,9 +75,6 @@ import {
   SendMessageParams,
   TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
-import Icon from '../../../common/Icon.vue';
-import faceIcon from '../../../../assets/face.svg';
-import { EMOJI_TYPE } from '.././../../../constant';
 import { isPC, isH5 } from '../../../../utils/env';
 import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';
 import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
@@ -86,22 +82,23 @@ import {
   EMOJI_GROUP_LIST,
   BASIC_EMOJI_URL_MAPPING,
   convertKeyToEmojiName,
+  BASIC_EMOJI_URL,
+  filterEmojisInNonChineseEnv,
 } from '../../emoji-config';
 const { ref, onMounted, onUnmounted } = vue;
 
 const emits = defineEmits(['insertEmoji', 'onClose', 'sendMessage']);
-const currentTabIndex = ref<number>(0);
 const currentConversation = ref();
 const emojiPickerDialog = ref();
 const emojiPickerListRef = ref();
-const list = ref<IEmojiGroupList>(initEmojiList());
-const currentTabItem = ref<IEmojiGroup>(list?.value[0]);
+const list = ref<IEmojiGroupList>(EMOJI_GROUP_LIST);
 const currentEmojiList = ref<string[]>(list?.value[0]?.list);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
   });
+  currentEmojiList.value = filterEmojisInNonChineseEnv(list.value[0].list);
 });
 
 onUnmounted(() => {
@@ -110,35 +107,13 @@ onUnmounted(() => {
   });
 });
 
-const toggleEmojiTab = (index: number) => {
-  currentTabIndex.value = index;
-  currentTabItem.value = list?.value[index];
-  currentEmojiList.value = list?.value[index]?.list;
-  // web & h5 side scroll to top
-  emojiPickerListRef?.value && (emojiPickerListRef.value.scrollTop = 0);
-
-};
-
 const select = (item: any, index: number) => {
   const options: any = {
     emoji: { key: item, name: convertKeyToEmojiName(item) },
-    type: currentTabItem?.value?.type,
+    type: 'basic',
   };
-  switch (currentTabItem?.value?.type) {
-    case EMOJI_TYPE.BASIC:
-      options.url = currentTabItem?.value?.url + BASIC_EMOJI_URL_MAPPING[item];
-      emits('insertEmoji', options);
-
-      break;
-    case EMOJI_TYPE.BIG:
-      sendFaceMessage(index, currentTabItem.value);
-      break;
-    case EMOJI_TYPE.CUSTOM:
-      sendFaceMessage(index, currentTabItem.value);
-      break;
-    default:
-      break;
-  }
+  options.url = BASIC_EMOJI_URL + BASIC_EMOJI_URL_MAPPING[item];
+  emits('insertEmoji', options);
   isPC && emits('onClose');
 };
 
@@ -159,16 +134,11 @@ const sendFaceMessage = (index: number, listItem: IEmojiGroup) => {
 
 function sendMessage() {
   emits('sendMessage');
-
 }
 
 function onCurrentConversationUpdate(conversation: IConversationModel) {
   currentConversation.value = conversation;
 }
-
-function initEmojiList() {
-  return EMOJI_GROUP_LIST;
-}
 </script>
 
 <style lang="scss" scoped src="./style/index.scss"></style>

package/components/CustomerServiceChat/message-list/bottom-quick-order/index.vue

@@ -91,6 +91,7 @@ const closeOrder = () => {
 .bottom-quick-order-line {
   display: flex;
   align-items: flex-end;
+  width: min-content;
 }
 .bottom-quick-order-container {
   display: flex;