🪪 style: Improve a11y of Agent Cards in Marketplace (#10957)

* style: AgentCard and AgentGrid UI with improved layout and accessibility

- Updated AgentCard component to improve layout, including flexbox adjustments for better responsiveness and spacing.
- Added aria-label for agent description to enhance accessibility.
- Introduced a new translation key for agent description in the localization file.
- Modified AgentGrid to include horizontal margins for better alignment on various screen sizes.

* style: Update AgentCard description line clamp for improved readability

- Increased the line clamp for agent descriptions in the AgentCard component from 3 to 5 lines, enhancing the display of longer descriptions while maintaining a clean layout.

* feat: Integrate Agent Detail Dialog in AgentCard Component

- Enhanced the AgentCard component to include an OGDialog for displaying detailed agent information.
- Introduced AgentDetailContent to manage the content of the dialog, allowing users to view agent details and initiate chats directly from the card.
- Updated AgentGrid to utilize the new onSelect prop for agent selection, improving the interaction flow.
- Removed deprecated code related to agent detail handling in the Marketplace component for cleaner implementation.

* ci: Enhance AgentCard and Accessibility Tests with Improved Mocks and Keyboard Interaction

- Updated AgentCard tests to utilize the new onSelect prop for better interaction handling.
- Introduced comprehensive mocks for hooks and components to streamline testing and avoid testing internal implementations.
- Improved accessibility tests by ensuring keyboard interactions are properly handled and do not throw errors.
- Enhanced the overall structure of tests to support better readability and maintainability.

client/src/components/Agents/Marketplace.tsx

@@ -15,7 +15,6 @@ import { SidePanelGroup } from '~/components/SidePanel';
 import { OpenSidebar } from '~/components/Chat/Menus';
 import { cn, clearMessagesCache } from '~/utils';
 import CategoryTabs from './CategoryTabs';
-import AgentDetail from './AgentDetail';
 import SearchBar from './SearchBar';
 import AgentGrid from './AgentGrid';
 import store from '~/store';
@@ -45,7 +44,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
 
   // Get URL parameters
   const searchQuery = searchParams.get('q') || '';
-  const selectedAgentId = searchParams.get('agent_id') || '';
 
   // Animation state
   type Direction = 'left' | 'right';
@@ -58,10 +56,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
   // Ref for the scrollable container to enable infinite scroll
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-  // Local state
-  const [isDetailOpen, setIsDetailOpen] = useState(false);
-  const [selectedAgent, setSelectedAgent] = useState<t.Agent | null>(null);
-
   // Set page title
   useDocumentTitle(`${localize('com_agents_marketplace')} | LibreChat`);
 
@@ -102,28 +96,12 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
   }, [category, categoriesQuery.data, displayCategory]);
 
   /**
-   * Handle agent card selection
-   *
-   * @param agent - The selected agent object
+   * Handle agent card selection - updates URL for deep linking
    */
   const handleAgentSelect = (agent: t.Agent) => {
-    // Update URL with selected agent
     const newParams = new URLSearchParams(searchParams);
     newParams.set('agent_id', agent.id);
     setSearchParams(newParams);
-    setSelectedAgent(agent);
-    setIsDetailOpen(true);
-  };
-
-  /**
-   * Handle closing the agent detail dialog
-   */
-  const handleDetailClose = () => {
-    const newParams = new URLSearchParams(searchParams);
-    newParams.delete('agent_id');
-    setSearchParams(newParams);
-    setSelectedAgent(null);
-    setIsDetailOpen(false);
   };
 
   /**
@@ -229,11 +207,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
     newConversation();
   };
 
-  // Check if a detail view should be open based on URL
-  useEffect(() => {
-    setIsDetailOpen(!!selectedAgentId);
-  }, [selectedAgentId]);
-
   // Layout configuration for SidePanelGroup
   const defaultLayout = useMemo(() => {
     const resizableLayout = localStorage.getItem('react-resizable-panels:layout');
@@ -512,14 +485,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                   {/* Note: Using Tailwind keyframes for slide in/out animations */}
                 </div>
               </div>
-              {/* Agent detail dialog */}
-              {isDetailOpen && selectedAgent && (
-                <AgentDetail
-                  agent={selectedAgent}
-                  isOpen={isDetailOpen}
-                  onClose={handleDetailClose}
-                />
-              )}
             </div>
           </main>
         </SidePanelGroup>