🔧 fix: Model Key Retrieval to Account for Bedrock Regions (#5029)

* 🔧 fix: model key retrieval logic to account for Bedrock region

* fix: edit preset dialog styling and potential max depth error with agents endpoint

client/src/components/Chat/Input/PopoverButtons.tsx

@@ -41,11 +41,11 @@ export default function PopoverButtons({
 
   const { model: _model, endpoint: _endpoint, endpointType } = conversation ?? {};
   const overrideEndpoint = overrideEndpointType ?? _overrideEndpoint;
-  const endpoint = overrideEndpoint ?? endpointType ?? _endpoint;
+  const endpoint = overrideEndpoint ?? endpointType ?? _endpoint ?? '';
   const model = overrideModel ?? _model;
 
-  const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
-  const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
+  const isGenerativeModel = model?.toLowerCase()?.includes('gemini') ?? false;
+  const isChatModel = (!isGenerativeModel && model?.toLowerCase()?.includes('chat')) ?? false;
   const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
 
   const { showExamples } = optionSettings;
@@ -53,14 +53,14 @@ export default function PopoverButtons({
 
   const triggerExamples = () => {
     setSettingsView(SettingsViews.default);
-    setOptionSettings((prev) => ({ ...prev, showExamples: !prev.showExamples }));
+    setOptionSettings((prev) => ({ ...prev, showExamples: !(prev.showExamples ?? false) }));
   };
 
   const endpointSpecificbuttons: { [key: string]: TPopoverButton[] } = {
     [EModelEndpoint.google]: [
       {
-        label: localize(showExamples ? 'com_hide_examples' : 'com_show_examples'),
-        buttonClass: isGenerativeModel || isTextModel ? 'disabled' : '',
+        label: localize(showExamples === true ? 'com_hide_examples' : 'com_show_examples'),
+        buttonClass: isGenerativeModel === true || isTextModel ? 'disabled' : '',
         handler: triggerExamples,
         icon: <MessagesSquared className={cn('mr-1 w-[14px]', iconClass)} />,
       },
@@ -109,7 +109,7 @@ export default function PopoverButtons({
     ],
   };
 
-  const endpointButtons = endpointSpecificbuttons[endpoint] ?? [];
+  const endpointButtons = (endpointSpecificbuttons[endpoint] as TPopoverButton[] | null) ?? [];
 
   const disabled = true;
 
@@ -123,7 +123,7 @@ export default function PopoverButtons({
             className={cn(
               button.buttonClass,
               'border border-gray-300/50 focus:ring-1 focus:ring-green-500/90 dark:border-gray-500/50 dark:focus:ring-green-500',
-              'ml-1 h-full bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
+              'ml-1 h-full bg-transparent px-2 py-1 text-xs font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
               buttonClass ?? '',
             )}
             onClick={button.handler}
@@ -133,6 +133,7 @@ export default function PopoverButtons({
           </Button>
         ))}
       </div>
+      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
       {disabled ? null : (
         <div className="flex w-[150px] items-center justify-end">
           {additionalButtons[settingsView].map((button, index) => (
@@ -142,7 +143,7 @@ export default function PopoverButtons({
               className={cn(
                 button.buttonClass,
                 'flex justify-center border border-gray-300/50 focus:ring-1 focus:ring-green-500/90 dark:border-gray-500/50 dark:focus:ring-green-500',
-                'h-full w-full bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
+                'h-full w-full bg-transparent px-2 py-1 text-xs font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
                 buttonClass ?? '',
               )}
               onClick={button.handler}

client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx

@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { QueryKeys } from 'librechat-data-provider';
+import { QueryKeys, isAgentsEndpoint } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { TModelsConfig, TEndpointsConfig } from 'librechat-data-provider';
 import {
@@ -37,15 +37,26 @@ const EditPresetDialog = ({
   });
   const [presetModalVisible, setPresetModalVisible] = useRecoilState(store.presetModalVisible);
 
-  const { data: availableEndpoints = [] } = useGetEndpointsQuery({
+  const { data: _endpoints = [] } = useGetEndpointsQuery({
     select: mapEndpoints,
   });
 
+  const availableEndpoints = useMemo(() => {
+    return _endpoints.filter((endpoint) => !isAgentsEndpoint(endpoint));
+  }, [_endpoints]);
+
   useEffect(() => {
     if (!preset) {
       return;
     }
-    if (!preset.endpoint) {
+
+    if (isAgentsEndpoint(preset.endpoint)) {
+      return;
+    }
+
+    const presetEndpoint = preset.endpoint ?? '';
+
+    if (!presetEndpoint) {
       return;
     }
 
@@ -54,7 +65,7 @@ const EditPresetDialog = ({
       return;
     }
 
-    const models = modelsConfig[preset.endpoint];
+    const models = modelsConfig[presetEndpoint] as string[] | undefined;
     if (!models) {
       return;
     }
@@ -75,7 +86,11 @@ const EditPresetDialog = ({
       return;
     }
 
-    if (preset.agentOptions?.model && !models.includes(preset.agentOptions.model)) {
+    if (
+      preset.agentOptions?.model != null &&
+      preset.agentOptions.model &&
+      !models.includes(preset.agentOptions.model)
+    ) {
       console.log('setting agent model', models[0]);
       setAgentOption('model')(models[0]);
     }
@@ -102,9 +117,12 @@ const EditPresetDialog = ({
     [queryClient, setOptions],
   );
 
-  const { endpoint, endpointType, model } = preset || {};
+  const { endpoint: _endpoint, endpointType, model } = preset || {};
+  const endpoint = _endpoint ?? '';
   if (!endpoint) {
     return null;
+  } else if (isAgentsEndpoint(endpoint)) {
+    return null;
   }
 
   return (
@@ -121,7 +139,7 @@ const EditPresetDialog = ({
         title={`${localize('com_ui_edit') + ' ' + localize('com_endpoint_preset')} - ${
           preset?.title
         }`}
-        className="h-full max-w-full overflow-y-auto pb-4 sm:w-[680px] sm:pb-0 md:h-[720px] md:w-[750px] md:overflow-y-hidden md:overflow-y-hidden lg:w-[950px] xl:h-[720px]"
+        className="h-full max-w-full overflow-y-auto pb-4 sm:w-[680px] sm:pb-0 md:h-[720px] md:w-[750px] md:overflow-y-hidden lg:w-[950px] xl:h-[720px]"
         main={
           <div className="flex w-full flex-col items-center gap-2 md:h-[550px] md:overflow-y-auto">
             <div className="grid w-full">
@@ -165,7 +183,7 @@ const EditPresetDialog = ({
                     {'ㅤ'}
                   </Label>
                   <PopoverButtons
-                    buttonClass="ml-0 w-full border border-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 h-[40px] justify-center mt-0"
+                    buttonClass="ml-0 w-full border border-border-medium p-2 h-[40px] justify-center mt-0"
                     iconClass="hidden lg:block w-4 "
                     endpoint={endpoint}
                     endpointType={endpointType}
@@ -174,13 +192,13 @@ const EditPresetDialog = ({
                 </div>
               </div>
             </div>
-            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-600" />
+            <div className="my-4 w-full border-t border-border-medium" />
             <div className="w-full p-0">
               <EndpointSettings
                 conversation={preset}
                 setOption={setOption}
                 isPreset={true}
-                className="h-full md:mb-4 md:h-[440px]"
+                className="h-full text-text-primary md:mb-4 md:h-[440px]"
               />
             </div>
           </div>

package-lock.json

@@ -36498,7 +36498,7 @@
     },
     "packages/data-provider": {
       "name": "librechat-data-provider",
-      "version": "0.7.64",
+      "version": "0.7.65",
       "license": "ISC",
       "dependencies": {
         "axios": "^1.7.7",

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.64",
+  "version": "0.7.65",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/schemas.ts

@@ -49,7 +49,11 @@ export enum BedrockProviders {
 
 export const getModelKey = (endpoint: EModelEndpoint | string, model: string) => {
   if (endpoint === EModelEndpoint.bedrock) {
-    return model.split('.')[0] as BedrockProviders;
+    const parts = model.split('.');
+    const provider = [parts[0], parts[1]].find((part) =>
+      Object.values(BedrockProviders).includes(part as BedrockProviders),
+    );
+    return (provider ?? parts[0]) as BedrockProviders;
   }
   return model;
 };