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

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(
-          cardStyle,
-          'min-w-60 z-40 flex w-64 transition duration-700 ease-in-out hover:shadow-md sm:w-48',
-          visible ? '' : 'hidden',
-        )}
+        className={cn(cardStyle, 'min-w-60 z-40 flex w-64 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(
-          cardStyle,
-          'min-w-60 z-50 w-64 transition duration-700 ease-in-out hover:shadow-md sm:w-48',
-          visible ? '' : 'hidden',
-        )}
+        className={cn(cardStyle, 'min-w-60 z-50 w-64 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>