refactor: Use librechat-data-provider app-wide 🔄 (#1326)

* chore: bump vite, vitejs/plugin-react, mark client package as esm, move react-query as a peer dep in data-provider

* chore: import changes due to new data-provider export strategy, also fix type imports where applicable

* chore: export react-query services as separate to avoid react dependencies in /api/

* chore: suppress sourcemap warnings and polyfill node:path which is used by filenamify
TODO: replace filenamify with an alternative and REMOVE polyfill

* chore: /api/ changes to support `librechat-data-provider`

* refactor: rewrite Dockerfile.multi in light of /api/ changes to support `librechat-data-provider`

* chore: remove volume mapping to node_modules directories in default compose file

* chore: remove schemas from /api/ as is no longer needed with use of `librechat-data-provider`

* fix(ci): jest `librechat-data-provider/react-query` module resolution

packages/data-provider/package.json

@@ -1,10 +1,22 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
-  "types": "types/index.d.ts",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./react-query": {
+      "import": "./dist/react-query/index.es.js",
+      "require": "./dist/react-query/index.js",
+      "types": "./types/react-query/index.d.ts"
+    }
+  },
   "scripts": {
     "clean": "rimraf dist",
     "build": "npm run clean && rollup -c --silent --bundleConfigAsCjs",
@@ -26,7 +38,6 @@
   },
   "homepage": "https://github.com/danny-avila/LibreChat#readme",
   "dependencies": {
-    "@tanstack/react-query": "^4.28.0",
     "axios": "^1.3.4",
     "openai": "4.11.1",
     "zod": "^3.22.4"
@@ -37,7 +48,8 @@
     "@babel/preset-typescript": "^7.21.0",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@tanstack/query-core": "^4.29.19",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/jest": "^29.5.2",
     "@types/node": "^20.3.0",
     "@types/react": "^18.2.18",
@@ -45,9 +57,14 @@
     "jest-junit": "^16.0.0",
     "rimraf": "^5.0.1",
     "rollup": "^3.26.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.35.0",
     "typescript": "^5.0.4"
   },
+  "peerDependencies": {
+    "@tanstack/react-query": "^4.28.0"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }

packages/data-provider/react-query/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "librechat-data-provider/react-query",
+  "private": true,
+  "main": "../index.js",
+  "module": "./index.es.js",
+  "types": "../types/react-query/index.d.ts",
+  "dependencies": {
+    "axios": "^1.3.4"
+  }
+}

packages/data-provider/rollup.config.js

@@ -1,6 +1,38 @@
 import typescript from 'rollup-plugin-typescript2';
 import resolve from '@rollup/plugin-node-resolve';
 import pkg from './package.json';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import terser from '@rollup/plugin-terser';
+import generatePackageJson from 'rollup-plugin-generate-package-json';
+
+const plugins = [
+  peerDepsExternal(),
+  resolve(),
+  replace({
+    __IS_DEV__: process.env.NODE_ENV === 'development',
+  }),
+  commonjs(),
+  typescript({
+    tsconfig: './tsconfig.json',
+    useTsconfigDeclarationDir: true,
+  }),
+  terser(),
+];
+
+const subfolderPlugins = (folderName) => [
+  ...plugins,
+  generatePackageJson({
+    baseContents: {
+      name: `${pkg.name}/${folderName}`,
+      private: true,
+      main: '../index.js',
+      module: './index.es.js', // Adjust to match the output file
+      types: `../types/${folderName}/index.d.ts`, // Point to correct types file
+    },
+  }),
+];
 
 export default [
   {
@@ -9,10 +41,14 @@ export default [
       {
         file: pkg.main,
         format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
       },
       {
         file: pkg.module,
         format: 'esm',
+        sourcemap: true,
+        exports: 'named',
       },
     ],
     ...{
@@ -20,12 +56,33 @@ export default [
         ...Object.keys(pkg.dependencies || {}),
         ...Object.keys(pkg.devDependencies || {}),
         ...Object.keys(pkg.peerDependencies || {}),
+        'react',
+        'react-dom',
       ],
       preserveSymlinks: true,
-      plugins: [
-        resolve(),
-        typescript({ useTsconfigDeclarationDir: true, tsconfig: './tsconfig.json' }),
-      ],
+      plugins,
     },
   },
+  // Separate bundle for react-query related part
+  {
+    input: 'src/react-query/index.ts',
+    output: [
+      {
+        file: 'dist/react-query/index.es.js',
+        format: 'esm',
+        exports: 'named',
+        sourcemap: true,
+      },
+    ],
+    external: [
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.devDependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+      'react',
+      'react-dom',
+      // 'librechat-data-provider', // Marking main part as external
+    ],
+    preserveSymlinks: true,
+    plugins: subfolderPlugins('react-query'),
+  },
 ];

packages/data-provider/src/index.ts

@@ -3,13 +3,7 @@ export * from './types';
 export * from './types/assistants';
 export * from './types/files';
 export * from './types/mutations';
-/*
- * react query
- * TODO: move to client, or move schemas/types to their own package
- */
-export * from './react-query-service';
 export * from './keys';
-export * from './assistants';
 /* api call helpers */
 export * from './headers-helpers';
 export { default as request } from './request';

packages/data-provider/src/react-query/assistants.ts

@@ -5,9 +5,9 @@ import type {
   QueryObserverResult,
   UseInfiniteQueryOptions,
 } from '@tanstack/react-query';
-import * as t from './types/assistants';
-import * as dataService from './data-service';
-import { QueryKeys } from './keys';
+import * as t from '../types/assistants';
+import * as dataService from '../data-service';
+import { QueryKeys } from '../keys';
 
 /**
  * Hook for listing all assistants, with optional parameters provided for pagination and sorting

packages/data-provider/src/react-query/index.ts

@@ -0,0 +1,2 @@
+export * from './react-query-service';
+export * from './assistants';

packages/data-provider/src/react-query/react-query-service.ts

@@ -6,12 +6,12 @@ import {
   UseMutationResult,
   QueryObserverResult,
 } from '@tanstack/react-query';
-import * as t from './types';
-import * as s from './schemas';
-import * as m from './types/mutations';
-import * as dataService from './data-service';
-import request from './request';
-import { QueryKeys } from './keys';
+import * as t from '../types';
+import * as s from '../schemas';
+import * as m from '../types/mutations';
+import * as dataService from '../data-service';
+import request from '../request';
+import { QueryKeys } from '../keys';
 
 export const useAbortRequestWithMessage = (): UseMutationResult<
   void,
@@ -292,20 +292,6 @@ export const useCreatePresetMutation = (): UseMutationResult<
   });
 };
 
-export const useUpdatePresetMutation = (): UseMutationResult<
-  s.TPreset,
-  unknown,
-  s.TPreset,
-  unknown
-> => {
-  const queryClient = useQueryClient();
-  return useMutation((payload: s.TPreset) => dataService.updatePreset(payload), {
-    onSuccess: () => {
-      queryClient.invalidateQueries([QueryKeys.presets]);
-    },
-  });
-};
-
 export const useDeletePresetMutation = (): UseMutationResult<
   m.PresetDeleteResponse,
   unknown,

packages/data-provider/src/schemas.ts

@@ -107,6 +107,8 @@ export const openAIModels = [
   'gpt-4-0314',
 ];
 
+export const visionModels = ['gpt-4-vision', 'llava-13b'];
+
 export const eModelEndpointSchema = z.nativeEnum(EModelEndpoint);
 
 export const tPluginAuthConfigSchema = z.object({

packages/data-provider/src/types.ts

@@ -1,13 +1,10 @@
 import OpenAI from 'openai';
-import type { UseMutationResult } from '@tanstack/react-query';
 import type { TResPlugin, TMessage, TConversation, TEndpointOption } from './schemas';
 
 export type TOpenAIMessage = OpenAI.Chat.ChatCompletionMessageParam;
 export type TOpenAIFunction = OpenAI.Chat.ChatCompletionCreateParams.Function;
 export type TOpenAIFunctionCall = OpenAI.Chat.ChatCompletionCreateParams.FunctionCallOption;
 
-export type TMutation = UseMutationResult<unknown>;
-
 export * from './schemas';
 
 export type TMessages = TMessage[];
@@ -127,7 +124,7 @@ export type TConfig = {
 
 export type TModelsConfig = Record<string, string[]>;
 
-export type TEndpointsConfig = Record<string, TConfig>;
+export type TEndpointsConfig = Record<string, TConfig | null>;
 
 export type TUpdateTokenCountResponse = {
   count: number;

packages/data-provider/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "declaration": true,
-    "declarationDir": "./types",
+    "declarationDir": "./dist/types",
     "module": "esnext",
     "noImplicitAny": true,
     "outDir": "./types",
@@ -17,11 +17,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "baseUrl": "src",
+    "sourceMap": true,
+    "baseUrl": ".", // This should be the root of your package
     "paths": {
-      "@src/*": ["./*"]
+      // Add path mappings
+      "librechat-data-provider/react-query": ["./src/react-query/index.ts"]
     }
   },
   "exclude": ["node_modules", "dist", "types"],
-  "include": ["src/**/*", "types/index.d.ts"]
+  "include": ["src/**/*", "types/index.d.ts", "types/react-query/index.d.ts"]
 }