LibreChat/client/src/components/Agents/AgentCard.tsx

import React, { useMemo } from 'react';
import { Label } from '@librechat/client';
import type t from 'librechat-data-provider';
import { useLocalize, TranslationKeys, useAgentCategories } from '~/hooks';
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();
  const { categories } = useAgentCategories();

  const categoryLabel = useMemo(() => {
    if (!agent.category) return '';

    const category = categories.find((cat) => cat.value === agent.category);
    if (category) {
      if (category.label && category.label.startsWith('com_')) {
        return localize(category.label as TranslationKeys);
      }
      return category.label;
    }

    return agent.category.charAt(0).toUpperCase() + agent.category.slice(1);
  }, [agent.category, categories, localize]);

  return (
    <div
      className={cn(
        'group relative h-40 overflow-hidden rounded-xl border border-border-light',
        'cursor-pointer shadow-sm transition-all duration-200 hover:border-border-medium hover:shadow-lg',
        'bg-surface-tertiary hover:bg-surface-hover',
        'space-y-3 p-4',
        className,
      )}
      onClick={onClick}
      aria-label={localize('com_agents_agent_card_label', {
        name: agent.name,
        description: agent.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 items-start justify-between">
        <div className="flex items-center gap-3">
          {/* Left column: Avatar and Category */}
          <div className="flex h-full flex-shrink-0 flex-col justify-between space-y-4">
            <div className="flex-shrink-0">{renderAgentAvatar(agent, { size: 'sm' })}</div>

            {/* Category tag */}
            {agent.category && (
              <div className="inline-flex items-center rounded-md border-border-xheavy bg-surface-active-alt px-2 py-1 text-xs font-medium">
                <Label className="line-clamp-1 font-normal">{categoryLabel}</Label>
              </div>
            )}
          </div>

          {/* Right column: Name, description, and other content */}
          <div className="flex h-full min-w-0 flex-1 flex-col justify-between space-y-1">
            <div className="space-y-1">
              {/* Agent name */}
              <Label className="mb-1 line-clamp-1 text-xl font-semibold text-text-primary">
                {agent.name}
              </Label>

              {/* Agent description */}
              <p
                id={`agent-${agent.id}-description`}
                className="line-clamp-3 text-sm leading-relaxed text-text-primary"
                {...(agent.description
                  ? { 'aria-label': `Description: ${agent.description}` }
                  : {})}
              >
                {agent.description ?? ''}
              </p>
            </div>

            {/* Owner info */}
            {(() => {
              const displayName = getContactDisplayName(agent);
              if (displayName) {
                return (
                  <div className="flex justify-end">
                    <div className="flex items-center text-sm text-text-secondary">
                      <Label>{displayName}</Label>
                    </div>
                  </div>
                );
              }
              return null;
            })()}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AgentCard;