Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 11:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Danny Avila 2024-01-04 10:17:15 -05:00 • committed by GitHub
parent 42f2353509
commit 9864fc8700
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 275 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

22
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -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>

20
client/src/components/Chat/Landing.tsx
View file

@ -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,7 +20,9 @@ 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">
@ -27,13 +30,14 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
<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">

12
client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
View file

@ -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')}
/>
)}
</>

7
client/src/components/Chat/Menus/Endpoints/MenuItems.tsx
View file

@ -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}`}>

6
client/src/components/Chat/Menus/Presets/PresetItems.tsx
View file

@ -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,
})}

6
client/src/components/Conversations/Convo.tsx
View file

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

8
client/src/components/Input/EndpointMenu/EndpointItem.tsx
View file

@ -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

11
client/src/components/Input/TextChat.tsx
View file

@ -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}