From 970f7b11e0e77f87f60845ef03317602f779d39e Mon Sep 17 00:00:00 2001
From: haorwen <haorwen@qq.com>
Date: Wed, 31 Dec 2025 08:37:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=81=AF=E7=AE=B1?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#291)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复灯箱问题

- Modified `getDefaultSize` function to accept optional width and height properties.
- Enhanced `ImagePreview` component to allow custom container element and refined click handling for images in chat and markdown contexts.
- Updated `ImageMessage` properties to include optional fields for better flexibility.

* chore: bump version to v0.9.46
---
 package.json                                |  2 +-
 src/components/FileMessage/ImageMessage.tsx |  2 +-
 src/components/ImagePreview.tsx             | 19 ++++++++++++++-----
 src/utils.tsx                               |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index d62e56d2..dcd55c9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.45",
+  "version": "0.9.46",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
diff --git a/src/components/FileMessage/ImageMessage.tsx b/src/components/FileMessage/ImageMessage.tsx
index f2e75026..a59144df 100644
--- a/src/components/FileMessage/ImageMessage.tsx
+++ b/src/components/FileMessage/ImageMessage.tsx
@@ -10,7 +10,7 @@ type Props = {
   thumbnail: string;
   download: string;
   content: string;
-  properties: { width: number; height: number };
+  properties: { width?: number; height?: number; name?: string; content_type?: string; size?: number };
 };
 
 const ImageMessage: FC<Props> = ({
diff --git a/src/components/ImagePreview.tsx b/src/components/ImagePreview.tsx
index b21995f9..c391631f 100644
--- a/src/components/ImagePreview.tsx
+++ b/src/components/ImagePreview.tsx
@@ -4,20 +4,25 @@ import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal";
 
 type Props = {
   context?: "chat" | "markdown";
+  container?: HTMLElement | null;
 };
 
-const ImagePreview = ({ context = "chat" }: Props) => {
+const ImagePreview = ({ context = "chat", container: containerProp }: Props) => {
   const [previewImage, setPreviewImage] = useState<PreviewImageData | null>(null);
   const closePreviewModal = () => {
     setPreviewImage(null);
   };
   useEffect(() => {
-    const container = document.querySelector("#CHAT_WRAPPER") as HTMLDivElement;
+    const container = containerProp || (document.querySelector("#CHAT_WRAPPER") as HTMLDivElement);
     if (!container) return;
     const chatHandler = (evt: MouseEvent) => {
       const target = evt.target as HTMLImageElement;
+      // 检查灯箱是否已经打开，如果是则忽略所有点击
+      if (document.querySelector(".yarl__root")) return;
       const isMsg = !!target.closest(".vc-msg");
-      if (isMsg && target && target.nodeName == "IMG" && target.classList.contains("preview")) {
+      // 排除 markdown 容器内的图片，避免重复处理
+      const isInMarkdown = !!target.closest("#MARKDOWN_CONTAINER");
+      if (isMsg && target && target.nodeName == "IMG" && target.classList.contains("preview") && !isInMarkdown) {
         // console.log("click chat", target);
         evt.stopPropagation();
         const thumbnail = target.src;
@@ -29,9 +34,13 @@ const ImagePreview = ({ context = "chat" }: Props) => {
     };
     const markdownHandler = (evt: MouseEvent) => {
       const target = evt.target as HTMLImageElement;
+      // 检查灯箱是否已经打开，如果是则忽略所有点击
+      if (document.querySelector(".yarl__root")) return;
       const isMsg = !!target.closest(".vc-msg");
+      // 只处理 markdown 容器内的图片
+      const isInMarkdown = !!target.closest("#MARKDOWN_CONTAINER");
       // 图片 并且没被 a 标签包裹
-      if (isMsg && target && target.nodeName == "IMG" && target.parentElement?.tagName !== "A") {
+      if (isMsg && target && target.nodeName == "IMG" && target.parentElement?.tagName !== "A" && isInMarkdown) {
         // console.log("click markdown", target);
         evt.stopPropagation();
         const urlObj = new URL(target.src);
@@ -55,7 +64,7 @@ const ImagePreview = ({ context = "chat" }: Props) => {
     return () => {
       container.removeEventListener("click", handler, true);
     };
-  }, [context]);
+  }, [context, containerProp]);
   return previewImage ? (
     <ImagePreviewModal download={true} data={previewImage} closeModal={closePreviewModal} />
   ) : null;
diff --git a/src/utils.tsx b/src/utils.tsx
index 5075af2a..c028cb39 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -101,7 +101,7 @@ export const isElementVisible = (el: Element | null) => {
   );
 };
 export function getDefaultSize(
-  size?: { width: number; height: number },
+  size?: { width?: number; height?: number },
   limit?: { min: number; max: number }
 ) {
   if (!size) return { width: 0, height: 0 };