🚀 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/utils/buildTree.ts

@@ -1,11 +1,19 @@
-import { TMessage } from 'librechat-data-provider';
+import { TFile, TMessage } from 'librechat-data-provider';
 
 const even =
   'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700  dark:hover:bg-gray-900 dark:hover:text-gray-200';
 const odd =
   'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000 hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
 
-export default function buildTree(messages: TMessage[] | null, groupAll = false) {
+export default function buildTree({
+  messages,
+  fileMap,
+  groupAll = false,
+}: {
+  messages: TMessage[] | null;
+  fileMap?: Record<string, TFile>;
+  groupAll?: boolean;
+}) {
   if (messages === null) {
     return null;
   }
@@ -21,6 +29,12 @@ export default function buildTree(messages: TMessage[] | null, groupAll = false)
     messages.forEach((message) => {
       messageMap[message.messageId] = { ...message, children: [] };
 
+      if (message.files && fileMap) {
+        messageMap[message.messageId].files = message.files.map(
+          (file) => fileMap[file.file_id] ?? file,
+        );
+      }
+
       const parentMessage = messageMap[message.parentMessageId ?? ''];
       if (parentMessage) {
         parentMessage.children.push(messageMap[message.messageId]);

client/src/utils/files.ts

@@ -0,0 +1,12 @@
+import type { TFile } from 'librechat-data-provider';
+
+/** Maps Files by `file_id` for quick lookup */
+export function mapFiles(files: TFile[]) {
+  const fileMap = {} as Record<string, TFile>;
+
+  for (const file of files) {
+    fileMap[file.file_id] = file;
+  }
+
+  return fileMap;
+}

client/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './json';
+export * from './files';
 export * from './presets';
 export * from './languages';
 export * from './endpoints';

client/src/utils/presets.ts

@@ -12,6 +12,8 @@ export const getPresetIcon = (preset: TPreset, Icon) => {
   });
 };
 
+type TEndpoints = Array<string | EModelEndpoint>;
+
 export const getPresetTitle = (preset: TPreset) => {
   const {
     endpoint,
@@ -26,12 +28,16 @@ export const getPresetTitle = (preset: TPreset) => {
   let modelInfo = model || '';
   let label = '';
 
-  if (
-    endpoint &&
-    [EModelEndpoint.azureOpenAI, EModelEndpoint.openAI, EModelEndpoint.custom].includes(endpoint)
-  ) {
+  const usesChatGPTLabel: TEndpoints = [
+    EModelEndpoint.azureOpenAI,
+    EModelEndpoint.openAI,
+    EModelEndpoint.custom,
+  ];
+  const usesModelLabel: TEndpoints = [EModelEndpoint.google, EModelEndpoint.anthropic];
+
+  if (endpoint && usesChatGPTLabel.includes(endpoint)) {
     label = chatGptLabel || '';
-  } else if (endpoint && [EModelEndpoint.google, EModelEndpoint.anthropic].includes(endpoint)) {
+  } else if (endpoint && usesModelLabel.includes(endpoint)) {
     label = modelLabel || '';
   } else if (endpoint === EModelEndpoint.bingAI) {
     modelInfo = jailbreak ? 'Sydney' : modelInfo;