💫 feat: Config File & Custom Endpoints (#1474)

* WIP(backend/api): custom endpoint

* WIP(frontend/client): custom endpoint

* chore: adjust typedefs for configs

* refactor: use data-provider for cache keys and rename enums and custom endpoint for better clarity and compatibility

* feat: loadYaml utility

* refactor: rename back to  from  and proof-of-concept for creating schemas from user-defined defaults

* refactor: remove custom endpoint from default endpointsConfig as it will be exclusively managed by yaml config

* refactor(EndpointController): rename variables for clarity

* feat: initial load custom config

* feat(server/utils): add simple `isUserProvided` helper

* chore(types): update TConfig type

* refactor: remove custom endpoint handling from model services as will be handled by config, modularize fetching of models

* feat: loadCustomConfig, loadConfigEndpoints, loadConfigModels

* chore: reorganize server init imports, invoke loadCustomConfig

* refactor(loadConfigEndpoints/Models): return each custom endpoint as standalone endpoint

* refactor(Endpoint/ModelController): spread config values after default (temporary)

* chore(client): fix type issues

* WIP: first pass for multiple custom endpoints
- add endpointType to Conversation schema
- add update zod schemas for both convo/presets to allow non-EModelEndpoint value as endpoint (also using type assertion)
- use `endpointType` value as `endpoint` where mapping to type is necessary using this field
- use custom defined `endpoint` value and not type for mapping to modelsConfig
- misc: add return type to `getDefaultEndpoint`
- in `useNewConvo`, add the endpointType if it wasn't already added to conversation
- EndpointsMenu: use user-defined endpoint name as Title in menu
- TODO: custom icon via custom config, change unknown to robot icon

* refactor(parseConvo): pass args as an object and change where used accordingly; chore: comment out 'create schema' code

* chore: remove unused availableModels field in TConfig type

* refactor(parseCompactConvo): pass args as an object and change where used accordingly

* feat: chat through custom endpoint

* chore(message/convoSchemas): avoid saving empty arrays

* fix(BaseClient/saveMessageToDatabase): save endpointType

* refactor(ChatRoute): show Spinner if endpointsQuery or modelsQuery are still loading, which is apparent with slow fetching of models/remote config on first serve

* fix(useConversation): assign endpointType if it's missing

* fix(SaveAsPreset): pass real endpoint and endpointType when saving Preset)

* chore: recorganize types order for TConfig, add `iconURL`

* feat: custom endpoint icon support:
- use UnknownIcon in all icon contexts
- add mistral and openrouter as known endpoints, and add their icons
- iconURL support

* fix(presetSchema): move endpointType to default schema definitions shared between convoSchema and defaults

* refactor(Settings/OpenAI): remove legacy `isOpenAI` flag

* fix(OpenAIClient): do not invoke abortCompletion on completion error

* feat: add responseSender/label support for custom endpoints:
- use defaultModelLabel field in endpointOption
- add model defaults for custom endpoints in `getResponseSender`
- add `useGetSender` hook which uses EndpointsQuery to determine `defaultModelLabel`
- include defaultModelLabel from endpointConfig in custom endpoint client options
- pass `endpointType` to `getResponseSender`

* feat(OpenAIClient): use custom options from config file

* refactor: rename `defaultModelLabel` to `modelDisplayLabel`

* refactor(data-provider): separate concerns from `schemas` into `parsers`, `config`, and fix imports elsewhere

* feat: `iconURL` and extract environment variables from custom endpoint config values

* feat: custom config validation via zod schema, rename and move to `./projectRoot/librechat.yaml`

* docs: custom config docs and examples

* fix(OpenAIClient/mistral): mistral does not allow singular system message, also add `useChatCompletion` flag to use openai-node for title completions

* fix(custom/initializeClient): extract env var and use `isUserProvided` function

* Update librechat.example.yaml

* feat(InputWithLabel): add className props, and forwardRef

* fix(streamResponse): handle error edge case where either messages or convos query throws an error

* fix(useSSE): handle errorHandler edge cases where error response is and is not properly formatted from API, especially when a conversationId is not yet provided, which ensures stream is properly closed on error

* feat: user_provided keys for custom endpoints

* fix(config/endpointSchema): do not allow default endpoint values in custom endpoint `name`

* feat(loadConfigModels): extract env variables and optimize fetching models

* feat: support custom endpoint iconURL for messages and Nav

* feat(OpenAIClient): add/dropParams support

* docs: update docs with default params, add/dropParams, and notes to use config file instead of `OPENAI_REVERSE_PROXY`

* docs: update docs with additional notes

* feat(maxTokensMap): add mistral models (32k context)

* docs: update openrouter notes

* Update ai_setup.md

* docs(custom_config): add table of contents and fix note about custom name

* docs(custom_config): reorder ToC

* Update custom_config.md

* Add note about `max_tokens` field in custom_config.md

client/src/components/Input/SetKeyDialog/CustomEndpoint.tsx

@@ -0,0 +1,46 @@
+import { EModelEndpoint } from 'librechat-data-provider';
+import { useFormContext, Controller } from 'react-hook-form';
+import InputWithLabel from './InputWithLabel';
+
+const CustomEndpoint = ({
+  endpoint,
+  userProvideURL,
+}: {
+  endpoint: EModelEndpoint | string;
+  userProvideURL?: boolean | null;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <form className="flex-wrap">
+      <Controller
+        name="apiKey"
+        control={control}
+        render={({ field }) => (
+          <InputWithLabel
+            id="apiKey"
+            {...field}
+            label={`${endpoint} API Key`}
+            labelClassName="mb-1"
+            inputClassName="mb-2"
+          />
+        )}
+      />
+      {userProvideURL && (
+        <Controller
+          name="baseURL"
+          control={control}
+          render={({ field }) => (
+            <InputWithLabel
+              id="baseURL"
+              {...field}
+              label={`${endpoint} API URL`}
+              labelClassName="mb-1"
+            />
+          )}
+        />
+      )}
+    </form>
+  );
+};
+
+export default CustomEndpoint;

