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

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

@@ -2,38 +2,58 @@
   <div
     class="message-product-card"
   >
-    <image
-      v-if="isApp"
-      class="product-img"
-      :src="props.payload.content.pic"
-    />
-    <img
-      v-else
-      class="product-img"
-      :src="props.payload.content.pic"
-    >
-    <div class="product-card-information">
-      <div class="product-card-title">
-        {{ props.payload.content.header }}
+    <div v-for="(item,index) in topCustomField" :key="index" class="product-card-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 class="product-card-description-block">
+    </div>
+    <div class="product-card-main">
+      <img
+        v-if="props.payload.content.pic"
+        class="product-img"
+        :src="props.payload.content.pic"
+      >
+      <div class="product-card-information">
+        <div class="product-card-title">
+          {{ props.payload.content.header }}
+        </div>
+        <div class="product-card-description-block">
           <div class="product-card-description">
-          {{ props.payload.content.desc }}
+            {{ props.payload.content.desc }}
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div v-for="(item,index) in bottomCustomField" :key="index" class="product-card-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 class="product-card-link"  @click="jumpProductCard">
-          {{TUITranslateService.t("AIDesk.跳转")}}
-            </div>
       </div>
     </div>
+    <div class="product-card-link"  @click="jumpProductCard">
+      {{ TUITranslateService.t("AIDesk.跳转") }}
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import vue from '../../../../../../adapter-vue';
 import { customerServicePayloadType } from '../../../../../../interface';
 import { isApp } from '../../../../../../utils/env';
