mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-19 00:36:12 +01:00
🔧 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
This commit is contained in:
Danny Avila
GitHub
parent
42f2353509
commit
9864fc8700
24 changed files with 275 additions and 99 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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}`}>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue