Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-21 21:50:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 style: Theming and Consistency Improvements for Agent Marketplace

Browse source 
style: AccessRolesPicker to use DropdownPopup, theming, import order, localization

refactor: Update localization keys for Agent Marketplace in NewChat component, remove duplicate key

style: Adjust layout and font size in NewChat component for Agent Marketplace button

style: theming in AgentGrid

style: Update theming and text colors across Agent components for improved consistency

chore: import order

style: Replace Dialog with OGDialog and update content components in AgentDetail

refactor: Simplify AgentDetail component by removing dropdown menu and replacing it with a copy link button

style: Enhance scrollbar visibility and layout in AgentMarketplace and CategoryTabs components

style: Adjust layout in AgentMarketplace component by removing unnecessary padding from the container

style: Refactor layout in AgentMarketplace component by reorganizing hero section and sticky wrapper for improved structure with collapsible header effect

style: Improve responsiveness and layout in AgentMarketplace component by adjusting header visibility and modifying container styles based on screen size

fix: Update localization key for no categories message in CategoryTabs component and corresponding test

style: Add className prop to OpenSidebar component for improved styling flexibility and update Header to utilize it for responsive design

style: Enhance layout and scrolling behavior in CategoryTabs component by adding scroll snap properties and adjusting class names for improved user experience

style: Update AgentGrid component layout and skeleton structure for improved visual consistency and responsiveness
This commit is contained in:
Danny Avila 2025-07-24 18:41:28 -04:00
parent 949682ef0f
commit 75324e1c7e
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
13 changed files with 331 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/Header.tsx
View file

