@tencentcloud/ai-desk-customer-vue 1.7.1 → 1.7.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.7.2 @2026.3.30
+
+### Features
+- 优化流式消息展示效果
+
+### Fixed
+- 修复已知问题
+
 ## 1.7.1 @2026.3.17
 
 ### Features

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

@@ -403,5 +403,8 @@ export default {
 }
 .dialog-title {
   gap: 10px;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
 }
 </style>

package/components/CustomerServiceChat/index-web.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="['tui-chat', !isPC && 'tui-chat-h5']" :key="currentLanguage">
+<div :class="['tui-chat', !isPC && 'tui-chat-h5','ai-desk-customer']" :key="currentLanguage">
     <div
       v-if="currentConversationID && (!props.showQueuePage || queueNumber < 0 || queueNumber === undefined || hasLeftQueue)"
-      :class="['tui-chat', !isPC && 'tui-chat-h5']"
+      :class="['tui-chat', !isPC && 'tui-chat-h5','ai-desk-customer']"
     >
       <ChatHeader
         :class="[

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

@@ -32,7 +32,7 @@ export const marked = new Marked(
       },
       link(this: any, href: string | null, title: string | null, text: string) {
         if (href) {
-          return getStyledATagFromText(href, "message-marked_link", undefined, title || '');
+          return getStyledATagFromText(href, "message-marked_link", undefined, title || text || '');
         }
         return text;
       },
