🗝️ fix: React Key Props and Minor UI Fixes from a11y Updates (#10954)

* refactor: Update Frontend logger function to enhance logging conditions

- Modified the logger function to check for logger enablement and development environment more robustly.
- Adjusted the condition to ensure logging occurs only when the logger is enabled or when the environment variable for logger is not set in development mode.

* fix: Add key prop to MeasuredRow components in Conversations for improved rendering

- Updated MeasuredRow components to include a key prop for better performance and to prevent rendering issues during list updates.
- Ensured consistent handling of item types within the Conversations component.

* refactor: Enhance ScrollToBottom component with forwardRef for improved functionality

- Updated ScrollToBottom component to use forwardRef, allowing it to accept a ref for better integration with parent components.
- Modified MessagesView to utilize the new ref for the ScrollToBottom button, improving scrolling behavior and performance.

* refactor: Enhance EndpointItem and renderEndpoints for improved model render keys

- Updated EndpointItem to accept an endpointIndex prop for better indexing of endpoints.
- Modified renderEndpoints to pass the endpointIndex to EndpointItem, improving the rendering of endpoint models.
- Adjusted renderEndpointModels to utilize the endpointIndex for unique key generation, enhancing performance and preventing rendering issues.

* refactor: Update BaseClient to handle non-ephemeral agents in conversation logic

- Added a check for non-ephemeral agents in BaseClient, modifying the exceptions set to include 'model' when applicable.
- Enhanced conversation handling to improve flexibility based on agent type.

* refactor: Optimize FavoritesList component for agent handling and loading states

- Updated FavoritesList to improve agent ID management by introducing combinedAgentsMap for better handling of missing agents.
- Refactored loading state logic to ensure accurate representation of agent loading status.
- Enhanced the use of useQueries for fetching missing agent data, streamlining the overall data retrieval process.
- Improved memoization of agent IDs and loading conditions for better performance and reliability.

* Revert "refactor: Update BaseClient to handle non-ephemeral agents in conversation logic"

This reverts commit 6738acbe04.

client/src/components/Nav/Favorites/FavoritesList.tsx

@@ -4,14 +4,13 @@ import { LayoutGrid } from 'lucide-react';
 import { useDrag, useDrop } from 'react-dnd';
 import { Skeleton } from '@librechat/client';
 import { useNavigate } from 'react-router-dom';
+import { useQueries } from '@tanstack/react-query';
 import { QueryKeys, dataService } from 'librechat-data-provider';
-import { useQueries, useQueryClient } from '@tanstack/react-query';
-import type { InfiniteData } from '@tanstack/react-query';
 import type t from 'librechat-data-provider';
 import { useFavorites, useLocalize, useShowMarketplace, useNewConvo } from '~/hooks';
+import { useAssistantsMapContext, useAgentsMapContext } from '~/Providers';
 import useSelectMention from '~/hooks/Input/useSelectMention';
 import { useGetEndpointsQuery } from '~/data-provider';
-import { useAssistantsMapContext } from '~/Providers';
 import FavoriteItem from './FavoriteItem';
 import store from '~/store';
 
@@ -121,13 +120,13 @@ export default function FavoritesList({
 }) {
   const navigate = useNavigate();
   const localize = useLocalize();
-  const queryClient = useQueryClient();
   const search = useRecoilValue(store.search);
   const { favorites, reorderFavorites, isLoading: isFavoritesLoading } = useFavorites();
   const showAgentMarketplace = useShowMarketplace();
 
   const { newConversation } = useNewConvo();
   const assistantsMap = useAssistantsMapContext();
+  const agentsMap = useAgentsMapContext();
   const conversation = useRecoilValue(store.conversationByIndex(0));
   const { data: endpointsConfig = {} as t.TEndpointsConfig } = useGetEndpointsQuery();
 
@@ -168,59 +167,56 @@ export default function FavoritesList({
     newChatButton?.focus();
   }, []);
 
-  // Ensure favorites is always an array (could be corrupted in localStorage)
   const safeFavorites = useMemo(() => (Array.isArray(favorites) ? favorites : []), [favorites]);
 
-  const agentIds = safeFavorites.map((f) => f.agentId).filter(Boolean) as string[];
+  const allAgentIds = useMemo(
+    () => safeFavorites.map((f) => f.agentId).filter(Boolean) as string[],
+    [safeFavorites],
+  );
 
-  const agentQueries = useQueries({
-    queries: agentIds.map((agentId) => ({
+  const missingAgentIds = useMemo(() => {
+    if (agentsMap === undefined) {
+      return [];
+    }
+    return allAgentIds.filter((id) => !agentsMap[id]);
+  }, [allAgentIds, agentsMap]);
+
+  const missingAgentQueries = useQueries({
+    queries: missingAgentIds.map((agentId) => ({
       queryKey: [QueryKeys.agent, agentId],
       queryFn: () => dataService.getAgentById({ agent_id: agentId }),
       staleTime: 1000 * 60 * 5,
+      enabled: missingAgentIds.length > 0,
     })),
   });
 
-  const isAgentsLoading = agentIds.length > 0 && agentQueries.some((q) => q.isLoading);
+  const combinedAgentsMap = useMemo(() => {
+    if (agentsMap === undefined) {
+      return undefined;
+    }
+    const combined: Record<string, t.Agent> = {};
+    for (const [key, value] of Object.entries(agentsMap)) {
+      if (value) {
+        combined[key] = value;
+      }
+    }
+    missingAgentQueries.forEach((query) => {
+      if (query.data) {
+        combined[query.data.id] = query.data;
+      }
+    });
+    return combined;
+  }, [agentsMap, missingAgentQueries]);
+
+  const isAgentsLoading =
+    (allAgentIds.length > 0 && agentsMap === undefined) ||
+    (missingAgentIds.length > 0 && missingAgentQueries.some((q) => q.isLoading));
 
   useEffect(() => {
     if (!isAgentsLoading && onHeightChange) {
       onHeightChange();
     }
   }, [isAgentsLoading, onHeightChange]);
-  const agentsMap = useMemo(() => {
-    const map: Record<string, t.Agent> = {};
-
-    const addToMap = (agent: t.Agent) => {
-      if (agent && agent.id && !map[agent.id]) {
-        map[agent.id] = agent;
-      }
-    };
-
-    const marketplaceData = queryClient.getQueriesData<InfiniteData<t.AgentListResponse>>([
-      QueryKeys.marketplaceAgents,
-    ]);
-    marketplaceData.forEach(([_, data]) => {
-      data?.pages.forEach((page) => {
-        page.data.forEach(addToMap);
-      });
-    });
-
-    const agentsListData = queryClient.getQueriesData<t.AgentListResponse>([QueryKeys.agents]);
-    agentsListData.forEach(([_, data]) => {
-      if (data && Array.isArray(data.data)) {
-        data.data.forEach(addToMap);
-      }
-    });
-
-    agentQueries.forEach((query) => {
-      if (query.data) {
-        map[query.data.id] = query.data;
-      }
-    });
-
-    return map;
-  }, [agentQueries, queryClient]);
 
   const draggedFavoritesRef = useRef(safeFavorites);
 
@@ -306,7 +302,7 @@ export default function FavoritesList({
             )}
             {safeFavorites.map((fav, index) => {
               if (fav.agentId) {
-                const agent = agentsMap[fav.agentId];
+                const agent = combinedAgentsMap?.[fav.agentId];
                 if (!agent) {
                   return null;
                 }