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

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.5.9 @2025.9.18
+
+### Features
+- 支持展示工作台快捷回复的视频。
+- 固定底部弹窗的提交按钮，不随内容滚动，优化产品体验。
+- 优化组件内超链接 的 title 和字体颜色。
+
+## 1.5.9 @2025.9.8
+
+### Features
+- 支持识别文本消息中的 url 并可点击。
+- 优化工具栏的【结束会话按钮】的显隐时机。
+
+### Fixed
+- 切换账号，新账号的资料可能异常问题。
+
 ## 1.5.8 @2025.8.26
 
 ### Features

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

@@ -9,7 +9,7 @@
         <Icon :file="backSVG" />
       </div>
       <div class="chat-header-container">
-        <Icon v-if="!isPC" width="32px" :file="customerAvatarMobile" />
+        <Icon v-if="!isPC" width="32px" height="23px" :file="customerAvatarMobile" />
         <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
           {{ currentConversationName }}
         </div>
@@ -126,9 +126,20 @@ const closeChat = (conversationID: string | undefined) => {
   emits('closeChat', conversationID);
 };
 
+function setCurrentConversationName() {
+  if (!currentConversation.value) {
+    return;
+  }
+  if (isPC) {
+    currentConversationName.value = currentConversation.value?.getShowName() || '';
+  } else {
+    currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value.getShowName();
+  }
+}
+
 function onCurrentConversationUpdated(conversation: IConversationModel) {
   currentConversation.value = conversation;
-  currentConversationName.value = currentConversation.value?.getShowName();
+  setCurrentConversationName();
 }
 
 function onTypingStatusUpdated(data: {conversationID: string, value: boolean}) {
@@ -137,11 +148,7 @@ function onTypingStatusUpdated(data: {conversationID: string, value: boolean}) {
     if (isTyping.value && state.get('showTyping') === 1) {
       currentConversationName.value = TUITranslateService.t('TUIChat.对方正在输入');
     } else {
-      if (isPC) {
-        currentConversationName.value = currentConversation.value?.getShowName();
-      } else {
-        currentConversationName.value = TUITranslateService.t('AIDesk.Hi，我是') + currentConversation.value?.getShowName();
-      }
+      setCurrentConversationName();
     }
   }
 }

package/components/CustomerServiceChat/index-web.vue

@@ -30,7 +30,7 @@
         @dislike="onDislike"
       />
       <MessageToolbarButton
-        v-if="!isH5 || (!Boolean(quoteMessage) && !showBottomQuickOrder)"
+        v-if="props.toolbarButtonList && (!isH5 || (!Boolean(quoteMessage) && !showBottomQuickOrder))"
         :toolbarButtonList="props.toolbarButtonList"
       />
       <MessageInputToolbar
@@ -146,6 +146,7 @@ interface IProps {
   langList?: Array<string>;
   enableFeedback?: number;
   enableAINote?: number;
+  enableURLDetection?: number;
 }
 
 const emits = defineEmits(['closeChat']);
