Update ChatBar.tsx

Author: pinkhoodie

apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx

@@ -53,6 +53,12 @@ export type WalletMeta = {
 
 const maxAllowedImagesPerMessage = 4;
 
+function showSigninToUploadImagesToast() {
+  toast.error("Sign in to upload images to Nebula", {
+    position: "top-right",
+  });
+}
+
 export function ChatBar(props: {
   sendMessage: (message: NebulaUserMessage) => void;
   isChatStreaming: boolean;
@@ -105,6 +111,8 @@ export function ChatBar(props: {
     },
   });
 
+  const supportedFileTypes = ["image/jpeg", "image/png", "image/webp"];
+
   async function handleImageUpload(files: File[]) {
     const totalFiles = files.length + images.length;
 
@@ -113,14 +121,22 @@ export function ChatBar(props: {
         `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
         {
           position: "top-right",
-        }
+        },
       );
       return;
     }
 
     const validFiles: File[] = [];
 
     for (const file of files) {
+      if (!supportedFileTypes.includes(file.type)) {
+        toast.error("Unsupported file type", {
+          description: `File: ${file.name}`,
+          position: "top-right",
+        });
+        continue;
+      }
+
       if (file.size <= 5 * 1024 * 1024) {
         validFiles.push(file);
       } else {
@@ -136,7 +152,7 @@ export function ChatBar(props: {
         validFiles.map(async (image) => {
           const b64 = await uploadImageMutation.mutateAsync(image);
           return { file: image, b64: b64 };
-        })
+        }),
       );
 
       setImages((prev) => [...prev, ...urls]);
@@ -153,38 +169,43 @@ export function ChatBar(props: {
       <div
         className={cn(
           "overflow-hidden rounded-2xl border border-border bg-card transition-colors",
-          isDragOver &&
-            props.allowImageUpload &&
-            "border-nebula-pink-foreground bg-nebula-pink/5",
-          props.className
+          isDragOver && "border-nebula-pink-foreground bg-nebula-pink/5",
+          props.className,
         )}
         onDrop={(e) => {
-          e.preventDefault();
           setIsDragOver(false);
-          if (!props.allowImageUpload) return;
+          e.preventDefault();
+          if (!props.allowImageUpload) {
+            showSigninToUploadImagesToast();
+            return;
+          }
           const files = Array.from(e.dataTransfer.files);
           if (files.length > 0) handleImageUpload(files);
         }}
         onDragOver={(e) => {
           e.preventDefault();
-          if (props.allowImageUpload) {
-            setIsDragOver(true);
+          setIsDragOver(true);
+          if (!props.allowImageUpload) {
+            return;
           }
         }}
         onDragEnter={(e) => {
           e.preventDefault();
-          if (props.allowImageUpload) {
-            setIsDragOver(true);
+          setIsDragOver(true);
+          if (!props.allowImageUpload) {
+            return;
           }
         }}
         onDragLeave={(e) => {
           e.preventDefault();
+          if (!props.allowImageUpload) {
+            return;
+          }
           // 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
@@ -203,10 +224,13 @@ export function ChatBar(props: {
               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();
+                  if (!props.allowImageUpload) {
+                    showSigninToUploadImagesToast();
+                    return;
+                  }
                   handleImageUpload(files);
                 }
               }}
@@ -321,7 +345,7 @@ export function ChatBar(props: {
                 <ImageUploadButton
                   multiple
                   value={undefined}
-                  accept="image/jpeg,image/png,image/webp"
+                  accept={supportedFileTypes.join(",")}
                   onChange={(files) => {
                     handleImageUpload(files);
                   }}
@@ -582,7 +606,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 === " ") {