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

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

@@ -7,20 +7,24 @@
     }"
   >
     <div :class="(!isPC) ? 'input-quote-content-h5' :'input-quote-content'">
-      <div>
+      <div v-if="isPC" class="max-one-line">
+        {{ (quoteMessage.nick || quoteMessage.from)+ ': ' + quoteContentText  }}
+      </div>
+      <div v-else class="input-quote-message-h5 max-one-line">
+        <div class="input-quote-sender-h5">
+          {{ (quoteMessage.nick || quoteMessage.from) }}
+        </div>
         <div class="max-one-line">
-          {{ (quoteMessage.nick || quoteMessage.from)+ ': ' + quoteContentText  }}
+           {{ quoteContentText }}
         </div>
       </div>
-        <Icon
-          class="input-quote-close-icon"
-          :file="closeIcon"
-          width="11px"
-          height="11px"
-          @onClick="cancelQuote"
-        />
-
-      
+      <Icon
+        class="input-quote-close-icon"
+        :file="closeIcon"
+        width="11px"
+        height="11px"
+        @onClick="cancelQuote"
+      />
     </div>
   </div>
 </template>
@@ -120,7 +124,7 @@ function onQuoteMessageUpdated(options?: {
 
 <style lang="scss" scoped>
 %common-container-style {
-  margin: 5px 100px 5px 8px;
+  margin: 5px 30px 5px 8px;
   display: flex;
   flex: 0 1 auto;
 
@@ -148,15 +152,22 @@ function onQuoteMessageUpdated(options?: {
   .input-quote-content-h5 {
     display: flex;
     justify-content: space-between;
-    background-color: #fafafa;
-    padding: 12px;
+    background-color: #fff;
+    padding: 8px 16px 8px 8px;
     font-size: 12px;
     align-items: center;
-    line-height: 16px;
     max-width: 100%;
+    height: 60px;
     box-sizing: border-box;
     width:100%;
 
+    .input-quote-message-h5 {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
     .max-one-line {
       flex: 0 1 auto;
       overflow: hidden;
@@ -173,21 +184,19 @@ function onQuoteMessageUpdated(options?: {
   }
 
   .input-quote-close-icon {
-    
+    margin-left: 8px;
   }
 }
 
 .input-quote-container {
   @extend %common-container-style;
-
-  max-width: 500px;
+  max-width: 700px;
 }
 
 
 .input-quote-container-h5 {
   @extend %common-container-style;
   width:100%;
-  // max-width: 250px;
-  margin: 5px 0 5px 0;
+  margin: 0px 0 5px 5px;
 }
 </style>

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

@@ -21,41 +21,41 @@
           class="emoji"
           :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
         >
-        <img
-          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"
-          class="emoji-big"
-          :src="currentTabItem.url + childrenItem + '@2x.png'"
-        >
-        <img
-          v-else
-          class="emoji-custom emoji-big"
-          :src="currentTabItem.url + childrenItem"
-        >
+<!--        <img-->
+<!--          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"-->
+<!--          class="emoji-big"-->
+<!--          :src="currentTabItem.url + childrenItem + '@2x.png'"-->
+<!--        >-->
+<!--        <img-->
+<!--          v-else-->
+<!--          class="emoji-custom emoji-big"-->
+<!--          :src="currentTabItem.url + childrenItem"-->
+<!--        >-->
       </li>
     </ul>
     <ul class="emoji-picker-tab">
-      <li
-        v-for="(item, index) in list"
-        :key="index"
-        class="emoji-picker-tab-item"
-        @click="toggleEmojiTab(index)"
-      >
-        <Icon
-          v-if="item.type === EMOJI_TYPE.BASIC"
-          class="icon"
-          :file="faceIcon"
-        />
-        <img
-          v-else-if="item.type === EMOJI_TYPE.BIG"
-          class="icon-big"
-          :src="item.url + item.list[0] + '@2x.png'"
-        >
-        <img
-          v-else
-          class="icon-custom icon-big"
-          :src="item.url + item.list[0]"
-        >
-      </li>
+<!--      <li-->
+<!--        v-for="(item, index) in list"-->
+<!--        :key="index"-->
+<!--        class="emoji-picker-tab-item"-->
+<!--        @click="toggleEmojiTab(index)"-->
+<!--      >-->
+<!--        <Icon-->
+<!--          v-if="item.type === EMOJI_TYPE.BASIC"-->
+<!--          class="icon"-->
+<!--          :file="faceIcon"-->
+<!--        />-->
+<!--        <img-->
+<!--          v-else-if="item.type === EMOJI_TYPE.BIG"-->
+<!--          class="icon-big"-->
+<!--          :src="item.url + item.list[0] + '@2x.png'"-->
+<!--        >-->
+<!--        <img-->
+<!--          v-else-->
+<!--          class="icon-custom icon-big"-->
+<!--          :src="item.url + item.list[0]"-->
+<!--        >-->
+<!--      </li>-->
       <li
         v-if="isH5"
         class="send-btn"
@@ -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';
@@ -116,7 +116,7 @@ const toggleEmojiTab = (index: number) => {
   currentEmojiList.value = list?.value[index]?.list;
   // web & h5 side scroll to top
   emojiPickerListRef?.value && (emojiPickerListRef.value.scrollTop = 0);
-  
+
 };
 
 const select = (item: any, index: number) => {
@@ -128,7 +128,7 @@ const select = (item: any, index: number) => {
     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);
@@ -159,7 +159,7 @@ const sendFaceMessage = (index: number, listItem: IEmojiGroup) => {
 
 function sendMessage() {
   emits('sendMessage');
-  
+
 }
 
 function onCurrentConversationUpdate(conversation: IConversationModel) {

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,

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

@@ -11,20 +11,48 @@
         !isPC && 'message-input-toolbar-h5-list',
       ]"
     >
-      <EmojiPicker
-        ref="emojiPickerRef"
-        @insertEmoji="insertEmoji"
-        @dialogShowInH5="dialogShowInH5"
-        @dialogCloseInH5="dialogCloseInH5"
-        @changeToolbarDisplayType="
-          (type) => emits('changeToolbarDisplayType', type)
-        "
-        :isH5EmojiShow="isH5EmojiShow"
-        @sendMessage="sendMessage"
-      />
-      <ImageUpload imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
-      <FileUpload :isH5ToolShow="isH5ToolShow"/>
-      <!-- <VideoUpload videoSourceType="album" /> -->
+      <template v-if="props.inputToolbarList === undefined">
+        <EmojiPicker
+          v-if="isPC"
+          ref="emojiPickerRef"
+          @insertEmoji="insertEmoji"
+          @dialogShowInH5="dialogShowInH5"
+          @dialogCloseInH5="dialogCloseInH5"
+          @changeToolbarDisplayType="
+            (type) => emits('changeToolbarDisplayType', type)
+          "
+          :isH5EmojiShow="isH5EmojiShow"
+          @sendMessage="sendMessage"
+        />
+        <ImageUpload imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
+        <FileUpload :isH5ToolShow="isH5ToolShow"/>
+      </template>
+      <template v-else v-for="(item, index) in props.inputToolbarList">
+        <EmojiPicker
+          v-if="isPC && item.presetId === INPUT_TOOLBAR_TYPE.EMOJI && item.isEnabled === 1"
+          ref="emojiPickerRef"
+          @insertEmoji="insertEmoji"
+          @dialogShowInH5="dialogShowInH5"
+          @dialogCloseInH5="dialogCloseInH5"
+          @changeToolbarDisplayType="
+            (type) => emits('changeToolbarDisplayType', type)
+          "
+          :isH5EmojiShow="isH5EmojiShow"
+          @sendMessage="sendMessage"
+        />
+        <ImageUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.IMAGE && item.isEnabled === 1" imageSourceType="album" :isH5ToolShow="isH5ToolShow"/>
+        <FileUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.FILE && item.isEnabled === 1" :isH5ToolShow="isH5ToolShow"/>
+        <VideoUpload v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.VIDEO && item.isEnabled === 1" videoSourceType="album" :isH5ToolShow="isH5ToolShow"/>
+        <RatingTool v-else-if="item.presetId === INPUT_TOOLBAR_TYPE.RATING && item.isEnabled === 1 && isInHumanService" :isH5ToolShow="isH5ToolShow"/>
+        <UserDefineTool
+          v-else-if="item.isEnabled === 1 && item.isPreset === 0 && item.presetId !== INPUT_TOOLBAR_TYPE.EMOJI"
+          :isH5ToolShow="isH5ToolShow"
+          :title="item.title"
+          :icon="item.icon"
+          :type="item.type"
+          :content="item.content"
+        />
+      </template>
     </div>
     <div
       v-if="isH5"
@@ -44,14 +72,18 @@ import EmojiPicker from './emoji-picker/index.vue';
 import ImageUpload from './image-upload/index.vue';
 import FileUpload from './file-upload/index.vue';
 import VideoUpload from './video-upload/index.vue';
+import RatingTool from './rating-tool/index.vue';
 import { isPC, isH5 } from '../../../utils/env';
-import { ToolbarDisplayType } from '../../../interface';
+import { ToolbarDisplayType, InputToolbarModel } from '../../../interface';
+import UserDefineTool from './user-define-input-tool.vue'
+import { INPUT_TOOLBAR_TYPE } from '../../../constant';
 const { ref, onMounted, onUnmounted, watch } = vue;
 
 interface IProps {
   displayType: ToolbarDisplayType;
-  isH5EmojiShow?:boolean;
-  isH5ToolShow?:boolean;
+  isH5EmojiShow?: boolean;
+  isH5ToolShow?: boolean;
+  inputToolbarList?: InputToolbarModel[];
 }
 interface IEmits {
   (e: 'scrollToLatestMessage'): void;
@@ -70,17 +102,24 @@ const h5Dialog = ref<HTMLElement>();
 const currentConversation = ref<IConversationModel>();
 const isGroup = ref<boolean>(false);
 const emojiPickerRef = ref<InstanceType<typeof EmojiPicker>>();
+const isInHumanService = ref(false);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
   });
+  TUIStore.watch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
   });
+  TUIStore.unwatch(StoreName.CUSTOM, {
+    isInHumanService: onInHumanServiceUpdate,
+  });
 });
 
 watch(
@@ -99,7 +138,7 @@ watch(
   (newValue) => {
     if (newValue === false) {
       emojiPickerRef.value?.closeEmojiPicker();
-    } 
+    }
   },
 );
 
@@ -109,6 +148,10 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
     = currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
 };
 
+const onInHumanServiceUpdate = (value: boolean) => {
+  isInHumanService.value = value;
+};
+
 const insertEmoji = (emojiObj: object) => {
   emits('insertEmoji', emojiObj);
 };

package/components/CustomerServiceChat/message-input-toolbar/rating-tool/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="getIcon()"
+    :title="props.title"
+    :iconWidth="isPC ? '20px' : '25px'"
+    :iconHeight="isPC ? '20px' : '25px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+    :isH5ToolShow="isH5ToolShow"
+  />
+</template>
+<script lang="ts" setup>
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import vue from '../../../../adapter-vue';
+import { isPC, isH5 } from '../../../../utils/env';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import ratingToolIcon from '../../../../assets/rating_tool_icon.svg'
+import ratingToolIconH5 from '../../../../assets/rating_tool_icon_h5.svg';
+import { getTo } from '../../../../utils/utils';
+import { CUSTOM_MESSAGE_SRC } from '../../../../constant';
+const { ref, onMounted, onUnmounted } = vue;
+
+const props = defineProps({
+  isH5ToolShow:{
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: TUITranslateService.t('AIDesk.提交评价')
+  },
+  icon: {
+    type: String,
+    default: '',
+  }
+});
+
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const getIcon = (): string => {
+  return isH5 ? ratingToolIconH5 : ratingToolIcon;
+}
+
+const onIconClick = () => {
+  TUIChatService.sendCustomMessage({
+    to: getTo(currentConversation?.value),
+    conversationType: currentConversation?.value?.type,
+    payload:{
+      data:JSON.stringify({
+        src: CUSTOM_MESSAGE_SRC.USER_SATISFACTION,
+        customerServicePlugin: 0,
+      }),
+    },
+  },{ onlineUserOnly: true })
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../style/common";
+</style>

package/components/CustomerServiceChat/message-input-toolbar/toolbar-item-container/style/h5.scss

@@ -6,11 +6,20 @@
   margin-right:15px;
   &-title {
     margin-top:5px;
+    font-size: 14px;
+    white-space: nowrap;
+    max-width: 85px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   &-icon{
     background-color: #fff;
-    padding:20px;
+    width: 40px;
     border-radius: 10px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   &-dialog {
     position: static !important;

package/components/CustomerServiceChat/message-input-toolbar/user-define-input-tool.vue

@@ -0,0 +1,80 @@
+<template>
+  <ToolbarItemContainer
+    :iconFile="getIcon()"
+    :title="props.title"
+    :iconWidth="isPC ? '20px' : '25px'"
+    :iconHeight="isPC ? '20px' : '25px'"
+    :needDialog="false"
+    @onIconClick="onIconClick"
+    :isH5ToolShow="isH5ToolShow">
+    <div :class="['image-upload', !isPC && 'image-upload-h5', 'image-video']">
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script lang="ts" setup>
+import {
+  TUIChatService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import vue from '../../../adapter-vue';
+import { isPC } from '../../../utils/env';
+import ToolbarItemContainer from './toolbar-item-container/index.vue';
+import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo } from '../../../utils/utils';
+const { ref } = vue;
+
+const props = defineProps({
+  isH5ToolShow: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: Number,
+    default: 1
+  },
+  content: {
+    type: String,
+    default: ''
+  }
+});
+
+const currentConversation = ref<IConversationModel>();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const getIcon = (): string => {
+  return props.icon;
+}
+
+const onIconClick = () => {
+  if (props.type === 1 && props.content) {
+    TUIChatService.sendTextMessage({
+      to: getTo(currentConversation?.value),
+      conversationType: currentConversation?.value?.type,
+      payload: {
+        text: props.content
+      },
+      needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    });
+  } else if (props.type === 2 && props.content) {
+    openSafeUrl(props.content);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../style/common";
+</style>