diff --git a/client/src/components/Agents/AgentCard.tsx b/client/src/components/Agents/AgentCard.tsx index 6a81a1645e..7e9dd6da10 100644 --- a/client/src/components/Agents/AgentCard.tsx +++ b/client/src/components/Agents/AgentCard.tsx @@ -1,21 +1,23 @@ -import React, { useMemo } from 'react'; -import { Label } from '@librechat/client'; +import React, { useMemo, useState } from 'react'; +import { Label, OGDialog, OGDialogTrigger } from '@librechat/client'; import type t from 'librechat-data-provider'; import { useLocalize, TranslationKeys, useAgentCategories } from '~/hooks'; import { cn, renderAgentAvatar, getContactDisplayName } from '~/utils'; +import AgentDetailContent from './AgentDetailContent'; interface AgentCardProps { - agent: t.Agent; // The agent data to display - onClick: () => void; // Callback when card is clicked - className?: string; // Additional CSS classes + agent: t.Agent; + onSelect?: (agent: t.Agent) => void; + className?: string; } /** - * Card component to display agent information + * Card component to display agent information with integrated detail dialog */ -const AgentCard: React.FC = ({ agent, onClick, className = '' }) => { +const AgentCard: React.FC = ({ agent, onSelect, className = '' }) => { const localize = useLocalize(); const { categories } = useAgentCategories(); + const [isOpen, setIsOpen] = useState(false); const categoryLabel = useMemo(() => { if (!agent.category) return ''; @@ -31,82 +33,89 @@ const AgentCard: React.FC = ({ agent, onClick, className = '' }) return agent.category.charAt(0).toUpperCase() + agent.category.slice(1); }, [agent.category, categories, localize]); - return ( -
{ - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault(); - onClick(); - } - }} - > -
-
- {/* Left column: Avatar and Category */} -
-
{renderAgentAvatar(agent, { size: 'sm' })}
+ const displayName = getContactDisplayName(agent); - {/* Category tag */} - {agent.category && ( -
- + const handleOpenChange = (open: boolean) => { + setIsOpen(open); + if (open && onSelect) { + onSelect(agent); + } + }; + + return ( + + +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setIsOpen(true); + } + }} + > + {/* Category badge - top right */} + {categoryLabel && ( + + {categoryLabel} + + )} + + {/* Avatar */} +
+
+ {renderAgentAvatar(agent, { size: 'sm', showBorder: false })} +
+
+ + {/* Content */} +
+ {/* Agent name */} + + + {/* Agent description */} + {agent.description && ( +

+ {agent.description} +

+ )} + + {/* Author */} + {displayName && ( +
+ + {localize('com_ui_by_author', { 0: displayName || '' })} +
)}
- - {/* Right column: Name, description, and other content */} -
-
- {/* Agent name */} - - - {/* Agent description */} -

- {agent.description ?? ''} -

