@tencentcloud/ai-desk-customer-vue 1.5.10 → 1.5.11

package/components/CustomerServiceChat/chat-header/index-web.vue

@@ -1,16 +1,16 @@
 <template>
-  <div :class="['chat-header', !isPC && 'chat-header-h5']">
+  <div :class="['chat-header', isH5 && 'chat-header-h5']">
     <div class="chat-header-name">
       <div
-        v-if="!isPC && props.canCloseChat"
-        :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
+        v-if="isH5 && props.canCloseChat"
+        :class="['chat-header-back', isH5 && 'chat-header-h5-back']"
         @click="closeChat(currentConversation.conversationID)"
       >
         <Icon :file="backSVG" />
       </div>
       <div class="chat-header-container">
-        <Icon v-if="!isPC" width="32px" height="23px" :file="customerAvatarMobile" />
-        <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
+        <Icon v-if="showHeaderIcon" :width="headerIconWidth" :height="headerIconHeight" :file="headerIcon" />
+        <div :class="['chat-header-content', isH5 && 'chat-header-h5-content']">
           {{ currentConversationName }}
         </div>
       </div>
@@ -60,16 +60,18 @@ import backSVG from '../../../assets/back.svg';
 import arrowDown from '../../../assets/language_arrow_down.svg';
 import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
 import languageSelectedIcon from '../../../assets/language_check.svg';
-import { isPC } from '../../../utils/env';
+import { isH5 } from '../../../utils/env';
 import state from '../../../utils/state';
 import { SUPPORTED_LANGUAGES } from '../../../constant';
-const { ref, onMounted, onUnmounted } = vue;
+import { IHeaderConfig } from '../../../interface';
+const { ref, onMounted, onUnmounted, computed } = vue;
 
 interface IProps {
   canCloseChat?: boolean;
   currentLang?: string;
   enableMultilingual: number;
   langList?: Array<string>;
+  headerConfig?: IHeaderConfig;
 }
 interface ILanguage {
   name: string;
@@ -92,6 +94,31 @@ const props = withDefaults(defineProps<IProps>(), {
   langList: () => [],
 });
 
+const showHeaderIcon = computed(() => {
+  if (isH5) {
+    if (props.headerConfig && props.headerConfig.showLogo === false) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+});
+
+const headerIcon = computed(() => {
+  return (props.headerConfig && props.headerConfig.logo) || customerAvatarMobile;
+});
+
+const headerIconWidth = computed(() => {
+  return (props.headerConfig && props.headerConfig.logoWidth) ?? '32px';
+});
+
+const headerIconHeight = computed(() => {
+  if (props.headerConfig) {
+    return props.headerConfig.logoHeight || '32px';
+  }
+  return '23px';
+});
+
 if (props.enableMultilingual === 1) {
   languageOptionList.value = props.langList
   .map(key => ({
@@ -130,10 +157,14 @@ function setCurrentConversationName() {
   if (!currentConversation.value) {
     return;
   }
-  if (isPC) {
-    currentConversationName.value = currentConversation.value?.getShowName() || '';
+  if (props.headerConfig && props.headerConfig.title) {
+    currentConversationName.value = props.headerConfig.title;
   } else {
-    currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
+    if (isH5) {
+      currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
+    } else {
+      currentConversationName.value = currentConversation.value.getShowName() || '';
+    }
   }
 }
 

package/components/CustomerServiceChat/feedback-modal/index.vue

@@ -174,7 +174,7 @@ export default {
             messageInfo,
           }),
         },
-      });
+      },{ onlineUserOnly: true});
     }
 
     const dialogButtonClick = (item) => {

package/components/CustomerServiceChat/index-web.vue

@@ -13,6 +13,7 @@
         :enableMultilingual="props.enableMultilingual"
         :langList="languageForShowList"
         :currentLang="currentLanguage"
+        :headerConfig="props.headerConfig"
         @closeChat="closeChat"
         @changeLanguage="changeLanguage"
       />
@@ -111,7 +112,7 @@ 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, QuickOrderModel } from '../../interface';
+import { ToolbarButtonModel, ToolbarDisplayType, InputToolbarModel, QuickOrderModel, IHeaderConfig} from '../../interface';
 import Log from '../../utils/logger';
 import MessageToolbarButton from './message-toolbar-button/index.vue';
 import TUILocales from '../../locales';
