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

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

@@ -48,6 +48,7 @@
               @handleToggleMessageItem="handleToggleMessageItem"
               @handleH5LongPress="handleH5LongPress"
               @heightChanged="onHeightChanged"
+              @messageSent="onMessageSent"
             />
             <div
               v-else
@@ -217,8 +218,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 +292,9 @@ onMounted(() => {
     messageList: onMessageListUpdated,
     messageSource: onMessageSourceUpdated,
     isCompleted: isCompletedUpdated,
+    newMessageList: onNewMessageList,
   });
 
-
   TUIStore.watch(StoreName.CUSTOM, {
     isShowMessagePopMenu: isShowMessagePopMenuUpdated,
   });
@@ -329,6 +331,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 +395,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 +449,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 +597,15 @@ const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
 };
 
 function onHeightChanged() {
+  // 如果 view more 导致了子组件派发了 heightChanged 事件，不滚动到最底部，保留原来的滚动位置
+  if (beforeHistoryGetScrollHeight.value > 0) {
+    return;
+  }
+
+  scrollToLatestMessage();
+}
+
+function onMessageSent() {
   scrollToLatestMessage();
 }
 
@@ -617,6 +649,7 @@ async function scrollToLatestMessage() {
     messageListRef.value.scrollTop = scrollHeight - height;
   }
   scrollButtonInstanceRef.value?.hideScrollButton();
+  beforeHistoryGetScrollHeight.value = 0;
 }
 
 const handelScrollListScroll = throttle(
@@ -709,7 +742,6 @@ function setAudioPlayed(messageID: string) {
   };
 }
 
-
 defineExpose({
   scrollToLatestMessage,
 });

package/components/CustomerServiceChat/message-list/message-elements/feedback-button.vue

