@tencentcloud/ai-desk-customer-vue 1.5.1 → 1.5.3

package/components/CustomerServiceChat/message-input/message-input-quote/index.vue

@@ -21,8 +21,8 @@
       <Icon
         class="input-quote-close-icon"
         :file="closeIcon"
-        width="11px"
-        height="11px"
+        width="14px"
+        height="14px"
         @onClick="cancelQuote"
       />
     </div>
@@ -42,6 +42,8 @@ import closeIcon from '../../../../assets/close-quote-icon.svg';
 import { isPC,isH5 } from '../../../../utils/env';
 import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
 import { InputDisplayType } from '../../../../interface';
+import { getQuoteContentForDesk } from '../../../../utils/utils';
+import { MessageQuoteTypeEnum } from '../../message-list/message-elements/message-quote/interface';
 const { ref, computed, onMounted, onUnmounted } = vue;
 
 interface IProps {
@@ -54,6 +56,9 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const TYPES = TUIChatEngine.TYPES;
 const quoteMessage = ref<IMessageModel>();
+const quoteMessageType = ref<number>(0);
+
+const emits = defineEmits(['getQuoteMessageCloudCustomData']);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
@@ -74,30 +79,39 @@ const quoteContentText = computed(() => {
       _quoteContentText = transformTextWithKeysToEmojiNames(
         quoteMessage.value.payload?.text,
       );
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_TEXT;
       break;
     case TYPES.MSG_IMAGE:
       _quoteContentText = TUITranslateService.t('TUIChat.图片');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_IMAGE;
       break;
     case TYPES.MSG_AUDIO:
       _quoteContentText = TUITranslateService.t('TUIChat.语音');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_SOUND;
       break;
     case TYPES.MSG_VIDEO:
       _quoteContentText = TUITranslateService.t('TUIChat.视频');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_VIDEO;
       break;
     case TYPES.MSG_FILE:
       _quoteContentText = TUITranslateService.t('TUIChat.文件');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_FILE;
       break;
     case TYPES.MSG_CUSTOM:
-      _quoteContentText = TUITranslateService.t('TUIChat.自定义');
+      _quoteContentText = getQuoteContentForDesk(quoteMessage.value);
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_CUSTOM;
       break;
     case TYPES.MSG_FACE:
       _quoteContentText = TUITranslateService.t('TUIChat.表情');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_FACE;
       break;
     case TYPES.MSG_MERGER:
       _quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_MERGER;
       break;
     default:
       _quoteContentText = TUITranslateService.t('TUIChat.消息');
+      quoteMessageType.value = MessageQuoteTypeEnum.TYPE_NONE;
       break;
   }
   return _quoteContentText;
@@ -114,10 +128,21 @@ function onQuoteMessageUpdated(options?: {
   message: IMessageModel;
   type: string;
 }) {
-  if (options?.message && options?.type === 'quote') {
+  if (options && options.message && options.type === 'quote') {
     quoteMessage.value = options.message;
+    const quoteMessageCloudCustomData = JSON.stringify({
+      messageReply: {
+        messageAbstract: quoteContentText.value,
+        messageID: quoteMessage.value.ID,
+        messageSender: quoteMessage.value.from,
+        messageTime: quoteMessage.value.time,
+        messageType: quoteMessageType.value,
+      }
+    });
+    emits('getQuoteMessageCloudCustomData', quoteMessageCloudCustomData);
   } else {
     quoteMessage.value = undefined;
+    emits('getQuoteMessageCloudCustomData', undefined);
   }
 }
 </script>
@@ -152,7 +177,7 @@ function onQuoteMessageUpdated(options?: {
   .input-quote-content-h5 {
     display: flex;
     justify-content: space-between;
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.5);
     padding: 8px 16px 8px 8px;
     font-size: 12px;
     align-items: center;
@@ -197,6 +222,6 @@ function onQuoteMessageUpdated(options?: {
 .input-quote-container-h5 {
   @extend %common-container-style;
   width:100%;
-  margin: 0px 0 5px 5px;
+  margin: 5px 0 5px 0px;
 }
 </style>

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

@@ -35,6 +35,8 @@ import fileIcon from '../../../../assets/files.svg';
 import fileIconH5 from '../../../../assets/file-h5.png';
 import { isPC, isH5 } from '../../../../utils/env';
 import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../../utils/utils';
+import Log from '../../../../utils/logger';
+import { Toast, TOAST_TYPE } from '../../../common/Toast/index-web';
 const { ref } = vue;
 
 const inputRef = ref();
@@ -63,7 +65,18 @@ const sendFileMessage = (e: any) => {
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   } as SendMessageParams;
   const sendMessageOptions: SendMessageOptions = {};
-  TUIChatService.sendFileMessage(options, sendMessageOptions);
+  TUIChatService.sendFileMessage(options, sendMessageOptions)
+  .catch((err) => {
+    Toast({
+      message:
+        err.code === 2402 ? 
+          TUITranslateService.t('AIDesk.file 大小超过 100MB，无法发送') 
+        : err.message,
+      type: TOAST_TYPE.ERROR,
+      duration: 5000,
+    });
+    Log.l(`Send File Failed:${err.code} ${err.message}`);
+  });
   e.target.value = '';
 };
 </script>

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

@@ -38,6 +38,8 @@ import ToolbarItemContainer from '../toolbar-item-container/index.vue';
 import imageIcon from '../../../../assets/image.svg';
 import imageUniIcon from '../../../../assets/image-uni.png';
 import { getTo, isEnabledMessageReadReceiptGlobal } from '../../../../utils/utils';
+import Log from '../../../../utils/logger';
+import { Toast, TOAST_TYPE } from '../../../common/Toast/index-web';
 const { ref, computed } = vue;
 
 const props = defineProps({
@@ -119,7 +121,18 @@ const sendImageMessage = (files: any) => {
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   } as SendMessageParams;
   const sendMessageOptions: SendMessageOptions = {};
-  TUIChatService.sendImageMessage(options, sendMessageOptions);
+  TUIChatService.sendImageMessage(options, sendMessageOptions)
+  .catch((err) => {
+    Toast({
+      message:
+        err.code === 2253 ? 
+          TUITranslateService.t('AIDesk.image 大小超过 20MB，无法发送') 
+        : err.message,
+      type: TOAST_TYPE.ERROR,
+      duration: 5000,
+    });
+    Log.l(`Send Image Failed:${err.code} ${err.message}`);
+  });
 };
 const sendVideoMessage = (file: any) => {
   if (!file) {
@@ -134,7 +147,18 @@ const sendVideoMessage = (file: any) => {
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   } as SendMessageParams;
   const sendMessageOptions: SendMessageOptions = {};
-  TUIChatService.sendVideoMessage(options, sendMessageOptions);
+  TUIChatService.sendVideoMessage(options, sendMessageOptions)
+  .catch((err) => {
+    Toast({
+      message:
+        err.code === 2351 ? 
+          TUITranslateService.t('AIDesk.video 大小超过 100MB，无法发送') 
+        : err.message,
+      type: TOAST_TYPE.ERROR,
+      duration: 5000,
+    });
+    Log.l(`Send Video Failed:${err.code} ${err.message}`);
+  });
 };
 </script>
 

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

@@ -35,6 +35,8 @@ import ToolbarItemContainer from '../toolbar-item-container/index.vue';
 import videoIcon from '../../../../assets/video.svg';
 import videoIconH5 from '../../../../assets/video_h5.svg'
 import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../../utils/utils';
+import Log from '../../../../utils/logger';
+import { Toast, TOAST_TYPE } from '../../../common/Toast/index-web';
 const { ref } = vue;
 
 const props = defineProps({
@@ -89,7 +91,18 @@ const sendVideoMessage = (file: any) => {
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   } as SendMessageParams;
   const sendMessageOptions: SendMessageOptions = {};
-  TUIChatService.sendVideoMessage(options, sendMessageOptions);
+  TUIChatService.sendVideoMessage(options, sendMessageOptions)
+  .catch((err) => {
+    Toast({
+      message:
+        err.code === 2351 ? 
+          TUITranslateService.t('AIDesk.video 大小超过 100MB，无法发送') 
+        : err.message,
+      type: TOAST_TYPE.ERROR,
+      duration: 5000,
+    });
+    Log.l(`Send Video Failed:${err.code} ${err.message}`);
+  });
 };
 </script>
 

package/components/CustomerServiceChat/message-list/bottom-quick-order/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div :class="isPC ? 'bottom-quick-order-line':''">
+    <div :class="['bottom-quick-order-container',isPC && 'bottom-quick-order-container-pc']">
+      <div @click="closeOrder">
+        <Icon class="close-icon" :file="cardToolbarCloseIcon" width="12px" height="12px"/>
+      </div>
+      <div v-for="(item,index) in topCustomField" :key="index" class="quick-order-custom-field">
+        <div class="custom-field-line">
+          <div v-if="item.name" class="order-name">
+            {{ item.name }}: 
+          </div>
+          <div class="order-value">
+            {{ item.value }} 
+          </div>
+        </div>
+      </div>
+      <div class="quick-order-main">
+        <img
+          v-if="props.bottomQuickOrder.pic"
+          class="quick-order-img"
+          :src="props.bottomQuickOrder.pic"
+        >
+        <div class="quick-order-information">
+          <div class="quick-order-title">
+            {{ props.bottomQuickOrder.header }}
+          </div>
+          <div class="quick-order-description-block">
+            <div class="quick-order-description">
+              {{ props.bottomQuickOrder.desc }}
+            </div>
+            <div v-if="bottomCustomField.length === 0" class="quick-order-link"  @click="sendOrder">
+              {{ TUITranslateService.t("发送") }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-for="(item,index) in bottomCustomField" :key="index" class="quick-order-custom-field">
+        <div class="custom-field-line">
+          <div v-if="item.name" class="order-name">
+            {{ item.name }}: 
+          </div>
+          <div class="order-value">
+            {{ item.value }} 
+          </div>
+        </div>
+      </div>
+      <div v-if="bottomCustomField.length !== 0" class="quick-order-link"  @click="sendOrder">
+        {{ TUITranslateService.t("发送") }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import cardToolbarCloseIcon from '../../../../assets/dialog-close.png';
+import Icon from '../../../common/Icon.vue';
+import { QuickOrderModel } from '../../../../interface';
+import { isPC } from '../../../../utils/env';
+const { computed } = vue;
+interface IProps {
+  bottomQuickOrder: QuickOrderModel;
+}
+const emits = defineEmits(['closeOrder','sendOrder']);
+
+const props = withDefaults(defineProps<IProps>(), {
+  bottomQuickOrder: () => ({} as QuickOrderModel),
+});
+
+const customField = computed(() => {
+  return Array.isArray(props.bottomQuickOrder?.customField) ? props.bottomQuickOrder.customField : [];
+}); 
+
+const topCustomField = computed(() => {
+  return customField.value.filter((item) => item.position === 'top');
+});
+
+const bottomCustomField = computed(() => {
+  return customField.value.filter((item) => item.position !== 'top'); 
+});
+
+const sendOrder = () => {
+  emits('sendOrder');
+};
+
+const closeOrder = () => {
+  emits('closeOrder');
+};
+</script>
+<style scoped lang="scss">
+.bottom-quick-order-line {
+  display: flex;
+  align-items: flex-end;
+}
+.bottom-quick-order-container {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  padding: 10px 30px 10px 10px;
+  border-radius: 8px;
+  margin: 0 10px 0 10px;
+  position: relative;
+  font-family: PingFangSC-Regular;
+}
+.bottom-quick-order-container-pc {
+  width: 300px;
+  box-shadow: rgb(204, 204, 204) 0px 0px 10px;
+  margin-bottom: 5px;
+}
+.quick-order-custom-field {
+  font-size: 12px;
+  max-width: 100%;
+  overflow: hidden;
+}
+.custom-field-line {
+  display: flex;
+  gap: 5px;
+  font-size: 12px;
+  line-height: 22px;
+}
+.order-name {
+  color: #878787;
+  margin-right: 3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.order-value {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.quick-order-main {
+  display: flex;
+  margin: 10px 0 10px 0;
+}
+.quick-order-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 10px;
+  margin-right: 15px;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.quick-order-information {
+  width: 100%;
+  margin-right: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .quick-order-title {
+    color: #000000;
+    font-size: 14px;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  .quick-order-description-block {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .quick-order-description {
+    font-size: 16px;
+    max-width: 120px;
+    color: #1C66E5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    flex: 0 1 120px;
+  }
+}
+.quick-order-link {
+  cursor: pointer;
+  background-color: #1c66e5;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 2px 18px;
+  line-height: 22px;
+  border-radius: 23px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+.close-icon {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+}
+</style>

package/components/CustomerServiceChat/message-list/index-web.vue

@@ -172,6 +172,13 @@
         :imageList="imageMessageList"
         @close="onImagePreviewerClose"
       />
+      <BottomQuickOrder
+        class="bottom-quick-order"
+        v-if="isNonEmptyObject(props.bottomQuickOrder) && props.showBottomQuickOrder"
+        :bottomQuickOrder="props.bottomQuickOrder"
+        @closeOrder="closeBottomQuickOrder"
+        @sendOrder="sendBottomQuickOrder"
+      />
     </div>
   </div>
 </template>
@@ -208,6 +215,7 @@ import MessageRevoked from './message-tool/message-revoked.vue';
 import MessagePlugin from '../message-list/message-elements/message-desk/message-plugin-web.vue';
 import MessageThinking from './message-elements/message-thinking.vue';
 import ScrollButton from './scroll-button/index.vue';
+import BottomQuickOrder from './bottom-quick-order/index.vue';
 import { isPluginMessage } from './message-elements/message-desk/index';
 import Dialog from '../../common/Dialog/index.vue';
 import ImagePreviewer from '../../common/ImagePreviewer/index-web.vue';
@@ -217,10 +225,12 @@ import chatStorage from '../../../utils/chatStorage';
 import {
   isEnabledMessageReadReceiptGlobal,
   deepCopy,
+  isNonEmptyObject,
 } from '../../../utils/utils';
 import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject } from '../../../utils/index';
 import { isCustomerConversation } from '../../../index';
 import { CUSTOM_MESSAGE_SRC } from '../../../constant';
+import { QuickOrderModel } from '../../../interface';
 
 interface ScrollConfig {
   scrollToMessage?: IMessageModel;
@@ -231,9 +241,18 @@ interface ScrollConfig {
   };
 }
 
+interface IProps {
+  bottomQuickOrder?: QuickOrderModel;
+  showBottomQuickOrder: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  showBottomQuickOrder: false,
+});
+
 interface IEmits {
   (key: 'closeInputToolBar'): void;
   (key: 'handleEditor', message: IMessageModel, type: string): void;
+  (key: 'closeBottomQuickOrder'): void;
 }
 
 const emits = defineEmits<IEmits>();
@@ -742,6 +761,26 @@ function setAudioPlayed(messageID: string) {
   };
 }
 
+function closeBottomQuickOrder() {
+  emits('closeBottomQuickOrder');
+}
+
+function sendBottomQuickOrder() {
+  TUIChatService.sendCustomMessage({
+    to: currentConversationID.value.replace('C2C', ''),
+    conversationType: 'C2C',
+    payload: {
+      data: JSON.stringify({
+        src: CUSTOM_MESSAGE_SRC.PRODUCT_CARD,
+        content: props.bottomQuickOrder,
+        customerServicePlugin: 0,
+      }),
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  });
+  closeBottomQuickOrder();
+}
+
 defineExpose({
   scrollToLatestMessage,
 });
@@ -752,4 +791,11 @@ defineExpose({
 .row-reverse {
   flex-direction: row-reverse;
 }
+.bottom-quick-order {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  width: 100%;
+}
 </style>

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

@@ -19,7 +19,12 @@ export const marked = new Marked(
         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>`;
+            let isURLInText = false;
+            if (matchedUrl !== href) {
+              // 如果 text 里包含 url，我们就用 matchedUrl 作为 a 标签的值；否则用 text 作为值
+              isURLInText = true;
+            }
+            return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${matchedUrl || ''}" title="${title}">${isURLInText ? matchedUrl : text}</a>`;
           });
           if (ret === href) {
             Log.w(`Unable to extract url, href:${href}`);

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

@@ -17,7 +17,7 @@
       </div>
       <div
         v-if="
-          payload.src === CUSTOM_MESSAGE_SRC.ROBOT_MSG
+          payload.src === CUSTOM_MESSAGE_SRC.ROBOT_MSG && payload.subtype === 'welcome_msg'
         "
       >
         <MessageIMRobotWelcome