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

client/src/components/Chat/Presentation.tsx

@@ -1,8 +1,38 @@
+import { useEffect } from 'react';
+import type { ExtendedFile } from '~/common';
+import { useDragHelpers, useSetFilesToDelete } from '~/hooks';
 import DragDropOverlay from './Input/Files/DragDropOverlay';
-import { useDragHelpers } from '~/hooks';
+import { useDeleteFilesMutation } from '~/data-provider';
 
 export default function Presentation({ children }: { children: React.ReactNode }) {
   const { isOver, canDrop, drop } = useDragHelpers();
+  const setFilesToDelete = useSetFilesToDelete();
+  const { mutateAsync } = useDeleteFilesMutation({
+    onSuccess: () => {
+      console.log('Temporary Files deleted');
+      setFilesToDelete({});
+    },
+    onError: (error) => {
+      console.log('Error deleting temporary files:', error);
+    },
+  });
+
+  useEffect(() => {
+    const filesToDelete = localStorage.getItem('filesToDelete');
+    const map = JSON.parse(filesToDelete ?? '{}') as Record<string, ExtendedFile>;
+    const files = Object.values(map)
+      .filter((file) => file.filepath)
+      .map((file) => ({
+        file_id: file.file_id,
+        filepath: file.filepath as string,
+      }));
+
+    if (files.length === 0) {
+      return;
+    }
+    mutateAsync({ files });
+  }, [mutateAsync]);
+
   const isActive = canDrop && isOver;
   return (
     <div ref={drop} className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800">