@@ -188,6 +189,7 @@ const props = withDefaults(defineProps<IProps>(), {
   enableFeedback: 0,
   enableAINote: 1,
   langList: () => [],
+  enableURLDetection: 0,
 });
 
 const loginCustomerUIKit = () => {
@@ -299,6 +301,10 @@ const setShowTyping = () => {
   state.set('showTyping', props.showTyping);
 }
 
+const setEnableURLDetection = () => {
+  state.set('enableURLDetection', props.enableURLDetection);
+}
+
 try {
   const userContext = TUILogin.getContext();
   if (userContext.userID == '' && props.SDKAppID !==0 && props.userID !=='' && props.userSig !==''){
@@ -311,6 +317,7 @@ try {
   setAvatarNickName();
   setShowReadStatus();
   setShowTyping();
+  setEnableURLDetection();
   getTimeZoneAndCountry();
   if (isNonEmptyObject(props.bottomQuickOrder)) {
     showBottomQuickOrder.value = true;

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

@@ -82,6 +82,7 @@
                   <MessageText
                     v-else-if="item.type === TYPES.MSG_TEXT"
                     :content="item.getMessageContent()"
+                    :flow="item.flow"
                   />
                   <ProgressMessage
                     v-else-if="item.type === TYPES.MSG_IMAGE"
@@ -374,10 +375,12 @@ function onNewMessageList(list: IMessageModel[]) {
       const conversationID = message.conversationID;
       if (data) {
         if (data.src === CUSTOM_MESSAGE_SRC.BOT_STATUS) {
+          updateCustomStore("canEndConversation", { conversationID, value: true });
           if (data.content.content === 'inBot') {
             updateCustomStore("isInHumanService", { conversationID, value: false });
           }
         } else if (data.src === CUSTOM_MESSAGE_SRC.SEAT_STATUS) {
+          updateCustomStore("canEndConversation", { conversationID, value: true });
           if (data.content.command === "updateSeatStatus") {
             if (data.content.content === 'inSeat') {
               updateCustomStore("isInHumanService", { conversationID, value: true });
@@ -392,9 +395,7 @@ function onNewMessageList(list: IMessageModel[]) {
             updateCustomStore("isTyping", { conversationID, value: false });
           }
         } else if (data.src === CUSTOM_MESSAGE_SRC.NO_SEAT_ONLINE || data.src === CUSTOM_MESSAGE_SRC.TIMEOUT || data.src === CUSTOM_MESSAGE_SRC.END) {
-          updateCustomStore("isInSession", { conversationID, value: false });
-        } else if (data.src === CUSTOM_MESSAGE_SRC.SESSION_RESTARTED) {
-          updateCustomStore("isInSession", { conversationID, value: true });
+          updateCustomStore("canEndConversation", { conversationID, value: false });
         } else if (data.src === CUSTOM_MESSAGE_SRC.GET_FEEDBACK_MENU) {
           TUIStore.update(StoreName.CUSTOM, "feedbackTags", data.content.menu);
         }

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

@@ -11,10 +11,23 @@ export const marked = new Marked(
           class="image-container"
           onclick="onMarkdownImageClicked('${safeHref}')"
           style="cursor:pointer;" >
-            <img src="${href}" alt="${text}" onload="onMarkdownImageLoad()"/>
+            <img src="${href}" alt="${text}" onload="onMarkdownMediaLoad()"/>
           </div>
         `;
       },
+      paragraph(text: string) {
+        if (text.startsWith('<video')) {
+          const videoSrc = extractVideoSrc(text) || '';
+          if (videoSrc) {
+            return `<div class="message-video">
+              <div class="message-video-box">
+                <video class="message-img video-web" src="${videoSrc}" onloadeddata="onMarkdownMediaLoad()" preload="auto" controls/>
+              </div>
+            </div>`;
+        }
+        }
+        return text
+      },
       link(this: any, href: string | null, title: string | null, text: string) {
         if (href) {
           // 匹配以 http:// 或 https:// 开头，所有 URL 主体字符，遇到第一个非主体字符（如中文括号、空格、表情符号等）时停止
@@ -24,7 +37,7 @@ export const marked = new Marked(
               // 如果 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>`;
+            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}`);
@@ -37,6 +50,12 @@ export const marked = new Marked(
   },
 );
 
+const extractVideoSrc = (text: string) => {
+  const videoSrcRegex = /<video[^>]*src=["']([^"']*)["'][^>]*>/gi;
+  const result = videoSrcRegex.exec(text);
+  return result ? result[1] : null;
+}
+
 export const parseMarkdown = (text: string) => {
   let ret = marked.parse(text);
   return typeof ret === 'string' ? ret : '';

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/form-mobile.vue

@@ -15,7 +15,7 @@
           @onClose="closeDialog"
           title=""
         >
-          <div style="height:100%;overflow-y: auto;">
+          <div class="dialog-container">
             <div class="dialog-title">
               <div class="dialog-title-tip">
                 {{ props.payload.content.tip }}
@@ -24,22 +24,24 @@
                 <Icon :src="iconClose" width="16px" height="16px"/>
               </div>
             </div>
-            <div
-              v-for="(item, index) in props.payload.content.inputVariables"
-              :key="index"
-            >
-              <div v-if="item.formType == 0 && props.payload.nodeStatus == 0">
-                <InputMobile :placeholder="item.placeholder" :variableValue="item.variableValue" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
-              </div>
-              <div v-else-if="item.formType == 1 && props.payload.nodeStatus == 0">
-                <RadioMobile :chooseItemList="item.chooseItemList" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
-              </div>
-              <div v-else class="variable-value-container-mobile">
-                <div class="variable-value-label-mobile">
-                  {{ item.name }}
+            <div class="dialog-show-content">
+              <div
+                v-for="(item, index) in props.payload.content.inputVariables"
+                :key="index"
+              >
+                <div v-if="item.formType == 0 && props.payload.nodeStatus == 0">
+                  <InputMobile :placeholder="item.placeholder" :variableValue="item.variableValue" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
+                </div>
+                <div v-else-if="item.formType == 1 && props.payload.nodeStatus == 0">
+                  <RadioMobile :chooseItemList="item.chooseItemList" :name="item.name" :isRequired="item.isRequired" @input-change="handleInputChange" :validator="item.isRequired == 1 && isValid(item.name)"/>
                 </div>
-                <div class="variable-value">
-                  {{ item.variableValue == '' ||  item.variableValue == null ? mapValue[item.name] : item.variableValue}}
+                <div v-else class="variable-value-container-mobile">
+                  <div class="variable-value-label-mobile">
+                    {{ item.name }}
+                  </div>
+                  <div class="variable-value">
+                    {{ item.variableValue == '' ||  item.variableValue == null ? mapValue[item.name] : item.variableValue}}
+                  </div>
                 </div>
               </div>
             </div>
@@ -163,6 +165,7 @@ export default {
       };
       emit('sendMessage', submitData);
       isSubmit.value = false;
+      closeDialog();
     };
     const handleInputChange = ({name,value}) => {
       mapValue.value[name] = value;
@@ -353,6 +356,12 @@ export default {
   }
 }
 
+.dialog-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .dialog-title {
   display: flex;
   flex-direction: row;
@@ -369,6 +378,12 @@ export default {
     color: rgba(153,153,153,1);
   }
 }
+
+.dialog-show-content {
+  overflow-y: auto;
+  max-height: 68vh;
+}
+
 .variable-value-container-mobile {
   padding: 16px;
   display: flex;

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

@@ -27,8 +27,7 @@ interface Props {
   payload: customerServicePayloadType;
 }
 export default {
-  components: {
-  },
+  components: {},
   props: {
     payload: {
       type: Object as () => customerServicePayloadType,
@@ -41,12 +40,12 @@ export default {
     const imageList = [];
     const parsedContent = computed(() => {
       // @ts-ignore
-      window.onMarkdownImageClicked = function(href:string) {
+      window.onMarkdownImageClicked = function(href: string) {
         image.value = !image.value;
         imageSrc.value = decodeURIComponent(href);
       }
       // @ts-ignore
-      window.onMarkdownImageLoad = function() {
+      window.onMarkdownMediaLoad = function() {
         emit('heightChanged');
       }
       return parseMarkdown(props.payload.content);
@@ -63,7 +62,7 @@ export default {
       image,
       imageSrc,
       closeImage,
-      imageList
+      imageList,
     };
   },
 };
@@ -93,4 +92,57 @@ export default {
   overflow: hidden;
   pointer-events: auto;
 }
+.message-video {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  &-box {
+    max-width: min(calc(100vw - 180px), 300px);
+    font-size: 0;
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+    }
+  }
+}
+.dialog-video {
+  position: fixed;
+  z-index: 12;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-close {
+    display: flex;
+    justify-content: flex-end;
+    background: #000;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+
+  &-box {
+    display: flex;
+    flex: 1;
+    max-height: 100%;
+    padding: 6rem;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+
+    video {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
 </style>

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

@@ -1,11 +1,15 @@
 <template>
   <div :class="['message-text-container', isPC && 'text-select']">
     <span
-      v-for="(item, index) in data.text"
+      v-for="(item, index) in textMessageData.text"
       :key="index"
-    >
+    > 
+      <span v-if="item.name === 'text' && enableURLDetection === 1"
+        class="text"
+        v-html="item.text"
+      ></span>
       <span
-        v-if="item.name === 'text'"
+        v-else-if="item.name === 'text'"
         class="text"
       >{{ item.text }}</span>
       <img
@@ -25,17 +29,23 @@ import {
   CUSTOM_BASIC_EMOJI_URL_MAPPING,
 } from '../../emoji-config';
 import { isPC } from '../../../../utils/env';
-const { watchEffect, ref } = vue;
+import state from '../../../../utils/state.js';
+const {ref, computed } = vue;
 interface IProps {
   content: Record<string, any>;
+  flow: string;
 }
 const props = withDefaults(defineProps<IProps>(), {
   content: () => ({}),
+  flow: 'in',
+});
+const enableURLDetection = ref(state.get('enableURLDetection'));
+const linkColor = computed(() => {
+  return props.flow === 'out' ? '#fff' : '#0052d9';
 });
-const data = ref();
-watchEffect(() => {
-  data.value = props.content;
-  data.value.text?.forEach(
+const textMessageData = computed(() => {
+  const contentCopy = JSON.parse(JSON.stringify(props.content));
+  contentCopy.text?.forEach(
     (item: {
       name: string;
       text?: string;
@@ -45,24 +55,22 @@ watchEffect(() => {
     }) => {
       if (item.name === 'img' && item?.type === 'custom') {
         if (!CUSTOM_BASIC_EMOJI_URL) {
-          console.warn(
-            'CUSTOM_BASIC_EMOJI_URL is required for custom emoji, please check your CUSTOM_BASIC_EMOJI_URL.',
-          );
-        } else if (
-          !item.emojiKey
-          || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
-        ) {
-          console.warn(
-            'emojiKey is required for custom emoji, please check your emojiKey.',
-          );
+          console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji, please check your CUSTOM_BASIC_EMOJI_URL.');
+        } else if (!item.emojiKey || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]) {
+          console.warn('emojiKey is required for custom emoji, please check your emojiKey.');
         } else {
           item.src
             = CUSTOM_BASIC_EMOJI_URL
             + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey];
         }
+      } else if (item.name === 'text' && enableURLDetection.value) {
+        item.text = item.text.replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (url) => {
+          return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="message-text-link" style="color: ${linkColor.value}; text-decoration: underline;">${url}</a>`;
+        }) || '';
       }
     },
   );
+  return contentCopy;
 });
 </script>
 <style lang="scss" scoped>

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

@@ -3,7 +3,7 @@
     <template v-for="(item, index) in props.toolbarButtonList">
       <ToolbarButtonHumanService v-if="item.presetId === TOOLBAR_BUTTON_TYPE.HUMAN_SERVICE && shouldRender(item) && !isInHumanService" :title="item.title" :icon="item.icon"/>
       <ToolbarButtonServiceRating v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.SERVICE_RATING && shouldRender(item) && isInHumanService" :title="item.title" :icon="item.icon"/>
-      <ToolbarButtonEndHumanService v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && ((item.displayFlag === 1 && isInSession) || isInHumanService)" :title="item.title" :icon="item.icon"/>
+      <ToolbarButtonEndHumanService v-else-if="item.presetId === TOOLBAR_BUTTON_TYPE.END_HUMAN_SERVICE && shouldRender(item) && ((item.displayFlag === 1 && canEndConversation) || isInHumanService)" :title="item.title" :icon="item.icon"/>
       <div v-else-if="shouldRender(item) && !item.presetId" :key="index"
         :class="['toolbar-button', isH5 ? 'toolbar-button-h5' : '']" @click="onClick(item, index)">
         <Icon v-if="item.icon" class="toolbar-button-icon" :file="item.icon" width="18px" height="18px"/>
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<IProps>(), {});
 
 const isInHumanService = ref(false);
 const currentConversation = ref<IConversationModel>();
-const isInSession = ref(true);
+const canEndConversation = ref(false);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
@@ -47,7 +47,7 @@ onMounted(() => {
   });
   TUIStore.watch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
-    isInSession: onInSessionUpdate
+    canEndConversation: onCanEndConversationUpdate
   });
 });
 
