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

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

@@ -1,16 +1,16 @@
 <template>
-  <div :class="['chat-header', !isPC && 'chat-header-h5']">
+  <div :class="['chat-header', isH5 && 'chat-header-h5']">
     <div class="chat-header-name">
       <div
-        v-if="!isPC && props.canCloseChat"
-        :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
+        v-if="isH5 && props.canCloseChat"
+        :class="['chat-header-back', isH5 && 'chat-header-h5-back']"
         @click="closeChat(currentConversation.conversationID)"
       >
         <Icon :file="backSVG" />
       </div>
       <div class="chat-header-container">
-        <Icon v-if="!isPC" width="32px" height="23px" :file="customerAvatarMobile" />
-        <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
+        <Icon v-if="showHeaderIcon" :width="headerIconWidth" :height="headerIconHeight" :file="headerIcon" />
+        <div :class="['chat-header-content', isH5 && 'chat-header-h5-content']">
           {{ currentConversationName }}
         </div>
       </div>
@@ -60,16 +60,18 @@ import backSVG from '../../../assets/back.svg';
 import arrowDown from '../../../assets/language_arrow_down.svg';
 import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
 import languageSelectedIcon from '../../../assets/language_check.svg';
-import { isPC } from '../../../utils/env';
+import { isH5 } from '../../../utils/env';
 import state from '../../../utils/state';
 import { SUPPORTED_LANGUAGES } from '../../../constant';
-const { ref, onMounted, onUnmounted } = vue;
+import { IHeaderConfig } from '../../../interface';
+const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
   currentLang?: string;
   enableMultilingual: number;
   langList?: Array<string>;
+  headerConfig?: IHeaderConfig;
 }
 interface ILanguage {
   name: string;
@@ -92,6 +94,31 @@ const props = withDefaults(defineProps<IProps>(), {
   langList: () => [],
 });
 
+const showHeaderIcon = computed(() => {
+  if (isH5) {
+    if (props.headerConfig && props.headerConfig.showLogo === false) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+});
+
+const headerIcon = computed(() => {
+  return (props.headerConfig && props.headerConfig.logo) || customerAvatarMobile;
+});
+
+const headerIconWidth = computed(() => {
+  return (props.headerConfig && props.headerConfig.logoWidth) ?? '32px';
+});
+
+const headerIconHeight = computed(() => {
+  if (props.headerConfig) {
+    return props.headerConfig.logoHeight || '32px';
+  }
+  return '23px';
+});
+
 if (props.enableMultilingual === 1) {
   languageOptionList.value = props.langList
   .map(key => ({
@@ -130,10 +157,14 @@ function setCurrentConversationName() {
   if (!currentConversation.value) {
     return;
   }
-  if (isPC) {
-    currentConversationName.value = currentConversation.value?.getShowName() || '';
+  if (props.headerConfig && props.headerConfig.title) {
+    currentConversationName.value = props.headerConfig.title;
   } else {
-    currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
+    if (isH5) {
+      currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
+    } else {
+      currentConversationName.value = currentConversation.value.getShowName() || '';
+    }
   }
 }
 

package/components/CustomerServiceChat/feedback-modal/index.vue

@@ -174,7 +174,7 @@ export default {
             messageInfo,
           }),
         },
-      });
+      },{ onlineUserOnly: true});
     }
 
     const dialogButtonClick = (item) => {

package/components/CustomerServiceChat/index-web.vue

@@ -13,6 +13,7 @@
         :enableMultilingual="props.enableMultilingual"
         :langList="languageForShowList"
         :currentLang="currentLanguage"
+        :headerConfig="props.headerConfig"
         @closeChat="closeChat"
         @changeLanguage="changeLanguage"
       />
@@ -56,6 +57,7 @@
         :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
         :inputToolbarDisplayType="inputToolbarDisplayType"
         :inputToolbarList="props.inputToolbarList"
+        :enableSendingAudio="props.enableSendingAudio"
         @changeToolbarDisplayType="changeToolbarDisplayType"
         @emojiShow="emojiShow"
         @toolShow="toolShow"
@@ -111,7 +113,7 @@ import MessageInput from './message-input/index-web.vue';
 import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isH5, isPC } from '../../utils/env';
-import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel, QuickOrderModel } from '../../interface';
+import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel, QuickOrderModel, IHeaderConfig} from '../../interface';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
@@ -147,6 +149,8 @@ interface IProps {
   enableFeedback?: number;
   enableAINote?: number;
   enableURLDetection?: number;
+  headerConfig?: IHeaderConfig;
+  enableSendingAudio?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -190,6 +194,7 @@ const props = withDefaults(defineProps<IProps>(), {
   enableAINote: 1,
   langList: () => [],
   enableURLDetection: 0,
+  enableSendingAudio: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -327,6 +332,11 @@ try {
 }
 
 onMounted(() => {
+  // 如果组件挂载在 sdk login 之后，需再次设置 displayMessageReadReceipt，确保状态准确
+  if (TUIChatEngine.isReady()) {
+    switchReadStatus(state.get('showReadStatus'));
+  }
+
   TUIStore.watch(StoreName.CONV, {
     currentConversationID: onCurrentConversationIDUpdate,
   });
@@ -434,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,13 @@ 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';
 const { ref, onMounted, onBeforeUnmount, computed } = vue;
 
 const props = defineProps({
-  placeholder: {
-    type: String,
-    default: 'this is placeholder',
-  },
   isMuted: {
     type: Boolean,
     default: true,
@@ -91,18 +96,40 @@ 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);
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
-})
+  TUIStore.watch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
+});
+
+const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean}) => {
+  if (data && data.conversationID === currentConversation.value.conversationID) {
+    isInHumanService.value = data.value;
+  }
+};
 
 onBeforeUnmount(() => {
   // document.removeEventListener('click', handleClick);
@@ -177,18 +204,28 @@ const blurToolAndEmojiH5 = () =>{
   emit('blurToolAndEmojiH5');
 }
 
+const audioShow = () => {
+  isInAudioMode.value = !isInAudioMode.value;
+  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)));
 });
 
 defineExpose({
@@ -246,6 +283,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;