Move data provider to shared package (#582)

* create data-provider package and move code from data-provider folder to be shared between apps

* fix type issues

* add packages to ignore

* add new data-provider package to apps

* refactor: change client imports to use @librechat/data-provider package

* include data-provider build script in frontend build

* fix type issue after rebasing

* delete admin/package.json from this branch

* update test ci script to include building of data-provider package

* Try using regular build for test action

* Switch frontend-review back to build:ci

* Remove loginRedirect from Login.tsx

* Add ChatGPT back to EModelEndpoint

.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
   plugins: ['react', 'react-hooks', '@typescript-eslint'],
   rules: {
     'react/react-in-jsx-scope': 'off',
-    '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
+    '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow' }],
     indent: ['error', 2, { SwitchCase: 1 }],
     'max-len': [
       'error',
@@ -42,12 +42,6 @@ module.exports = {
     // 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'no-console': 'off',
     'import/extensions': 'off',
-    'no-use-before-define': [
-      'error',
-      {
-        functions: false
-      }
-    ],
     'no-promise-executor-return': 'off',
     'no-param-reassign': 'off',
     'no-continue': 'off',
@@ -103,6 +97,18 @@ module.exports = {
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended'
       ]
+    },
+    {
+      files: './packages/data-provider/**/*.ts',
+      overrides: [
+        {
+          files: "**/*.ts",
+          parser: "@typescript-eslint/parser",
+          parserOptions: {
+            project: "./packages/data-provider/tsconfig.json"
+          }
+        }
+      ]
     }
   ],
   settings: {

.github/workflows/frontend-review.yml

@@ -25,10 +25,10 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci --ignore-scripts
+        run: npm ci
 
       - name: Build Client
-        run: cd client && npm run build:ci
+        run: npm run frontend:ci
 
       - name: Run unit tests
         run: cd client && npm run test:ci

.gitignore

@@ -39,6 +39,7 @@ meili_data/
 api/node_modules/
 client/node_modules/
 bower_components/
+types/
 
 # Floobits
 .floo
@@ -72,3 +73,5 @@ junit.xml
 meilisearch
 data.ms/*
 auth.json
+
+/packages/ux-shared/

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.5.2",
   "description": "",
   "scripts": {
+    "data-provider": "cd .. && npm run build:data-provider",
     "build": "cross-env NODE_ENV=production dotenv -e ../.env -- vite build",
     "build:ci": "cross-env NODE_ENV=dev vite build --mode ci",
     "dev": "cross-env NODE_ENV=dev dotenv -e ../.env -- vite",
@@ -75,7 +76,8 @@
     "tailwind-merge": "^1.9.1",
     "tailwindcss-animate": "^1.0.5",
     "tailwindcss-radix": "^2.8.0",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "@librechat/data-provider": "*"
   },
   "devDependencies": {
     "@babel/cli": "^7.20.7",

client/src/components/Auth/Login.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import LoginForm from './LoginForm';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { useGetStartupConfig } from '~/data-provider';
+import { useGetStartupConfig } from '@librechat/data-provider';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();

client/src/components/Auth/LoginForm.tsx

@@ -1,5 +1,5 @@
 import { useForm } from 'react-hook-form';
-import { TLoginUser } from '~/data-provider';
+import { TLoginUser } from '@librechat/data-provider';
 
 type TLoginFormProps = {
   onSubmit: (data: TLoginUser) => void;

client/src/components/Auth/Registration.tsx

@@ -1,7 +1,11 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
-import { useRegisterUserMutation, TRegisterUser, useGetStartupConfig } from '~/data-provider';
+import {
+  useRegisterUserMutation,
+  TRegisterUser,
+  useGetStartupConfig
+} from '@librechat/data-provider';
 
 function Registration() {
   const navigate = useNavigate();
@@ -27,7 +31,9 @@ function Registration() {
       },
       onError: (error) => {
         setError(true);
+        //@ts-ignore - error is of type unknown
         if (error.response?.data?.message) {
+          //@ts-ignore - error is of type unknown
           setErrorMessage(error.response?.data?.message);
         }
       }

client/src/components/Auth/RequestPasswordReset.tsx

@@ -1,6 +1,10 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useRequestPasswordResetMutation, TRequestPasswordReset } from '~/data-provider';
+import {
+  useRequestPasswordResetMutation,
+  TRequestPasswordReset,
+  TRequestPasswordResetResponse
+} from '@librechat/data-provider';
 
 function RequestPasswordReset() {
   const {
@@ -15,7 +19,7 @@ function RequestPasswordReset() {
 
   const onSubmit = (data: TRequestPasswordReset) => {
     requestPasswordReset.mutate(data, {
-      onSuccess: (data) => {
+      onSuccess: (data: TRequestPasswordResetResponse) => {
         setSuccess(true);
         setResetLink(data.link);
       },

client/src/components/Auth/ResetPassword.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useResetPasswordMutation, TResetPassword } from '~/data-provider';
+import { useResetPasswordMutation, TResetPassword } from '@librechat/data-provider';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 function ResetPassword() {
@@ -73,12 +73,14 @@ function ResetPassword() {
                 <input
                   type="hidden"
                   id="token"
+                  // @ts-ignore - Type 'string | null' is not assignable to type 'string | number | readonly string[] | undefined'
                   value={params.get('token')}
                   {...register('token', { required: 'Unable to process: No valid reset token' })}
                 />
                 <input
                   type="hidden"
                   id="userId"
+                  // @ts-ignore - Type 'string | null' is not assignable to type 'string | number | readonly string[] | undefined'
                   value={params.get('userId')}
                   {...register('userId', { required: 'Unable to process: No valid user id' })}
                 />

client/src/components/Auth/__tests__/Login.spec.tsx

@@ -1,9 +1,9 @@
 import { render, waitFor } from 'layout-test-utils';
 import userEvent from '@testing-library/user-event';
 import Login from '../Login';
-import * as mockDataProvider from '~/data-provider';
+import * as mockDataProvider from '@librechat/data-provider';
 
-jest.mock('~/data-provider');
+jest.mock('@librechat/data-provider');
 
 const setup = ({
   useGetUserQueryReturnValue = {

client/src/components/Auth/__tests__/Registration.spec.tsx

@@ -1,9 +1,9 @@
 import { render, waitFor } from 'layout-test-utils';
 import userEvent from '@testing-library/user-event';
 import Registration from '../Registration';
-import * as mockDataProvider from '~/data-provider';
+import * as mockDataProvider from '@librechat/data-provider';
 
-jest.mock('~/data-provider');
+jest.mock('@librechat/data-provider');
 
 const setup = ({
   useGetUserQueryReturnValue = {

client/src/components/Conversations/Conversation.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { useUpdateConversationMutation } from '~/data-provider';
+import { useUpdateConversationMutation } from '@librechat/data-provider';
 import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
 import ConvoIcon from '../svg/ConvoIcon';

client/src/components/Conversations/DeleteButton.jsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import TrashIcon from '../svg/TrashIcon';
 import CrossIcon from '../svg/CrossIcon';
 import { useRecoilValue } from 'recoil';
-import { useDeleteConversationMutation } from '~/data-provider';
+import { useDeleteConversationMutation } from '@librechat/data-provider';
 
 import store from '~/store';
 

client/src/components/Endpoints/BingAI/Settings.jsx

@@ -5,7 +5,7 @@ import { Checkbox } from '~/components/ui/Checkbox.tsx';
 import SelectDropDown from '../../ui/SelectDropDown';
 import { cn } from '~/utils/';
 import useDebounce from '~/hooks/useDebounce';
-import { useUpdateTokenCountMutation } from '~/data-provider';
+import { useUpdateTokenCountMutation } from '@librechat/data-provider';
 
 const defaultTextProps =
   'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
@@ -43,7 +43,7 @@ function Settings(props) {
   }, [debouncedContext]);
 
   return (
-    <div className="md:h-[350px] h-[490px] overflow-y-auto">
+    <div className="h-[490px] overflow-y-auto md:h-[350px]">
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
@@ -113,7 +113,8 @@ function Settings(props) {
                 <a
                   href="https://github.com/danny-avila/LibreChat/blob/main/client/defaultSystemMessage.md"
                   target="_blank"
-                  className="text-blue-500 transition-colors duration-200 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" rel="noreferrer"
+                  className="text-blue-500 transition-colors duration-200 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500"
+                  rel="noreferrer"
                 >
                   System Message
                 </a>{' '}

client/src/components/Endpoints/SaveAsPresetDialog.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import {Dialog, DialogTemplate, Input, Label} from '../ui/';
+import { Dialog, DialogTemplate, Input, Label } from '../ui/';
 import { cn } from '~/utils/';
 import cleanupPreset from '~/utils/cleanupPreset';
-import { useCreatePresetMutation } from '~/data-provider';
+import { useCreatePresetMutation } from '@librechat/data-provider';
 import store from '~/store';
 
 const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {

client/src/components/Input/Footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useGetStartupConfig } from '~/data-provider';
+import { useGetStartupConfig } from '@librechat/data-provider';
 
 export default function Footer() {
   const { data: config } = useGetStartupConfig();

client/src/components/Input/NewConversationMenu/index.jsx

@@ -9,7 +9,7 @@ import { Trash2 } from 'lucide-react';
 import FileUpload from './FileUpload';
 import getIcon from '~/utils/getIcon';
 import getDefaultConversation from '~/utils/getDefaultConversation';
-import { useDeletePresetMutation, useCreatePresetMutation } from '~/data-provider';
+import { useDeletePresetMutation, useCreatePresetMutation } from '@librechat/data-provider';
 import {
   Button,
   DropdownMenu,
@@ -19,7 +19,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   DialogTemplate,
-  Dialog, DialogTrigger
+  Dialog,
+  DialogTrigger
 } from '../../ui/';
 import { cn } from '~/utils/';
 
@@ -87,8 +88,9 @@ export default function NewConversationMenu() {
   // set the current model
   const onSelectEndpoint = (newEndpoint) => {
     setMenuOpen(false);
-    if (!newEndpoint) { return; }
+    if (!newEndpoint) {
-    else {
+      return;
+    } else {
       newConversation({}, { endpoint: newEndpoint });
     }
   };
@@ -101,7 +103,7 @@ export default function NewConversationMenu() {
       const currentConvo = getDefaultConversation({
         conversation,
         endpointsConfig,
-        preset: newPreset,
+        preset: newPreset
       });
 
       setConversation(currentConvo);
@@ -153,7 +155,7 @@ export default function NewConversationMenu() {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          className="w-96 dark:bg-gray-900 z-[100]"
+          className="z-[100] w-96 dark:bg-gray-900"
           onCloseAutoFocus={(event) => event.preventDefault()}
         >
           <DropdownMenuLabel
@@ -166,11 +168,15 @@ export default function NewConversationMenu() {
           <DropdownMenuRadioGroup
             value={endpoint}
             onValueChange={onSelectEndpoint}
-            className="overflow-y-auto gap-1 flex flex-col"
+            className="flex flex-col gap-1 overflow-y-auto"
           >
             {showEndpoints &&
               (availableEndpoints.length ? (
-                <EndpointItems selectedEndpoint={endpoint} endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
+                <EndpointItems
+                  selectedEndpoint={endpoint}
+                  endpoints={availableEndpoints}
+                  onSelect={onSelectEndpoint}
+                />
               ) : (
                 <DropdownMenuLabel className="dark:text-gray-300">
                   No endpoint available.
@@ -217,7 +223,10 @@ export default function NewConversationMenu() {
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             onValueChange={onSelectPreset}
-            className={cn('overflow-y-auto overflow-x-hidden', showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]')}
+            className={cn(
+              'overflow-y-auto overflow-x-hidden',
+              showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]'
+            )}
           >
             {showPresets &&
               (presets.length ? (

client/src/components/Input/PluginsOptions/index.jsx

@@ -14,7 +14,7 @@ import { Settings, AgentSettings } from '../../Endpoints/Plugins/';
 import { cn } from '~/utils/';
 import store from '~/store';
 import { useAuthContext } from '~/hooks/AuthContext';
-import { useAvailablePluginsQuery } from '~/data-provider';
+import { useAvailablePluginsQuery } from '@librechat/data-provider';
 
 function PluginsOptions() {
   const { data: allPlugins } = useAvailablePluginsQuery();

client/src/components/MessageHandler/index.jsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
-import { SSE } from '~/data-provider/sse.mjs';
+import { SSE, createPayload } from '@librechat/data-provider';
-import createPayload from '~/data-provider/createPayload';
 import store from '~/store';
 import { useAuthContext } from '~/hooks/AuthContext';
 
@@ -224,7 +223,8 @@ export default function MessageHandler() {
 
     events.onopen = () => console.log('connection is opened');
 
-    events.oncancel = () => abortConversation(message?.conversationId || submission?.conversationId);
+    events.oncancel = () =>
+      abortConversation(message?.conversationId || submission?.conversationId);
 
     events.onerror = function (e) {
       console.log('error in opening conn.');

client/src/components/Messages/Message.jsx

@@ -10,7 +10,7 @@ import HoverButtons from './HoverButtons';
 import SiblingSwitch from './SiblingSwitch';
 import getIcon from '~/utils/getIcon';
 import { useMessageHandler } from '~/utils/handleSubmit';
-import { useGetConversationByIdQuery } from '~/data-provider';
+import { useGetConversationByIdQuery } from '@librechat/data-provider';
 import { cn } from '~/utils/';
 import store from '~/store';
 import getError from '~/utils/getError';
@@ -192,7 +192,7 @@ export default function Message({
                     <div className="markdown prose dark:prose-invert light w-full break-words">
                       {!isCreatedByUser ? (
                         <>
-                          <Content content={text} message={message}/>
+                          <Content content={text} message={message} />
                         </>
                       ) : (
                         <>{text}</>

client/src/components/Nav/ClearConvos.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogTemplate } from '../ui/';
 import { ClearChatsButton } from './SettingsTabs/';
-import { useClearConversationsMutation } from '~/data-provider';
+import { useClearConversationsMutation } from '@librechat/data-provider';
 import store from '~/store';
 
 const ClearConvos = ({ open, onOpenChange }) => {
@@ -32,7 +32,9 @@ const ClearConvos = ({ open, onOpenChange }) => {
       <DialogTemplate
         title="Clear conversations"
         description="Are you sure you want to clear all conversations? This is irreversible."
-        leftButtons={<ClearChatsButton showText={false} confirmClear={confirmClear} onClick={clearConvos} />}
+        leftButtons={
+          <ClearChatsButton showText={false} confirmClear={confirmClear} onClick={clearConvos} />
+        }
       />
     </Dialog>
   );

client/src/components/Nav/Settings.jsx

@@ -4,7 +4,7 @@ import { General } from './SettingsTabs/';
 import { CogIcon } from '~/components/svg';
 import { useEffect, useState } from 'react';
 import { cn } from '~/utils/';
-import { useClearConversationsMutation } from '~/data-provider';
+import { useClearConversationsMutation } from '@librechat/data-provider';
 import store from '~/store';
 
 export default function Settings({ open, onOpenChange }) {

client/src/components/Nav/SettingsTabs/General.tsx

@@ -2,9 +2,15 @@ import * as Tabs from '@radix-ui/react-tabs';
 import { CheckIcon } from 'lucide-react';
 import { ThemeContext } from '~/hooks/ThemeContext';
 import React, { useState, useContext, useCallback } from 'react';
-import { useClearConversationsMutation } from '~/data-provider';
+import { useClearConversationsMutation } from '@librechat/data-provider';
 
-export const ThemeSelector = ({ theme, onChange }: { theme: string, onChange: (value: string) => void }) => (
+export const ThemeSelector = ({
+  theme,
+  onChange
+}: {
+  theme: string;
+  onChange: (value: string) => void;
+}) => (
   <div className="flex items-center justify-between">
     <div>Theme</div>
     <select
@@ -19,7 +25,15 @@ export const ThemeSelector = ({ theme, onChange }: { theme: string, onChange: (v
   </div>
 );
 
-export const ClearChatsButton = ({ confirmClear, showText = true, onClick }: { confirmClear: boolean, showText: boolean, onClick: () => void }) => (
+export const ClearChatsButton = ({
+  confirmClear,
+  showText = true,
+  onClick
+}: {
+  confirmClear: boolean;
+  showText: boolean;
+  onClick: () => void;
+}) => (
   <div className="flex items-center justify-between">
     {showText && <div>Clear all chats</div>}
     <button
@@ -45,7 +59,7 @@ function General() {
   const { theme, setTheme } = useContext(ThemeContext);
   const clearConvosMutation = useClearConversationsMutation();
   const [confirmClear, setConfirmClear] = useState(false);
-  
+
   const clearConvos = useCallback(() => {
     if (confirmClear) {
       console.log('Clearing conversations...');
@@ -56,18 +70,21 @@ function General() {
     }
   }, [confirmClear, clearConvosMutation]);
 
-  const changeTheme = useCallback((value: string) => {
+  const changeTheme = useCallback(
-    setTheme(value);
+    (value: string) => {
-  }, [setTheme]);
+      setTheme(value);
+    },
+    [setTheme]
+  );
 
   return (
-    <Tabs.Content value="general" role="tabpanel" className="w-full md:min-h-[300px]" >
+    <Tabs.Content value="general" role="tabpanel" className="w-full md:min-h-[300px]">
       <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <ThemeSelector theme={theme} onChange={changeTheme} />
         </div>
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-          <ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} showText={true}/>
+          <ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} showText={true} />
         </div>
       </div>
     </Tabs.Content>

client/src/components/Nav/index.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useGetConversationsQuery, useSearchQuery } from '~/data-provider';
+import { useGetConversationsQuery, useSearchQuery } from '@librechat/data-provider';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import Conversations from '../Conversations';
@@ -9,7 +9,6 @@ import NewChat from './NewChat';
 import Pages from '../Conversations/Pages';
 import Panel from '../svg/Panel';
 import Spinner from '../svg/Spinner';
-// import { ThemeContext } from '~/hooks/ThemeContext';
 import { cn } from '~/utils/';
 import store from '~/store';
 import { useAuthContext } from '~/hooks/AuthContext';
@@ -38,7 +37,6 @@ import useDebounce from '~/hooks/useDebounce';
 export default function Nav({ navVisible, setNavVisible }) {
   const [isHovering, setIsHovering] = useState(false);
   const { isAuthenticated } = useAuthContext();
-  // const { theme, } = useContext(ThemeContext);
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);
 
@@ -159,7 +157,8 @@ export default function Nav({ navVisible, setNavVisible }) {
 
   const isMobile = () => {
     const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
-    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+    const mobileRegex =
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
     return mobileRegex.test(userAgent);
   };
 

client/src/components/Plugins/Store/PluginAuthForm.tsx

@@ -1,4 +1,4 @@
-import { TPlugin, TPluginAuthConfig } from '~/data-provider';
+import { TPlugin, TPluginAuthConfig } from '@librechat/data-provider';
 import { Save } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { TPluginAction } from './PluginStoreDialog';

client/src/components/Plugins/Store/PluginStoreDialog.tsx

@@ -4,7 +4,11 @@ import { useRecoilState } from 'recoil';
 import { X } from 'lucide-react';
 import store from '~/store';
 import { PluginStoreItem, PluginPagination, PluginAuthForm } from '.';
-import { useAvailablePluginsQuery, useUpdateUserPluginsMutation, TPlugin } from '~/data-provider';
+import {
+  useAvailablePluginsQuery,
+  useUpdateUserPluginsMutation,
+  TPlugin
+} from '@librechat/data-provider';
 import { useAuthContext } from '~/hooks/AuthContext';
 
 type TPluginStoreDialogProps = {
@@ -95,8 +99,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
     if (width < 501) {
       setItemsPerPage(8);
       return;
-    } else
+    } else if (width < 640) {
-    if (width < 640) {
       columns = 2;
     } else if (width < 1024) {
       columns = 3;
@@ -140,7 +143,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
       <div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" />
       {/* Full-screen container to center the panel */}
       <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel className="relative w-full max-sm:h-full overflow-y-auto transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-900 sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl">
