feat (presets): hide/show endpoints, increase preset menu size in general and dynamic to endpoints (#320)

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import cleanupPreset from '~/utils/cleanupPreset.js';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import EditPresetDialog from '../../Endpoints/EditPresetDialog';
@@ -19,12 +19,14 @@ import {
 } from '../../ui/DropdownMenu.tsx';
 import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
 import DialogTemplate from '../../ui/DialogTemplate';
+import { cn } from '~/utils/';
 
 import store from '~/store';
 
 export default function NewConversationMenu() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [showPresets, setShowPresets] = useState(true);
+  const [showEndpoints, setShowEndpoints] = useState(true);
   const [presetModelVisible, setPresetModelVisible] = useState(false);
   const [preset, setPreset] = useState(false);
 
@@ -137,29 +139,34 @@ export default function NewConversationMenu() {
           className="min-w-[300px] dark:bg-gray-700"
           onCloseAutoFocus={(event) => event.preventDefault()}
         >
-          <DropdownMenuLabel className="dark:text-gray-300">Select an Endpoint</DropdownMenuLabel>
+          <DropdownMenuLabel
+            className="cursor-pointer dark:text-gray-300"
+            onClick={() => setShowEndpoints((prev) => !prev)}
+          >
+            {showEndpoints ? 'Hide ' : 'Show '} Endpoints
+          </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             value={endpoint}
             onValueChange={onSelectEndpoint}
             className="overflow-y-auto"
           >
-            {availableEndpoints.length ? (
+            {showEndpoints &&
+              (availableEndpoints.length ? (
                 <EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
               ) : (
                 <DropdownMenuLabel className="dark:text-gray-300">
                   No endpoint available.
                 </DropdownMenuLabel>
-            )}
+              ))}
           </DropdownMenuRadioGroup>
 
-          <div className="mt-6 w-full" />
+          <div className="mt-2 w-full" />
 
           <DropdownMenuLabel className="flex items-center dark:text-gray-300">
-            <span className="cursor-pointer" onClick={() => setShowPresets((prev) => !prev)}>
+            <span className="cursor-pointer mr-auto " onClick={() => setShowPresets((prev) => !prev)}>
               {showPresets ? 'Hide ' : 'Show '} Presets
             </span>
-            <div className="flex-1" />
             <FileUpload onFileSelected={onFileSelected} />
             <Dialog>
               <DialogTrigger asChild>
@@ -190,7 +197,7 @@ export default function NewConversationMenu() {
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             onValueChange={onSelectPreset}
-            className="max-h-[150px] overflow-y-auto"
+            className={cn('overflow-y-auto', showEndpoints ? 'max-h-[180px]' : 'max-h-[315px]')}
           >
             {showPresets &&
               (presets.length ? (