AI Attachments Input

interface Attachment {
 id: string // Unique identifier
 name: string // File name
 size: number // File size in bytes
 mimeType: string // MIME type
 type: FileType // 'image' | 'document' | 'code' | 'spreadsheet' | 'video' | 'audio' | 'archive' | 'other'
 status: AttachmentStatus // 'uploading' | 'processing' | 'ready' | 'error'
 progress?: number // Upload progress (0-100)
 error?: string // Error message if status is error
 previewUrl?: string // Preview URL for images
 thumbnailUrl?: string // Thumbnail URL
 tokenCount?: number // Token count for text files
}

import { AIAttachmentsInput, type Attachment } from '@/blocks/ai-conversation/ai-attachments-input'

export default function Example() {
 const [attachments, setAttachments] = useState<Attachment[]>([])

 const handleAdd = async (files: File[]) => {
 // Create placeholder attachments with uploading status
 const newAttachments: Attachment[] = files.map((file, i) => ({
 id: `${Date.now()}-${i}`,
 name: file.name,
 size: file.size,
 mimeType: file.type,
 type: getFileType(file.type, file.name),
 status: 'uploading',
 progress: 0,
 }))

 setAttachments(prev => [...prev, ...newAttachments])

 // Upload files and update status...
 }

 const handleRemove = (id: string) => {
 setAttachments(prev => prev.filter(a => a.id !== id))
 }

 return (
 <AIAttachmentsInput
 variant="dropzone"
 attachments={attachments}
 onAdd={handleAdd}
 onRemove={handleRemove}
 onPreview={(a) => openPreviewModal(a)}
 maxFiles={5}
 maxFileSize={10 * 1024 * 1024}
 accept="image/*,.pdf,.doc,.docx"
 showTokenCount
 />
 )
}