From 2b30dc3a2866eaa8d52e1cee94a8d8ea3bf5848e Mon Sep 17 00:00:00 2001
From: Zane Staggs <zane@squareup.com>
Date: Tue, 8 Jul 2025 20:00:05 -0700
Subject: [PATCH] Fix drag and drop functionality for images and files

- Add onFilesProcessed callback prop to ChatInput component
- Call onFilesProcessed after files are processed in performSubmit
- Pass setDroppedFiles callback from BaseChat to clear dropped files
- This ensures droppedFiles array is cleared after processing, allowing subsequent drops to work

The issue was that the droppedFiles state never got cleared after being processed,
so the useEffect that processes them wouldn't trigger for subsequent drops.
Now the files are properly cleared after being added to the input, restoring
full drag and drop functionality.
---
 ui/desktop/src/components/BaseChat.tsx  | 3 ++-
 ui/desktop/src/components/ChatInput.tsx | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 5ab30c7e09..25c38f2ea0 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -116,7 +116,7 @@ function BaseChatContent({
   });
 
   // Use shared file drop
-  const { droppedFiles, handleDrop, handleDragOver } = useFileDrop();
+  const { droppedFiles, setDroppedFiles, handleDrop, handleDragOver } = useFileDrop();
 
   // Use shared cost tracking
   const { sessionCosts } = useCostTracking({
@@ -290,6 +290,7 @@ function BaseChatContent({
             inputTokens={sessionInputTokens || localInputTokens}
             outputTokens={sessionOutputTokens || localOutputTokens}
             droppedFiles={droppedFiles}
+            onFilesProcessed={() => setDroppedFiles([])} // Clear dropped files after processing
             messages={messages}
             setMessages={setMessages}
             disableAnimation={disableAnimation}
diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 86962ae688..f68982af42 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -50,6 +50,7 @@ interface ChatInputProps {
   commandHistory?: string[]; // Current chat's message history
   initialValue?: string;
   droppedFiles?: string[];
+  onFilesProcessed?: () => void; // Callback to clear dropped files after processing
   setView: (view: View) => void;
   numTokens?: number;
   inputTokens?: number;
@@ -73,6 +74,7 @@ export default function ChatInput({
   commandHistory = [],
   initialValue = '',
   droppedFiles = [],
+  onFilesProcessed,
   setView,
   numTokens,
   inputTokens,
@@ -646,6 +648,11 @@ export default function ChatInput({
       setSavedInput('');
       setIsInGlobalHistory(false);
       setHasUserTyped(false);
+      
+      // Clear dropped files after processing
+      if (onFilesProcessed && droppedFiles.length > 0) {
+        onFilesProcessed();
+      }
     }
   };