🐛 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
danny-avila · Dec 18, 2024 · f873587 · f873587
1 parent 000641c
commit f873587
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',