@@ -0,0 +1,369 @@
+<template>
+  <div>
+    <div class="feedback-container">
+      <div 
+        class="feedback-like"
+        @mouseenter="isFeedbackLikeHover = true"
+        @mouseleave="isFeedbackLikeHover = false"
+        @click="feedbackLikeClick"
+      >
+        <Icon :file="feedbackLikeIcon" width="16px" height="16px"/>
+        <div 
+          class="tooltip" 
+        >
+          {{ TUITranslateService.t("AIDesk.满意") }}  
+          <div class="tooltip-arrow"></div>
+        </div>
+      </div>
+      <span class="divider"></span>
+      <div 
+        class="feedback-dislike"
+        @mouseenter="isFeedbackDislikeHover = true"
+        @mouseleave="isFeedbackDislikeHover = false"
+        @click="feedbackDislikeClick"
+      >
+        <Icon :file="feedbackDislikeIcon" width="16px" height="16px" @click="dislickClick"/>
+        <div 
+          class="tooltip" 
+        >
+          {{ TUITranslateService.t("AIDesk.不满意") }}  
+        <div class="tooltip-arrow"></div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showDialog" class="feedback-dialog">
+      <div class="feedback-dialog-main">
+        <div class="feedback-dialog-header">
+          <div class="dialog-header-content">
+            <Icon :file="GreenCheck" width="24px" height="24px"/>
+            <span class="dialog-header-title">
+              {{ TUITranslateService.t("AIDesk.感谢您的反馈，我们会持续优化改进") }}  
+            </span>
+          </div>
+          <Icon :file="DialogCloseIcon" width="24px" height="24px" @click="closeDialog"/>
+        </div>
+
+        <div class="dialog-select">
+          <span class="dialog-session-title"> 
+            {{ TUITranslateService.t("AIDesk.您遇到了哪方面的问题") }}  
+          </span>
+          <div class="dialog-button-list">
+            <div class="dialog-button-row" v-for="(item) in feedbackButton">
+              <div :class="['dialog-button',item.isSelected ? 'dialog-button-selected': '']" @click="dialogButtonClick(item)">
+                {{ TUITranslateService.t(`AIDesk.${item.text}`) }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="dialog-other">
+          <span class="dialog-session-title"> 
+            {{ TUITranslateService.t("AIDesk.其他反馈内容") }}   
+          </span>
+          <textarea type="text" :placeholder="TUITranslateService.t('AIDesk.请输入内容')" v-model="feedbackText" class="dialog-other-input"/>
+        </div>
+        <div class="dialog-foot">
+          <div class="dialog-submit" @click="submitBadFeeback"> 
+            {{ TUITranslateService.t("AIDesk.提交") }}  
+          </div>
+          <div class="dialog-cancel" @click="closeDialog"> 
+            {{ TUITranslateService.t("AIDesk.取消") }} 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import vue from '../../../../adapter-vue';
+import Icon from '../../../common/Icon.vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import FeedbackLikeBefore from '../../../../assets/feedback_like_before.svg';
+import FeedbackLikeAfter from '../../../../assets/feedback_like_after.svg';
+import FeedbackLikeHover from '../../../../assets/feedback_like_hover.svg';
+import FeedbackDislikeBefore from '../../../../assets/feedback_dislike_before.svg';
+import FeedbackDislikeAfter from '../../../../assets/feedback_dislike_after.svg';
+import FeedbackDislikeHover from '../../../../assets/feedback_dislike_hover.svg';
+import GreenCheck from '../../../../assets/green_check.svg';
+import DialogCloseIcon from '../../../../assets/feedback_dialog_close.svg';
+const { ref,computed } = vue;
+
+export default {
+  components:{
+    Icon
+  },
+  setup(){
+    const isFeedbackLikeHover = ref(false);
+    const isFeedbackLikeClick = ref(false);
+    const isFeedbackDislikeHover = ref(false);
+    const isFeedbackDislikeClick = ref(false);
+    const showDialog = ref(false);
+    const feedbackText = ref('');
+    const feedbackButton = ref([
+      { id:'nonResponsiveAnswer', text: '答非所问', isSelected: false },
+      { id:'unmatchedContentRetrieval', text: '未匹配相关内容', isSelected: false },
+      { id:'incorrectInfoAnswer', text: '信息错误', isSelected: false },
+      { id:'contextMisunderstandingQuery', text: '上下文理解错误', isSelected: false },
+      { id:'nonStandardFormatAnswer', text: '格式不规范', isSelected: false },
+      { id:'incompleteContentRetrieval', text: '内容不完整', isSelected: false },
+    ]);
+    const feedbackReply = {
+      isSupport:1, //1：点赞。0：点踩
+      nonResponsiveAnswer:0, // 是否答非所问
+      incorrectInfoAnswer:0, // 是否信息错误
+      nonStandardFormatAnswer:0, // 是否信息不规范
+      incompleteContentRetrieval:0, // 是否回答不完整
+      unmatchedContentRetrieval:0, // 是否信息不匹配
+      contextMisunderstandingQuery:0, //是否上下文理解错误 
+      feedbackText:"" //文字反馈
+    };
+    const feedbackLikeIcon = computed(() => {
+      if (isFeedbackLikeClick.value) {
+        return FeedbackLikeAfter;
+      } else if (isFeedbackLikeHover.value) {
+        return FeedbackLikeHover;
+      } else {
+        return FeedbackLikeBefore;
+      }
+    });
+    const feedbackLikeClick = () => {
+      isFeedbackLikeClick.value = !isFeedbackLikeClick.value;
+      if(isFeedbackLikeClick.value){
+        isFeedbackDislikeClick.value = false;
+        feedbackReply.isSupport = 1;
+      }
+      resetFeedback();
+    }
+    const feedbackDislikeIcon = computed(() => {
+      if (isFeedbackDislikeClick.value) {
+        return FeedbackDislikeAfter;
+      } else if (isFeedbackDislikeHover.value) {
+        return FeedbackDislikeHover;
+      } else {
+        return FeedbackDislikeBefore;
+      }
+    });
+    const dialogButtonClick = (item) => {
+      item.isSelected = !item.isSelected;
+    }
+    const feedbackDislikeClick = () => {
+      isFeedbackDislikeClick.value = true;
+      if(isFeedbackDislikeClick.value){
+        isFeedbackLikeClick.value = false;
+      }
+    }
+    const dislickClick = () => {
+      showDialog.value = true;
+    }
+    const closeDialog = () => {
+      isFeedbackDislikeClick.value = false;
+      showDialog.value = false;
+      resetFeedback();
+    }
+    const resetFeedback = () => {
+      feedbackButton.value.forEach(item => {
+        item.isSelected = false;
+      });
+      feedbackText.value = "";
+    }
+    const submitBadFeeback = () => {
+      feedbackReply.isSupport = 0;
+      feedbackButton.value.forEach(item => {
+        feedbackReply[item.id] = item.isSelected ? 1 : 0;
+        feedbackReply.feedbackText = feedbackText.value;
+      });
+    }
+
+    return {
+      feedbackLikeIcon,
+      isFeedbackLikeHover,
+      feedbackLikeClick,
+      isFeedbackDislikeHover,
+      feedbackDislikeIcon,
+      feedbackDislikeClick,
+      GreenCheck,
+      DialogCloseIcon,
+      feedbackButton,
+      showDialog,
+      closeDialog,
+      dislickClick,
+      feedbackText,
+      dialogButtonClick,
+      TUITranslateService,
+      submitBadFeeback
+    };
+  }
+}
+</script>
+<style lang="scss">
+.feedback-container {
+  display: flex;
+  flex-direction: row !important;
+  padding: 4px 10px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  border: 1px solid var(---G61, #DBE1EB);
+  .feedback-like, .feedback-dislike {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover .tooltip {
+      display: block;
+    }
+  }
+  .divider {
+    width: 1px;
+    height: 14px;
+    background-color: rgba(0,0,0,0.05);
+  }
+}
+.feedback-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(13, 17, 26, 0.4);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: PingFangSC-Regular;
+  &-main {
+    width: 418px;
+    min-height: 442px;
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    overflow: hidden;
+
+    .feedback-dialog-header {
+      display: flex;
+      justify-content: space-between;
+      .dialog-header-content {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        .dialog-header-title {
+          font-weight: 600;
+ 
+        }
+      }
+    }
+  }
+}
+.dialog-session-title {
+    color: #4F586B;
+    font-size: 14px;
+}
+.dialog-select {
+  margin-top: 30px;
+  .dialog-button-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+    .dialog-button-row {
+      flex: 0 0 49%;
+      .dialog-button {
+        border-radius: 8px;
+        border: 1px solid #E4E8EE;
+        background: #F9FAFC;
+        padding: 10px 16px;
+        display: flex;
+        justify-content: center;
+        font-size: 12px;
+        color: #0f1014;
+        cursor: pointer;
+        text-align: center;
+        align-items: center;
+        &-selected {
+          border-radius: 8px;
+          border: 1px solid #1C66E5;
+          background: rgba(28, 102, 229, 0.10);
+          color: #0052d9;
+        }
+      }
+    }
+    
+  }
+}
+.dialog-other {
+  margin: 20px 0 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  .dialog-other-input {
+    border-radius: 12px;
+    border: 1px solid #E4E8EE;
+    background: #F9FAFC;
+    height: 102px;
+    padding: 10px 16px;
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+    resize: none;
+    &::placeholder {
+      color: #929CB2;
+      font-size: 14px;
+    }
+  }
+}
+.dialog-foot {
+  width: 100%;
+  display: flex;
+  margin-top: 30px;
+  gap: 10px;
+  justify-content: center;
+  .dialog-submit {
+    padding: 9px 33px;
+    border-radius: 20px;
+    background: #1C66E5;
+    font-weight: 600;
+    color: #fff;
+    cursor: pointer;
+  }
+  .dialog-cancel {
+    padding: 9px 33px;
+    border-radius: 20px;
+    border: 1px solid #1C66E5;
+    font-weight: 600;
+    color: #1C66E5;
+    cursor: pointer;
+  }
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 100;
+  font-size: 14px;
+  bottom: calc(100% + 13px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff;
+  color: #000;
+  padding: 8px 16px;
+  border-radius: 6px;
+  box-shadow: var(--shadow-md-offsetx-1, 0px) var(--shadow-md-offsety-1, 8px) var(--shadow-md-blur-1, 12px) var(--shadow-md-spread-1, -8px) var(--shadow-md-color-1, rgba(0, 0, 0, 0.05)), var(--shadow-md-offsetx-2, 0px) var(--shadow-md-offsety-2, 8px) var(--shadow-md-blur-2, 24px) var(--shadow-md-spread-2, -4px) var(--shadow-md-color-2, rgba(0, 0, 0, 0.10));
+  text-align: center;
+  display: none;
+  white-space: nowrap;
+  
+  &-arrow {
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #fff; 
+  }
+}
+</style>