feat: remove propdrilling for custom onFileRemove handler and just make it default behavior for PromptFile rather than working around old deletion handlers

client/src/components/Prompts/Groups/CreatePromptForm.tsx

@@ -44,7 +44,6 @@ const CreatePromptForm = ({
     promptFiles: files,
     setFiles,
     handleFileChange,
-    handleFileRemove,
     getToolResources,
   } = usePromptFileHandling();
 
@@ -184,7 +183,6 @@ const CreatePromptForm = ({
             files={files}
             onFilesChange={setFiles}
             handleFileChange={handleFileChange}
-            onFileRemove={handleFileRemove}
             disabled={isSubmitting}
           />
           <Description

client/src/components/Prompts/PromptFile.tsx

@@ -1,19 +1,15 @@
 import { useEffect } from 'react';
 import { useToastContext } from '@librechat/client';
-import { FileSources } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
 import FileContainer from '~/components/Chat/Input/Files/FileContainer';
-import { useDeleteFilesMutation } from '~/data-provider';
 import Image from '~/components/Chat/Input/Files/Image';
 import { useLocalize } from '~/hooks';
-import { logger } from '~/utils';
 
 export default function PromptFile({
   files: _files,
   setFiles,
   abortUpload,
   setFilesLoading,
-  onFileRemove,
   fileFilter,
   isRTL = false,
   Wrapper,
@@ -22,7 +18,6 @@ export default function PromptFile({
   abortUpload?: () => void;
   setFiles: React.Dispatch<React.SetStateAction<Map<string, ExtendedFile>>>;
   setFilesLoading: React.Dispatch<React.SetStateAction<boolean>>;
-  onFileRemove?: (fileId: string) => void;
   fileFilter?: (file: ExtendedFile) => boolean;
   isRTL?: boolean;
   Wrapper?: React.FC<{ children: React.ReactNode }>;
@@ -33,21 +28,6 @@ export default function PromptFile({
     fileFilter ? fileFilter(file) : true,
   );
 
-  const { mutateAsync } = useDeleteFilesMutation({
-    onMutate: async () =>
-      logger.log(
-        'prompts',
-        'Deleting prompt files',
-        files.map((f) => f.file_id),
-      ),
-    onSuccess: () => {
-      console.log('Prompt files deleted');
-    },
-    onError: (error) => {
-      console.log('Error deleting prompt files:', error);
-    },
-  });
-
   useEffect(() => {
     if (files.length === 0) {
       setFilesLoading(false);
@@ -111,29 +91,18 @@ export default function PromptFile({
                 abortUpload();
               }
 
-              if (onFileRemove) {
-                onFileRemove(file.file_id);
-              } else {
-                mutateAsync({
-                  files: [
-                    {
-                      file_id: file.file_id,
-                      filepath: file.filepath || '',
-                      embedded: file.embedded || false,
-                      source: file.source || FileSources.local,
-                    },
-                  ],
-                });
-
-                setFiles((currentFiles) => {
-                  const updatedFiles = new Map(currentFiles);
-                  updatedFiles.delete(file.file_id);
-                  if (file.temp_file_id) {
-                    updatedFiles.delete(file.temp_file_id);
-                  }
-                  return updatedFiles;
-                });
+              if (file.preview && file.preview.startsWith('blob:')) {
+                URL.revokeObjectURL(file.preview);
               }
+
+              setFiles((currentFiles) => {
+                const updatedFiles = new Map(currentFiles);
+                updatedFiles.delete(file.file_id);
+                if (file.temp_file_id) {
+                  updatedFiles.delete(file.temp_file_id);
+                }
+                return updatedFiles;
+              });
             };
 
             const isImage = file.type?.startsWith('image') ?? false;

client/src/components/Prompts/PromptFiles.tsx

@@ -11,13 +11,11 @@ const PromptFiles = ({
   files,
   onFilesChange,
   handleFileChange,
-  onFileRemove,
   disabled,
 }: {
   files: ExtendedFile[];
   onFilesChange?: (files: ExtendedFile[]) => void;
   handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>, toolResource?: string) => void;
-  onFileRemove?: (fileId: string) => void;
   disabled?: boolean;
 }) => {
   const localize = useLocalize();
@@ -65,7 +63,6 @@ const PromptFiles = ({
                   onFilesChange?.(newFiles);
                 }}
                 setFilesLoading={() => {}}
-                onFileRemove={onFileRemove}
                 Wrapper={({ children }) => <div className="flex flex-wrap gap-2">{children}</div>}
               />
             </div>

client/src/components/Prompts/PromptForm.tsx

@@ -196,7 +196,6 @@ const PromptForm = () => {
     getToolResources,
     promptFiles: hookPromptFiles,
     handleFileChange,
-    handleFileRemove,
     setFiles,
   } = usePromptFileHandling({
     onFileChange: (updatedFiles) => {
@@ -544,7 +543,6 @@ const PromptForm = () => {
                       files={hookPromptFiles}
                       onFilesChange={setFiles}
                       handleFileChange={handleFileChange}
-                      onFileRemove={handleFileRemove}
                       disabled={!canEdit}
                     />
                     <Description

client/src/components/Prompts/PromptVariablesAndFiles.tsx

@@ -8,7 +8,6 @@ interface PromptVariablesAndFilesProps {
   files?: ExtendedFile[];
   onFilesChange?: (files: ExtendedFile[]) => void;
   handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>, toolResource?: string) => void;
-  onFileRemove?: (fileId: string) => void;
   disabled?: boolean;
   showVariablesInfo?: boolean;
 }
@@ -18,7 +17,6 @@ const PromptVariablesAndFiles: React.FC<PromptVariablesAndFilesProps> = ({
   files = [],
   onFilesChange,
   handleFileChange,
-  onFileRemove,
   disabled,
   showVariablesInfo = true,
 }) => {
@@ -35,7 +33,6 @@ const PromptVariablesAndFiles: React.FC<PromptVariablesAndFilesProps> = ({
           files={files}
           onFilesChange={onFilesChange}
           handleFileChange={handleFileChange}
-          onFileRemove={onFileRemove}
           disabled={disabled}
         />
       </div>