feat: AWS Bedrock icons

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/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>

packages/data-provider/src/config.ts

@@ -568,7 +568,7 @@ export const alternateName = {
   [EModelEndpoint.google]: 'Google',
   [EModelEndpoint.anthropic]: 'Anthropic',
   [EModelEndpoint.custom]: 'Custom',
-  [EModelEndpoint.bedrock]: 'Bedrock',
+  [EModelEndpoint.bedrock]: 'AWS Bedrock',
 };
 
 const sharedOpenAIModels = [

packages/data-provider/src/parsers.ts

@@ -190,7 +190,7 @@ export const parseConvo = ({
   // TODO: POC for default schema
   // defaultSchema?: Partial<EndpointSchema>,
 }) => {
-  let schema = endpointSchemas[endpoint];
+  let schema = endpointSchemas[endpoint] as EndpointSchema | undefined;
 
   if (!schema && !endpointType) {
     throw new Error(`Unknown endpoint: ${endpoint}`);
@@ -202,14 +202,14 @@ export const parseConvo = ({
   //   schema = schemaCreators[endpoint](defaultSchema);
   // }
 
-  const convo = schema.parse(conversation) as s.TConversation;
+  const convo = schema?.parse(conversation) as s.TConversation | undefined;
   const { models, secondaryModels } = possibleValues ?? {};
 
   if (models && convo) {
     convo.model = getFirstDefinedValue(models) ?? convo.model;
   }
 
-  if (secondaryModels && convo.agentOptions) {
+  if (secondaryModels && convo?.agentOptions) {
     convo.agentOptions.model = getFirstDefinedValue(secondaryModels) ?? convo.agentOptions.model;
   }
 
@@ -217,9 +217,17 @@ export const parseConvo = ({
 };
 
 export const getResponseSender = (endpointOption: t.TEndpointOption): string => {
-  const { model, endpoint, endpointType, modelDisplayLabel, chatGptLabel, modelLabel, jailbreak } =
-    endpointOption;
+  const {
+    model: _m,
+    endpoint,
+    endpointType,
+    modelDisplayLabel,
+    chatGptLabel,
+    modelLabel,
+    jailbreak,
+  } = endpointOption;
 
+  const model = _m ?? '';
   if (
     [
       EModelEndpoint.openAI,
@@ -232,14 +240,14 @@ export const getResponseSender = (endpointOption: t.TEndpointOption): string =>
       return chatGptLabel;
     } else if (model && model.includes('gpt-3')) {
       return 'GPT-3.5';
-    } else if (model && model.includes('gpt-4')) {
-      return 'GPT-4';
     } else if (model && model.includes('gpt-4o')) {
       return 'GPT-4o';
+    } else if (model && model.includes('gpt-4')) {
+      return 'GPT-4';
     } else if (model && model.includes('mistral')) {
       return 'Mistral';
     }
-    return alternateName[endpoint] ?? 'ChatGPT';
+    return (alternateName[endpoint] as string | undefined) ?? 'ChatGPT';
   }
 
   if (endpoint === EModelEndpoint.bingAI) {
@@ -250,6 +258,10 @@ export const getResponseSender = (endpointOption: t.TEndpointOption): string =>
     return modelLabel ?? 'Claude';
   }
 
+  if (endpoint === EModelEndpoint.bedrock) {
+    return modelLabel ?? alternateName[endpoint];
+  }
+
   if (endpoint === EModelEndpoint.google) {
     if (modelLabel) {
       return modelLabel;
@@ -271,6 +283,8 @@ export const getResponseSender = (endpointOption: t.TEndpointOption): string =>
       return 'Mistral';
     } else if (model && model.includes('gpt-3')) {
       return 'GPT-3.5';
+    } else if (model && model.includes('gpt-4o')) {
+      return 'GPT-4o';
     } else if (model && model.includes('gpt-4')) {
       return 'GPT-4';
     } else if (modelDisplayLabel) {