-
- - {/* Owner info */} - {(() => { - const displayName = getContactDisplayName(agent); - if (displayName) { - return ( -
-
- -
-
- ); - } - return null; - })()} -
-
-
+ + + + ); }; diff --git a/client/src/components/Agents/AgentDetailContent.tsx b/client/src/components/Agents/AgentDetailContent.tsx new file mode 100644 index 0000000000..1e06d8230f --- /dev/null +++ b/client/src/components/Agents/AgentDetailContent.tsx @@ -0,0 +1,192 @@ +import React from 'react'; +import { Link, Pin, PinOff } from 'lucide-react'; +import { useQueryClient } from '@tanstack/react-query'; +import { OGDialogContent, Button, useToastContext } from '@librechat/client'; +import { + QueryKeys, + Constants, + EModelEndpoint, + PermissionBits, + LocalStorageKeys, + AgentListResponse, +} from 'librechat-data-provider'; +import type t from 'librechat-data-provider'; +import { useLocalize, useDefaultConvo, useFavorites } from '~/hooks'; +import { renderAgentAvatar, clearMessagesCache } from '~/utils'; +import { useChatContext } from '~/Providers'; + +interface SupportContact { + name?: string; + email?: string; +} + +interface AgentWithSupport extends t.Agent { + support_contact?: SupportContact; +} + +interface AgentDetailContentProps { + agent: AgentWithSupport; +} + +/** + * Dialog content for displaying agent details + * Used inside OGDialog with OGDialogTrigger for proper focus management + */ +const AgentDetailContent: React.FC = ({ agent }) => { + const localize = useLocalize(); + const queryClient = useQueryClient(); + const { showToast } = useToastContext(); + const getDefaultConversation = useDefaultConvo(); + const { conversation, newConversation } = useChatContext(); + const { isFavoriteAgent, toggleFavoriteAgent } = useFavorites(); + const isFavorite = isFavoriteAgent(agent?.id); + + const handleFavoriteClick = () => { + if (agent) { + toggleFavoriteAgent(agent.id); + } + }; + + /** + * Navigate to chat with the selected agent + */ + const handleStartChat = () => { + if (agent) { + const keys = [QueryKeys.agents, { requiredPermission: PermissionBits.EDIT }]; + const listResp = queryClient.getQueryData(keys); + if (listResp != null) { + if (!listResp.data.some((a) => a.id === agent.id)) { + const currentAgents = [agent, ...JSON.parse(JSON.stringify(listResp.data))]; + queryClient.setQueryData(keys, { ...listResp, data: currentAgents }); + } + } + + localStorage.setItem(`${LocalStorageKeys.AGENT_ID_PREFIX}0`, agent.id); + + clearMessagesCache(queryClient, conversation?.conversationId); + queryClient.invalidateQueries([QueryKeys.messages]); + + /** Template with agent configuration */ + const template = { + conversationId: Constants.NEW_CONVO as string, + endpoint: EModelEndpoint.agents, + agent_id: agent.id, + title: localize('com_agents_chat_with', { name: agent.name || localize('com_ui_agent') }), + }; + + const currentConvo = getDefaultConversation({ + conversation: { ...(conversation ?? {}), ...template }, + preset: template, + }); + + newConversation({ + template: currentConvo, + preset: template, + }); + } + }; + + /** + * Copy the agent's shareable link to clipboard + */ + const handleCopyLink = () => { + const baseUrl = new URL(window.location.origin); + const chatUrl = `${baseUrl.origin}/c/new?agent_id=${agent.id}`; + navigator.clipboard + .writeText(chatUrl) + .then(() => { + showToast({ + message: localize('com_agents_link_copied'), + }); + }) + .catch(() => { + showToast({ + message: localize('com_agents_link_copy_failed'), + }); + }); + }; + + /** + * Format contact information with mailto links when appropriate + */ + const formatContact = () => { + if (!agent?.support_contact) return null; + + const { name, email } = agent.support_contact; + + if (name && email) { + return ( + + {name} + + ); + } + + if (email) { + return ( + + {email} + + ); + } + + if (name) { + return {name}; + } + + return null; + }; + + return ( + + {/* Agent avatar */} +
{renderAgentAvatar(agent, { size: 'xl' })}
+ + {/* Agent name */} +
+

+ {agent?.name || localize('com_agents_loading')} +

+
+ + {/* Contact info */} + {agent?.support_contact && formatContact() && ( +
+ {localize('com_agents_contact')}: {formatContact()} +
+ )} + + {/* Agent description */} +
+ {agent?.description} +
+ + {/* Action button */} +
+ + + +
+ + ); +}; + +export default AgentDetailContent; diff --git a/client/src/components/Agents/AgentGrid.tsx b/client/src/components/Agents/AgentGrid.tsx index ab821eb87a..285df3dc74 100644 --- a/client/src/components/Agents/AgentGrid.tsx +++ b/client/src/components/Agents/AgentGrid.tsx @@ -10,10 +10,10 @@ import ErrorDisplay from './ErrorDisplay'; import AgentCard from './AgentCard'; interface AgentGridProps { - category: string; // Currently selected category - searchQuery: string; // Current search query - onSelectAgent: (agent: t.Agent) => void; // Callback when agent is selected - scrollElementRef?: React.RefObject; // Parent scroll container ref for infinite scroll + category: string; + searchQuery: string; + onSelectAgent: (agent: t.Agent) => void; + scrollElementRef?: React.RefObject; } /** @@ -184,7 +184,7 @@ const AgentGrid: React.FC = ({ {/* Agent grid - 2 per row with proper semantic structure */} {currentAgents && currentAgents.length > 0 && (
= ({ > {currentAgents.map((agent: t.Agent, index: number) => (
- onSelectAgent(agent)} /> +
))}
diff --git a/client/src/components/Agents/Marketplace.tsx b/client/src/components/Agents/Marketplace.tsx index ef882142e2..899bb4f020 100644 --- a/client/src/components/Agents/Marketplace.tsx +++ b/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 = ({ 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 = ({ className = '' }) = // Ref for the scrollable container to enable infinite scroll const scrollContainerRef = useRef(null); - // Local state - const [isDetailOpen, setIsDetailOpen] = useState(false); - const [selectedAgent, setSelectedAgent] = useState(null); - // Set page title useDocumentTitle(`${localize('com_agents_marketplace')} | LibreChat`); @@ -102,28 +96,12 @@ const AgentMarketplace: React.FC = ({ 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 = ({ 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 = ({ className = '' }) = {/* Note: Using Tailwind keyframes for slide in/out animations */}
- {/* Agent detail dialog */} - {isDetailOpen && selectedAgent && ( - - )}
diff --git a/client/src/components/Agents/tests/Accessibility.spec.tsx b/client/src/components/Agents/tests/Accessibility.spec.tsx index 9718497769..8d9a02a982 100644 --- a/client/src/components/Agents/tests/Accessibility.spec.tsx +++ b/client/src/components/Agents/tests/Accessibility.spec.tsx @@ -97,6 +97,27 @@ jest.mock('~/hooks', () => ({ useLocalize: () => mockLocalize, useDebounce: jest.fn(), useAgentCategories: jest.fn(), + useDefaultConvo: jest.fn(() => jest.fn(() => ({}))), + useFavorites: jest.fn(() => ({ + isFavoriteAgent: jest.fn(() => false), + toggleFavoriteAgent: jest.fn(), + })), +})); + +// Mock Providers +jest.mock('~/Providers', () => ({ + useChatContext: jest.fn(() => ({ + conversation: null, + newConversation: jest.fn(), + })), +})); + +// Mock @librechat/client toast context +jest.mock('@librechat/client', () => ({ + ...jest.requireActual('@librechat/client'), + useToastContext: jest.fn(() => ({ + showToast: jest.fn(), + })), })); jest.mock('~/data-provider/Agents', () => ({ @@ -115,6 +136,13 @@ jest.mock('../SmartLoader', () => ({ useHasData: jest.fn(() => true), })); +// Mock AgentDetailContent to avoid testing dialog internals +jest.mock('../AgentDetailContent', () => ({ + __esModule: true, + // eslint-disable-next-line i18next/no-literal-string + default: () =>
Agent Detail Content
, +})); + // Import the actual modules to get the mocked functions import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents'; import { useAgentCategories, useDebounce } from '~/hooks'; @@ -299,7 +327,12 @@ describe('Accessibility Improvements', () => { }; it('provides comprehensive ARIA labels', () => { - render(); + const Wrapper = createWrapper(); + render( + + + , + ); const card = screen.getByRole('button'); expect(card).toHaveAttribute('aria-label', 'Test Agent agent. A test agent for testing'); @@ -308,16 +341,19 @@ describe('Accessibility Improvements', () => { }); it('supports keyboard interaction', () => { - const onClick = jest.fn(); - render(); + const Wrapper = createWrapper(); + render( + + + , + ); const card = screen.getByRole('button'); - fireEvent.keyDown(card, { key: 'Enter' }); - expect(onClick).toHaveBeenCalledTimes(1); - - fireEvent.keyDown(card, { key: ' ' }); - expect(onClick).toHaveBeenCalledTimes(2); + // Card should be keyboard accessible - actual dialog behavior is handled by Radix + expect(card).toHaveAttribute('tabIndex', '0'); + expect(() => fireEvent.keyDown(card, { key: 'Enter' })).not.toThrow(); + expect(() => fireEvent.keyDown(card, { key: ' ' })).not.toThrow(); }); }); diff --git a/client/src/components/Agents/tests/AgentCard.spec.tsx b/client/src/components/Agents/tests/AgentCard.spec.tsx index 71ab702909..5e16f3d265 100644 --- a/client/src/components/Agents/tests/AgentCard.spec.tsx +++ b/client/src/components/Agents/tests/AgentCard.spec.tsx @@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import AgentCard from '../AgentCard'; import type t from 'librechat-data-provider'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; // Mock useLocalize hook jest.mock('~/hooks/useLocalize', () => () => (key: string) => { @@ -11,25 +12,32 @@ jest.mock('~/hooks/useLocalize', () => () => (key: string) => { com_agents_agent_card_label: '{{name}} agent. {{description}}', com_agents_category_general: 'General', com_agents_category_hr: 'Human Resources', + com_ui_by_author: 'by {{0}}', + com_agents_description_card: '{{description}}', }; return mockTranslations[key] || key; }); // Mock useAgentCategories hook jest.mock('~/hooks', () => ({ - useLocalize: () => (key: string, values?: Record) => { + useLocalize: () => (key: string, values?: Record) => { const mockTranslations: Record = { com_agents_created_by: 'Created by', com_agents_agent_card_label: '{{name}} agent. {{description}}', com_agents_category_general: 'General', com_agents_category_hr: 'Human Resources', + com_ui_by_author: 'by {{0}}', + com_agents_description_card: '{{description}}', }; let translation = mockTranslations[key] || key; // Replace placeholders with actual values if (values) { Object.entries(values).forEach(([placeholder, value]) => { - translation = translation.replace(new RegExp(`{{${placeholder}}}`, 'g'), value); + translation = translation.replace( + new RegExp(`\\{\\{${placeholder}\\}\\}`, 'g'), + String(value), + ); }); } @@ -42,8 +50,81 @@ jest.mock('~/hooks', () => ({ { value: 'custom', label: 'Custom Category' }, // Non-localized custom category ], }), + useDefaultConvo: jest.fn(() => jest.fn(() => ({}))), + useFavorites: jest.fn(() => ({ + isFavoriteAgent: jest.fn(() => false), + toggleFavoriteAgent: jest.fn(), + })), })); +// Mock AgentDetailContent to avoid testing dialog internals +jest.mock('../AgentDetailContent', () => ({ + __esModule: true, + // eslint-disable-next-line i18next/no-literal-string + default: () =>
Agent Detail Content
, +})); + +// Mock Providers +jest.mock('~/Providers', () => ({ + useChatContext: jest.fn(() => ({ + conversation: null, + newConversation: jest.fn(), + })), +})); + +// Mock @librechat/client with proper Dialog behavior +jest.mock('@librechat/client', () => { + // eslint-disable-next-line @typescript-eslint/no-require-imports + const React = require('react'); + return { + ...jest.requireActual('@librechat/client'), + useToastContext: jest.fn(() => ({ + showToast: jest.fn(), + })), + OGDialog: ({ children, open, onOpenChange }: any) => { + // Store onOpenChange in context for trigger to call + return ( +
+ {React.Children.map(children, (child: any) => { + if (child?.type?.displayName === 'OGDialogTrigger' || child?.props?.['data-trigger']) { + return React.cloneElement(child, { onOpenChange }); + } + // Only render content when open + if (child?.type?.displayName === 'OGDialogContent' && !open) { + return null; + } + return child; + })} +
+ ); + }, + OGDialogTrigger: ({ children, asChild, onOpenChange }: any) => { + if (asChild && React.isValidElement(children)) { + return React.cloneElement(children as React.ReactElement, { + onClick: (e: any) => { + (children as any).props?.onClick?.(e); + onOpenChange?.(true); + }, + }); + } + return
onOpenChange?.(true)}>{children}
; + }, + OGDialogContent: ({ children }: any) =>
{children}
, + Label: ({ children, className }: any) => {children}, + }; +}); + +// Create wrapper with QueryClient +const createWrapper = () => { + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }); + + return ({ children }: { children: React.ReactNode }) => ( + {children} + ); +}; + describe('AgentCard', () => { const mockAgent: t.Agent = { id: '1', @@ -69,22 +150,30 @@ describe('AgentCard', () => { }, }; - const mockOnClick = jest.fn(); + const mockOnSelect = jest.fn(); + const Wrapper = createWrapper(); beforeEach(() => { - mockOnClick.mockClear(); + mockOnSelect.mockClear(); }); it('renders agent information correctly', () => { - render(); + render( + + + , + ); expect(screen.getByText('Test Agent')).toBeInTheDocument(); expect(screen.getByText('A test agent for testing purposes')).toBeInTheDocument(); - expect(screen.getByText('Test Support')).toBeInTheDocument(); }); it('displays avatar when provided as object', () => { - render(); + render( + + + , + ); const avatarImg = screen.getByAltText('Test Agent avatar'); expect(avatarImg).toBeInTheDocument(); @@ -97,7 +186,11 @@ describe('AgentCard', () => { avatar: '/string-avatar.png' as any, // Legacy support for string avatars }; - render(); + render( + + + , + ); const avatarImg = screen.getByAltText('Test Agent avatar'); expect(avatarImg).toBeInTheDocument(); @@ -110,51 +203,73 @@ describe('AgentCard', () => { avatar: undefined, }; - render(); + render( + + + , + ); // Check for Feather icon presence by looking for the svg with lucide-feather class const featherIcon = document.querySelector('.lucide-feather'); expect(featherIcon).toBeInTheDocument(); }); - it('calls onClick when card is clicked', () => { - render(); + it('card is clickable and has dialog trigger', () => { + render( + + + , + ); const card = screen.getByRole('button'); - fireEvent.click(card); - - expect(mockOnClick).toHaveBeenCalledTimes(1); + // Card should be clickable - the actual dialog behavior is handled by Radix + expect(card).toBeInTheDocument(); + expect(() => fireEvent.click(card)).not.toThrow(); }); - it('calls onClick when Enter key is pressed', () => { - render(); + it('handles Enter key press', () => { + render( + + + , + ); const card = screen.getByRole('button'); - fireEvent.keyDown(card, { key: 'Enter' }); - - expect(mockOnClick).toHaveBeenCalledTimes(1); + // Card should respond to keyboard - the actual dialog behavior is handled by Radix + expect(() => fireEvent.keyDown(card, { key: 'Enter' })).not.toThrow(); }); - it('calls onClick when Space key is pressed', () => { - render(); + it('handles Space key press', () => { + render( + + + , + ); const card = screen.getByRole('button'); - fireEvent.keyDown(card, { key: ' ' }); - - expect(mockOnClick).toHaveBeenCalledTimes(1); + // Card should respond to keyboard - the actual dialog behavior is handled by Radix + expect(() => fireEvent.keyDown(card, { key: ' ' })).not.toThrow(); }); - it('does not call onClick for other keys', () => { - render(); + it('does not call onSelect for other keys', () => { + render( + + + , + ); const card = screen.getByRole('button'); fireEvent.keyDown(card, { key: 'Escape' }); - expect(mockOnClick).not.toHaveBeenCalled(); + expect(mockOnSelect).not.toHaveBeenCalled(); }); it('applies additional className when provided', () => { - render(); + render( + + + , + ); const card = screen.getByRole('button'); expect(card).toHaveClass('custom-class'); @@ -167,11 +282,14 @@ describe('AgentCard', () => { authorName: undefined, }; - render(); + render( + + + , + ); expect(screen.getByText('Test Agent')).toBeInTheDocument(); expect(screen.getByText('A test agent for testing purposes')).toBeInTheDocument(); - expect(screen.queryByText(/Created by/)).not.toBeInTheDocument(); }); it('displays authorName when support_contact is missing', () => { @@ -181,54 +299,21 @@ describe('AgentCard', () => { authorName: 'John Doe', }; - render(); + render( + + + , + ); - expect(screen.getByText('John Doe')).toBeInTheDocument(); - }); - - it('displays support_contact email when name is missing', () => { - const agentWithEmailOnly = { - ...mockAgent, - support_contact: { email: 'contact@example.com' }, - authorName: undefined, - }; - - render(); - - expect(screen.getByText('contact@example.com')).toBeInTheDocument(); - }); - - it('prioritizes support_contact name over authorName', () => { - const agentWithBoth = { - ...mockAgent, - support_contact: { name: 'Support Team' }, - authorName: 'John Doe', - }; - - render(); - - expect(screen.getByText('Support Team')).toBeInTheDocument(); - expect(screen.queryByText('John Doe')).not.toBeInTheDocument(); - }); - - it('prioritizes name over email in support_contact', () => { - const agentWithNameAndEmail = { - ...mockAgent, - support_contact: { - name: 'Support Team', - email: 'support@example.com', - }, - authorName: undefined, - }; - - render(); - - expect(screen.getByText('Support Team')).toBeInTheDocument(); - expect(screen.queryByText('support@example.com')).not.toBeInTheDocument(); + expect(screen.getByText('by John Doe')).toBeInTheDocument(); }); it('has proper accessibility attributes', () => { - render(); + render( + + + , + ); const card = screen.getByRole('button'); expect(card).toHaveAttribute('tabIndex', '0'); @@ -244,7 +329,11 @@ describe('AgentCard', () => { category: 'general', }; - render(); + render( + + + , + ); expect(screen.getByText('General')).toBeInTheDocument(); }); @@ -255,7 +344,11 @@ describe('AgentCard', () => { category: 'custom', }; - render(); + render( + + + , + ); expect(screen.getByText('Custom Category')).toBeInTheDocument(); }); @@ -266,15 +359,35 @@ describe('AgentCard', () => { category: 'unknown', }; - render(); + render( + + + , + ); expect(screen.getByText('Unknown')).toBeInTheDocument(); }); it('does not display category tag when category is not provided', () => { - render(); + render( + + + , + ); expect(screen.queryByText('General')).not.toBeInTheDocument(); expect(screen.queryByText('Unknown')).not.toBeInTheDocument(); }); + + it('works without onSelect callback', () => { + render( + + + , + ); + + const card = screen.getByRole('button'); + // Should not throw when clicking without onSelect + expect(() => fireEvent.click(card)).not.toThrow(); + }); }); diff --git a/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx b/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx index cad18ea809..87a96acb87 100644 --- a/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx +++ b/client/src/components/Agents/tests/AgentGrid.integration.spec.tsx @@ -69,8 +69,8 @@ jest.mock('../ErrorDisplay', () => ({ // Mock AgentCard component jest.mock('../AgentCard', () => ({ __esModule: true, - default: ({ agent, onClick }: { agent: t.Agent; onClick: () => void }) => ( -
+ default: ({ agent, onSelect }: { agent: t.Agent; onSelect?: (agent: t.Agent) => void }) => ( +
onSelect?.(agent)}>

{agent.name}

{agent.description}

diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json index e97f74ad68..a2f99deae6 100644 --- a/client/src/locales/en/translation.json +++ b/client/src/locales/en/translation.json @@ -34,6 +34,7 @@ "com_agents_copy_link": "Copy Link", "com_agents_create_error": "There was an error creating your agent.", "com_agents_created_by": "by", + "com_agents_description_card": "Description: {{description}}", "com_agents_description_placeholder": "Optional: Describe your Agent here", "com_agents_empty_state_heading": "No agents found", "com_agents_enable_file_search": "Enable File Search",