⬇️ fix: Image Download Browser Compatibility (#7950)

* 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.

client/src/components/Chat/Messages/Content/Image.tsx

@@ -46,13 +46,33 @@ const Image = ({
     [placeholderDimensions, height, width],
   );
 
-  const downloadImage = () => {
+  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 = imagePath;
+      link.href = url;
-    link.download = altText;
+      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 (

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} />;
 }