🔧 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
danny-avila · Jan 4, 2024 · 9864fc8 · 9864fc8
1 parent 42f2353
commit 9864fc8
Show file tree

Hide file tree

Showing 24 changed files with 275 additions and 99 deletions.
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
@@ -45,19 +45,23 @@ export default function ChatForm({ index = 0 }) {
         <div className="flex w-full items-center">
           <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(52,53,65,0.95)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
             <Images files={files} setFiles={setFiles} setFilesLoading={setFilesLoading} />
-            <Textarea
-              value={text}
-              disabled={requiresKey}
-              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
-              setText={setText}
-              submitMessage={submitMessage}
-              endpoint={endpoint}
-            />
+            {endpoint && (
+              <Textarea
+                value={text}
+                disabled={requiresKey}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
+                setText={setText}
+                submitMessage={submitMessage}
+                endpoint={endpoint}
+              />
+            )}
             <AttachFile endpoint={endpoint ?? ''} disabled={requiresKey} />
             {isSubmitting && showStopButton ? (
               <StopButton stop={handleStopGenerating} setShowStopButton={setShowStopButton} />
             ) : (
-              <SendButton text={text} disabled={filesLoading || isSubmitting || requiresKey} />
+              endpoint && (
+                <SendButton text={text} disabled={filesLoading || isSubmitting || requiresKey} />
+              )
             )}
           </div>
         </div>

diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
@@ -3,6 +3,7 @@ import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { EModelEndpoint } from 'librechat-data-provider';
 import { icons } from './Menus/Endpoints/Icons';
 import { useChatContext } from '~/Providers';
+import { getEndpointField } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
@@ -19,21 +20,24 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
     endpoint = EModelEndpoint.openAI;
   }
 
-  const iconKey = endpointsConfig?.[endpoint ?? '']?.type ? 'unknown' : endpoint ?? 'unknown';
+  const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
+  const iconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
+  const iconKey = endpointType ? 'unknown' : endpoint ?? 'unknown';
 
   return (
     <div className="relative h-full">
       <div className="absolute left-0 right-0">{Header && Header}</div>
       <div className="flex h-full flex-col items-center justify-center">
         <div className="mb-3 h-[72px] w-[72px]">
           <div className="gizmo-shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
-            {icons[iconKey]({
-              size: 41,
-              context: 'landing',
-              className: 'h-2/3 w-2/3',
-              endpoint: endpoint as EModelEndpoint | string,
-              iconURL: endpointsConfig?.[endpoint ?? ''].iconURL,
-            })}
+            {endpoint &&
+              icons[iconKey]({
+                size: 41,
+                context: 'landing',
+                className: 'h-2/3 w-2/3',
+                endpoint: endpoint,
+                iconURL: iconURL,
+              })}
           </div>
         </div>
         <div className="mb-5 text-2xl font-medium dark:text-white">

diff --git a/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx b/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')}
         />
       )}
     </>

