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

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 1.5.2 @2025.7.2
+
+### Features
+- 新增参数 `bottomQuickOrder`，配置后可展示底部快捷订单。
+
+### Fixed
+- markdown 链接展示问题。
+
+## 1.5.1 @2025.6.23
+
+### Fixed
+- 修复 vue2.6 项目接入时报错。
+
 ## 1.5.0 @2025.6.19
 
 ### Features

package/components/CustomerServiceChat/index-web.vue

@@ -17,9 +17,12 @@
         :class="['tui-chat-message-list', !isPC && 'tui-chat-h5-message-list']"
         @handleEditor="handleEditor"
         @closeInputToolBar="() => changeToolbarDisplayType('none')"
+        :bottomQuickOrder="props.bottomQuickOrder"
+        :showBottomQuickOrder="showBottomQuickOrder"
+        @closeBottomQuickOrder="closeBottomQuickOrder"
       />
       <MessageToolbarButton
-        v-if="!(isH5 && Boolean(quoteMessage))"
+        v-if="!isH5 || (!Boolean(quoteMessage) && !showBottomQuickOrder)"
         :toolbarButtonList="props.toolbarButtonList"
       />
       <MessageInputToolbar
@@ -95,16 +98,16 @@ import MessageInput from './message-input/index-web.vue';
 import MessageInputToolbar from './message-input-toolbar/index-web.vue';
 import EmojiDialog from './message-input-toolbar/emoji-dialog-mobile/emoji-dialog-mobile.vue';
 import { isH5, isPC } from '../../utils/env';
-import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel } from '../../interface';
+import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel, QuickOrderModel } from '../../interface';
 import { isSupportedLang } from '../../utils/';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
 import { Toast, TOAST_TYPE } from '../common/Toast/index-web';
 import state from '../../utils/state.js';
-import { switchReadStatus } from '../../utils/utils';
+import { switchReadStatus,isNonEmptyObject } from '../../utils/utils';
 
-const { ref, onMounted, onUnmounted, computed, nextTick } = vue;
+const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
@@ -125,6 +128,7 @@ interface IProps {
   inputToolbarList?: InputToolbarModel[];
   showReadStatus?: number;
   showTyping?: number;
+  bottomQuickOrder?: QuickOrderModel;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -139,6 +143,7 @@ const emojiOpen = ref(false);
 const toolShowH5 = ref(false);
 const languages = Object.keys(TUILocales);
 const quoteMessage = ref<IMessageModel>();
+const showBottomQuickOrder = ref(false);
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
@@ -247,6 +252,9 @@ try {
   setAvatarNickName();
   setShowReadStatus();
   setShowTyping();
+  if (isNonEmptyObject(props.bottomQuickOrder)) {
+    showBottomQuickOrder.value = true;
+  }
 } catch (e) {
   console.log(e)
 }
@@ -389,6 +397,10 @@ function onQuoteMessageUpdated(options?: {
     quoteMessage.value = undefined;
   }
 }
+
+function closeBottomQuickOrder() {
+  showBottomQuickOrder.value = false;
+}
 </script>
 
 <style scoped lang="scss" src="./style/index.scss">

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

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

@@ -7,7 +7,7 @@
       <FormBranch
         :title="content.header"
         :list="content.items"
-        :selectedContent="content.selected?.content"
+        :selectedContent="content.selected && content.selected.content"
         @input-click="handleContentListItemClick"
       />
     </div>
@@ -18,7 +18,7 @@
   >
     <FormInput
       :title="content.header"
-      :selectedContent="content.selected?.content"
+      :selectedContent="content.selected && content.selected.content"
       @input-submit="handleFormSaveInputSubmit"
     />
   </div>

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/style/h5.scss

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

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/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/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;

package/locales/id/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
 	"上下文理解错误":"Kesalahan pemahaman konteks",
 	"格式不规范":"Format tidak standar",
 	"内容不完整":"Konten tidak lengkap",
+	"file 大小超过 100MB，无法发送":"Ukuran file melebihi 100MB, tidak dapat dikirim",
+	"image 大小超过 20MB，无法发送":"Tidak dapat mengirim gambar karena melebihi 20 MB",
+  "video 大小超过 100MB，无法发送":"Tidak dapat mengirim video karena melebihi 100 MB",
 }
 export default AIDesk;

