🐛 fix: Correct Model Parameters Merging and Panel UI (#5038)

* fix: Model Panel, watching wrong form field

* fix: Refactor agent initialization to merge model parameters correctly

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 model_parameters = Object.assign(
-  const _endpointOption = isInitialAgent
+    {},
-    ? endpointOption
+    agent.model_parameters ?? { model: agent.model },
-    : {
+    isInitialAgent === true ? endpointOption?.model_parameters : {},
-      model_parameters,
+  );
-    };
+  const _endpointOption =
+    isInitialAgent === true
+      ? Object.assign({}, endpointOption, { model_parameters })
+      : { model_parameters };
 
   const options = await getOptions({
     req,

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;

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 { control, setValue } = useFormContext<AgentForm>();
-  const modelParameters = watch('model_parameters');
+
-  const providerOption = watch('provider');
+  const model = useWatch({ control, name: 'model' });
-  const model = watch('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>

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',