Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 18:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🛠️ 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

10
client/src/components/Chat/Input/Files/Images.tsx
View file

@ -2,6 +2,7 @@ import debounce from 'lodash/debounce';
import { useState, useEffect, useCallback } from 'react';
import type { BatchFile } from 'librechat-data-provider';
import { useDeleteFilesMutation } from '~/data-provider';
import { useSetFilesToDelete } from '~/hooks';
import { ExtendedFile } from '~/common';
import Image from './Image';
@ -14,6 +15,7 @@ export default function Images({
setFiles: React.Dispatch<React.SetStateAction<Map<string, ExtendedFile>>>;
setFilesLoading: React.Dispatch<React.SetStateAction<boolean>>;
}) {
const setFilesToDelete = useSetFilesToDelete();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_batch, setFileDeleteBatch] = useState<BatchFile[]>([]);
const files = Array.from(_files.values());
@ -37,7 +39,7 @@ export default function Images({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [files]);
const deleteFiles = useDeleteFilesMutation({
const { mutateAsync } = useDeleteFilesMutation({
onSuccess: () => {
console.log('Files deleted');
},
@ -49,10 +51,10 @@ export default function Images({
const executeBatchDelete = useCallback(
(filesToDelete: BatchFile[]) => {
console.log('Deleting files:', filesToDelete);
deleteFiles.mutate({ files: filesToDelete });
mutateAsync({ files: filesToDelete });
setFileDeleteBatch([]);
},
[deleteFiles],
[mutateAsync],
);
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -81,6 +83,8 @@ export default function Images({
const updatedFiles = new Map(currentFiles);
updatedFiles.delete(file_id);
updatedFiles.delete(temp_file_id);
const files = Object.fromEntries(updatedFiles);
setFilesToDelete(files);
return updatedFiles;
});