🚀 Feat: Streamline File Strategies & GPT-4-Vision Settings (#1535)

* chore: fix `endpoint` typescript issues and typo in console info message

* feat(api): files GET endpoint and save only file_id references to messages

* refactor(client): `useGetFiles` query hook, update file types, optimistic update of filesQuery on file upload

* refactor(buildTree): update to use params object and accept fileMap

* feat: map files to messages; refactor(ChatView): messages only available after files are fetched

* fix: fetch files only when authenticated

* feat(api): AppService
- rename app.locals.configs to app.locals.paths
- load custom config use fileStrategy from yaml config in app.locals

* refactor: separate Firebase and Local strategies, call based on config

* refactor: modularize file strategies and employ with use of DALL-E

* refactor(librechat.yaml): add fileStrategy field

* feat: add source to MongoFile schema, as well as BatchFile, and ExtendedFile types

* feat: employ file strategies for upload/delete files

* refactor(deleteFirebaseFile): add user id validation for firebase file deletion

* chore(deleteFirebaseFile): update jsdocs

* feat: employ strategies for vision requests

* fix(client): handle messages with deleted files

* fix(client): ensure `filesToDelete` always saves/sends `file.source`

* feat(openAI): configurable `resendImages` and `imageDetail`

* refactor(getTokenCountForMessage): recursive process only when array of Objects and only their values (not keys) aside from `image_url` types

* feat(OpenAIClient): calculateImageTokenCost

* chore: remove comment

* refactor(uploadAvatar): employ fileStrategy for avatars, from social logins or user upload

* docs: update docs on how to configure fileStrategy

* fix(ci): mock winston and winston related modules, update DALLE3.spec.js with changes made

* refactor(redis): change terminal message to reflect current development state

* fix(DALL-E-2): pass fileStrategy to dall-e

client/src/hooks/useFileHandling.ts

@@ -1,6 +1,9 @@
 import { v4 } from 'uuid';
 import debounce from 'lodash/debounce';
+import { QueryKeys } from 'librechat-data-provider';
+import { useQueryClient } from '@tanstack/react-query';
 import { useState, useEffect, useCallback } from 'react';
+import type { TFile } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
 import { useToastContext } from '~/Providers/ToastContext';
 import { useChatContext } from '~/Providers/ChatContext';
@@ -16,6 +19,7 @@ const totalSizeLimit = maxSize * 1024 * 1024; // 25 MB
 const supportedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
 
 const useFileHandling = () => {
+  const queryClient = useQueryClient();
   const { showToast } = useToastContext();
   const [errors, setErrors] = useState<string[]>([]);
   const setError = (error: string) => setErrors((prevErrors) => [...prevErrors, error]);
@@ -116,6 +120,9 @@ const useFileHandling = () => {
         filepath: data.filepath,
       });
 
+      const _files = queryClient.getQueryData<TFile[]>([QueryKeys.files]) ?? [];
+      queryClient.setQueryData([QueryKeys.files], [..._files, data]);
+
       setTimeout(() => {
         updateFileById(data.temp_file_id, {
           progress: 1,
@@ -126,6 +133,7 @@ const useFileHandling = () => {
           height: data.height,
           width: data.width,
           filename: data.filename,
+          source: data.source,
         });
       }, 300);
     },

client/src/hooks/useNewConvo.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { FileSources } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import {
   useSetRecoilState,
@@ -122,10 +123,11 @@ const useNewConvo = (index = 0) => {
 
       if (conversation.conversationId === 'new' && !modelsData) {
         const filesToDelete = Array.from(files.values())
-          .filter((file) => file.filepath)
+          .filter((file) => file.filepath && file.source)
           .map((file) => ({
             file_id: file.file_id,
             filepath: file.filepath as string,
+            source: file.source as FileSources, // Ensure that the source is of type FileSources
           }));
 
         setFiles(new Map());