From 92eee52c52e7d8e1c25127958da0da5ae14c4bf7 Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Thu, 18 May 2023 16:01:16 -0400
Subject: [PATCH] feat (presets): hide/show endpoints, increase preset menu
 size in general and dynamic to endpoints (#320)

---
 .../Input/NewConversationMenu/index.jsx       | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Input/NewConversationMenu/index.jsx b/client/src/components/Input/NewConversationMenu/index.jsx
index 2b1fae199d..7d06fe1ed8 100644
--- a/client/src/components/Input/NewConversationMenu/index.jsx
+++ b/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,35 +139,40 @@ 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 ? (
-              <EndpointItems endpoints={availableEndpoints} onSelect={onSelectEndpoint} />
-            ) : (
-              <DropdownMenuLabel className="dark:text-gray-300">
-                No endpoint available.
-              </DropdownMenuLabel>
-            )}
+            {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>
                 <label
                   htmlFor="file-upload"
-                  className=" mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+                  className="mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
                 >
                   {/* <Button
                   type="button"
@@ -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 ? (