mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 18:30:15 +01:00
🔐 feat: Granular Role-based Permissions + Entra ID Group Discovery (#7804)
WIP: pre-granular-permissions commit
feat: Add category and support contact fields to Agent schema and UI components
Revert "feat: Add category and support contact fields to Agent schema and UI components"
This reverts commit c43a52b4c9.
Fix: Update import for renderHook in useAgentCategories.spec.tsx
fix: Update icon rendering in AgentCategoryDisplay tests to use empty spans
refactor: Improve category synchronization logic and clean up AgentConfig component
refactor: Remove unused UI flow translations from translation.json
feat: agent marketplace features
🔐 feat: Granular Role-based Permissions + Entra ID Group Discovery (#7804)
This commit is contained in:
Danny Avila
parent
abc32e66ce
commit
76d75030b9
147 changed files with 17564 additions and 645 deletions
273
client/src/components/SidePanel/Agents/AgentGrid.tsx
Normal file
273
client/src/components/SidePanel/Agents/AgentGrid.tsx
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Button, Spinner } from '@librechat/client';
|
||||
import type t from 'librechat-data-provider';
|
||||
import { useDynamicAgentQuery, useAgentCategories } from '~/hooks/Agents';
|
||||
import { SmartLoader, useHasData } from './SmartLoader';
|
||||
import useLocalize from '~/hooks/useLocalize';
|
||||
import ErrorDisplay from './ErrorDisplay';
|
||||
import AgentCard from './AgentCard';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface AgentGridProps {
|
||||
category: string; // Currently selected category
|
||||
searchQuery: string; // Current search query
|
||||
onSelectAgent: (agent: t.Agent) => void; // Callback when agent is selected
|
||||
}
|
||||
|
||||
// Interface for the actual data structure returned by the API
|
||||
interface AgentGridData {
|
||||
agents: t.Agent[];
|
||||
pagination?: {
|
||||
hasMore: boolean;
|
||||
current: number;
|
||||
total: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for displaying a grid of agent cards
|
||||
*/
|
||||
const AgentGrid: React.FC<AgentGridProps> = ({ category, searchQuery, onSelectAgent }) => {
|
||||
const localize = useLocalize();
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
// Get category data from API
|
||||
const { categories } = useAgentCategories();
|
||||
|
||||
// Single dynamic query that handles all cases - much cleaner!
|
||||
const {
|
||||
data: rawData,
|
||||
isLoading,
|
||||
error,
|
||||
isFetching,
|
||||
refetch,
|
||||
} = useDynamicAgentQuery({
|
||||
category,
|
||||
searchQuery,
|
||||
page,
|
||||
limit: 6,
|
||||
});
|
||||
|
||||
// Type the data properly
|
||||
const data = rawData as AgentGridData | undefined;
|
||||
|
||||
// Check if we have meaningful data to prevent unnecessary loading states
|
||||
const hasData = useHasData(data);
|
||||
|
||||
/**
|
||||
* Get category display name from API data or use fallback
|
||||
*/
|
||||
const getCategoryDisplayName = (categoryValue: string) => {
|
||||
const categoryData = categories.find((cat) => cat.value === categoryValue);
|
||||
if (categoryData) {
|
||||
return categoryData.label;
|
||||
}
|
||||
|
||||
// Fallback for special categories or unknown categories
|
||||
if (categoryValue === 'promoted') {
|
||||
return localize('com_agents_top_picks');
|
||||
}
|
||||
if (categoryValue === 'all') {
|
||||
return 'All';
|
||||
}
|
||||
|
||||
// Simple capitalization for unknown categories
|
||||
return categoryValue.charAt(0).toUpperCase() + categoryValue.slice(1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Load more agents when "See More" button is clicked
|
||||
*/
|
||||
const handleLoadMore = () => {
|
||||
setPage((prevPage) => prevPage + 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset page when category or search changes
|
||||
*/
|
||||
React.useEffect(() => {
|
||||
setPage(1);
|
||||
}, [category, searchQuery]);
|
||||
|
||||
/**
|
||||
* Get the appropriate title for the agents grid based on current state
|
||||
*/
|
||||
const getGridTitle = () => {
|
||||
if (searchQuery) {
|
||||
return localize('com_agents_results_for', { query: searchQuery });
|
||||
}
|
||||
|
||||
return getCategoryDisplayName(category);
|
||||
};
|
||||
|
||||
// Loading skeleton component
|
||||
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>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{Array(6)
|
||||
.fill(0)
|
||||
.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
'flex h-[250px] animate-pulse flex-col overflow-hidden rounded-lg',
|
||||
'bg-gray-200 dark:bg-gray-800',
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Handle error state with enhanced error display
|
||||
if (error) {
|
||||
return (
|
||||
<ErrorDisplay
|
||||
error={error || 'Unknown error occurred'}
|
||||
onRetry={() => refetch()}
|
||||
context={{
|
||||
searchQuery,
|
||||
category,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Main content component with proper semantic structure
|
||||
const mainContent = (
|
||||
<div
|
||||
className="space-y-6"
|
||||
role="tabpanel"
|
||||
id={`category-panel-${category}`}
|
||||
aria-labelledby={`category-tab-${category}`}
|
||||
aria-live="polite"
|
||||
aria-busy={isLoading && !hasData}
|
||||
>
|
||||
{/* Grid title - only show for search results */}
|
||||
{searchQuery && (
|
||||
<div className="mb-4">
|
||||
<h2
|
||||
className="text-xl font-bold text-gray-900 dark:text-white"
|
||||
id={`category-heading-${category}`}
|
||||
aria-label={`${getGridTitle()}, ${data?.agents?.length || 0} agents available`}
|
||||
>
|
||||
{getGridTitle()}
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Handle empty results with enhanced accessibility */}
|
||||
{(!data?.agents || data.agents.length === 0) && !isLoading && !isFetching ? (
|
||||
<div
|
||||
className="py-12 text-center text-gray-500"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-label={
|
||||
searchQuery
|
||||
? localize('com_agents_search_empty_heading')
|
||||
: localize('com_agents_empty_state_heading')
|
||||
}
|
||||
>
|
||||
<h3 className="mb-2 text-lg font-medium">
|
||||
{searchQuery
|
||||
? localize('com_agents_search_empty_heading')
|
||||
: localize('com_agents_empty_state_heading')}
|
||||
</h3>
|
||||
<p className="text-sm">
|
||||
{searchQuery
|
||||
? localize('com_agents_no_results')
|
||||
: localize('com_agents_none_in_category')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Announcement for screen readers */}
|
||||
<div id="search-results-count" className="sr-only" aria-live="polite" aria-atomic="true">
|
||||
{localize('com_agents_grid_announcement', {
|
||||
count: data?.agents?.length || 0,
|
||||
category: getCategoryDisplayName(category),
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Agent grid - 2 per row with proper semantic structure */}
|
||||
{data?.agents && data.agents.length > 0 && (
|
||||
<div
|
||||
className="grid grid-cols-1 gap-6 md:grid-cols-2"
|
||||
role="grid"
|
||||
aria-label={localize('com_agents_grid_announcement', {
|
||||
count: data.agents.length,
|
||||
category: getCategoryDisplayName(category),
|
||||
})}
|
||||
>
|
||||
{data.agents.map((agent: t.Agent, index: number) => (
|
||||
<div key={`${agent.id}-${index}`} role="gridcell">
|
||||
<AgentCard agent={agent} onClick={() => onSelectAgent(agent)} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading indicator when fetching more with accessibility */}
|
||||
{isFetching && page > 1 && (
|
||||
<div
|
||||
className="flex justify-center py-4"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-label={localize('com_agents_loading')}
|
||||
>
|
||||
<Spinner className="h-6 w-6 text-primary" />
|
||||
<span className="sr-only">{localize('com_agents_loading')}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Load more button with enhanced accessibility */}
|
||||
{data?.pagination?.hasMore && !isFetching && (
|
||||
<div className="mt-8 flex justify-center">
|
||||
<Button
|
||||
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',
|
||||
)}
|
||||
aria-label={localize('com_agents_load_more_label', {
|
||||
category: getCategoryDisplayName(category),
|
||||
})}
|
||||
>
|
||||
{localize('com_agents_see_more')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Use SmartLoader to prevent unnecessary loading flashes
|
||||
return (
|
||||
<SmartLoader
|
||||
isLoading={isLoading}
|
||||
hasData={hasData}
|
||||
delay={200} // Show loading only after 200ms delay
|
||||
loadingComponent={loadingSkeleton}
|
||||
>
|
||||
{mainContent}
|
||||
</SmartLoader>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentGrid;
|
||||
Loading…
Add table
Add a link
Reference in a new issue