🪨 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/Chat/Input/HeaderOptions.tsx

@@ -2,7 +2,7 @@ import { useRecoilState } from 'recoil';
 import { Settings2 } from 'lucide-react';
 import { Root, Anchor } from '@radix-ui/react-popover';
 import { useState, useEffect, useMemo } from 'react';
-import { tPresetUpdateSchema, EModelEndpoint } from 'librechat-data-provider';
+import { tPresetUpdateSchema, EModelEndpoint, paramEndpoints } from 'librechat-data-provider';
 import type { TPreset, TInterfaceConfig } from 'librechat-data-provider';
 import { EndpointSettings, SaveAsPresetDialog, AlternativeSettings } from '~/components/Endpoints';
 import { ModelSelect } from '~/components/Input/ModelSelect';
@@ -12,7 +12,6 @@ import PopoverButtons from './PopoverButtons';
 import { useSetIndexOptions } from '~/hooks';
 import { useChatContext } from '~/Providers';
 import { Button } from '~/components/ui';
-import { cn, cardStyle } from '~/utils/';
 import store from '~/store';
 
 export default function HeaderOptions({
@@ -29,10 +28,10 @@ export default function HeaderOptions({
     useChatContext();
   const { setOption } = useSetIndexOptions();
 
-  const { endpoint, conversationId, jailbreak } = conversation ?? {};
+  const { endpoint, conversationId, jailbreak = false } = conversation ?? {};
 
   const altConditions: { [key: string]: boolean } = {
-    bingAI: !!(latestMessage && conversation?.jailbreak && endpoint === 'bingAI'),
+    bingAI: !!(latestMessage && jailbreak && endpoint === 'bingAI'),
   };
 
   const altSettings: { [key: string]: () => void } = {
@@ -74,7 +73,7 @@ export default function HeaderOptions({
         <div className="my-auto lg:max-w-2xl xl:max-w-3xl">
           <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
             <div className="z-[61] flex w-full items-center justify-center gap-2">
-              {interfaceConfig?.modelSelect && (
+              {interfaceConfig?.modelSelect === true && (
                 <ModelSelect
                   conversation={conversation}
                   setOption={setOption}
@@ -82,7 +81,9 @@ export default function HeaderOptions({
                   popover={true}
                 />
               )}
-              {!noSettings[endpoint] && interfaceConfig?.parameters && (
+              {!noSettings[endpoint] &&
+                interfaceConfig?.parameters === true &&
+                !paramEndpoints.has(endpoint) && (
                 <Button
                   aria-label="Settings/parameters"
                   id="parameters-button"
@@ -96,11 +97,11 @@ export default function HeaderOptions({
                 </Button>
               )}
             </div>
-            {interfaceConfig?.parameters && (
+            {interfaceConfig?.parameters === true && !paramEndpoints.has(endpoint) && (
               <OptionsPopover
                 visible={showPopover}
                 saveAsPreset={saveAsPreset}
-                presetsDisabled={!interfaceConfig.presets}
+                presetsDisabled={!(interfaceConfig.presets ?? false)}
                 PopoverButtons={<PopoverButtons />}
                 closePopover={() => setShowPopover(false)}
               >
@@ -114,7 +115,7 @@ export default function HeaderOptions({
                 </div>
               </OptionsPopover>
             )}
-            {interfaceConfig?.presets && (
+            {interfaceConfig?.presets === true && (
               <SaveAsPresetDialog
                 open={saveAsDialogShow}
                 onOpenChange={setSaveAsDialogShow}
@@ -125,7 +126,7 @@ export default function HeaderOptions({
                 }
               />
             )}
-            {interfaceConfig?.parameters && (
+            {interfaceConfig?.parameters === true && (
               <PluginStoreDialog
                 isOpen={showPluginStoreDialog}
                 setIsOpen={setShowPluginStoreDialog}

client/src/components/Chat/Menus/Endpoints/Icons.tsx

@@ -11,6 +11,7 @@ import {
   CustomMinimalIcon,
   AssistantIcon,
   LightningIcon,
+  BedrockIcon,
   Sparkles,
 } from '~/components/svg';
 import UnknownIcon from './UnknownIcon';
@@ -52,6 +53,10 @@ const AgentAvatar = ({ className = '', agentName, avatar, size }: AgentIconMapPr
   return <BrainCircuit className={cn(agentName === '' ? 'icon-2xl' : '', className)} />;
 };
 
+const Bedrock = ({ className = '' }: IconMapProps) => {
+  return <BedrockIcon className={cn(className, 'h-full w-full')} />;
+};
+
 export const icons = {
   [EModelEndpoint.azureOpenAI]: AzureMinimalIcon,
   [EModelEndpoint.openAI]: GPTIcon,
@@ -64,5 +69,6 @@ export const icons = {
   [EModelEndpoint.assistants]: AssistantAvatar,
   [EModelEndpoint.azureAssistants]: AssistantAvatar,
   [EModelEndpoint.agents]: AgentAvatar,
+  [EModelEndpoint.bedrock]: Bedrock,
   unknown: UnknownIcon,
 };

client/src/components/Chat/Messages/Content/Container.tsx

@@ -1,12 +1,12 @@
 import { TMessage } from 'librechat-data-provider';
 import Files from './Files';
 
-const Container = ({ children, message }: { children: React.ReactNode; message: TMessage }) => (
+const Container = ({ children, message }: { children: React.ReactNode; message?: TMessage }) => (
   <div
     className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto [.text-message+&]:mt-5"
     dir="auto"
   >
-    {message.isCreatedByUser && <Files message={message} />}
+    {message?.isCreatedByUser === true && <Files message={message} />}
     {children}
   </div>
 );

client/src/components/Chat/Messages/Content/ContentParts.tsx

@@ -1,51 +1,34 @@
-import { Suspense } from 'react';
+import { memo } from 'react';
 import type { TMessageContentParts } from 'librechat-data-provider';
-import { UnfinishedMessage } from './MessageContent';
-import { DelayedRender } from '~/components/ui';
 import Part from './Part';
 
-const ContentParts = ({
-  error,
-  unfinished,
-  isSubmitting,
-  isLast,
-  content,
-  ...props
-}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-any) => {
-  if (error) {
-    // return <ErrorMessage text={text} />;
-  } else {
-    const { message } = props;
-    const { messageId } = message;
+type ContentPartsProps = {
+  content: Array<TMessageContentParts | undefined>;
+  messageId: string;
+  isCreatedByUser: boolean;
+  isLast: boolean;
+  isSubmitting: boolean;
+};
 
+const ContentParts = memo(
+  ({ content, messageId, isCreatedByUser, isLast, isSubmitting }: ContentPartsProps) => {
     return (
       <>
         {content
-          .filter((part: TMessageContentParts | undefined) => part)
-          .map((part: TMessageContentParts | undefined, idx: number) => {
-            const showCursor = idx === content.length - 1 && isLast;
-            return (
-              <Part
-                key={`display-${messageId}-${idx}`}
-                showCursor={showCursor === true && isSubmitting}
-                isSubmitting={isSubmitting}
-                part={part}
-                {...props}
-              />
-            );
-          })}
-        {/* Temporarily remove this */}
-        {/* {!isSubmitting && unfinished && (
-          <Suspense>
-            <DelayedRender delay={250}>
-              <UnfinishedMessage message={message} key={`unfinished-${messageId}`} />
-            </DelayedRender>
-          </Suspense>
-        )} */}
+          .filter((part) => part)
+          .map((part, idx) => (
+            <Part
+              key={`display-${messageId}-${idx}`}
+              part={part}
+              isSubmitting={isSubmitting}
+              showCursor={idx === content.length - 1 && isLast}
+              messageId={messageId}
+              isCreatedByUser={isCreatedByUser}
+            />
+          ))}
       </>
     );
-  }
-};
+  },
+);
 
 export default ContentParts;

client/src/components/Chat/Messages/Content/Files.tsx

@@ -3,7 +3,7 @@ import type { TFile, TMessage } from 'librechat-data-provider';
 import FileContainer from '~/components/Chat/Input/Files/FileContainer';
 import Image from './Image';
 
-const Files = ({ message }: { message: TMessage }) => {
+const Files = ({ message }: { message?: TMessage }) => {
   const imageFiles = useMemo(() => {
     return message?.files?.filter((file) => file.type?.startsWith('image/')) || [];
   }, [message?.files]);
@@ -20,7 +20,7 @@ const Files = ({ message }: { message: TMessage }) => {
         imageFiles.map((file) => (
           <Image
             key={file.file_id}
-            imagePath={file?.preview ?? file.filepath ?? ''}
+            imagePath={file.preview ?? file.filepath ?? ''}
             height={file.height ?? 1920}
             width={file.width ?? 1080}
             altText={file.filename ?? 'Uploaded Image'}

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -15,7 +15,9 @@ export const ErrorMessage = ({
   text,
   message,
   className = '',
-}: Pick<TDisplayProps, 'text' | 'className' | 'message'>) => {
+}: Pick<TDisplayProps, 'text' | 'className'> & {
+  message?: TMessage;
+}) => {
   const localize = useLocalize();
   if (text === 'Error connecting to server, try refreshing the page.') {
     console.log('error message', message);

client/src/components/Chat/Messages/Content/Part.tsx

@@ -4,81 +4,47 @@ import {
   imageGenTools,
   isImageVisionTool,
 } from 'librechat-data-provider';
-import { useMemo } from 'react';
-import type { TMessageContentParts, TMessage } from 'librechat-data-provider';
-import type { TDisplayProps } from '~/common';
+import { memo } from 'react';
+import type { TMessageContentParts } from 'librechat-data-provider';
 import { ErrorMessage } from './MessageContent';
-import { useChatContext } from '~/Providers';
 import RetrievalCall from './RetrievalCall';
 import CodeAnalyze from './CodeAnalyze';
 import Container from './Container';
 import ToolCall from './ToolCall';
-import Markdown from './Markdown';
 import ImageGen from './ImageGen';
-import { cn } from '~/utils';
+import Text from './Parts/Text';
 import Image from './Image';
 
-// Display Message Component
-const DisplayMessage = ({ text, isCreatedByUser = false, message, showCursor }: TDisplayProps) => {
-  const { isSubmitting, latestMessage } = useChatContext();
-  const showCursorState = useMemo(
-    () => showCursor === true && isSubmitting,
-    [showCursor, isSubmitting],
-  );
-  const isLatestMessage = useMemo(
-    () => message.messageId === latestMessage?.messageId,
-    [message.messageId, latestMessage?.messageId],
-  );
-
-  // Note: for testing purposes
-  // isSubmitting && isLatestMessage && logger.log('message_stream', { text, isCreatedByUser, isSubmitting, showCursorState });
-
-  return (
-    <div
-      className={cn(
-        isSubmitting ? 'submitting' : '',
-        showCursorState && !!text.length ? 'result-streaming' : '',
-        'markdown prose message-content dark:prose-invert light w-full break-words',
-        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
-      )}
-    >
-      {!isCreatedByUser ? (
-        <Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
-      ) : (
-        <>{text}</>
-      )}
-    </div>
-  );
-};
-
-export default function Part({
-  part,
-  showCursor,
-  isSubmitting,
-  message,
-}: {
-  part: TMessageContentParts | undefined;
+type PartProps = {
+  part?: TMessageContentParts;
   isSubmitting: boolean;
   showCursor: boolean;
-  message: TMessage;
-}) {
+  messageId: string;
+  isCreatedByUser: boolean;
+};
+
+const Part = memo(({ part, isSubmitting, showCursor, messageId, isCreatedByUser }: PartProps) => {
   if (!part) {
     return null;
   }
 
   if (part.type === ContentTypes.ERROR) {
-    return <ErrorMessage message={message} text={part[ContentTypes.TEXT].value} className="my-2" />;
+    return <ErrorMessage text={part[ContentTypes.TEXT].value} className="my-2" />;
   } else if (part.type === ContentTypes.TEXT) {
     const text = typeof part.text === 'string' ? part.text : part.text.value;
+
     if (typeof text !== 'string') {
       return null;
     }
+    if (part.tool_call_ids != null && !text) {
+      return null;
+    }
     return (
-      <Container message={message}>
-        <DisplayMessage
+      <Container>
+        <Text
           text={text}
-          isCreatedByUser={message.isCreatedByUser}
-          message={message}
+          isCreatedByUser={isCreatedByUser}
+          messageId={messageId}
           showCursor={showCursor}
         />
       </Container>
@@ -93,7 +59,7 @@ export default function Part({
     if ('args' in toolCall && (!toolCall.type || toolCall.type === ToolCallTypes.TOOL_CALL)) {
       return (
         <ToolCall
-          args={toolCall.args}
+          args={toolCall.args ?? ''}
           name={toolCall.name ?? ''}
           output={toolCall.output ?? ''}
           initialProgress={toolCall.progress ?? 0.1}
@@ -132,11 +98,11 @@ export default function Part({
       if (isImageVisionTool(toolCall)) {
         if (isSubmitting && showCursor) {
           return (
-            <Container message={message}>
-              <DisplayMessage
+            <Container>
+              <Text
                 text={''}
-                isCreatedByUser={message.isCreatedByUser}
-                message={message}
+                isCreatedByUser={isCreatedByUser}
+                messageId={messageId}
                 showCursor={showCursor}
               />
             </Container>
@@ -174,4 +140,6 @@ export default function Part({
   }
 
   return null;
-}
+});
+
+export default Part;

client/src/components/Chat/Messages/Content/Parts/Text.tsx

@@ -0,0 +1,39 @@
+import { memo, useMemo } from 'react';
+import { useChatContext } from '~/Providers';
+import Markdown from '~/components/Chat/Messages/Content/Markdown';
+import { cn } from '~/utils';
+
+type TextPartProps = {
+  text: string;
+  isCreatedByUser: boolean;
+  messageId: string;
+  showCursor: boolean;
+};
+
+const TextPart = memo(({ text, isCreatedByUser, messageId, showCursor }: TextPartProps) => {
+  const { isSubmitting, latestMessage } = useChatContext();
+  const showCursorState = useMemo(() => showCursor && isSubmitting, [showCursor, isSubmitting]);
+  const isLatestMessage = useMemo(
+    () => messageId === latestMessage?.messageId,
+    [messageId, latestMessage?.messageId],
+  );
+
+  return (
+    <div
+      className={cn(
+        isSubmitting ? 'submitting' : '',
+        showCursorState && !!text.length ? 'result-streaming' : '',
+        'markdown prose message-content dark:prose-invert light w-full break-words',
+        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+      )}
+    >
+      {!isCreatedByUser ? (
+        <Markdown content={text} showCursor={showCursorState} isLatestMessage={isLatestMessage} />
+      ) : (
+        <>{text}</>
+      )}
+    </div>
+  );
+});
+
+export default TextPart;

client/src/components/Chat/Messages/MessageParts.tsx

@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import type { TMessageContentParts } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import Icon from '~/components/Chat/Messages/MessageIcon';
 import { useMessageHelpers, useLocalize } from '~/hooks';
@@ -17,7 +18,6 @@ export default function Message(props: TMessageProps) {
     props;
 
   const {
-    ask,
     edit,
     index,
     agent,
@@ -33,7 +33,7 @@ export default function Message(props: TMessageProps) {
     regenerateMessage,
   } = useMessageHelpers(props);
   const fontSize = useRecoilValue(store.fontSize);
-  const { content, children, messageId = null, isCreatedByUser, error, unfinished } = message ?? {};
+  const { children, messageId = null, isCreatedByUser } = message ?? {};
 
   if (!message) {
     return null;
@@ -82,24 +82,11 @@ export default function Message(props: TMessageProps) {
               <div className="flex-col gap-1 md:gap-3">
                 <div className="flex max-w-full flex-grow flex-col gap-0">
                   <ContentParts
-                    ask={ask}
-                    edit={edit}
+                    content={message.content as Array<TMessageContentParts | undefined>}
+                    messageId={message.messageId}
+                    isCreatedByUser={message.isCreatedByUser}
                     isLast={isLast}
-                    content={content ?? []}
-                    message={message}
-                    messageId={messageId}
-                    enterEdit={enterEdit}
-                    error={!!(error ?? false)}
                     isSubmitting={isSubmitting}
-                    unfinished={unfinished ?? false}
-                    isCreatedByUser={isCreatedByUser ?? true}
-                    siblingIdx={siblingIdx ?? 0}
-                    setSiblingIdx={
-                      setSiblingIdx ??
-                      (() => {
-                        return;
-                      })
-                    }
                   />
                 </div>
               </div>

client/src/components/Chat/Messages/MultiMessage.tsx

@@ -1,10 +1,14 @@
 import { useRecoilState } from 'recoil';
 import { useEffect, useCallback } from 'react';
+import { isAssistantsEndpoint } from 'librechat-data-provider';
+import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 // eslint-disable-next-line import/no-cycle
-import Message from './Message';
+import MessageContent from '~/components/Messages/MessageContent';
 // eslint-disable-next-line import/no-cycle
 import MessageParts from './MessageParts';
+// eslint-disable-next-line import/no-cycle
+import Message from './Message';
 import store from '~/store';
 
 export default function MultiMessage({
@@ -30,22 +34,22 @@ export default function MultiMessage({
   }, [messagesTree?.length]);
 
   useEffect(() => {
-    if (messagesTree?.length && siblingIdx >= messagesTree?.length) {
+    if (messagesTree?.length && siblingIdx >= messagesTree.length) {
       setSiblingIdx(0);
     }
   }, [siblingIdx, messagesTree?.length, setSiblingIdx]);
 
-  if (!(messagesTree && messagesTree?.length)) {
+  if (!(messagesTree && messagesTree.length)) {
     return null;
   }
 
-  const message = messagesTree[messagesTree.length - siblingIdx - 1];
+  const message = messagesTree[messagesTree.length - siblingIdx - 1] as TMessage | undefined;
 
   if (!message) {
     return null;
   }
 
-  if (message.content) {
+  if (isAssistantsEndpoint(message.endpoint) && message.content) {
     return (
       <MessageParts
         key={message.messageId}
@@ -57,6 +61,18 @@ export default function MultiMessage({
         setSiblingIdx={setSiblingIdxRev}
       />
     );
+  } else if (message.content) {
+    return (
+      <MessageContent
+        key={message.messageId}
+        message={message}
+        currentEditId={currentEditId}
+        setCurrentEditId={setCurrentEditId}
+        siblingIdx={messagesTree.length - siblingIdx - 1}
+        siblingCount={messagesTree.length}
+        setSiblingIdx={setSiblingIdxRev}
+      />
+    );
   }
 
   return (