refactor(types): use zod for better type safety, style(Messages): new scroll behavior, style(Buttons): match ChatGPT (#761)

* feat: add zod schemas for better type safety

* refactor(useSetOptions): remove 'as Type' in favor of zod schema

* fix: descendant console error, change <p> tag to <div> tag for content in PluginTooltip component

* style(MessagesView): instant/snappier scroll behavior matching official site

* fix(Messages): add null check for scrollableRef before accessing its properties in handleScroll and useEffect

* fix(messageSchema.js): change type of invocationId from string to number
fix(schemas.ts): make authenticated property in tPluginSchema optional
fix(schemas.ts): make isButton property in tPluginSchema optional
fix(schemas.ts): make messages property in tConversationSchema optional and change its type to array of strings
fix(schemas.ts): make systemMessage property in tConversationSchema nullable and optional
fix(schemas.ts): make modelLabel property in tConversationSchema nullable and optional
fix(schemas.ts): make chatGptLabel property in tConversationSchema nullable and optional
fix(schemas.ts): make promptPrefix property in tConversationSchema nullable and optional
fix(schemas.ts): make context property in tConversationSchema nullable and optional
fix(schemas.ts): make jailbreakConversationId property in tConversationSchema nullable and optional
fix(schemas.ts): make conversationSignature property in tConversationSchema nullable and optional
fix(schemas.ts): make clientId property

* refactor(types): replace main types with zod schemas and inferred types

* refactor(types/schemas): use schemas for better type safety of main types

* style(ModelSelect/Buttons): remove shadow and transition

* style(ModelSelect): button changes to closer match OpenAI

* style(ModelSelect): remove green rings which flicker

* style(scrollToBottom): add two separate scrolling functions

* fix(OptionsBar.tsx): handle onFocus and onBlur events to update opacityClass
fix(Messages/index.jsx): increase debounce time for scrollIntoView function

api/models/schema/messageSchema.js

@@ -25,7 +25,7 @@ const messageSchema = mongoose.Schema(
       type: String,
     },
     invocationId: {
-      type: String,
+      type: Number,
     },
     parentMessageId: {
       type: String,

client/src/components/Endpoints/EndpointOptionsDialog.tsx

@@ -1,7 +1,7 @@
 import exportFromJSON from 'export-from-json';
 import { useEffect, useState } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
-import { EditPresetProps, SetOption, TPreset } from 'librechat-data-provider';
+import { EditPresetProps, SetOption, tPresetSchema } from 'librechat-data-provider';
 import { Dialog, DialogButton } from '~/components/ui';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import SaveAsPresetDialog from './SaveAsPresetDialog';
@@ -21,12 +21,11 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }: E
   const setOption: SetOption = (param) => (newValue) => {
     const update = {};
     update[param] = newValue;
-    setPreset(
+    setPreset((prevState) =>
-      (prevState) =>
+      tPresetSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        ...update,
-          ...update,
+      }),
-        } as TPreset),
     );
   };
 

client/src/components/Endpoints/SaveAsPresetDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { useCreatePresetMutation, EditPresetProps, TPreset } from 'librechat-data-provider';
+import { useCreatePresetMutation, EditPresetProps } from 'librechat-data-provider';
 import { Dialog, Input, Label } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { cn, defaultTextPropsLabel, removeFocusOutlines, cleanupPreset } from '~/utils/';
@@ -20,7 +20,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: EditPresetProps) =>
         title,
       },
       endpointsConfig,
-    }) as TPreset;
+    });
     createPresetMutation.mutate(_preset);
   };
 

client/src/components/Endpoints/Settings/Examples.tsx

@@ -68,14 +68,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
       <div className="flex justify-center">
         <Button
           type="button"
-          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={removeExample}
         >
           <Minus className="w-[16px]" />
         </Button>
         <Button
           type="button"
-          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={addExample}
         >
           <Plus className="w-[16px]" />

client/src/components/Input/ModelSelect/Anthropic.tsx

@@ -12,7 +12,7 @@ export default function Anthropic({ conversation, setOption, models }: ModelSele
       showLabel={false}
       className={cn(
         cardStyle,
-        'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 transition duration-700 ease-in-out hover:cursor-pointer hover:bg-slate-50 hover:shadow-md focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
+        'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer',
       )}
     />
   );

client/src/components/Input/ModelSelect/BingAI.tsx

