@tencentcloud/ai-desk-customer-vue 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,10 +1,17 @@
-## [1.3.0] (2025-5-21)
+## 1.4.0 @2025.5.27
+
+### Features
+- 支持自定义配置。
+- 支持任务流分支选择后不隐藏。
+- 优化消息列表的样式的滚动体验。
+
+## 1.3.0 @2025.5.21
 
 ### Features
 - 支持订单消息。
 - 优化表单消息、任务流消息、流式消息、Markdown 图文混排等的交互体验。
 
-## [1.1.0] (2025-4-23)
+## 1.1.0 @2025.4.23
 
 ### Features
 - 新增 `initWithProfile` 接口，支持用户端带昵称（nickName）和头像（avatar）登录，提升人工客服与用户交互体验。
@@ -12,13 +19,13 @@
 - 优化发消息体验。
 - 优化组件样式。
 
-## [1.0.1] (2025-4-16)
+## 1.0.1 @2025.4.16
 
 ### Features
 - 简化接入。
 - TUICustomerServer 新增 sendTextMessage/sendCustomMessage/changeLanguage 等接口。
 
-## [1.0.0] (2025-4-10)
+## 1.0.0 @2025.4.10
 
 ### Features
 - 国际化语言，支持简体中文、繁体中文、英语、日语、马来西亚语、印尼语、越南语、泰语、俄语、菲律宾语。

package/assets/face.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#161;&#168;&#230;&#131;&#133;">
+<g id="Union">
+<path d="M5.83268 7.83332C6.29292 7.83332 6.66602 7.46023 6.66602 6.99999C6.66602 6.53975 6.29292 6.16666 5.83268 6.16666C5.37245 6.16666 4.99935 6.53975 4.99935 6.99999C4.99935 7.46023 5.37245 7.83332 5.83268 7.83332Z" fill="black" fill-opacity="0.4"/>
+<path d="M10.9993 6.99999C10.9993 7.46023 10.6263 7.83332 10.166 7.83332C9.70578 7.83332 9.33268 7.46023 9.33268 6.99999C9.33268 6.53975 9.70578 6.16666 10.166 6.16666C10.6263 6.16666 10.9993 6.53975 10.9993 6.99999Z" fill="black" fill-opacity="0.4"/>
+<path d="M7.99945 10.5001C8.74027 10.5001 9.41053 10.198 9.89378 9.71027L10.7634 10.7248C10.0452 11.4116 9.0716 11.8334 7.99945 11.8334C6.92723 11.8334 5.95353 11.4115 5.23532 10.7247L6.10497 9.71011C6.58822 10.1979 7.25855 10.5001 7.99945 10.5001Z" fill="black" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3327 8.49999C15.3327 12.5501 12.0494 15.8333 7.99935 15.8333C3.94926 15.8333 0.666016 12.5501 0.666016 8.49999C0.666016 4.4499 3.94926 1.16666 7.99935 1.16666C12.0494 1.16666 15.3327 4.4499 15.3327 8.49999ZM13.9993 8.49999C13.9993 11.8137 11.3131 14.5 7.99935 14.5C4.68564 14.5 1.99935 11.8137 1.99935 8.49999C1.99935 5.18628 4.68564 2.49999 7.99935 2.49999C11.3131 2.49999 13.9993 5.18628 13.9993 8.49999Z" fill="black" fill-opacity="0.4"/>
+</g>
+</g>
+</svg>

package/assets/files.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#150;&#135;&#228;&#187;&#182;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.00065 3.49999L6.33398 2.16666H1.33398V14.5H14.6673V3.49999H7.00065ZM6.17661 4.83332H13.334V6.49999H2.66732V3.49999H5.50994L6.17661 4.83332ZM2.66732 7.83332V13.1667H13.334V7.83332H2.66732Z" fill="black" fill-opacity="0.4"/>
+</g>
+</svg>

