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

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 1.6.2 @2025.10.30
+
+### Features
+- 优化发送语音的产品体验。
+- 优化 scroll-button 等组件样式。
+- emoji 表情适配海外。
+- 完善 markdown 解析。
+
+## 1.6.0 @2025.10.21
+
+### Features
+- 支持用户端转人工成功后发送语音消息。
+- 优化 emoji 表情的交互体验。
+- 开启 url 识别特性时，确保消息安全。
+
+### Fixed
+- 部分场景下，消息已读状态异常问题。
+- 富文本换行问题。
+- 切换账号登录可能导致的用户资料异常问题。
+- 部分手机浏览器软键盘遮挡输入框问题。
+
 ## 1.5.11 @2025.9.28
 
 ### Features

package/assets/arrow_down_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#444444"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>

package/assets/arrow_down_icon_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>

package/assets/audio-blue.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 6C7 3.23858 9.23858 1 12 1C14.7614 1 17 3.23858 17 6V12.5C17 15.2614 14.7614 17.5 12 17.5C9.23858 17.5 7 15.2614 7 12.5V6ZM15 6V12.5C15 14.1569 13.6569 15.5 12 15.5C10.3431 15.5 9 14.1569 9 12.5V6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6Z" fill="#1C66E5"/>
+<path d="M3 11V12.5C3 17.1326 6.50005 20.9476 11 21.4451V24H13V21.4451C17.5 20.9476 21 17.1326 21 12.5V11H19V12.5C19 16.366 15.866 19.5 12 19.5C8.13401 19.5 5 16.366 5 12.5V11H3Z" fill="#1C66E5"/>
+</svg>

package/assets/audio_icon_1.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4131 6.32129C11.0189 6.76465 10.7773 7.34741 10.7773 7.9873C10.7775 8.62651 11.0195 9.20745 11.4131 9.65039L13.2852 7.98633L11.4131 6.32129Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</svg>

package/assets/audio_icon_2.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.59863 3.82031C7.6133 4.92851 7.0137 6.38793 7.01367 7.9873L7.02148 8.30957C7.09619 9.782 7.68002 11.1194 8.59863 12.1523L9.71973 11.1553C8.97051 10.3125 8.51389 9.20362 8.51367 7.9873C8.5137 6.77028 8.9699 5.65959 9.71973 4.81641L8.59863 3.82031ZM11.4131 6.32129C11.0189 6.76465 10.7773 7.34741 10.7773 7.9873C10.7775 8.62651 11.0195 9.20745 11.4131 9.65039L13.2852 7.98633L11.4131 6.32129Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</svg>

package/assets/audio_icon_3.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.78613 1.32031C4.20943 3.09333 3.25002 5.42813 3.25 7.9873L3.2627 8.50391C3.38231 10.8598 4.31628 12.9998 5.78613 14.6523L6.90723 13.6562C5.56634 12.1486 4.75019 10.1637 4.75 7.9873C4.75002 5.81048 5.56603 3.82441 6.90723 2.31641L5.78613 1.32031ZM8.59863 3.82031C7.6133 4.92851 7.0137 6.38793 7.01367 7.9873L7.02148 8.30957C7.09619 9.782 7.68002 11.1194 8.59863 12.1523L9.71973 11.1553C8.97051 10.3125 8.51389 9.20362 8.51367 7.9873C8.5137 6.77028 8.9699 5.65959 9.71973 4.81641L8.59863 3.82031ZM11.4131 6.32129C11.0189 6.76465 10.7773 7.34741 10.7773 7.9873C10.7775 8.62651 11.0195 9.20745 11.4131 9.65039L13.2852 7.98633L11.4131 6.32129Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</svg>

package/assets/keyboard-icon.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" stroke="#1C66E5" stroke-width="2"/>
+<circle cx="12" cy="9.5" r="1.5" fill="#1C66E5"/>
+<circle cx="12" cy="14.5" r="1.5" fill="#1C66E5"/>
+<circle cx="7.5" cy="9.5" r="1.5" fill="#1C66E5"/>
+<circle cx="7.5" cy="14.5" r="1.5" fill="#1C66E5"/>
+<circle cx="16.5" cy="9.5" r="1.5" fill="#1C66E5"/>
+<circle cx="16.5" cy="14.5" r="1.5" fill="#1C66E5"/>
+</svg>

package/components/CustomerServiceChat/chat-header/index-web.vue

@@ -160,11 +160,7 @@ function setCurrentConversationName() {
   if (props.headerConfig && props.headerConfig.title) {
     currentConversationName.value = props.headerConfig.title;
   } else {
-    if (isH5) {
-      currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
-    } else {
-      currentConversationName.value = currentConversation.value.getShowName() || '';
-    }
+    currentConversationName.value = currentConversation.value.getShowName() || '';
   }
 }
 

package/components/CustomerServiceChat/emoji-config/default-emoji.ts

@@ -80,6 +80,17 @@ export const DEFAULT_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {
   '[TUIEmoji_Like]': 'emoji_61@2x.png',
 };
 
