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,
+  };
+}

src/hooks/useStreamChat.ts

@@ -52,12 +52,17 @@ export function useStreamChat({
       prompt,
       chatId,
       redo,
+      attachments,
     }: {
       prompt: string;
       chatId: number;
       redo?: boolean;
+      attachments?: File[];
     }) => {
-      if (!prompt.trim() || !chatId) {
+      if (
+        (!prompt.trim() && (!attachments || attachments.length === 0)) ||
+        !chatId
+      ) {
         return;
       }
 
@@ -68,6 +73,7 @@ export function useStreamChat({
         IpcClient.getInstance().streamMessage(prompt, {
           chatId,
           redo,
+          attachments,
           onUpdate: (updatedMessages: Message[]) => {
             if (!hasIncrementedStreamCount) {
               setStreamCount((streamCount) => streamCount + 1);