package/assets/image.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#155;&#190;&#231;&#137;&#135;">
+<g id="Union">
+<path d="M5.66602 7.16667C6.2183 7.16667 6.66602 6.71895 6.66602 6.16667C6.66602 5.61438 6.2183 5.16667 5.66602 5.16667C5.11373 5.16667 4.66602 5.61438 4.66602 6.16667C4.66602 6.71895 5.11373 7.16667 5.66602 7.16667Z" fill="black" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.666016 2.5V14.5H15.3327V2.5H0.666016ZM13.9993 3.83333H1.99935V10.4027L4.24217 8.51871L6.43497 9.9221L10.914 5.62228L13.9993 7.99186V3.83333ZM1.99935 13.1667V12.144L4.34912 10.1702L6.60076 11.6112L11.0107 7.37772L13.9993 9.67303V13.1667H1.99935Z" fill="black" fill-opacity="0.4"/>
+</g>
+</g>
+</svg>

package/assets/rating_tool_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#181;&#158;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.25305 1.42188L8.10572 1.56398C9.39152 1.77829 10.334 2.8908 10.334 4.19437V5.83345H13.8803C14.7043 5.83345 15.331 6.57327 15.1955 7.38595L14.0845 14.0526C14.0377 14.3329 13.8803 15.1667 13.8803 15.1667H1.33398V6.5H5.16207L7.25305 1.42188ZM2.66732 13.8333H4.66732V7.83333H2.66732V13.8333ZM8.07605 2.92511L6.00065 7.96535V13.8334H12.7693L13.8803 7.16675H9.00065V4.19437C9.00065 3.60851 8.61992 3.09984 8.07605 2.92511Z" fill="black" fill-opacity="0.4"/>
+</g>
+</svg>

package/assets/rating_tool_icon_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5C6168"><path d="M720-120H320v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h218q32 0 56 24t24 56v80q0 7-1.5 15t-4.5 15L794-168q-9 20-30 34t-44 14ZM240-640v520H80v-520h160Z"/></svg>

package/assets/video.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#167;&#134;&#233;&#162;&#145;-&#230;&#137;&#147;&#229;&#188;&#128;">
+<g id="Union">
+<path d="M2.66667 6.5H5.33333V5.16667H2.66667V6.5Z" fill="black" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6667 5.37037L16 4.16667V12.8333L12.6667 11.6296V14.5H0V2.5H12.6667V5.37037ZM14.6667 6.06575V10.9342L11.3333 9.73054V13.1667H1.33333V3.83333H11.3333V7.26946L14.6667 6.06575Z" fill="black" fill-opacity="0.4"/>
+</g>
+</g>
+</svg>

package/assets/video_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5C6168"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Z"/></svg>

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

@@ -6,12 +6,11 @@
       @click="closeChat(currentConversation.conversationID)"
     >
       <Icon :file="backSVG" />
-
     </div>
     <div class="chat-header-container">
       <Icon v-if="!isPC" style="width:32px;" :file="customerAvatarMobile" />
       <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
-         {{ isPC?  currentConversationName : TUITranslateService.t('AIDesk.Hi，我是') + currentConversationName }}
+         {{ currentConversationName }}
       </div>
     </div>
   </div>
@@ -28,6 +27,7 @@ import Icon from '../../common/Icon.vue';
 import backSVG from '../../../assets/back.svg';
 import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
 import { isPC } from '../../../utils/env';
+import state from '../../../utils/state';
 const { ref, onMounted, onUnmounted } = vue;
 
 interface IProps {
@@ -37,7 +37,7 @@ interface IProps {
 const emits = defineEmits(['closeChat']);
 const currentConversation = ref<IConversationModel>();
 const currentConversationName = ref('');
-const typingStatus = ref(false);
+const isTyping = ref(false);
 
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
@@ -48,8 +48,8 @@ onMounted(() => {
     currentConversation: onCurrentConversationUpdated,
   });
 
-  TUIStore.watch(StoreName.CHAT, {
-    typingStatus: onTypingStatusUpdated,
+  TUIStore.watch(StoreName.CUSTOM, {
+    isTyping: onTypingStatusUpdated,
   });
 });
 
@@ -58,8 +58,8 @@ onUnmounted(() => {
     currentConversation: onCurrentConversationUpdated,
   });
 
-  TUIStore.unwatch(StoreName.CHAT, {
-    typingStatus: onTypingStatusUpdated,
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isTyping: onTypingStatusUpdated,
   });
 });
 