+export const EXCLUDED_EMOJI_LIST = [
+  '[TUIEmoji_Pig]',
+  '[TUIEmoji_Rich]',
+  '[TUIEmoji_Fortune]',
+  '[TUIEmoji_857]',
+  '[TUIEmoji_666]',
+  '[TUIEmoji_Prohibit]',
+  '[TUIEmoji_Convinced]',
+  '[TUIEmoji_Knife]',
+];
+
 export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
   {
     emojiGroupID: 1,

package/components/CustomerServiceChat/emoji-config/index.ts

@@ -1,6 +1,6 @@
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BIG_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING, CUSTOM_BIG_EMOJI_GROUP_LIST } from './custom-emoji';
-import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL } from './default-emoji';
+import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL, EXCLUDED_EMOJI_LIST } from './default-emoji';
 import { default as emojiCNLocales } from './locales/zh_cn';
 import { default as emojiENLocales } from './locales/en';
 import { IEmojiGroupList } from '../../../interface';
@@ -126,6 +126,17 @@ const parseTextToRenderArray = (text: string): Array<{ type: 'text' | 'image'; c
   return result;
 };
 
+const filterEmojisInNonChineseEnv = (list: string[]) => {
+  const language = state.get('currentLanguage') || 'zh';
+  if (!(language === 'zh' || language === 'zh_tw')) {
+    return list.filter((item) => {
+      return !EXCLUDED_EMOJI_LIST.includes(item);
+    });
+  } else {
+    return list;
+  }
+}
+
 export {
   EMOJI_GROUP_LIST,
   CUSTOM_BIG_EMOJI_URL,
@@ -138,4 +149,6 @@ export {
   transformTextWithKeysToEmojiNames,
   transformTextWithEmojiNamesToKeys,
   emojiConfig,
+  BASIC_EMOJI_URL,
+  filterEmojisInNonChineseEnv,
 };

package/components/CustomerServiceChat/index-web.vue

@@ -57,6 +57,7 @@
         :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
         :inputToolbarDisplayType="inputToolbarDisplayType"
         :inputToolbarList="props.inputToolbarList"
+        :enableSendingAudio="props.enableSendingAudio"
         @changeToolbarDisplayType="changeToolbarDisplayType"
         @emojiShow="emojiShow"
         @toolShow="toolShow"
@@ -149,6 +150,7 @@ interface IProps {
   enableAINote?: number;
   enableURLDetection?: number;
   headerConfig?: IHeaderConfig;
+  enableSendingAudio?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -192,6 +194,7 @@ const props = withDefaults(defineProps<IProps>(), {
   enableAINote: 1,
   langList: () => [],
   enableURLDetection: 0,
+  enableSendingAudio: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -329,6 +332,11 @@ try {
 }
 
 onMounted(() => {
+  // 如果组件挂载在 sdk login 之后，需再次设置 displayMessageReadReceipt，确保状态准确
+  if (TUIChatEngine.isReady()) {
+    switchReadStatus(state.get('showReadStatus'));
+  }
+
   TUIStore.watch(StoreName.CONV, {
     currentConversationID: onCurrentConversationIDUpdate,
   });
@@ -436,8 +444,8 @@ function toolShow(){
   toolShowH5.value = !toolShowH5.value;
 }
 
-function blurToolAndEmojiH5(){
-  if(emojiOpen.value === true){
+function blurToolAndEmojiH5() {
+  if (emojiOpen.value === true) {
     emojiOpen.value = false;
   }
   toolShowH5.value = false;

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

@@ -9,16 +9,21 @@
         !isPC && 'message-input-container-h5',
       ]"
     >
+      <div v-if="shouldShowAudio" class="audio-icon" @click="audioShow">
+        <Icon :file="isInAudioMode ? keyboardIcon : audioIcon" width="24px" height="24px"/>
+      </div>
       <MessageInputEditor
         ref="editor"
-        :placeholder="props.placeholder"
+        :placeholder="placeholder"
         :isMuted="props.isMuted"
         :muteText="props.muteText"
         :enableInput="props.enableInput"
         :enableTyping="props.enableTyping"
         :enableDragUpload="props.enableDragUpload"
-        :hasInputTool="shouldShowToolbar"
-        :hasEmojiTool="shouldShowEmoji"
+        :isInAudioMode="isInAudioMode"
+        :shouldShowToolbar="shouldShowToolbar"
+        :shouldShowEmoji="shouldShowEmoji"
+        :shouldShowAudio="shouldShowAudio"
         @sendMessage="sendMessage"
         @onTyping="onTyping"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
@@ -47,6 +52,7 @@ import {
   TUIStore,
   StoreName,
   IConversationModel,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import vue from '../../../adapter-vue';
 import MessageInputEditor from './message-input-editor-web.vue';
@@ -59,14 +65,14 @@ import Icon from '../../common/Icon.vue';
 import emojiIcon from '../../../assets/emoji.png';
 import toolIcon from '../../../assets/more_tools.png';
 import sendButtonIcon from '../../../assets/send_button_h5.svg';
+import audioIcon from '../../../assets/audio-blue.svg';
+import keyboardIcon from '../../../assets/keyboard-icon.svg';
 import { INPUT_TOOLBAR_TYPE } from '../../../constant';
+import { onUnmounted } from 'vue';
+import Log from '../../../utils/logger';
 const { ref, onMounted, onBeforeUnmount, computed } = vue;
 
 const props = defineProps({
-  placeholder: {
-    type: String,
-    default: 'this is placeholder',
-  },
   isMuted: {
     type: Boolean,
     default: true,
@@ -91,18 +97,50 @@ const props = defineProps({
     type: Array,
     default: undefined,
   },
+  enableSendingAudio: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const emit = defineEmits(['messageSent', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
+const placeholder = ref(TUITranslateService.t('TUIChat.请输入消息'));
 const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
 const showSendButton = ref(false);
+const isInHumanService = ref(false);
 let quoteMessageCloudCustomData:string = '';
+const isInAudioMode = ref(false);
+let hasAudioStream = false;
+let audioStream = null;
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
-})
+  TUIStore.watch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
+  stopAudioStream();
+  document.removeEventListener('visibilitychange', handleVisibilityChange);
+});
+
+const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean}) => {
+  if (data && data.conversationID === currentConversation.value.conversationID) {
+    isInHumanService.value = data.value;
+    if (!isInHumanService.value) {
+      isInAudioMode.value = false;
+      placeholder.value = TUITranslateService.t('TUIChat.请输入消息');
+      stopAudioStream();
+    }
+  }
+};
 
 onBeforeUnmount(() => {
   // document.removeEventListener('click', handleClick);
@@ -176,21 +214,58 @@ const toolShow = () => {
 const blurToolAndEmojiH5 = () =>{
   emit('blurToolAndEmojiH5');
 }
+const getAudioStream = async () => {
+  try {
+    stopAudioStream();
+    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    hasAudioStream = true;
+  } catch (err) {
+    Log.e('Error accessing audio stream:', err);
+  }
+}
+const stopAudioStream = () => {
+  if (audioStream) {
+    audioStream.getTracks().forEach(track => track.stop());
+    audioStream = null;
+    hasAudioStream = false;
+  }
+}
+
+const audioShow = () => {
+  isInAudioMode.value = !isInAudioMode.value;
+  if (isInAudioMode.value && !hasAudioStream) {
+    getAudioStream();
+  }
+  placeholder.value = isInAudioMode.value ? TUITranslateService.t('TUIChat.按住说话') : TUITranslateService.t('TUIChat.请输入消息'); 
+  emit('blurToolAndEmojiH5');
+}
 
 const shouldShowToolbar = computed(() => {
   if (props.inputToolbarList !== undefined && props.inputToolbarList.length === 0) {
     return false;
   }
-  if (props.inputToolbarList !== undefined && props.inputToolbarList.length === 1 && props.inputToolbarList[0]?.presetId === INPUT_TOOLBAR_TYPE.EMOJI) {
+  if (props.inputToolbarList !== undefined && props.inputToolbarList.length === 1 && (props.inputToolbarList[0]?.presetId === INPUT_TOOLBAR_TYPE.EMOJI || props.inputToolbarList[0]?.presetId === INPUT_TOOLBAR_TYPE.AUDIO)) {
     return false;
   }
   return true;
 });
 
 const shouldShowEmoji = computed(() => {
-  return props.inputToolbarList === undefined || props.inputToolbarList.some(item => item.presetId === INPUT_TOOLBAR_TYPE.EMOJI && item.isEnabled === 1);
+  return (props.inputToolbarList === undefined || props.inputToolbarList.some(item => item.presetId === INPUT_TOOLBAR_TYPE.EMOJI && item.isEnabled === 1)) && !isInAudioMode.value;
 });
 
+const shouldShowAudio = computed(() => {
+  return isH5 && isInHumanService.value && (props.enableSendingAudio === 1 || (props.inputToolbarList !== undefined && props.inputToolbarList.some(item => item.presetId === INPUT_TOOLBAR_TYPE.AUDIO && item.isEnabled === 1)));
+});
+
+const handleVisibilityChange = () => {
+  if (document.visibilityState === 'hidden') {
+    stopAudioStream();
+  } else if (document.visibilityState === 'visible' && isInAudioMode.value) {
+    getAudioStream();
+  }
+}
+
 defineExpose({
   insertEmoji,
   reEdit,
@@ -246,6 +321,16 @@ defineExpose({
   align-items: center;
 }
 
+.audio-icon {
+  background: #fff;
+  margin-left: 10px;
+  border-radius: 10px;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .input-tool-dialog{
   height: fit-content;
     background: #fff;

package/components/CustomerServiceChat/message-input/message-input-button.vue

@@ -89,6 +89,11 @@ const sendMessage = () => {
   &:hover {
     .message-input-button-hover {
       display: flex;
+      width: max-content;
+      max-width: 60vw;
+      overflow: hidden;
+      word-break: break-word;
+      white-space: normal;
     }
   }
 }