Add paste/drop support to AIChatInput #951

Author: joepio

browser/data-browser/package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@tanstack/react-router": "^1.95.1",
+    "@tiptap/extension-file-handler": "^2.25.0",
     "@tiptap/extension-image": "^2.11.7",
     "@tiptap/extension-link": "^2.11.7",
     "@tiptap/extension-mention": "^2.11.7",

browser/data-browser/src/chunks/MarkdownEditor/AIChatInput/AsyncAIChatInput.tsx

@@ -2,6 +2,7 @@ import { EditorContent, useEditor, type JSONContent } from '@tiptap/react';
 import { styled } from 'styled-components';
 import StarterKit from '@tiptap/starter-kit';
 import Mention from '@tiptap/extension-mention';
+import FileHandler from '@tiptap/extension-file-handler';
 import { TiptapContextProvider } from '../TiptapContext';
 import { EditorWrapperBase } from '../EditorWrapperBase';
 import { searchSuggestionBuilder } from './resourceSuggestions';
@@ -24,6 +25,7 @@ import {
   IconButtonVariant,
 } from '../../../components/IconButton/IconButton';
 import { FaArrowRight } from 'react-icons/fa6';
+import { addIf } from '../../../helpers/addIf';
 
 const createAttribute = (propName: string, dataName: string) => {
   return {
@@ -73,12 +75,20 @@ interface AsyncAIChatInputProps {
   onMentionUpdate: (mentions: MentionItem[]) => void;
   onChange: (markdown: string) => void;
   onSubmit: () => void;
+  onFileAdded?: (files: File[]) => void;
   hasFiles: boolean;
 }
 
 const AsyncAIChatInput: React.FC<
   React.PropsWithChildren<AsyncAIChatInputProps>
-> = ({ onMentionUpdate, onChange, onSubmit, children, hasFiles }) => {
+> = ({
+  onMentionUpdate,
+  onChange,
+  onSubmit,
+  children,
+  hasFiles,
+  onFileAdded,
+}) => {
   const store = useStore();
   const { drive, mcpServers } = useSettings();
   const [markdown, setMarkdown] = useState('');
@@ -141,6 +151,19 @@ const AsyncAIChatInput: React.FC<
         Placeholder.configure({
           placeholder: 'Ask me anything...',
         }),
+        ...addIf(
+          !!onFileAdded,
+          FileHandler.configure({
+            onDrop: (_currentEditor, files) => {
+              onFileAdded!(Array.from(files));
+            },
+            onPaste: (_currentEditor, files, htmlContent) => {
+              if (htmlContent) return false;
+
+              onFileAdded!(Array.from(files));
+            },
+          }),
+        ),
       ],
       autofocus: true,
     },

browser/data-browser/src/components/AI/SimpleAIChat.tsx

@@ -145,28 +145,27 @@ export const SimpleAIChat: React.FC<
     },
   });
 
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-
-    reader.onloadend = () => {
-      const base64Content = (reader.result as string).split(',')[1];
-      setAttachedFile({
-        name: file.name,
-        type: file.type,
-        base64Content,
-        isImage: IMAGE_MIME_TYPES.includes(file.type),
-      });
-      toast.success(`File "${file.name}" attached`);
-    };
+  const handleFileUpload = (files: File[]) => {
+    for (const file of files) {
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        const base64Content = (reader.result as string).split(',')[1];
+        setAttachedFile({
+          name: file.name,
+          type: file.type,
+          base64Content,
+          isImage: IMAGE_MIME_TYPES.includes(file.type),
+        });
+        toast.success(`File "${file.name}" attached`);
+      };
 
-    reader.onerror = () => {
-      toast.error('Error reading file');
-    };
+      reader.onerror = () => {
+        toast.error('Error reading file');
+      };
 
-    reader.readAsDataURL(file);
+      reader.readAsDataURL(file);
+    }
   };
 
   const removeAttachedFile = () => {
@@ -607,6 +606,11 @@ export const SimpleAIChat: React.FC<
                   onChange={setUserInput}
                   onSubmit={handleSubmit}
                   hasFiles={!!attachedFile}
+                  onFileAdded={
+                    checkModelSupportsImageInput(selectedAgent.model)
+                      ? handleFileUpload
+                      : undefined
+                  }
                 >
                   <Row gap='0.5rem'>
                     <SubtleButton onClick={() => setAgentConfigOpen(true)}>
@@ -629,7 +633,11 @@ export const SimpleAIChat: React.FC<
                         <input
                           type='file'
                           ref={fileInputRef}
-                          onChange={handleFileUpload}
+                          onChange={e => {
+                            if (!e.target.files) return;
+
+                            handleFileUpload(Array.from(e.target.files));
+                          }}
                           style={{ display: 'none' }}
                         />
                         <IconButton