@tencentcloud/ai-desk-customer-vue 1.7.3 → 1.7.4

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.7.4 @2026.5.26
+
+### Features
+- 支持 H5 端图片的缩放预览
+- 支持图片文件、视频文件在消息列表中直接预览
+
 ## 1.7.3 @2026.4.27
 
 ### Features

package/components/CustomerServiceChat/index-web.vue

@@ -27,6 +27,7 @@
         @closeBottomQuickOrder="closeBottomQuickOrder"
         :enableFeedback="props.enableFeedback"
         :enableAINote="props.enableAINote"
+        :enableFileMediaPreview="props.enableFileMediaPreview"
         @like="onLike"
         @dislike="onDislike"
       />
@@ -153,6 +154,7 @@ interface IProps {
   enableFeedback?: number;
   enableAINote?: number;
   enableURLDetection?: number;
+  enableFileMediaPreview?: number;
   headerConfig?: IHeaderConfig;
   enableSendingAudio?: number;
   showQueuePage?: number;
@@ -205,6 +207,7 @@ const props = withDefaults(defineProps<IProps>(), {
   enableAINote: 1,
   langList: () => [],
   enableURLDetection: 0,
+  enableFileMediaPreview: 0,
   enableSendingAudio: 0,
   showQueuePage: 0,
   showAllRobotWelcomeItems: 0,

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

@@ -53,6 +53,7 @@
               :enableAINote="props.enableAINote"
               @like="onLike"
               @dislike="onDislike"
+              @previewImage="handleImagePreviewByUrl"
             />
             <div
               v-else
@@ -72,6 +73,7 @@
                 :messageItem="JSON.parse(JSON.stringify(item))"
                 :enableFeedback="props.enableFeedback"
                 :enableAINote="props.enableAINote"
+                :fileMediaType="getFileMediaType(item)"
                 @blinkMessage="blinkMessage"
                 @resendMessage="resendMessage(item)"
                 @like="onLike"
@@ -85,23 +87,27 @@
                     :flow="item.flow"
                   />
                   <ProgressMessage
-                    v-else-if="item.type === TYPES.MSG_IMAGE"
-                    :content="item.getMessageContent()"
+                    v-else-if="item.type === TYPES.MSG_IMAGE
+                      || (item.type === TYPES.MSG_FILE && getFileMediaType(item) === 'image')"
+                    :content="getDisplayImageContent(item)"
                     :messageItem="item"
                   >
                     <MessageImage
-                      :content="item.getMessageContent()"
+                      :content="getDisplayImageContent(item)"
                       :messageItem="item"
-                      @previewImage="handleImagePreview"
+                      @previewImage="item.type === TYPES.MSG_IMAGE
+                        ? handleImagePreview(item)
+                        : handleImagePreviewByUrl(item.getMessageContent()?.url)"
                     />
                   </ProgressMessage>
                   <ProgressMessage
-                    v-else-if="item.type === TYPES.MSG_VIDEO"
-                    :content="item.getMessageContent()"
+                    v-else-if="item.type === TYPES.MSG_VIDEO
+                      || (item.type === TYPES.MSG_FILE && getFileMediaType(item) === 'video')"
+                    :content="getDisplayVideoContent(item)"
                     :messageItem="item"
                   >
                     <MessageVideo
-                      :content="item.getMessageContent()"
+                      :content="getDisplayVideoContent(item)"
                       :messageItem="item"
                     />
                   </ProgressMessage>
@@ -143,6 +149,7 @@
                     v-else-if="item.type === TYPES.MSG_STREAM"
                     :content="shallowCopyMessage(item.payload)"
                     @heightChanged="onHeightChanged"
+                    @previewImage="handleImagePreviewByUrl"
                   />
                 </template>
               </MessageBubble>
@@ -185,6 +192,7 @@
         v-if="showImagePreview"
         :currentImage="currentImagePreview"
         :imageList="imageMessageList"
+        :imageUrl="markdownImagePreviewUrl || undefined"
         @close="onImagePreviewerClose"
       />
       <BottomQuickOrder
@@ -243,12 +251,14 @@ import {
   isNonEmptyObject,
   updateCustomStore,
   throttle,
-  shallowCopyMessage
+  shallowCopyMessage,
+  getMediaTypeByUrl
 } from '../../../utils/utils';
 import { isMessageInvisible, isThinkingMessage, isThinkingMessageOverTime, JSONToObject, isTransferMessageWithoutDesc } from '../../../utils/index';
 import { isCustomerConversation } from '../../../index';
 import { CUSTOM_MESSAGE_SRC } from '../../../constant';
 import { QuickOrderModel } from '../../../interface';
+import type { IImageMessageContent, IVideoMessageContent } from '../../../interface';
 import Log from '../../../utils/logger';
 
 interface ScrollConfig {
@@ -265,11 +275,13 @@ interface IProps {
   showBottomQuickOrder: boolean;
   enableFeedback: number;
   enableAINote: number;
+  enableFileMediaPreview?: number;
 }
 const props = withDefaults(defineProps<IProps>(), {
   showBottomQuickOrder: false,
   enableFeedback: 0,
   enableAINote: 1,
+  enableFileMediaPreview: 0,
 });
 
 interface IEmits {
@@ -310,6 +322,7 @@ const enableAutoScroll = ref(true);
 // image preview
 const showImagePreview = ref(false);
 const currentImagePreview = ref<IMessageModel>();
+const markdownImagePreviewUrl = ref<string>('');
 const imageMessageList = computed(() =>
   messageList?.value?.filter((item: IMessageModel) => {
     return (
@@ -598,9 +611,55 @@ const handleImagePreview = (message: IMessageModel) => {
   currentImagePreview.value = message;
 };
 
+const getFileMediaType = (message: IMessageModel): '' | 'image' | 'video' => {
+  if (!props.enableFileMediaPreview) return '';
+  if (message.type !== TYPES.value.MSG_FILE) return '';
+  const content = message.getMessageContent?.() || {};
+  const mediaType = getMediaTypeByUrl(content.url, content.name);
+  return mediaType === 'image' || mediaType === 'video' ? mediaType : '';
+};
+
+const getDisplayImageContent = (message: IMessageModel): IImageMessageContent => {
+  if (message.type === TYPES.value.MSG_FILE) {
+    return mapFileToImageContent(message.getMessageContent());
+  }
+  return message.getMessageContent();
+};
+
+const getDisplayVideoContent = (message: IMessageModel): IVideoMessageContent => {
+  if (message.type === TYPES.value.MSG_FILE) {
+    return mapFileToVideoContent(message.getMessageContent());
+  }
+  return message.getMessageContent();
+};
+
+const mapFileToImageContent = (content: any): IImageMessageContent => ({
+  url: content.url,
+  showName: content.name,
+  width: 0,
+  height: 0,
+});
+
+const mapFileToVideoContent = (content: any): IVideoMessageContent => ({
+  url: content.url,
+  showName: content.name,
+  snapshotUrl: '',
+  snapshotWidth: 0,
+  snapshotHeight: 0,
+});
+
+const handleImagePreviewByUrl = (url: string) => {
+  if (showImagePreview.value || isLongpressing.value || !url) {
+    return;
+  }
+  markdownImagePreviewUrl.value = url;
+  showImagePreview.value = true;
+};
+
 const onImagePreviewerClose = () => {
   showImagePreview.value = false;
   currentImagePreview.value = null;
+  markdownImagePreviewUrl.value = '';
 };
 
 // toggle message

package/components/CustomerServiceChat/message-list/message-elements/message-bubble-web.vue

@@ -55,11 +55,7 @@
               />
                 <div class="content-main">
                   <img
-                    v-if="
-                      (message.type === TYPES.MSG_IMAGE ||
-                        message.type === TYPES.MSG_VIDEO) &&
-                        message.hasRiskContent
-                    "
+                    v-if="isDisplayAsImageOrVideo && message.hasRiskContent"
                     :class="[
                       'message-risk-replace',
                       !isPC && 'message-risk-replace-h5',
@@ -168,6 +164,7 @@ interface IProps {
   isAudioPlayed?: boolean | undefined;
   enableFeedback: number;
   enableAINote: number;
+  fileMediaType?: '' | 'image' | 'video';
 }
 
 interface IEmits {
@@ -189,6 +186,7 @@ const props = withDefaults(defineProps<IProps>(), {
   classNameList: () => [],
   enableFeedback: 0,
   enableAINote: 1,
+  fileMediaType: '',
 });
 
 const TYPES = TUIChatEngine.TYPES;
@@ -317,11 +315,22 @@ const isProductCardOrOrderMessage = computed(() => {
   return false;
 });
 
+const isDisplayAsImageOrVideo = computed(() => {
+  if (props.fileMediaType === 'image' || props.fileMediaType === 'video') {
+    return true;
+  }
+  return (
+    message.value.type === TYPES.MSG_IMAGE
+    || message.value.type === TYPES.MSG_VIDEO
+  );
+});
+
 const isNoPadding = computed(() => {
   return (
     !hasEmojiReaction.value
-    && [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(
-      message.value.type,
+    && (
+      isDisplayAsImageOrVideo.value
+      || message.value.type === TYPES.MSG_MERGER
     )
   );
 });

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

@@ -38,12 +38,14 @@
         <MessageRichText
           :payload="payload"
           @heightChanged="onHeightChanged"
+          @previewImage="onPreviewImage"
         />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.STREAM_TEXT">
         <MessageStream
           :payload="payload"
           @heightChanged="onHeightChanged"
+          @previewImage="onPreviewImage"
         />
       </div>
       <div v-if="payload.src === CUSTOM_MESSAGE_SRC.MULTI_BRANCH">
@@ -132,7 +134,7 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['showFormPopup', 'heightChanged', 'messageSent'],
+  emits: ['showFormPopup', 'heightChanged', 'messageSent', 'previewImage'],
   setup(props: Props, { emit }) {
     const payload = computed<customerServicePayloadType>(() => {
       return props.message && JSONToObject(props.message?.payload?.data);
@@ -163,6 +165,9 @@ export default {
     const onHeightChanged = () => {
       emit('heightChanged');
     };
+    const onPreviewImage = (url: string) => {
+      emit('previewImage', url);
+    };
 
     return {
       payload,
@@ -172,6 +177,7 @@ export default {
       sendCustomMessage,
       handleShowFormPopup,
       onHeightChanged,
+      onPreviewImage,
     };
   },
 };

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

@@ -5,15 +5,6 @@
         class="message-marked"
         v-html="parsedContent"
       />
-      <div v-if="image" class="rich-image-previewer" @click="closeImage">
-        <img
-        class="rich-image-preview"
-        :style="{
-          transform: `scale(1) rotate(0deg)`,
-        }"
-        :src="imageSrc"
-        />
-      </div>
     </div>
   </div>
 </template>
@@ -22,7 +13,7 @@
 import vue  from '../../../../../../adapter-vue';
 import { parseMarkdown } from "./marked";
 import { customerServicePayloadType } from '../../../../../../interface';
-const { computed,ref } = vue;
+const { computed } = vue;
 interface Props {
   payload: customerServicePayloadType;
 }
@@ -34,15 +25,12 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['heightChanged', 'previewImage'],
   setup(props: Props, { emit }) {
-    const image = ref(false);
-    const imageSrc = ref('');
-    const imageList = [];
     const parsedContent = computed(() => {
       // @ts-ignore
       window.onMarkdownImageClicked = function(href: string) {
-        image.value = !image.value;
-        imageSrc.value = decodeURIComponent(href);
+        emit('previewImage', decodeURIComponent(href));
       }
       // @ts-ignore
       window.onMarkdownMediaLoad = function() {
@@ -51,47 +39,14 @@ export default {
       return parseMarkdown(props.payload.content);
     });
 
-    const closeImage = () => {
-      image.value = !image.value;
-      imageSrc.value = '';
-    }
-
     return {
       props,
       parsedContent,
-      image,
-      imageSrc,
-      closeImage,
-      imageList,
     };
   },
 };
 </script>
 <style lang="scss">
-.rich-image-previewer {
-  position: fixed;
-  z-index: 101;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(#000, 0.8);
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-}
-
-.rich-image-preview {
-  max-width: 90%;
-  height: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  pointer-events: auto;
-}
 .message-video {
   position: relative;
   display: flex;
@@ -145,4 +100,8 @@ export default {
     }
   }
 }
+
+.message-marked .image-container {
+  -webkit-tap-highlight-color: transparent;
+}
 </style>

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

@@ -4,12 +4,6 @@
       <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
       <div ref="contentRef" :class="['message-marked']"></div>
     </div>
-    <div v-if="image" class="rich-image-previewer" @click="closeImage">
-      <img
-          class="rich-image-preview"
-          :src="imageSrc"
-      />
-    </div>
   </div>
 </template>
 
@@ -32,8 +26,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const isCursorBlinking = ref<boolean>(true);
 const isStreaming = ref<boolean>(false);
-const image = ref(false);
-const imageSrc = ref('');
 const chunks = ref<string>('');
 const isFinished = ref<boolean>(true);
 const prevChunksLength = ref<number>(0);
@@ -43,8 +35,7 @@ const contentRef = ref<HTMLElement>(); // DOM 容器引用
 // 设置全局回调函数（只需设置一次）
 // @ts-ignore
 window.onMarkdownImageClicked = function(href: string) {
-  image.value = !image.value;
-  imageSrc.value = decodeURIComponent(href);
+  emits('previewImage', decodeURIComponent(href));
 }
 // @ts-ignore
 window.onMarkdownMediaLoad = function() {
@@ -288,7 +279,7 @@ watch(streamContent, () => {
   doRender();
 });
 
-const emits = defineEmits(['heightChanged']);
+const emits = defineEmits(['heightChanged', 'previewImage']);
 // 不支持 ResizeObserver 的浏览器太老旧，默认不处理了
 const canIUseResizeObserver = typeof ResizeObserver === 'undefined' ? false : true;
 
@@ -431,11 +422,6 @@ const observeHeightChanged = (newHeight) => {
   }
 };
 
-const closeImage = () => {
-  image.value = !image.value;
-  imageSrc.value = '';
-};
-
 </script>
 <style lang="scss" scoped>
 @import "../../../../style/common.scss";
@@ -452,6 +438,10 @@ const closeImage = () => {
   margin-left: 1.5em;
 }
 
+::v-deep .message-marked .image-container {
+  -webkit-tap-highlight-color: transparent;
+}
+
 .blinking-cursor {
   animation: blink 0.8s step-end infinite;
   color: #000;

package/components/CustomerServiceChat/message-list/message-elements/message-desk/message-plugin-web.vue

@@ -20,6 +20,7 @@
         :message="props.message"
         @heightChanged="onHeightChanged"
         @messageSent="onMessageSent"
+        @previewImage="onPreviewImage"
       />
     </template>
     <template #messageTip>
@@ -65,6 +66,7 @@ const emits = defineEmits([
   'messageSent',
   'like',
   'dislike',
+  'previewImage',
 ]);
 const messageModel = computed(() => TUIStore.getMessageModel(props.message.ID));
 
@@ -111,6 +113,10 @@ const onMessageSent = () => {
   emits('messageSent');
 };
 
+const onPreviewImage = (url: string) => {
+  emits('previewImage', url);
+};
+
 function onLike(type: number, messageInfo: Object) {
   emits('like', type, messageInfo);
 };

package/components/CustomerServiceChat/message-list/message-elements/message-image-web.vue

@@ -81,6 +81,7 @@ function toggleShow() {
 .image-container {
   overflow: hidden;
   background-color: #f4f4f4;
+  -webkit-tap-highlight-color: transparent;
 
   .message-image {
     max-width: min(calc(100vw - 180px), 300px);

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

@@ -4,12 +4,6 @@
       <span v-if="isCursorBlinking" class="blinking-cursor">|</span>
       <div ref="preRef" :class="['message-marked']" v-html="displayedContent" />
     </div>
-    <div v-if="image" class="rich-image-previewer" @click="closeImage">
-      <img
-          class="rich-image-preview"
-          :src="imageSrc"
-      />
-    </div>
   </div>
 </template>
 
@@ -32,8 +26,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const isCursorBlinking = ref<boolean>(true);
 const isStreaming = ref<boolean>(false);
-const image = ref(false);
-const imageSrc = ref('');
 const markdown = ref<string>('');
 const isStreamEnded = ref<boolean>(true);
 const prevmarkdownLength = ref<number>(0);
@@ -41,8 +33,7 @@ const streamContent = ref<string>('');
 const displayedContent = computed(() => {
   // @ts-ignore
   window.onMarkdownImageClicked = function(href:string) {
-    image.value = !image.value;
-    imageSrc.value = decodeURIComponent(href);
+    emits('previewImage', decodeURIComponent(href));
   }
   // @ts-ignore
   window.onMarkdownMediaLoad = function() {
@@ -53,7 +44,7 @@ const displayedContent = computed(() => {
   return result;
 });
 const preRef = ref();
-const emits = defineEmits(['heightChanged']);
+const emits = defineEmits(['heightChanged', 'previewImage']);
 // 不支持 ResizeObserver 的浏览器太老旧，默认不处理了
 const canIUseResizeObserver = typeof ResizeObserver === 'undefined' ? false : true;
 
@@ -141,11 +132,6 @@ const observeHeightChanged = (newHeight) => {
   }
 };
 
-const closeImage = () => {
-  image.value = !image.value;
-  imageSrc.value = '';
-};
-
 </script>
 <style lang="scss" scoped>
 @import "../../style/common.scss";

package/components/CustomerServiceChat/message-list/message-elements/message-video-web.vue

@@ -45,10 +45,14 @@
       class="dialog-video"
     >
       <div
-        class="dialog-video-close"
+        class="icon icon-close"
         @click.stop="toggleVideoPreviewer"
       >
-        <Icon :file="closeSVG" />
+        <Icon
+          :file="closeSVG"
+          width="14px"
+          height="14px"
+        />
       </div>
       <div
         class="dialog-video-box"
@@ -277,13 +281,21 @@ async function handlePosterUrl(
   flex-direction: column;
   align-items: center;
 
-  &-close {
+  .icon-close {
+    position: absolute;
+    cursor: pointer;
+    border-radius: 50%;
+    top: 3%;
+    right: 3%;
+    padding: 8px;
+    background: #fff;
     display: flex;
-    justify-content: flex-end;
-    background: #000;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px;
+    z-index: 1;
+
+    &:before,
+    &:after {
+      background-color: #444;
+    }
   }
 
   &-box {

package/components/common/ImagePreviewer/image-item-web.vue

@@ -2,7 +2,7 @@
   <img
     class="image-preview"
     :style="{
-      transform: `scale(${props.zoom}) rotate(${props.rotate}deg)`,
+      transform: `translate3d(${props.translateX}px, ${props.translateY}px, 0) scale(${props.zoom}) rotate(${props.rotate}deg)`,
     }"
     :src="props.src"
   >
@@ -21,6 +21,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  translateX: {
+    type: Number,
+    default: 0,
+  },
+  translateY: {
+    type: Number,
+    default: 0,
+  },
 });
 </script>
 <style lang="scss">

package/components/common/ImagePreviewer/index-web.vue

@@ -13,6 +13,7 @@
       @wheel.stop="handleWheel"
     >
       <ul
+        v-if="!props.imageUrl"
         ref="ulRef"
         class="image-list"
         :style="{
@@ -31,40 +32,59 @@
           <ImageItem
             :zoom="zoom"
             :rotate="rotate"
+            :translateX="translateX"
+            :translateY="translateY"
             :src="getImageUrl(item)"
             :messageItem="item"
           />
         </li>
       </ul>
+      <ul
+        v-else
+        ref="ulRef"
+        class="image-list"
+        :style="{ width: '100%' }"
+      >
+        <li class="image-item">
+          <ImageItem
+            :zoom="zoom"
+            :rotate="rotate"
+            :translateX="translateX"
+            :translateY="translateY"
+            :src="props.imageUrl"
+          />
+        </li>
+      </ul>
     </div>
     <div
-      v-show="isPC"
       class="icon icon-close"
       @click="close"
     >
       <Icon
         :file="iconClose"
-        width="16px"
-        height="16px"
+        width="14px"
+        height="14px"
       />
     </div>
     <div
-      v-if="isPC && currentImageIndex > 0"
+      v-if="isPC && !props.imageUrl && currentImageIndex > 0"
       class="image-button image-button-left"
       @click="goPrev"
     >
       <Icon :file="iconArrowLeft" />
     </div>
     <div
-      v-if="isPC && currentImageIndex < imageList.length - 1"
+      v-if="isPC && !props.imageUrl && currentImageIndex < imageList.length - 1"
       class="image-button image-button-right"
       @click="goNext"
     >
       <Icon :file="iconArrowLeft" />
     </div>
-    <div :class="['actions-bar', isMobile && 'actions-bar-h5']">
+    <div
+      v-if="isPC"
+      :class="['actions-bar', isMobile && 'actions-bar-h5']"
+    >
       <div
-        v-if="isPC"
         class="icon-zoom-in"
         @click="zoomIn"
       >
@@ -75,7 +95,6 @@
         />
       </div>
       <div
-        v-if="isPC"
         class="icon-zoom-out"
         @click="zoomOut"
       >
@@ -86,7 +105,6 @@
         />
       </div>
       <div
-        v-if="isPC"
         class="icon-refresh-left"
         @click="rotateLeft"
       >
@@ -97,7 +115,6 @@
         />
       </div>
       <div
-        v-if="isPC"
         class="icon-refresh-right"
         @click="rotateRight"
       >
@@ -107,7 +124,7 @@
           height="27px"
         />
       </div>
-      <span class="image-counter">
+      <span v-if="!props.imageUrl" class="image-counter">
         {{ currentImageIndex + 1 }} / {{ imageList.length }}
       </span>
     </div>
@@ -154,10 +171,12 @@ const props = withDefaults(
   defineProps<{
     imageList: IMessageModel[];
     currentImage: IMessageModel;
+    imageUrl?: string;
   }>(),
   {
     imageList: () => [] as IMessageModel[],
     messageItem: () => ({} as IMessageModel),
+    imageUrl: '',
   },
 );
 
@@ -175,14 +194,33 @@ const minZoom = ref(0.1);
 const currentImageIndex = ref(0);
 const image = ref();
 const ulRef = ref();
+const translateX = ref(0);
+const translateY = ref(0);
 // touch
 let startX = 0;
+let startY = 0;
+let baseTranslateX = 0;
+let baseTranslateY = 0;
 const touchStore = {} as touchesPosition;
 let moveFlag = false;
 let twoTouchesFlag = false;
 let timer: number | null = null;
+// double tap to zoom
+let lastTapTime = 0;
+let lastTapX = 0;
+let lastTapY = 0;
+let singleTapTimer: number | null = null;
+let dblTapStep = 0;
+const DOUBLE_TAP_DELAY = 300;
+const DOUBLE_TAP_DIST = 30;
+const TAP_MOVE_THRESHOLD = 10;
+const DBL_TAP_ZOOM_LEVELS = [2, 3.5];
 
 watchEffect(() => {
+  if (props.imageUrl) {
+    currentImageIndex.value = 0;
+    return;
+  }
   currentImageIndex.value = props.imageList.findIndex((message: any) => {
     return message.ID === props?.currentImage?.ID;
   });
@@ -204,6 +242,8 @@ const handleTouchMove = (e: any) => {
   if (e.touches && e.touches.length === 2) {
     twoTouchesFlag = true;
     handleTwoTouches(e);
+  } else if (e.touches && e.touches.length === 1 && zoom.value > 1) {
+    handleOneTouchPan(e);
   }
 };
 
@@ -225,26 +265,46 @@ const handleTouchEnd = (e: any) => {
   }
   // H5 touch move to left to go to prev image
   // H5 touch move to right to go to next image
-  if (timer === null) {
-    switch (moveFlag) {
-      // touch event
-      case true:
-        moveEndX = e?.changedTouches[0]?.pageX;
-        X = moveEndX - startX;
+  const endX = e?.changedTouches[0]?.pageX ?? 0;
+  const endY = e?.changedTouches[0]?.pageY ?? 0;
+  const isTap = Math.hypot(endX - startX, endY - startY) < TAP_MOVE_THRESHOLD;
+  if (moveFlag && !isTap) {
+    if (timer === null) {
+      moveEndX = endX;
+      X = moveEndX - startX;
+      if (zoom.value <= 1 && !props.imageUrl) {
         if (X > 100) {
           goPrev();
         } else if (X < -100) {
           goNext();
         }
-        break;
-      // click event
-      case false:
+      }
+      timer = setTimeout(() => {
+        timer = null;
+      }, 200);
+    }
+  } else {
+    const now = Date.now();
+    const dist = Math.hypot(endX - lastTapX, endY - lastTapY);
+    if (now - lastTapTime < DOUBLE_TAP_DELAY && dist < DOUBLE_TAP_DIST) {
+      if (singleTapTimer !== null) {
+        clearTimeout(singleTapTimer);
+        singleTapTimer = null;
+      }
+      lastTapTime = 0;
+      dblTapZoom(endX, endY);
+    } else {
+      lastTapTime = now;
+      lastTapX = endX;
+      lastTapY = endY;
+      if (singleTapTimer !== null) {
+        clearTimeout(singleTapTimer);
+      }
+      singleTapTimer = setTimeout(() => {
+        singleTapTimer = null;
         close();
-        break;
+      }, DOUBLE_TAP_DELAY);
     }
-    timer = setTimeout(() => {
-      timer = null;
-    }, 200);
   }
 };
 
@@ -265,9 +325,19 @@ const handleWheel = (e: any) => {
 
 const moveInit = (e: any) => {
   startX = e?.changedTouches[0]?.pageX;
+  startY = e?.changedTouches[0]?.pageY;
+  baseTranslateX = translateX.value;
+  baseTranslateY = translateY.value;
   moveFlag = false;
 };
 
+const handleOneTouchPan = (e: any) => {
+  const touch = e?.touches[0];
+  if (!touch) return;
+  translateX.value = baseTranslateX + (touch.pageX - startX);
+  translateY.value = baseTranslateY + (touch.pageY - startY);
+};
+
 const twoTouchesInit = (e: any) => {
   const touch1 = e?.touches[0];
   const touch2 = e?.touches[1];
@@ -314,7 +384,24 @@ const handleTwoTouches = (e: any) => {
       touchStore.pageX2 as number,
       touchStore.pageY2 as number,
     );
-  zoom.value = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
+  const newZoom = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
+  // anchor zoom at the midpoint of two fingers
+  const wrapperRect = image.value?.getBoundingClientRect?.();
+  if (wrapperRect) {
+    const centerX = wrapperRect.left + wrapperRect.width / 2;
+    const centerY = wrapperRect.top + wrapperRect.height / 2;
+    const midX = (touch1.pageX + touch2.pageX) / 2;
+    const midY = (touch1.pageY + touch2.pageY) / 2;
+    const ratio = newZoom / zoom.value;
+    translateX.value = midX - centerX - (midX - centerX - translateX.value) * ratio;
+    translateY.value = midY - centerY - (midY - centerY - translateY.value) * ratio;
+  }
+  zoom.value = newZoom;
+  // refresh anchor for the next move frame
+  touchStore.pageX1 = touch1.pageX;
+  touchStore.pageY1 = touch1.pageY;
+  touchStore.pageX2 = touch2.pageX;
+  touchStore.pageY2 = touch2.pageY;
 };
 
 onMounted(() => {
@@ -357,9 +444,39 @@ const goPrev = () => {
 const initStyle = () => {
   zoom.value = 1;
   rotate.value = 0;
+  translateX.value = 0;
+  translateY.value = 0;
+  dblTapStep = 0;
+  lastTapTime = 0;
+};
+
+// 1st double tap: zoom to 1.5x; 2nd: 2.5x; 3rd: reset to 1x
+const dblTapZoom = (x: number, y: number) => {
+  const wrapperRect = image.value?.getBoundingClientRect?.();
+  if (!wrapperRect) return;
+  if (dblTapStep >= DBL_TAP_ZOOM_LEVELS.length) {
+    // reset to original size
+    zoom.value = 1;
+    translateX.value = 0;
+    translateY.value = 0;
+    dblTapStep = 0;
+    return;
+  }
+  const targetZoom = DBL_TAP_ZOOM_LEVELS[dblTapStep];
+  // anchor zoom at the double tap point (same formula as handleTwoTouches)
+  const centerX = wrapperRect.left + wrapperRect.width / 2;
+  const centerY = wrapperRect.top + wrapperRect.height / 2;
+  const ratio = targetZoom / zoom.value;
+  translateX.value = x - centerX - (x - centerX - translateX.value) * ratio;
+  translateY.value = y - centerY - (y - centerY - translateY.value) * ratio;
+  zoom.value = targetZoom;
+  dblTapStep += 1;
 };
 
 const getImageUrl = (message: IMessageModel) => {
+  if (props.imageUrl) {
+    return props.imageUrl;
+  }
   if (isPC) {
     return message?.payload?.imageInfoArray[0]?.url;
   } else {
@@ -368,6 +485,11 @@ const getImageUrl = (message: IMessageModel) => {
 };
 
 const save = () => {
+  // bare url preview mode: download the url directly
+  if (props.imageUrl) {
+    downloadImgInWeb(props.imageUrl);
+    return;
+  }
   const imageMessage = props.imageList[
     currentImageIndex.value
   ] as IMessageModel;
@@ -383,6 +505,14 @@ const save = () => {
   
 };
 
+const getExtFromUrl = (src: string) => {
+  const pathname = src.split('?')[0].split('#')[0];
+  const dotIndex = pathname.lastIndexOf('.');
+  if (dotIndex < 0) return 'jpg';
+  const ext = pathname.slice(dotIndex + 1).toLowerCase();
+  return ext && ext.length <= 5 ? ext : 'jpg';
+};
+
 const downloadImgInWeb = (src: string) => {
   const option: any = {
     mode: 'cors',
@@ -390,16 +520,23 @@ const downloadImgInWeb = (src: string) => {
       'Content-Type': 'application/x-www-form-urlencoded',
     }),
   };
-  const imageMessage = props.imageList[
-    currentImageIndex.value
-  ] as IMessageModel;
-  const imageFormat: number = imageMessage?.payload?.imageFormat;
-  if (!imageFormatMap.has(imageFormat)) {
-    Toast({
-      message: TUITranslateService.t('Component.暂不支持下载此类型图片'),
-      type: TOAST_TYPE.ERROR,
-    });
-    return;
+  let extension: string;
+  if (props.imageUrl) {
+    // bare url preview mode: derive extension from url
+    extension = getExtFromUrl(src);
+  } else {
+    const imageMessage = props.imageList[
+      currentImageIndex.value
+    ] as IMessageModel;
+    const imageFormat: number = imageMessage?.payload?.imageFormat;
+    if (!imageFormatMap.has(imageFormat)) {
+      Toast({
+        message: TUITranslateService.t('Component.暂不支持下载此类型图片'),
+        type: TOAST_TYPE.ERROR,
+      });
+      return;
+    }
+    extension = imageFormatMap.get(imageFormat) as string;
   }
   // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
   if ((window as any).fetch) {
@@ -409,14 +546,14 @@ const downloadImgInWeb = (src: string) => {
         const a = document.createElement('a');
         const url = window.URL.createObjectURL(blob);
         a.href = url;
-        a.download = url + '.' + imageFormatMap.get(imageFormat);
+        a.download = url + '.' + extension;
         a.click();
       });
   } else {
     const a = document.createElement('a');
     a.href = src;
     a.target = '_blank';
-    a.download = src + '.' + imageFormatMap.get(imageFormat);
+    a.download = src + '.' + extension;
     a.click();
   }
 };
@@ -438,7 +575,7 @@ onUnmounted(() => {
   bottom: 5%;
   padding: 12px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.8);
+  background: #fff;
 
   &-h5 {
     padding: 6px;
@@ -465,7 +602,7 @@ onUnmounted(() => {
 
 .image-previewer {
   position: fixed;
-  z-index: 101;
+  z-index: 9999;
   width: 100vw;
   height: 100vh;
   background: rgba(#000, 0.3);
@@ -558,8 +695,8 @@ onUnmounted(() => {
     border-radius: 50%;
     top: 3%;
     right: 3%;
-    padding: 10px;
-    background: rgba(255, 255, 255, 0.8);
+    padding: 8px;
+    background: #fff;
     display: flex;
 
     &::before,
@@ -585,7 +722,7 @@ onUnmounted(() => {
   position: absolute;
   bottom: 5%;
   right: 5%;
-  padding: 12px;
+  padding: 8px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.8);
 }

package/package.json

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

package/utils/utils.ts

@@ -59,6 +59,30 @@ export const handleSkeletonSize = (
   return { width: maxWidth, height: height * (maxWidth / width) };
 };
 
+const IMAGE_EXTENSIONS = ['gif', 'jpeg', 'jpg', 'png', 'bmp', 'webp'];
+const VIDEO_EXTENSIONS = ['mov', 'mp4'];
+
+export function getMediaTypeByUrl(url?: string, name?: string): 'image' | 'video' | 'file' {
+  const source = name || url || '';
+  if (!source) {
+    return 'file';
+  }
+
+  const pathname = source.split(/[?#]/)[0];
+  const dotIndex = pathname.lastIndexOf('.');
+  if (dotIndex < 0) {
+    return 'file';
+  }
+  const ext = pathname.slice(dotIndex + 1).toLowerCase();
+  if (IMAGE_EXTENSIONS.includes(ext)) {
+    return 'image';
+  }
+  if (VIDEO_EXTENSIONS.includes(ext)) {
+    return 'video';
+  }
+  return 'file';
+}
+
 // Image loading complete
 export function getImgLoad(container: any, className: string, callback: any) {
   const images = container?.querySelectorAll(`.${className}`) || [];