🔄 fix: Avatar & Error Handling Enhancements (#6687)

* fix: Ensure safe access to agent capabilities in AgentConfig

* fix: don't show agent builder if agents endpoint is not enabled

* fix: Improve error logging for MCP tool calls

* fix: Enhance error message for MCP tool failures

* feat: Add optional spec and iconURL properties to TEndpointOption type

* chore: Update condition to use constant for new conversation parameter

* feat: Enhance abort error handling with additional endpoint options to properly render error message fields

* fix: Throw error instead of returning message for failed MCP tool calls

* refactor: separate logic to generate new S3 URLs for expired links

* feat: Implement S3 URL refresh for user avatars with error handling

* fix: authcontext error in chats where agent chain is used

* refactor: streamline balance configuration logic in getBalanceConfig function

* fix: enhance icon resolution logic in SpecIcon component

* fix: allow null values for spec and iconURL in TEndpointOption type

* fix: update balance check to allow null tokenCredits

client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx

@@ -2,12 +2,13 @@ import { X, Link2, PlusCircle } from 'lucide-react';
 import { EModelEndpoint } from 'librechat-data-provider';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import type { ControllerRenderProps } from 'react-hook-form';
+import type { TMessage } from 'librechat-data-provider';
 import type { AgentForm, OptionWithIcon } from '~/common';
 import ControlCombobox from '~/components/ui/ControlCombobox';
 import { HoverCard, HoverCardPortal, HoverCardContent, HoverCardTrigger } from '~/components/ui';
+import MessageIcon from '~/components/Share/MessageIcon';
 import { CircleHelpIcon } from '~/components/svg';
 import { useAgentsMapContext } from '~/Providers';
-import Icon from '~/components/Endpoints/Icon';
 import { useLocalize } from '~/hooks';
 import { ESide } from '~/common';
 
@@ -37,11 +38,14 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
               label: agent?.name || '',
               value: agent?.id,
               icon: (
-                <Icon
-                  endpoint={EModelEndpoint.agents}
-                  agentName={agent?.name ?? ''}
-                  iconURL={agent?.avatar?.filepath}
-                  isCreatedByUser={false}
+                <MessageIcon
+                  message={
+                    {
+                      endpoint: EModelEndpoint.agents,
+                      isCreatedByUser: false,
+                    } as TMessage
+                  }
+                  agent={agent}
                 />
               ),
             }) as OptionWithIcon,
@@ -88,11 +92,14 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
         <div className="flex h-10 items-center justify-between rounded-md border border-border-medium bg-surface-primary-contrast px-3 py-2">
           <div className="flex items-center gap-2">
             <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
-              <Icon
-                endpoint={EModelEndpoint.agents}
-                agentName={getAgentDetails(currentAgentId)?.name ?? ''}
-                iconURL={getAgentDetails(currentAgentId)?.avatar?.filepath}
-                isCreatedByUser={false}
+              <MessageIcon
+                message={
+                  {
+                    endpoint: EModelEndpoint.agents,
+                    isCreatedByUser: false,
+                  } as TMessage
+                }
+                agent={currentAgentId ? agentsMap[currentAgentId] : undefined}
               />
             </div>
             <div className="font-medium text-text-primary">
@@ -114,11 +121,14 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
                 items={selectableAgents}
                 displayValue={getAgentDetails(agentId)?.name ?? ''}
                 SelectIcon={
-                  <Icon
-                    endpoint={EModelEndpoint.agents}
-                    isCreatedByUser={false}
-                    agentName={getAgentDetails(agentId)?.name ?? ''}
-                    iconURL={getAgentDetails(agentId)?.avatar?.filepath}
+                  <MessageIcon
+                    message={
+                      {
+                        endpoint: EModelEndpoint.agents,
+                        isCreatedByUser: false,
+                      } as TMessage
+                    }
+                    agent={agentId ? agentsMap[agentId] : undefined}
                   />
                 }
                 className="flex-1 border-border-heavy"

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

@@ -53,27 +53,27 @@ export default function AgentConfig({
   const agent_id = useWatch({ control, name: 'id' });
 
   const toolsEnabled = useMemo(
-    () => agentsConfig?.capabilities.includes(AgentCapabilities.tools),
+    () => agentsConfig?.capabilities?.includes(AgentCapabilities.tools) ?? false,
     [agentsConfig],
   );
   const actionsEnabled = useMemo(
-    () => agentsConfig?.capabilities.includes(AgentCapabilities.actions),
+    () => agentsConfig?.capabilities?.includes(AgentCapabilities.actions) ?? false,
     [agentsConfig],
   );
   const artifactsEnabled = useMemo(
-    () => agentsConfig?.capabilities.includes(AgentCapabilities.artifacts) ?? false,
+    () => agentsConfig?.capabilities?.includes(AgentCapabilities.artifacts) ?? false,
     [agentsConfig],
   );
   const ocrEnabled = useMemo(
-    () => agentsConfig?.capabilities.includes(AgentCapabilities.ocr) ?? false,
+    () => agentsConfig?.capabilities?.includes(AgentCapabilities.ocr) ?? false,
     [agentsConfig],
   );
   const fileSearchEnabled = useMemo(
-    () => agentsConfig?.capabilities.includes(AgentCapabilities.file_search) ?? false,
+    () => agentsConfig?.capabilities?.includes(AgentCapabilities.file_search) ?? false,
     [agentsConfig],
   );
   const codeEnabled = useMemo(
-    () => agentsConfig?.capabilities.includes(AgentCapabilities.execute_code) ?? false,
+    () => agentsConfig?.capabilities?.includes(AgentCapabilities.execute_code) ?? false,
     [agentsConfig],
   );
 

client/src/components/SidePanel/SidePanel.tsx

@@ -91,6 +91,7 @@ const SidePanel = ({
     keyProvided,
     endpointType,
     interfaceConfig,
+    endpointsConfig,
   });
 
   const toggleNavVisible = useCallback(() => {