+        <Dialog.Panel className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-900 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl">
           <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
             <div className="flex items-center">
               <div className="text-center sm:text-left">

client/src/components/Plugins/Store/PluginStoreItem.tsx

@@ -1,4 +1,4 @@
-import { TPlugin } from '~/data-provider';
+import { TPlugin } from '@librechat/data-provider';
 import { XCircle, DownloadCloud } from 'lucide-react';
 
 type TPluginStoreItemProps = {

client/src/components/Plugins/Store/__tests__/PluginStoreDialog.spec.tsx

@@ -1,9 +1,9 @@
 import { render } from 'layout-test-utils';
 import PluginStoreDialog from '../PluginStoreDialog';
 import userEvent from '@testing-library/user-event';
-import * as mockDataProvider from '~/data-provider';
+import * as mockDataProvider from '@librechat/data-provider';
 
-jest.mock('~/data-provider');
+jest.mock('@librechat/data-provider');
 
 class ResizeObserver {
   observe() {

client/src/components/ui/Landing.tsx

@@ -5,7 +5,7 @@ import SunIcon from '../svg/SunIcon';
 import LightningIcon from '../svg/LightningIcon';
 import CautionIcon from '../svg/CautionIcon';
 import store from '~/store';
-import { useGetStartupConfig } from '~/data-provider';
+import { useGetStartupConfig } from '@librechat/data-provider';
 
 export default function Landing() {
   const { data: config } = useGetStartupConfig();

client/src/hooks/AuthContext.tsx

@@ -16,7 +16,7 @@ import {
   useGetUserQuery,
   useRefreshTokenMutation,
   TLoginUser
-} from '~/data-provider';
+} from '@librechat/data-provider';
 import { useNavigate } from 'react-router-dom';
 
 export type TAuthContext = {
@@ -35,10 +35,20 @@ export type TUserContext = {
   redirect?: string;
 };
 
+export type TAuthConfig = {
+  loginRedirect: string;
+};
+//@ts-ignore - index expression is not of type number
 window['errorTimeout'] = undefined;
 const AuthContext = createContext<TAuthContext | undefined>(undefined);
 
-const AuthContextProvider = ({ children }: { children: ReactNode }) => {
+const AuthContextProvider = ({
+  authConfig,
+  children
+}: {
+  authConfig: TAuthConfig;
+  children: ReactNode;
+}) => {
   const [user, setUser] = useState<TUser | undefined>(undefined);
   const [token, setToken] = useState<string | undefined>(undefined);
   const [error, setError] = useState<string | undefined>(undefined);
@@ -60,7 +70,7 @@ const AuthContextProvider = ({ children }: { children: ReactNode }) => {
         setError(error);
       }, 400);
     }
-  }
+  };
 
   const setUserContext = useCallback(
     (userContext: TUserContext) => {
@@ -79,7 +89,7 @@ const AuthContextProvider = ({ children }: { children: ReactNode }) => {
     [navigate]
   );
 
-  const getCookieValue = (key) => {
+  const getCookieValue = (key: string) => {
     let keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
     return keyValue ? keyValue[2] : null;
   };
@@ -157,7 +167,7 @@ const AuthContextProvider = ({ children }: { children: ReactNode }) => {
   //       setError(error.message);
   //     }
   //   });
-  //   
+  //
   // }, [setUserContext]);
 
   // useEffect(() => {

client/src/routes/Chat.jsx

@@ -11,7 +11,7 @@ import {
   useGetMessagesByConvoId,
   useGetConversationByIdMutation,
   useGetStartupConfig
-} from '~/data-provider';
+} from '@librechat/data-provider';
 
 export default function Chat() {
   const [shouldNavigate, setShouldNavigate] = useState(true);

client/src/routes/Root.jsx

@@ -4,7 +4,7 @@ import {
   useGetEndpointsQuery,
   useGetPresetsQuery,
   useGetSearchEnabledQuery
-} from '~/data-provider';
+} from '@librechat/data-provider';
 
 import MessageHandler from '../components/MessageHandler';
 import MobileNav from '../components/Nav/MobileNav';

package.json

@@ -4,16 +4,19 @@
   "description": "",
   "workspaces": [
     "api",
-    "client"
+    "client",
+    "packages/data-provider"
   ],
   "scripts": {
     "install": "node config/install.js",
     "upgrade": "node config/upgrade.js",
     "create-user": "node config/create-user.js",
     "backend": "cross-env NODE_ENV=production node api/server/index.js",
-    "backend-dev": "cross-env NODE_ENV=development npx nodemon api/server/index.js",
+    "backend:dev": "cross-env NODE_ENV=development npx nodemon api/server/index.js",
-    "frontend": "cd client && npm run build",
+    "build:data-provider": "cd packages/data-provider && npm run build && npm link && cd ../../client && npm link @librechat/data-provider",
-    "frontend-dev": "cd client && npm run dev",
+    "frontend": "npm run build:data-provider && 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",
     "e2e:ci": "playwright test --config=e2e/playwright.config.ts",
     "e2e:debug": "cross-env PWDEBUG=1 playwright test --config=e2e/playwright.config.local.ts",
@@ -66,7 +69,9 @@
     "ignore": [
       "api/data/",
       "data",
-      "client/"
+      "client/",
+      "admin/",
+      "packages/"
     ]
   }
 }

packages/data-provider/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-typescript'],
+  plugins: ['babel-plugin-replace-ts-export-assignment'],
+};

packages/data-provider/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!<rootDir>/node_modules/'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/dist/'],
+  coverageReporters: ['text', 'cobertura'],
+  testResultsProcessor: 'jest-junit',
+  moduleNameMapper: {
+    '^@src/(.*)$': '<rootDir>/src/$1',
+  },
+  // coverageThreshold: {
+  //   global: {
+  //     statements: 58,
+  //     branches: 49,
+  //     functions: 50,
+  //     lines: 57,
+  //   },
+  // },
+  restoreMocks: true
+};

packages/data-provider/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@librechat/data-provider",
+  "version": "0.1.0",
+  "description": "data services for librechat apps",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "types/",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c --silent --bundleConfigAsCjs",
+    "build:watch": "rollup -c -w",
+    "test": "jest --coverage --watch",
+    "test:ci": "jest --coverage --ci",
+    "verify": "npm run test:ci"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danny-avila/LibreChat.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/danny-avila/LibreChat/issues"
+  },
+  "homepage": "https://github.com/danny-avila/LibreChat#readme",
+  "dependencies": {
+    "@tanstack/react-query": "^4.28.0",
+    "axios": "^1.3.4"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@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",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.3.0",
+    "jest": "^29.5.0",
+    "jest-junit": "^16.0.0",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.26.0",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "typescript": "^5.0.4"
+  }
+}

