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

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="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="showNickName === 1"
               class="message-body-nick-name"
             >
-              {{ props.content.showName }}
+              {{ nickName }}
             </div>
             <div
               :class="[
@@ -109,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 -->
@@ -142,7 +145,11 @@ 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';
+import FeedbackButton from './feedback-button.vue';
+import { ReadState } from '../../../../constant';
 const { computed, toRefs } = vue;
 
 interface IProps {
@@ -182,7 +189,17 @@ const needLoadingIconMessageType = [
 ];
 
 const { blinkMessageIDList, messageItem: message } = toRefs(props);
-
+const {
+  showAvatar,
+  showNickName,
+  robotAvatar,
+  staffAvatar,
+  userAvatar,
+  robotNickName,
+  staffNickName,
+  userNickName,
+} = state.get('avatarNickName');
+let prevStatus = ReadState.Unread;
 const isDisplayUnplayMark = computed<boolean>(() => {
   return (
     message.value.flow === 'in'
@@ -213,6 +230,43 @@ const isMultiBranchMsg = computed(()=>{
   return false;
 });
 
+function isFromRobot(cloudCustomData: string) {
+  try {
+    const jsonObj = JSONToObject(cloudCustomData);
+    return jsonObj.hasOwnProperty("role") && jsonObj.role === "robot";
+  } catch (e) {
+    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 isProductCardOrOrderMessage = computed(() => {
   if (message.value?.type == "TIMCustomElem") {
     const src = JSON.parse(message.value.payload.data).src;
@@ -266,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>
@@ -277,7 +335,7 @@ function scrollTo(scrollHeight: number) {
 }
 
 .message-bubble {
-  padding: 10px 15px;
+  padding: 10px 5px;
   display: flex;
   flex-direction: row;
   user-select: none;
@@ -360,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 {
@@ -398,7 +456,7 @@ function scrollTo(scrollHeight: number) {
 
         .content-in {
           background: #f3f4f7;
-          border-radius: 0 10px 10px;
+          border-radius: 0 8px 8px;
         }
 
         .body-mobile {
@@ -407,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;
         }
 
@@ -422,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 {
@@ -454,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);
             }
           }
 
@@ -504,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;
@@ -122,8 +125,9 @@ export default {
   margin-bottom: 8px;
 }
 .branch-item {
-  color:#1c66e5;
+  color: #1c66e5;
   cursor: pointer;
+  display: inline-block;
 }
 .warning-item {
     color: #ff9800;
@@ -131,18 +135,22 @@ export default {
 .branch-card {
   min-width: 250px;
   max-width: 350px;
-  display:flex;
-  flex-direction:column;
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
 }
 .branch-item-selected {
-  cursor:none;
+  cursor: default;
   color: #a0a7b8;
-  opacity:0.6;
+  opacity: 0.6;
 }
 .branch-title-icon {
   margin-right: 5px;
   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

@@ -79,9 +79,10 @@ import { CustomMessagePayload, TextMessagePayload, customerServicePayloadType }
 import MessageRating from './message-rating/index.vue';
 import vue from '../../../../../../adapter-vue';
 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';
@@ -118,16 +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) => {
-      TUIChatService.sendTextMessage({payload});
+    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);

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="form-branch-container">
+    <p
+      v-if="props.title"
+      class="form-card-title"
+    >
+      {{ props.title }}
+    </p>
+    <div
+      v-for="(item, index) in props.list"
+      :key="index"
+      :class="getItemClass(item)"
+      @click="listItemClick(item)"
+    >
+      {{ item.content }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../../../../../../adapter-vue';
+const { computed, ref } = vue;
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  title: string;
+  list: branchItem[];
+  selectedContent: string;
+}
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    selectedContent: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['input-click'],
+  setup(props: Props, { emit }) {
+    const disabled = ref<boolean>(false);
+    const selectedItem = ref<string>('');
+    const listItemClick = (branch: branchItem): void => {
+      if (disabled.value || props.selectedContent) {
+        return;
+      }
+      emit('input-click', branch);
+      disabled.value = true;
+      selectedItem.value = branch.content;
+    };
+    const getItemClass = (item: branchItem) => {
+      const classes:string[] = [];
+      if (props.selectedContent) {
+        classes.push(item.content === props.selectedContent ? 'item-selected' : 'item-disabled');
+      } else if (disabled.value) {
+        classes.push(item.content === selectedItem.value ? 'item-selected' : 'item-disabled');
+      }
+      classes.push('ivr-form-branch-item');
+      return classes;
+    };
+    return {
+      props,
+      listItemClick,
+      disabled,
+      selectedItem,
+      getItemClass
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-branch-container {
+  .form-card-title {
+    margin-bottom: 8px;
+  }
+
+  .ivr-form-branch-item {
+    cursor: pointer;
+    color: #1C66E5;
+    background-color: #fff;
+    border: 1px solid rgba(0, 110, 255, 0.3);
+    padding: 12px;
+    border-radius: 20px;
+    margin-top: 8px;
+    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;
+  }
+  .item-disabled {
+    cursor: default !important;
+    opacity: 0.6;
+    color: #94BFFF;
+    background-color: #F5F9FF;
+    border: 1px solid rgba(0, 110, 255, 0.15);
+  }
+  .item-selected {
+    background-color: rgba(54, 141, 255, 0.15) !important;
+    position: relative;
+    cursor: default !important;
+  }
+}
+</style>