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

* 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

View file

@ -1,8 +1,9 @@
import { useCallback } from 'react';
import { useSetRecoilState, useResetRecoilState, useRecoilCallback } from 'recoil';
import { useGetEndpointsQuery } from 'librechat-data-provider';
import { useSetRecoilState, useResetRecoilState, useRecoilCallback, useRecoilState } from 'recoil';
import type { TConversation, TSubmission, TPreset, TModelsConfig } from 'librechat-data-provider';
import { buildDefaultConvo, getDefaultEndpoint } from '~/utils';
import { useDeleteFilesMutation } from '~/data-provider';
import useOriginNavigate from './useOriginNavigate';
import useSetStorage from './useSetStorage';
import store from '~/store';
@ -10,12 +11,21 @@ import store from '~/store';
const useNewConvo = (index = 0) => {
const setStorage = useSetStorage();
const navigate = useOriginNavigate();
// const setConversation = useSetRecoilState(store.conversationByIndex(index));
const { setConversation } = store.useCreateConversationAtom(index);
const [files, setFiles] = useRecoilState(store.filesByIndex(index));
const setSubmission = useSetRecoilState<TSubmission | null>(store.submissionByIndex(index));
const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
const { data: endpointsConfig = {} } = useGetEndpointsQuery();
const { mutateAsync } = useDeleteFilesMutation({
onSuccess: () => {
console.log('Files deleted');
},
onError: (error) => {
console.log('Error deleting files:', error);
},
});
const switchToConversation = useRecoilCallback(
({ snapshot }) =>
async (
@ -66,21 +76,34 @@ const useNewConvo = (index = 0) => {
modelsData?: TModelsConfig;
buildDefault?: boolean;
} = {}) => {
switchToConversation(
{
conversationId: 'new',
title: 'New Chat',
endpoint: null,
...template,
createdAt: '',
updatedAt: '',
},
preset,
modelsData,
buildDefault,
);
const conversation = {
conversationId: 'new',
title: 'New Chat',
endpoint: null,
...template,
createdAt: '',
updatedAt: '',
};
if (conversation.conversationId === 'new' && !modelsData) {
const filesToDelete = Array.from(files.values())
.filter((file) => file.filepath)
.map((file) => ({
file_id: file.file_id,
filepath: file.filepath as string,
}));
setFiles(new Map());
localStorage.setItem('filesToDelete', JSON.stringify({}));
if (filesToDelete.length > 0) {
mutateAsync({ files: filesToDelete });
}
}
switchToConversation(conversation, preset, modelsData, buildDefault);
},
[switchToConversation],
[switchToConversation, files, mutateAsync, setFiles],
);
return {