@@ -69,17 +69,19 @@ const closeChat = (conversationID: string | undefined) => {
 
 function onCurrentConversationUpdated(conversation: IConversationModel) {
   currentConversation.value = conversation;
-  currentConversationName.value = currentConversation?.value?.getShowName();
+  currentConversationName.value = currentConversation.value?.getShowName();
 }
 
 function onTypingStatusUpdated(status: boolean) {
-  typingStatus.value = status;
-  if (typingStatus.value) {
-    currentConversationName.value
-      = TUITranslateService.t('TUIChat.对方正在输入');
+  isTyping.value = status;
+  if (isTyping.value && state.get('showTyping') === 1) {
+    currentConversationName.value = TUITranslateService.t('TUIChat.对方正在输入');
   } else {
-    currentConversationName.value
-      = currentConversation.value?.getShowName() || '';
+    if (isPC) {
+      currentConversationName.value = currentConversation.value?.getShowName();
+    } else {
+      currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value?.getShowName();
+    }
   }
 }
 </script>

package/components/CustomerServiceChat/index-web.vue

@@ -28,6 +28,7 @@
           !isPC && 'tui-chat-h5-message-input-toolbar'
         ]"
         :displayType="inputToolbarDisplayType"
+        :inputToolbarList="props.inputToolbarList"
         @insertEmoji="insertEmoji"
         @changeToolbarDisplayType="changeToolbarDisplayType"
         @scrollToLatestMessage="scrollToLatestMessage"
@@ -42,10 +43,12 @@
         :muteText="muteText"
         :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
         :inputToolbarDisplayType="inputToolbarDisplayType"
+        :inputToolbarList="props.inputToolbarList"
         @changeToolbarDisplayType="changeToolbarDisplayType"
         @emojiShow="emojiShow"
         @toolShow="toolShow"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
+        @messageSent="onMessageSent"
       />
       <div class="input-toolbar-h5">
         <div :class="['emoji-dialog-h5',(toolShowH5 && !emojiOpen)?'tool-dialog-h5':'']">
@@ -63,6 +66,7 @@
             ]"
             :isH5ToolShow="toolShowH5"
             :displayType="inputToolbarDisplayType"
+            :inputToolbarList="props.inputToolbarList"
             @insertEmoji="insertEmoji"
             @changeToolbarDisplayType="changeToolbarDisplayType"
             @scrollToLatestMessage="scrollToLatestMessage"
@@ -81,7 +85,7 @@ import {
   TUIChatEngine,
   TUIConversationService,
   TUIStore,
-  TUITranslateService
+  TUITranslateService,
 } from '@tencentcloud/chat-uikit-engine';
 import TUICore, {TUIConstants, TUILogin} from '@tencentcloud/tui-core';
 import ChatHeader from './chat-header/index-web.vue';
@@ -89,24 +93,37 @@ import MessageList from './message-list/index-web.vue';
 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} from '../../interface';
-import {isSupportedLang} from '../../utils/';
+import { isH5, isPC } from '../../utils/env';
+import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel } from '../../interface';
+import { isSupportedLang } from '../../utils/';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
 import { Toast, TOAST_TYPE } from '../common/Toast/index-web';
+import state from '../../utils/state.js';
+import { switchReadStatus } from '../../utils/utils';
 
 const { ref, onMounted, onUnmounted, computed, nextTick } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
