🪨 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/SidePanel/Parameters/Panel.tsx

@@ -1,203 +1,46 @@
-import { ComponentTypes } from 'librechat-data-provider';
-import type {
-  DynamicSettingProps,
-  SettingDefinition,
-  SettingsConfiguration,
-} from 'librechat-data-provider';
-import { useSetIndexOptions } from '~/hooks';
+import React, { useMemo, useState, useCallback } from 'react';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import { getSettingsKeys, tPresetUpdateSchema } from 'librechat-data-provider';
+import type { TPreset } from 'librechat-data-provider';
+import { SaveAsPresetDialog } from '~/components/Endpoints';
+import { useSetIndexOptions, useLocalize } from '~/hooks';
+import { componentMapping } from './components';
 import { useChatContext } from '~/Providers';
-import {
-  DynamicDropdown,
-  DynamicCheckbox,
-  DynamicTextarea,
-  DynamicSlider,
-  DynamicSwitch,
-  DynamicInput,
-  DynamicTags,
-} from './';
-
-const settingsConfiguration: SettingsConfiguration = [
-  {
-    key: 'temperature',
-    label: 'com_endpoint_temperature',
-    labelCode: true,
-    description: 'com_endpoint_openai_temp',
-    descriptionCode: true,
-    type: 'number',
-    default: 1,
-    range: {
-      min: 0,
-      max: 2,
-      step: 0.01,
-    },
-    component: 'slider',
-    optionType: 'model',
-    // columnSpan: 2,
-    // includeInput: false,
-  },
-  {
-    key: 'top_p',
-    label: 'com_endpoint_top_p',
-    labelCode: true,
-    description: 'com_endpoint_openai_topp',
-    descriptionCode: true,
-    type: 'number',
-    default: 1,
-    range: {
-      min: 0,
-      max: 1,
-      step: 0.01,
-    },
-    component: 'slider',
-    optionType: 'model',
-  },
-  {
-    key: 'presence_penalty',
-    label: 'com_endpoint_presence_penalty',
-    labelCode: true,
-    description: 'com_endpoint_openai_pres',
-    descriptionCode: true,
-    type: 'number',
-    default: 0,
-    range: {
-      min: -2,
-      max: 2,
-      step: 0.01,
-    },
-    component: 'slider',
-    optionType: 'model',
-  },
-  {
-    key: 'frequency_penalty',
-    label: 'com_endpoint_frequency_penalty',
-    labelCode: true,
-    description: 'com_endpoint_openai_freq',
-    descriptionCode: true,
-    type: 'number',
-    default: 0,
-    range: {
-      min: -2,
-      max: 2,
-      step: 0.01,
-    },
-    component: 'slider',
-    optionType: 'model',
-  },
-  {
-    key: 'chatGptLabel',
-    label: 'com_endpoint_custom_name',
-    labelCode: true,
-    type: 'string',
-    default: '',
-    component: 'input',
-    placeholder: 'com_endpoint_openai_custom_name_placeholder',
-    placeholderCode: true,
-    optionType: 'conversation',
-  },
-  {
-    key: 'promptPrefix',
-    label: 'com_endpoint_prompt_prefix',
-    labelCode: true,
-    type: 'string',
-    default: '',
-    component: 'textarea',
-    placeholder: 'com_endpoint_openai_prompt_prefix_placeholder',
-    placeholderCode: true,
-    optionType: 'conversation',
-    // columnSpan: 2,
-  },
-  {
-    key: 'resendFiles',
-    label: 'com_endpoint_plug_resend_files',
-    labelCode: true,
-    description: 'com_endpoint_openai_resend_files',
-    descriptionCode: true,
-    type: 'boolean',
-    default: true,
-    component: 'switch',
-    optionType: 'conversation',
-    showDefault: false,
-    columnSpan: 2,
-  },
-  {
-    key: 'imageDetail',
-    label: 'com_endpoint_plug_image_detail',
-    labelCode: true,
-    description: 'com_endpoint_openai_detail',
-    descriptionCode: true,
-    type: 'enum',
-    default: 'auto',
-    options: ['low', 'auto', 'high'],
-    optionType: 'conversation',
-    component: 'slider',
-    showDefault: false,
-    columnSpan: 2,
-  },
-  {
-    key: 'stop',
-    label: 'com_endpoint_stop',
-    labelCode: true,
-    description: 'com_endpoint_openai_stop',
-    descriptionCode: true,
-    placeholder: 'com_endpoint_stop_placeholder',
-    placeholderCode: true,
-    type: 'array',
-    default: [],
-    component: 'tags',
-    optionType: 'conversation',
-    columnSpan: 4,
-    minTags: 1,
-    maxTags: 4,
-  },
-];
-
-const componentMapping: Record<ComponentTypes, React.ComponentType<DynamicSettingProps>> = {
-  [ComponentTypes.Slider]: DynamicSlider,
-  [ComponentTypes.Dropdown]: DynamicDropdown,
-  [ComponentTypes.Switch]: DynamicSwitch,
-  [ComponentTypes.Textarea]: DynamicTextarea,
-  [ComponentTypes.Input]: DynamicInput,
-  [ComponentTypes.Checkbox]: DynamicCheckbox,
-  [ComponentTypes.Tags]: DynamicTags,
-};
+import { settings } from './settings';
 
 export default function Parameters() {
+  const localize = useLocalize();
   const { conversation } = useChatContext();
   const { setOption } = useSetIndexOptions();
 
-  const temperature = settingsConfiguration.find(
-    (setting) => setting.key === 'temperature',
-  ) as SettingDefinition;
-  const TempComponent = componentMapping[temperature.component];
-  const { key: temp, default: tempDefault, ...tempSettings } = temperature;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [preset, setPreset] = useState<TPreset | null>(null);
 
-  const imageDetail = settingsConfiguration.find(
-    (setting) => setting.key === 'imageDetail',
-  ) as SettingDefinition;
-  const DetailComponent = componentMapping[imageDetail.component];
-  const { key: detail, default: detailDefault, ...detailSettings } = imageDetail;
+  const { data: endpointsConfig } = useGetEndpointsQuery();
 
-  const resendFiles = settingsConfiguration.find(
-    (setting) => setting.key === 'resendFiles',
-  ) as SettingDefinition;
-  const Switch = componentMapping[resendFiles.component];
-  const { key: switchKey, default: switchDefault, ...switchSettings } = resendFiles;
+  const bedrockRegions = useMemo(() => {
+    return endpointsConfig?.[conversation?.endpoint ?? '']?.availableRegions ?? [];
+  }, [endpointsConfig, conversation?.endpoint]);
 
-  const promptPrefix = settingsConfiguration.find(
-    (setting) => setting.key === 'promptPrefix',
-  ) as SettingDefinition;
-  const Textarea = componentMapping[promptPrefix.component];
-  const { key: textareaKey, default: textareaDefault, ...textareaSettings } = promptPrefix;
+  const parameters = useMemo(() => {
+    const [combinedKey, endpointKey] = getSettingsKeys(
+      conversation?.endpoint ?? '',
+      conversation?.model ?? '',
+    );
+    return settings[combinedKey] ?? settings[endpointKey];
+  }, [conversation]);
 
-  const chatGptLabel = settingsConfiguration.find(
-    (setting) => setting.key === 'chatGptLabel',
-  ) as SettingDefinition;
-  const Input = componentMapping[chatGptLabel.component];
-  const { key: inputKey, default: inputDefault, ...inputSettings } = chatGptLabel;
+  const openDialog = useCallback(() => {
+    const newPreset = tPresetUpdateSchema.parse({
+      ...conversation,
+    }) as TPreset;
+    setPreset(newPreset);
+    setIsDialogOpen(true);
+  }, [conversation]);
 
-  const stop = settingsConfiguration.find((setting) => setting.key === 'stop') as SettingDefinition;
-  const Tags = componentMapping[stop.component];
-  const { key: stopKey, default: stopDefault, ...stopSettings } = stop;
+  if (!parameters) {
+    return null;
+  }
 
   return (
     <div className="h-auto max-w-full overflow-x-hidden p-3">
@@ -205,49 +48,38 @@ export default function Parameters() {
         {' '}
         {/* This is the parent element containing all settings */}
         {/* Below is an example of an applied dynamic setting, each be contained by a div with the column span specified */}
-        <Input
-          settingKey={inputKey}
-          defaultValue={inputDefault}
-          {...inputSettings}
-          setOption={setOption}
-          conversation={conversation}
-        />
-        <Textarea
-          settingKey={textareaKey}
-          defaultValue={textareaDefault}
-          {...textareaSettings}
-          setOption={setOption}
-          conversation={conversation}
-        />
-        <TempComponent
-          settingKey={temp}
-          defaultValue={tempDefault}
-          {...tempSettings}
-          setOption={setOption}
-          conversation={conversation}
-        />
-        <Switch
-          settingKey={switchKey}
-          defaultValue={switchDefault}
-          {...switchSettings}
-          setOption={setOption}
-          conversation={conversation}
-        />
-        <DetailComponent
-          settingKey={detail}
-          defaultValue={detailDefault}
-          {...detailSettings}
-          setOption={setOption}
-          conversation={conversation}
-        />
-        <Tags
-          settingKey={stopKey}
-          defaultValue={stopDefault}
-          {...stopSettings}
-          setOption={setOption}
-          conversation={conversation}
-        />
+        {parameters.map((setting) => {
+          const Component = componentMapping[setting.component];
+          const { key, default: defaultValue, ...rest } = setting;
+
+          if (key === 'region' && bedrockRegions.length) {
+            rest.options = bedrockRegions;
+          }
+
+          return (
+            <Component
+              key={key}
+              settingKey={key}
+              defaultValue={defaultValue}
+              {...rest}
+              setOption={setOption}
+              conversation={conversation}
+            />
+          );
+        })}
       </div>
+      <div className="mt-6 flex justify-center">
+        <button
+          onClick={openDialog}
+          className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
+          type="button"
+        >
+          {localize('com_endpoint_save_as_preset')}
+        </button>
+      </div>
+      {preset && (
+        <SaveAsPresetDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} preset={preset} />
+      )}
     </div>
   );
 }