client/src/components/Input/SetKeyDialog/InputWithLabel.tsx

@@ -1,21 +1,26 @@
-import React, { ChangeEvent, FC } from 'react';
+import { forwardRef } from 'react';
+import type { ChangeEvent, FC, Ref } from 'react';
 import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
 import { Input, Label } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
 interface InputWithLabelProps {
+  id: string;
   value: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   label: string;
   subLabel?: string;
-  id: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  labelClassName?: string;
+  inputClassName?: string;
+  ref?: Ref<HTMLInputElement>;
 }
 
-const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLabel, id }) => {
+const InputWithLabel: FC<InputWithLabelProps> = forwardRef((props, ref) => {
+  const { id, value, label, subLabel, onChange, labelClassName = '', inputClassName = '' } = props;
   const localize = useLocalize();
   return (
     <>
-      <div className="flex flex-row">
+      <div className={cn('flex flex-row', labelClassName)}>
         <Label htmlFor={id} className="text-left text-sm font-medium">
           {label}
         </Label>
@@ -24,21 +29,22 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLa
         )}
         <br />
       </div>
-
       <Input
         id={id}
         data-testid={`input-${id}`}
         value={value ?? ''}
         onChange={onChange}
+        ref={ref}
         placeholder={`${localize('com_endpoint_config_value')} ${label}`}
         className={cn(
           defaultTextPropsLabel,
           'flex h-10 max-h-10 w-full resize-none px-3 py-2',
           removeFocusOutlines,
+          inputClassName,
         )}
       />
     </>
   );
-};
+});
 
 export default InputWithLabel;

client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
 import { EModelEndpoint, alternateName } from 'librechat-data-provider';
 import type { TDialogProps } from '~/common';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { RevokeKeysButton } from '~/components/Nav';
 import { Dialog, Dropdown } from '~/components/ui';
 import { useUserKey, useLocalize } from '~/hooks';
+import { useToastContext } from '~/Providers';
+import CustomConfig from './CustomEndpoint';
 import GoogleConfig from './GoogleConfig';
 import OpenAIConfig from './OpenAIConfig';
 import OtherConfig from './OtherConfig';
@@ -13,6 +16,7 @@ import HelpText from './HelpText';
 const endpointComponents = {
   [EModelEndpoint.google]: GoogleConfig,
   [EModelEndpoint.openAI]: OpenAIConfig,
+  [EModelEndpoint.custom]: CustomConfig,
   [EModelEndpoint.azureOpenAI]: OpenAIConfig,
   [EModelEndpoint.gptPlugins]: OpenAIConfig,
   default: OtherConfig,
@@ -31,12 +35,28 @@ const SetKeyDialog = ({
   open,
   onOpenChange,
   endpoint,
+  endpointType,
+  userProvideURL,
 }: Pick<TDialogProps, 'open' | 'onOpenChange'> & {
-  endpoint: string;
+  endpoint: EModelEndpoint | string;
+  endpointType?: EModelEndpoint;
+  userProvideURL?: boolean | null;
 }) => {
+  const methods = useForm({
+    defaultValues: {
+      apiKey: '',
+      baseURL: '',
+      // TODO: allow endpoint definitions from user
+      // name: '',
+      // TODO: add custom endpoint models defined by user
+      // models: '',
+    },
+  });
+
   const [userKey, setUserKey] = useState('');
   const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display);
   const { getExpiry, saveUserKey } = useUserKey(endpoint);
+  const { showToast } = useToastContext();
   const localize = useLocalize();
 
   const expirationOptions = Object.values(EXPIRY);
@@ -48,12 +68,42 @@ const SetKeyDialog = ({
   const submit = () => {
     const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel);
     const expiresAt = Date.now() + (selectedOption ? selectedOption.value : 0);
-    saveUserKey(userKey, expiresAt);
-    onOpenChange(false);
+
+    const saveKey = (key: string) => {
+      saveUserKey(key, expiresAt);
+      onOpenChange(false);
+    };
+
+    if (endpoint === EModelEndpoint.custom || endpointType === EModelEndpoint.custom) {
+      // TODO: handle other user provided options besides baseURL and apiKey
+      methods.handleSubmit((data) => {
+        const emptyValues = Object.keys(data).filter((key) => {
+          if (key === 'baseURL' && !userProvideURL) {
+            return false;
+          }
+          return data[key] === '';
+        });
+
+        if (emptyValues.length > 0) {
+          showToast({
+            message: 'The following fields are required: ' + emptyValues.join(', '),
+            status: 'error',
+          });
+          onOpenChange(true);
+        } else {
+          saveKey(JSON.stringify(data));
+          methods.reset();
+        }
+      })();
+      return;
+    }
+
+    saveKey(userKey);
     setUserKey('');
   };
 
-  const EndpointComponent = endpointComponents[endpoint] ?? endpointComponents['default'];
+  const EndpointComponent =
+    endpointComponents[endpointType ?? endpoint] ?? endpointComponents['default'];
   const expiryTime = getExpiry();
 
   return (
@@ -77,7 +127,14 @@ const SetKeyDialog = ({
               options={expirationOptions.map((option) => option.display)}
               width={185}
             />
-            <EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
+            <FormProvider {...methods}>
+              <EndpointComponent
+                userKey={userKey}
+                setUserKey={setUserKey}
+                endpoint={endpoint}
+                userProvideURL={userProvideURL}
+              />
+            </FormProvider>
             <HelpText endpoint={endpoint} />
           </div>
         }