diff --git a/components/chat-input.tsx b/components/chat-input.tsx index d0cce3c..471a2ca 100644 --- a/components/chat-input.tsx +++ b/components/chat-input.tsx @@ -58,7 +58,7 @@ export function ChatInput({ adjustTextareaHeight(); }, [input, adjustTextareaHeight]); - // Handle keyboard shortcuts + // Handle keyboard shortcuts and paste events const handleKeyDown = (e: React.KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); @@ -69,6 +69,40 @@ export function ChatInput({ } }; + // Handle clipboard paste + const handlePaste = async (e: React.ClipboardEvent) => { + if (status === "streaming") return; + + const items = e.clipboardData.items; + const imageItems = Array.from(items).filter((item) => + item.type.startsWith("image/") + ); + + if (imageItems.length > 0) { + const imageFiles = await Promise.all( + imageItems.map(async (item) => { + const file = item.getAsFile(); + if (!file) return null; + // Create a new file with a unique name + return new File( + [file], + `pasted-image-${Date.now()}.${file.type.split("/")[1]}`, + { + type: file.type, + } + ); + }) + ); + + const validFiles = imageFiles.filter( + (file): file is File => file !== null + ); + if (validFiles.length > 0) { + onFileChange([...files, ...validFiles]); + } + } + }; + // Handle file changes const handleFileChange = (e: React.ChangeEvent) => { const newFiles = Array.from(e.target.files || []); @@ -145,6 +179,7 @@ export function ChatInput({ value={input} onChange={onChange} onKeyDown={handleKeyDown} + onPaste={handlePaste} placeholder="Describe what changes you want to make to the diagram... (Press Cmd/Ctrl + Enter to send)" disabled={status === "streaming"} aria-label="Chat input"