🗝️ 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/Chat/Menus/Endpoints/components/EndpointItem.tsx

@@ -14,6 +14,7 @@ import { cn } from '~/utils';
 
 interface EndpointItemProps {
   endpoint: Endpoint;
+  endpointIndex: number;
 }
 
 const SettingsButton = ({
@@ -54,7 +55,7 @@ const SettingsButton = ({
   );
 };
 
-export function EndpointItem({ endpoint }: EndpointItemProps) {
+export function EndpointItem({ endpoint, endpointIndex }: EndpointItemProps) {
   const localize = useLocalize();
   const {
     agentsMap,
@@ -153,8 +154,21 @@ export function EndpointItem({ endpoint }: EndpointItemProps) {
             ))}
             {/* Render endpoint models */}
             {filteredModels
-              ? renderEndpointModels(endpoint, endpoint.models || [], selectedModel, filteredModels)
-              : endpoint.models && renderEndpointModels(endpoint, endpoint.models, selectedModel)}
+              ? renderEndpointModels(
+                  endpoint,
+                  endpoint.models || [],
+                  selectedModel,
+                  filteredModels,
+                  endpointIndex,
+                )
+              : endpoint.models &&
+                renderEndpointModels(
+                  endpoint,
+                  endpoint.models,
+                  selectedModel,
+                  undefined,
+                  endpointIndex,
+                )}
           </>
         )}
       </Menu>
@@ -198,7 +212,11 @@ export function EndpointItem({ endpoint }: EndpointItemProps) {
 }
 
 export function renderEndpoints(mappedEndpoints: Endpoint[]) {
-  return mappedEndpoints.map((endpoint) => (
-    <EndpointItem endpoint={endpoint} key={`endpoint-${endpoint.value}-item`} />
+  return mappedEndpoints.map((endpoint, index) => (
+    <EndpointItem
+      endpoint={endpoint}
+      endpointIndex={index}
+      key={`endpoint-${endpoint.value}-${index}`}
+    />
   ));
 }

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

@@ -109,7 +109,6 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
   return (
     <MenuItem
       ref={itemRef}
-      key={modelId}
       onClick={() => handleSelectModel(endpoint, modelId ?? '')}
       className="group flex w-full cursor-pointer items-center justify-between rounded-lg px-2 text-sm"
     >
@@ -161,14 +160,16 @@ export function renderEndpointModels(
   models: Array<{ name: string; isGlobal?: boolean }>,
   selectedModel: string | null,
   filteredModels?: string[],
+  endpointIndex?: number,
 ) {
   const modelsToRender = filteredModels || models.map((model) => model.name);
+  const indexSuffix = endpointIndex != null ? `-${endpointIndex}` : '';
 
   return modelsToRender.map(
-    (modelId) =>
+    (modelId, modelIndex) =>
       endpoint && (
         <EndpointModelItem
-          key={modelId}
+          key={`${endpoint.value}${indexSuffix}-${modelId}-${modelIndex}`}
           modelId={modelId}
           endpoint={endpoint}
           isSelected={selectedModel === modelId}

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
 import { CSSTransition } from 'react-transition-group';
@@ -21,6 +21,7 @@ function MessagesViewContent({
   const { screenshotTargetRef } = useScreenshot();
   const scrollButtonPreference = useRecoilValue(store.showScrollButton);
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
+  const scrollToBottomRef = useRef<HTMLButtonElement>(null);
 
   const {
     conversation,
@@ -87,8 +88,9 @@ function MessagesViewContent({
             classNames="scroll-animation"
             unmountOnExit={true}
             appear={true}
+            nodeRef={scrollToBottomRef}
           >
-            <ScrollToBottom scrollHandler={handleSmoothToRef} />
+            <ScrollToBottom ref={scrollToBottomRef} scrollHandler={handleSmoothToRef} />
           </CSSTransition>
         </div>
       </div>