Update ChatBar.tsx to allow for copy/paste and drag/drop file uploads #7153
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
WalkthroughThe ChatBar component now supports image uploads via drag-and-drop and clipboard paste. Event handlers for drag-and-drop and paste events have been added, enabling users to upload images by dragging them into the chat bar or pasting them into the textarea. Minor formatting improvements were also made. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatBar
participant ImageUploadHandler
User->>ChatBar: Drag-and-drop image or paste image
ChatBar->>ImageUploadHandler: handleImageUpload(files)
ImageUploadHandler-->>ChatBar: Upload result
ChatBar-->>User: Image appears in chat
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx (4)
113-113: Good formatting improvement.Removing the trailing comma after the function call improves code consistency.
130-130: Good formatting improvement.Removing the trailing comma improves code consistency.
284-284: Good formatting improvement.Removing the trailing comma improves code consistency.
561-561: Good formatting improvement.Removing the trailing comma improves code consistency.
| onDrop={(e) => { | ||
| e.preventDefault(); | ||
| if (!props.allowImageUpload) return; | ||
| const files = Array.from(e.dataTransfer.files); | ||
| if (files.length > 0) handleImageUpload(files); | ||
| }} | ||
| onDragOver={(e) => e.preventDefault()} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing file validation and improve UX for drag-and-drop.
The drag-and-drop implementation bypasses important validation logic present in the ImageUploadButton component. This could lead to inconsistent behavior and poor user experience.
Apply this diff to add missing validation:
onDrop={(e) => {
e.preventDefault();
if (!props.allowImageUpload) return;
const files = Array.from(e.dataTransfer.files);
- if (files.length > 0) handleImageUpload(files);
+ if (files.length > 0) {
+ // Validate file count
+ const totalFiles = files.length + images.length;
+ if (totalFiles > maxAllowedImagesPerMessage) {
+ toast.error(
+ `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
+ { position: "top-right" }
+ );
+ return;
+ }
+
+ // Validate file types and sizes
+ const validFiles: File[] = [];
+ for (const file of files) {
+ if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
+ toast.error(`Unsupported file type: ${file.type}`, {
+ description: `File: ${file.name}`,
+ position: "top-right",
+ });
+ continue;
+ }
+ if (file.size <= 5 * 1024 * 1024) {
+ validFiles.push(file);
+ } else {
+ toast.error("Image is larger than 5MB", {
+ description: `File: ${file.name}`,
+ position: "top-right",
+ });
+ }
+ }
+
+ if (validFiles.length > 0) {
+ handleImageUpload(validFiles);
+ }
+ }
}}Additionally, consider adding visual feedback for drag operations and accessibility attributes.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx around lines
132 to 138, the onDrop handler lacks file validation consistent with
ImageUploadButton, risking inconsistent behavior. Update the onDrop function to
include the same file type and size validations as ImageUploadButton before
calling handleImageUpload. Also, enhance UX by adding visual feedback during
drag operations (e.g., changing styles on dragOver and dragEnter) and include
appropriate accessibility attributes like aria-dropeffect to improve usability.
| onPaste={(e) => { | ||
| if (!props.allowImageUpload) return; | ||
| const files = Array.from(e.clipboardData.files); | ||
| if (files.length > 0) { | ||
| e.preventDefault(); | ||
| handleImageUpload(files); | ||
| } | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing file validation for paste functionality.
The paste implementation bypasses the same validation logic as the drag-and-drop handler, creating inconsistent behavior between upload methods.
Apply this diff to add missing validation:
onPaste={(e) => {
if (!props.allowImageUpload) return;
const files = Array.from(e.clipboardData.files);
if (files.length > 0) {
e.preventDefault();
- handleImageUpload(files);
+ // Validate file count
+ const totalFiles = files.length + images.length;
+ if (totalFiles > maxAllowedImagesPerMessage) {
+ toast.error(
+ `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
+ { position: "top-right" }
+ );
+ return;
+ }
+
+ // Validate file types and sizes
+ const validFiles: File[] = [];
+ for (const file of files) {
+ if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
+ toast.error(`Unsupported file type: ${file.type}`, {
+ description: `File: ${file.name}`,
+ position: "top-right",
+ });
+ continue;
+ }
+ if (file.size <= 5 * 1024 * 1024) {
+ validFiles.push(file);
+ } else {
+ toast.error("Image is larger than 5MB", {
+ description: `File: ${file.name}`,
+ position: "top-right",
+ });
+ }
+ }
+
+ if (validFiles.length > 0) {
+ handleImageUpload(validFiles);
+ }
}
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onPaste={(e) => { | |
| if (!props.allowImageUpload) return; | |
| const files = Array.from(e.clipboardData.files); | |
| if (files.length > 0) { | |
| e.preventDefault(); | |
| handleImageUpload(files); | |
| } | |
| }} | |
| onPaste={(e) => { | |
| if (!props.allowImageUpload) return; | |
| const files = Array.from(e.clipboardData.files); | |
| if (files.length > 0) { | |
| e.preventDefault(); | |
| // Validate file count | |
| const totalFiles = files.length + images.length; | |
| if (totalFiles > maxAllowedImagesPerMessage) { | |
| toast.error( | |
| `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`, | |
| { position: "top-right" } | |
| ); | |
| return; | |
| } | |
| // Validate file types and sizes | |
| const validFiles: File[] = []; | |
| for (const file of files) { | |
| if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) { | |
| toast.error(`Unsupported file type: ${file.type}`, { | |
| description: `File: ${file.name}`, | |
| position: "top-right", | |
| }); | |
| continue; | |
| } | |
| if (file.size <= 5 * 1024 * 1024) { | |
| validFiles.push(file); | |
| } else { | |
| toast.error("Image is larger than 5MB", { | |
| description: `File: ${file.name}`, | |
| position: "top-right", | |
| }); | |
| } | |
| } | |
| if (validFiles.length > 0) { | |
| handleImageUpload(validFiles); | |
| } | |
| } | |
| }} |
🤖 Prompt for AI Agents
In apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx around lines
156 to 163, the onPaste handler lacks the file validation present in the
drag-and-drop handler, causing inconsistent behavior. Update the onPaste
function to include the same file validation logic before calling
handleImageUpload, ensuring only valid files are processed. This will align the
paste functionality with the drag-and-drop upload behavior.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7153 +/- ##
==========================================
+ Coverage 55.68% 55.70% +0.01%
==========================================
Files 904 904
Lines 58324 58340 +16
Branches 4113 4115 +2
==========================================
+ Hits 32476 32496 +20
+ Misses 25743 25739 -4
Partials 105 105
🚀 New features to boost your workflow:
|
size-limit report 📦
|
PR-Codex overview
This PR focuses on enhancing the
ChatBarcomponent by adding image upload functionality through drag-and-drop and clipboard paste events, improving user experience when sharing images.Detailed summary
onDropevent handler to handle image uploads via drag-and-drop.onDragOverevent to prevent default behavior during dragging.onPasteevent to handle image uploads from clipboard.classNameusage.Summary by CodeRabbit
New Features
Bug Fixes