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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.3.0] (2025-5-21)
+
+### Features
+- 支持订单消息。
+- 优化表单消息、任务流消息、流式消息、Markdown 图文混排等的交互体验。
+
+## [1.1.0] (2025-4-23)
+
+### Features
+- 新增 `initWithProfile` 接口，支持用户端带昵称（nickName）和头像（avatar）登录，提升人工客服与用户交互体验。
+- 优化流式消息和 markdown 图文混排的产品体验。
+- 优化发消息体验。
+- 优化组件样式。
+
 ## [1.0.1] (2025-4-16)
 
 ### Features

package/assets/send_button_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1C66E5"><path d="M440-320h80v-168l64 64 56-56-160-160-160 160 56 56 64-64v168Zm40 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>

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-input/index-web.vue

@@ -18,6 +18,7 @@
         @sendMessage="sendMessage"
         @onTyping="onTyping"
         @blurToolAndEmojiH5="blurToolAndEmojiH5"
+        @isInputNotEmpty="isInputNotEmpty"
       />
       <MessageInputButton
         v-if="!props.isMuted && isPC"
@@ -26,9 +27,12 @@
       <div v-if="isH5" class="emoji-icon" id="emoji-icon-h5" @click="emojiShow">
         <Icon :file="emojiIcon" width="24px" height="24px"/>
       </div>
-      <div v-if="isH5" class="tool-icon" @click="toolShow">
+      <div v-show="isH5 && !showSendButton" class="tool-icon" @click="toolShow">
         <Icon :file="toolIcon" width="24px" height="24px"/>
       </div>
+      <div v-show="isH5 && showSendButton" class="send-button-h5" @click="sendMessage">
+        <Icon :file="sendButtonIcon" width="34px" height="34px"/>
+      </div>
     </div>
 
   </div>
@@ -50,6 +54,7 @@ import { isPC,isH5 } from '../../../utils/env';
 import Icon from '../../common/Icon.vue';
 import emojiIcon from '../../../assets/emoji.png';
 import toolIcon from '../../../assets/more_tools.png';
+import sendButtonIcon from '../../../assets/send_button_h5.svg';
 const { ref,onMounted,onBeforeUnmount } = vue;
 
 const props = defineProps({
@@ -83,6 +88,7 @@ const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping','sc
 const editor = ref<InstanceType<typeof MessageInputEditor>>();
 const currentConversation = ref<IConversationModel>();
 const h5Dialog = ref<HTMLElement>();
+const showSendButton = ref(false);
 
 onMounted(() => {
   // document.addEventListener('click', handleClick);
@@ -126,17 +132,23 @@ const sendMessage = async () => {
   await sendMessages(editorContentList, currentConversation.value);
   emit('sendMessage');
   editor.value?.resetEditor();
+  showSendButton.value = false;
 };
 
 const insertEmoji = (emoji: any) => {
   editor.value?.addEmoji(emoji);
+  showSendButton.value = true;
 };
 
 const reEdit = (content: any) => {
   editor.value?.resetEditor();
+  showSendButton.value = false;
   editor.value?.setEditorContent(content);
 };
 
+const isInputNotEmpty = (show: boolean) => {
+  showSendButton.value = show;
+}
 
 const emojiShow = () => {
   emit('emojiShow');
@@ -205,11 +217,8 @@ defineExpose({
   height: fit-content;
     background: #fff;
 }
-.send-btn-h5 {
-  background-color: #1c66e5;
-    color: #fff;
-    padding: 10px 12px;
-    margin-left: 5px;
-    border-radius: 7px;
+.send-button-h5 {
+  margin-right: 10px;
+  margin-left: 5px;
 }
 </style>

package/components/CustomerServiceChat/message-input/message-input-editor-web.vue

@@ -76,7 +76,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['sendMessage', 'onTyping','blurToolAndEmojiH5']);
+const emits = defineEmits(['sendMessage', 'onTyping', 'blurToolAndEmojiH5', 'isInputNotEmpty']);
 const { placeholder, enableDragUpload, enableTyping } = toRefs(props);
 const isEditorEmpty = ref<boolean>(true);
 const isEditorBlur = ref<boolean>(true);
@@ -214,9 +214,12 @@ function handleEnter(e: any) {
   }
 }
 
-function handleH5Input() {
+function handleH5Input(e: any) {
   if (isH5) {
     isEditorEmpty.value = editorDom.value?.childNodes ? false : true;
+    const hasText = e.target.innerText.trim().length > 0;
+    const hasImages = e.target.querySelectorAll('img.custom-image-emoji').length > 0;
+    emits('isInputNotEmpty', hasText || hasImages);
   }
 }
 

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

@@ -47,6 +47,7 @@
               @resendMessage="resendMessage"
               @handleToggleMessageItem="handleToggleMessageItem"
               @handleH5LongPress="handleH5LongPress"
+              @heightChanged="onHeightChanged"
             />
             <div
               v-else
@@ -572,6 +573,10 @@ const handleH5LongPress = (e: any, message: IMessageModel, type: string) => {
   }
 };
 
+function onHeightChanged() {
+  scrollToLatestMessage();
+}
+
 // re-edit message
 const handleEdit = (message: IMessageModel) => {
   emits('handleEditor', message, 'reedit');
@@ -611,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,13 +35,23 @@
         <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 :payload="payload" />
+        <MessageStream
+          :payload="payload"
+          @heightChanged="onHeightChanged"
+        />
       </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"
@@ -55,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>
@@ -72,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,
@@ -90,7 +108,9 @@ export default {
     MessageStream,
     MessageMultiBranch,
     MessageMultiForm,
-    MessageRating
+    MessageRating,
+    MessageConcurrencyLimit,
+    MessageOrder,
   },
   props: {
     message: {
@@ -98,7 +118,7 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['showFormPopup'],
+  emits: ['showFormPopup', 'heightChanged'],
   setup(props: Props, { emit }) {
     const payload = computed<customerServicePayloadType>(() => {
       return props.message && JSONToObject(props.message?.payload?.data);
@@ -111,7 +131,10 @@ export default {
     };
     const handleShowFormPopup = (data: boolean) => {
       emit('showFormPopup', data);
-    }
+    };
+    const onHeightChanged = () => {
+      emit('heightChanged');
+    };
 
     return {
       payload,
@@ -119,7 +142,8 @@ export default {
       sendTextMessage,
       CUSTOM_MESSAGE_SRC,
       sendCustomMessage,
-      handleShowFormPopup
+      handleShowFormPopup,
+      onHeightChanged,
     };
   },
 };

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>