style: Minor Beta UI fixes (#1197)

* style(Header): hide scrollbar but still allow side scroll/swipe/drag/touch

* feat: make menu buttons flexiblewith min-width, delete passed in classes, add pointer-cursor

* refactor: use conditional for visibility of plugins settings

* fix: make advanced settings popover appear over nav

* refactor(textarea): minor padding restyling, add max height

* style: make menuItem checkmark invisible instead of hidden so it takes up width space

* style: make presetsMenu trigger an icon button, remove max-width of presets except in mobile view

* style: improve advanced settings mobile styling

* feat: newchat and convo items toggle nav on small screens

* style: improve no presets view

* style: make sure toggle hover effect does not apply on smaller screens

client/src/components/Chat/Header.tsx

@@ -6,8 +6,8 @@ import HeaderOptions from './Input/HeaderOptions';
 export default function Header() {
   const { navVisible } = useOutletContext<ContextType>();
   return (
-    <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white">
+    <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white ">
-      <div className="flex items-center gap-2 overflow-x-auto">
+      <div className="hide-scrollbar flex items-center gap-2 overflow-x-auto">
         {!navVisible && <NewChat />}
         <EndpointsMenu />
         <HeaderOptions />

client/src/components/Chat/Input/OptionsPopover.tsx

@@ -28,15 +28,22 @@ export default function OptionsPopover({
     popoverRef,
     () => closePopover(),
     ['dialog-template-content', 'shadcn-button', 'advanced-settings'],
-    (target) => {
+    (_target) => {
-      const tagName = (target as Element)?.tagName;
+      const target = _target as Element;
+      if (
+        target?.id === 'presets-button' ||
+        (target?.parentNode instanceof Element && target.parentNode.id === 'presets-button')
+      ) {
+        return false;
+      }
+      const tagName = target?.tagName;
       return tagName === 'path' || tagName === 'svg' || tagName === 'circle';
     },
   );
 
   const localize = useLocalize();
   const cardStyle =
-    'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
+    'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white ';
 
   if (!visible) {
     return null;
@@ -45,7 +52,7 @@ export default function OptionsPopover({
   return (
     <Portal>
       <Content sideOffset={8} align="start" ref={popoverRef} asChild>
-        <div className="z-0 flex w-full flex-col items-center md:px-4">
+        <div className="z-[70] flex w-screen flex-col items-center md:w-full md:px-4">
           <div
             className={cn(
               cardStyle,

client/src/components/Chat/Input/Textarea.tsx

@@ -1,6 +1,7 @@
 import TextareaAutosize from 'react-textarea-autosize';
 import { supportsFiles } from '~/common';
 import { useTextarea } from '~/hooks';
+import { cn, removeFocusOutlines } from '~/utils';
 
 export default function Textarea({ value, onChange, setText, submitMessage, endpoint }) {
   const {
@@ -14,8 +15,10 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
   } = useTextarea({ setText, submitMessage });
 
   const className = supportsFiles[endpoint]
-    ? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
+    ? // ? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
-    : 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
+  // : 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
+    'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
+    : 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4';
 
   return (
     <TextareaAutosize
@@ -36,7 +39,7 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
       placeholder={placeholder}
       // className="m-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-12 gizmo:pl-10 md:pl-[46px] gizmo:md:pl-[55px]"
       // className="gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 gizmo:pl-10 gizmo:md:pl-[55px] m-0 h-auto max-h-52 w-full resize-none overflow-y-hidden border-0 bg-transparent py-[10px] pl-12 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pl-[46px] md:pr-12"
-      className={className}
+      className={cn(className, removeFocusOutlines, 'max-h-52')}
     />
   );
 }

client/src/components/Chat/Menus/NewChat.tsx

@@ -1,11 +1,16 @@
 import { useChatContext } from '~/Providers';
+import { useMediaQuery } from '~/hooks';
 
 export default function Header() {
   const { newConversation } = useChatContext();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  if (isSmallScreen) {
+    return null;
+  }
   return (
     <button
       type="button"
-      className=" btn btn-neutral btn-small border-token-border-medium relative ml-2 flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0"
+      className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
       onClick={() => newConversation()}
     >
       <div className="flex w-full items-center justify-center gap-2">

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -59,7 +59,20 @@ const PresetItems: FC<{
           </Dialog>
         </div>
       </div>
+      {presets && presets.length === 0 && (
+        <div
+          role="menuitem"
+          className="pointer-none group m-1.5 flex h-8 min-w-[170px] gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]"
+          tabIndex={-1}
+        >
+          <div className="flex h-full grow items-center justify-end gap-2">
+            {/* TODO: Create Preset from here */}
+            {localize('com_endpoint_no_presets')}
+          </div>
+        </div>
+      )}
       {presets &&
+        presets.length > 0 &&
         presets.map((preset, i) => {
           if (!preset) {
             return null;
@@ -70,8 +83,7 @@ const PresetItems: FC<{
               <div key={`preset-${preset.presetId}`}>
                 <MenuItem
                   key={`preset-item-${preset.presetId}`}
-                  className="w-[380px] md:min-w-[240px]"
+                  textClassName="text-xs max-w-[200px] truncate md:max-w-full "
-                  textClassName="text-xs max-w-[180px] md:max-w-[250px]"
                   title={getPresetTitle(preset)}
                   disableHover={true}
                   onClick={() => onSelectPreset(preset)}
@@ -83,7 +95,7 @@ const PresetItems: FC<{
                 >
                   <div className="flex h-full items-center justify-end gap-1">
                     <button
-                      className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
+                      className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -93,7 +105,7 @@ const PresetItems: FC<{
                       <TrashIcon />
                     </button>
                     <button
-                      className="m-0 h-full rounded-md px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:p-2 sm:group-hover:visible"
+                      className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                       onClick={(e) => {
                         e.preventDefault();
                         onChangePreset(preset);

client/src/components/Chat/Menus/PresetsMenu.tsx

@@ -1,18 +1,18 @@
 import type { FC } from 'react';
 import { useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { BookCopy } from 'lucide-react';
 import {
   modularEndpoints,
   useDeletePresetMutation,
   useCreatePresetMutation,
 } from 'librechat-data-provider';
 import type { TPreset } from 'librechat-data-provider';
-import { Content, Portal, Root } from '@radix-ui/react-popover';
+import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
 import { useLocalize, useDefaultConvo, useNavigateToConvo } from '~/hooks';
 import { EditPresetDialog, PresetItems } from './Presets';
+import { cleanupPreset, cn } from '~/utils';
 import { useChatContext } from '~/Providers';
-import TitleButton from './UI/TitleButton';
-import { cleanupPreset } from '~/utils';
 import store from '~/store';
 
 const PresetsMenu: FC = () => {
@@ -86,7 +86,20 @@ const PresetsMenu: FC = () => {
 
   return (
     <Root>
-      <TitleButton primaryText={'Presets'} />
+      <Trigger asChild>
+        <button
+          className={cn(
+            'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+            'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
+            'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
+          )}
+          id="presets-button"
+          data-testid="presets-button"
+          title={localize('com_ui_presets')}
+        >
+          <BookCopy className="icon-sm" id="presets-button" />
+        </button>
+      </Trigger>
       <Portal>
         <div
           style={{
@@ -100,10 +113,9 @@ const PresetsMenu: FC = () => {
         >
           <Content
             side="bottom"
-            align="start"
+            align="center"
-            className="mt-2 max-h-[495px] max-w-[370px] overflow-x-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white md:min-w-[400px]"
+            className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white md:min-w-[400px]"
           >
-            {presets.length ? (
             <PresetItems
               presets={presets}
               onSelectPreset={onSelectPreset}
@@ -112,17 +124,10 @@ const PresetsMenu: FC = () => {
               clearAllPresets={clearAllPresets}
               onFileSelected={onFileSelected}
             />
-            ) : (
-              <div className="dark:text-gray-300">{localize('com_endpoint_no_presets')}</div>
-            )}
           </Content>
         </div>
       </Portal>
-      <EditPresetDialog
+      <EditPresetDialog open={presetModalVisible} onOpenChange={setPresetModalVisible} />
-        open={presetModalVisible}
-        onOpenChange={setPresetModalVisible}
-        // preset={preset as TPreset}
-      />
     </Root>
   );
 };

client/src/components/Chat/Menus/UI/MenuItem.tsx

@@ -81,7 +81,7 @@ const MenuItem: FC<MenuItemProps> = ({
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className="icon-md block hidden gap-x-1 group-hover:flex "
+              className="icon-md invisible block gap-x-1 group-hover:visible group-hover:flex"
             >
               <path
                 fillRule="evenodd"

client/src/components/Conversations/Conversations.tsx

@@ -6,9 +6,11 @@ import { TConversation } from 'librechat-data-provider';
 export default function Conversations({
   conversations,
   moveToTop,
+  toggleNav,
 }: {
   conversations: TConversation[];
   moveToTop: () => void;
+  toggleNav: () => void;
 }) {
   const location = useLocation();
   const { pathname } = location;
@@ -24,6 +26,7 @@ export default function Conversations({
               key={convo.conversationId}
               conversation={convo}
               retainView={moveToTop}
+              toggleNav={toggleNav}
               i={i}
             />
           );

client/src/components/Conversations/Convo.tsx

@@ -13,7 +13,7 @@ import store from '~/store';
 
 type KeyEvent = KeyboardEvent<HTMLInputElement>;
 
-export default function Conversation({ conversation, retainView, i }) {
+export default function Conversation({ conversation, retainView, toggleNav, i }) {
   const { conversationId: currentConvoId } = useParams();
   const activeConvos = useRecoilValue(store.allConversationsSelector);
   const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
@@ -31,6 +31,8 @@ export default function Conversation({ conversation, retainView, i }) {
       return;
     }
 
+    toggleNav();
+
     // set document title
     document.title = title;
 

client/src/components/Endpoints/EndpointSettings.tsx

@@ -23,7 +23,9 @@ export default function Settings({
 
   if (OptionComponent) {
     return (
-      <div className={cn('h-[480px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
+      <div
+        className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}
+      >
         <OptionComponent
           conversation={conversation}
           setOption={setOption}
@@ -41,7 +43,7 @@ export default function Settings({
   }
 
   return (
-    <div className={cn('h-[480px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
+    <div className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
       <MultiViewComponent conversation={conversation} models={models} isPreset={isPreset} />
     </div>
   );

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

@@ -102,13 +102,14 @@ export default function PluginsByIndex({
           )}
         />
       </Button>
+      {visible && (
+        <>
           <Menu
             value={conversation.model ?? ''}
             setValue={setOption('model')}
             availableValues={models}
             showAbove={showAbove}
             showLabel={false}
-        className={cn(cardStyle, 'min-w-60 z-40 flex w-64 sm:w-48 ', visible ? '' : 'hidden')}
           />
           <PluginsMenu
             value={conversation.tools || []}
@@ -118,8 +119,9 @@ export default function PluginsByIndex({
             optionValueKey="pluginKey"
             showAbove={false}
             showLabel={false}
-        className={cn(cardStyle, 'min-w-60 z-50 w-64 sm:w-48 ', visible ? '' : 'hidden')}
           />
         </>
+      )}
+    </>
   );
 }

client/src/components/Nav/Nav.tsx

@@ -144,6 +144,12 @@ export default function Nav({ navVisible, setNavVisible }) {
     setNavVisible((prev: boolean) => !prev);
   };
 
+  const itemToggleNav = () => {
+    if (isSmallScreen) {
+      toggleNavVisible();
+    }
+  };
+
   const containerClasses =
     getConversationsQuery.isLoading && pageNumber === 1
       ? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
@@ -167,12 +173,12 @@ export default function Nav({ navVisible, setNavVisible }) {
               <div
                 className={cn(
                   'scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20 transition-opacity',
-                  isToggleHovering ? 'opacity-50' : 'opacity-100',
+                  isToggleHovering && !isSmallScreen ? 'opacity-50' : 'opacity-100',
                 )}
               >
                 <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
                   <div className="mb-1 flex h-11 flex-row">
-                    <NewChat />
+                    <NewChat toggleNav={itemToggleNav} />
                   </div>
                   {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
                   <div
@@ -187,7 +193,11 @@ export default function Nav({ navVisible, setNavVisible }) {
                       {(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
                         <Spinner />
                       ) : (
-                        <Conversations conversations={conversations} moveToTop={moveToTop} />
+                        <Conversations
+                          conversations={conversations}
+                          moveToTop={moveToTop}
+                          toggleNav={itemToggleNav}
+                        />
                       )}
                       <Pages
                         pageNumber={pageNumber}

client/src/components/Nav/NewChat.tsx

@@ -1,6 +1,6 @@
 import { useLocalize, useConversation, useNewConvo, useOriginNavigate } from '~/hooks';
 
-export default function NewChat() {
+export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
   const { newConversation } = useConversation();
   const { newConversation: newConvo } = useNewConvo();
   const navigate = useOriginNavigate();
@@ -10,6 +10,7 @@ export default function NewChat() {
     newConvo();
     newConversation();
     navigate('new');
+    toggleNav();
   };
 
   return (

client/src/components/ui/MultiSelectPop.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wrench, ArrowRight } from 'lucide-react';
+import { Wrench } from 'lucide-react';
 import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
 import type { TPlugin } from 'librechat-data-provider';
 import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
@@ -19,18 +19,15 @@ type SelectDropDownProps = {
   optionValueKey?: string;
 };
 
-function SelectDropDownPop({
+function MultiSelectPop({
   title: _title = 'Plugins',
   value,
-  // TODO: do we need disabled here?
-  disabled,
   setSelected,
   availableValues,
   showAbove = false,
   showLabel = true,
   containerClassName,
   isSelected,
-  className,
   optionValueKey = 'value',
 }: SelectDropDownProps) {
   // const localize = useLocalize();
@@ -46,8 +43,9 @@ function SelectDropDownPop({
             <button
               data-testid="select-dropdown-button"
               className={cn(
-                'relative flex 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 dark:bg-gray-800 sm:text-sm',
+                'relative flex 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 dark:bg-gray-800 sm:text-sm',
-                className ?? '',
+                'pointer-cursor font-normal',
+                'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
               )}
             >
               {' '}
@@ -85,7 +83,7 @@ function SelectDropDownPop({
                   </span>
                 </span>
               </span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <span className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <svg
                   stroke="currentColor"
                   fill="none"
@@ -107,7 +105,7 @@ function SelectDropDownPop({
           <Portal>
             <Content
               side="bottom"
-              align="start"
+              align="center"
               className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
             >
               {availableValues.map((option) => {
@@ -144,4 +142,4 @@ function SelectDropDownPop({
   );
 }
 
-export default SelectDropDownPop;
+export default MultiSelectPop;

client/src/components/ui/SelectDropDownPop.tsx

@@ -17,12 +17,6 @@ type SelectDropDownProps = {
   showLabel?: boolean;
   iconSide?: 'left' | 'right';
   renderOption?: () => React.ReactNode;
-  containerClassName?: string;
-  currentValueClass?: string;
-  optionsListClass?: string;
-  optionsClass?: string;
-  subContainerClassName?: string;
-  className?: string;
 };
 
 function SelectDropDownPop({
@@ -33,10 +27,6 @@ function SelectDropDownPop({
   showAbove = false,
   showLabel = true,
   emptyTitle = false,
-  containerClassName,
-  currentValueClass,
-  subContainerClassName,
-  className,
 }: SelectDropDownProps) {
   const localize = useLocalize();
   const transitionProps = { className: 'top-full mt-3' };
@@ -54,14 +44,13 @@ function SelectDropDownPop({
 
   return (
     <Root>
-      <div className={cn('flex items-center justify-center gap-2 ', containerClassName ?? '')}>
+      <div className={'flex items-center justify-center gap-2 '}>
-        <div className={cn('relative w-full', subContainerClassName ?? '')}>
+        <div className={'relative w-full'}>
           <Trigger asChild>
             <button
               data-testid="select-dropdown-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:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+                'pointer-cursor relative flex 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 ?? '',
                 'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
               )}
             >
@@ -69,12 +58,12 @@ function SelectDropDownPop({
               {showLabel && (
                 <label className="block text-xs text-gray-700 dark:text-gray-500 ">{title}</label>
               )}
-              <span className="inline-flex w-full truncate">
+              <span className="inline-flex w-full ">
                 <span
                   className={cn(
-                    'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
+                    'flex h-6 items-center gap-1  text-sm text-gray-900 dark:text-white',
                     !showLabel ? 'text-xs' : '',
-                    currentValueClass ?? '',
+                    'min-w-[75px] font-normal',
                   )}
                 >
                   {/* {!showLabel && !emptyTitle && (
@@ -83,7 +72,7 @@ function SelectDropDownPop({
                   {typeof value !== 'string' && value ? value?.label ?? '' : value ?? ''}
                 </span>
               </span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <span className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <svg
                   stroke="currentColor"
                   fill="none"

client/src/localization/languages/Eng.tsx

@@ -192,7 +192,7 @@ export default {
   com_endpoint_presets_clear_warning:
     'Are you sure you want to clear all presets? This is irreversible.',
   com_endpoint_not_implemented: 'Not implemented',
-  com_endpoint_no_presets: 'No preset yet',
+  com_endpoint_no_presets: 'No presets yet, use the settings button to create one',
   com_endpoint_not_available: 'No endpoint available',
   com_endpoint_view_options: 'View Options',
   com_endpoint_save_convo_as_preset: 'Save Conversation as Preset',

client/src/mobile.css

@@ -111,3 +111,13 @@
     visibility: hidden;
   }
 }
+
+.hide-scrollbar {
+  /* Hide scrollbar for Chrome, Safari, and Opera */
+  scrollbar-width: none; /* For Firefox */
+  -ms-overflow-style: none; /* For Internet Explorer and Edge */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* For WebKit browsers */
+}

client/src/style.css

@@ -1709,3 +1709,33 @@ html {
   height:234px;
   width:234px
 }
+
+.border-token-border-heavy {
+  border-color: #c5c5d2;
+  border-color: var(--border-heavy)
+}
+
+.border-token-border-light {
+  border-color: #ececf1;
+  border-color: var(--border-light)
+}
+
+.border-token-border-medium {
+  border-color: #d9d9e3;
+  border-color: var(--border-medium)
+}
+
+.border-token-surface-primary {
+  border-color: #fff;
+  border-color: var(--surface-primary)
+}
+
+.border-token-surface-secondary {
+  border-color: #f7f7f8;
+  border-color: var(--surface-secondary)
+}
+
+.border-token-surface-tertiary {
+  border-color: #ececf1;
+  border-color: var(--surface-tertiary)
+}