-  SDKAppID?:number;
-  userID?:string;
-  userSig?:string;
-  robotLang?:string;
-  userLang?:string;
-  toolbarButtonList?:ToolbarButtonModel[];
+  SDKAppID?: number;
+  userID?: string;
+  userSig?: string;
+  robotLang?: string;
+  userLang?: string;
+  toolbarButtonList?: ToolbarButtonModel[];
+  showAvatar?: number;
+  robotAvatar?: string;
+  staffAvatar?: string;
+  userAvatar?: string;
+  showNickName?: number;
+  robotNickName?: string;
+  staffNickName?: string;
+  userNickName?: string;
+  inputToolbarList?: InputToolbarModel[];
+  showReadStatus?: number;
+  showTyping?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -126,8 +143,17 @@ const props = withDefaults(defineProps<IProps>(), {
   userID: '',
   userSig: '',
   robotLang: '',
-  userLang:'',
-  toolbarButtonList:() => [] as ToolbarButtonModel[]
+  userLang: '',
+  showReadStatus: 1,
+  showAvatar: 1,
+  robotAvatar: '',
+  staffAvatar: '',
+  userAvatar: '',
+  showNickName: 0,
+  robotNickName: '',
+  staffNickName: '',
+  userNickName: '',
+  showTyping: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -140,6 +166,7 @@ const loginCustomerUIKit = () => {
     Log.i(`login success, robotLang:${props.robotLang}`);
     let conversationID = 'C2C@customer_service_account';
     TUIConversationService.switchConversation(conversationID);
+    switchReadStatus(props.showReadStatus);
     TUIChatEngine.chat.callExperimentalAPI('isFeatureEnabledForStat', Math.pow(2, 42));
   }).catch((error) => {
     Toast({
@@ -185,15 +212,39 @@ const initLanguage = () => {
   TUITranslateService.changeLanguage(language);
 }
 
+const setAvatarNickName = () => {
+  state.set('avatarNickName', {
+    showAvatar: props.showAvatar,
+    showNickName: props.showNickName,
+    userAvatar: props.userAvatar,
+    staffAvatar: props.staffAvatar,
+    robotAvatar: props.robotAvatar,
+    userNickName: props.userNickName,
+    staffNickName: props.staffNickName,
+    robotNickName: props.robotNickName,
+  });
+}
+
+const setShowReadStatus = () => {
+  state.set('showReadStatus', props.showReadStatus);
+}
+
+const setShowTyping = () => {
+  state.set('showTyping', props.showTyping);
+}
+
 try {
   const userContext = TUILogin.getContext();
-  if(userContext.userID == '' && props.SDKAppID!==0 && props.userID!=='' && props.userSig!==''){
+  if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
     loginCustomerUIKit();
     if (props.robotLang && !isSupportedLang(props.robotLang)) {
       Log.w(`robotLang:${props.robotLang} is not supported`);
     }
   }
   initLanguage();
+  setAvatarNickName();
+  setShowReadStatus();
+  setShowTyping();
 } catch (e) {
   console.log(e)
 }
@@ -236,6 +287,11 @@ const sendMessage = () => {
   messageInputRef.value?.sendMessage();
 }
 
+const onMessageSent = () => {
+  // 发送消息后列表滚动到底部
+  messageListRef.value?.scrollToLatestMessage();
+}
+
 const handleEditor = (message: IMessageModel, type: string) => {
   if (!message || !type) return;
   switch (type) {

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

@@ -15,6 +15,8 @@
         :enableInput="props.enableInput"
         :enableTyping="props.enableTyping"
         :enableDragUpload="props.enableDragUpload"
+        :hasInputTool="shouldShowToolbar"
+        :hasEmojiTool="shouldShowEmoji"
         @sendMessage="sendMessage"
         @onTyping="onTyping"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
@@ -24,10 +26,10 @@
         v-if="!props.isMuted && isPC"
         @sendMessage="sendMessage"
       />
-      <div v-if="isH5" class="emoji-icon" id="emoji-icon-h5" @click="emojiShow">
+      <div v-if="isH5 && shouldShowEmoji" :class="['emoji-icon',!shouldShowToolbar && isH5 ? 'emoji-h5-no-toolbar' : '']" id="emoji-icon-h5" @click="emojiShow">
         <Icon :file="emojiIcon" width="24px" height="24px"/>
       </div>
-      <div v-show="isH5 && !showSendButton" class="tool-icon" @click="toolShow">
+      <div v-show="isH5 && shouldShowToolbar && !showSendButton" class="tool-icon" @click="toolShow">
         <Icon :file="toolIcon" width="24px" height="24px"/>
       </div>
       <div v-show="isH5 && showSendButton" class="send-button-h5" @click="sendMessage">
@@ -55,7 +57,8 @@ 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';
-const { ref,onMounted,onBeforeUnmount } = vue;
+import { INPUT_TOOLBAR_TYPE } from '../../../constant';
+const { ref, onMounted, onBeforeUnmount, computed } = vue;
 
 const props = defineProps({
   placeholder: {
@@ -82,9 +85,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  inputToolbarList: {
+    type: Array,
+    default: undefined,
+  },
 });
 
-const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
+const emit = defineEmits(['messageSent', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
 const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
@@ -130,7 +137,8 @@ const sendMessage = async () => {
     return editor;
   });
   await sendMessages(editorContentList, currentConversation.value);
-  emit('sendMessage');
+  // 注意这里不要 emit 'sendMessage'，避免写出死循环
+  emit('messageSent');
   editor.value?.resetEditor();
   showSendButton.value = false;
 };
@@ -162,6 +170,20 @@ const blurToolAndEmojiH5 = () =>{
   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) {
+    return false;
+  }
+  return true;
+});
+
+const shouldShowEmoji = computed(() => {
+  return props.inputToolbarList === undefined || props.inputToolbarList.some(item => item.presetId === INPUT_TOOLBAR_TYPE.EMOJI && item.isEnabled === 1);
+});
+
 defineExpose({
   insertEmoji,
   reEdit,
@@ -202,6 +224,10 @@ defineExpose({
   border: none;
 }
 
+.emoji-h5-no-toolbar {
+  margin-right: 10px;
+}
+
 .tool-icon {
   background: #fff;
   margin-left: 5px;

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

@@ -2,7 +2,10 @@
   <div
     :class="[
       'message-input-editor-container',
+      isPC && !props.hasInputTool && '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',
     ]"
   >
     <div
@@ -74,6 +77,14 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  hasEmojiTool: {
+    type: Boolean,
+    default: true,
+  },
+  hasInputTool: {
+    type: Boolean,
+    default: true,
+  }
 });
 
 const emits = defineEmits(['sendMessage', 'onTyping', 'blurToolAndEmojiH5', 'isInputNotEmpty']);
@@ -715,6 +726,10 @@ defineExpose({
     padding: 3px 10px 10px;
   }
 
+  &-container-no-inputTool {
+    padding: 10px 10px 10px;
+  }
+
   &-area {
     box-sizing: border-box;
     font-family: PingFangSC-Regular;
@@ -787,6 +802,15 @@ defineExpose({
     }
   }
 }
+
+.message-input-editor-container-h5-no-emoji {
+  border-radius: 10px;
+  margin: 10px 10px 0 10px;
+}
+
+.message-input-editor-container-h5-no-emoji-no-tool {
+  border-radius: 10px;
+}
 </style>
 <style lang="scss">
 /* stylelint-disable-next-line selector-class-pattern */

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

@@ -77,7 +77,7 @@ import {
   TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
-import faceIcon from '../../../../assets/face.png';
+import faceIcon from '../../../../assets/face.svg';
 import { EMOJI_TYPE } from '.././../../../constant';
 import { isPC, isH5 } from '../../../../utils/env';
 import { IEmojiGroupList, IEmojiGroup } from '../../../../interface';

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

@@ -23,7 +23,7 @@ import {
   TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import vue from '../../../../adapter-vue';
-import faceIcon from '../../../../assets/face.png';
+import faceIcon from '../../../../assets/face.svg';
 import EmojiPickerDialog from './emoji-picker-dialog.vue';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
 import { isH5 } from '../../../../utils/env';

package/components/CustomerServiceChat/message-input-toolbar/file-upload/index.vue

@@ -2,8 +2,8 @@
   <ToolbarItemContainer
     :iconFile="isH5?fileIconH5:fileIcon"
     :title="TUITranslateService.t('文件')"
-    iconWidth='21px'
-    iconHeight='18px'
+    iconWidth='20px'
+    iconHeight='20px'
     :needDialog="false"
     @onIconClick="onIconClick"
   >
@@ -31,10 +31,10 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import vue from '../../../../adapter-vue';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
-import fileIcon from '../../../../assets/files.png';
+import fileIcon from '../../../../assets/files.svg';
 import fileIconH5 from '../../../../assets/file-h5.png';
 import { isPC, isH5 } from '../../../../utils/env';
-import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../../utils/utils';
 const { ref } = vue;
 
 const inputRef = ref();
@@ -47,7 +47,7 @@ TUIStore.watch(StoreName.CONV, {
 });
 
 const onIconClick = () => {
-    inputRef?.value?.click && inputRef?.value?.click();
+  inputRef?.value?.click && inputRef?.value?.click();
 };
 
 const sendFileMessage = (e: any) => {
@@ -55,9 +55,7 @@ const sendFileMessage = (e: any) => {
     return;
   }
   const options = {
-    to:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: getTo(currentConversation?.value),
     conversationType: currentConversation?.value?.type,
     payload: {
       file: e?.target,

package/components/CustomerServiceChat/message-input-toolbar/image-upload/index.vue

@@ -2,8 +2,8 @@
   <ToolbarItemContainer
     :iconFile="imageToolbarForShow.icon"
     :title="imageToolbarForShow.title"
-    iconWidth='21px'
-    iconHeight= '18px'
+    iconWidth='20px'
+    iconHeight='20px'
     :needDialog="false"
     @onIconClick="onIconClick"
     :isH5ToolShow="isH5ToolShow"
@@ -35,9 +35,9 @@ import { TUIGlobal } from '@tencentcloud/universal-api';
 import vue from '../../../../adapter-vue';
 import { isPC, isH5 } from '../../../../utils/env';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
-import imageIcon from '../../../../assets/image.png';
+import imageIcon from '../../../../assets/image.svg';
 import imageUniIcon from '../../../../assets/image-uni.png';
-import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+import { getTo, isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
 const { ref, computed } = vue;
 
 const props = defineProps({
@@ -74,7 +74,7 @@ TUIStore.watch(StoreName.CONV, {
 });
 
 const imageToolbarForShow = computed((): { icon: string; title: string } => {
-  if(isH5){
+  if (isH5) {
     return IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
   }
   else {
@@ -83,10 +83,9 @@ const imageToolbarForShow = computed((): { icon: string; title: string } => {
 });
 
 const onIconClick = () => {
-    if (inputRef.value?.click) {
-      inputRef.value.click();
-    }
-  
+  if (inputRef.value?.click) {
+    inputRef.value.click();
+  }
 };
 
 const sendImageInWeb = (e: any) => {
@@ -103,7 +102,7 @@ const sendImageInWeb = (e: any) => {
       // 处理视频文件
       sendVideoMessage(e?.target);
     }
-  
+
   e.target.value = '';
 };
 
@@ -112,9 +111,7 @@ const sendImageMessage = (files: any) => {
     return;
   }
   const options = {
-    to:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: getTo(currentConversation?.value),
     conversationType: currentConversation?.value?.type,
     payload: {
       file: files,
@@ -129,9 +126,7 @@ const sendVideoMessage = (file: any) => {
     return;
   }
   const options = {
-    to:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: getTo(currentConversation?.value),
     conversationType: currentConversation?.value?.type,
     payload: {
       file,