@@ -34,15 +34,15 @@ export default function BingAI({ conversation, setOption, models }: ModelSelectP
         showLabel={false}
         className={cn(
           cardStyle,
-          'z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 transition duration-700 ease-in-out hover:cursor-pointer hover:bg-slate-50 hover:shadow-md focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
+          'z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-600',
           showBingToneSetting ? 'hidden' : '',
         )}
       />
       <Tabs
-        value={toneStyle}
+        value={toneStyle ?? 'creative'}
         className={cn(
           cardStyle,
-          'z-50 flex h-[40px] flex-none items-center justify-center px-0 transition duration-700 ease-in-out hover:bg-slate-50 hover:shadow-md dark:hover:bg-gray-600',
+          'z-50 flex h-[40px] flex-none items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-700',
         )}
         onValueChange={(value) => setOption('toneStyle')(value.toLowerCase())}
       >

client/src/components/Input/ModelSelect/ChatGPT.tsx

@@ -20,7 +20,7 @@ export default function ChatGPT({ conversation, setOption, models }: ModelSelect
       showLabel={false}
       className={cn(
         cardStyle,
-        'min-w-48 z-50 flex h-[40px] w-60 flex-none items-center justify-center px-4 ring-0 transition duration-700 ease-in-out hover:cursor-pointer hover:bg-slate-50 hover:shadow-md focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
+        'min-w-48 z-50 flex h-[40px] w-60 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer',
       )}
     />
   );

client/src/components/Input/ModelSelect/Google.tsx

@@ -12,7 +12,7 @@ export default function Google({ conversation, setOption, models }: ModelSelectP
       showLabel={false}
       className={cn(
         cardStyle,
-        'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 transition duration-700 ease-in-out hover:cursor-pointer hover:bg-slate-50 hover:shadow-md focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
+        'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer',
       )}
     />
   );

client/src/components/Input/ModelSelect/OpenAI.tsx

@@ -12,7 +12,7 @@ export default function OpenAI({ conversation, setOption, models }: ModelSelectP
       showLabel={false}
       className={cn(
         cardStyle,
-        'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 transition duration-700 ease-in-out hover:cursor-pointer hover:bg-slate-50 hover:shadow-md focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600',
+        'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 hover:cursor-pointer',
       )}
     />
   );

client/src/components/Input/ModelSelect/Plugins.tsx

@@ -46,7 +46,7 @@ export default function Plugins({ conversation, setOption, models }: ModelSelect
     }
 
     const tools = [...user.plugins]
-      .map((el) => allPlugins.find((plugin) => plugin.pluginKey === el))
+      .map((el) => allPlugins.find((plugin: TPlugin) => plugin.pluginKey === el))
       .filter((el): el is TPlugin => el !== undefined);
 
     /* Filter Last Selected Tools */
@@ -71,7 +71,7 @@ export default function Plugins({ conversation, setOption, models }: ModelSelect
         type="button"
         className={cn(
           cardStyle,
-          'min-w-4 z-40 flex h-[40px] flex-none items-center justify-center px-3 transition duration-700 ease-in-out hover:bg-white hover:shadow-md focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-700',
+          'min-w-4 z-40 flex h-[40px] flex-none items-center justify-center px-3 hover:bg-white focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-700',
         )}
         onClick={() => setVisibility((prev) => !prev)}
       >
@@ -87,11 +87,7 @@ export default function Plugins({ conversation, setOption, models }: ModelSelect
         setValue={setOption('model')}
         availableValues={models}
         showAbove={true}
-        className={cn(
+        className={cn(cardStyle, 'min-w-60 z-40 flex w-64 sm:w-48', visible ? '' : 'hidden')}
-          cardStyle,
-          'min-w-60 z-40 flex w-64 transition duration-700 ease-in-out hover:shadow-md sm:w-48',
-          visible ? '' : 'hidden',
-        )}
       />
       <MultiSelectDropDown
         value={conversation.tools || []}
@@ -100,11 +96,7 @@ export default function Plugins({ conversation, setOption, models }: ModelSelect
         availableValues={availableTools}
         optionValueKey="pluginKey"
         showAbove={true}
-        className={cn(
+        className={cn(cardStyle, 'min-w-60 z-50 w-64 sm:w-48', visible ? '' : 'hidden')}
-          cardStyle,
-          'min-w-60 z-50 w-64 transition duration-700 ease-in-out hover:shadow-md sm:w-48',
-          visible ? '' : 'hidden',
-        )}
       />
     </>
   );

client/src/components/Input/OptionsBar.tsx

@@ -1,7 +1,7 @@
 import { Settings2 } from 'lucide-react';
 import { useState, useEffect, useMemo } from 'react';
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
-import { TPreset } from 'librechat-data-provider';
+import { tPresetSchema } from 'librechat-data-provider';
 import { PluginStoreDialog } from '~/components';
 import {
   EndpointSettings,
@@ -98,6 +98,21 @@ export default function OptionsBar() {
             }
             setOpacityClass('show');
           }}
+          onFocus={() => {
+            if (showPopover) {
+              return;
+            }
+            setOpacityClass('full-opacity');
+          }}
+          onBlur={() => {
+            if (showPopover) {
+              return;
+            }
+            if (!messagesTree || messagesTree.length === 0) {
+              return;
+            }
+            setOpacityClass('show');
+          }}
         >
           <ModelSelect conversation={conversation} setOption={setOption} />
           {!noSettings[endpoint] && (
@@ -105,7 +120,7 @@ export default function OptionsBar() {
               type="button"
               className={cn(
                 cardStyle,
-                'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 transition duration-700 ease-in-out hover:bg-slate-50 hover:shadow-md focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600',
+                'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
               )}
               onClick={triggerAdvancedMode}
             >
@@ -126,7 +141,7 @@ export default function OptionsBar() {
         <SaveAsPresetDialog
           open={saveAsDialogShow}
           onOpenChange={setSaveAsDialogShow}
-          preset={{ ...conversation } as TPreset}
+          preset={tPresetSchema.parse({ ...conversation })}
         />
         <PluginStoreDialog isOpen={showPluginStoreDialog} setIsOpen={setShowPluginStoreDialog} />
       </span>

client/src/components/Messages/index.jsx

@@ -28,6 +28,9 @@ export default function Messages({ isSearchView = false }) {
   const { screenshotTargetRef } = useScreenshot();
 
   const handleScroll = () => {
+    if (!scrollableRef.current) {
+      return;
+    }
     const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
     const diff = Math.abs(scrollHeight - scrollTop);
     const percent = Math.abs(clientHeight - diff) / clientHeight;
@@ -40,6 +43,9 @@ export default function Messages({ isSearchView = false }) {
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
+      if (!scrollableRef.current) {
+        return;
+      }
       const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
       const diff = Math.abs(scrollHeight - scrollTop);
       const percent = Math.abs(clientHeight - diff) / clientHeight;
@@ -58,6 +64,19 @@ export default function Messages({ isSearchView = false }) {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const scrollToBottom = useCallback(
+    throttle(
+      () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'instant' });
+        setShowScrollButton(false);
+      },
+      450,
+      { leading: true },
+    ),
+    [messagesEndRef],
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const scrollToBottomSmooth = useCallback(
     throttle(
       () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -77,7 +96,7 @@ export default function Messages({ isSearchView = false }) {
 
   const scrollHandler = (e) => {
     e.preventDefault();
-    scrollToBottom();
+    scrollToBottomSmooth();
   };
 
   return (

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

@@ -11,7 +11,7 @@ import {
   useUpdateUserPluginsMutation,
   TPlugin,
   TPluginAction,
-  TConversation,
+  tConversationSchema,
   TError,
 } from 'librechat-data-provider';
 import { useAuthContext } from '~/hooks/AuthContext';
@@ -69,12 +69,11 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
             return t.pluginKey !== plugin;
           });
           localStorage.setItem('lastSelectedTools', JSON.stringify(tools));
-          setConversation(
+          setConversation((prevState) =>
-            (prevState) =>
+            tConversationSchema.parse({
-              ({
+              ...prevState,
-                ...prevState,
+              tools,
-                tools,
+            }),
-              } as TConversation),
           );
         },
       },

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

@@ -11,9 +11,9 @@ function PluginTooltip({ content, position }: TPluginTooltipProps) {
     <HoverCardPortal>
       <HoverCardContent side={position} className="w-80 ">
         <div className="space-y-2">
-          <p className="text-sm text-gray-600 dark:text-gray-300">
+          <div className="text-sm text-gray-600 dark:text-gray-300">
             <div dangerouslySetInnerHTML={{ __html: content }} />
-          </p>
+          </div>
         </div>
       </HoverCardContent>
     </HoverCardPortal>

client/src/components/ui/Dropdown.jsx

@@ -12,7 +12,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
         <Listbox value={value} onChange={onChange}>
           <Listbox.Button
             className={cn(
-              'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+              'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-1 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
               className || '',
             )}
           >

client/src/components/ui/MultiSelectDropDown.tsx

@@ -43,7 +43,7 @@ function MultiSelectDropDown({
             <>
               <Listbox.Button
                 className={cn(
-                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
                   className ?? '',
                 )}
                 id={excludeIds[0]}

client/src/components/ui/SelectDropDown.tsx

@@ -41,7 +41,7 @@ function SelectDropDown({
             <>
               <Listbox.Button
                 className={cn(
-                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
                   className ?? '',
                 )}
               >

client/src/components/ui/Tabs.tsx

@@ -10,7 +10,7 @@ const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
+>(({ className = '', ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
@@ -25,7 +25,7 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+>(({ className = '', ...props }, ref) => (
   <TabsPrimitive.Trigger
     className={cn(
       'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5  text-sm font-medium text-gray-700 transition-all  disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100',
@@ -40,7 +40,7 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({ className = '', ...props }, ref) => (
   <TabsPrimitive.Content
     className={cn('mt-2 rounded-md border border-gray-200 p-6 dark:border-gray-700', className)}
     {...props}

client/src/hooks/usePresetOptions.ts

@@ -13,15 +13,14 @@ const usePresetOptions: UsePresetOptions = (_preset) => {
   const setOption: SetOption = (param) => (newValue) => {
     const update = {};
     update[param] = newValue;
-    setPreset(
+    setPreset((prevState) =>
-      (prevState) =>
+      cleanupPreset({
-        cleanupPreset({
+        preset: {
-          preset: {
+          ...prevState,
-            ...prevState,
+          ...update,
-            ...update,
+        },
-          },
+        endpointsConfig,
-          endpointsConfig,
+      }),
-        }) as TPreset,
     );
   };
 
@@ -32,15 +31,14 @@ const usePresetOptions: UsePresetOptions = (_preset) => {
     currentExample[type] = { content: newValue };
     current[i] = currentExample;
     update['examples'] = current;
-    setPreset(
+    setPreset((prevState) =>
-      (prevState) =>
+      cleanupPreset({
-        cleanupPreset({
+        preset: {
-          preset: {
+          ...prevState,
-            ...prevState,
+          ...update,
-            ...update,
+        },
-          },
+        endpointsConfig,
-          endpointsConfig,
+      }),
-        }) as TPreset,
     );
   };
 
@@ -49,15 +47,14 @@ const usePresetOptions: UsePresetOptions = (_preset) => {
     const current = preset?.examples?.slice() || [];
     current.push({ input: { content: '' }, output: { content: '' } });
     update['examples'] = current;
-    setPreset(
+    setPreset((prevState) =>
-      (prevState) =>
+      cleanupPreset({
-        cleanupPreset({
+        preset: {
-          preset: {
+          ...prevState,
-            ...prevState,
+          ...update,
-            ...update,
+        },
-          },
+        endpointsConfig,
-          endpointsConfig,
+      }),
-        }) as TPreset,
     );
   };
 
@@ -66,29 +63,27 @@ const usePresetOptions: UsePresetOptions = (_preset) => {
     const current = preset?.examples?.slice() || [];
     if (current.length <= 1) {
       update['examples'] = [{ input: { content: '' }, output: { content: '' } }];
-      setPreset(
+      setPreset((prevState) =>
-        (prevState) =>
-          cleanupPreset({
-            preset: {
-              ...prevState,
-              ...update,
-            },
-            endpointsConfig,
-          }) as TPreset,
-      );
-      return;
-    }
-    current.pop();
-    update['examples'] = current;
-    setPreset(
-      (prevState) =>
         cleanupPreset({
           preset: {
             ...prevState,
             ...update,
           },
           endpointsConfig,
-        }) as TPreset,
+        }),
+      );
+      return;
+    }
+    current.pop();
+    update['examples'] = current;
+    setPreset((prevState) =>
+      cleanupPreset({
+        preset: {
+          ...prevState,
+          ...update,
+        },
+        endpointsConfig,
+      }),
     );
   };
 
@@ -96,15 +91,14 @@ const usePresetOptions: UsePresetOptions = (_preset) => {
     const editablePreset = JSON.parse(JSON.stringify(_preset));
     const { agentOptions } = editablePreset;
     agentOptions[param] = newValue;
-    setPreset(
+    setPreset((prevState) =>
-      (prevState) =>
+      cleanupPreset({
-        cleanupPreset({
+        preset: {
-          preset: {
+          ...prevState,
-            ...prevState,
+          agentOptions,
-            agentOptions,
+        },
-          },
+        endpointsConfig,
-          endpointsConfig,
+      }),
-        }) as TPreset,
     );
   };
 

client/src/hooks/useSetOptions.ts

@@ -4,6 +4,7 @@ import {
   SetOption,
   SetExample,
   TPlugin,
+  tConversationSchema,
 } from 'librechat-data-provider';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import usePresetOptions from './usePresetOptions';
@@ -23,12 +24,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
   const setOption: SetOption = (param) => (newValue) => {
     const update = {};
     update[param] = newValue;
-    setConversation(
+    setConversation((prevState) =>
-      (prevState) =>
+      tConversationSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        ...update,
-          ...update,
+      }),
-        } as TConversation),
     );
   };
 
@@ -39,12 +39,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
     currentExample[type] = { content: newValue };
     current[i] = currentExample;
     update['examples'] = current;
-    setConversation(
+    setConversation((prevState) =>
-      (prevState) =>
+      tConversationSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        ...update,
-          ...update,
+      }),
-        } as TConversation),
     );
   };
 
@@ -53,12 +52,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
     const current = conversation?.examples?.slice() || [];
     current.push({ input: { content: '' }, output: { content: '' } });
     update['examples'] = current;
-    setConversation(
+    setConversation((prevState) =>
-      (prevState) =>
+      tConversationSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        ...update,
-          ...update,
+      }),
-        } as TConversation),
     );
   };
 
@@ -67,23 +65,21 @@ const useSetOptions: UseSetOptions = (preset = false) => {
     const current = conversation?.examples?.slice() || [];
     if (current.length <= 1) {
       update['examples'] = [{ input: { content: '' }, output: { content: '' } }];
-      setConversation(
+      setConversation((prevState) =>
-        (prevState) =>
+        tConversationSchema.parse({
-          ({
+          ...prevState,
-            ...prevState,
+          ...update,
-            ...update,
+        }),
-          } as TConversation),
       );
       return;
     }
     current.pop();
     update['examples'] = current;
-    setConversation(
+    setConversation((prevState) =>
-      (prevState) =>
+      tConversationSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        ...update,
-          ...update,
+      }),
-        } as TConversation),
     );
   };
 
@@ -101,12 +97,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
     const convo = JSON.parse(editableConvo);
     const { agentOptions } = convo;
     agentOptions[param] = newValue;
-    setConversation(
+    setConversation((prevState) =>
-      (prevState) =>
+      tConversationSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        agentOptions,
-          agentOptions,
+      }),
-        } as TConversation),
     );
   };
 
@@ -128,12 +123,11 @@ const useSetOptions: UseSetOptions = (preset = false) => {
     }
 
     localStorage.setItem('lastSelectedTools', JSON.stringify(update['tools']));
-    setConversation(
+    setConversation((prevState) =>
-      (prevState) =>
+      tConversationSchema.parse({
-        ({
+        ...prevState,
-          ...prevState,
+        ...update,
-          ...update,
+      }),
-        } as TConversation),
     );
   };
 

client/src/utils/cleanupPreset.ts

@@ -1,9 +1,9 @@
-import { CleanupPreset } from 'librechat-data-provider';
+import { CleanupPreset, TPreset } from 'librechat-data-provider';
 
-const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }: CleanupPreset) => {
+const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }: CleanupPreset): TPreset => {
   const { endpoint } = _preset;
 
-  let preset = {};
+  let preset = {} as TPreset;
   let models = [];
   if (endpoint) {
     models = endpointsConfig[endpoint]?.availableModels || [];

client/src/utils/index.ts

@@ -55,7 +55,7 @@ export const removeFocusOutlines =
   'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
 
 export const cardStyle =
-  'transition-colors rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+  'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-slate-50 dark:border-gray-600 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-slate-50 dark:data-[state=open]:bg-gray-700';
 
 export 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';

e2e/setup/authenticate.ts

@@ -15,6 +15,10 @@ async function authenticate(config: FullConfig, user: User) {
   const browser = await chromium.launch();
   const page = await browser.newPage();
   console.log('🤖: 🗝  authenticating user:', user.username);
+
+  if (!baseURL) {
+    throw new Error('🤖: baseURL is not defined');
+  }
   await page.goto(baseURL);
   await login(page, user);
   await page.locator('h1:has-text("LibreChat")').waitFor();

package-lock.json

@@ -26948,7 +26948,8 @@
       "license": "ISC",
       "dependencies": {
         "@tanstack/react-query": "^4.28.0",
-        "axios": "^1.3.4"
+        "axios": "^1.3.4",
+        "zod": "^3.21.4"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.21.5",
@@ -39519,7 +39520,8 @@
         "rimraf": "^5.0.1",
         "rollup": "^3.26.0",
         "rollup-plugin-typescript2": "^0.35.0",
-        "typescript": "^5.0.4"
+        "typescript": "^5.0.4",
+        "zod": "*"
       },
       "dependencies": {
         "brace-expansion": {

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -25,7 +25,8 @@
   "homepage": "https://github.com/danny-avila/LibreChat#readme",
   "dependencies": {
     "@tanstack/react-query": "^4.28.0",
-    "axios": "^1.3.4"
+    "axios": "^1.3.4",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.5",

packages/data-provider/src/createPayload.ts

@@ -1,8 +1,9 @@
-import type { TConversation, TSubmission, EModelEndpoint } from './types';
+import { tConversationSchema } from './schemas';
+import type { TSubmission, EModelEndpoint } from './types';
 
 export default function createPayload(submission: TSubmission) {
   const { conversation, message, endpointOption } = submission;
-  const { conversationId } = conversation as TConversation;
+  const { conversationId } = tConversationSchema.parse(conversation);
   const { endpoint } = endpointOption as { endpoint: EModelEndpoint };
 
   const endpointUrlMap = {

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

@@ -1,4 +1,5 @@
 import * as t from './types';
+import * as s from './schemas';
 import request from './request';
 import * as endpoints from './api-endpoints';
 
@@ -23,11 +24,11 @@ export function clearAllConversations(): Promise<unknown> {
   return request.post(endpoints.deleteConversation(), { arg: {} });
 }
 
-export function getMessagesByConvoId(id: string): Promise<t.TMessage[]> {
+export function getMessagesByConvoId(id: string): Promise<s.TMessage[]> {
   return request.get(endpoints.messages(id));
 }
 
-export function getConversationById(id: string): Promise<t.TConversation> {
+export function getConversationById(id: string): Promise<s.TConversation> {
   return request.get(endpoints.conversationById(id));
 }
 
@@ -37,19 +38,19 @@ export function updateConversation(
   return request.post(endpoints.updateConversation(), { arg: payload });
 }
 
-export function getPresets(): Promise<t.TPreset[]> {
+export function getPresets(): Promise<s.TPreset[]> {
   return request.get(endpoints.presets());
 }
 
-export function createPreset(payload: t.TPreset): Promise<t.TPreset[]> {
+export function createPreset(payload: s.TPreset): Promise<s.TPreset[]> {
   return request.post(endpoints.presets(), payload);
 }
 
-export function updatePreset(payload: t.TPreset): Promise<t.TPreset[]> {
+export function updatePreset(payload: s.TPreset): Promise<s.TPreset[]> {
   return request.post(endpoints.presets(), payload);
 }
 
-export function deletePreset(arg: t.TPreset | object): Promise<t.TPreset[]> {
+export function deletePreset(arg: s.TPreset | object): Promise<s.TPreset[]> {
   return request.post(endpoints.deletePreset(), arg);
 }
 
@@ -106,7 +107,7 @@ export const resetPassword = (payload: t.TResetPassword) => {
   return request.post(endpoints.resetPassword(), payload);
 };
 
-export const getAvailablePlugins = (): Promise<t.TPlugin[]> => {
+export const getAvailablePlugins = (): Promise<s.TPlugin[]> => {
   return request.get(endpoints.plugins());
 };
 

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

@@ -7,6 +7,7 @@ import {
   QueryObserverResult,
 } from '@tanstack/react-query';
 import * as t from './types';
+import * as s from './schemas';
 import * as dataService from './data-service';
 
 export enum QueryKeys {
@@ -47,9 +48,9 @@ export const useGetUserQuery = (
 
 export const useGetMessagesByConvoId = (
   id: string,
-  config?: UseQueryOptions<t.TMessage[]>,
+  config?: UseQueryOptions<s.TMessage[]>,
-): QueryObserverResult<t.TMessage[]> => {
+): QueryObserverResult<s.TMessage[]> => {
-  return useQuery<t.TMessage[]>(
+  return useQuery<s.TMessage[]>(
     [QueryKeys.messages, id],
     () => dataService.getMessagesByConvoId(id),
     {
@@ -63,9 +64,9 @@ export const useGetMessagesByConvoId = (
 
 export const useGetConversationByIdQuery = (
   id: string,
-  config?: UseQueryOptions<t.TConversation>,
+  config?: UseQueryOptions<s.TConversation>,
-): QueryObserverResult<t.TConversation> => {
+): QueryObserverResult<s.TConversation> => {
-  return useQuery<t.TConversation>(
+  return useQuery<s.TConversation>(
     [QueryKeys.conversation, id],
     () => dataService.getConversationById(id),
     {
@@ -79,10 +80,10 @@ export const useGetConversationByIdQuery = (
 
 //This isn't ideal because its just a query and we're using mutation, but it was the only way
 //to make it work with how the Chat component is structured
-export const useGetConversationByIdMutation = (id: string): UseMutationResult<t.TConversation> => {
+export const useGetConversationByIdMutation = (id: string): UseMutationResult<s.TConversation> => {
   const queryClient = useQueryClient();
   return useMutation(() => dataService.getConversationById(id), {
-    // onSuccess: (res: t.TConversation) => {
+    // onSuccess: (res: s.TConversation) => {
     onSuccess: () => {
       queryClient.invalidateQueries([QueryKeys.conversation, id]);
     },
@@ -174,13 +175,13 @@ export const useGetEndpointsQuery = (): QueryObserverResult<t.TEndpointsConfig>
 };
 
 export const useCreatePresetMutation = (): UseMutationResult<
-  t.TPreset[],
+  s.TPreset[],
   unknown,
-  t.TPreset,
+  s.TPreset,
   unknown
 > => {
   const queryClient = useQueryClient();
-  return useMutation((payload: t.TPreset) => dataService.createPreset(payload), {
+  return useMutation((payload: s.TPreset) => dataService.createPreset(payload), {
     onSuccess: () => {
       queryClient.invalidateQueries([QueryKeys.presets]);
     },
@@ -188,13 +189,13 @@ export const useCreatePresetMutation = (): UseMutationResult<
 };
 
 export const useUpdatePresetMutation = (): UseMutationResult<
-  t.TPreset[],
+  s.TPreset[],
   unknown,
-  t.TPreset,
+  s.TPreset,
   unknown
 > => {
   const queryClient = useQueryClient();
-  return useMutation((payload: t.TPreset) => dataService.updatePreset(payload), {
+  return useMutation((payload: s.TPreset) => dataService.updatePreset(payload), {
     onSuccess: () => {
       queryClient.invalidateQueries([QueryKeys.presets]);
     },
@@ -202,9 +203,9 @@ export const useUpdatePresetMutation = (): UseMutationResult<
 };
 
 export const useGetPresetsQuery = (
-  config?: UseQueryOptions<t.TPreset[]>,
+  config?: UseQueryOptions<s.TPreset[]>,
-): QueryObserverResult<t.TPreset[], unknown> => {
+): QueryObserverResult<s.TPreset[], unknown> => {
-  return useQuery<t.TPreset[]>([QueryKeys.presets], () => dataService.getPresets(), {
+  return useQuery<s.TPreset[]>([QueryKeys.presets], () => dataService.getPresets(), {
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
     refetchOnMount: false,
@@ -213,13 +214,13 @@ export const useGetPresetsQuery = (
 };
 
 export const useDeletePresetMutation = (): UseMutationResult<
-  t.TPreset[],
+  s.TPreset[],
   unknown,
-  t.TPreset | object,
+  s.TPreset | object,
   unknown
 > => {
   const queryClient = useQueryClient();
-  return useMutation((payload: t.TPreset | object) => dataService.deletePreset(payload), {
+  return useMutation((payload: s.TPreset | object) => dataService.deletePreset(payload), {
     onSuccess: () => {
       queryClient.invalidateQueries([QueryKeys.presets]);
     },
@@ -323,8 +324,8 @@ export const useResetPasswordMutation = (): UseMutationResult<
   return useMutation((payload: t.TResetPassword) => dataService.resetPassword(payload));
 };
 
-export const useAvailablePluginsQuery = (): QueryObserverResult<t.TPlugin[]> => {
+export const useAvailablePluginsQuery = (): QueryObserverResult<s.TPlugin[]> => {
-  return useQuery<t.TPlugin[]>(
+  return useQuery<s.TPlugin[]>(
     [QueryKeys.availablePlugins],
     () => dataService.getAvailablePlugins(),
     {

packages/data-provider/src/schemas.ts

@@ -0,0 +1,121 @@
+import { z } from 'zod';
+
+export enum EModelEndpoint {
+  azureOpenAI = 'azureOpenAI',
+  openAI = 'openAI',
+  bingAI = 'bingAI',
+  chatGPT = 'chatGPT',
+  chatGPTBrowser = 'chatGPTBrowser',
+  google = 'google',
+  gptPlugins = 'gptPlugins',
+  anthropic = 'anthropic',
+}
+
+export const eModelEndpointSchema = z.nativeEnum(EModelEndpoint);
+
+export const tMessageSchema = z.object({
+  messageId: z.string(),
+  conversationId: z.string(),
+  clientId: z.string(),
+  parentMessageId: z.string(),
+  sender: z.string(),
+  text: z.string(),
+  isCreatedByUser: z.boolean(),
+  error: z.boolean(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+});
+
+export type TMessage = z.infer<typeof tMessageSchema>;
+
+export const tPluginAuthConfigSchema = z.object({
+  authField: z.string(),
+  label: z.string(),
+  description: z.string(),
+});
+
+export type TPluginAuthConfig = z.infer<typeof tPluginAuthConfigSchema>;
+
+export const tPluginSchema = z.object({
+  name: z.string(),
+  pluginKey: z.string(),
+  description: z.string(),
+  icon: z.string(),
+  authConfig: z.array(tPluginAuthConfigSchema),
+  authenticated: z.boolean().optional(),
+  isButton: z.boolean().optional(),
+});
+
+export type TPlugin = z.infer<typeof tPluginSchema>;
+
+export const tExampleSchema = z.object({
+  input: z.object({
+    content: z.string(),
+  }),
+  output: z.object({
+    content: z.string(),
+  }),
+});
+
+export type TExample = z.infer<typeof tExampleSchema>;
+
+export const tAgentOptionsSchema = z.object({
+  agent: z.string(),
+  skipCompletion: z.boolean(),
+  model: z.string(),
+  temperature: z.number(),
+});
+
+export const tConversationSchema = z.object({
+  conversationId: z.string().nullable(),
+  title: z.string(),
+  user: z.string().optional(),
+  endpoint: eModelEndpointSchema.nullable(),
+  suggestions: z.array(z.string()).optional(),
+  messages: z.array(z.string()).optional(),
+  tools: z.array(tPluginSchema).optional(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+  systemMessage: z.string().nullable().optional(),
+  modelLabel: z.string().nullable().optional(),
+  examples: z.array(tExampleSchema).optional(),
+  chatGptLabel: z.string().nullable().optional(),
+  userLabel: z.string().optional(),
+  model: z.string().optional(),
+  promptPrefix: z.string().nullable().optional(),
+  temperature: z.number().optional(),
+  topP: z.number().optional(),
+  topK: z.number().optional(),
+  context: z.string().nullable().optional(),
+  top_p: z.number().optional(),
+  frequency_penalty: z.number().optional(),
+  presence_penalty: z.number().optional(),
+  jailbreak: z.boolean().optional(),
+  jailbreakConversationId: z.string().nullable().optional(),
+  conversationSignature: z.string().nullable().optional(),
+  parentMessageId: z.string().optional(),
+  clientId: z.string().nullable().optional(),
+  invocationId: z.number().nullable().optional(),
+  toneStyle: z.string().nullable().optional(),
+  maxOutputTokens: z.number().optional(),
+  agentOptions: tAgentOptionsSchema.nullable().optional(),
+});
+
+export type TConversation = z.infer<typeof tConversationSchema>;
+
+export const tPresetSchema = tConversationSchema
+  .omit({
+    conversationId: true,
+    createdAt: true,
+    updatedAt: true,
+    title: true,
+  })
+  .merge(
+    z.object({
+      conversationId: z.string().optional(),
+      presetId: z.string().nullable().optional(),
+      title: z.string().nullable().optional(),
+    }),
+  );
+
+export type TPreset = z.infer<typeof tPresetSchema>;

packages/data-provider/src/types.ts

@@ -1,42 +1,12 @@
 import * as React from 'react';
+import { TExample, TMessage, EModelEndpoint, TPlugin, TConversation, TPreset } from './schemas';
 
-export type TMessage = {
+export * from './schemas';
-  messageId: string;
-  conversationId: string;
-  clientId: string;
-  parentMessageId: string;
-  sender: string;
-  text: string;
-  isCreatedByUser: boolean;
-  error: boolean;
-  createdAt: string;
-  updatedAt: string;
-};
 
 export type TMessages = TMessage[];
 
 export type TMessagesAtom = TMessages | null;
 
-export type TExample = {
-  input: {
-    content: string;
-  };
-  output: {
-    content: string;
-  };
-};
-
-export enum EModelEndpoint {
-  azureOpenAI = 'azureOpenAI',
-  openAI = 'openAI',
-  bingAI = 'bingAI',
-  chatGPT = 'chatGPT',
-  chatGPTBrowser = 'chatGPTBrowser',
-  google = 'google',
-  gptPlugins = 'gptPlugins',
-  anthropic = 'anthropic',
-}
-
 export type TSubmission = {
   clientId?: string;
   context?: string;
@@ -73,22 +43,6 @@ export type TEndpointOption = {
   temperature?: number;
 };
 
-export type TPluginAuthConfig = {
-  authField: string;
-  label: string;
-  description: string;
-};
-
-export type TPlugin = {
-  name: string;
-  pluginKey: string;
-  description: string;
-  icon: string;
-  authConfig: TPluginAuthConfig[];
-  authenticated: boolean;
-  isButton?: boolean;
-};
-
 export type TPluginAction = {
   pluginKey: string;
   action: 'install' | 'uninstall';
@@ -105,91 +59,6 @@ export type TUpdateUserPlugins = {
   auth?: unknown;
 };
 
-export type TAgentOptions = {
-  agent: string;
-  skipCompletion: boolean;
-  model: string;
-  temperature: number;
-};
-
-export type TConversation = {
-  conversationId: string | null;
-  title: string;
-  user?: string;
-  endpoint: EModelEndpoint | null;
-  suggestions?: string[];
-  messages?: TMessage[];
-  tools?: TPlugin[];
-  createdAt: string;
-  updatedAt: string;
-  // google only
-  systemMessage?: string;
-  modelLabel?: string;
-  examples?: TExample[];
-  // for azureOpenAI, openAI only
-  chatGptLabel?: string;
-  userLabel?: string;
-  model?: string;
-  promptPrefix?: string;
-  temperature?: number;
-  topP?: number;
-  topK?: number;
-  // bing and google
-  context?: string;
-  top_p?: number;
-  frequency_penalty?: number;
-  presence_penalty?: number;
-  // for bingAI only
-  jailbreak?: boolean;
-  jailbreakConversationId?: string;
-  conversationSignature?: string;
-  parentMessageId?: string;
-  clientId?: string;
-  invocationId?: string;
-  toneStyle?: string;
-  maxOutputTokens?: number;
-  // plugins only
-  agentOptions?: TAgentOptions;
-};
-
-export type TPreset = {
-  title: string;
-  conversationId?: string;
-  endpoint: EModelEndpoint | null;
-  conversationSignature?: string;
-  createdAt?: string;
-  updatedAt?: string;
-  presetId?: string;
-  tools?: TPlugin[];
-  user?: string;
-  modelLabel?: string;
-  maxOutputTokens?: number;
-  topP?: number;
-  topK?: number;
-  context?: string;
-  systemMessage?: string;
-  // for azureOpenAI, openAI only
-  chatGptLabel?: string;
-  frequence_penalty?: number;
-  model?: string;
-  presence_penalty?: number;
-  frequency_penalty?: number;
-  promptPrefix?: string;
-  temperature?: number;
-  top_p?: number;
-  //for BingAI
-  clientId?: string;
-  invocationId?: number;
-  jailbreak?: boolean;
-  jailbreakPresetId?: string;
-  presetSignature?: string;
-  toneStyle?: string;
-  // plugins only
-  agentOptions?: TAgentOptions;
-  // google only
-  examples?: TExample[];
-};
-
 export type TOptionSettings = {
   showExamples?: boolean;
   isCodeChat?: boolean;