🪨 feat: AWS Bedrock support (#3935)

* feat: Add BedrockIcon component to SVG library

* feat: EModelEndpoint.bedrock

* feat: first pass, bedrock chat. note: AgentClient is returning `agents` as conversation.endpoint

* fix: declare endpoint in initialization step

* chore: Update @librechat/agents dependency to version 1.4.5

* feat: backend content aggregation for agents/bedrock

* feat: abort agent requests

* feat: AWS Bedrock icons

* WIP: agent provider schema parsing

* chore: Update EditIcon props type

* refactor(useGenerationsByLatest): make agents and bedrock editable

* refactor: non-assistant message content, parts

* fix: Bedrock response `sender`

* fix: use endpointOption.model_parameters not endpointOption.modelOptions

* fix: types for step handler

* refactor: Update Agents.ToolCallDelta type

* refactor: Remove unnecessary assignment of parentMessageId in AskController

* refactor: remove unnecessary assignment of parentMessageId (agent request handler)

* fix(bedrock/agents): message regeneration

* refactor: dynamic form elements using react-hook-form Controllers

* fix: agent icons/labels for messages

* fix: agent actions

* fix: use of new dynamic tags causing application crash

* refactor: dynamic settings touch-ups

* refactor: update Slider component to allow custom track class name

* refactor: update DynamicSlider component styles

* refactor: use Constants value for GLOBAL_PROJECT_NAME (enum)

* feat: agent share global methods/controllers

* fix: agents query

* fix: `getResponseModel`

* fix: share prompt a11y issue

* refactor: update SharePrompt dialog theme styles

* refactor: explicit typing for SharePrompt

* feat: add agent roles/permissions

* chore: update @librechat/agents dependency to version 1.4.7 for tool_call_ids edge case

* fix(Anthropic): messages.X.content.Y.tool_use.input: Input should be a valid dictionary

* fix: handle text parts with tool_call_ids and empty text

* fix: role initialization

* refactor: don't make instructions required

* refactor: improve typing of Text part

* fix: setShowStopButton for agents route

* chore: remove params for now

* fix: add streamBuffer and streamRate to help prevent 'Overloaded' errors from Anthropic API

* refactor: remove console.log statement in ContentRender component

* chore: typing, rename Context to Delete Button

* chore(DeleteButton): logging

* refactor(Action): make accessible

* style(Action): improve a11y again

* refactor: remove use/mention of mongoose sessions

* feat: first pass, sharing agents

* feat: visual indicator for global agent, remove author when serving to non-author

* wip: params

* chore: fix typing issues

* fix(schemas): typing

* refactor: improve accessibility of ListCard component and fix console React warning

* wip: reset templates for non-legacy new convos

* Revert "wip: params"

This reverts commit f8067e91d4.

* Revert "refactor: dynamic form elements using react-hook-form Controllers"

This reverts commit 2150c4815d.

* fix(Parameters): types and parameter effect update to only update local state to parameters

* refactor: optimize useDebouncedInput hook for better performance

* feat: first pass, anthropic bedrock params

* chore: paramEndpoints check for endpointType too

* fix: maxTokens to use coerceNumber.optional(),

* feat: extra chat model params

* chore: reduce code repetition

* refactor: improve preset title handling in SaveAsPresetDialog component

* refactor: improve preset handling in HeaderOptions component

* chore: improve typing, replace legacy dialog for SaveAsPresetDialog

* feat: save as preset from parameters panel

* fix: multi-search in select dropdown when using Option type

* refactor: update default showDefault value to false in Dynamic components

* feat: Bedrock presets settings

* chore: config, fix agents schema, update config version

* refactor: update AWS region variable name in bedrock options endpoint to BEDROCK_AWS_DEFAULT_REGION

* refactor: update baseEndpointSchema in config.ts to include baseURL property

* refactor: update createRun function to include req parameter and set streamRate based on provider

* feat: availableRegions via config

* refactor: remove unused demo agent controller file

* WIP: title

* Update @librechat/agents to version 1.5.0

* chore: addTitle.js to handle empty responseText

* feat: support images and titles

* feat: context token updates

* Refactor BaseClient test to use expect.objectContaining

* refactor: add model select, remove header options params, move side panel params below prompts

* chore: update models list, catch title error

* feat: model service for bedrock models (env)

* chore: Remove verbose debug log in AgentClient class following stream

* feat(bedrock): track token spend; fix: token rates, value key mapping for AWS models

* refactor: handle streamRate in `handleLLMNewToken` callback

* chore: AWS Bedrock example config in `.env.example`

* refactor: Rename bedrockMeta to bedrockGeneral in settings.ts and use for AI21 and Amazon Bedrock providers

* refactor: Update `.env.example` with AWS Bedrock model IDs URL and additional notes

* feat: titleModel support for bedrock

* refactor: Update `.env.example` with additional notes for AWS Bedrock model IDs

client/src/components/Endpoints/MessageEndpointIcon.tsx

@@ -1,4 +1,4 @@
-import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
+import { EModelEndpoint, isAssistantsEndpoint, alternateName } from 'librechat-data-provider';
 import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import { BrainCircuit } from 'lucide-react';
 import {
@@ -7,6 +7,7 @@ import {
   PaLMIcon,
   CodeyIcon,
   GeminiIcon,
+  BedrockIcon,
   AssistantIcon,
   AnthropicIcon,
   AzureMinimalIcon,
@@ -16,11 +17,31 @@ import {
 import { IconProps } from '~/common';
 import { cn } from '~/utils';
 
+function getGoogleIcon(model: string | null | undefined, size: number) {
+  if (model?.toLowerCase().includes('code') === true) {
+    return <CodeyIcon size={size * 0.75} />;
+  } else if (model?.toLowerCase().includes('gemini') === true) {
+    return <GeminiIcon size={size * 0.7} />;
+  } else {
+    return <PaLMIcon size={size * 0.7} />;
+  }
+}
+
+function getGoogleModelName(model: string | null | undefined) {
+  if (model?.toLowerCase().includes('code') === true) {
+    return 'Codey';
+  } else if (model?.toLowerCase().includes('gemini') === true) {
+    return 'Gemini';
+  } else {
+    return 'PaLM2';
+  }
+}
+
 const MessageEndpointIcon: React.FC<IconProps> = (props) => {
   const {
     error,
     button,
-    iconURL,
+    iconURL = '',
     endpoint,
     jailbreak,
     size = 30,
@@ -30,7 +51,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
   } = props;
 
   const assistantsIcon = {
-    icon: props.iconURL ? (
+    icon: iconURL ? (
       <div className="relative flex h-6 w-6 items-center justify-center">
         <div
           title={assistantName}
@@ -42,7 +63,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
         >
           <img
             className="shadow-stroke h-full w-full object-cover"
-            src={props.iconURL}
+            src={iconURL}
             alt={assistantName}
             style={{ height: '80', width: '80' }}
           />
@@ -59,7 +80,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
   };
 
   const agentsIcon = {
-    icon: props.iconURL ? (
+    icon: iconURL ? (
       <div className="relative flex h-6 w-6 items-center justify-center">
         <div
           title={agentName}
@@ -71,7 +92,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
         >
           <img
             className="shadow-stroke h-full w-full object-cover"
-            src={props.iconURL}
+            src={iconURL}
             alt={agentName}
             style={{ height: '80', width: '80' }}
           />
@@ -104,42 +125,38 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
     },
     [EModelEndpoint.gptPlugins]: {
       icon: <Plugin size={size * 0.7} />,
-      bg: `rgba(69, 89, 164, ${button ? 0.75 : 1})`,
+      bg: `rgba(69, 89, 164, ${button === true ? 0.75 : 1})`,
       name: 'Plugins',
     },
     [EModelEndpoint.google]: {
-      icon: model?.toLowerCase()?.includes('code') ? (
-        <CodeyIcon size={size * 0.75} />
-      ) : model?.toLowerCase()?.includes('gemini') ? (
-        <GeminiIcon size={size * 0.7} />
-      ) : (
-        <PaLMIcon size={size * 0.7} />
-      ),
-      name: model?.toLowerCase()?.includes('code')
-        ? 'Codey'
-        : model?.toLowerCase()?.includes('gemini')
-          ? 'Gemini'
-          : 'PaLM2',
+      icon: getGoogleIcon(model, size),
+      name: getGoogleModelName(model),
     },
     [EModelEndpoint.anthropic]: {
       icon: <AnthropicIcon size={size * 0.5555555555555556} />,
       bg: '#d09a74',
       name: 'Claude',
     },
+    [EModelEndpoint.bedrock]: {
+      icon: <BedrockIcon className="icon-xl text-white" />,
+      bg: '#268672',
+      name: alternateName[EModelEndpoint.bedrock],
+    },
     [EModelEndpoint.bingAI]: {
-      icon: jailbreak ? (
-        <img src="/assets/bingai-jb.png" alt="Bing Icon" />
-      ) : (
-        <img src="/assets/bingai.png" alt="Sydney Icon" />
-      ),
-      name: jailbreak ? 'Sydney' : 'BingAI',
+      icon:
+        jailbreak === true ? (
+          <img src="/assets/bingai-jb.png" alt="Bing Icon" />
+        ) : (
+          <img src="/assets/bingai.png" alt="Sydney Icon" />
+        ),
+      name: jailbreak === true ? 'Sydney' : 'BingAI',
     },
     [EModelEndpoint.chatGPTBrowser]: {
       icon: <GPTIcon size={size * 0.5555555555555556} />,
       bg:
         typeof model === 'string' && model.toLowerCase().includes('gpt-4')
           ? '#AB68FF'
-          : `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
+          : `rgba(0, 163, 255, ${button === true ? 0.75 : 1})`,
       name: 'ChatGPT',
     },
     [EModelEndpoint.custom]: {
@@ -152,7 +169,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
         <div className="h-6 w-6">
           <div className="overflow-hidden rounded-full">
             <UnknownIcon
-              iconURL={props.iconURL}
+              iconURL={iconURL}
               endpoint={endpoint ?? ''}
               className="h-full w-full object-contain"
               context="message"
@@ -185,11 +202,11 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
       }}
       className={cn(
         'relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white',
-        props.className || '',
+        props.className ?? '',
       )}
     >
       {icon}
-      {error && (
+      {error === true && (
         <span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
           !
         </span>

client/src/components/Endpoints/MinimalIcon.tsx

@@ -1,4 +1,4 @@
-import { EModelEndpoint } from 'librechat-data-provider';
+import { EModelEndpoint, alternateName } from 'librechat-data-provider';
 import { BrainCircuit } from 'lucide-react';
 import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import {
@@ -10,6 +10,7 @@ import {
   GoogleMinimalIcon,
   CustomMinimalIcon,
   AnthropicIcon,
+  BedrockIcon,
   Sparkles,
 } from '~/components/svg';
 import { cn } from '~/utils';
@@ -27,17 +28,17 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
   const endpointIcons = {
     [EModelEndpoint.azureOpenAI]: {
       icon: <AzureMinimalIcon className={iconClassName} />,
-      name: props.chatGptLabel || 'ChatGPT',
+      name: props.chatGptLabel ?? 'ChatGPT',
     },
     [EModelEndpoint.openAI]: {
       icon: <OpenAIMinimalIcon className={iconClassName} />,
-      name: props.chatGptLabel || 'ChatGPT',
+      name: props.chatGptLabel ?? 'ChatGPT',
     },
     [EModelEndpoint.gptPlugins]: { icon: <MinimalPlugin />, name: 'Plugins' },
-    [EModelEndpoint.google]: { icon: <GoogleMinimalIcon />, name: props.modelLabel || 'Google' },
+    [EModelEndpoint.google]: { icon: <GoogleMinimalIcon />, name: props.modelLabel ?? 'Google' },
     [EModelEndpoint.anthropic]: {
       icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />,
-      name: props.modelLabel || 'Claude',
+      name: props.modelLabel ?? 'Claude',
     },
     [EModelEndpoint.custom]: {
       icon: <CustomMinimalIcon />,
@@ -47,7 +48,14 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
     [EModelEndpoint.chatGPTBrowser]: { icon: <LightningIcon />, name: 'ChatGPT' },
     [EModelEndpoint.assistants]: { icon: <Sparkles className="icon-sm" />, name: 'Assistant' },
     [EModelEndpoint.azureAssistants]: { icon: <Sparkles className="icon-sm" />, name: 'Assistant' },
-    [EModelEndpoint.agents]: { icon: <BrainCircuit className="icon-sm" />, name: 'Agent' },
+    [EModelEndpoint.agents]: {
+      icon: <BrainCircuit className="icon-sm" />,
+      name: props.modelLabel ?? alternateName[EModelEndpoint.agents],
+    },
+    [EModelEndpoint.bedrock]: {
+      icon: <BedrockIcon className="icon-xl text-text-primary" />,
+      name: props.modelLabel ?? alternateName[EModelEndpoint.bedrock],
+    },
     default: {
       icon: (
         <UnknownIcon
@@ -76,11 +84,11 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
       }}
       className={cn(
         'relative flex items-center justify-center rounded-sm text-black dark:text-white',
-        props.className || '',
+        props.className ?? '',
       )}
     >
       {icon}
-      {error && (
+      {error === true && (
         <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-black dark:text-white">
           !
         </span>

client/src/components/Endpoints/SaveAsPresetDialog.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { useCreatePresetMutation } from 'librechat-data-provider/react-query';
 import type { TEditPresetProps } from '~/common';
 import { cn, removeFocusOutlines, cleanupPreset, defaultTextProps } from '~/utils/';
-import DialogTemplate from '~/components/ui/DialogTemplate';
-import { Dialog, Input, Label } from '~/components/ui/';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
+import { OGDialog, Input, Label } from '~/components/ui/';
 import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 
 const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) => {
-  const [title, setTitle] = useState<string>(preset.title || 'My Preset');
+  const [title, setTitle] = useState<string>(preset.title ?? 'My Preset');
   const createPresetMutation = useCreatePresetMutation();
   const { showToast } = useToastContext();
   const localize = useLocalize();
@@ -22,15 +22,15 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
       },
     });
 
-    const toastTitle = _preset.title
-      ? `\`${_preset.title}\``
-      : localize('com_endpoint_preset_title');
+    const toastTitle =
+      _preset.title ?? '' ? `\`${_preset.title}\`` : localize('com_endpoint_preset_title');
 
     createPresetMutation.mutate(_preset, {
       onSuccess: () => {
         showToast({
           message: `${toastTitle} ${localize('com_endpoint_preset_saved')}`,
         });
+        onOpenChange(false); // Close the dialog on success
       },
       onError: () => {
         showToast({
@@ -42,27 +42,38 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
   };
 
   useEffect(() => {
-    setTitle(preset.title || localize('com_endpoint_my_preset'));
+    setTitle(preset.title ?? localize('com_endpoint_my_preset'));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  // Handle Enter key press
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      submitPreset();
+    }
+  };
+
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTemplate
+    <OGDialog open={open} onOpenChange={onOpenChange}>
+      <OGDialogTemplate
         title={localize('com_endpoint_save_as_preset')}
-        className="w-11/12 sm:w-1/4"
+        className="z-[90] w-11/12 sm:w-1/4"
+        overlayClassName="z-[80]"
         showCloseButton={false}
         main={
           <div className="flex w-full flex-col items-center gap-2">
             <div className="grid w-full items-center gap-2">
-              <Label htmlFor="dialog-preset-name" className="text-left text-sm font-medium">
+              <Label htmlFor="preset-custom-name" className="text-left text-sm font-medium">
                 {localize('com_endpoint_preset_name')}
               </Label>
               <Input
                 id="preset-custom-name"
                 value={title || ''}
                 onChange={(e) => setTitle(e.target.value || '')}
-                placeholder="Set a custom name for this preset"
+                onKeyDown={handleKeyDown}
+                placeholder={localize('com_endpoint_preset_custom_name_placeholder')}
+                aria-label={localize('com_endpoint_preset_name')}
                 className={cn(
                   defaultTextProps,
                   'flex h-10 max-h-10 w-full resize-none border-gray-100 px-3 py-2 dark:border-gray-600',
@@ -78,7 +89,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
           selectText: localize('com_ui_save'),
         }}
       />
-    </Dialog>
+    </OGDialog>
   );
 };
 

client/src/components/Endpoints/Settings/Bedrock.tsx

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { getSettingsKeys } from 'librechat-data-provider';
+import type { SettingDefinition } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
+import { componentMapping } from '~/components/SidePanel/Parameters/components';
+import { presetSettings } from '~/components/SidePanel/Parameters/settings';
+
+export default function BedrockSettings({
+  conversation,
+  setOption,
+  models,
+  readonly,
+}: TModelSelectProps) {
+  const parameters = useMemo(() => {
+    const [combinedKey, endpointKey] = getSettingsKeys(
+      conversation?.endpoint ?? '',
+      conversation?.model ?? '',
+    );
+    return presetSettings[combinedKey] ?? presetSettings[endpointKey];
+  }, [conversation]);
+
+  if (!parameters) {
+    return null;
+  }
+
+  const renderComponent = (setting: SettingDefinition) => {
+    const Component = componentMapping[setting.component];
+    const { key, default: defaultValue, ...rest } = setting;
+
+    const props = {
+      key,
+      settingKey: key,
+      defaultValue,
+      ...rest,
+      readonly,
+      setOption,
+      conversation,
+    };
+
+    if (key === 'model') {
+      return <Component {...props} options={models} />;
+    }
+
+    return <Component {...props} />;
+  };
+
+  return (
+    <div className="h-auto max-w-full overflow-x-hidden p-3">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-5">
+        <div className="flex flex-col gap-6 md:col-span-3">
+          {parameters.col1.map(renderComponent)}
+        </div>
+        <div className="flex flex-col gap-6 md:col-span-2">
+          {parameters.col2.map(renderComponent)}
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/Endpoints/Settings/OpenAI.tsx

@@ -18,8 +18,7 @@ import {
   HoverCardTrigger,
 } from '~/components/ui';
 import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils';
-import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
-import { DynamicTags } from '~/components/SidePanel/Parameters';
+import { OptionHoverAlt, DynamicTags } from '~/components/SidePanel/Parameters';
 import { useLocalize, useDebouncedInput } from '~/hooks';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';

client/src/components/Endpoints/Settings/index.ts

@@ -1,5 +1,6 @@
 export { default as Advanced } from './Advanced';
 export { default as AssistantsSettings } from './Assistants';
+export { default as BedrockSettings } from './Bedrock';
 export { default as OpenAISettings } from './OpenAI';
 export { default as BingAISettings } from './BingAI';
 export { default as GoogleSettings } from './Google';

client/src/components/Endpoints/Settings/settings.ts

@@ -4,6 +4,7 @@ import type { TModelSelectProps } from '~/common';
 import { GoogleSettings, PluginSettings } from './MultiView';
 import AssistantsSettings from './Assistants';
 import AnthropicSettings from './Anthropic';
+import BedrockSettings from './Bedrock';
 import BingAISettings from './BingAI';
 import OpenAISettings from './OpenAI';
 
@@ -16,6 +17,7 @@ const settings: { [key: string]: FC<TModelSelectProps> } = {
   [EModelEndpoint.azureOpenAI]: OpenAISettings,
   [EModelEndpoint.bingAI]: BingAISettings,
   [EModelEndpoint.anthropic]: AnthropicSettings,
+  [EModelEndpoint.bedrock]: BedrockSettings,
 };
 
 export const getSettings = () => {