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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 1.5.9 @2025.9.18
+
+### Features
+- 支持展示工作台快捷回复的视频。
+- 固定底部弹窗的提交按钮，不随内容滚动，优化产品体验。
+- 优化组件内超链接 的 title 和字体颜色。
+
 ## 1.5.9 @2025.9.8
 
 ### Features

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%;">
+          <div class="dialog-container">
             <div class="dialog-title">
               <div class="dialog-title-tip">
                 {{ props.payload.content.tip }}
@@ -44,10 +44,10 @@
                   </div>
                 </div>
               </div>
-              <div class="button-container" v-if="props.payload.nodeStatus === 0">
-                <div class="button" @click="handleSendForm">
-                  {{ TUITranslateService.t("AIDesk.提交") }}
-                </div>
+            </div>
+            <div class="button-container" v-if="props.payload.nodeStatus === 0">
+              <div class="button" @click="handleSendForm">
+                {{ TUITranslateService.t("AIDesk.提交") }}
               </div>
             </div>
           </div>
@@ -356,6 +356,12 @@ export default {
   }
 }
 
+.dialog-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .dialog-title {
   display: flex;
   flex-direction: row;

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

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<IProps>(), {
 });
 const enableURLDetection = ref(state.get('enableURLDetection'));
 const linkColor = computed(() => {
-  return props.flow === 'out' && isPC ? '#fff' : '#0052d9';
+  return props.flow === 'out' ? '#fff' : '#0052d9';
 });
 const textMessageData = computed(() => {
   const contentCopy = JSON.parse(JSON.stringify(props.content));

package/package.json

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