From 52fd59de0e1b5072a98bb37f6814fb01a5c3c92b Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 3 Sep 2024 15:24:32 -0400
Subject: [PATCH] refactor: dynamic settings touch-ups

---
 .../SidePanel/Parameters/DynamicSlider.tsx    | 39 +++++++++------
 .../SidePanel/Parameters/DynamicTags.tsx      |  4 ++
 .../components/SidePanel/Parameters/Panel.tsx | 50 +++++++++----------
 client/src/hooks/Nav/useSideNavLinks.ts       | 39 +++++++++------
 4 files changed, 76 insertions(+), 56 deletions(-)

diff --git a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
index 91b89e2bb4..2a4de63571 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
@@ -67,13 +67,13 @@ function DynamicSlider({
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-start gap-6',
+        'flex flex-col items-center justify-start gap-2',
         columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
       )}
     >
       <HoverCard openDelay={300}>
         <HoverCardTrigger className="grid w-full items-center gap-2">
-          <div className="flex justify-between">
+          <div className="flex w-full items-center justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-setting`}
               className="text-left text-sm font-medium"
@@ -120,24 +120,31 @@ function DynamicSlider({
                       )}
                     />
                   )}
-                  <Slider
-                    id={`${settingKey}-dynamic-setting-slider`}
-                    disabled={readonly}
-                    value={[
-                      isEnum ? enumToNumeric[field.value as string] ?? 0 : (field.value as number),
-                    ]}
-                    onValueChange={(value) =>
-                      field.onChange(isEnum ? valueToEnumOption[value[0]] : value[0])
-                    }
-                    max={max}
-                    min={range ? range.min : 0}
-                    step={range ? range.step ?? 1 : 1}
-                    className="flex h-4 w-full"
-                  />
                 </>
               )}
             />
           </div>
