From 4464e6fdc593900bf27e5d6c0a14b1700bd1ca29 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 13:08:16 +0800
Subject: [PATCH] fix: fall back to file icon when document thumbnail fails to
 load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render the 52x52 preview with an empty alt and an onError handler, so a
broken thumbnail no longer shows the browser's broken-image box (which
leaked the raw filename) — it falls back to the file-type icon instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/messageStream/bubbles/FileDocBubble.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/messageStream/bubbles/FileDocBubble.tsx b/src/components/messageStream/bubbles/FileDocBubble.tsx
index fa8e492..864e07f 100644
--- a/src/components/messageStream/bubbles/FileDocBubble.tsx
+++ b/src/components/messageStream/bubbles/FileDocBubble.tsx
@@ -19,6 +19,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
   const displayFilename = filenameWithExtension(att.filename, att.mime);
   const [isDownloading, setIsDownloading] = useState(false);
+  const [previewFailed, setPreviewFailed] = useState(false);
 
   const handleDownload = async () => {
     if (isDownloading) return;
@@ -39,11 +40,12 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
 
   return (
     <div className="group flex h-[52px] items-center gap-3">
-      {previewUrl ? (
+      {previewUrl && !previewFailed ? (
         <img
           src={previewUrl}
-          alt={displayFilename}
+          alt=""
           loading="lazy"
+          onError={() => setPreviewFailed(true)}
           className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
         />
       ) : (