Title: Add image paste feature to chat input #338
Conversation
Implementa a capacidade de colar screenshots e outras imagens diretamente no chat usando Ctrl+V (ou Cmd+V), eliminando a necessidade de selecionar arquivos manualmente. As imagens coladas são processadas automaticamente e enviadas para o LLM analisar. Mudanças: - Adiciona event listener de paste no componente TextInput - Detecta automaticamente imagens no clipboard - Processa imagens coladas da mesma forma que uploads de arquivo - Mantém compatibilidade com upload tradicional de arquivos
Atualiza yarn.lock e adiciona package-lock.json gerados durante a instalação das dependências necessárias para o build.
Summary of ChangesHello @marcosmarf27, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant quality-of-life improvement by enabling direct image pasting into the chat input field. This enhancement streamlines the user workflow for submitting visual content to the LLM, making the interaction more intuitive and efficient without altering existing file upload permissions or backend processing. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable feature allowing users to paste images directly into the chat input. The implementation in TextInput.tsx is clean, adding an onPaste event handler that correctly identifies image files and integrates them with the existing file upload system. My review includes one suggestion to refactor the image extraction logic to be more concise and robust using modern JavaScript features and more specific type checks. Overall, this is a great enhancement to the user experience.
| const imageFiles: File[] = []; | ||
|
|
||
| // Check if any items in the clipboard are images | ||
| for (let i = 0; i < items.length; i++) { | ||
| const item = items[i]; | ||
| if (item.type.indexOf('image') !== -1) { | ||
| const file = item.getAsFile(); | ||
| if (file) { | ||
| imageFiles.push(file); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
The logic for extracting image files from the clipboard can be made more concise and robust by using modern array methods and more specific checks.
- You can convert the
DataTransferItemListto an array usingArray.from()to leverage methods likefilterandmap. - It's good practice to also check
item.kind === 'file'to ensure you're dealing with files. - Use
item.type.startsWith('image/')for a more precise check for image MIME types.
The entire loop can be replaced with a single chained expression, which improves readability and maintainability.
const imageFiles = Array.from(items)
.filter((item) => item.kind === 'file' && item.type.startsWith('image/'))
.map((item) => item.getAsFile())
.filter((file): file is File => file !== null);
2 participants
Title: Add image paste feature to chat input
Description:
Summary
This PR adds the ability to paste images directly into the chat input using Ctrl+V (or Cmd+V on Mac), eliminating the need to manually select files through the file picker. Pasted images are automatically processed and sent to the LLM for analysis.
Changes
Added handlePaste event handler in TextInput.tsx (lines 106-137)
Automatically detects images in clipboard when pasting
Processes pasted images through the existing file upload system
Maintains full compatibility with existing upload configurations (isImageUploadAllowed, isFullFileUpload)
Supports pasting multiple images simultaneously
How to Use
Take a screenshot (Print Screen, Snipping Tool, etc.)
Go to the Flowise chat
Press Ctrl+V (or Cmd+V on Mac) in the text input field
The image will be automatically attached and ready to send to the LLM
Technical Details
Implementation location: src/components/inputs/textInput/components/TextInput.tsx:106-137
Event handler registered: onPaste on line 151
Respects existing upload permissions and file type restrictions
Works seamlessly with the current file handling infrastructure
Testing
✅ Build completed successfully
✅ TypeScript compilation without errors
✅ Maintains backward compatibility with existing upload features