mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 08:12:00 +02:00
81b32e400a
refactor: organize Sharing/Agent components, improve type safety for resource types and access role ids, rename enums to PascalCase refactor: organize Sharing/Agent components, improve type safety for resource types and access role ids chore: move sharing related components to dedicated "Sharing" directory chore: remove PublicSharingToggle component and update index exports chore: move non-sidepanel agent components to `~/components/Agents` chore: move AgentCategoryDisplay component with tests chore: remove commented out code refactor: change PERMISSION_BITS from const to enum for better type safety refactor: reorganize imports in GenericGrantAccessDialog and update index exports for hooks refactor: update type definitions to use ACCESS_ROLE_IDS for improved type safety refactor: remove unused canAccessPromptResource middleware and related code refactor: remove unused prompt access roles from createAccessRoleMethods refactor: update resourceType in AclEntry type definition to remove unused 'prompt' value refactor: introduce ResourceType enum and update resourceType usage across data provider files for improved type safety refactor: update resourceType usage to ResourceType enum across sharing and permissions components for improved type safety refactor: standardize resourceType usage to ResourceType enum across agent and prompt models, permissions controller, and middleware for enhanced type safety refactor: update resourceType references from PROMPT_GROUP to PROMPTGROUP for consistency across models, middleware, and components refactor: standardize access role IDs and resource type usage across agent, file, and prompt models for improved type safety and consistency chore: add typedefs for TUpdateResourcePermissionsRequest and TUpdateResourcePermissionsResponse to enhance type definitions chore: move SearchPicker to PeoplePicker dir refactor: implement debouncing for query changes in SearchPicker for improved performance chore: fix typing, import order for agent admin settings fix: agent admin settings, prevent agent form submission refactor: rename `ACCESS_ROLE_IDS` to `AccessRoleIds` refactor: replace PermissionBits with PERMISSION_BITS refactor: replace PERMISSION_BITS with PermissionBits
92 lines
3 KiB
TypeScript
92 lines
3 KiB
TypeScript
import React from 'react';
|
|
import type t from 'librechat-data-provider';
|
|
import useLocalize from '~/hooks/useLocalize';
|
|
import { cn, renderAgentAvatar, getContactDisplayName } from '~/utils';
|
|
|
|
interface AgentCardProps {
|
|
agent: t.Agent; // The agent data to display
|
|
onClick: () => void; // Callback when card is clicked
|
|
className?: string; // Additional CSS classes
|
|
}
|
|
|
|
/**
|
|
* Card component to display agent information
|
|
*/
|
|
const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' }) => {
|
|
const localize = useLocalize();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'group relative flex overflow-hidden rounded-2xl',
|
|
'cursor-pointer transition-colors duration-200',
|
|
'aspect-[5/2.5] w-full',
|
|
'bg-surface-tertiary hover:bg-surface-hover-alt',
|
|
className,
|
|
)}
|
|
onClick={onClick}
|
|
aria-label={localize('com_agents_agent_card_label', {
|
|
name: agent.name,
|
|
description: agent.description || localize('com_agents_no_description'),
|
|
})}
|
|
aria-describedby={`agent-${agent.id}-description`}
|
|
tabIndex={0}
|
|
role="button"
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
onClick();
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex h-full gap-2 px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
|
|
{/* Agent avatar section - left side, responsive */}
|
|
<div className="flex flex-shrink-0 items-center">
|
|
{renderAgentAvatar(agent, { size: 'md' })}
|
|
</div>
|
|
|
|
{/* 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-text-primary sm:mb-2 sm:text-lg">
|
|
{agent.name}
|
|
</h3>
|
|
|
|
{/* Agent description - responsive text sizing and spacing */}
|
|
<p
|
|
id={`agent-${agent.id}-description`}
|
|
className={cn(
|
|
'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-text-secondary">
|
|
{localize('com_agents_no_description')}
|
|
</span>
|
|
)}
|
|
</p>
|
|
|
|
{/* Owner info - responsive text sizing */}
|
|
{(() => {
|
|
const displayName = getContactDisplayName(agent);
|
|
|
|
if (displayName) {
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AgentCard;
|