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

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" :key="index">
+        <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>

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

@@ -3,8 +3,8 @@
     :iconFile="handleIcon()"
     :title="handleTitle()"
     :needDialog="false"
-    iconWidth='21px'
-    iconHeight='18px'
+    iconWidth='20px'
+    iconHeight='20px'
     @onIconClick="onIconClick"
   >
     <div :class="['video-upload', !isPC && 'video-upload-h5']">
@@ -32,8 +32,9 @@ import {
 import vue from '../../../../adapter-vue';
 import { isPC } from '../../../../utils/env';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
-import videoIcon from '../../../../assets/video.png';
-import { isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+import videoIcon from '../../../../assets/video.svg';
+import videoIconH5 from '../../../../assets/video_h5.svg'
+import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../../utils/utils';
 const { ref } = vue;
 
 const props = defineProps({
@@ -56,19 +57,15 @@ TUIStore.watch(StoreName.CONV, {
 });
 
 const handleIcon = (): string => {
-    return videoIcon;
-  
+  return isPC ? videoIcon :  videoIconH5;
 };
 
 const handleTitle = (): string => {
-
-    return '视频';
-  
+  return TUITranslateService.t('视频');
 };
 
 const onIconClick = () => {
-    inputRef?.value?.click && inputRef?.value?.click();
-  
+  inputRef?.value?.click && inputRef?.value?.click();
 };
 
 const sendVideoInWeb = (e: any) => {
@@ -84,9 +81,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-list/index-web.vue

@@ -217,8 +217,9 @@ import {
   isEnabledMessageReadReceiptGlobal,
   deepCopy,
 } from '../../../utils/utils';
-import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime } from '../../../utils/index';
+import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject } from '../../../utils/index';
 import { isCustomerConversation } from '../../../index';
+import { CUSTOM_MESSAGE_SRC } from '../../../constant';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -290,9 +291,9 @@ onMounted(() => {
     messageList: onMessageListUpdated,
     messageSource: onMessageSourceUpdated,
     isCompleted: isCompletedUpdated,
+    newMessageList: onNewMessageList,
   });
 
-
   TUIStore.watch(StoreName.CUSTOM, {
     isShowMessagePopMenu: isShowMessagePopMenuUpdated,
   });
@@ -329,6 +330,29 @@ onUnmounted(() => {
   observer = null;
 });
 
+function onNewMessageList(list: IMessageModel[]) {
+  list.forEach((message:IMessageModel) => {
+    if (message?.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
+      const data = JSONToObject(message?.payload?.data);
+      if (data?.src === CUSTOM_MESSAGE_SRC.SEAT_STATUS) {
+        if (data?.content.command === "updateSeatStatus") {
+          if (data.content.content === 'inSeat') {
+            TUIStore.update(StoreName.CUSTOM, "isInHumanService", true);
+          } else if (data.content.content === 'outSeat') {
+            TUIStore.update(StoreName.CUSTOM, "isInHumanService", false);
+          }
+        }
+      } else if (data?.src === CUSTOM_MESSAGE_SRC.TYPING_STATE) {
+        if (data?.typingStatus === 1) {
+          TUIStore.update(StoreName.CUSTOM, 'isTyping', true);
+        } else {
+          TUIStore.update(StoreName.CUSTOM, 'isTyping', false);
+        }
+      }
+    }
+  });
+}
+
 async function onMessageListUpdated(list: IMessageModel[]) {
   if (!isCustomerConversation(currentConversationID.value)) {
     return;
@@ -370,7 +394,6 @@ async function onMessageListUpdated(list: IMessageModel[]) {
     await scrollToPosition({
       scrollToOffset: { bottom: beforeHistoryGetScrollHeight.value },
     });
-    beforeHistoryGetScrollHeight.value = 0;
   } else if (
     scrollButtonInstanceRef.value?.isScrollButtonVisible
     && newLastMessage?.flow === 'in'
@@ -425,8 +448,7 @@ async function scrollToPosition(config: ScrollConfig = {}): Promise<void> {
         if (config.scrollToOffset?.top) {
           container!.scrollTop = config.scrollToOffset.top;
         } else if (config.scrollToOffset?.bottom) {
-          container!.scrollTop
-            = container!.scrollHeight - config.scrollToOffset.bottom;
+          container!.scrollTop = container!.scrollHeight - config.scrollToOffset.bottom;
         }
       }
       resolve();
@@ -574,6 +596,11 @@ const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
 };
 
 function onHeightChanged() {
+  // 如果 view more 导致了子组件派发了 heightChanged 事件，不滚动到最底部，保留原来的滚动位置
+  if (beforeHistoryGetScrollHeight.value > 0) {
+    return;
+  }
+
   scrollToLatestMessage();
 }
 
@@ -616,6 +643,8 @@ async function scrollToLatestMessage() {
   if (messageListRef.value) {
     messageListRef.value.scrollTop = scrollHeight - height;
   }
+  scrollButtonInstanceRef.value?.hideScrollButton();
+  beforeHistoryGetScrollHeight.value = 0;
 }
 
 const handelScrollListScroll = throttle(
@@ -708,7 +737,6 @@ function setAudioPlayed(messageID: string) {
   };
 }
 
-
 defineExpose({
   scrollToLatestMessage,
 });

package/components/CustomerServiceChat/message-list/message-elements/message-bubble-web.vue

@@ -12,21 +12,19 @@
           :class="[message.flow === 'in' ? '' : 'reverse']"
         >
           <Avatar
-          v-if="isPC"
+            v-if="isPC && showAvatar === 1"
             useSkeletonAnimation
-            :url="message.flow=== 'in'? (message.avatar || customerAvatar) : (message.avatar || '')"
+            :url="avatarUrl"
           />
           <main
             :class="['message-body',message.flow==='out' && 'message-body-reverse']"
             @click.stop
           >
             <div
-              v-if="
-                isPC
-              "
+              v-if="isPC && showNickName === 1"
               class="message-body-nick-name"
             >
-              {{ props.content.showName }}
+              {{ nickName }}
             </div>
             <div
               :class="[
@@ -44,7 +42,7 @@
                   isNoPadding && isBlink ? 'blink-shadow' : '',
                   !isNoPadding && isBlink ? 'blink-content' : '',
                   isMultiBranchMsg?'multi-branch-message':'',
-                  (isProductCardMessage && isH5) ? 'product-message-bubble-h5' : (isProductCardMessage ? 'product-message-bubble' : ''),
+                  (isProductCardOrOrderMessage && isH5) ? 'product-order-message-bubble-h5' : (isProductCardOrOrderMessage ? 'product-order-message-bubble' : ''),
                   isPC ? '':'body-mobile',
                 ]"
               >
@@ -142,6 +140,8 @@ import loadingIcon from '../../../../assets/loading.png';
 import customerAvatar from '../../../../assets/customer_avatar.png';
 import { shallowCopyMessage } from '../../../../utils/utils';
 import { isPC,isH5 } from '../../../../utils/env';
+import { JSONToObject } from '../../../../utils/index';
+import state from '../../../../utils/state.js';
 import { CUSTOM_MESSAGE_SRC } from '../../../../constant';
 const { computed, toRefs } = vue;
 
@@ -182,6 +182,16 @@ const needLoadingIconMessageType = [
 ];
 
 const { blinkMessageIDList, messageItem: message } = toRefs(props);
+const {
+  showAvatar,
+  showNickName,
+  robotAvatar,
+  staffAvatar,
+  userAvatar,
+  robotNickName,
+  staffNickName,
+  userNickName,
+} = state.get('avatarNickName');
 
 const isDisplayUnplayMark = computed<boolean>(() => {
   return (
@@ -204,20 +214,56 @@ const hasEmojiReaction = computed(() => {
 });
 
 const isMultiBranchMsg = computed(()=>{
-  if(message.value?.type == "TIMCustomElem"){
-    if(JSON.parse(message.value.payload.data).src == '32'){
-    return true;
+  if (message.value?.type == "TIMCustomElem") {
+    const src = JSON.parse(message.value.payload.data).src;
+    if (src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH || src === CUSTOM_MESSAGE_SRC.BRANCH || src === CUSTOM_MESSAGE_SRC.BRANCH_NUMBER) {
+      return true;
+    }
   }
+  return false;
+});
 
+function isFromRobot(cloudCustomData: string) {
+  try {
+    const jsonObj = JSONToObject(cloudCustomData);
+    return jsonObj.hasOwnProperty("role") && jsonObj.role === "robot";
+  } catch (e) {
+    return false;
   }
-  
-  return false;
+}
+
+const avatarUrl = computed(() => {
+  let url = '';
+  if (message.value?.flow === 'in') {
+    if (isFromRobot(message.value?.cloudCustomData)) {
+      url = robotAvatar || customerAvatar;
+    } else {
+      url = staffAvatar || message.value?.avatar;
+    }
+  } else {
+    url = userAvatar || message.value?.avatar || '';
+  }
+  return url;
 });
 
+const nickName = computed(() => {
+  let nick = '';
+  if (message.value?.flow === 'in') {
+    if (isFromRobot(message.value?.cloudCustomData)) {
+      nick = robotNickName || props.content.showName;
+    } else {
+      nick = staffNickName || props.content.showName;
+    }
+  } else {
+    nick = userNickName || props.content.showName;
+  }
+  return nick;
+});
 
-const isProductCardMessage = computed(()=>{
+const isProductCardOrOrderMessage = computed(() => {
   if (message.value?.type == "TIMCustomElem") {
-    if (JSON.parse(message.value.payload.data).src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD) {
+    const src = JSON.parse(message.value.payload.data).src;
+    if (src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD || src === CUSTOM_MESSAGE_SRC.ORDER) {
       return true;
     }
   }
@@ -395,8 +441,8 @@ function scrollTo(scrollHeight: number) {
             padding-top: 5px;
           }
         }
-        
-        
+
+
         .content-in {
           background: #f3f4f7;
           border-radius: 0 10px 10px;
@@ -411,12 +457,12 @@ function scrollTo(scrollHeight: number) {
           border-radius: 0 10px 10px;
           padding: 0px;
         }
-        
-        .product-message-bubble {
+
+        .product-order-message-bubble {
           background: #f3f4f7 !important ;
         }
 
-        .product-message-bubble-h5 {
+        .product-order-message-bubble-h5 {
           background: #fff !important ;
         }
 

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/marked.ts

@@ -10,7 +10,7 @@ export const marked = new Marked(
                     class="image-container"
                     onclick="onMarkdownImageClicked('${safeHref}')"
                     style="cursor:pointer;" >
-                    <img src="${href}" alt="${text}"/>
+                    <img src="${href}" alt="${text}" onload="onMarkdownImageLoad()"/>
                 </div>
                 `;
       },