@tencentcloud/ai-desk-customer-vue 1.5.6 → 1.5.8

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

@@ -1,15 +1,16 @@
 <template>
   <div>
-    <div class="feedback-container">
+    <div :class="[isH5 ? 'feedback-container-h5' : '', 'feedback-container']">
       <div 
         class="feedback-like"
-        @mouseenter="isFeedbackLikeHover = true"
-        @mouseleave="isFeedbackLikeHover = false"
-        @click="feedbackLikeClick"
+        @mouseenter="isLikeIconHover = true"
+        @mouseleave="isLikeIconHover = false"
+        @click="onLikeIconClick"
       >
-        <Icon :file="feedbackLikeIcon" width="16px" height="16px"/>
+        <Icon :file="likeIcon" width="16px" height="16px"/>
         <div 
           class="tooltip" 
+          v-if="isPC"
         >
           {{ TUITranslateService.t("AIDesk.满意") }}  
           <div class="tooltip-arrow"></div>
@@ -18,179 +19,137 @@
       <span class="divider"></span>
       <div 
         class="feedback-dislike"
-        @mouseenter="isFeedbackDislikeHover = true"
-        @mouseleave="isFeedbackDislikeHover = false"
-        @click="feedbackDislikeClick"
+        @mouseenter="isDislikeIconHover = true"
+        @mouseleave="isDislikeIconHover = false"
+        @click="onDislikeIconClick"
       >
-        <Icon :file="feedbackDislikeIcon" width="16px" height="16px" @click="dislickClick"/>
+        <Icon :file="dislikeIcon" width="16px" height="16px"/>
         <div 
           class="tooltip" 
