From 10c0d7d47408be372310cdc94010f76fc2074909 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 17 Jun 2025 21:11:39 -0400
Subject: [PATCH] =?UTF-8?q?=E2=AC=87=EF=B8=8F=20fix:=20Image=20Download=20?=
 =?UTF-8?q?Browser=20Compatibility=20(#7950)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Add null check for SelectedTTS in MessageAudio component to prevent rendering issues

* fix: image download browser compatibility with error handling and fallback mechanism

- Updated the downloadImage function to use fetch for improved reliability and added error handling.
- Implemented a fallback to the original download method in case of fetch failure.
- Ensured the download link uses a blob URL for better compatibility with various image types.
---
 .../Chat/Messages/Content/Image.tsx           | 34 +++++++++++++++----
 .../components/Chat/Messages/MessageAudio.tsx |  3 ++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/Image.tsx b/client/src/components/Chat/Messages/Content/Image.tsx
index 85c3fdb3f2..ba4f65671a 100644
--- a/client/src/components/Chat/Messages/Content/Image.tsx
+++ b/client/src/components/Chat/Messages/Content/Image.tsx
@@ -46,13 +46,33 @@ const Image = ({
     [placeholderDimensions, height, width],
   );
 
-  const downloadImage = () => {
-    const link = document.createElement('a');
-    link.href = imagePath;
-    link.download = altText;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  const downloadImage = async () => {
+    try {
+      const response = await fetch(imagePath);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image: ${response.status}`);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = altText || 'image.png';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Download failed:', error);
+      const link = document.createElement('a');
+      link.href = imagePath;
+      link.download = altText || 'image.png';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
   };
 
   return (
diff --git a/client/src/components/Chat/Messages/MessageAudio.tsx b/client/src/components/Chat/Messages/MessageAudio.tsx
index 29805e7afb..eb4c52a407 100644
--- a/client/src/components/Chat/Messages/MessageAudio.tsx
+++ b/client/src/components/Chat/Messages/MessageAudio.tsx
@@ -14,6 +14,9 @@ function MessageAudio(props: TMessageAudio) {
   };
 
   const SelectedTTS = TTSComponents[engineTTS];
+  if (!SelectedTTS) {
+    return null;
+  }
   return <SelectedTTS {...props} />;
 }