diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx index 9d620c1..a760d8a 100644 --- a/app/components/Chat.tsx +++ b/app/components/Chat.tsx @@ -76,6 +76,7 @@ export default function Chat({ user }: { user: User }) { const creatingRef = useRef(false); const fileInputRef = useRef(null); const [attachments, setAttachments] = useState([]); + const [isDraggingOver, setIsDraggingOver] = useState(false); const bucketName = process.env.NEXT_PUBLIC_SUPABASE_BUCKET_NAME || ""; const globalConversations = conversations.filter((c) => c.type === "global"); @@ -388,6 +389,45 @@ export default function Chat({ user }: { user: User }) { setAttachments((prev) => [...prev, ...files]); }; + const handleDrop = (e: React.DragEvent) => { + e.preventDefault(); + setIsDraggingOver(false); + + const files = Array.from(e.dataTransfer.files || []); + if (!files.length) return; + + setAttachments((prev) => [...prev, ...files]); + }; + + const handleDragOver = (e: React.DragEvent) => { + e.preventDefault(); + setIsDraggingOver(true); + }; + + const onDragLeave = (e: React.DragEvent) => { + setIsDraggingOver(false); + }; + + const handlePaste = (e: React.ClipboardEvent) => { + const items = e.clipboardData.items; + if (!items) return; + + const files: File[] = []; + + for (let i = 0; i < items.length; i++) { + const item = items[i]; + + if (item.kind === "file") { + const file = item.getAsFile(); + if (file) files.push(file); + } + } + + if (files.length) { + setAttachments((prev) => [...prev, ...files]); + } + }; + const removeAttachment = (index: number) => { setAttachments((prev) => prev.filter((_, i) => i !== index)); }; @@ -596,7 +636,14 @@ export default function Chat({ user }: { user: User }) { )} -
+