feat: update client package configuration and dependencies

- Added new dependencies for Rollup plugins and updated existing ones in package.json and package-lock.json.
- Introduced a new Rollup configuration file for building the client package.
- Refactored build scripts to include a dedicated build command for the client.
- Updated TypeScript configuration for improved module resolution and type declaration output.
- Integrated a Toast component from the client package into the main App component.

client/src/App.jsx

@@ -1,5 +1,6 @@
 import { RecoilRoot } from 'recoil';
 import { DndProvider } from 'react-dnd';
+import { Toast } from '@librechat/client';
 import { RouterProvider } from 'react-router-dom';
 import * as RadixToast from '@radix-ui/react-toast';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -7,7 +8,6 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
 import { ScreenshotProvider, ThemeProvider, useApiErrorBoundary } from './hooks';
 import { ToastProvider } from './Providers';
-import Toast from './components/ui/Toast';
 import { LiveAnnouncer } from '~/a11y';
 import { router } from './routes';
 

package-lock.json

@@ -48801,11 +48801,17 @@
       "name": "@librechat/client",
       "version": "0.1.0",
       "devDependencies": {
+        "@rollup/plugin-alias": "^5.1.0",
+        "@rollup/plugin-commonjs": "^25.0.2",
         "@rollup/plugin-node-resolve": "^15.0.0",
-        "@rollup/plugin-typescript": "^11.0.0",
+        "@rollup/plugin-replace": "^5.0.5",
+        "@rollup/plugin-terser": "^0.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
+        "rimraf": "^5.0.1",
         "rollup": "^4.0.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-typescript2": "^0.35.0",
         "typescript": "^5.0.0"
       },
       "peerDependencies": {
@@ -48813,6 +48819,7 @@
         "@headlessui/react": "^2.2.4",
         "@radix-ui/react-separator": "^1.0.0",
         "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-toast": "^1.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.0.0",
         "framer-motion": "^10.0.0",
@@ -48820,34 +48827,87 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-resizable-panels": "^3.0.3",
+        "recoil": "^0.7.7",
         "tailwind-merge": "^1.14.0"
       }
     },
-    "packages/client/node_modules/@rollup/plugin-typescript": {
+    "packages/client/node_modules/brace-expansion": {
-      "version": "11.1.6",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rollup/pluginutils": "^5.1.0",
+        "balanced-match": "^1.0.0"
-        "resolve": "^1.22.1"
+      }
+    },
+    "packages/client/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "packages/client/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "packages/client/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16 || 14 >=14.17"
       },
-      "peerDependencies": {
+      "funding": {
-        "rollup": "^2.14.0||^3.0.0||^4.0.0",
+        "url": "https://github.com/sponsors/isaacs"
-        "tslib": "*",
+      }
-        "typescript": ">=3.7.0"
+    },
+    "packages/client/node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^10.3.7"
       },
-      "peerDependenciesMeta": {
+      "bin": {
-        "rollup": {
+        "rimraf": "dist/esm/bin.mjs"
-          "optional": true
+      },
-        },
+      "funding": {
-        "tslib": {
+        "url": "https://github.com/sponsors/isaacs"
-          "optional": true
-        }
       }
     },
     "packages/data-provider": {

package.json

@@ -40,7 +40,8 @@
     "build:data-provider": "cd packages/data-provider && npm run build",
     "build:api": "cd packages/api && npm run build",
     "build:data-schemas": "cd packages/data-schemas && npm run build",
-    "frontend": "npm run build:data-provider && npm run build:data-schemas && npm run build:api && cd client && npm run build",
+    "build:client": "cd packages/client && npm run build",
+    "frontend": "npm run build:data-provider && npm run build:data-schemas && npm run build:api && npm run build:client && cd client && npm run build",
     "frontend:ci": "npm run build:data-provider && cd client && npm run build:ci",
     "frontend:dev": "cd client && npm run dev",
     "e2e": "playwright test --config=e2e/playwright.config.local.ts",

packages/client/package.json

@@ -1,27 +1,32 @@
 {
   "name": "@librechat/client",
   "version": "0.1.0",
-  "type": "module",
+  "description": "React components for LibreChat",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
-      "module": "./dist/index.js"
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs",
+    "clean": "rimraf dist",
-    "dev": "rollup -c rollup.config.mjs -w",
+    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
-    "clean": "rm -rf dist"
+    "build:watch": "rollup -c -w --bundleConfigAsCjs",
+    "dev": "rollup -c -w --bundleConfigAsCjs"
   },
   "peerDependencies": {
     "@ariakit/react": "^0.4.17",
     "@headlessui/react": "^2.2.4",
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-toast": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "framer-motion": "^10.0.0",
@@ -29,14 +34,21 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-resizable-panels": "^3.0.3",
+    "recoil": "^0.7.7",
     "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "rimraf": "^5.0.1",
     "rollup": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.35.0",
     "typescript": "^5.0.0"
   }
 }

packages/client/rollup.config.js

@@ -0,0 +1,56 @@
+// ESM bundler config for React components
+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 alias from '@rollup/plugin-alias';
+import { fileURLToPath } from 'url';
+import { dirname, resolve as pathResolve } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const plugins = [
+  peerDepsExternal(),
+  alias({
+    entries: [{ find: '~', replacement: pathResolve(__dirname, 'src') }],
+  }),
+  resolve({
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+    preventAssignment: true,
+  }),
+  commonjs(),
+  typescript({
+    tsconfig: './tsconfig.json',
+    useTsconfigDeclarationDir: true,
+    clean: true,
+  }),
+  terser(),
+];
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named',
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+      sourcemap: true,
+      exports: 'named',
+    },
+  ],
+  external: [...Object.keys(pkg.peerDependencies || {}), 'react/jsx-runtime'],
+  preserveSymlinks: true,
+  plugins,
+};

packages/client/rollup.config.mjs

@@ -1,40 +0,0 @@
-// ESM bundler config for React components
-import resolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-import alias from '@rollup/plugin-alias';
-import { fileURLToPath } from 'url';
-import { dirname, resolve as pathResolve } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export default {
-  input: 'src/index.ts',
-  output: {
-    dir: 'dist',
-    format: 'es',
-    preserveModules: true,
-  },
-  external: [
-    'react',
-    'react-dom',
-    'react/jsx-runtime',
-    '@radix-ui/react-separator',
-    '@radix-ui/react-slot',
-    'class-variance-authority',
-    'clsx',
-    'framer-motion',
-    'lucide-react',
-    'tailwind-merge',
-  ],
-  plugins: [
-    alias({
-      entries: [{ find: '~', replacement: pathResolve(__dirname, 'src') }],
-    }),
-    resolve(),
-    typescript({
-      tsconfig: './tsconfig.json',
-      jsx: 'react-jsx',
-    }),
-  ],
-};

packages/client/src/index.ts

@@ -0,0 +1,11 @@
+// Components
+export { default as Toast } from './components/Toast';
+
+// Hooks
+export * from './hooks';
+
+// Common types
+export * from './common/types';
+
+// Store
+export * from './store';

packages/client/tsconfig.json

@@ -2,11 +2,12 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ESNext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "declaration": true,
     "declarationMap": true,
+    "declarationDir": "./dist/types",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
@@ -17,8 +18,10 @@
     "baseUrl": "./src",
     "paths": {
       "~/*": ["./*"]
-    }
+    },
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "resolveJsonModule": true
   },
   "include": ["src/**/*"],
-  "exclude": ["dist", "node_modules"]
+  "exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }