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.
This commit is contained in:
Zane Staggs
2025-07-08 20:00:05 -07:00
parent d553b8ecc7
commit 2b30dc3a28
2 changed files with 9 additions and 1 deletions
+2 -1
View File
@@ -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}
+7
View File
@@ -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();
}
}
};