import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { Plus } from "lucide-react"; import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { Skeleton } from "@/shared/ui/skeleton"; import type { Persona } from "@/shared/types/agents"; import { PersonaCard } from "@/features/agents/ui/PersonaCard"; import { useFileImportZone } from "@/shared/hooks/useFileImportZone"; interface PersonaGalleryProps { personas: Persona[]; activePersonaId?: string; onSelectPersona: (persona: Persona) => void; onEditPersona: (persona: Persona) => void; onDuplicatePersona: (persona: Persona) => void; onDeletePersona: (persona: Persona) => void; onExportPersona?: (persona: Persona) => void; onCreatePersona: () => void; onImportFile?: (fileBytes: number[], fileName: string) => void; validateImportFile?: (file: Pick) => string | null; onImportError?: (message: string) => void; isLoading?: boolean; } function SkeletonCard() { return ( ); } export function PersonaGallery({ personas, activePersonaId, onSelectPersona, onEditPersona, onDuplicatePersona, onDeletePersona, onExportPersona, onCreatePersona, onImportFile, validateImportFile, onImportError, isLoading = false, }: PersonaGalleryProps) { const { t } = useTranslation("agents"); const { fileInputRef, isDragOver, dropHandlers, handleFileChange } = useFileImportZone({ onImportFile: onImportFile ?? (() => {}), validateFile: validateImportFile, onImportError, }); const sorted = useMemo(() => { const builtins = personas .filter((p) => p.isBuiltin) .sort((a, b) => a.displayName.localeCompare(b.displayName)); const custom = personas .filter((p) => !p.isBuiltin) .sort((a, b) => a.displayName.localeCompare(b.displayName)); return [...builtins, ...custom]; }, [personas]); if (isLoading) { return (

); } return (

{sorted.map((persona) => ( ))} {/* Create new card */} {onImportFile && ( )}

); }