Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-08 19:48:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

🛠️ refactor: Handle .webp, Improve File Life Cycle 📁 (#1213)

Browse source 
* fix: handle webp images correctly

* refactor: use the userPath from the start of the filecycle to avoid handling the blob, whose loading may fail upon user request

* refactor: delete temp files on reload and new chat
This commit is contained in:
Danny Avila 2023-11-24 16:45:06 -05:00 • committed by GitHub
parent 650759306d
commit cc39074e0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 160 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Chat/Messages/Content/Image.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef, memo } from 'react';
import React, { useState, useEffect } from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import * as Dialog from '@radix-ui/react-dialog';
import DialogImage from './DialogImage';
@ -19,7 +19,6 @@ const Image = ({
// n: number;
// i: number;
}) => {
const prevImagePathRef = useRef<string | null>(null);
const [isLoaded, setIsLoaded] = useState(false);
const handleImageLoad = () => setIsLoaded(true);
const [minDisplayTimeElapsed, setMinDisplayTimeElapsed] = useState(false);
@ -31,17 +30,14 @@ const Image = ({
}
return () => clearTimeout(timer);
}, [isLoaded]);
useEffect(() => {
const prevImagePath = prevImagePathRef.current;
if (prevImagePath && prevImagePath?.startsWith('blob:') && prevImagePath !== imagePath) {
URL.revokeObjectURL(prevImagePath);
}
prevImagePathRef.current = imagePath;
}, [imagePath]);
// const makeSquare = n >= 3 && i < 2;
const placeholderHeight = height > width ? '900px' : '288px';
let placeholderHeight = '288px';
if (height > width) {
placeholderHeight = '900px';
} else if (height === width) {
placeholderHeight = width + 'px';
}
return (
<Dialog.Root>
@ -82,4 +78,4 @@ const Image = ({
);
};
export default memo(Image);
export default Image;