@ -48,7 +48,7 @@ export default function Header() {
: 'pointer-events-none translate-x-[-100px] opacity-0'
}`}
>
<OpenSidebar setNavVisible={setNavVisible} />
<OpenSidebar setNavVisible={setNavVisible} className="max-md:hidden" />
<HeaderNewChat />
</div>
<div

8
client/src/components/Chat/Menus/OpenSidebar.tsx
View file

@ -1,10 +1,13 @@
import { TooltipAnchor, Button, Sidebar } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function OpenSidebar({
setNavVisible,
className,
}: {
setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
className?: string;
}) {
const localize = useLocalize();
return (
@ -16,7 +19,10 @@ export default function OpenSidebar({
variant="outline"
data-testid="open-sidebar-button"
aria-label={localize('com_nav_open_sidebar')}
className="rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover"
className={cn(
'rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover',
className,
)}
onClick={() =>
setNavVisible((prev) => {
localStorage.setItem('navVisible', JSON.stringify(!prev));

10
client/src/components/Nav/NewChat.tsx
View file

@ -113,20 +113,20 @@ export default function NewChat({
{/* Agent Marketplace button - separate row like ChatGPT */}
{showAgentMarketplace && (
<div className="flex px-2 pb-4 pt-2 md:px-3">
<div className="flex">
<TooltipAnchor
description={localize('com_nav_agents_marketplace')}
description={localize('com_agents_marketplace')}
render={
<Button
variant="outline"
data-testid="nav-agents-marketplace-button"
aria-label={localize('com_nav_agents_marketplace')}
aria-label={localize('com_agents_marketplace')}
className="flex w-full items-center justify-start gap-3 rounded-xl border-none bg-transparent p-3 text-left hover:bg-surface-hover"
onClick={handleAgentMarketplace}
>
<LayoutGrid className="h-5 w-5 flex-shrink-0" />
<span className="truncate text-base font-medium">
{localize('com_nav_agents_marketplace')}
<span className="truncate text-sm font-medium">
{localize('com_agents_marketplace')}
</span>
</Button>
}

12
client/src/components/SidePanel/Agents/AgentCard.tsx
View file

@ -24,7 +24,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
'group relative flex overflow-hidden rounded-2xl',
'cursor-pointer transition-colors duration-200',
'aspect-[5/2.5] w-full',
'bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600',
'bg-surface-tertiary hover:bg-surface-hover-alt',
className,
)}
onClick={onClick}
@ -51,7 +51,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
{/* Agent info section - right side, responsive */}
<div className="flex min-w-0 flex-1 flex-col justify-center">
{/* Agent name - responsive text sizing */}
<h3 className="mb-1 line-clamp-1 text-base font-bold text-gray-900 dark:text-white sm:mb-2 sm:text-lg">
<h3 className="mb-1 line-clamp-1 text-base font-bold text-text-primary sm:mb-2 sm:text-lg">
{agent.name}
</h3>
@ -59,13 +59,15 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
<p
id={`agent-${agent.id}-description`}
className={cn(
'mb-1 line-clamp-2 text-xs leading-relaxed text-gray-600 dark:text-gray-300',
'mb-1 line-clamp-2 text-xs leading-relaxed text-text-secondary',
'sm:mb-2 sm:text-sm',
)}
aria-label={`Description: ${agent.description || localize('com_agents_no_description')}`}
>
{agent.description || (
<span className="italic text-gray-400">{localize('com_agents_no_description')}</span>
<span className="italic text-text-secondary">
{localize('com_agents_no_description')}
</span>
)}
</p>
@ -75,7 +77,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
if (displayName) {
return (
<div className="flex items-center text-xs text-gray-500 dark:text-gray-400 sm:text-sm">
<div className="flex items-center text-xs text-text-tertiary sm:text-sm">
<span className="font-light">{localize('com_agents_created_by')}</span>
<span className="ml-1 font-bold">{displayName}</span>
</div>

89
client/src/components/SidePanel/Agents/AgentDetail.tsx
View file

@ -1,6 +1,7 @@
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef } from 'react';
import { Link } from 'lucide-react';
import { useQueryClient } from '@tanstack/react-query';
import { Dialog, DialogContent, Button, DotsIcon, useToastContext } from '@librechat/client';
import { OGDialog, OGDialogContent, Button, useToastContext } from '@librechat/client';
import {
QueryKeys,
Constants,
@ -37,26 +38,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
const { conversation, newConversation } = useChatContext();
const { showToast } = useToastContext();
const dialogRef = useRef<HTMLDivElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const [dropdownOpen, setDropdownOpen] = useState(false);
const queryClient = useQueryClient();
// Close dropdown when clicking outside the dropdown menu
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownOpen &&
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setDropdownOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [dropdownOpen]);
/**
* Navigate to chat with the selected agent
@ -143,63 +125,46 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
};
return (
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
<DialogContent ref={dialogRef} className="max-h-[90vh] overflow-y-auto py-8 sm:max-w-[450px]">
{/* Context menu - top right */}
<div ref={dropdownRef} className="absolute right-12 top-5 z-50">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-lg text-text-secondary hover:bg-surface-hover hover:text-text-primary dark:hover:bg-surface-hover"
aria-label={localize('com_agents_more_options')}
aria-expanded={dropdownOpen}
aria-haspopup="menu"
onClick={(e) => {
e.stopPropagation();
setDropdownOpen(!dropdownOpen);
}}
>
<DotsIcon className="h-4 w-4" />
</Button>
{/* Simple dropdown menu */}
{dropdownOpen && (
<div className="absolute right-0 top-10 z-[9999] w-48 rounded-xl border border-border-light bg-surface-primary py-1 shadow-lg dark:bg-surface-secondary dark:shadow-2xl">
<button
onClick={(e) => {
e.stopPropagation();
setDropdownOpen(false);
handleCopyLink();
}}
className="w-full px-3 py-2 text-left text-sm text-text-primary transition-colors hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
>
{localize('com_agents_copy_link')}
</button>
</div>
)}
</div>
<OGDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
<OGDialogContent
ref={dialogRef}
className="max-h-[90vh] overflow-y-auto py-8 sm:max-w-[450px]"
>
{/* Copy link button - positioned next to close button */}
<Button
variant="ghost"
size="icon"
className="absolute right-11 top-4 h-4 w-4 rounded-sm p-0 opacity-70 ring-ring-primary ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
aria-label={localize('com_agents_copy_link')}
onClick={handleCopyLink}
title={localize('com_agents_copy_link')}
>
<Link />
</Button>
{/* Agent avatar - top center */}
<div className="mt-6 flex justify-center">{renderAgentAvatar(agent, { size: 'xl' })}</div>
{/* Agent name - center aligned below image */}
<div className="mt-3 text-center">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
<h2 className="text-2xl font-bold text-text-primary">
{agent?.name || localize('com_agents_loading')}
</h2>
</div>
{/* Contact info - center aligned below name */}
{agent?.support_contact && formatContact() && (
<div className="mt-1 text-center text-sm text-gray-600 dark:text-gray-400">
<div className="mt-1 text-center text-sm text-text-secondary">
{localize('com_agents_contact')}: {formatContact()}
</div>
)}
{/* Agent description - below contact */}
<div className="mt-4 whitespace-pre-wrap px-6 text-center text-base text-gray-700 dark:text-gray-300">
<div className="mt-4 whitespace-pre-wrap px-6 text-center text-base text-text-primary">
{agent?.description || (
<span className="italic text-gray-400">{localize('com_agents_no_description')}</span>
<span className="italic text-text-tertiary">
{localize('com_agents_no_description')}
</span>
)}
</div>
@ -209,8 +174,8 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
{localize('com_agents_start_chat')}
</Button>
</div>
</DialogContent>
</Dialog>
</OGDialogContent>
</OGDialog>
);
};

39
client/src/components/SidePanel/Agents/AgentGrid.tsx
View file

@ -3,8 +3,7 @@ import { Button, Spinner } from '@librechat/client';
import { PERMISSION_BITS } from 'librechat-data-provider';
import type t from 'librechat-data-provider';
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
import { useAgentCategories } from '~/hooks/Agents';
import useLocalize from '~/hooks/useLocalize';
import { useAgentCategories, useLocalize } from '~/hooks';
import { useHasData } from './SmartLoader';
import ErrorDisplay from './ErrorDisplay';
import AgentCard from './AgentCard';
@ -124,8 +123,8 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
const loadingSkeleton = (
<div className="space-y-6">
<div className="mb-4">
<div className="mb-2 h-6 w-48 animate-pulse rounded-md bg-gray-200 dark:bg-gray-700"></div>
<div className="h-4 w-64 animate-pulse rounded-md bg-gray-200 dark:bg-gray-700"></div>
<div className="mb-2 h-6 w-48 animate-pulse rounded-md bg-surface-tertiary"></div>
<div className="h-4 w-64 animate-pulse rounded-md bg-surface-tertiary"></div>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{Array(6)
@ -134,15 +133,21 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
<div
key={index}
className={cn(
'flex h-[250px] animate-pulse flex-col overflow-hidden rounded-lg',
'bg-gray-200 dark:bg-gray-800',
'flex animate-pulse overflow-hidden rounded-2xl',
'aspect-[5/2.5] w-full',
'bg-surface-tertiary',
)}
>
<div className="h-40 bg-gray-300 dark:bg-gray-700"></div>
<div className="flex-1 p-5">
<div className="mb-3 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-700"></div>
<div className="mb-2 h-3 w-full rounded bg-gray-300 dark:bg-gray-700"></div>
<div className="h-3 w-2/3 rounded bg-gray-300 dark:bg-gray-700"></div>
<div className="flex h-full gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
{/* Avatar skeleton */}
<div className="flex flex-shrink-0 items-center">
<div className="h-10 w-10 rounded-full bg-surface-secondary sm:h-12 sm:w-12"></div>
</div>
{/* Content skeleton */}
<div className="flex flex-1 flex-col justify-center space-y-2">
<div className="h-4 w-3/4 rounded bg-surface-secondary"></div>
<div className="h-3 w-full rounded bg-surface-secondary"></div>
</div>
</div>
</div>
))}
@ -178,7 +183,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
{searchQuery && (
<div className="mb-4">
<h2
className="text-xl font-bold text-gray-900 dark:text-white"
className="text-xl font-bold text-text-primary"
id={`category-heading-${category}`}
aria-label={`${getGridTitle()}, ${currentAgents.length || 0} agents available`}
>
@ -190,7 +195,7 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
{/* Handle empty results with enhanced accessibility */}
{(!currentAgents || currentAgents.length === 0) && !isLoading && !isFetching ? (
<div
className="py-12 text-center text-gray-500"
className="py-12 text-center text-text-secondary"
role="status"
aria-live="polite"
aria-label={
@ -258,11 +263,9 @@ const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAg
variant="outline"
onClick={handleLoadMore}
className={cn(
'min-w-[160px] border-2 border-gray-300 bg-white px-6 py-3 font-medium text-gray-700',
'shadow-sm transition-all duration-200 hover:border-gray-400 hover:bg-gray-50',
'hover:shadow-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200',
'dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:focus:ring-blue-400',
'min-w-[160px] border-2 border-border-medium bg-surface-primary px-6 py-3 font-medium text-text-primary',
'shadow-sm transition-all duration-200 hover:border-border-heavy hover:bg-surface-hover',
'hover:shadow-md focus:ring-2 focus:ring-ring focus:ring-offset-2',
)}
aria-label={localize('com_agents_load_more_label', {
category: getCategoryDisplayName(category),

264
client/src/components/SidePanel/Agents/AgentMarketplace.tsx
View file

@ -1,9 +1,9 @@
import React, { useState, useEffect, useMemo } from 'react';
import { useRecoilState } from 'recoil';
import { useOutletContext } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
import { useSetRecoilState, useRecoilValue } from 'recoil';
import { TooltipAnchor, Button, NewChatIcon } from '@librechat/client';
import { useSearchParams, useParams, useNavigate } from 'react-router-dom';
import { TooltipAnchor, Button, NewChatIcon, useMediaQuery } from '@librechat/client';
import { PermissionTypes, Permissions, QueryKeys, Constants } from 'librechat-data-provider';
import type t from 'librechat-data-provider';
import type { ContextType } from '~/common';
@ -17,6 +17,7 @@ import CategoryTabs from './CategoryTabs';
import AgentDetail from './AgentDetail';
import SearchBar from './SearchBar';
import AgentGrid from './AgentGrid';
import { cn } from '~/utils';
import store from '~/store';
interface AgentMarketplaceProps {
@ -33,13 +34,14 @@ interface AgentMarketplaceProps {
const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) => {
const localize = useLocalize();
const navigate = useNavigate();
const queryClient = useQueryClient();
const { conversation, newConversation } = useChatContext();
const [searchParams, setSearchParams] = useSearchParams();
const { category } = useParams();
const setHideSidePanel = useSetRecoilState(store.hideSidePanel);
const hideSidePanel = useRecoilValue(store.hideSidePanel);
const queryClient = useQueryClient();
const [searchParams, setSearchParams] = useSearchParams();
const { conversation, newConversation } = useChatContext();
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const { navVisible, setNavVisible } = useOutletContext<ContextType>();
const [hideSidePanel, setHideSidePanel] = useRecoilState(store.hideSidePanel);
// Get URL parameters (default to 'promoted' instead of 'all')
const activeTab = category || 'promoted';
@ -203,123 +205,145 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
fullPanelCollapse={fullCollapse}
defaultCollapsed={defaultCollapsed}
>
<main className="flex h-full flex-col overflow-y-auto" role="main">
{/* Simplified header for agents marketplace - only show nav controls when needed */}
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
<div className="mx-1 flex items-center gap-2">
{!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
{!navVisible && (
<TooltipAnchor
description={localize('com_ui_new_chat')}
render={
<Button
size="icon"
variant="outline"
data-testid="agents-new-chat-button"
aria-label={localize('com_ui_new_chat')}
className="rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover max-md:hidden"
onClick={handleNewChat}
>
<NewChatIcon />
</Button>
}
/>
)}
</div>
</div>
<div className="container mx-auto max-w-4xl px-4 py-8">
{/* Hero Section - ChatGPT Style */}
<div className="mb-8 mt-12 text-center">
<h1 className="mb-3 text-5xl font-bold tracking-tight text-gray-900 dark:text-white">
{localize('com_agents_marketplace')}
</h1>
<p className="mx-auto mb-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
{localize('com_agents_marketplace_subtitle')}
</p>
{/* Search bar */}
<div className="mx-auto max-w-2xl">
<SearchBar value={searchQuery} onSearch={handleSearch} />
</div>
</div>
{/* Category tabs */}
<CategoryTabs
categories={categoriesQuery.data || []}
activeTab={activeTab}
isLoading={categoriesQuery.isLoading}
onChange={handleTabChange}
/>
{/* Category header - only show when not searching */}
{!searchQuery && (
<div className="mb-6">
{(() => {
// Get category data for display
const getCategoryData = () => {
if (activeTab === 'promoted') {
return {
name: localize('com_agents_top_picks'),
description: localize('com_agents_recommended'),
};
}
if (activeTab === 'all') {
return {
name: 'All Agents',
description: 'Browse all shared agents across all categories',
};
}
// Find the category in the API data
const categoryData = categoriesQuery.data?.find(
(cat) => cat.value === activeTab,
);
if (categoryData) {
return {
name: categoryData.label,
description: categoryData.description || '',
};
}
// Fallback for unknown categories
return {
name: activeTab.charAt(0).toUpperCase() + activeTab.slice(1),
description: '',
};
};
const { name, description } = getCategoryData();
return (
<div className="text-left">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
{name}
</h2>
{description && (
<p className="mt-2 text-gray-600 dark:text-gray-300">{description}</p>
)}
</div>
);
})()}
<main className="flex h-full flex-col overflow-hidden" role="main">
{/* Scrollable container */}
<div className="scrollbar-gutter-stable flex h-full flex-col overflow-y-auto overflow-x-hidden">
{/* Simplified header for agents marketplace - only show nav controls when needed */}
{!isSmallScreen && (
<div className="sticky top-0 z-20 flex items-center justify-between bg-surface-secondary p-2 font-semibold text-text-primary md:h-14">
<div className="mx-1 flex items-center gap-2">
{!navVisible ? (
<>
<OpenSidebar setNavVisible={setNavVisible} />
<TooltipAnchor
description={localize('com_ui_new_chat')}
render={
<Button
size="icon"
variant="outline"
data-testid="agents-new-chat-button"
aria-label={localize('com_ui_new_chat')}
className="rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover max-md:hidden"
onClick={handleNewChat}
>
<NewChatIcon />
</Button>
}
/>
</>
) : (
// Invisible placeholder to maintain height
<div className="h-10 w-10" />
)}
</div>
</div>
)}
{/* Agent grid */}
<AgentGrid
category={activeTab}
searchQuery={searchQuery}
onSelectAgent={handleAgentSelect}
/>
</div>
{/* Hero Section - scrolls away */}
<div className="container mx-auto max-w-4xl">
<div className={cn('mb-8 text-center', isSmallScreen ? 'mt-6' : 'mt-12')}>
<h1 className="mb-3 text-3xl font-bold tracking-tight text-text-primary md:text-5xl">
{localize('com_agents_marketplace')}
</h1>
<p className="mx-auto mb-6 max-w-2xl text-lg text-text-secondary">
{localize('com_agents_marketplace_subtitle')}
</p>
</div>
</div>
{/* Agent detail dialog */}
{isDetailOpen && selectedAgent && (
<AgentDetail
agent={selectedAgent}
isOpen={isDetailOpen}
onClose={handleDetailClose}
/>
)}
{/* Sticky wrapper for search bar and categories */}
<div
className={cn(
'sticky z-10 bg-presentation pb-4',
isSmallScreen ? 'top-0' : 'top-14',
)}
>
<div className="container mx-auto max-w-4xl px-4">
{/* Search bar */}
<div className="mx-auto max-w-2xl pb-6">
<SearchBar value={searchQuery} onSearch={handleSearch} />
</div>
{/* Category tabs */}
<CategoryTabs
categories={categoriesQuery.data || []}
activeTab={activeTab}
isLoading={categoriesQuery.isLoading}
onChange={handleTabChange}
/>
</div>
</div>
{/* Scrollable content area */}
<div className="container mx-auto max-w-4xl px-4 pb-8">
{/* Category header - only show when not searching */}
{!searchQuery && (
<div className="mb-6 mt-6">
{(() => {
// Get category data for display
const getCategoryData = () => {
if (activeTab === 'promoted') {
return {
name: localize('com_agents_top_picks'),
description: localize('com_agents_recommended'),
};
}
if (activeTab === 'all') {
return {
name: 'All Agents',
description: 'Browse all shared agents across all categories',
};
}
// Find the category in the API data
const categoryData = categoriesQuery.data?.find(
(cat) => cat.value === activeTab,
);
if (categoryData) {
return {
name: categoryData.label,
description: categoryData.description || '',
};
}
// Fallback for unknown categories
return {
name: activeTab.charAt(0).toUpperCase() + activeTab.slice(1),
description: '',
};
};
const { name, description } = getCategoryData();
return (
<div className="text-left">
<h2 className="text-2xl font-bold text-text-primary">{name}</h2>
{description && (
<p className="mt-2 text-text-secondary">{description}</p>
)}
</div>
);
})()}
</div>
)}
{/* Agent grid */}
<AgentGrid
category={activeTab}
searchQuery={searchQuery}
onSelectAgent={handleAgentSelect}
/>
</div>
{/* Agent detail dialog */}
{isDetailOpen && selectedAgent && (
<AgentDetail
agent={selectedAgent}
isOpen={isDetailOpen}
onClose={handleDetailClose}
/>
)}
</div>
</main>
</SidePanelGroup>
</SidePanelProvider>

104
client/src/components/SidePanel/Agents/CategoryTabs.tsx
View file

@ -1,7 +1,5 @@
import React from 'react';
import type t from 'librechat-data-provider';
import useLocalize from '~/hooks/useLocalize';
import { SmartLoader } from './SmartLoader';
import { cn } from '~/utils';
@ -50,16 +48,14 @@ const CategoryTabs: React.FC<CategoryTabsProps> = ({
// Loading skeleton component
const loadingSkeleton = (
<div className="mb-8">
<div className="flex justify-center">
<div className="flex flex-wrap items-center justify-center gap-6">
{[...Array(6)].map((_, i) => (
<div
key={i}
className="h-6 min-w-[60px] animate-pulse rounded bg-gray-200 dark:bg-gray-700"
/>
))}
</div>
<div className="w-full pb-2">
<div className="no-scrollbar flex gap-1.5 overflow-x-auto px-4">
{[...Array(6)].map((_, i) => (
<div
key={i}
className="h-[36px] min-w-[80px] animate-pulse rounded-md bg-surface-tertiary"
/>
))}
</div>
</div>
);
@ -106,52 +102,54 @@ const CategoryTabs: React.FC<CategoryTabsProps> = ({
// Early return if no categories available
if (!isLoading && (!categories || categories.length === 0)) {
return (
<div className="mb-8 text-center text-gray-500">{localize('com_agents_no_categories')}</div>
<div className="text-center text-text-secondary">{localize('com_ui_no_categories')}</div>
);
}
// Main tabs content
const tabsContent = (
<div className="mb-8">
<div className="flex justify-center">
{/* Accessible tab navigation with proper ARIA attributes */}
<div
className="flex flex-wrap items-center justify-center gap-6"
role="tablist"
aria-label={localize('com_agents_category_tabs_label')}
aria-orientation="horizontal"
>
{categories.map((category, index) => (
<button
key={category.value}
id={`category-tab-${category.value}`}
onClick={() => onChange(category.value)}
onKeyDown={(e) => handleKeyDown(e, category.value)}
className={cn(
'relative px-4 py-2 text-sm font-medium transition-colors duration-200',
'focus:bg-gray-100 focus:outline-none dark:focus:bg-gray-800',
'hover:text-gray-900 dark:hover:text-white',
activeTab === category.value
? 'text-gray-900 dark:text-white'
: 'text-gray-600 dark:text-gray-400',
)}
role="tab"
aria-selected={activeTab === category.value}
aria-controls={`tabpanel-${category.value}`}
tabIndex={activeTab === category.value ? 0 : -1}
aria-label={`${getCategoryDisplayName(category)} tab (${index + 1} of ${categories.length})`}
>
<span className="truncate">{getCategoryDisplayName(category)}</span>
{/* Underline for active tab */}
{activeTab === category.value && (
<div
className="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-gray-900 dark:bg-white"
aria-hidden="true"
/>
)}
</button>
))}
</div>
<div className="relative w-full pb-2">
<div
className="no-scrollbar flex gap-1.5 overflow-x-auto overscroll-x-contain px-4 [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
role="tablist"
aria-label={localize('com_agents_category_tabs_label')}
aria-orientation="horizontal"
style={{
scrollSnapType: 'x mandatory',
WebkitOverflowScrolling: 'touch',
}}
>
{categories.map((category, index) => (
<button
key={category.value}
id={`category-tab-${category.value}`}
onClick={() => onChange(category.value)}
onKeyDown={(e) => handleKeyDown(e, category.value)}
className={cn(
'relative mt-1 cursor-pointer select-none whitespace-nowrap rounded-md px-3 py-2',
activeTab === category.value
? 'bg-surface-tertiary text-text-primary'
: 'bg-surface-secondary text-text-secondary hover:bg-surface-hover hover:text-text-primary',
)}
style={{
scrollSnapAlign: 'start',
}}
role="tab"
aria-selected={activeTab === category.value}
aria-controls={`tabpanel-${category.value}`}
tabIndex={activeTab === category.value ? 0 : -1}
aria-label={`${getCategoryDisplayName(category)} tab (${index + 1} of ${categories.length})`}
>
{getCategoryDisplayName(category)}
{/* Underline for active tab */}
{activeTab === category.value && (
<div
className="absolute bottom-0 left-0 right-0 h-0.5 bg-text-primary"
aria-hidden="true"
/>
)}
</button>
))}
</div>
</div>
);

6
client/src/components/SidePanel/Agents/SearchBar.tsx
View file

@ -73,7 +73,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onSearch, className = '' }
value={searchTerm}
onChange={handleChange}
placeholder={localize('com_agents_search_placeholder')}
className="h-14 rounded-2xl border-2 border-gray-200 bg-white pl-12 pr-12 text-lg text-gray-900 shadow-lg placeholder:text-gray-500 focus:border-gray-300 focus:ring-0 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-gray-500"
className="h-14 rounded-2xl border-2 border-border-medium bg-transparent pl-12 pr-12 text-lg text-text-primary shadow-lg placeholder:text-text-tertiary focus:border-border-heavy focus:ring-0"
aria-label={localize('com_agents_search_aria')}
aria-describedby="search-instructions search-results-count"
autoComplete="off"
@ -82,7 +82,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onSearch, className = '' }
{/* Search icon with proper accessibility */}
<div className="absolute inset-y-0 left-0 flex items-center pl-4" aria-hidden="true">
<Search className="h-6 w-6 text-gray-400" />
<Search className="h-6 w-6 text-text-tertiary" />
</div>
{/* Hidden instructions for screen readers */}
@ -95,7 +95,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value, onSearch, className = '' }
<button
type="button"
onClick={handleClear}
className="group absolute right-3 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-gray-400 transition-colors duration-150 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-500 dark:hover:bg-gray-400"
className="group absolute right-3 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-text-tertiary transition-colors duration-150 hover:bg-text-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
aria-label={localize('com_agents_clear_search')}
title={localize('com_agents_clear_search')}
>

75
client/src/components/SidePanel/Agents/Sharing/AccessRolesPicker.tsx
View file

@ -1,9 +1,13 @@
import React from 'react';
import * as Ariakit from '@ariakit/react';
import { ChevronDown } from 'lucide-react';
import { DropdownPopup } from '@librechat/client';
import { ACCESS_ROLE_IDS } from 'librechat-data-provider';
import type { AccessRole } from 'librechat-data-provider';
import { useGetAccessRolesQuery } from 'librechat-data-provider/react-query';
import SelectDropDownPop from '~/components/Input/ModelSelect/SelectDropDownPop';
import type { AccessRole } from 'librechat-data-provider';
import type * as t from '~/common';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
interface AccessRolesPickerProps {
resourceType?: string;
@ -19,6 +23,7 @@ export default function AccessRolesPicker({
className = '',
}: AccessRolesPickerProps) {
const localize = useLocalize();
const [isOpen, setIsOpen] = React.useState(false);
// Fetch access roles from API
const { data: accessRoles, isLoading: rolesLoading } = useGetAccessRolesQuery(resourceType);
@ -56,43 +61,61 @@ export default function AccessRolesPicker({
// Find the currently selected role
const selectedRole = accessRoles?.find((role) => role.accessRoleId === selectedRoleId);
const selectedRoleInfo = selectedRole ? getLocalizedRoleInfo(selectedRole.accessRoleId) : null;
if (rolesLoading || !accessRoles) {
return (
<div className={className}>
<div className="flex items-center justify-center py-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
<span className="ml-2 text-sm text-gray-500">Loading roles...</span>
<div className="h-4 w-4 animate-spin rounded-full border-2 border-border-light border-t-blue-600"></div>
<span className="ml-2 text-sm text-text-secondary">{localize('com_ui_loading')}</span>
</div>
</div>
);
}
const dropdownItems: t.MenuItemProps[] = accessRoles.map((role: AccessRole) => {
const localizedInfo = getLocalizedRoleInfo(role.accessRoleId);
return {
id: role.accessRoleId,
label: localizedInfo.name,
onClick: () => {
onRoleChange(role.accessRoleId);
setIsOpen(false);
},
render: (props) => (
<button {...props}>
<div className="flex flex-col items-start gap-0.5 text-left">
<span className="font-medium text-text-primary">{localizedInfo.name}</span>
<span className="text-xs text-text-secondary">{localizedInfo.description}</span>
</div>
</button>
),
};
});
return (
<div className={className}>
<SelectDropDownPop
availableValues={accessRoles.map((role: AccessRole) => {
const localizedInfo = getLocalizedRoleInfo(role.accessRoleId);
return {
value: role.accessRoleId,
label: localizedInfo.name,
description: localizedInfo.description,
};
})}
showLabel={false}
value={
selectedRole
? (() => {
const localizedInfo = getLocalizedRoleInfo(selectedRole.accessRoleId);
return {
value: selectedRole.accessRoleId,
label: localizedInfo.name,
description: localizedInfo.description,
};
})()
: null
<DropdownPopup
menuId="access-roles-menu"
isOpen={isOpen}
setIsOpen={setIsOpen}
trigger={
<Ariakit.MenuButton
aria-label={selectedRoleInfo?.description || 'Select role'}
className={cn(
'flex items-center justify-between gap-2 rounded-lg border border-border-light bg-surface-primary px-3 py-2 text-sm transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-ring-primary',
'min-w-[200px]',
)}
>
<span className="font-medium">
{selectedRoleInfo?.name || localize('com_ui_select')}
</span>
<ChevronDown className="h-4 w-4 text-text-secondary" />
</Ariakit.MenuButton>
}
setValue={onRoleChange}
items={dropdownItems}
className="w-[280px]"
/>
</div>
);

7
client/src/components/SidePanel/Agents/__tests__/CategoryTabs.spec.tsx
View file

@ -10,7 +10,7 @@ jest.mock('~/hooks/useLocalize', () => () => (key: string) => {
const mockTranslations: Record<string, string> = {
com_agents_top_picks: 'Top Picks',
com_agents_all: 'All',
com_agents_no_categories: 'No categories available',
com_ui_no_categories: 'No categories available',
com_agents_category_tabs_label: 'Agent Categories',
com_ui_agent_category_general: 'General',
com_ui_agent_category_hr: 'HR',
@ -83,7 +83,7 @@ describe('CategoryTabs', () => {
);
const generalTab = screen.getByText('General').closest('button');
expect(generalTab).toHaveClass('text-gray-900');
expect(generalTab).toHaveClass('bg-surface-tertiary');
// Should have active underline
const underline = generalTab?.querySelector('.absolute.bottom-0');
@ -149,7 +149,8 @@ describe('CategoryTabs', () => {
);
const generalTab = screen.getByText('General').closest('button');
expect(generalTab).toHaveClass('text-gray-600');
expect(generalTab).toHaveClass('bg-surface-secondary');
expect(generalTab).toHaveClass('text-text-secondary');
// Should not have active underline
const underline = generalTab?.querySelector('.absolute.bottom-0');

2
client/src/locales/en/translation.json
View file

@ -935,6 +935,7 @@
"com_ui_no": "No",
"com_ui_no_backup_codes": "No backup codes available. Please generate new ones",
"com_ui_no_bookmarks": "it seems like you have no bookmarks yet. Click on a chat and add a new one",
"com_ui_no_categories": "No categories available",
"com_ui_no_category": "No category",
"com_ui_no_data": "something needs to go here. was empty",
"com_ui_no_personalization_available": "No personalization options are currently available",
@ -1246,7 +1247,6 @@
"com_agents_none_in_category": "No agents found in this category",
"com_agents_no_results": "No agents found. Try another search term.",
"com_agents_results_for": "Results for '{{query}}'",
"com_nav_agents_marketplace": "Agent Marketplace",
"com_agents_marketplace_subtitle": "Discover and use powerful AI agents to enhance your workflows and productivity",
"com_ui_agent_name_is_required": "Agent name is required",
"com_agents_missing_name": "Please type in a name before creating an agent."

11
client/src/style.css
View file

@ -2801,6 +2801,17 @@ html {
padding: 12px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.sharepoint-picker-bg{
background-color: #F5F5F5;
}