packages/data-provider/rollup.config.js

@@ -0,0 +1,31 @@
+import typescript from 'rollup-plugin-typescript2';
+import resolve from '@rollup/plugin-node-resolve';
+import pkg from './package.json';
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+      {
+        file: pkg.module,
+        format: 'esm',
+      },
+    ],
+    ...{
+      external: [
+        ...Object.keys(pkg.dependencies || {}),
+        ...Object.keys(pkg.devDependencies || {}),
+        ...Object.keys(pkg.peerDependencies || {}),
+      ],
+      preserveSymlinks: true,
+      plugins: [
+        resolve(),
+        typescript({useTsconfigDeclarationDir: true, tsconfig: './tsconfig.json'}),
+      ],
+    },
+  },
+];

packages/data-provider/src/createPayload.ts

@@ -10,6 +10,7 @@ export default function createPayload(submission: TSubmission) {
     openAI: '/api/ask/openAI',
     google: '/api/ask/google',
     bingAI: '/api/ask/bingAI',
+    chatGPT: '/api/ask/chatGPT',
     chatGPTBrowser: '/api/ask/chatGPTBrowser',
     gptPlugins: '/api/ask/gptPlugins'
   };
@@ -23,4 +24,4 @@ export default function createPayload(submission: TSubmission) {
   };
 
   return { server, payload };