+          v-if="isPC"
         >
           {{ 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 { IMessageModel, TUITranslateService, TUIChatEngine } 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';
+import { isPC, isH5 } from '../../../../utils/env';
 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) {
+  props: {
+    message: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {} as IMessageModel;
+      }
+    }
+  },
+  setup(props, { emit }){
+    const isLikeIconHover = ref(false);
+    const isLikeIconClick = ref(false);
+    const isDislikeIconHover = ref(false);
+    const isDislikeIconClick = ref(false);
+    const isLikeSelectedDone = computed(() => {
+      try {
+        const jsonObj = JSON.parse(props.message.cloudCustomData);
+        return jsonObj.feedBackType === 1;
+      } catch (error) {
+        return false;
+      }
+    });
+    const isDislikeSelectedDone = computed(() => {
+      try {
+        const jsonObj = JSON.parse(props.message.cloudCustomData);
+        return jsonObj.feedBackType === 2;
+      } catch (error) {
+        return false;
+      }
+    });
+
+    const likeIcon = computed(() => {
+      if (isLikeSelectedDone.value) {
         return FeedbackLikeAfter;
-      } else if (isFeedbackLikeHover.value) {
+      }
+      if (isLikeIconClick.value) {
+        return FeedbackLikeAfter;
+      } else if (isLikeIconHover.value) {
         return FeedbackLikeHover;
       } else {
         return FeedbackLikeBefore;
       }
     });
-    const feedbackLikeClick = () => {
-      isFeedbackLikeClick.value = !isFeedbackLikeClick.value;
-      if(isFeedbackLikeClick.value){
-        isFeedbackDislikeClick.value = false;
-        feedbackReply.isSupport = 1;
+    const dislikeIcon = computed(() => {
+      if (isDislikeSelectedDone.value) {
+        return FeedbackDislikeAfter;
       }
-      resetFeedback();
-    }
-    const feedbackDislikeIcon = computed(() => {
-      if (isFeedbackDislikeClick.value) {
+
+      if (isDislikeIconClick.value) {
         return FeedbackDislikeAfter;
-      } else if (isFeedbackDislikeHover.value) {
+      } else if (isDislikeIconHover.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 isC2C = props.message.conversationType === TUIChatEngine.TYPES.CONV_C2C;
+    const messageInfo = {
+      msgSeq: props.message.sequence,
+      cloudCustomData: props.message.cloudCustomData,
+      // 网站渠道或测试窗
+      groupId: props.message.conversationType === TUIChatEngine.TYPES.CONV_GROUP ? props.message.to : null,
+      // uikit
+      // fromAccount: who sends the feedback, props.message.to : robot message recipient
+      fromAccount: isC2C ? props.message.to : null,
+      // toAccount: who receipts the feedback (customer service account)
+      toAccount: isC2C ? props.message.from : null,
+      msgRandom: isC2C ? props.message.random : null,
+      msgTime: isC2C ? props.message.time : null,
+    };
+    const onLikeIconClick = async () => {
+      // 已经选择了就不能再切换
+      if (isLikeSelectedDone.value || isLikeIconClick.value || isDislikeSelectedDone.value || isDislikeIconClick.value) {
+        return;
       }
+      isLikeIconClick.value = true;
+      emit('like', messageInfo);
     }
-    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;
-      });
+
+    const onDislikeIconClick = () => {
+      // 已经选择了就不能再切换
+      if (isLikeSelectedDone.value || isLikeIconClick.value || isDislikeSelectedDone.value || isDislikeIconClick.value) {
+        return;
+      }
+      isDislikeIconClick.value = true;
+      emit('dislike', messageInfo);
     }
 
     return {
-      feedbackLikeIcon,
-      isFeedbackLikeHover,
-      feedbackLikeClick,
-      isFeedbackDislikeHover,
-      feedbackDislikeIcon,
-      feedbackDislikeClick,
-      GreenCheck,
-      DialogCloseIcon,
-      feedbackButton,
-      showDialog,
-      closeDialog,
-      dislickClick,
-      feedbackText,
-      dialogButtonClick,
+      likeIcon,
+      isLikeIconHover,
+      onLikeIconClick,
+      isDislikeIconHover,
+      dislikeIcon,
+      onDislikeIconClick,
       TUITranslateService,
-      submitBadFeeback
+      isPC,
+      isH5,
     };
   }
 }
@@ -201,9 +160,10 @@ export default {
   flex-direction: row !important;
   padding: 4px 10px;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   border-radius: 8px;
   border: 1px solid var(---G61, #DBE1EB);
+  background-color: #fff;
   .feedback-like, .feedback-dislike {
     position: relative;
     display: flex;
@@ -220,124 +180,9 @@ export default {
     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;
+.feedback-container-h5 {
+  background-color: rgba(255,255,255,0.75);
 }
-.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;

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

@@ -111,9 +111,18 @@
                 :prevStatus="prevStatus"
               />
             </div>
-            <!-- <div class="message-bubble-feedback-button">
-              <FeedbackButton v-if="isFromRobot(message.cloudCustomData)"/>
-            </div> -->
+            <div class="message-bubble-feedback-button">
+              <FeedbackButton
+                v-if="computedShowFeedback"
+                :message="message"
+                @like="onLike"
+                @dislike="onDislike"
+              />
+              <!-- 此模块为针对AI生成内容的说明。 -->
+              <div v-if="computedShowAINote" class="message-bubble-ai-note">
+                {{ TUITranslateService.t('AIDesk.该回复由AI生成，内容仅供参考') }}
+              </div>
+            </div>
           </main>
         </div>
         <!-- message extra area -->
@@ -142,10 +151,9 @@ import ReadStatus from './read-status/index.vue';
 import MessageQuote from './message-quote/index-web.vue';
 import Avatar from '../../../common/Avatar/index.vue';
 import loadingIcon from '../../../../assets/loading.png';
-import customerAvatar from '../../../../assets/customer_avatar.png';
-import { shallowCopyMessage } from '../../../../utils/utils';
+import { canShowFeedback, shallowCopyMessage, canShowAINote } from '../../../../utils/utils';
 import { isPC,isH5 } from '../../../../utils/env';
-import { JSONToObject } from '../../../../utils/index';
+import { JSONToObject, isWelcomeMessage } from '../../../../utils/index';
 import state from '../../../../utils/state.js';
 import { CUSTOM_MESSAGE_SRC } from '../../../../constant';
 import FeedbackButton from './feedback-button.vue';
@@ -158,6 +166,8 @@ interface IProps {
   classNameList?: string[];
   blinkMessageIDList?: string[];
   isAudioPlayed?: boolean | undefined;
+  enableFeedback: number;
+  enableAINote: number;
 }
 
 interface IEmits {
@@ -165,6 +175,8 @@ interface IEmits {
   (e: 'blinkMessage', messageID: string): void;
   // Only for uniapp
   (e: 'scrollTo', scrollHeight: number): void;
+  (e: 'like', messageInfo: Object): void;
+  (e: 'dislike', messageInfo: Object): void;
 }
 
 const emits = defineEmits<IEmits>();
@@ -175,6 +187,8 @@ const props = withDefaults(defineProps<IProps>(), {
   isAudioPlayed: false,
   blinkMessageIDList: () => [],
   classNameList: () => [],
+  enableFeedback: 0,
+  enableAINote: 1,
 });
 
 const TYPES = TUIChatEngine.TYPES;
@@ -230,6 +244,14 @@ const isMultiBranchMsg = computed(()=>{
   return false;
 });
 
+const computedShowFeedback = computed(() => {
+  return props.enableFeedback === 1 && !isWelcomeMessage(message.value) && canShowFeedback(message.value.cloudCustomData);
+});
+
+const computedShowAINote = computed(() => {
+  return props.enableAINote === 1 && (state.get('currentLanguage') === 'zh' || state.get('currentLanguage') === 'en') && canShowAINote(message.value.cloudCustomData);
+});
+
 function isFromRobot(cloudCustomData: string) {
   try {
     const jsonObj = JSONToObject(cloudCustomData);
@@ -241,22 +263,22 @@ function isFromRobot(cloudCustomData: string) {
 
 const avatarUrl = computed(() => {
   let url = '';
-  if (message.value?.flow === 'in') {
-    if (isFromRobot(message.value?.cloudCustomData)) {
-      url = robotAvatar || customerAvatar;
+  if (message.value.flow === 'in') {
+    if (isFromRobot(message.value.cloudCustomData)) {
+      url = robotAvatar || message.value.avatar;
     } else {
-      url = staffAvatar || message.value?.avatar;
+      url = staffAvatar || message.value.avatar;
     }
   } else {
-    url = userAvatar || message.value?.avatar || '';
+    url = userAvatar || message.value.avatar || '';
   }
   return url;
 });
 
 const nickName = computed(() => {
   let nick = '';
-  if (message.value?.flow === 'in') {
-    if (isFromRobot(message.value?.cloudCustomData)) {
+  if (message.value.flow === 'in') {
+    if (isFromRobot(message.value.cloudCustomData)) {
       nick = robotNickName || props.content.showName;
     } else {
       nick = staffNickName || props.content.showName;
@@ -324,6 +346,13 @@ function scrollTo(scrollHeight: number) {
 function setStatus(status: ReadState) {
   prevStatus = status;
 }
+function onLike(messageInfo: Object) {
+  emits('like', messageInfo);
+}
+
+function onDislike(messageInfo: Object) {
+  emits('dislike', messageInfo);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -382,7 +411,6 @@ function setStatus(status: ReadState) {
       }
 
       .message-body-nick-name {
-        font-family: PingFangSC-Regular;
         display: block;
         margin-bottom: 4px;
         font-size: 12px;
@@ -447,7 +475,6 @@ function setStatus(status: ReadState) {
           .content-has-risk-tips {
             font-size: 12px;
             color: #fa5151;
-            font-family: PingFangSC-Regular;
             margin-top: 5px;
             border-top: 1px solid #e5c7c7;
             padding-top: 5px;
@@ -525,7 +552,6 @@ function setStatus(status: ReadState) {
 
         .message-label {
           align-self: flex-end;
-          font-family: PingFangSC-Regular;
           font-size: 12px;
           color: #b6b8ba;
           word-break: keep-all;
@@ -569,6 +595,7 @@ function setStatus(status: ReadState) {
       .message-bubble-feedback-button {
         display: flex;
         flex-direction: row;
+        gap: 8px;
         margin-top: 8px;
       }
     }
@@ -586,4 +613,12 @@ function setStatus(status: ReadState) {
     align-items: flex-end;
   }
 }
+.message-bubble-ai-note {
+  color: #00000080;
+  align-self: center;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
+  flex: 0 0 auto;
+}
 </style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-concurrency-limit.vue

@@ -24,7 +24,6 @@ import {TUITranslateService} from "@tencentcloud/chat-uikit-engine";
   white-space: pre-wrap;
   font-size: 14px;
   text-size-adjust: none;
-  font-family: PingFangSC-Regular;
   overflow-wrap: break-word;
   word-break: normal;
 }
@@ -33,7 +32,6 @@ import {TUITranslateService} from "@tencentcloud/chat-uikit-engine";
   white-space: pre-wrap;
   font-size: 14px;
   text-size-adjust: none;
-  font-family: PingFangSC-Regular;
   overflow-wrap: break-word;
   word-break: normal;
 }

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-ivr-form/form-branch.vue

@@ -96,7 +96,6 @@ export default {
     line-height: 16px;
     width: -moz-fit-content;
     max-width: fit-content;
-    font-family: PingFangSC-Regular;
     min-width: 50px;
     text-align: center;
     word-wrap: break-word;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-branch/branch-pc.vue

@@ -85,7 +85,6 @@ export default {
   .card-title-container {
     padding: 8px 16px;
     border-radius: 0 10px 10px;
-    font-family: PingFangSC-Regular;
     overflow-wrap: break-word;
     word-break: normal;
     max-width: fit-content;
@@ -107,7 +106,6 @@ export default {
     margin-top: 8px;
     cursor: pointer;
     line-height: 16px;
-    font-family: PingFangSC-Regular;
     min-width: 50px;
     text-align: center;
     overflow-wrap: break-word;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/form-mobile.vue

@@ -75,7 +75,7 @@ import RadioMobile from './component-mobile/radios-mobile.vue';
 import LabelMobile from './component-mobile/label-mobile.vue';
 import FormPopup from './component-mobile/form-popup.vue';
 import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
-import {TUITranslateService} from '@tencentcloud/chat-uikit-engine';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 const { ref, onMounted } = vue;
 interface Props {
   payload: customerServicePayloadType;
@@ -197,10 +197,6 @@ export default {
 <style lang="scss">
 @import "../styles/common.scss";
 
-.form-mobile-container {
-  font-family: PingFangSC-Regular;
-}
-
 .edit-profile-container {
   @extend .container;
   font-size: 14px;
@@ -311,7 +307,6 @@ export default {
   display:flex;
   flex-direction: column;
   justify-content: center;
-  font-family: PingFangSC-Regular;
   .form-button {
     display:flex;
     justify-content: center;
@@ -399,15 +394,16 @@ export default {
 .button-container {
   display: flex;
   justify-content: center;
-  margin: 15px;
+  padding: 20px;
   .button {
     display: flex;
     justify-content: center;
-    width: 87px;
-    padding: 6px 10px;
+    width: 100%;
+    padding: 9px 33px;
     background-color: #1c66e5;
     color: white;
     border-radius: 20px;
+    font-weight: 500;
   }
 }
 </style>

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/form-pc.vue

@@ -151,7 +151,6 @@ export default {
 </script>
 <style lang="scss">
 .form-pc-container {
-  font-family: PingFangSC-Regular;
   max-width: 350px;
 }
 .title-container {