@@ -147,6 +148,7 @@ interface IProps {
   enableFeedback?: number;
   enableAINote?: number;
   enableURLDetection?: number;
+  headerConfig?: IHeaderConfig;
 }
 
 const emits = defineEmits(['closeChat']);

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

@@ -31,7 +31,7 @@ export const marked = new Marked(
       link(this: any, href: string | null, title: string | null, text: string) {
         if (href) {
           // 匹配以 http:// 或 https:// 开头，所有 URL 主体字符，遇到第一个非主体字符（如中文括号、空格、表情符号等）时停止
-          let ret = href.replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (matchedUrl) => {
+          let ret = href.replace(/&/g, '&').replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (matchedUrl) => {
             let isURLInText = false;
             if (matchedUrl !== href) {
               // 如果 text 里包含 url，我们就用 matchedUrl 作为 a 标签的值；否则用 text 作为值

package/components/CustomerServiceChat/message-toolbar-button/index.vue

@@ -27,7 +27,7 @@ import { isH5 } from '../../../utils/env';
 import { ToolbarButtonModel } from '../../../interface';
 import Icon from '../../common/Icon.vue';
 import { TOOLBAR_BUTTON_TYPE } from '../../../constant';
-import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo, isNonEmptyObject, transferToTaskFlow, transferToHuman } from '../../../utils/utils';
+import { isEnabledMessageReadReceiptGlobal, openSafeUrl, getTo, isNonEmptyObject, transferToTaskFlow, transferToHuman, debounce } from '../../../utils/utils';
 import ToolbarButtonHumanService from './toolbar-button-human-service.vue';
 import ToolbarButtonServiceRating from './toolbar-button-service-rating.vue';
 import ToolbarButtonEndHumanService from './toolbar-button-end-human-service.vue';
@@ -77,11 +77,14 @@ const onCanEndConversationUpdate = (data: {conversationID: string, value: boolea
   }
 }
 
-function onClick(item:ToolbarButtonModel, index: number) {
+const onClick = debounce((item:ToolbarButtonModel, index: number) => {
+  if (!currentConversation.value) {
+    return;
+  }
   if (item.type === 1 && item.content) {
     TUIChatService.sendTextMessage({
-      to: getTo(currentConversation?.value),
-      conversationType: currentConversation?.value?.type,
+      to: getTo(currentConversation.value),
+      conversationType: currentConversation.value.type,
       payload: {
         text: item.content
       },
@@ -96,9 +99,9 @@ function onClick(item:ToolbarButtonModel, index: number) {
   } else if (props.toolbarButtonList !== undefined && typeof props.toolbarButtonList[index].clickEvent === 'function') {
     props.toolbarButtonList[index].clickEvent();
   }
-}
+}, 300);
 
-function shouldRender(item: ToolbarButtonModel) {
+const shouldRender = (item: ToolbarButtonModel) => {
   if (item.isEnabled === 1) {
     return true;
   } else if (item.isEnabled === 0) {
@@ -155,5 +158,7 @@ function shouldRender(item: ToolbarButtonModel) {
   text-overflow: ellipsis;
   max-width: 100px;
   overflow: hidden;
+  min-width: 25px;
+  text-align: center;
 }
 </style>

package/components/CustomerServiceChat/message-toolbar-button/toolbar-button-end-human-service.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick">
+  <div :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '', isClicked ? 'end-conversation-button-clicked' : '']" @click="onClick">
     <Icon v-if="props.icon" class="toolbar-button-icon" :file="props.icon" width="14px" height="14px"/>
     <div class="toolbar-button-text">
       {{ props.title || TUITranslateService.t('AIDesk.结束人工会话') }}
     </div>
-    </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import vue from '../../../adapter-vue';
@@ -15,6 +15,7 @@ import { TUITranslateService, TUIChatService, IConversationModel, TUIStore, Stor
 import { CUSTOM_MESSAGE_SRC } from '../../../constant';
 import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../utils/utils';
 const currentConversation = ref<IConversationModel>();
+const isClicked = ref(false);
 interface IProps {
   title?:string;
   icon?:string | undefined;
@@ -42,9 +43,13 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
 };
 
 const onClick = () => {
+  if (isClicked.value || !currentConversation.value) {
+    return;
+  }
+  isClicked.value = true;
   TUIChatService.sendCustomMessage({
-    to: getTo(currentConversation?.value),
-    conversationType: currentConversation?.value?.type,
+    to: getTo(currentConversation.value),
+    conversationType: currentConversation.value.type,
     payload: {
       data: JSON.stringify({
         customerServicePlugin: 0,
@@ -56,4 +61,10 @@ const onClick = () => {
 }
 
 </script>
-<style></style>
+<style>
+.end-conversation-button-clicked {
+  background: #f0f2f9;
+  color: #97A3B4;
+  cursor: default;
+}
+</style>

package/components/CustomerServiceChat/message-toolbar-button/toolbar-button-human-service.vue

@@ -12,7 +12,7 @@ const { ref, onMounted, onUnmounted } = vue;
 import { isH5 } from '../../../utils/env';
 import Icon from '../../common/Icon.vue';
 import { TUITranslateService, TUIChatService, IConversationModel, StoreName, TUIStore } from '@tencentcloud/chat-uikit-engine';
-import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../utils/utils';
+import { isEnabledMessageReadReceiptGlobal, getTo, debounce } from '../../../utils/utils';
 const currentConversation = ref<IConversationModel>();
 interface IProps {
   title?:string;
@@ -40,16 +40,19 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
   currentConversation.value = conversation;
 };
 
-const onClick = () => {
+const onClick = debounce(() => {
+  if (!currentConversation.value) {
+    return;
+  }
   TUIChatService.sendTextMessage({
-    to: getTo(currentConversation?.value),
-    conversationType: currentConversation?.value?.type,
+    to: getTo(currentConversation.value),
+    conversationType: currentConversation.value.type,
     payload: {
       text: TUITranslateService.t('AIDesk.转人工服务')
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   });
-}
+}, 300);
 
 </script>
 <style></style>

package/components/CustomerServiceChat/message-toolbar-button/toolbar-button-service-rating.vue

@@ -13,7 +13,7 @@ import { isH5 } from '../../../utils/env';
 import Icon from '../../common/Icon.vue';
 import { TUITranslateService, TUIChatService, IConversationModel, StoreName, TUIStore } from '@tencentcloud/chat-uikit-engine';
 import { CUSTOM_MESSAGE_SRC } from '../../../constant';
-import { isEnabledMessageReadReceiptGlobal, getTo } from '../../../utils/utils';
+import { isEnabledMessageReadReceiptGlobal, getTo, debounce } from '../../../utils/utils';
 const currentConversation = ref<IConversationModel>();
 interface IProps {
   title?:string;
@@ -41,10 +41,13 @@ const onCurrentConversationUpdate = (conversation: IConversationModel) => {
   currentConversation.value = conversation;
 };
 
-const onClick = () => {
+const onClick = debounce(() => {
+  if (!currentConversation.value) {
+    return;
+  }
   TUIChatService.sendCustomMessage({
-    to: getTo(currentConversation?.value),
-    conversationType: currentConversation?.value?.type,
+    to: getTo(currentConversation.value),
+    conversationType: currentConversation.value.type,
     payload: {
       data:JSON.stringify({
         src: CUSTOM_MESSAGE_SRC.USER_SATISFACTION,
@@ -53,7 +56,7 @@ const onClick = () => {
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),
   },{ onlineUserOnly: true });
-}
+}, 300);
 
 </script>
 <style></style>

package/interface.ts

@@ -238,4 +238,12 @@ export interface ITransferToHumanModel {
   groupID?: number;
   specificMemberList?: Array<string>;
   description?: string;
+}
+
+export interface IHeaderConfig {
+  title?: string;
+  logo?: string;
+  showLogo?: boolean;
+  logoWidth?: string;
+  logoHeight?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/ai-desk-customer-vue",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "description": "Vue2/Vue3 UIKit for AI Desk",
   "main": "index",
   "keywords": [

package/utils/utils.ts

@@ -363,4 +363,17 @@ export function validateUserID(userID: string) {
 
 export function updateCustomStore(key: string, data: {conversationID: string, value: boolean}) {
   TUIStore.update(StoreName.CUSTOM, key, data);
+}
+
+export function debounce(func, delay) {
+  let timeoutID;
+  return function (this: any, ...args) {
+    const context = this;
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+    timeoutID = setTimeout(() => {
+      func.apply(context, args); 
+    }, delay);
+  }
 }