feat: add image paste functionality to DescriptionImageDropZone compo…#116
feat: add image paste functionality to DescriptionImageDropZone compo…#116webdevcody merged 3 commits intomainfrom
Conversation
…nent - Implemented handlePaste function to process images from clipboard across all OS. - Updated the component to handle pasted images and prevent default paste behavior. - Enhanced user instructions to include pasting images in the UI. Added a utility function to simulate pasting images in tests, ensuring cross-platform compatibility.
Summary of ChangesHello @Shironex, 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 user experience improvement by enabling direct image pasting from the clipboard into the 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
|
Shironex
added
Enhancement
![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 great new feature, allowing users to paste images directly into the DescriptionImageDropZone. The implementation is solid, covering clipboard data handling across different OS and preventing default paste behavior when images are detected. The accompanying test utility to simulate image pasting is also well-thought-out.
My review includes a couple of suggestions for improvement:
- In the
handlePastefunction, I've recommended a small change to ensure uniquely generated filenames when multiple images are pasted simultaneously. - In the test utility
simulateImagePaste, I've suggested a more modern and concise way to convert base64 strings to Blobs.
Overall, this is a well-executed feature enhancement.
| const timestamp = new Date().toISOString().replace(/[:.]/g, "-"); | ||
| const renamedFile = new File( | ||
| [file], | ||
| `pasted-image-${timestamp}.${extension}`, |
There was a problem hiding this comment.
When pasting multiple images at once, it's possible for them to be processed within the same millisecond, which could result in identical timestamps and thus identical filenames. This could lead to images overwriting each other or being misidentified. To ensure filename uniqueness for each image within a single paste operation, I recommend appending the loop index i to the filename.
| `pasted-image-${timestamp}.${extension}`, | |
| `pasted-image-${timestamp}-${i}.${extension}`, |
| ({ selector, base64, mime }) => { | ||
| const target = document.querySelector(selector); | ||
| if (!target) throw new Error(`Element not found: ${selector}`); | ||
|
|
||
| // Convert base64 to Blob | ||
| const byteCharacters = atob(base64); | ||
| const byteNumbers = new Array(byteCharacters.length); | ||
| for (let i = 0; i < byteCharacters.length; i++) { | ||
| byteNumbers[i] = byteCharacters.charCodeAt(i); | ||
| } | ||
| const byteArray = new Uint8Array(byteNumbers); | ||
| const blob = new Blob([byteArray], { type: mime }); |
There was a problem hiding this comment.
The current method for converting a base64 string to a Blob is quite verbose. A more modern and concise approach is to use the fetch API with a data URL. This improves readability and maintainability. The page.evaluate callback will need to be marked as async to support this.
| ({ selector, base64, mime }) => { | |
| const target = document.querySelector(selector); | |
| if (!target) throw new Error(`Element not found: ${selector}`); | |
| // Convert base64 to Blob | |
| const byteCharacters = atob(base64); | |
| const byteNumbers = new Array(byteCharacters.length); | |
| for (let i = 0; i < byteCharacters.length; i++) { | |
| byteNumbers[i] = byteCharacters.charCodeAt(i); | |
| } | |
| const byteArray = new Uint8Array(byteNumbers); | |
| const blob = new Blob([byteArray], { type: mime }); | |
| async ({ selector, base64, mime }) => { | |
| const target = document.querySelector(selector); | |
| if (!target) throw new Error(`Element not found: ${selector}`); | |
| // Convert base64 to Blob using fetch | |
| const dataUrl = `data:${mime};base64,${base64}`; | |
| const blob = await (await fetch(dataUrl)).blob(); |
- Updated ImageAttachment interface to make 'id' and 'size' optional for better compatibility with server messages. - Improved image display in AgentView for user messages, including a count of attached images and a clickable preview. - Refined ImageDropZone to conditionally render file size and ensure proper handling of image removal actions.
…o open microsoft store
Shironex
force-pushed
the
feat/enchance-pasting-images
branch
from
f419905 to
c8c05ef
Compare
Shironex
added
Ready-To-Merge
2 participants
Added a utility function to simulate pasting images in tests, ensuring cross-platform compatibility.
Now u can either paste image to textare or use browse label to add it as context for your prompt
images preview: