From f873587e5f5e3a84d7819a50cda211f80c0e2e3d Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Wed, 18 Dec 2024 13:53:59 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Correct=20Model=20Paramet?=
 =?UTF-8?q?ers=20Merging=20and=20Panel=20UI=20(#5038)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Model Panel, watching wrong form field

* fix: Refactor agent initialization to merge model parameters correctly
---
 .../services/Endpoints/agents/initialize.js   | 15 ++++++----
 client/src/common/types.ts                    |  6 ++--
 .../SidePanel/Agents/ModelPanel.tsx           | 28 +++++++++++++++----
 client/src/localization/languages/Eng.ts      |  1 +
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/api/server/services/Endpoints/agents/initialize.js b/api/server/services/Endpoints/agents/initialize.js
index 084e3b7142..0e42145a59 100644
--- a/api/server/services/Endpoints/agents/initialize.js
+++ b/api/server/services/Endpoints/agents/initialize.js
@@ -97,12 +97,15 @@ const initializeAgentOptions = async ({
     agent.endpoint = provider.toLowerCase();
   }
 
-  const model_parameters = agent.model_parameters ?? { model: agent.model };
-  const _endpointOption = isInitialAgent
-    ? endpointOption
-    : {
-      model_parameters,
-    };
+  const model_parameters = Object.assign(
+    {},
+    agent.model_parameters ?? { model: agent.model },
+    isInitialAgent === true ? endpointOption?.model_parameters : {},
+  );
+  const _endpointOption =
+    isInitialAgent === true
+      ? Object.assign({}, endpointOption, { model_parameters })
+      : { model_parameters };
 
   const options = await getOptions({
     req,
diff --git a/client/src/common/types.ts b/client/src/common/types.ts
index b387527783..21ed1e5bc7 100644
--- a/client/src/common/types.ts
+++ b/client/src/common/types.ts
@@ -177,10 +177,10 @@ export type AgentPanelProps = {
 };
 
 export type AgentModelPanelProps = {
-  setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
-  providers: Option[];
-  models: Record<string, string[]>;
   agent_id?: string;
+  providers: Option[];
+  models: Record<string, string[] | undefined>;
+  setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
 };
 
 export type AugmentedColumnDef<TData, TValue> = ColumnDef<TData, TValue> & DataColumnMeta;
diff --git a/client/src/components/SidePanel/Agents/ModelPanel.tsx b/client/src/components/SidePanel/Agents/ModelPanel.tsx
index 745428122c..b4cd7a499d 100644
--- a/client/src/components/SidePanel/Agents/ModelPanel.tsx
+++ b/client/src/components/SidePanel/Agents/ModelPanel.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useEffect } from 'react';
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, RotateCcw } from 'lucide-react';
 import { getSettingsKeys } from 'librechat-data-provider';
-import { useFormContext, Controller } from 'react-hook-form';
+import { useFormContext, useWatch, Controller } from 'react-hook-form';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type * as t from 'librechat-data-provider';
 import type { AgentForm, AgentModelPanelProps, StringOption } from '~/common';
@@ -19,10 +19,11 @@ export default function Parameters({
 }: AgentModelPanelProps) {
   const localize = useLocalize();
 
-  const { control, setValue, watch } = useFormContext<AgentForm>();
-  const modelParameters = watch('model_parameters');
-  const providerOption = watch('provider');
-  const model = watch('model');
+  const { control, setValue } = useFormContext<AgentForm>();
+
+  const model = useWatch({ control, name: 'model' });
+  const providerOption = useWatch({ control, name: 'provider' });
+  const modelParameters = useWatch({ control, name: 'model_parameters' });
 
   const provider = useMemo(() => {
     const value =
@@ -71,6 +72,10 @@ export default function Parameters({
     setValue(`model_parameters.${optionKey}`, value);
   };
 
+  const handleResetParameters = () => {
+    setValue('model_parameters', {} as t.AgentModelParameters);
+  };
+
   return (
     <div className="scrollbar-gutter-stable h-full min-h-[50vh] overflow-auto pb-12 text-sm">
       <div className="model-panel relative flex flex-col items-center px-16 py-6 text-center">
@@ -209,6 +214,17 @@ export default function Parameters({
               );
             })}
           </div>
+          {/* Reset Parameters Button */}
+          <div className="mt-6 flex justify-center">
+            <button
+              type="button"
+              onClick={handleResetParameters}
+              className="btn btn-neutral flex w-full items-center justify-center gap-2 px-4 py-2 text-sm"
+            >
+              <RotateCcw className="h-4 w-4" />
+              {localize('com_ui_reset_var', localize('com_ui_model_parameters'))}
+            </button>
+          </div>
         </div>
       )}
     </div>
diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts
index 349b745c37..983850c71b 100644
--- a/client/src/localization/languages/Eng.ts
+++ b/client/src/localization/languages/Eng.ts
@@ -187,6 +187,7 @@ export default {
   com_ui_provider: 'Provider',
   com_ui_model: 'Model',
   com_ui_region: 'Region',
+  com_ui_reset_var: 'Reset {0}',
   com_ui_model_parameters: 'Model Parameters',
   com_ui_model_save_success: 'Model parameters saved successfully',
   com_ui_select_model: 'Select a model',