diff --git a/frontend/src/components/thread/chat-input/message-input.tsx b/frontend/src/components/thread/chat-input/message-input.tsx index 78508bfb..ded27ec4 100644 --- a/frontend/src/components/thread/chat-input/message-input.tsx +++ b/frontend/src/components/thread/chat-input/message-input.tsx @@ -16,6 +16,7 @@ import { Tooltip } from '@/components/ui/tooltip'; import { TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip'; import { BillingModal } from '@/components/billing/billing-modal'; import ChatDropdown from './chat-dropdown'; +import { handleFiles } from './file-upload-handler'; interface MessageInputProps { value: string; @@ -129,6 +130,29 @@ export const MessageInput = forwardRef( } }; + const handlePaste = (e: React.ClipboardEvent) => { + if (!e.clipboardData) return; + const items = Array.from(e.clipboardData.items); + const imageFiles: File[] = []; + for (const item of items) { + if (item.kind === 'file' && item.type.startsWith('image/')) { + const file = item.getAsFile(); + if (file) imageFiles.push(file); + } + } + if (imageFiles.length > 0) { + e.preventDefault(); + handleFiles( + imageFiles, + sandboxId, + setPendingFiles, + setUploadedFiles, + setIsUploading, + messages, + ); + } + }; + const renderDropdown = () => { if (isLoggedIn) { const showAdvancedFeatures = enableAdvancedConfig || (customAgentsEnabled && !flagsLoading); @@ -167,6 +191,7 @@ export const MessageInput = forwardRef( value={value} onChange={onChange} onKeyDown={handleKeyDown} + onPaste={handlePaste} placeholder={placeholder} className={cn( 'w-full bg-transparent dark:bg-transparent border-none shadow-none focus-visible:ring-0 px-0.5 pb-6 pt-4 !text-[15px] min-h-[36px] max-h-[200px] overflow-y-auto resize-none',