diff --git a/client/src/components/Chat/Menus/Endpoints/MenuItems.tsx b/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}`}>

diff --git a/client/src/components/Chat/Menus/Presets/PresetItems.tsx b/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,
                       })}

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
@@ -5,12 +5,14 @@ import {
   useGetEndpointsQuery,
   useUpdateConversationMutation,
 } from 'librechat-data-provider/react-query';
+import { EModelEndpoint } from 'librechat-data-provider';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
 import { useConversations, useNavigateToConvo } from '~/hooks';
 import { MinimalIcon } from '~/components/Endpoints';
 import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
 import DeleteButton from './NewDeleteButton';
+import { getEndpointField } from '~/utils';
 import RenameButton from './RenameButton';
 import store from '~/store';
 
@@ -41,7 +43,7 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
     document.title = title;
 
     // set conversation to the new conversation
-    if (conversation?.endpoint === 'gptPlugins') {
+    if (conversation?.endpoint === EModelEndpoint.gptPlugins) {
       let lastSelectedTools = [];
       try {
         lastSelectedTools = JSON.parse(localStorage.getItem('lastSelectedTools') ?? '') ?? [];
@@ -90,7 +92,7 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
 
   const icon = MinimalIcon({
     size: 20,
-    iconURL: endpointsConfig?.[conversation.endpoint ?? '']?.iconURL,
+    iconURL: getEndpointField(endpointsConfig, conversation.endpoint, 'iconURL'),
     endpoint: conversation.endpoint,
     endpointType: conversation.endpointType,
     model: conversation.model,

diff --git a/client/src/components/Input/EndpointMenu/EndpointItem.tsx b/client/src/components/Input/EndpointMenu/EndpointItem.tsx
@@ -4,9 +4,9 @@ import { alternateName } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { DropdownMenuRadioItem } from '~/components';
 import { SetKeyDialog } from '../SetKeyDialog';
+import { cn, getEndpointField } from '~/utils';
 import { Icon } from '~/components/Endpoints';
 import { useLocalize } from '~/hooks';
-import { cn } from '~/utils';
 
 export default function ModelItem({
   endpoint,
@@ -29,7 +29,11 @@ export default function ModelItem({
     isCreatedByUser: false,
   });
 
-  const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
+  const userProvidesKey: boolean | null | undefined = getEndpointField(
+    endpointsConfig,
+    endpoint,
+    'userProvide',
+  );
   const localize = useLocalize();
 
   // regular model

diff --git a/client/src/components/Input/TextChat.tsx b/client/src/components/Input/TextChat.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useContext, useRef, useState, useCallback } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
-import SubmitButton from './SubmitButton';
+import React, { useEffect, useContext, useRef, useState, useCallback } from 'react';
 
-import OptionsBar from './OptionsBar';
 import { EndpointMenu } from './EndpointMenu';
+import SubmitButton from './SubmitButton';
+import OptionsBar from './OptionsBar';
 import Footer from './Footer';
+
 import { useMessageHandler, ThemeContext } from '~/hooks';
-import { cn } from '~/utils';
+import { cn, getEndpointField } from '~/utils';
 import store from '~/store';
 
 interface TextChatProps {
@@ -195,7 +196,7 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
                   isSubmitting={isSubmitting}
                   userProvidesKey={
                     conversation?.endpoint
-                      ? endpointsConfig?.[conversation.endpoint]?.userProvide
+                      ? getEndpointField(endpointsConfig, conversation.endpoint, 'userProvide')
                       : undefined
                   }
                   hasText={hasText}

diff --git a/client/src/hooks/Conversations/useGetSender.ts b/client/src/hooks/Conversations/useGetSender.ts
@@ -7,7 +7,7 @@ export default function useGetSender() {
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
   return useCallback(
     (endpointOption: TEndpointOption) => {
-      const { modelDisplayLabel } = endpointsConfig[endpointOption.endpoint ?? ''] ?? {};
+      const { modelDisplayLabel } = endpointsConfig?.[endpointOption.endpoint ?? ''] ?? {};
       return getResponseSender({ ...endpointOption, modelDisplayLabel });
     },
     [endpointsConfig],

diff --git a/client/src/hooks/Conversations/usePresets.ts b/client/src/hooks/Conversations/usePresets.ts
@@ -13,11 +13,11 @@ import {
 } from '~/data-provider';
 import { useChatContext, useToastContext } from '~/Providers';
 import useNavigateToConvo from '~/hooks/useNavigateToConvo';
+import { cleanupPreset, getEndpointField } from '~/utils';
 import useDefaultConvo from '~/hooks/useDefaultConvo';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { NotificationSeverity } from '~/common';
 import useLocalize from '~/hooks/useLocalize';
-import { cleanupPreset } from '~/utils';
 import store from '~/store';
 
 export default function usePresets() {
@@ -162,12 +162,13 @@ export default function usePresets() {
 
     const endpointsConfig = queryClient.getQueryData<TEndpointsConfig>([QueryKeys.endpoints]);
 
-    const currentEndpointType = endpointsConfig?.[endpoint ?? '']?.type ?? '';
-    const endpointType = endpointsConfig?.[newPreset?.endpoint ?? '']?.type;
+    const currentEndpointType = getEndpointField(endpointsConfig, endpoint, 'type');
+    const endpointType = getEndpointField(endpointsConfig, newPreset.endpoint, 'type');
 
     if (
-      (modularEndpoints.has(endpoint ?? '') || modularEndpoints.has(currentEndpointType)) &&
-      (modularEndpoints.has(newPreset?.endpoint ?? '') || modularEndpoints.has(endpointType)) &&
+      (modularEndpoints.has(endpoint ?? '') || modularEndpoints.has(currentEndpointType ?? '')) &&
+      (modularEndpoints.has(newPreset?.endpoint ?? '') ||
+        modularEndpoints.has(endpointType ?? '')) &&
       (endpoint === newPreset?.endpoint || modularChat)
     ) {
       const currentConvo = getDefaultConversation({

diff --git a/client/src/hooks/Input/useRequiresKey.ts b/client/src/hooks/Input/useRequiresKey.ts
@@ -1,12 +1,17 @@
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { useChatContext } from '~/Providers/ChatContext';
+import { getEndpointField } from '~/utils';
 import useUserKey from './useUserKey';
 
 export default function useRequiresKey() {
   const { conversation } = useChatContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
   const { endpoint } = conversation || {};
-  const userProvidesKey = endpointsConfig?.[endpoint ?? '']?.userProvide;
+  const userProvidesKey: boolean | null | undefined = getEndpointField(
+    endpointsConfig,
+    endpoint,
+    'userProvide',
+  );
   const { getExpiry } = useUserKey(endpoint ?? '');
   const expiryTime = getExpiry();
   const requiresKey = !expiryTime && userProvidesKey;

diff --git a/client/src/hooks/Input/useUserKey.ts b/client/src/hooks/Input/useUserKey.ts
@@ -8,7 +8,7 @@ import {
 
 const useUserKey = (endpoint: string) => {
   const { data: endpointsConfig } = useGetEndpointsQuery();
-  const config = endpointsConfig?.[endpoint];
+  const config = endpointsConfig?.[endpoint ?? ''];
 
   const { azure } = config ?? {};
   let keyName = endpoint;

diff --git a/client/src/hooks/Messages/useMessageHelpers.ts b/client/src/hooks/Messages/useMessageHelpers.ts
@@ -5,6 +5,7 @@ import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import Icon from '~/components/Endpoints/Icon';
 import { useChatContext } from '~/Providers';
+import { getEndpointField } from '~/utils';
 
 export default function useMessageHelpers(props: TMessageProps) {
   const latestText = useRef('');
@@ -53,7 +54,7 @@ export default function useMessageHelpers(props: TMessageProps) {
   const icon = Icon({
     ...conversation,
     ...(message as TMessage),
-    iconURL: endpointsConfig?.[conversation?.endpoint ?? '']?.iconURL,
+    iconURL: getEndpointField(endpointsConfig, conversation?.endpoint, 'iconURL'),
     model: message?.model ?? conversation?.model,
     size: 28.8,
   });

diff --git a/client/src/hooks/useChatHelpers.ts b/client/src/hooks/useChatHelpers.ts
@@ -161,7 +161,7 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
       conversation: conversation ?? {},
     });
 
-    const { modelDisplayLabel } = endpointsConfig[endpoint ?? ''] ?? {};
+    const { modelDisplayLabel } = endpointsConfig?.[endpoint ?? ''] ?? {};
     const endpointOption = {
       ...convo,
       endpoint,

diff --git a/client/src/hooks/useConversation.ts b/client/src/hooks/useConversation.ts
@@ -9,7 +9,7 @@ import type {
   TModelsConfig,
   TEndpointsConfig,
 } from 'librechat-data-provider';
-import { buildDefaultConvo, getDefaultEndpoint } from '~/utils';
+import { buildDefaultConvo, getDefaultEndpoint, getEndpointField } from '~/utils';
 import useOriginNavigate from './useOriginNavigate';
 import store from '~/store';
 
@@ -38,8 +38,9 @@ const useConversation = () => {
             endpointsConfig,
           });
 
-          if (!conversation.endpointType && endpointsConfig[defaultEndpoint]?.type) {
-            conversation.endpointType = endpointsConfig[defaultEndpoint]?.type;
+          const endpointType = getEndpointField(endpointsConfig, defaultEndpoint, 'type');
+          if (!conversation.endpointType && endpointType) {
+            conversation.endpointType = endpointType;
           }
 
           const models = modelsConfig?.[defaultEndpoint] ?? [];