package/locales/ja/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"文脈の理解誤り",
   "格式不规范":"形式が不適切",
   "内容不完整":"内容が不完全",
+  "file 大小超过 100MB，无法发送":"ファイルサイズが100MBを超えているため送信できません",
+  "image 大小超过 20MB，无法发送":"画像のサイズが20MBを超えているため送信できません",
+  "video 大小超过 100MB，无法发送":"動画のサイズが100MBを超えているため送信できません",
 }
 export default AIDesk;

package/locales/ms/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"Kesilapan pemahaman konteks",
   "格式不规范":"Format tidak standard",
   "内容不完整":"Kandungan tidak lengkap",
+  "file 大小超过 100MB，无法发送":"Saiz fail melebihi 100MB, tidak boleh dihantar",
+  "image 大小超过 20MB，无法发送":"Tidak dapat menghantar gambar kerana melebihi 20 MB",
+  "video 大小超过 100MB，无法发送":"Tidak dapat menghantar video kerana melebihi 100 MB",
 }
 export default AIDesk;

package/locales/ru/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"Ошибка понимания контекста",
   "格式不规范":"Нестандартный формат",
   "内容不完整":"Неполное содержание",
+  "file 大小超过 100MB，无法发送":"Размер файла превышает 100MB, отправка невозможна",
+  "image 大小超过 20MB，无法发送":"Невозможно отправить изображение, так как оно превышает 20 MB",
+  "video 大小超过 100MB，无法发送":"Невозможно отправить видео, так как оно превышает 100 MB",
 }
 export default AIDesk;

package/locales/th/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"ความเข้าใจบริบทผิดพลาด",
   "格式不规范":"รูปแบบไม่ถูกต้อง",
   "内容不完整":"เนื้อหาไม่สมบูรณ์",
+  "file 大小超过 100MB，无法发送":"ขนาดไฟล์เกิน 100MB ไม่สามารถส่งได้",
+  "image 大小超过 20MB，无法发送":"ไม่สามารถส่งรูปภาพได้เนื่องจากขนาดเกิน 20 MB",
+  "video 大小超过 100MB，无法发送":"ไม่สามารถส่งวิดีโอได้เนื่องจากขนาดเกิน 100 MB",
 }
 export default AIDesk;

package/locales/vi/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"Hiểu sai ngữ cảnh",
   "格式不规范":"Định dạng không chuẩn",
   "内容不完整":"Nội dung không đầy đủ",
+  "file 大小超过 100MB，无法发送":"Kích thước tệp vượt quá 100MB, không thể gửi",
+  "image 大小超过 20MB，无法发送":"Không thể gửi hình ảnh do vượt quá 20 MB",
+  "video 大小超过 100MB，无法发送":"Không thể gửi video do vượt quá 100 MB",
 }
 export default AIDesk;

package/locales/zh_cn/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"上下文理解错误",
   "格式不规范":"格式不规范",
   "内容不完整":"内容不完整",
+  "file 大小超过 100MB，无法发送": "file 大小超过 100MB，无法发送",
+  "image 大小超过 20MB，无法发送":"image 大小超过 20MB，无法发送",
+  "video 大小超过 100MB，无法发送":"video 大小超过 100MB，无法发送",
 }
 export default AIDesk;

package/locales/zh_tw/aidesk.ts

@@ -27,5 +27,8 @@ const AIDesk = {
   "上下文理解错误":"上下文理解錯誤",
   "格式不规范":"格式不規範",
   "内容不完整":"內容不完整",
+  "file 大小超过 100MB，无法发送":"檔案大小超過100MB，無法傳送",
+  "image 大小超过 20MB，无法发送":"圖片大小超過20MB，無法傳送",
+  "video 大小超过 100MB，无法发送":"影片大小超過100MB，無法傳送",
 }
 export default AIDesk;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Vue UIKit for AI Desk",
   "main": "index",
   "keywords": [

package/utils/utils.ts

@@ -206,3 +206,10 @@ export function switchReadStatus(value: number) {
 export function getTo(conversation: IConversationModel): string {
   return conversation?.groupProfile?.groupID || conversation?.userProfile?.userID;
 }
+
+export function isNonEmptyObject(obj: any): boolean {
+  if (obj && Object.getPrototypeOf(obj) === Object.prototype && Object.keys(obj).length > 0) {
+    return true;
+  }
+  return false;
+}