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 = ({ 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(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 ? ( ) : 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 };