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

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>

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

@@ -12,7 +12,7 @@
           :class="[message.flow === 'in' ? '' : 'reverse']"
         >
           <Avatar
-            v-if="isPC && showAvatar === 1"
+            v-if="showAvatar === 1"
             useSkeletonAnimation
             :url="avatarUrl"
           />
@@ -21,7 +21,7 @@
             @click.stop
           >
             <div
-              v-if="isPC && showNickName === 1"
+              v-if="showNickName === 1"
               class="message-body-nick-name"
             >
               {{ nickName }}
@@ -107,8 +107,13 @@
               <ReadStatus
                 class="message-label align-self-bottom"
                 :message="shallowCopyMessage(message)"
+                @setStatus="setStatus"
+                :prevStatus="prevStatus"
               />
             </div>
+            <!-- <div class="message-bubble-feedback-button">
+              <FeedbackButton v-if="isFromRobot(message.cloudCustomData)"/>
+            </div> -->
           </main>
         </div>
         <!-- message extra area -->
@@ -143,6 +148,8 @@ import { isPC,isH5 } from '../../../../utils/env';
 import { JSONToObject } from '../../../../utils/index';
 import state from '../../../../utils/state.js';
 import { CUSTOM_MESSAGE_SRC } from '../../../../constant';
+import FeedbackButton from './feedback-button.vue';
+import { ReadState } from '../../../../constant';
 const { computed, toRefs } = vue;
 
 interface IProps {
@@ -192,7 +199,7 @@ const {
   staffNickName,
   userNickName,
 } = state.get('avatarNickName');
-
+let prevStatus = ReadState.Unread;
 const isDisplayUnplayMark = computed<boolean>(() => {
   return (
     message.value.flow === 'in'
@@ -313,6 +320,10 @@ function blinkMessage(messageID: string) {
 function scrollTo(scrollHeight: number) {
   emits('scrollTo', scrollHeight);
 }
+
+function setStatus(status: ReadState) {
+  prevStatus = status;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -324,7 +335,7 @@ function scrollTo(scrollHeight: number) {
 }
 
 .message-bubble {
-  padding: 10px 15px;
+  padding: 10px 5px;
   display: flex;
   flex-direction: row;
   user-select: none;
@@ -407,12 +418,12 @@ function scrollTo(scrollHeight: number) {
           flex-direction: column;
           min-width: 0;
           box-sizing: border-box;
-          padding: 16px;
+          padding: 8px 16px;
           font-size: 14px;
           color: #000;
           letter-spacing: 0;
-          word-wrap: break-word;
-          word-break: break-all;
+          overflow-wrap: break-word;
+          word-break: normal;
           position: relative;
 
           .content-main {
@@ -445,7 +456,7 @@ function scrollTo(scrollHeight: number) {
 
         .content-in {
           background: #f3f4f7;
-          border-radius: 0 10px 10px;
+          border-radius: 0 8px 8px;
         }
 
         .body-mobile {
@@ -454,7 +465,7 @@ function scrollTo(scrollHeight: number) {
 
         .multi-branch-message {
           background-color: transparent;
-          border-radius: 0 10px 10px;
+          border-radius: 0 8px 8px;
           padding: 0px;
         }
 
@@ -469,7 +480,7 @@ function scrollTo(scrollHeight: number) {
         .content-out {
           background: linear-gradient(26deg, #1C66E5 2.07%, #03C8FD 152.75%);
           color:#fff;
-          border-radius: 10px 0 10px 10px;
+          border-radius: 8px 0 8px 8px;
         }
 
         .content-no-padding {
@@ -501,7 +512,10 @@ function scrollTo(scrollHeight: number) {
         .blink-content {
           @keyframes reference-blink {
             50% {
-              background-color: #ff9c19;
+              // 消息气泡的底色是渐变色，实际是 background-image，background-image 优先级高于 background-color
+              // 所以这里如果设置 background-color，动画将不会生效
+              // 闪烁时背景不渐变
+              background: linear-gradient(90deg, #ff9c19, #ff9c19);
             }
           }
 
@@ -551,6 +565,11 @@ function scrollTo(scrollHeight: number) {
           align-self: flex-end;
         }
       }
+      .message-bubble-feedback-button {
+        display: flex;
+        flex-direction: row;
+        margin-top: 8px;
+      }
     }
   }
 

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

@@ -1,4 +1,5 @@
 import {Marked} from 'marked';
+import Log from '../../../../../../utils/logger';
 
 export const marked = new Marked(
   {mangle: false, headerIds: false},
@@ -7,19 +8,25 @@ export const marked = new Marked(
       image(this: any, href: string | null, title: string | null, text: string) {
         const safeHref = encodeURIComponent(href || '');
         return `<div
-                    class="image-container"
-                    onclick="onMarkdownImageClicked('${safeHref}')"
-                    style="cursor:pointer;" >
-                    <img src="${href}" alt="${text}" onload="onMarkdownImageLoad()"/>
-                </div>
-                `;
+          class="image-container"
+          onclick="onMarkdownImageClicked('${safeHref}')"
+          style="cursor:pointer;" >
+            <img src="${href}" alt="${text}" onload="onMarkdownImageLoad()"/>
+          </div>
+        `;
       },
       link(this: any, href: string | null, title: string | null, text: string) {
-        // a 标签 href 如果异常（包含非 ASCII 字符），则当成普通文本处理
-        if (href && /[^\x00-\x7F]/g.test(href)) {
-          return text;
+        if (href) {
+          // 匹配以 http:// 或 https:// 开头，所有 URL 主体字符，遇到第一个非主体字符（如中文括号、空格、表情符号等）时停止
+          let ret = href.replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (matchedUrl) => {
+            return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${matchedUrl || ''}" title="${title}">${matchedUrl}</a>`;
+          });
+          if (ret === href) {
+            Log.w(`Unable to extract url, href:${href}`);
+          }
+          return ret;
         }
-        return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${href || ''}" title="${title}">${text}</a>`;
+        return text;
       },
     },
   },

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

@@ -5,7 +5,9 @@
       :class="['branch-body',isPC ? 'branch-bubble':'branch-bubble-h5']"
     >
       <Icon :src="iconQuestion" class="branch-title-icon"/>
-      {{ content.header || content.title }}
+      <div class="branch-title-text">
+        {{ content.header || content.title }}
+      </div>
     </div>
     <div
       v-for="(item, index) in content.items"
@@ -91,14 +93,15 @@ export default {
   display: flex;
   min-width: 0;
   box-sizing: border-box;
-  padding: 12px 14px;
+  padding: 8px 16px;
   font-size: 14px;
   color: #000;
   letter-spacing: 0;
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  word-break: normal;
   position: relative;
-
+  width: 100%;
+  max-width: fit-content;
   .branch-main {
     box-sizing: border-box;
     display: flex;
@@ -124,6 +127,7 @@ export default {
 .branch-item {
   color: #1c66e5;
   cursor: pointer;
+  display: inline-block;
 }
 .warning-item {
     color: #ff9800;
@@ -145,4 +149,8 @@ export default {
   align-items: flex-start !important;
   margin-top: 2px;
 }
+.branch-title-text {
+  display: inline-block;
+  min-width: 0;
+}
 </style>

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

@@ -26,7 +26,7 @@ import {TUITranslateService} from "@tencentcloud/chat-uikit-engine";
   text-size-adjust: none;
   font-family: PingFangSC-Regular;
   overflow-wrap: break-word;
-  word-break: break-all;
+  word-break: normal;
 }
 
 .text:lang(en) {

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

@@ -82,7 +82,7 @@ import { JSONToObject } from '../../../../../../utils/index';
 import { isEnabledMessageReadReceiptGlobal } from '../../../../../../utils/utils';
 import { CUSTOM_MESSAGE_SRC } from '../../../../../../constant';
 import MessageBranch from './message-branch.vue';
-import MessageForm from './message-single-form/index.vue';
+import MessageForm from './message-ivr-form/index.vue';
 import MessageIMRobotWelcome from './message-robot-welcome.vue';
 import MessageProductCard from './message-product-card.vue';
 import MessageRichText from './message-rich-text.vue';
@@ -119,20 +119,22 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['showFormPopup', 'heightChanged'],
+  emits: ['showFormPopup', 'heightChanged', 'messageSent'],
   setup(props: Props, { emit }) {
     const payload = computed<customerServicePayloadType>(() => {
       return props.message && JSONToObject(props.message?.payload?.data);
     });
-    const sendTextMessage = (payload: TextMessagePayload, cloudCustomData?: string) => {
-      TUIChatService.sendTextMessage({ 
+    const sendTextMessage = async (payload: TextMessagePayload, cloudCustomData?: string) => {
+      await TUIChatService.sendTextMessage({ 
         payload, 
         cloudCustomData: cloudCustomData || '',
         needReadReceipt: isEnabledMessageReadReceiptGlobal() 
       });
+      emit('messageSent');
     };
-    const sendCustomMessage = (payload: CustomMessagePayload) => {
-      TUIChatService.sendCustomMessage({ payload });
+    const sendCustomMessage = async (payload: CustomMessagePayload) => {
+      await TUIChatService.sendCustomMessage({ payload });
+      emit('messageSent');
     };
     const handleShowFormPopup = (data: boolean) => {
       emit('showFormPopup', data);