-import {TUITranslateService} from '@tencentcloud/chat-uikit-engine';
-// eslint-disable-next-line
-declare var uni: any;
+import { openSafeUrl } from '../../../../../../utils/utils';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import Log from '../../../../../../utils/logger';
+const { computed } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -49,92 +69,125 @@ export default {
   emits: ['sendMessage'],
   setup(props: Props) {
     const jumpProductCard = () => {
-      if (window) {
-        window.open(props.payload.content.url, '_blank');
+      const { url } = props.payload.content;
+      if (url) {
+        openSafeUrl(props.payload.content.url);
       } else {
-        // uni && uni.navigateTo({ url: `/TUIKit/components/TUIChat/web-view?url=${props.payload.content.url}` });
-        // #ifdef APP-PLUS
-        // @ts-ignore
-        plus.runtime.openURL(props.payload.content.url);
-        // #endif
-        // #ifdef H5
-        // @ts-ignore
-        window.open(props.payload.content.url);
-        // #endif
+        Log.w('Missing required url');
       }
     };
+    const customField = computed(() => {
+      return Array.isArray(props.payload.content.customField) ? props.payload.content.customField : [];
+    }); 
+
+    const topCustomField = computed(() => {
+      return customField.value.filter((item) => item.position === 'top');
+    });
+
+    const bottomCustomField = computed(() => {
+      return customField.value.filter((item) => item.position !== 'top'); 
+});
     return {
       props,
       isApp,
       jumpProductCard,
-      TUITranslateService
+      TUITranslateService,
+      topCustomField,
+      bottomCustomField,
     };
   },
 };
 </script>
 <style lang="scss" scoped>
 .message-product-card {
-  min-width: 200px;
+  min-width: 100%;
   max-width: 400px;
+  margin-top: 2px;
+  font-family: PingFangSC-Regular;
   display: flex;
-
-  .product-img {
-    width: 75px;
-    height: 75px;
-    border-radius: 10px;
-    flex-shrink: 0;
-    object-fit: cover;
-  }
-
-  .product-card-information {
-    width:100%;
-    margin-left: 15px;
-    margin-right:5px;
+  flex-direction: column;
+  .product-card-main {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    margin: 10px 0 10px 0;
+  }
+}
+.product-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 10px;
+  flex-shrink: 0;
+  object-fit: cover;
+  margin-right: 15px;
+  align-self: center;
+}
 
-    .product-card-title {
-      max-width: 200px;
-      min-width: 100px;
-      color: #000000;
-      font-size: 14px;
-      display: -webkit-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow-wrap: break-word;
-      word-break: normal;
-    }
+.product-card-information {
+  width:100%;
+  margin-right: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
-    .product-card-description-block {
-      display:flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 5px;
-    }
+  .product-card-title {
+    color: #000000;
+    font-size: 12px;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
 
-    .product-card-description {
-      font-size: 12px;
-      max-width: 60px;
-      color: #1c66e5;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-weight: 600;
-      flex: 0 1 60px;
-    }
+  .product-card-description-block {
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 5px;
+  }
 
-    .product-card-link {
-      cursor: pointer;
-      background-color: #1c66e5;
-      color:#ffffff;
-      padding:2px 12px;
-      border-radius: 12px;
-      flex: 0 0 auto;
-      margin-left: auto;
-    }
+  .product-card-description {
+    font-size: 14px;
+    max-width: 100px;
+    color: #1C66E5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+    flex: 0 1 100px;
   }
 }
+.product-card-custom-field {
+  color: #000;
+  margin: 0 0 5px 0;
+}
+.custom-field-line {
+  display: flex;
+  font-size: 12px;
+  gap: 5px;
+  overflow: hidden;
+  .order-name {
+    color: #878787;
+    margin-right: 3px;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .order-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.product-card-link {
+  cursor: pointer;
+  background-color: #1c66e5;
+  color: #ffffff;
+  padding: 2px 18px;
+  border-radius: 23px;
+  font-size: 12px;
+  line-height: 22px;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
 </style>

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

@@ -14,18 +14,18 @@
         
         <div
           v-if="isMessageRevoked"
-          class="revoked-text"
+          :class="isPC ? 'revoked-text' : ''"
         >
           {{ TUITranslateService.t("TUIChat.引用内容已撤回") }}
         </div>
         <div v-else>
           <div v-if="isH5" class="mobile-quote-sender">
-            {{ messageQuoteContent.messageSender }}
+            {{ quoteMessageSender }}
           </div>
           <div
             class="max-double-line"
           >
-          {{ isPC ? messageQuoteContent.messageSender + ": "+ transformTextWithKeysToEmojiNames(messageQuoteText) : transformTextWithKeysToEmojiNames(messageQuoteText)}}
+          {{ isPC ? quoteMessageSender + ": "+ transformTextWithKeysToEmojiNames(messageQuoteText) : transformTextWithKeysToEmojiNames(messageQuoteText)}}
           </div>
         </div>
         
@@ -77,6 +77,7 @@ let selfAddValue = 0;
 const messageQuoteText = ref<string>('');
 const hasQuoteContent = ref(false);
 const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent);
+const quoteMessageSender = ref<string>('');
 
 const isMessageRevoked = computed<boolean>(() => {
   try {
@@ -110,6 +111,7 @@ onMounted(() => {
 function performQuoteContent(params: IQuoteContent) {
   let messageKey: string = '';
   let quoteContent: string = '';
+  const quoteMessage = getQuoteMessage(params.messageID);
   switch (params.messageType) {
     case MessageQuoteTypeEnum.TYPE_TEXT:
       messageKey = '[文本]';
@@ -145,18 +147,25 @@ function performQuoteContent(params: IQuoteContent) {
       messageKey = '[消息]';
       break;
   }
-  if (
-    [MessageQuoteTypeEnum.TYPE_TEXT, MessageQuoteTypeEnum.TYPE_MERGER].includes(
-      params.messageType,
-    )
-  ) {
+  if (params.messageType === MessageQuoteTypeEnum.TYPE_CUSTOM ||
+      params.messageType === MessageQuoteTypeEnum.TYPE_TEXT ||
+      params.messageType === MessageQuoteTypeEnum.TYPE_MERGER) {
     quoteContent = params.messageAbstract;
   }
+  quoteMessageSender.value = !quoteMessage ? messageQuoteContent.value.messageSender : (quoteMessage.nick || quoteMessage.from);
   return quoteContent
     ? quoteContent
     : TUITranslateService.t(`TUIChat.${messageKey}`);
 }
 
+function getQuoteMessage(messageID: string) {
+  const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
+  let quoteMessage = currentMessageList.find(
+    message => message.ID === messageID,
+  );
+  return quoteMessage;
+}
+
 async function scrollToOriginalMessage() {
   if (isMessageRevoked.value) {
     return;
@@ -164,7 +173,7 @@ async function scrollToOriginalMessage() {
   const originMessageID = messageQuoteContent.value?.messageID;
   const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
   const isOriginalMessageInScreen = currentMessageList.some(
-    msg => msg.ID === originMessageID,
+    message => message.ID === originMessageID,
   );
   if (originMessageID && isOriginalMessageInScreen) {
     try {

package/components/CustomerServiceChat/style/h5.scss

@@ -12,6 +12,7 @@
     flex: 1;
     overflow: hidden;
     display: flex;
+    background-image: none;
   }
 
   &-message-input {

package/components/CustomerServiceChat/utils/sendMessage.ts

@@ -53,6 +53,7 @@ export const createOfflinePushInfo = (conversation: IConversationModel) => {
 export const sendMessages = async (
   messageList: ITipTapEditorContent[],
   currentConversation: IConversationModel,
+  quoteMessageCloudCustomData?: string,
 ) => {
   // In case of messageJumping, the sent message is automatically cleared and returns to the bottom
   if (TUIStore.getData(StoreName.CHAT, 'messageSource')) {
@@ -71,6 +72,10 @@ export const sendMessages = async (
       const sendMessageOptions = {
         offlinePushInfo: {},
       };
+      // handle quote message
+      if (quoteMessageCloudCustomData) {
+        options.cloudCustomData = quoteMessageCloudCustomData;
+      }
       switch (content?.type) {
         case 'text':
           textMessageContent = JSON.parse(JSON.stringify(content.payload?.text));

package/constant.ts

@@ -148,14 +148,14 @@ export const TOOLBAR_BUTTON_TYPE = {
   HUMAN_SERVICE: 'humanService',
   SERVICE_RATING: 'serviceRating',
   END_HUMAN_SERVICE: 'endHumanService',
-}
+};
 export const INPUT_TOOLBAR_TYPE = {
   EMOJI: 'emoji',
   IMAGE: 'image',
   FILE: 'file',
   VIDEO: 'video',
   RATING: 'rating',
-}
+};
 
 export const USER_DEFAULT_AVATAR = 'https://web.sdk.qcloud.com/im/desk/assets/user_default_avatar.png';
 
@@ -165,4 +165,4 @@ export enum ReadState {
   AllRead,
   NotShow,
   PartiallyRead,
-}
+};

package/interface.ts

@@ -1,4 +1,4 @@
-import { TOOLBAR_BUTTON_TYPE,INPUT_TOOLBAR_TYPE } from './constant';
+import { TOOLBAR_BUTTON_TYPE, INPUT_TOOLBAR_TYPE } from './constant';
 export interface customerServicePayloadType {
   chatbotPlugin?: number | string;
   customerServicePlugin?: number | string;
@@ -211,4 +211,18 @@ export interface InputToolbarModel {
   isEnabled?: number,  // 是否显示
   renderCondition?: () => {},// [UIKit] 是否显示
   clickEvent?: () => void,// [UIKit] 点击事件
+}
+
+export interface QuickOrderCustomFieldModel {
+  name?: string,
+  value: string,
+  position?: string,
+}
+
+export interface QuickOrderModel {
+  header: string,
+  desc: string,
+  pic?: string,
+  url: string,
+  customField?: QuickOrderCustomFieldModel[],
 }

package/locales/en/TUIChat.ts

@@ -88,7 +88,7 @@ const TUIChat = {
   '已接听': 'Answered',
   '已拒绝': 'Rejected',
   '已同意': 'Approved',
-  '引用': 'Reference',
+  '引用': 'Quote',
   '引用失败': 'quote failed',
   '语音': '[Voice]',
   '语音通话': 'Voice Call',
@@ -153,6 +153,7 @@ const TUIChat = {
   '您已被禁止聊天': 'you have been forbidden to speak',
   '账号被强制下线': 'Account forcibly logged out',
   '登录失败': 'Login failed',
+  '链接':'[Link]',
 };
 
 export default TUIChat;

package/locales/en/aidesk.ts

@@ -1,7 +1,7 @@
 const AIDesk = {
   "结束人工会话": "End human service",
   "转人工服务": "Human service",
-  "跳转": "Goto",
+  "跳转": "Open",
   "立即填写": "Fill now",
   "已提交": "Submitted",
   "提交": "Submit",
@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"Context misunderstanding",
   "格式不规范":"Improper format",
   "内容不完整":"Incomplete content",
+  "file 大小超过 100MB，无法发送":"Unable to send the file as it exceeds 100 MB",
+  "image 大小超过 20MB，无法发送":"Unable to send the image as it exceeds 20 MB",
+  "video 大小超过 100MB，无法发送":"Unable to send the video as it exceeds 100 MB",
 }
 export default AIDesk;

package/locales/fil/TUIChat.ts

@@ -155,6 +155,7 @@ const TUIChat = {
   '按Enter发送，Ctrl+Enter换行': 'Pindutin ang Enter upang ipadala, Ctrl+Enter upang pumunta ng bara',
   '账号被强制下线': 'Ang account ay pina-force log out',
   '登录失败': 'Hindi makapag-login',
+  '链接':'[Link]',
 };
 
 export default TUIChat;

package/locales/fil/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"Maling pag-unawa sa konteksto",
   "格式不规范":"Hindi tamang pormat",
   "内容不完整":"Hindi kumpletong nilalaman",
+  "file 大小超过 100MB，无法发送":"Lampas sa 100MB ang file, hindi maipadala",
+  "image 大小超过 20MB，无法发送":"Hindi maipadala ang larawan dahil lampas ito sa 20 MB",
+  "video 大小超过 100MB，无法发送":"Hindi maipadala ang video dahil lampas ito sa 100 MB",
 }
 export default AIDesk;