Skip to content

Update ChatBar.tsx to allow for copy/paste and drag/drop file uploads #7153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update ChatBar.tsx to allow for copy/paste and drag/drop file uploads #7153

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function ChatBar(props: {
images.map(async (image) => {
const b64 = await uploadImageMutation.mutateAsync(image);
return { file: image, b64: b64 };
}),
})
);

setImages((prev) => [...prev, ...urls]);
Expand All @@ -127,8 +127,15 @@ export function ChatBar(props: {
<div
className={cn(
"overflow-hidden rounded-2xl border border-border bg-card",
props.className,
props.className
)}
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()}
Comment on lines +132 to +138
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

>
{images.length > 0 && (
<ImagePreview
Expand All @@ -146,6 +153,14 @@ export function ChatBar(props: {
placeholder={props.placeholder}
value={message}
onChange={(e) => setMessage(e.target.value)}
onPaste={(e) => {
if (!props.allowImageUpload) return;
const files = Array.from(e.clipboardData.files);
if (files.length > 0) {
e.preventDefault();
handleImageUpload(files);
}
}}
Comment on lines +156 to +163
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
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.

onKeyDown={(e) => {
// ignore if shift key is pressed to allow entering new lines
if (e.shiftKey) {
Expand Down Expand Up @@ -266,7 +281,7 @@ export function ChatBar(props: {
`You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
{
position: "top-right",
},
}
);
return;
}
Expand Down Expand Up @@ -543,7 +558,7 @@ function WalletSelector(props: {
key={wallet.address}
className={cn(
"flex cursor-pointer items-center justify-between px-3 py-4 hover:bg-accent/50",
props.selectedAddress === wallet.address && "bg-accent/50",
props.selectedAddress === wallet.address && "bg-accent/50"
)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
Expand Down
Loading