- Support image (JPEG/PNG/GIF/WebP, max 5MB) and document uploads - Images sent as multimodal content blocks to Claude SDK - Documents saved to temp dir for Claude's Read tool - Emerald capsule badges in input for attached files - Drag-and-drop, paste, and file picker support via PromptInput - Chat display: image thumbnails with lightbox, file cards - Lightbox uses Radix Dialog with prev/next navigation - File metadata embedded in message content as HTML comments - Compatible with existing slash command badge system Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
22 lines
593 B
TypeScript
22 lines
593 B
TypeScript
'use client';
|
|
|
|
import { FileIcon } from 'lucide-react';
|
|
import { formatFileSize } from '@/types';
|
|
|
|
interface FileCardProps {
|
|
name: string;
|
|
size: number;
|
|
}
|
|
|
|
export function FileCard({ name, size }: FileCardProps) {
|
|
return (
|
|
<div className="rounded-lg border bg-muted/50 p-3 flex items-center gap-3">
|
|
<FileIcon className="h-5 w-5 text-muted-foreground shrink-0" />
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium truncate">{name}</div>
|
|
<div className="text-xs text-muted-foreground">{formatFileSize(size)}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|