Superglue MCP

import { Button } from '@/src/components/ui/button'; import { formatBytes, type UploadedFileInfo } from '@/src/lib/file-utils'; import { cn } from '@/src/lib/general-utils'; import { File, FileArchive, FileCode, FileJson, FileSpreadsheet, FileText, X, FileDigit, FileImage, FileType, FileMusic, Loader2 } from 'lucide-react'; interface FileChipProps { file: UploadedFileInfo; onRemove?: (key: string) => void; size?: 'compact' | 'default' | 'large'; rounded?: 'none' | 'sm' | 'md' | 'full'; showOriginalName?: boolean; showSize?: boolean; showKey?: boolean; isLoading?: boolean; maxWidth?: string; className?: string; } const getFileIcon = (filename: string) => { const ext = filename.toLowerCase().split('.').pop() || ''; switch (ext) { // JSON case 'json': return FileJson; // Spreadsheets case 'csv': return FileSpreadsheet; case 'xlsx': return FileSpreadsheet; case 'xls': return FileSpreadsheet; // Programming languages case 'py': return FileCode; case 'js': return FileCode; case 'ts': return FileCode; case 'tsx': return FileCode; case 'jsx': return FileCode; case 'java': return FileCode; case 'cpp': return FileCode; case 'c': return FileCode; case 'go': return FileCode; case 'rs': return FileCode; case 'rb': return FileCode; case 'php': return FileCode; case 'swift': return FileCode; case 'kt': return FileCode; case 'xml': return FileCode; case 'html': return FileCode; case 'css': return FileCode; // Text files case 'txt': return FileType; case 'md': return FileType; // PDF case 'pdf': return File; // Images case 'png': return FileImage; case 'jpg': return FileImage; case 'jpeg': return FileImage; case 'gif': return FileImage; case 'svg': return FileImage; case 'webp': return FileImage; // Audio case 'mp3': return FileMusic; case 'wav': return FileMusic; case 'ogg': return FileMusic; case 'm4a': return FileMusic; // Binary case 'bin': return FileDigit; case 'exe': return FileDigit; case 'dll': return FileDigit; // Archives case 'zip': return FileArchive; case 'tar': return FileArchive; case 'gz': return FileArchive; case 'rar': return FileArchive; case '7z': return FileArchive; default: return File; } }; export function FileChip({ file, onRemove, size = 'default', rounded = 'md', showOriginalName = false, showSize = true, showKey = false, isLoading = false, maxWidth, className }: FileChipProps) { const FileIcon = getFileIcon(file.name); const displayName = showOriginalName ? file.name : file.key; // Handle cases where size or status might not be available const fileSize = file.size || 0; const fileStatus = file.status || 'ready'; const sizeText = showSize && fileSize > 0 ? formatBytes(fileSize) : ''; const keyText = showKey && showOriginalName ? ` • JSON Input Key: ${file.key}` : ''; const subtitleText = fileStatus === 'processing' ? 'Parsing...' : fileStatus === 'error' ? file.error || 'Failed to parse' : `${sizeText}${keyText}`; const roundedClass = { 'none': 'rounded-none', 'sm': 'rounded-sm', 'md': 'rounded-md', 'full': 'rounded-full' }[rounded]; const sizeStyles = size === 'compact' ? 'px-2 py-1.5' : size === 'large' ? 'px-4 py-3' : 'px-3 py-2'; return ( <div className={cn( "flex items-center justify-between transition-all border", roundedClass, sizeStyles, fileStatus === 'error' ? "bg-destructive/10 border-destructive/20" : fileStatus === 'processing' ? "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800" : "bg-muted/30 border-border", className )} style={maxWidth ? { maxWidth } : undefined} > <div className="flex items-center gap-2 min-w-0 flex-1"> <FileIcon className="h-4 w-4 text-gray-700 dark:text-gray-400 flex-shrink-0" /> <div className="flex flex-col min-w-0 flex-1"> <span className="text-xs font-medium truncate" title={file.name}> {displayName} </span> {subtitleText && ( <span className="text-[10px] text-muted-foreground"> {subtitleText} </span> )} </div> </div> <div className="flex items-center gap-1 ml-2 relative group/actions"> {(fileStatus === 'processing' || isLoading) && ( <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 dark:text-gray-500 group-hover/actions:opacity-0 transition-opacity" /> )} {onRemove && ( <Button variant="ghost" size="icon" className={cn( "h-6 w-6 hover:bg-background/80", (fileStatus === 'processing' || isLoading) ? "absolute opacity-0 group-hover/actions:opacity-100 transition-opacity" : "" )} onClick={() => onRemove(file.key)} > <X className="h-3 w-3" /> </Button> )} </div> </div> ); }