🔧 fix: Improve Endpoint Handling and Address Edge Cases (#1486)

* fix(TEndpointsConfig): resolve property access issues with typesafe helper function

* fix: undefined or null endpoint edge case

* refactor(mapEndpoints -> endpoints): renamed module to be more general for endpoint handling, wrote unit tests, export all helpers

client/src/components/Chat/Menus/Endpoints/MenuItem.tsx

@@ -7,10 +7,10 @@ import type { FC } from 'react';
 import type { TPreset } from 'librechat-data-provider';
 import { useLocalize, useUserKey, useDefaultConvo } from '~/hooks';
 import { SetKeyDialog } from '~/components/Input/SetKeyDialog';
+import { cn, getEndpointField } from '~/utils';
 import { useChatContext } from '~/Providers';
-import store from '~/store';
 import { icons } from './Icons';
-import { cn } from '~/utils';
+import store from '~/store';
 
 type MenuItemProps = {
   title: string;
@@ -50,7 +50,7 @@ const MenuItem: FC<MenuItemProps> = ({
       const template: Partial<TPreset> = { endpoint: newEndpoint, conversationId: 'new' };
       const { conversationId } = conversation ?? {};
       if (modularChat && conversationId && conversationId !== 'new') {
-        template.endpointType = endpointsConfig?.[newEndpoint]?.type;
+        template.endpointType = getEndpointField(endpointsConfig, newEndpoint, 'type');
 
         const currentConvo = getDefaultConversation({
           /* target endpointType is necessary to avoid endpoint mixing */
@@ -66,7 +66,7 @@ const MenuItem: FC<MenuItemProps> = ({
     }
   };
 
-  const endpointType = endpointsConfig?.[endpoint ?? '']?.type;
+  const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
   const iconKey = endpointType ? 'unknown' : endpoint ?? 'unknown';
   const Icon = icons[iconKey];
 
@@ -88,7 +88,7 @@ const MenuItem: FC<MenuItemProps> = ({
                   endpoint={endpoint}
                   context={'menu-item'}
                   className="icon-md shrink-0 dark:text-white"
-                  iconURL={endpointsConfig?.[endpoint ?? '']?.iconURL}
+                  iconURL={getEndpointField(endpointsConfig, endpoint, 'iconURL')}
                 />
               }
               <div>
@@ -167,7 +167,7 @@ const MenuItem: FC<MenuItemProps> = ({
           endpoint={endpoint}
           endpointType={endpointType}
           onOpenChange={setDialogOpen}
-          userProvideURL={endpointsConfig?.[endpoint ?? '']?.userProvideURL}
+          userProvideURL={getEndpointField(endpointsConfig, endpoint, 'userProvideURL')}
         />
       )}
     </>

client/src/components/Chat/Menus/Endpoints/MenuItems.tsx

@@ -3,6 +3,7 @@ import { Close } from '@radix-ui/react-popover';
 import { EModelEndpoint, alternateName } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import MenuSeparator from '../UI/MenuSeparator';
+import { getEndpointField } from '~/utils';
 import MenuItem from './MenuItem';
 
 const EndpointItems: FC<{
@@ -19,7 +20,11 @@ const EndpointItems: FC<{
           } else if (!endpointsConfig?.[endpoint]) {
             return null;
           }
-          const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
+          const userProvidesKey: boolean | null | undefined = getEndpointField(
+            endpointsConfig,
+            endpoint,
+            'userProvide',
+          );
           return (
             <Close asChild key={`endpoint-${endpoint}`}>
               <div key={`endpoint-${endpoint}`}>

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

@@ -8,10 +8,10 @@ import type { TPreset } from 'librechat-data-provider';
 import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
 import { PinIcon, EditIcon, TrashIcon } from '~/components/svg';
 import DialogTemplate from '~/components/ui/DialogTemplate';
+import { getPresetTitle, getEndpointField } from '~/utils';
 import { Dialog, DialogTrigger } from '~/components/ui/';
 import { MenuSeparator, MenuItem } from '../UI';
 import { icons } from '../Endpoints/Icons';
-import { getPresetTitle } from '~/utils';
 import { useLocalize } from '~/hooks';
 import store from '~/store';
 
@@ -95,7 +95,7 @@ const PresetItems: FC<{
               return null;
             }
 
-            const iconKey = endpointsConfig?.[preset.endpoint ?? '']?.type
+            const iconKey = getEndpointField(endpointsConfig, preset.endpoint, 'type')
               ? 'unknown'
               : preset.endpoint ?? 'unknown';
 
@@ -111,7 +111,7 @@ const PresetItems: FC<{
                       onClick={() => onSelectPreset(preset)}
                       icon={icons[iconKey]({
                         context: 'menu-item',
-                        iconURL: endpointsConfig?.[preset.endpoint ?? ''].iconURL,
+                        iconURL: getEndpointField(endpointsConfig, preset.endpoint, 'iconURL'),
                         className: 'icon-md mr-1 dark:text-white',
                         endpoint: preset.endpoint,
                       })}