@@ -57,7 +57,7 @@ onUnmounted(() => {
   });
   TUIStore.unwatch(StoreName.CUSTOM, {
     isInHumanService: onInHumanServiceUpdate,
-    isInSession: onInSessionUpdate
+    canEndConversation: onCanEndConversationUpdate
   });
 });
 
@@ -71,9 +71,9 @@ const onInHumanServiceUpdate = (data: {conversationID: string, value: boolean})
   }
 };
 
-const onInSessionUpdate = (data: {conversationID: string, value: boolean}) => {
+const onCanEndConversationUpdate = (data: {conversationID: string, value: boolean}) => {
   if (data && data.conversationID === currentConversation.value.conversationID) {
-    isInSession.value = data.value;
+    canEndConversation.value = data.value;
   }
 }
 
@@ -119,6 +119,7 @@ function shouldRender(item: ToolbarButtonModel) {
   overflow-x: auto; /* 允许横向滚动 */
   scrollbar-width: none; /* Firefox 隐藏滚动条 */
   -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
+  min-height: 28px;
   &::-webkit-scrollbar {
     display: none; /* Chrome 隐藏滚动条 */
   }

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

@@ -48,7 +48,7 @@ const onClick = () => {
     payload: {
       data: JSON.stringify({
         customerServicePlugin: 0,
-        src: CUSTOM_MESSAGE_SRC.USER_END_SESSION,
+        src: CUSTOM_MESSAGE_SRC.USER_END_CONVERSATION,
       }),
     },
     needReadReceipt: isEnabledMessageReadReceiptGlobal(),

package/constant.ts

@@ -25,7 +25,7 @@ export const CUSTOM_MESSAGE_SRC = {
   USER_SATISFACTION: '24',
   BOT_STATUS: '25',
   SEAT_STATUS: '26',
-  USER_END_SESSION: '27',
+  USER_END_CONVERSATION: '27',
   ORDER:'28',
   ROBOT_MSG: '29',
   RICH_TEXT: '30',
@@ -37,7 +37,6 @@ export const CUSTOM_MESSAGE_SRC = {
   CONCURRENCY_LIMIT: '36',
   TIMEOUT_WARNING: '37',
   TRANSFER_TO_HUMAN: '39',
-  SESSION_RESTARTED: '40',
   GET_FEEDBACK_MENU: '42',
   SEND_FEEDBACK: '43',
 };

package/package.json

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

package/server.ts

@@ -13,8 +13,6 @@ import TUIChatEngine, {
   SendMessageParams,
   SendMessageOptions,
   TUIUserService,
-  TUIStore,
-  StoreName,
 } from '@tencentcloud/chat-uikit-engine';
 import Log from './utils/logger';
 import { version } from './package.json'
@@ -148,6 +146,7 @@ export default class TUICustomerServer {
 
   public async unInit() {
     this.isLoggedIn = false;
+    this.myProfile = { avatar: USER_DEFAULT_AVATAR };
     return TUIChatEngine.logout();
   }
 
@@ -280,7 +279,6 @@ export default class TUICustomerServer {
         }),
       },
     }, { onlineUserOnly: true });
-    updateCustomStore("isInSession", { conversationID: params.conversationID, value: true });
     Log.w(`TUICustomerServer.activeServiceFlow src 7 sent`);
   }
 }