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

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.3.0] (2025-5-21)
+
+### Features
+- 支持订单消息。
+- 优化表单消息、任务流消息、流式消息、Markdown 图文混排等的交互体验。
+
 ## [1.1.0] (2025-4-23)
 
 ### Features

package/components/CustomerServiceChat/index-web.vue

@@ -119,7 +119,7 @@ const muteText = ref('');
 const messageListRef = ref<InstanceType<typeof MessageList>>();
 const emojiOpen = ref(false);
 const toolShowH5 = ref(false);
-const langauges = Object.keys(TUILocales);
+const languages = Object.keys(TUILocales);
 const props = withDefaults(defineProps<IProps>(), {
   canCloseChat: true,
   SDKAppID: 0,
@@ -168,7 +168,7 @@ const initLanguage = () => {
   let language;
   if (props.userLang !== '') {
     let userLang = convertLanguageToLowercase(props.userLang);
-    if (!langauges.includes(userLang)) {
+    if (!languages.includes(userLang)) {
       Log.w(`userLang:${props.userLang} is not supported`);
       language = 'en';
     } else {
@@ -176,7 +176,7 @@ const initLanguage = () => {
     }
   } else {
     let navigatorLang = convertLanguageToLowercase(navigator.language);
-    if (!langauges.includes(navigatorLang)) {
+    if (!languages.includes(navigatorLang)) {
       language = 'en';
     } else {
       language = navigatorLang;

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

@@ -616,6 +616,7 @@ async function scrollToLatestMessage() {
   if (messageListRef.value) {
     messageListRef.value.scrollTop = scrollHeight - height;
   }
+  scrollButtonInstanceRef.value?.hideScrollButton();
 }
 
 const handelScrollListScroll = throttle(

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

@@ -44,7 +44,7 @@
                   isNoPadding && isBlink ? 'blink-shadow' : '',
                   !isNoPadding && isBlink ? 'blink-content' : '',
                   isMultiBranchMsg?'multi-branch-message':'',
-                  (isProductCardMessage && isH5) ? 'product-message-bubble-h5' : (isProductCardMessage ? 'product-message-bubble' : ''),
+                  (isProductCardOrOrderMessage && isH5) ? 'product-order-message-bubble-h5' : (isProductCardOrOrderMessage ? 'product-order-message-bubble' : ''),
                   isPC ? '':'body-mobile',
                 ]"
               >
@@ -204,20 +204,19 @@ const hasEmojiReaction = computed(() => {
 });
 
 const isMultiBranchMsg = computed(()=>{
-  if(message.value?.type == "TIMCustomElem"){
-    if(JSON.parse(message.value.payload.data).src == '32'){
-    return true;
-  }
-
+  if (message.value?.type == "TIMCustomElem") {
+    const src = JSON.parse(message.value.payload.data).src;
+    if (src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH || src === CUSTOM_MESSAGE_SRC.BRANCH || src === CUSTOM_MESSAGE_SRC.BRANCH_NUMBER) {
+      return true;
+    }
   }
-  
   return false;
 });
 
-
-const isProductCardMessage = computed(()=>{
+const isProductCardOrOrderMessage = computed(() => {
   if (message.value?.type == "TIMCustomElem") {
-    if (JSON.parse(message.value.payload.data).src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD) {
+    const src = JSON.parse(message.value.payload.data).src;
+    if (src === CUSTOM_MESSAGE_SRC.PRODUCT_CARD || src === CUSTOM_MESSAGE_SRC.ORDER) {
       return true;
     }
   }
@@ -395,8 +394,8 @@ function scrollTo(scrollHeight: number) {
             padding-top: 5px;
           }
         }
-        
-        
+
+
         .content-in {
           background: #f3f4f7;
           border-radius: 0 10px 10px;
@@ -411,12 +410,12 @@ function scrollTo(scrollHeight: number) {
           border-radius: 0 10px 10px;
           padding: 0px;
         }
-        
-        .product-message-bubble {
+
+        .product-order-message-bubble {
           background: #f3f4f7 !important ;
         }
 
-        .product-message-bubble-h5 {
+        .product-order-message-bubble-h5 {
           background: #fff !important ;
         }
 

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

@@ -10,7 +10,7 @@ export const marked = new Marked(
                     class="image-container"
                     onclick="onMarkdownImageClicked('${safeHref}')"
                     style="cursor:pointer;" >
-                    <img src="${href}" alt="${text}"/>
+                    <img src="${href}" alt="${text}" onload="onMarkdownImageLoad()"/>
                 </div>
                 `;
       },

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

@@ -2,31 +2,32 @@
   <div class="branch-card">
     <div
       v-if="content.header || content.title"
-      class="branch-body branch-bubble"
+      :class="['branch-body',isPC ? 'branch-bubble':'branch-bubble-h5']"
     >
       <Icon :src="iconQuestion" class="branch-title-icon"/>
       {{ content.header || content.title }}
-  </div>
+    </div>
     <div
       v-for="(item, index) in content.items"
       :key="index"
-      :class="['branch-body','branch-bubble','branch-item',isSelected ? 'branch-item-selected' : '']"
+      :class="['branch-body',isPC ? 'branch-bubble':'branch-bubble-h5','branch-item',isSelected ? 'branch-item-selected' : '', item.content ? '' : 'warning-item']"
       :style="{ borderWidth: content.header ? '1px 0 0px 0' : '' }"
       @click="handleContentListItemClick(item)"
     >
-      {{ item.content }}
+      {{ item.content || TUITranslateService.t('AIDesk.分支选项异常') }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import vue from '../../../../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { customerServicePayloadType } from '../../../../../../interface';
 import iconRight from '../../../../../../assets/iconRight.svg';
 import iconQuestion from '../../../../../../assets/icon_question.png';
 import Icon from './customer-icon.vue';
+import { isPC } from '../../../../../../utils/env';
 const { computed, ref} = vue;
-// const { computed,ref } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -47,7 +48,7 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['sendMessage'],
+  emits: ['sendMessage', 'heightChanged'],
   setup(props: Props, { emit }) {
     const isSelected = ref<boolean>(false);
     const content = computed(() => {
@@ -60,6 +61,9 @@ export default {
     });
 
     const handleContentListItemClick = (branch: branchItem) => {
+      if (!branch.content) {
+        return;
+      }
       if(!isSelected.value) {
         isSelected.value = true;
         emit('sendMessage', { text: branch.content });
@@ -72,8 +76,13 @@ export default {
       iconRight,
       iconQuestion,
       isSelected,
+      isPC,
+      TUITranslateService
     };
   },
+  mounted() {
+    this.$emit('heightChanged');
+  },
 };
 </script>
 
@@ -107,10 +116,18 @@ export default {
   border-radius: 0 10px 10px;
   margin-bottom: 8px;
 }
+.branch-bubble-h5 {
+  background: #fff;
+  border-radius: 0 10px 10px;
+  margin-bottom: 8px;
+}
 .branch-item {
   color:#1c66e5;
   cursor: pointer;
 }
+.warning-item {
+    color: #ff9800;
+}
 .branch-card {
   min-width: 250px;
   max-width: 350px;
@@ -125,5 +142,7 @@ export default {
 }
 .branch-title-icon {
   margin-right: 5px;
+  align-items: flex-start !important;
+  margin-top: 2px;
 }
 </style>

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

@@ -0,0 +1,40 @@
+<template>
+  <div :class="['message-text-container']">
+    <span class="text">{{ TUITranslateService.t('AIDesk.并发限制') }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {TUITranslateService} from "@tencentcloud/chat-uikit-engine";
+
+</script>
+<style lang="scss" scoped>
+.message-text-container {
+  display: inline;
+}
+
+.text-select {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.text {
+  white-space: pre-wrap;
+  font-size: 14px;
+  text-size-adjust: none;
+  font-family: PingFangSC-Regular;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+
+.text:lang(en) {
+  white-space: pre-wrap;
+  font-size: 14px;
+  text-size-adjust: none;
+  font-family: PingFangSC-Regular;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+</style>

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

@@ -1,6 +1,5 @@
 <template>
   <div class="message-custom">
-
     <div class="custom">
       <div
         v-if="
@@ -13,6 +12,7 @@
         <MessageBranch
           :payload="payload"
           @sendMessage="sendTextMessage"
+          @heightChanged="onHeightChanged"
         />
       </div>
       <div
@@ -35,7 +35,10 @@
         <MessageProductCard :payload="payload" />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.RICH_TEXT">
-        <MessageRichText :payload="payload" />
+        <MessageRichText
+          :payload="payload"
+          @heightChanged="onHeightChanged"
+        />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.STREAM_TEXT">
         <MessageStream
@@ -44,7 +47,11 @@
         />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH">
-        <MessageMultiBranch :payload="payload" @sendMessage="sendTextMessage"/>
+        <MessageMultiBranch
+          :payload="payload"
+          @sendMessage="sendTextMessage"
+          @heightChanged="onHeightChanged"
+        />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_FORM && message.flow == 'in'">
         <MessageMultiForm :payload="payload"
@@ -58,6 +65,12 @@
           @sendMessage="sendCustomMessage"
         />
       </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.CONCURRENCY_LIMIT">
+        <MessageConcurrencyLimit />
+      </div>
+      <div v-if="payload.src === CUSTOM_MESSAGE_SRC.ORDER">
+        <MessageOrder :payload="payload" />
+      </div>
   </div>
   </div>
 </template>
@@ -75,6 +88,8 @@ import MessageRichText from './message-rich-text.vue';
 import MessageStream from './message-stream.vue';
 import MessageMultiBranch from './message-multi-branch/index.vue';
 import MessageMultiForm from './message-multi-form/index.vue';
+import MessageConcurrencyLimit from "./message-concurrency-limit.vue";
+import MessageOrder from './message-order.vue';
 import {
   IMessageModel,
   TUIChatService,
@@ -93,7 +108,9 @@ export default {
     MessageStream,
     MessageMultiBranch,
     MessageMultiForm,
-    MessageRating
+    MessageRating,
+    MessageConcurrencyLimit,
+    MessageOrder,
   },
   props: {
     message: {

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

@@ -1,79 +1,99 @@
 <template>
-    <div class="form-branch-container">
-      <div
-        v-if="props.payload.content.header"
-        class="card-title"
-      >
-            {{ props.payload.content.header }}
-        </div>
-      <div
-        v-if="props.payload.status == 0 && !isClicked"
-        v-for="(item, index) in props.payload.content.items"
-        :key="index"
-        class="form-branch-item"
-        @click="listItemClick(item)"
-      >
-        {{ item.content }}
-      </div>
+  <div class="form-branch-container">
+    <div
+      v-if="props.payload.content.header"
+      :class="['card-title-container',isPC ? 'card-title' : 'card-title-h5']"
+    >
+      {{ props.payload.content.header }}
     </div>
-  </template>
-  
-  <script lang="ts">
+    <div
+      v-if="props.payload.status == 0 && !isClicked"
+      v-for="(item, index) in props.payload.content.items"
+      :key="index"
+      :class="['form-branch-item', item.content ? '' : 'warning-item']"
+      @click="listItemClick(item)"
+    >
+    {{ item.content || TUITranslateService.t('AIDesk.分支选项异常') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { customerServicePayloadType } from '../../../../../../../interface';
-  interface branchItem {
-    content: string;
-    desc: string;
+import { isPC } from '../../../../../../../utils/env'
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({content: { header: '', items: [] },status:0}),
+    },
+  },
+  emits: ['input-click'],
+  setup(props: Props, { emit }) {
+    let isClicked = false;
+    const listItemClick = (branch: branchItem): void => {
+      if (!branch.content) {
+        return;
+      }
+      emit('input-click', branch);
+      isClicked = true;
+    };
+
+    return {
+      props,
+      isClicked,
+      listItemClick,
+      isPC,
+      TUITranslateService
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-branch-container {
+  .card-title-container {
+    padding: 12px;
+    border-radius: 0 10px 10px;
+    width:fit-content;
+    font-family: PingFangSC-Regular;
   }
-  
-  interface Props {
-    payload: customerServicePayloadType;
+  .card-title {
+    background-color: #f3f4f7;
   }
-  
-  export default {
-    props: {
-        payload: {
-            type: Object as () => customerServicePayloadType,
-            default: () => ({content: { header: '', items: [] },status:0}),
-        },
-    },
-    emits: ['input-click'],
-    setup(props: Props, { emit }) {
-        let isClicked = false;
-      const listItemClick = (branch: branchItem): void => {
-        emit('input-click', branch);
-        isClicked = true;
-      };
-      
-      return {
-        props,
-        isClicked,
-        listItemClick,
-      };
-    },
-  };
-  </script>
-  <style lang="scss">
-  .form-branch-container {
-    .card-title {
-        background-color: #fbfbfb;
-        padding: 12px;
-      border-radius: 0 10px 10px;
-      width:fit-content;
-      font-family: PingFangSC-Regular;
-    }
-  
-    .form-branch-item {
-      font-weight: 500;
-      color: rgba(54, 141, 255, 1);
-      background-color: #fbfbfb;
-      border: 1px solid rgba(0, 110, 255, 0.3);
-        padding: 12px;
-        border-radius: 25px;
-        margin-top: 8px;
-      cursor: pointer;
-        width:fit-content;
-        font-family: PingFangSC-Regular;
-    }
+  .card-title-h5 {
+    background-color: #fff;
+  }
+
+  .form-branch-item {
+    font-weight: 500;
+    color: #1C66E5;
+    background-color: #fff;
+    border: 1px solid rgba(0, 110, 255, 0.3);
+    padding: 12px;
+    border-radius: 20px;
+    margin-top: 8px;
+    cursor: pointer;
+    line-height: 16px;
+    width:fit-content;
+    font-family: PingFangSC-Regular;
+    min-width: 50px;
+    text-align: center;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: normal;
+  }
+  .warning-item {
+    color: #ff9800;
   }
-  </style>
-  
+}
+</style>

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

@@ -1,59 +1,60 @@
 <template>
-      <div class="message-form">
-        <branchPc
-          :payload ="payload"
-          @input-click="handleContentListItemClick"
-        />
+  <div class="message-form">
+    <BranchPc
+      :payload ="payload"
+      @input-click="handleContentListItemClick"
+    />
+  </div>
+</template>
 
-      </div>
-  </template>
-  
-  <script lang="ts">
-  import vue from '../../../../../../../adapter-vue';
-  import BranchPc from './branch-pc.vue';
-  import { customerServicePayloadType } from '../../../../../../../interface';
-  const { computed} = vue;
-  
-  interface branchItem {
-    content: string;
-    desc: string;
-  }
-  
-  interface Props {
-    payload: customerServicePayloadType;
-  }
-  
-  export default {
-    components: {
-        BranchPc
-    },
-    props: {
-      payload: {
-        type: Object,
-        default: () => ({}),
-      },
+<script lang="ts">
+import vue from '../../../../../../../adapter-vue';
+import BranchPc from './branch-pc.vue';
+import { customerServicePayloadType } from '../../../../../../../interface';
+const { computed} = vue;
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  components: {
+    BranchPc
+  },
+  props: {
+    payload: {
+      type: Object,
+      default: () => ({}),
     },
-    emits: ['sendMessage'],
-    setup(props: Props, { emit }) {
+  },
+  emits: ['sendMessage', 'heightChanged'],
+  setup(props: Props, { emit }) {
     const payload = computed<customerServicePayloadType>(() => {
       return props.payload;
     });
-      const handleContentListItemClick = (branch: branchItem) => {
-        emit('sendMessage', { text: branch.content });
-      };
-  
-      const handleFormSaveInputSubmit = (text: string) => {
-        emit('sendMessage', { text });
-      };
-      return {
-        payload,
-        handleContentListItemClick,
-        handleFormSaveInputSubmit,
-      };
-    },
-  };
-  </script>
-  <style lang="scss">
+    const handleContentListItemClick = (branch: branchItem) => {
+      emit('sendMessage', { text: branch.content });
+    };
+
+    const handleFormSaveInputSubmit = (text: string) => {
+      emit('sendMessage', { text });
+    };
+    return {
+      payload,
+      handleContentListItemClick,
+      handleFormSaveInputSubmit,
+    };
+  },
+  mounted() {
+    this.$emit('heightChanged');
+  }
+};
+</script>
+<style lang="scss">
 
-  </style>
-  
+</style>