+          <Controller
+            name={settingKey}
+            control={control}
+            defaultValue={defaultValue as number | string}
+            render={({ field }) => (
+              <Slider
+                id={`${settingKey}-dynamic-setting-slider`}
+                disabled={readonly}
+                value={[
+                  isEnum ? enumToNumeric[field.value as string] ?? 0 : (field.value as number),
+                ]}
+                onValueChange={(value) =>
+                  field.onChange(isEnum ? valueToEnumOption[value[0]] : value[0])
+                }
+                max={max}
+                min={range ? range.min : 0}
+                step={range ? range.step ?? 1 : 1}
+                className="flex h-4 w-full"
+              />
+            )}
+          />
         </HoverCardTrigger>
         {description && (
           <OptionHover
diff --git a/client/src/components/SidePanel/Parameters/DynamicTags.tsx b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
index 57606372d0..887cf004f8 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTags.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
@@ -101,6 +101,10 @@ function DynamicTags({
                         const newTags = field.value.slice(0, -1);
                         field.onChange(newTags);
                       }
+                      if (e.key === 'Enter') {
+                        e.stopPropagation();
+                        e.preventDefault();
+                      }
                       if (e.key === 'Enter' && tagText) {
                         const newTags = [...field.value, tagText];
                         if (maxTags != null && newTags.length > maxTags) {
diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index e5c4d55fec..b118388b7f 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -13,6 +13,29 @@ import {
 } from './';
 
 const settingsConfiguration: SettingsConfiguration = [
+  {
+    key: 'chatGptLabel',
+    label: 'com_endpoint_custom_name',
+    labelCode: true,
+    type: 'string',
+    default: '',
+    component: 'input',
+    placeholder: 'com_endpoint_openai_custom_name_placeholder',
+    placeholderCode: true,
+    optionType: 'conversation',
+  },
+  {
+    key: 'promptPrefix',
+    label: 'com_endpoint_prompt_prefix',
+    labelCode: true,
+    type: 'string',
+    default: '',
+    component: 'textarea',
+    placeholder: 'com_endpoint_openai_prompt_prefix_placeholder',
+    placeholderCode: true,
+    optionType: 'conversation',
+    // columnSpan: 2,
+  },
   {
     key: 'temperature',
     label: 'com_endpoint_temperature',
@@ -28,7 +51,7 @@ const settingsConfiguration: SettingsConfiguration = [
     },
     component: 'slider',
     optionType: 'model',
-    // columnSpan: 2,
+    columnSpan: 4,
     // includeInput: false,
   },
   {
@@ -79,29 +102,6 @@ const settingsConfiguration: SettingsConfiguration = [
     component: 'slider',
     optionType: 'model',
   },
-  {
-    key: 'chatGptLabel',
-    label: 'com_endpoint_custom_name',
-    labelCode: true,
-    type: 'string',
-    default: '',
-    component: 'input',
-    placeholder: 'com_endpoint_openai_custom_name_placeholder',
-    placeholderCode: true,
-    optionType: 'conversation',
-  },
-  {
-    key: 'promptPrefix',
-    label: 'com_endpoint_prompt_prefix',
-    labelCode: true,
-    type: 'string',
-    default: '',
-    component: 'textarea',
-    placeholder: 'com_endpoint_openai_prompt_prefix_placeholder',
-    placeholderCode: true,
-    optionType: 'conversation',
-    // columnSpan: 2,
-  },
   {
     key: 'resendFiles',
     label: 'com_endpoint_plug_resend_files',
@@ -141,7 +141,7 @@ const settingsConfiguration: SettingsConfiguration = [
     default: [],
     component: 'tags',
     optionType: 'conversation',
-    columnSpan: 4,
+    // columnSpan: 4,
     minTags: 1,
     maxTags: 4,
   },
diff --git a/client/src/hooks/Nav/useSideNavLinks.ts b/client/src/hooks/Nav/useSideNavLinks.ts
index a8a09a3992..a6da9ed39e 100644
--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/client/src/hooks/Nav/useSideNavLinks.ts
@@ -1,15 +1,10 @@
 import { useMemo } from 'react';
+import { MessageSquareQuote, ArrowRightToLine, Settings2, Bookmark } from 'lucide-react';
 import {
-  ArrowRightToLine,
-  MessageSquareQuote,
-  Bookmark,
-  // Settings2,
-} from 'lucide-react';
-import {
-  EModelEndpoint,
   isAssistantsEndpoint,
   isAgentsEndpoint,
   PermissionTypes,
+  EModelEndpoint,
   Permissions,
 } from 'librechat-data-provider';
 import type { TConfig, TInterfaceConfig } from 'librechat-data-provider';
@@ -18,7 +13,7 @@ import BookmarkPanel from '~/components/SidePanel/Bookmarks/BookmarkPanel';
 import PanelSwitch from '~/components/SidePanel/Builder/PanelSwitch';
 import AgentPanelSwitch from '~/components/SidePanel/Agents/AgentPanelSwitch';
 import PromptsAccordion from '~/components/Prompts/PromptsAccordion';
-// import Parameters from '~/components/SidePanel/Parameters/Panel';
+import Parameters from '~/components/SidePanel/Parameters/Panel';
 import FilesPanel from '~/components/SidePanel/Files/Panel';
 import { Blocks, AttachmentIcon } from '~/components/svg';
 import { useHasAccess } from '~/hooks';
@@ -54,7 +49,7 @@ export default function useSideNavLinks({
       assistants &&
       assistants.disableBuilder !== true &&
       keyProvided &&
-      interfaceConfig.parameters
+      interfaceConfig.parameters === true
     ) {
       links.push({
         title: 'com_sidepanel_assistant_builder',
@@ -70,7 +65,7 @@ export default function useSideNavLinks({
       agents &&
       // agents.disableBuilder !== true &&
       keyProvided &&
-      interfaceConfig.parameters
+      interfaceConfig.parameters === true
     ) {
       links.push({
         title: 'com_sidepanel_agent_builder',
@@ -81,6 +76,19 @@ export default function useSideNavLinks({
       });
     }
 
+    if (
+      isAgentsEndpoint(endpoint) ||
+      (endpoint === EModelEndpoint.bedrock && interfaceConfig.parameters === true && keyProvided)
+    ) {
+      links.push({
+        title: 'com_sidepanel_parameters',
+        label: '',
+        icon: Settings2,
+        id: 'parameters',
+        Component: Parameters,
+      });
+    }
+
     if (hasAccessToPrompts) {
       links.push({
         title: 'com_ui_prompts',
@@ -119,13 +127,14 @@ export default function useSideNavLinks({
 
     return links;
   }, [
-    assistants,
-    agents,
-    keyProvided,
-    hidePanel,
-    endpoint,
     interfaceConfig.parameters,
+    keyProvided,
+    assistants,
+    endpoint,
+    agents,
     hasAccessToPrompts,
+    hasAccessToBookmarks,
+    hidePanel,
   ]);
 
   return Links;