⬇️ 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.
This commit is contained in:
Danny Avila 2025-06-17 21:11:39 -04:00 committed by GitHub
parent ec7370dfe9
commit 10c0d7d474
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 7 deletions

View file

@ -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 (

View file

@ -14,6 +14,9 @@ function MessageAudio(props: TMessageAudio) {
};
const SelectedTTS = TTSComponents[engineTTS];
if (!SelectedTTS) {
return null;
}
return <SelectedTTS {...props} />;
}