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.

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",
-      "module": "./dist/index.js"
+      "import": "./dist/index.es.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",
-    "dev": "rollup -c rollup.config.mjs -w",
-    "clean": "rm -rf dist"
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
+    "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"]
 }