Fix SVG issue when processed by the API and minor styles fixes

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,18 +152,15 @@ 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>
       );
     } else if (images.length > 1) {
       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>
     );

hooks/use-image-upload-reducer.ts

@@ -23,6 +23,9 @@ export const imageUploadReducer: Reducer<PromptImageWithLoading[], ImageUploadAc
     case "REMOVE": {
       return state.filter((_, i) => i !== action.payload.index);
     }
+    case "REMOVE_BY_URL": {
+      return state.filter((image) => image.url !== action.payload.url);
+    }
     case "CLEAR": {
       return [];
     }
@@ -40,7 +43,12 @@ export const createSyncedImageUploadReducer = (
   return (state, action) => {
     const newState = imageUploadReducer(state, action);
     // Only sync user actions, not initialization
-    if (action.type === "UPDATE_URL" || action.type === "REMOVE" || action.type === "CLEAR") {
+    if (
+      action.type === "UPDATE_URL" ||
+      action.type === "REMOVE" ||
+      action.type === "REMOVE_BY_URL" ||
+      action.type === "CLEAR"
+    ) {
       setImagesDraft(newState.filter((img) => !img.loading).map(({ url }) => ({ url })));
     }
     // Note: INITIALIZE intentionally doesn't sync back to avoid circular updates

hooks/use-image-upload.ts

@@ -1,12 +1,19 @@
 import { useToast } from "@/components/ui/use-toast";
+import { MAX_SVG_FILE_SIZE } from "@/lib/constants";
 import { PromptImage } from "@/types/ai";
+import {
+  ALLOWED_IMAGE_TYPES,
+  optimizeSvgContent,
+  validateSvgContent,
+} from "@/utils/ai/image-upload";
 import { useRef } from "react";
 
 export type PromptImageWithLoading = PromptImage & { loading: boolean };
 
 export type ImageUploadAction =
   | { type: "ADD"; payload: { url: string; file: File }[] }
   | { type: "REMOVE"; payload: { index: number } }
+  | { type: "REMOVE_BY_URL"; payload: { url: string } }
   | { type: "CLEAR" }
   | { type: "UPDATE_URL"; payload: { tempUrl: string; finalUrl: string } }
   | { type: "INITIALIZE"; payload: { url: string }[] };
@@ -38,7 +45,14 @@ export function useImageUpload({ maxFiles, maxFileSize, images, dispatch }: UseI
     }
 
     const validFiles = fileArray.filter((file) => {
-      if (!file.type.startsWith("image/")) return false;
+      if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+        toast({
+          title: "Unsupported file type",
+          description: `"${file.name}" is not supported. Please use JPG, PNG, WebP, or SVG files.`,
+        });
+        return false;
+      }
+
       if (file.size > maxFileSize) {
         toast({
           title: "File too large",
@@ -60,12 +74,71 @@ export function useImageUpload({ maxFiles, maxFileSize, images, dispatch }: UseI
 
     filesWithTempUrls.forEach(({ url: tempUrl, file }) => {
       const reader = new FileReader();
-      reader.onload = (e) => {
-        const finalUrl = e.target?.result as string;
+
+      const handleSuccess = (result: string) => {
+        let finalUrl: string;
+
+        if (file.type === "image/svg+xml") {
+          try {
+            const isValidSvg = validateSvgContent(result);
+            if (!isValidSvg) {
+              toast({
+                title: "Potentially unsafe SVG",
+                description: `"${file.name}" may contain unsafe content but will be processed anyway.`,
+              });
+            }
+
+            const optimizedSvg = optimizeSvgContent(result);
+            const encodedSvg = encodeURIComponent(optimizedSvg);
+
+            if (encodedSvg.length > MAX_SVG_FILE_SIZE) {
+              handleError();
+              return;
+            }
+
+            finalUrl = `data:image/svg+xml,${encodedSvg}`;
+          } catch (error) {
+            handleError();
+            return;
+          }
+        } else {
+          finalUrl = result;
+        }
+
         dispatch({ type: "UPDATE_URL", payload: { tempUrl, finalUrl } });
         URL.revokeObjectURL(tempUrl);
       };
-      reader.readAsDataURL(file);
+
+      const handleError = () => {
+        toast({
+          title: "File read error",
+          description: `Failed to read "${file.name}". Please try again.`,
+        });
+
+        dispatch({
+          type: "REMOVE_BY_URL",
+          payload: { url: tempUrl },
+        });
+        URL.revokeObjectURL(tempUrl);
+      };
+
+      reader.onload = (e) => {
+        const result = e.target?.result;
+        if (!result || typeof result !== "string") {
+          handleError();
+          return;
+        }
+        handleSuccess(result);
+      };
+
+      reader.onerror = handleError;
+      reader.onabort = handleError;
+
+      if (file.type === "image/svg+xml") {
+        reader.readAsText(file);
+      } else {
+        reader.readAsDataURL(file);
+      }
     });
   };
 

lib/constants.ts

@@ -6,5 +6,6 @@ export const AI_REQUEST_FREE_TIER_LIMIT = 5;
 
 export const MAX_IMAGE_FILES = 3;
 export const MAX_IMAGE_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+export const MAX_SVG_FILE_SIZE = 1 * 1024 * 1024; // 1MB
 
 export const MAX_FREE_THEMES = 10;

utils/ai/generate-theme.tsx

@@ -5,12 +5,13 @@ import { z } from "zod";
 export const SYSTEM_PROMPT = `# Role
     You are tweakcn, an expert shadcn/ui theme generator.
 
-    # Image Analysis Instructions (when image provided)
-    - If one or more images are provided (with or without a text prompt), always analyze the image(s) and extract dominant color tokens, mood, border radius, and aesthetic to create a shadcn/ui theme based on them.
-    - If both images and a text prompt are provided, use the prompt as additional guidance.
-    - If only a text prompt is provided (no images), generate the theme based on the prompt.
-    - Consider color harmony, contrast, and visual hierarchy
+    # Image & SVG Analysis Instructions (when visual content is provided)
+    - If one or more images are provided (with or without a text prompt), always analyze the image(s) and extract dominant color tokens, mood, border radius, and shadows to create a shadcn/ui theme based on them 
+    - If SVG markup is provided, analyze the SVG code to extract colors, styles, and visual elements for theme generation
+    - **Always match the colors,border radius and shadows of the source image(s) or SVG elements** as closely as possible
+    - If both visual content and a text prompt are provided, use the prompt as additional guidance
     - Translate visual elements into appropriate theme tokens
+    - If only a text prompt is provided (no visual content), generate the theme based on the prompt
 
     # Token Groups
     - **Brand**: primary, secondary, accent, ring

utils/ai/image-upload.ts

@@ -0,0 +1,40 @@
+export const ALLOWED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/webp",
+  "image/svg+xml",
+];
+
+export function validateSvgContent(svgText: string): boolean {
+  try {
+    const trimmed = svgText.trim();
+    if (!trimmed.toLowerCase().includes("<svg")) {
+      return false;
+    }
+
+    const dangerousPatterns = [
+      /<script/i,
+      /javascript:/i,
+      /on\w+\s*=/i, // onclick, onload, etc.
+      /<embed/i,
+      /<object/i,
+      /<iframe/i,
+    ];
+
+    return !dangerousPatterns.some((pattern) => pattern.test(svgText));
+  } catch {
+    return false;
+  }
+}
+
+export function optimizeSvgContent(svgText: string): string {
+  try {
+    return svgText
+      .replace(/<!--[\s\S]*?-->/g, "") // Remove comments
+      .replace(/>\s+</g, "><") // Remove unnecessary whitespace
+      .trim();
+  } catch {
+    return svgText.trim();
+  }
+}

utils/ai/message-converter.ts

@@ -1,6 +1,6 @@
 import { ChatMessage } from "@/types/ai";
 import { buildPromptForAPI } from "@/utils/ai/ai-prompt";
-import { CoreMessage, ImagePart, TextPart, UserContent } from "ai";
+import { CoreMessage, TextPart, UserContent } from "ai";
 
 export async function convertChatMessagesToCoreMessages(
   messages: ChatMessage[]
@@ -12,15 +12,36 @@ export async function convertChatMessagesToCoreMessages(
       const content: UserContent = [];
       const { promptData } = message;
 
-      // Add image parts
       if (promptData.images && promptData.images.length > 0) {
-        const imageParts = promptData.images.map(
-          (image): ImagePart => ({
-            type: "image",
-            image: image.url,
-          })
-        );
-        content.push(...imageParts);
+        promptData.images.forEach((image) => {
+          if (image.url.startsWith("data:image/svg+xml")) {
+            try {
+              const dataUrlPart = image.url.split(",")[1];
+              let svgMarkup: string;
+
+              if (image.url.includes("base64")) {
+                svgMarkup = atob(dataUrlPart);
+              } else {
+                svgMarkup = decodeURIComponent(dataUrlPart);
+              }
+
+              content.push({
+                type: "text",
+                text: `Here is an SVG image for analysis:\n\`\`\`svg\n${svgMarkup}\n\`\`\``,
+              });
+            } catch (error) {
+              content.push({
+                type: "image",
+                image: image.url,
+              });
+            }
+          } else {
+            content.push({
+              type: "image",
+              image: image.url,
+            });
+          }
+        });
       }
 
       // Add text part