-}
+}

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

@@ -96,7 +96,7 @@ export const getLoginGoogle = () => {
   return request.get(endpoints.loginGoogle());
 };
 
-export const requestPasswordReset = (payload: t.TRequestPasswordReset) => {
+export const requestPasswordReset = (payload: t.TRequestPasswordReset): Promise<t.TRequestPasswordResetResponse> => {
   return request.post(endpoints.requestPasswordReset(), payload);
 };
 

packages/data-provider/src/index.ts

@@ -1,7 +1,7 @@
 export * from './data-service';
-// export * from './endpoints';
 export * from './request';
 export * from './types';
 export * from './react-query-service';
 export * from './headers-helpers';
-// export * from './events';
+export * from './sse.mjs';
+export {default as createPayload} from './createPayload';

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

@@ -140,9 +140,9 @@ export const useClearConversationsMutation = (): UseMutationResult<unknown> => {
 
 export const useGetConversationsQuery = (
   pageNumber: string,
-  config?: UseQueryOptions<t.TConversation[]>
+  config?: UseQueryOptions<t.TGetConversationsResponse>
-): QueryObserverResult<t.TConversation[]> => {
+): QueryObserverResult<t.TGetConversationsResponse> => {
-  return useQuery<t.TConversation[]>(
+  return useQuery<t.TGetConversationsResponse>(
     [QueryKeys.allConversations, pageNumber],
     () => dataService.getConversations(pageNumber),
     {
@@ -302,13 +302,19 @@ export const useRefreshTokenMutation = (): UseMutationResult<
 > => {
   return useMutation(() => dataService.refreshToken(), {});
 };
-export const useRequestPasswordResetMutation = (): UseMutationResult<unknown> => {
+
+export const useRequestPasswordResetMutation = (): UseMutationResult<t.TRequestPasswordResetResponse, unknown, t.TRequestPasswordReset, unknown> => {
   return useMutation((payload: t.TRequestPasswordReset) =>
     dataService.requestPasswordReset(payload)
   );
 };
 
-export const useResetPasswordMutation = (): UseMutationResult<unknown> => {
+export const useResetPasswordMutation = (): UseMutationResult<
+  unknown,
+  unknown,
+  t.TResetPassword,
+  unknown
+> => {
   return useMutation((payload: t.TResetPassword) => dataService.resetPassword(payload));
 };
 

packages/data-provider/src/types.ts

@@ -16,6 +16,52 @@ export type TExample = {
   output: string;
 };
 
+export enum EModelEndpoint {
+  azureOpenAI = 'azureOpenAI',
+  openAI = 'openAI',
+  bingAI = 'bingAI',
+  chatGPT = 'chatGPT',
+  chatGPTBrowser = 'chatGPTBrowser',
+  google = 'google',
+  gptPlugins = 'gptPlugins',
+}
+
+export type TSubmission = {
+  clientId?: string;
+  context?: string;
+  conversationId?: string;
+  conversationSignature?: string;
+  current: boolean;
+  endpoint: EModelEndpoint;
+  invocationId: number;
+  isCreatedByUser: boolean;
+  jailbreak: boolean;
+  jailbreakConversationId?: string;
+  messageId: string;
+  overrideParentMessageId?: string | boolean;
+  parentMessageId?: string;
+  sender: string;
+  systemMessage?: string;
+  text: string;
+  toneStyle?: string;
+  model?: string;
+  promptPrefix?: string;
+  temperature?: number;
+  top_p?: number;
+  presence_penalty?: number;
+  frequence_penalty?: number;
+  conversation: TConversation;
+  message: TMessage;
+  endpointOption: TEndpointOption;
+};
+
+export type TEndpointOption = {
+  endpoint: EModelEndpoint;
+  model?: string;
+  promptPrefix?: string;
+  temperature?: number;
+}
+
 export type TPluginAuthConfig = {
   authField: string;
   label: string;
@@ -31,15 +77,11 @@ export type TPlugin = {
   authenticated: boolean;
 };
 
-export enum EModelEndpoint {
+export type TUpdateUserPlugins = {
-  azureOpenAI = 'azureOpenAI',
+  pluginKey: string;
-  openAI = 'openAI',
+  action: string;
-  bingAI = 'bingAI',
+  auth?: unknown;
-  chatGPT = 'chatGPT',
+};
-  chatGPTBrowser = 'chatGPTBrowser',
-  google = 'google',
-  gptPlugins = 'gptPlugins'
-}
 
 export type TConversation = {
   conversationId: string;
@@ -76,41 +118,6 @@ export type TConversation = {
   toneStyle?: string;
 };
 
-export type TSubmission = {
-  conversation?: TConversation;
-  message?: TMessage;
-  endpointOption?: object;
-  clientId?: string;
-  context?: string;
-  conversationId?: string;
-  conversationSignature?: string;
-  current: boolean;
-  endpoint: EModelEndpoint;
-  invocationId: number;
-  isCreatedByUser: boolean;
-  jailbreak: boolean;
-  jailbreakConversationId?: string;
-  messageId: string;
-  overrideParentMessageId?: string | boolean;
-  parentMessageId?: string;
-  sender: string;
-  systemMessage?: string;
-  text: string;
-  toneStyle?: string;
-  model?: string;
-  promptPrefix?: string;
-  temperature?: number;
-  top_p?: number;
-  presence_penalty?: number;
-  frequence_penalty?: number;
-};
-
-export type TUpdateUserPlugins = {
-  pluginKey: string;
-  action: string;
-  auth?: unknown;
-};
-
 export type TPreset = {
   title: string;
   endpoint: EModelEndpoint;
@@ -235,15 +242,25 @@ export type TResetPassword = {
   userId: string;
   token: string;
   password: string;
+  confirm_password?: string;
 };
 
 export type TStartupConfig = {
   appTitle: boolean;
   googleLoginEnabled: boolean;
   openidLoginEnabled: boolean;
+  githubLoginEnabled: boolean;
   openidLabel: string;
   openidImageUrl: string;
-  githubLoginEnabled: boolean;
   serverDomain: string;
   registrationEnabled: boolean;
 }
+
+export type TRefreshTokenResponse = {
+  token: string;
+  user: TUser;
+};
+
+export type TRequestPasswordResetResponse = {
+  link: string;
+};

packages/data-provider/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./types",
+    "module": "esnext",
+    "noImplicitAny": true,
+    "outDir": "./types",
+    "target": "es5",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es2017", "dom"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": "src",
+    "paths": {
+      "@src/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", "dist", "types"],
+  "include": ["src/**/*"]
+}