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 3 commits into
base: main
Choose a base branch
from
+68 −29
Open

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3bdc344
Update ChatBar.tsx
pinkhoodie May 24, 2025
67aeab1
fix(nebula): consolidate image upload validation and enhance UX - Mov…
pinkhoodie May 28, 2025
dc48f55
Update ChatBar.tsx
pinkhoodie May 28, 2025
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
97 changes: 68 additions & 29 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 @@ -76,6 +76,7 @@ export function ChatBar(props: {
const [images, setImages] = useState<
Array<{ file: File; b64: string | undefined }>
>([]);
const [isDragOver, setIsDragOver] = useState(false);

function handleSubmit(message: string) {
const userMessage: NebulaUserMessage = {
Expand Down Expand Up @@ -104,10 +105,35 @@ export function ChatBar(props: {
},
});

async function handleImageUpload(images: File[]) {
async function handleImageUpload(files: File[]) {
const totalFiles = files.length + images.length;

Copy link
Member

Choose a reason for hiding this comment

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

Please check if the file is a supported format, the drag and drop allows to me to attach unsupported file types

if (totalFiles > maxAllowedImagesPerMessage) {
toast.error(
`You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
{
position: "top-right",
},
);
return;
}

const validFiles: File[] = [];

for (const file of files) {
if (file.size <= 5 * 1024 * 1024) {
validFiles.push(file);
} else {
toast.error("Image is larger than 5MB", {
description: `File: ${file.name}`,
position: "top-right",
});
}
}

try {
const urls = await Promise.all(
images.map(async (image) => {
validFiles.map(async (image) => {
const b64 = await uploadImageMutation.mutateAsync(image);
return { file: image, b64: b64 };
}),
Expand All @@ -126,9 +152,39 @@ export function ChatBar(props: {
<DynamicHeight transition="height 200ms ease">
<div
className={cn(
"overflow-hidden rounded-2xl border border-border bg-card",
"overflow-hidden rounded-2xl border border-border bg-card transition-colors",
isDragOver &&
props.allowImageUpload &&
"border-nebula-pink-foreground bg-nebula-pink/5",
props.className,
)}
onDrop={(e) => {
e.preventDefault();
setIsDragOver(false);
if (!props.allowImageUpload) return;
const files = Array.from(e.dataTransfer.files);
if (files.length > 0) handleImageUpload(files);
}}
onDragOver={(e) => {
e.preventDefault();
if (props.allowImageUpload) {
setIsDragOver(true);
}
}}
onDragEnter={(e) => {
e.preventDefault();
if (props.allowImageUpload) {
setIsDragOver(true);
}
}}
onDragLeave={(e) => {
e.preventDefault();
// Only set drag over to false if we're leaving the container entirely
if (!e.currentTarget.contains(e.relatedTarget as Node)) {
setIsDragOver(false);
}
}}
aria-dropeffect={props.allowImageUpload ? "copy" : "none"}
>
{images.length > 0 && (
<ImagePreview
Expand All @@ -146,6 +202,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 +205 to +212
Copy link
Contributor

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 @@ -259,32 +323,7 @@ export function ChatBar(props: {
value={undefined}
accept="image/jpeg,image/png,image/webp"
onChange={(files) => {
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;
}

const validFiles: File[] = [];

for (const file of files) {
if (file.size <= 5 * 1024 * 1024) {
validFiles.push(file);
} else {
toast.error("Image is larger than 5MB", {
description: `File: ${file.name}`,
position: "top-right",
});
}
}

handleImageUpload(validFiles);
handleImageUpload(files);
}}
variant="ghost"
className="!h-auto w-auto shrink-0 gap-2 p-2"
Expand Down
Loading