@@ -52,7 +52,7 @@ export const parseMarkdown = (text: string) => {
   if (typeof ret === 'string') {
     const purified = DOMPurify.sanitize(ret,{
       USE_PROFILES: { html: true,},
-      ADD_ATTR: ['onclick'],
+      ADD_ATTR: ['onclick', 'target'],
       FORBID_TAGS: ['style']
     });
     return purified;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/message-multi-form/component-pc/input-pc.vue

@@ -63,7 +63,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 input:disabled {
   background-color: #dbdbdb;
   opacity: 0.5;

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

@@ -197,7 +197,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../styles/common.scss";
 
 .edit-profile-container {
@@ -382,6 +382,7 @@ export default {
 .dialog-show-content {
   overflow-y: auto;
   max-height: 68vh;
+  padding: 0 20px;
 }
 
 .variable-value-container-mobile {

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

@@ -2,7 +2,7 @@
   <div>
     <div class="message-stream">
       <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
-      <pre ref="preRef" :class="['message-marked']" v-html="displayedContent" />
+      <div ref="contentRef" :class="['message-marked']"></div>
     </div>
     <div v-if="image" class="rich-image-previewer" @click="closeImage">
       <img
@@ -20,7 +20,7 @@ import { parseMarkdown } from './marked'
 import { TypeWriter } from "./type-writer";
 import { JSONToObject } from "../../../../../../utils";
 
-const { ref, computed, withDefaults, defineProps, watch, onMounted, onUnmounted } = vue;
+const { ref, computed, watch, onMounted, onUnmounted } = vue;
 
 interface Props {
   payload: customerServicePayloadType;
@@ -38,20 +38,256 @@ const chunks = ref<string>('');
 const isFinished = ref<boolean>(true);
 const prevChunksLength = ref<number>(0);
 const streamContent = ref<string>('');
-const displayedContent = computed(() => {
-  // @ts-ignore
-  window.onMarkdownImageClicked = function(href:string) {
-    image.value = !image.value;
-    imageSrc.value = decodeURIComponent(href);
-  }
-  // @ts-ignore
-  window.onMarkdownMediaLoad = function() {
-    // empty implementation
-    // 已经用 ResizeObserver 观测高度，这里不用重复通知高度变化
-  }
-  return parseMarkdown(streamContent.value);
+const contentRef = ref<HTMLElement>(); // DOM 容器引用
+
+// 设置全局回调函数（只需设置一次）
+// @ts-ignore
+window.onMarkdownImageClicked = function(href: string) {
+  image.value = !image.value;
+  imageSrc.value = decodeURIComponent(href);
+}
+// @ts-ignore
+window.onMarkdownMediaLoad = function() {
+  // empty implementation
+  // 已经用 ResizeObserver 观测高度，这里不用重复通知高度变化
+}
+
+/**
+ * 智能 DOM 更新（innerHTML + 媒体元素保留）：
+ * 1. 先把容器内已有的 img/video/a 元素"摘出来"保存
+ * 2. 用 innerHTML 全量替换（速度最快，浏览器原生实现）
+ * 3. 替换后，把新 DOM 中对应位置的 img/video/a 替换回旧的真实节点
+ *    （避免媒体元素被销毁重建导致闪烁/重新加载）
+ */
+function smartUpdate(container: HTMLElement, newHTML: string) {
+  // Step 1: 收集旧的媒体元素，以 src/href 为 key 保存真实 DOM 节点
+  const savedMedia = new Map<string, HTMLElement[]>();
+  container.querySelectorAll('img, video, a').forEach((el) => {
+    const key = el.getAttribute('src') || el.getAttribute('href') || '';
+    if (!key) {
+      return;
+    }
+    if (!savedMedia.has(key)) {
+      savedMedia.set(key, []);
+    }
+    savedMedia.get(key)!.push(el as HTMLElement);
+  });
+
+  // 没有需要保留的媒体元素，直接 innerHTML 替换即可
+  if (savedMedia.size === 0) {
+    container.innerHTML = newHTML;
+    return;
+  }
+
+  // Step 2: 先把旧媒体节点从 DOM 中摘出来（移到一个临时片段，防止被 innerHTML 销毁）
+  const fragment = document.createDocumentFragment();
+  savedMedia.forEach((els) => {
+    els.forEach((el) => fragment.appendChild(el));
+  });
+
+  // Step 3: innerHTML 全量替换（最快）
+  container.innerHTML = newHTML;
+
+  // Step 4: 遍历新 DOM 中的媒体元素，如果 src/href 匹配，用旧节点替换新节点
+  // 这样旧的 img/video 不会重新加载，a 标签保持原有状态
+  const usedCount = new Map<string, number>(); // 记录每个 key 已使用的次数（处理同 src 多次出现）
+  container.querySelectorAll('img, video, a').forEach((newEl) => {
+    const key = newEl.getAttribute('src') || newEl.getAttribute('href') || '';
+    if (!key || !savedMedia.has(key)) {
+      return;
+    }
+
+    const count = usedCount.get(key) || 0;
+    const oldEls = savedMedia.get(key)!;
+    if (count < oldEls.length) {
+      // 用保存的旧节点替换新创建的节点
+      newEl.parentNode?.replaceChild(oldEls[count], newEl);
+      usedCount.set(key, count + 1);
+    }
+  });
+}
+
+// ---- 媒体标记预提取 & 即时插入逻辑 ----
+// 匹配完整的 Markdown 媒体标记：![alt](url) 图片 和 [text](url) 链接
+const MEDIA_MARK_RE = /!?\[[^\]]*\]\([^)]*\)/g;
+
+/**
+ * 媒体段信息：记录 chunks 中每个媒体标记的位置和内容
+ */
+interface MediaSegment {
+  start: number;  // 媒体标记在 chunks 中的起始位置
+  end: number;    // 媒体标记在 chunks 中的结束位置
+  mark: string;   // 完整的媒体标记文本，如 ![alt](url)
+}
+
+// 从 chunks 预扫描出的所有完整媒体标记
+let mediaSegments: MediaSegment[] = [];
+// 记录已经即时插入的媒体标记索引，避免重复插入
+let insertedMediaIndex = 0;
+// 纯文本累计长度（不含已插入的媒体标记），用于判断 TypeWriter 输出到哪了
+let pureTextLength = 0;
+// 记录 chunks 末尾被截留的不完整媒体标记文本（等下一批 chunks 补全）
+let pendingTail = '';
+// 记录上一次已处理（送入 TypeWriter + 截留）的 chunks 长度
+let processedChunksLength = 0;
+
+/**
+ * 从完整 chunks 中预扫描所有媒体标记的位置。
+ * 每次 chunks 更新时调用，会发现新补全的完整媒体标记。
+ */
+function scanMediaSegments(fullText: string) {
+  mediaSegments = [];
+  MEDIA_MARK_RE.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = MEDIA_MARK_RE.exec(fullText)) !== null) {
+    mediaSegments.push({
+      start: match.index,
+      end: match.index + match[0].length,
+      mark: match[0],
+    });
+  }
+}
+
+/**
+ * 检测文本末尾是否有未闭合的 Markdown 媒体标记开头。
+ * 用于判断 chunks 末尾是否有被截断的媒体标记，需要等下一批补全。
+ * 返回未闭合部分的起始位置（相对于 text），如果没有则返回 -1。
+ *
+ * 例如：
+ *   "一些文字![alt](https://xxx"  → 返回 "![alt](https://xxx" 的起始位置
+ *   "一些文字![alt"               → 返回 "![alt" 的起始位置
+ *   "一些文字完整内容"             → 返回 -1
+ */
+function findIncompleteTail(text: string): number {
+  // 只检查末尾一小段，避免长文本性能问题
+  const checkLen = 500;
+  const startPos = Math.max(0, text.length - checkLen);
+  const tail = text.slice(startPos);
+
+  // 从后往前找最后一个 ![ 或独立的 [（非 ![ 前缀的链接）
+  // 策略：找到最后一个可能的媒体标记起始位置，检查它是否闭合
+  let lastImgStart = tail.lastIndexOf('![');
+  let lastLinkStart = -1;
+
+  // 找最后一个 [ 但不是 ![ 的一部分（用于 [text](url) 链接）
+  for (let i = tail.length - 1; i >= 0; i--) {
+    if (tail[i] === '[' && (i === 0 || tail[i - 1] !== '!')) {
+      lastLinkStart = i;
+      break;
+    }
+  }
+
+  // 取最靠后的那个起始位置
+  const candidatePos = Math.max(lastImgStart, lastLinkStart);
+  if (candidatePos === -1) return -1;
+
+  // 从候选位置开始，检查是否有完整闭合的 ] 和 )
+  const candidate = tail.slice(candidatePos);
+
+  // 检查是否有完整的 [...](...) 结构
+  const bracketClose = candidate.indexOf(']');
+  if (bracketClose === -1) {
+    // [ 还没闭合
+    return startPos + candidatePos;
+  }
+
+  // ] 后面必须紧跟 (
+  if (bracketClose + 1 >= candidate.length || candidate[bracketClose + 1] !== '(') {
+    // ] 后面没有 (，可能不是媒体标记，不截留
+    return -1;
+  }
+
+  // 有 ]( 了，检查 ) 是否闭合
+  const parenClose = candidate.indexOf(')', bracketClose + 2);
+  if (parenClose === -1) {
+    // ]( 后面的 url 还没闭合
+    return startPos + candidatePos;
+  }
+
+  // 完整闭合了，不需要截留
+  return -1;
+}
+
+/**
+ * 将 chunks 中的新增内容拆分为：只保留纯文本部分（去掉已识别的完整媒体标记）。
+ * @param text - 要处理的文本
+ * @param offsetInChunks - 这段文本在完整 chunks 中的起始偏移
+ * @returns 去掉媒体标记后的纯文本
+ */
+function stripMediaMarks(text: string, offsetInChunks: number): string {
+  let result = '';
+  let cursor = offsetInChunks;
+  const end = offsetInChunks + text.length;
+
+  for (const seg of mediaSegments) {
+    // 跳过已经在之前处理过的媒体标记
+    if (seg.end <= cursor) continue;
+    // 超出本次新增范围，后面的也不用看了
+    if (seg.start >= end) break;
+
+    // 媒体标记前面的纯文本
+    if (seg.start > cursor) {
+      result += text.substring(cursor - offsetInChunks, seg.start - offsetInChunks);
+    }
+    // 跳过媒体标记本身（不加入纯文本）
+    cursor = Math.min(seg.end, end);
+  }
+
+  // 剩余的纯文本
+  if (cursor < end) {
+    result += text.substring(cursor - offsetInChunks);
+  }
+
+  return result;
+}
+
+/**
+ * 检查 TypeWriter 的纯文本输出进度，当输出到某个媒体标记的位置时，
+ * 立即将完整的媒体标记插入 streamContent，不走逐字输出。
+ */
+function tryInsertPendingMedia() {
+  while (insertedMediaIndex < mediaSegments.length) {
+    const seg = mediaSegments[insertedMediaIndex];
+    // 计算该媒体标记之前有多少纯文本字符
+    let prevMediaLen = 0;
+    for (let i = 0; i < insertedMediaIndex; i++) {
+      prevMediaLen += mediaSegments[i].mark.length;
+    }
+    const pureTextBeforeThisMark = seg.start - prevMediaLen;
+
+    // 当 TypeWriter 输出的纯文本长度达到该媒体标记的位置时，立即插入
+    if (pureTextLength >= pureTextBeforeThisMark) {
+      streamContent.value += seg.mark;
+      insertedMediaIndex++;
+    } else {
+      break;
+    }
+  }
+}
+
+/**
+ * 执行实际的 DOM 渲染
+ */
+function doRender() {
+  if (!contentRef.value) {
+    return;
+  }
+  const html = parseMarkdown(streamContent.value);
+  smartUpdate(contentRef.value, html);
+  emits('heightChanged');
+}
+
+/**
+ * 监听 streamContent 变化，直接渲染（不再需要缓冲延迟）。
+ * 因为媒体标记是完整插入的，streamContent 中不会出现半截的 ![alt](url
+ */
+watch(streamContent, () => {
+  if (!contentRef.value) {
+    return;
+  }
+  doRender();
 });
-const preRef = ref();
+
 const emits = defineEmits(['heightChanged']);
 // 不支持 ResizeObserver 的浏览器太老旧，默认不处理了
 const canIUseResizeObserver = typeof ResizeObserver === 'undefined' ? false : true;
@@ -61,11 +297,19 @@ let prevHeight;
 
 const typeWriter = new TypeWriter({
   onTyping: (item: string) => {
+    // TypeWriter 只输出纯文本，累计纯文本长度
+    pureTextLength += item.length;
     streamContent.value += item;
-    // emits('onStreaming', item, streamContent.value);
+    // 检查是否到了某个媒体标记的位置，是则立即插入完整标记
+    tryInsertPendingMedia();
   },
   onComplete() {
     isStreaming.value = false;
+    // 完成时确保所有剩余媒体标记都已插入（防御边界情况）
+    while (insertedMediaIndex < mediaSegments.length) {
+      streamContent.value += mediaSegments[insertedMediaIndex].mark;
+      insertedMediaIndex++;
+    }
   },
 });
 
@@ -91,6 +335,10 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
       chunks.value = Array.isArray(_payloadObject.chunks) ? _payloadObject.chunks.join('') : _payloadObject.chunks;
       isFinished.value = _payloadObject.isFinished === 1;
 
+      // 每次 chunks 更新时，重新扫描所有完整的媒体标记
+      // （因为上一批截断的标记可能在这一批补全了）
+      scanMediaSegments(chunks.value);
+
       // hide blinking cursor
       if (chunks.value.length > 0) {
         isCursorBlinking.value = false;
@@ -98,14 +346,49 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
 
       if (newValue && !oldValue && isFinished.value) {
         // disable typeWriter style or history message first load
+        // 历史消息直接全量渲染，不需要拆分
         streamContent.value = chunks.value;
         prevChunksLength.value = chunks.value.length;
+        processedChunksLength = chunks.value.length;
+        pendingTail = '';
+        // 标记所有媒体都已插入
+        insertedMediaIndex = mediaSegments.length;
+        pureTextLength = chunks.value.length;
       } else {
         // 判断长度是为了防御编辑的内容回退和内容重复的异常 case
         if (chunks.value.length > prevChunksLength.value) {
-          const _newChunksToAdd = chunks.value?.slice(prevChunksLength.value);
           prevChunksLength.value = chunks.value.length;
-          startStreaming([_newChunksToAdd]);
+
+          // 本次要处理的文本 = 上次截留的不完整尾部 + 本次新增内容
+          // 从 processedChunksLength 开始取（而非 prevChunksLength），因为截留部分还没处理
+          const unprocessed = chunks.value.slice(processedChunksLength);
+
+          // 检测末尾是否有未闭合的媒体标记（被截断了，需要等下一批补全）
+          let safeText = unprocessed;
+          pendingTail = '';
+
+          if (!isFinished.value) {
+            // 流还没结束，检查末尾是否有截断的媒体标记
+            const incompletePos = findIncompleteTail(chunks.value);
+            if (incompletePos !== -1 && incompletePos >= processedChunksLength) {
+              // 截留末尾不完整的部分，只处理前面安全的部分
+              const safeEnd = incompletePos - processedChunksLength;
+              safeText = unprocessed.slice(0, safeEnd);
+              pendingTail = unprocessed.slice(safeEnd);
+            }
+          } else {
+            // 流已结束，不再截留，全部处理
+            pendingTail = '';
+          }
+
+          // 从安全文本中去掉已识别的完整媒体标记，只把纯文本送入 TypeWriter
+          if (safeText.length > 0) {
+            const pureText = stripMediaMarks(safeText, processedChunksLength);
+            processedChunksLength += safeText.length;
+            if (pureText.length > 0) {
+              startStreaming([pureText]);
+            }
+          }
         }
       }
     }, {
@@ -115,14 +398,20 @@ watch(() => props.payload, (newValue: string, oldValue: string) => {
 );
 
 onMounted(() => {
-  if (canIUseResizeObserver) {
+  // 如果 streamContent 在 mounted 前已有值（如历史消息），需要在此时渲染
+  if (contentRef.value && streamContent.value) {
+    const html = parseMarkdown(streamContent.value);
+    smartUpdate(contentRef.value, html);
+  }
+
+  if (canIUseResizeObserver && contentRef.value) {
     observer = new ResizeObserver(entries => {
       for (let entry of entries) {
         observeHeightChanged(entry.contentRect.height);
       }
     });
     // 开始观察
-    observer.observe(preRef.value);
+    observer.observe(contentRef.value);
   }
 });
 
@@ -158,6 +447,11 @@ const closeImage = () => {
   user-select: text;
 }
 
+::v-deep .message-marked li {
+  list-style: disc;
+  margin-left: 1.5em;
+}
+
 .blinking-cursor {
   animation: blink 0.8s step-end infinite;
   color: #000;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-desk-elements/styles/common.scss

@@ -73,110 +73,113 @@
   transform: translate(-50%, -50%);
 }
 
-.container {
-  @include flex;
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  background: rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  .box {
+.ai-desk-customer {
+  .container {
     @include flex;
-    border-radius: 0.5rem;
-    background: #fff;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    background: rgba(0, 0, 0, 0.3);
     overflow: hidden;
-    color: #000;
-  }
-  .box-h5 {
-    width: 100%;
-    height: 100%;
-    padding: 0px;
-    border-radius: 0px;
-    justify-content: flex-start;
-    .title {
+    .box {
       @include flex;
-      box-sizing: border-box;
+      border-radius: 0.5rem;
+      background: #fff;
+      overflow: hidden;
+      color: #000;
+    }
+    .box-h5 {
       width: 100%;
-      padding: 15px 18px;
-      position: relative;
-      .title-back {
-        position: absolute;
-        left: 18px;
-      }
-      .title-name {
-        font-size: 18px;
-        font-weight: 500;
+      height: 100%;
+      padding: 0px;
+      border-radius: 0px;
+      justify-content: flex-start;
+      .title {
+        @include flex;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 15px 18px;
+        position: relative;
+        .title-back {
+          position: absolute;
+          left: 18px;
+        }
+        .title-name {
+          font-size: 18px;
+          font-weight: 500;
+        }
       }
     }
   }
-}
 
-.message-marked {
-  overflow: hidden;
-  word-break: break-word;
-  white-space: normal;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-  user-select: text;
-
-  .message-marked_code-container {
+  .message-marked {
+    overflow: hidden;
+    word-break: break-word;
+    white-space: normal;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    border-radius: 9px;
-    margin: 0 0 10px;
-    padding: 1em;
-    overflow: hidden;
-  }
+    margin: 0;
+    padding: 0;
+    user-select: text;
+
+    .message-marked_code-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      border-radius: 9px;
+      margin: 0 0 10px;
+      padding: 1em;
+      overflow: hidden;
+    }
 
-  .message-marked_code-header {
-    display: flex;
-    justify-content: space-between;
-  }
+    .message-marked_code-header {
+      display: flex;
+      justify-content: space-between;
+    }
 
-  .message-marked_code-content {
-    overflow: auto;
-  }
+    .message-marked_code-content {
+      overflow: auto;
+    }
 
-  body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
-    margin: 0 0 1em;
-  }
+    body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
+      margin: 0 0 1em;
+    }
 
-  ul,ol,li {
-    list-style: disc;
-    list-style-type: disc;
-  }
+    ul,ol,li {
+      list-style: disc;
+      list-style-type: disc;
+    }
 
-  ul,ol {
-    padding-left: 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-  }
+    ul,ol {
+      padding-left: 40px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
 
-  li {
-    padding: 0 0 5px;
-    margin: 0;
-  }
+    li {
+      padding: 0 0 5px;
+      margin: 0;
+    }
 
-  img {
-    overflow: hidden;
-    object-fit: contain;
-    max-width: 100%;
+    img {
+      overflow: hidden;
+      object-fit: contain;
+      max-width: 100%;
+    }
+
+    a {
+      color: #0052d9 !important;
+      cursor: pointer;
+    }
   }
 
-  a {
-    color: #0052d9;
-    cursor: pointer;
+  .message-marked >*:last-child {
+    margin-bottom: 0;
   }
 }
 
-.message-marked >*:last-child {
-  margin-bottom: 0;
-}

package/components/CustomerServiceChat/message-list/message-elements/message-large-stream.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="message-stream">
       <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
-      <pre ref="preRef" :class="['message-marked']" v-html="displayedContent" />
+      <div ref="preRef" :class="['message-marked']" v-html="displayedContent" />
     </div>
     <div v-if="image" class="rich-image-previewer" @click="closeImage">
       <img
@@ -157,6 +157,11 @@ const closeImage = () => {
   user-select: text;
 }
 
+::v-deep .message-marked li {
+  list-style: disc;
+  margin-left: 1.5em;
+}
+
 .blinking-cursor {
   animation: blink 0.8s step-end infinite;
   color: #000;

package/components/CustomerServiceChat/style/common.scss

@@ -1,63 +1,66 @@
-body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
-  margin:0;
-  padding:0;
-  font-style:normal;
-
-  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
-}
-
-ol, ul, li {
-  list-style:none;
-}
-
-img {
-  border:0;
-  vertical-align:middle;
-  pointer-events:none;
-}
-
-body {
-  color:#000;
-  background:#FFF;
-}
-
-.clear {
-  clear:both;
-  height:1px;
-  width:100%;
-  overflow:hidden;
-  margin-top:-1px;
-}
-
-a {
-  color:#000;
-  text-decoration:none;
-  cursor: pointer;
-}
-
-a:hover {
-  text-decoration:none;
-}
-
-input, textarea {
-  user-select: auto;
-}
-
-input:focus, input:active, textarea:focus, textarea:active {
-  outline: none;
-}
-
-.chat-aside {
-  position: absolute;
-  top: 50px;
-  right: 0;
-  box-sizing: border-box;
-  width: 360px !important;
-  border-radius: 8px 0 0 8px;
-  z-index: 9999;
-  max-height: calc(100% - 50px);
-}
-
-pre, button, input, select, textarea { 
-  font-family: inherit;
+.ai-desk-customer {
+  :where(ul, ol, li) {
+    margin: 0;
+    padding: 0;
+    font-style: normal;
+    list-style: none;
+  }
+
+  :where(dt, dd, dl, h1, h2, h3, h4, p) {
+    margin: 0;
+    padding: 0;
+    font-style: normal;
+  }
+
+  :where(img) {
+    border:0;
+    vertical-align:middle;
+    pointer-events:none;
+  }
+
+  :where(body) {
+    color:#000;
+    background:#FFF;
+  }
+
+  .clear {
+    clear:both;
+    height:1px;
+    width:100%;
+    overflow:hidden;
+    margin-top:-1px;
+  }
+
+  :where(a) {
+    color:#000;
+    text-decoration:none;
+    cursor: pointer;
+  }
+
+  :where(a:hover) {
+    text-decoration:none;
+  }
+
+  :where(input, textarea) {
+    user-select: auto;
+  }
+
+  :where(input:focus, input:active, textarea:focus, textarea:active) {
+    outline: none;
+  }
+
+  .chat-aside {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    box-sizing: border-box;
+    width: 360px !important;
+    border-radius: 8px 0 0 8px;
+    z-index: 9999;
+    max-height: calc(100% - 50px);
+  }
+
+  :where(pre, button, input, select, textarea) { 
+    font-family: inherit;
+  }
 }

package/components/common/common.scss

@@ -1,50 +1,52 @@
-body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
-  margin:0;
-  padding:0;
-  font-style:normal;
-
-  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
-}
-
-ol, ul, li {
-  list-style:none;
-}
-
-img {
-  border:0;
-  vertical-align:middle;
-  pointer-events:none;
-}
-
-body {
-  color:#000;
-  background:#FFF;
-}
-
-.clear {
-  clear:both;
-  height:1px;
-  width:100%;
-  overflow:hidden;
-  margin-top:-1px;
-}
-
-a {
-  color:#000;
-  text-decoration:none;
-  cursor: pointer;
-}
-
-a:hover {
-  text-decoration:none;
-}
-
-input, textarea {
-  user-select: auto;
-}
-
-input:focus, input:active, textarea:focus, textarea:active {
-  outline: none;
+.ai-desk-customer {
+  :where(body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p) {
+    margin:0;
+    padding:0;
+    font-style:normal;
+
+    /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
+  }
+
+  :where(ol, ul, li) {
+    list-style:none;
+  }
+
+  :where(img) {
+    border:0;
+    vertical-align:middle;
+    pointer-events:none;
+  }
+
+  :where(body) {
+    color:#000;
+    background:#FFF;
+  }
+
+  .clear {
+    clear:both;
+    height:1px;
+    width:100%;
+    overflow:hidden;
+    margin-top:-1px;
+  }
+
+  :where(a) {
+    color:#000;
+    text-decoration:none;
+    cursor: pointer;
+  }
+
+  :where(a:hover) {
+    text-decoration:none;
+  }
+
+  :where(input, textarea) {
+    user-select: auto;
+  }
+
+  :where(input:focus, input:active, textarea:focus, textarea:active) {
+    outline: none;
+  }
 }
 
 .chat-aside {

package/package.json

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

package/utils/utils.ts

@@ -439,13 +439,8 @@ export function getStyledATagFromText(text, className, linkColor, title) {
       return matchedUrl; // 不处理包含中文的URL
     }
 
-    let isURLInText = false;
-    if (matchedUrl !== preprocessedText) {
-      // 如果 text 里包含 url，我们就用 matchedUrl 作为 a 标签的值；否则用 text 作为值
-      isURLInText = true;
-    }
     const encodedUrl = encodeURI(matchedUrl);
-    return `<a target="_blank" rel="noreferrer noopener" class="${className}" style="color:${linkColor}; text-decoration:underline" href="${encodedUrl}" title="${title || ''}">${isURLInText ? matchedUrl : text}</a>`;
+    return `<a target="_blank" rel="noreferrer noopener" class="${className}" style="color:${linkColor}; text-decoration:underline" href="${encodedUrl}" title="${title || ''}">${title ? title : matchedUrl}</a>`;
   });
   return ret;
 }