import { useState } from "react"; import { useTranslation } from "react-i18next"; import { MoreVertical, Copy, Pencil, Trash2, Download } from "lucide-react"; import { cn } from "@/shared/lib/cn"; import { Avatar, AvatarImage, AvatarFallback } from "@/shared/ui/avatar"; import { Badge } from "@/shared/ui/badge"; import { Button } from "@/shared/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/shared/ui/dropdown-menu"; import { useAvatarSrc } from "@/shared/hooks/useAvatarSrc"; import type { Persona } from "@/shared/types/agents"; import { getPersonaSource } from "@/features/agents/lib/personaPresentation"; interface PersonaCardProps { persona: Persona; onSelect?: (persona: Persona) => void; onEdit?: (persona: Persona) => void; onDuplicate?: (persona: Persona) => void; onDelete?: (persona: Persona) => void; onExport?: (persona: Persona) => void; isActive?: boolean; } export function PersonaCard({ persona, onSelect, onEdit, onDuplicate, onDelete, onExport, isActive = false, }: PersonaCardProps) { const { t } = useTranslation(["agents", "common"]); const [menuOpen, setMenuOpen] = useState(false); const initials = persona.displayName.charAt(0).toUpperCase(); const avatarSrc = useAvatarSrc(persona.avatar); const personaSource = getPersonaSource(persona); const canEditPersona = personaSource === "custom"; const canDeletePersona = personaSource !== "builtin"; const providerModelLabel = [persona.provider, persona.model] .filter(Boolean) .join(" / "); const handleCardKeyDown = (event: React.KeyboardEvent) => { if (event.target !== event.currentTarget || menuOpen) { return; } if (event.key === "Enter" || event.key === " ") { event.preventDefault(); onSelect?.(persona); } }; return ( // biome-ignore lint/a11y/useSemanticElements: card contains nested menu buttons, so a native button is not valid here

!menuOpen && onSelect?.(persona)} onKeyDown={handleCardKeyDown} tabIndex={0} className={cn( "group relative flex flex-col items-center gap-3 rounded-xl border p-5 cursor-pointer", "bg-background transition-colors duration-200 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2", "hover:bg-accent/50", isActive ? "border-border ring-1 ring-ring" : "border-border", )} > {/* Dropdown trigger */}

{canEditPersona && ( onEdit?.(persona)}> {t("common:actions.edit")} )} onDuplicate?.(persona)}> {t("common:actions.duplicate")} onExport?.(persona)}> {t("common:actions.export")} {canDeletePersona && ( onDelete?.(persona)} > {t("common:actions.delete")} )}

{/* Avatar */} {initials} {/* Name */}

{persona.displayName}

{/* Built-in badge */} {personaSource === "builtin" && ( {t("common:labels.builtIn")} )} {personaSource === "file" && ( {t("card.fileBacked")} )} {/* System prompt preview */}

{persona.systemPrompt}

{/* Provider/model badge */} {providerModelLabel && ( {providerModelLabel} )}

); }