Fix SVG issue when processed by the API and minor styles fixes (#171)

* fix: border radius and overflow in ImagePreview component

* fix: Proper support for SVGs and UI feedback when errors occur

* SVG files are treated and displayed as Images in the UI
* SVG files are processed as Markup Text to send to the API
* Remove support for GIFs

* chore: improve system prompt to handle SVGs properly

* styles: Add border radius to uploaded image preview when loading

components/editor/ai/chat-image-preview.tsx

@@ -18,13 +18,13 @@ export function ChatImagePreview({ name, src, className, alt, ...props }: ChatIm
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <div className="group/preview relative isolate size-full cursor-pointer overflow-hidden border">
+        <div className="group/preview relative isolate size-full cursor-pointer overflow-hidden rounded-lg border">
           <Image
-            width={300}
-            height={300}
+            width={250}
+            height={250}
             src={src}
             className={cn(
-              "h-auto max-h-[300px] w-auto max-w-[300px] object-cover object-center",
+              "h-auto max-h-[250px] w-auto max-w-[250px] object-cover object-center",
               className
             )}
             alt={alt || "Image preview"}

components/editor/ai/drag-and-drop-image-uploader.tsx

@@ -18,7 +18,13 @@ export function DragAndDropImageUploader({
     multiple: true,
     noClick: true,
     disabled,
-    accept: { "image/*": [] },
+    accept: {
+      "image/jpeg": [],
+      "image/jpg": [],
+      "image/png": [],
+      "image/webp": [],
+      "image/svg+xml": [],
+    },
   });
 
   return (

components/editor/ai/image-uploader.tsx

@@ -2,6 +2,7 @@ import { TooltipWrapper } from "@/components/tooltip-wrapper";
 import { Button } from "@/components/ui/button";
 import { MAX_IMAGE_FILE_SIZE, MAX_IMAGE_FILES } from "@/lib/constants";
 import { cn } from "@/lib/utils";
+import { ALLOWED_IMAGE_TYPES } from "@/utils/ai/image-upload";
 import { ImagePlus } from "lucide-react";
 import { ComponentProps } from "react";
 
@@ -32,7 +33,7 @@ export function ImageUploader({
         multiple
         max={MAX_IMAGE_FILES}
         size={MAX_IMAGE_FILE_SIZE}
-        accept="image/*"
+        accept={ALLOWED_IMAGE_TYPES.join(",")}
         className="hidden"
         aria-label="Upload image for theme generation"
         ref={fileInputRef}

components/editor/ai/message.tsx

@@ -152,7 +152,7 @@ function UserMessage({
 
     if (images.length === 1) {
       return (
-        <div className="self-end overflow-hidden rounded-lg">
+        <div className="self-end">
           <ChatImagePreview src={images[0].url} alt="Image preview" />
         </div>
       );
@@ -160,10 +160,7 @@ function UserMessage({
       return (
         <div className="flex flex-row items-center justify-end gap-1 self-end">
           {images.map((image, idx) => (
-            <div
-              key={idx}
-              className="aspect-square size-full max-w-32 flex-1 overflow-hidden rounded-lg"
-            >
+            <div key={idx} className="aspect-square size-full max-w-32 flex-1">
               <ChatImagePreview
                 className="size-full object-cover"
                 src={image.url}

components/editor/ai/uploaded-image-preview.tsx

@@ -22,7 +22,7 @@ export function UploadedImagePreview({
 }: ImagePreviewProps) {
   if (isImageLoading) {
     return (
-      <div className="bg-muted inset-0 flex size-14 items-center justify-center">
+      <div className="bg-muted flex size-14 items-center justify-center rounded-md border">
         <Loader className="text-muted-foreground size-4 animate-spin" />
       </div>
     );