🪨 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/Agents/AgentConfig.tsx

@@ -11,9 +11,10 @@ import Action from '~/components/SidePanel/Builder/Action';
 import { useLocalize } from '~/hooks';
 import { ToolSelectDialog } from '~/components/Tools';
 import { useToastContext } from '~/Providers';
-import ContextButton from './ContextButton';
 import { Spinner } from '~/components/svg';
+import DeleteButton from './DeleteButton';
 import AgentAvatar from './AgentAvatar';
+import ShareAgent from './ShareAgent';
 import AgentTool from './AgentTool';
 import { Panel } from '~/common';
 
@@ -57,14 +58,14 @@ export default function AgentConfig({
     () => agentsConfig?.capabilities?.includes(Capabilities.actions),
     [agentsConfig],
   );
-  const retrievalEnabled = useMemo(
-    () => agentsConfig?.capabilities?.includes(Capabilities.retrieval),
-    [agentsConfig],
-  );
-  const codeEnabled = useMemo(
-    () => agentsConfig?.capabilities?.includes(Capabilities.code_interpreter),
-    [agentsConfig],
-  );
+  // const retrievalEnabled = useMemo(
+  //   () => agentsConfig?.capabilities?.includes(Capabilities.retrieval),
+  //   [agentsConfig],
+  // );
+  // const codeEnabled = useMemo(
+  //   () => agentsConfig?.capabilities?.includes(Capabilities.code_interpreter),
+  //   [agentsConfig],
+  // );
 
   /* Mutations */
   const update = useUpdateAgentMutation({
@@ -190,7 +191,7 @@ export default function AgentConfig({
             name="id"
             control={control}
             render={({ field }) => (
-              <p className="h-3 text-xs italic text-gray-600" aria-live="polite">
+              <p className="h-3 text-xs italic text-text-secondary" aria-live="polite">
                 {field.value}
               </p>
             )}
@@ -221,12 +222,11 @@ export default function AgentConfig({
         {/* Instructions */}
         <div className="mb-6">
           <label className={labelClass} htmlFor="instructions">
-            {localize('com_ui_instructions')} <span className="text-red-500">*</span>
+            {localize('com_ui_instructions')}
           </label>
           <Controller
             name="instructions"
             control={control}
-            rules={{ required: true, minLength: 1 }}
             render={({ field, fieldState: { error } }) => (
               <>
                 <textarea
@@ -276,16 +276,16 @@ export default function AgentConfig({
                   />
                 </div>
               )}
-              <span>{model ? model : localize('com_ui_select_model')}</span>
+              <span>{model != null ? model : localize('com_ui_select_model')}</span>
             </div>
           </button>
         </div>
         {/* Agent Tools & Actions */}
         <div className="mb-6">
           <label className={labelClass}>
-            {`${toolsEnabled ? localize('com_assistants_tools') : ''}
-              ${toolsEnabled && actionsEnabled ? ' + ' : ''}
-              ${actionsEnabled ? localize('com_assistants_actions') : ''}`}
+            {`${toolsEnabled === true ? localize('com_assistants_tools') : ''}
+              ${toolsEnabled === true && actionsEnabled === true ? ' + ' : ''}
+              ${actionsEnabled === true ? localize('com_assistants_actions') : ''}`}
           </label>
           <div className="space-y-2">
             {tools?.map((func, i) => (
@@ -339,11 +339,16 @@ export default function AgentConfig({
         </div>
         {/* Context Button */}
         <div className="flex items-center justify-end gap-2">
-          <ContextButton
+          <DeleteButton
             agent_id={agent_id}
             setCurrentAgentId={setCurrentAgentId}
             createMutation={create}
           />
+          <ShareAgent
+            agent_id={agent_id}
+            agentName={agent?.name ?? ''}
+            projectIds={agent?.projectIds ?? []}
+          />
           {/* Submit Button */}
           <button
             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"

client/src/components/SidePanel/Agents/AgentSelect.tsx

@@ -1,10 +1,11 @@
-import { Plus } from 'lucide-react';
+import { Plus, EarthIcon } from 'lucide-react';
 import { useCallback, useEffect, useRef } from 'react';
+import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { Capabilities, defaultAgentFormValues } from 'librechat-data-provider';
-import type { AgentCapabilities, AgentForm, TAgentOption } from '~/common';
 import type { Agent, AgentCreateParams } from 'librechat-data-provider';
 import type { UseMutationResult } from '@tanstack/react-query';
 import type { UseFormReset } from 'react-hook-form';
+import type { AgentCapabilities, AgentForm, TAgentOption } from '~/common';
 import { cn, createDropdownSetter, createProviderOption, processAgentOption } from '~/utils';
 import { useListAgentsQuery, useGetAgentByIdQuery } from '~/data-provider';
 import SelectDropDown from '~/components/ui/SelectDropDown';
@@ -16,7 +17,7 @@ const keys = new Set(Object.keys(defaultAgentFormValues));
 export default function AgentSelect({
   reset,
   value: currentAgentValue,
-  selectedAgentId,
+  selectedAgentId = null,
   setCurrentAgentId,
   createMutation,
 }: {
@@ -31,21 +32,33 @@ export default function AgentSelect({
   // const fileMap = useFileMapContext();
   const lastSelectedAgent = useRef<string | null>(null);
 
-  const { data: agents = [] } = useListAgentsQuery(undefined, {
-    select: (res) => res.data.map((agent) => processAgentOption(agent /*, fileMap */)),
+  const { data: startupConfig } = useGetStartupConfig();
+  const { data: agents = null } = useListAgentsQuery(undefined, {
+    select: (res) =>
+      res.data.map((agent) =>
+        processAgentOption({
+          agent,
+          instanceProjectId: startupConfig?.instanceProjectId,
+          /* fileMap */
+        }),
+      ),
   });
 
   const agentQuery = useGetAgentByIdQuery(selectedAgentId ?? '', {
-    enabled: !!selectedAgentId,
+    enabled: !!(selectedAgentId ?? ''),
   });
 
   const resetAgentForm = useCallback(
     (fullAgent: Agent) => {
+      const { instanceProjectId } = startupConfig ?? {};
+      const isGlobal =
+        (instanceProjectId != null && fullAgent.projectIds?.includes(instanceProjectId)) ?? false;
       const update = {
         ...fullAgent,
         provider: createProviderOption(fullAgent.provider),
         label: fullAgent.name ?? '',
-        value: fullAgent.id ?? '',
+        value: fullAgent.id || '',
+        icon: isGlobal ? <EarthIcon className={'icon-lg text-green-400'} /> : null,
       };
 
       const actions: AgentCapabilities = {
@@ -84,7 +97,7 @@ export default function AgentSelect({
   const onSelect = useCallback(
     (selectedId: string) => {
       const agentExists = !!(selectedId
-        ? agents.find((agent) => agent.id === selectedId)
+        ? (agents ?? []).find((agent) => agent.id === selectedId)
         : undefined);
 
       createMutation.reset();
@@ -120,7 +133,7 @@ export default function AgentSelect({
       return;
     }
 
-    if (selectedAgentId && agents) {
+    if (selectedAgentId != null && selectedAgentId !== '' && agents) {
       timerId = setTimeout(() => {
         lastSelectedAgent.current = selectedAgentId;
         onSelect(selectedAgentId);
@@ -136,8 +149,9 @@ export default function AgentSelect({
 
   const createAgent = localize('com_ui_create') + ' ' + localize('com_ui_agent');
   const hasAgentValue = !!(typeof currentAgentValue === 'object'
-    ? currentAgentValue.value
-    : currentAgentValue);
+    ? currentAgentValue.value != null && currentAgentValue.value !== ''
+    : typeof currentAgentValue !== 'undefined');
+
   return (
     <SelectDropDown
       value={!hasAgentValue ? createAgent : (currentAgentValue as TAgentOption)}
@@ -151,9 +165,11 @@ export default function AgentSelect({
         ]
       }
       iconSide="left"
+      optionIconSide="right"
       showAbove={false}
       showLabel={false}
       emptyTitle={true}
+      showOptionIcon={true}
       containerClassName="flex-grow"
       searchClassName="dark:from-gray-850"
       searchPlaceholder={localize('com_agents_search_name')}

client/src/components/SidePanel/Agents/DeleteButton.tsx

@@ -4,11 +4,11 @@ import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
 import { useChatContext, useToastContext } from '~/Providers';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { useLocalize, useSetIndexOptions } from '~/hooks';
+import { cn, removeFocusOutlines, logger } from '~/utils';
 import { useDeleteAgentMutation } from '~/data-provider';
-import { cn, removeFocusOutlines } from '~/utils/';
 import { TrashIcon } from '~/components/svg';
 
-export default function ContextButton({
+export default function DeleteButton({
   agent_id,
   setCurrentAgentId,
   createMutation,
@@ -34,8 +34,8 @@ export default function ContextButton({
         status: 'success',
       });
 
-      if (createMutation.data?.id) {
-        console.log('[deleteAgent] resetting createMutation');
+      if (createMutation.data?.id ?? '') {
+        logger.log('agents', 'resetting createMutation');
         createMutation.reset();
       }
 
@@ -49,7 +49,7 @@ export default function ContextButton({
         return setOption('agent_id')(firstAgent.id);
       }
 
-      const currentAgent = updatedList?.find((agent) => agent.id === conversation?.agent_id);
+      const currentAgent = updatedList.find((agent) => agent.id === conversation?.agent_id);
 
       if (currentAgent) {
         setCurrentAgentId(currentAgent.id);
@@ -78,6 +78,7 @@ export default function ContextButton({
             'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
             removeFocusOutlines,
           )}
+          aria-label={localize('com_ui_delete') + ' ' + localize('com_ui_agent')}
           type="button"
         >
           <div className="flex w-full items-center justify-center gap-2 text-red-500">

client/src/components/SidePanel/Agents/ShareAgent.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useMemo } from 'react';
+import { Share2Icon } from 'lucide-react';
+import { useForm, Controller } from 'react-hook-form';
+import { Permissions } from 'librechat-data-provider';
+import { useGetStartupConfig } from 'librechat-data-provider/react-query';
+import type { TStartupConfig, AgentUpdateParams } from 'librechat-data-provider';
+import {
+  Switch,
+  OGDialog,
+  OGDialogTitle,
+  OGDialogClose,
+  OGDialogContent,
+  OGDialogTrigger,
+} from '~/components/ui';
+import { useUpdateAgentMutation } from '~/data-provider';
+import { cn, removeFocusOutlines } from '~/utils';
+import { useToastContext } from '~/Providers';
+import { useLocalize } from '~/hooks';
+
+type FormValues = {
+  [Permissions.SHARED_GLOBAL]: boolean;
+};
+
+export default function ShareAgent({
+  agent_id = '',
+  agentName,
+  projectIds = [],
+}: {
+  agent_id?: string;
+  agentName?: string;
+  projectIds?: string[];
+}) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const { data: startupConfig = {} as TStartupConfig, isFetching } = useGetStartupConfig();
+  const { instanceProjectId } = startupConfig;
+  const agentIsGlobal = useMemo(
+    () => !!projectIds.includes(instanceProjectId),
+    [projectIds, instanceProjectId],
+  );
+
+  const {
+    control,
+    setValue,
+    getValues,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<FormValues>({
+    mode: 'onChange',
+    defaultValues: {
+      [Permissions.SHARED_GLOBAL]: agentIsGlobal,
+    },
+  });
+
+  useEffect(() => {
+    setValue(Permissions.SHARED_GLOBAL, agentIsGlobal);
+  }, [agentIsGlobal, setValue]);
+
+  const updateAgent = useUpdateAgentMutation({
+    onSuccess: (data) => {
+      showToast({
+        message: `${localize('com_assistants_update_success')} ${
+          data.name ?? localize('com_ui_agent')
+        }`,
+        status: 'success',
+      });
+    },
+    onError: (err) => {
+      const error = err as Error;
+      showToast({
+        message: `${localize('com_agents_update_error')}${
+          error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
+        }`,
+        status: 'error',
+      });
+    },
+  });
+
+  if (!agent_id || !instanceProjectId) {
+    return null;
+  }
+
+  const onSubmit = (data: FormValues) => {
+    if (!agent_id || !instanceProjectId) {
+      return;
+    }
+
+    const payload = {} as AgentUpdateParams;
+
+    if (data[Permissions.SHARED_GLOBAL]) {
+      payload.projectIds = [startupConfig.instanceProjectId];
+    } else {
+      payload.removeProjectIds = [startupConfig.instanceProjectId];
+    }
+
+    updateAgent.mutate({
+      agent_id,
+      data: payload,
+    });
+  };
+
+  return (
+    <OGDialog>
+      <OGDialogTrigger asChild>
+        <button
+          className={cn(
+            'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
+            removeFocusOutlines,
+          )}
+          aria-label={localize(
+            'com_ui_share_var',
+            agentName != null && agentName !== '' ? `"${agentName}"` : localize('com_ui_agent'),
+          )}
+          type="button"
+        >
+          <div className="flex w-full items-center justify-center gap-2 text-blue-500">
+            <Share2Icon className="icon-md h-4 w-4" />
+          </div>
+        </button>
+      </OGDialogTrigger>
+      <OGDialogContent className="border-border-light bg-surface-primary-alt text-text-secondary">
+        <OGDialogTitle>
+          {localize(
+            'com_ui_share_var',
+            agentName != null && agentName !== '' ? `"${agentName}"` : localize('com_ui_agent'),
+          )}
+        </OGDialogTitle>
+        <form
+          className="p-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleSubmit(onSubmit)(e);
+          }}
+        >
+          <div className="mb-4 flex items-center justify-between gap-2 py-4">
+            <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">
+                {agentIsGlobal && (
+                  <span className="ml-2 text-xs">{localize('com_ui_agent_shared_to_all')}</span>
+                )}
+              </label>
+            </div>
+            <Controller
+              name={Permissions.SHARED_GLOBAL}
+              control={control}
+              disabled={isFetching || updateAgent.isLoading || !instanceProjectId}
+              rules={{
+                validate: (value) => {
+                  const isValid = !(value && agentIsGlobal);
+                  if (!isValid) {
+                    showToast({
+                      message: localize('com_ui_agent_already_shared_to_all'),
+                      status: 'warning',
+                    });
+                  }
+                  return isValid;
+                },
+              }}
+              render={({ field }) => (
+                <Switch
+                  {...field}
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                  value={field.value.toString()}
+                />
+              )}
+            />
+          </div>
+          <div className="flex justify-end">
+            <OGDialogClose asChild>
+              <button
+                type="submit"
+                disabled={isSubmitting || isFetching}
+                className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
+              >
+                {localize('com_ui_save')}
+              </button>
+            </OGDialogClose>
+          </div>
+        </form>
+      </OGDialogContent>
+    </OGDialog>
+  );
+}