Support image/file attachments (#80)

src/hooks/useAttachments.ts

@@ -0,0 +1,58 @@
+import { useState, useRef } from "react";
+
+export function useAttachments() {
+  const [attachments, setAttachments] = useState<File[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  const handleAttachmentClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      setAttachments((attachments) => [...attachments, ...files]);
+    }
+  };
+
+  const removeAttachment = (index: number) => {
+    setAttachments(attachments.filter((_, i) => i !== index));
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDraggingOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDraggingOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDraggingOver(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const files = Array.from(e.dataTransfer.files);
+      setAttachments((attachments) => [...attachments, ...files]);
+    }
+  };
+
+  const clearAttachments = () => {
+    setAttachments([]);
+  };
+
+  return {
+    attachments,
+    fileInputRef,
+    isDraggingOver,
+    handleAttachmentClick,
+    handleFileChange,
+    removeAttachment,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    clearAttachments,
+  };
+}