🪨 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/Prompts/Groups/ListCard.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
 
 export default function ListCard({
@@ -10,19 +11,33 @@ export default function ListCard({
   category: string;
   name: string;
   snippet: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
   children?: React.ReactNode;
 }) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event as unknown as React.MouseEvent<HTMLDivElement | HTMLButtonElement>);
+    }
+  };
+
   return (
-    <button
+    <div
       onClick={onClick}
+      onKeyDown={handleKeyDown}
       className="relative my-2 flex w-full cursor-pointer flex-col gap-2 rounded-2xl border border-border-light px-3 pb-4 pt-3 text-start
       align-top text-[15px] shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-all duration-300 ease-in-out hover:bg-surface-tertiary"
+      role="button"
+      tabIndex={0}
+      aria-labelledby={`card-title-${name}`}
     >
       <div className="flex w-full justify-between">
         <div className="flex flex-row gap-2">
-          <CategoryIcon category={category} className="icon-md" />
-          <h3 className="break-word select-none text-balance text-sm font-semibold text-text-primary">
+          <CategoryIcon category={category} className="icon-md" aria-hidden="true" />
+          <h3
+            id={`card-title-${name}`}
+            className="break-word select-none text-balance text-sm font-semibold text-text-primary"
+          >
             {name}
           </h3>
         </div>
@@ -31,6 +46,6 @@ export default function ListCard({
       <div className="ellipsis max-w-full select-none text-balance text-sm text-text-secondary">
         {snippet}
       </div>
-    </button>
+    </div>
   );
 }

client/src/components/Prompts/SharePrompt.tsx

@@ -31,7 +31,7 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
   const { data: startupConfig = {} as TStartupConfig, isFetching } = useGetStartupConfig();
   const { instanceProjectId } = startupConfig;
   const groupIsGlobal = useMemo(
-    () => !!group?.projectIds?.includes(instanceProjectId),
+    () => !!(group?.projectIds ?? []).includes(instanceProjectId),
     [group, instanceProjectId],
   );
 
@@ -57,7 +57,8 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
   }
 
   const onSubmit = (data: FormValues) => {
-    if (!group._id || !instanceProjectId) {
+    const groupId = group._id ?? '';
+    if (!groupId || !instanceProjectId) {
       return;
     }
 
@@ -70,7 +71,7 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
     }
 
     updateGroup.mutate({
-      id: group._id,
+      id: groupId,
       payload,
     });
   };
@@ -87,24 +88,38 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
           <Share2Icon className="cursor-pointer text-white " />
         </Button>
       </OGDialogTrigger>
-      <OGDialogContent className="bg-white dark:border-gray-700 dark:bg-gray-850 dark:text-gray-300">
+      <OGDialogContent className="border-border-light bg-surface-primary-alt text-text-secondary">
         <OGDialogTitle>{localize('com_ui_share_var', `"${group.name}"`)}</OGDialogTitle>
         <form className="p-2" onSubmit={handleSubmit(onSubmit)}>
           <div className="mb-4 flex items-center justify-between gap-2 py-4">
-            <label
-              className="cursor-pointer select-none"
-              htmlFor={Permissions.SHARED_GLOBAL}
-              onClick={() =>
-                setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
-                  shouldDirty: true,
-                })
-              }
-            >
-              {localize('com_ui_share_to_all_users')}
-              {groupIsGlobal && (
-                <span className="ml-2 text-xs">{localize('com_ui_prompt_shared_to_all')}</span>
-              )}
-            </label>
+            <div className="flex items-center">
+              <button
+                type="button"
+                className="mr-2 cursor-pointer"
+                onClick={() =>
+                  setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
+                    shouldDirty: true,
+                  })
+                }
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
+                      shouldDirty: true,
+                    });
+                  }
+                }}
+                aria-checked={getValues(Permissions.SHARED_GLOBAL)}
+                role="checkbox"
+              >
+                {localize('com_ui_share_to_all_users')}
+              </button>
+              <label htmlFor={Permissions.SHARED_GLOBAL} className="select-none">
+                {groupIsGlobal && (
+                  <span className="ml-2 text-xs">{localize('com_ui_prompt_shared_to_all')}</span>
+                )}
+              </label>
+            </div>
             <Controller
               name={Permissions.SHARED_GLOBAL}
               control={control}
@@ -126,7 +141,7 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
                   {...field}
                   checked={field.value}
                   onCheckedChange={field.onChange}
-                  value={field?.value?.toString()}
+                  value={field.value.toString()}
                 />
               )}
             />