add custom images upload

app/api/ask-ai/route.ts

@@ -197,7 +197,7 @@ export async function PUT(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, previousPrompt, provider, selectedElementHtml, model, pages } =
+  const { prompt, previousPrompt, provider, selectedElementHtml, model, pages, files } =
     body;
 
   if (!prompt || pages.length === 0) {
@@ -281,7 +281,7 @@ export async function PUT(request: NextRequest) {
               selectedElementHtml
                 ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
                 : ""
-            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}.`,
+            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`,
           },
           {
             role: "user",

app/api/me/projects/[namespace]/[repoId]/images/route.ts

@@ -0,0 +1,111 @@
+import { NextRequest, NextResponse } from "next/server";
+import { RepoDesignation, uploadFiles } from "@huggingface/hub";
+
+import { isAuthenticated } from "@/lib/auth";
+import Project from "@/models/Project";
+import dbConnect from "@/lib/mongodb";
+
+// No longer need the ImageUpload interface since we're handling FormData with File objects
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  try {
+    const user = await isAuthenticated();
+
+    if (user instanceof NextResponse || !user) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    await dbConnect();
+    const param = await params;
+    const { namespace, repoId } = param;
+
+    const project = await Project.findOne({
+      user_id: user.id,
+      space_id: `${namespace}/${repoId}`,
+    }).lean();
+    
+    if (!project) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "Project not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    // Parse the FormData to get the images
+    const formData = await req.formData();
+    const imageFiles = formData.getAll("images") as File[];
+
+    if (!imageFiles || imageFiles.length === 0) {
+      return NextResponse.json(
+        {
+          ok: false,
+          error: "At least one image file is required under the 'images' key",
+        },
+        { status: 400 }
+      );
+    }
+
+    const files: File[] = [];
+    for (const file of imageFiles) {
+      if (!(file instanceof File)) {
+        return NextResponse.json(
+          {
+            ok: false,
+            error: "Invalid file format - all items under 'images' key must be files",
+          },
+          { status: 400 }
+        );
+      }
+
+      if (!file.type.startsWith('image/')) {
+        return NextResponse.json(
+          {
+            ok: false,
+            error: `File ${file.name} is not an image`,
+          },
+          { status: 400 }
+        );
+      }
+
+      // Create File object with images/ folder prefix
+      const fileName = `images/${file.name}`;
+      const processedFile = new File([file], fileName, { type: file.type });
+      files.push(processedFile);
+    }
+
+    // Upload files to HuggingFace space
+    const repo: RepoDesignation = {
+      type: "space",
+      name: `${namespace}/${repoId}`,
+    };
+
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: user.token as string,
+      commitTitle: `Upload ${files.length} image(s)`,
+    });
+
+    return NextResponse.json({ 
+      ok: true, 
+      message: `Successfully uploaded ${files.length} image(s) to ${namespace}/${repoId}/images/`,
+      uploadedFiles: files.map((file) => `https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${file.name}`),
+    }, { status: 200 });
+
+  } catch (error) {
+    console.error('Error uploading images:', error);
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Failed to upload images",
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -65,6 +65,9 @@ export async function GET(
     };
 
     const htmlFiles: Page[] = [];
+    const images: string[] = [];
+
+    const allowedImagesExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "avif", "heic", "heif", "ico", "bmp", "tiff", "tif"];
     
     for await (const fileInfo of listFiles({repo, accessToken: user.token as string})) {
       if (fileInfo.path.endsWith(".html")) {
@@ -84,6 +87,13 @@ export async function GET(
           }
         }
       }
+      if (fileInfo.type === "directory" && fileInfo.path === "images") {
+        for await (const imageInfo of listFiles({repo, accessToken: user.token as string, path: fileInfo.path})) {
+          if (allowedImagesExtensions.includes(imageInfo.path.split(".").pop() || "")) {
+            images.push(`https://huggingface.co/spaces/${namespace}/${repoId}/resolve/main/${imageInfo.path}`);
+          }
+        }
+      }
     }
 
     if (htmlFiles.length === 0) {
@@ -101,6 +111,7 @@ export async function GET(
         project: {
           ...project,
           pages: htmlFiles,
+          images,
         },
         ok: true,
       },

app/projects/[namespace]/[repoId]/page.tsx

@@ -36,5 +36,7 @@ export default async function ProjectNamespacePage({
   if (!data?.pages) {
     redirect("/projects");
   }
-  return <AppEditor project={data} pages={data.pages} />;
+  return (
+    <AppEditor project={data} pages={data.pages} images={data.images ?? []} />
+  );
 }

components/editor/ask-ai/index.tsx

@@ -10,8 +10,8 @@ import { FaStopCircle } from "react-icons/fa";
 import ProModal from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
 import { MODELS } from "@/lib/providers";
-import { HtmlHistory, Page } from "@/types";
-import { InviteFriends } from "@/components/invite-friends";
+import { HtmlHistory, Page, Project } from "@/types";
+// import { InviteFriends } from "@/components/invite-friends";
 import { Settings } from "@/components/editor/ask-ai/settings";
 import { LoginModal } from "@/components/login-modal";
 import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
@@ -23,8 +23,12 @@ import { SelectedHtmlElement } from "./selected-html-element";
 import { FollowUpTooltip } from "./follow-up-tooltip";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
 import { useCallAi } from "@/hooks/useCallAi";
+import { SelectedFiles } from "./selected-files";
+import { Uploader } from "./uploader";
 
 export function AskAI({
+  project,
+  images,
   currentPage,
   previousPrompts,
   onScrollToBottom,
@@ -35,13 +39,17 @@ export function AskAI({
   htmlHistory,
   selectedElement,
   setSelectedElement,
+  selectedFiles,
+  setSelectedFiles,
   setIsEditableModeEnabled,
   onNewPrompt,
   onSuccess,
   setPages,
   setCurrentPage,
 }: {
+  project?: Project | null;
   currentPage: Page;
+  images?: string[];
   pages: Page[];
   onScrollToBottom: () => void;
   previousPrompts: string[];
@@ -55,6 +63,8 @@ export function AskAI({
   setIsEditableModeEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   selectedElement?: HTMLElement | null;
   setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  selectedFiles: string[];
+  setSelectedFiles: React.Dispatch<React.SetStateAction<string[]>>;
   setPages: React.Dispatch<React.SetStateAction<Page[]>>;
   setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
 }) {
@@ -72,6 +82,8 @@ export function AskAI({
   const [isThinking, setIsThinking] = useState(true);
   const [think, setThink] = useState("");
   const [isFollowUp, setIsFollowUp] = useState(true);
+  const [isUploading, setIsUploading] = useState(false);
+  const [files, setFiles] = useState<string[]>(images ?? []);
 
   const {
     callAiNewProject,
@@ -110,7 +122,8 @@ export function AskAI({
         model,
         provider,
         previousPrompt,
-        selectedElementHtml
+        selectedElementHtml,
+        selectedFiles
       );
 
       if (result?.error) {
@@ -254,6 +267,13 @@ export function AskAI({
             </main>
           </div>
         )}
+        <SelectedFiles
+          files={selectedFiles}
+          isAiWorking={isAiWorking}
+          onDelete={(file) =>
+            setSelectedFiles((prev) => prev.filter((f) => f !== file))
+          }
+        />
         {selectedElement && (
           <div className="px-4 pt-3">
             <SelectedHtmlElement
@@ -264,21 +284,25 @@ export function AskAI({
           </div>
         )}
         <div className="w-full relative flex items-center justify-between">
-          {isAiWorking && (
+          {(isAiWorking || isUploading) && (
             <div className="absolute bg-neutral-800 rounded-lg top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
               <div className="flex items-center justify-start gap-2">
                 <Loading overlay={false} className="!size-4" />
                 <p className="text-neutral-400 text-sm">
-                  AI is {isThinking ? "thinking" : "coding"}...{" "}
+                  {isUploading
+                    ? "Uploading images..."
+                    : `AI is ${isThinking ? "thinking" : "coding"}...`}
                 </p>
               </div>
-              <div
-                className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
-                onClick={stopController}
-              >
-                <FaStopCircle />
-                Stop generation
-              </div>
+              {isAiWorking && (
+                <div
+                  className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
+                  onClick={stopController}
+                >
+                  <FaStopCircle />
+                  Stop generation
+                </div>
+              )}
             </div>
           )}
           <textarea
@@ -307,6 +331,22 @@ export function AskAI({
         </div>
         <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
           <div className="flex-1 flex items-center justify-start gap-1.5">
+            <Uploader
+              pages={pages}
+              onLoading={setIsUploading}
+              isLoading={isUploading}
+              onFiles={setFiles}
+              onSelectFile={(file) => {
+                if (selectedFiles.includes(file)) {
+                  setSelectedFiles((prev) => prev.filter((f) => f !== file));
+                } else {
+                  setSelectedFiles((prev) => [...prev, file]);
+                }
+              }}
+              files={files}
+              selectedFiles={selectedFiles}
+              project={project}
+            />
             <ReImagine onRedesign={(md) => callAi(md)} />
             {!isSameHtml && (
               <Tooltip>
@@ -335,7 +375,7 @@ export function AskAI({
                 </TooltipContent>
               </Tooltip>
             )}
-            <InviteFriends />
+            {/* <InviteFriends /> */}
           </div>
           <div className="flex items-center justify-end gap-2">
             <Settings
@@ -364,7 +404,7 @@ export function AskAI({
           onClose={() => setOpenProModal(false)}
         />
         {pages.length === 1 && (
-          <div className="border border-sky-500/20 bg-sky-500/20 text-sky-500 pl-2 pr-4 py-1.5 text-xs rounded-full absolute top-0 -translate-y-[calc(100%+8px)] left-0 max-w-max flex items-center justify-start gap-2">
+          <div className="border border-sky-500/20 bg-sky-500/40 hover:bg-sky-600 transition-all duration-200 text-sky-500 pl-2 pr-4 py-1.5 text-xs rounded-full absolute top-0 -translate-y-[calc(100%+8px)] left-0 max-w-max flex items-center justify-start gap-2">
             <span className="rounded-full text-[10px] font-semibold bg-white text-neutral-900 px-1.5 py-0.5">
               NEW
             </span>

components/editor/ask-ai/selected-files.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+
+import { Button } from "@/components/ui/button";
+import { Minus } from "lucide-react";
+
+export const SelectedFiles = ({
+  files,
+  isAiWorking,
+  onDelete,
+}: {
+  files: string[];
+  isAiWorking: boolean;
+  onDelete: (file: string) => void;
+}) => {
+  if (files.length === 0) return null;
+  return (
+    <div className="px-4 pt-3">
+      <div className="flex items-center justify-start gap-2">
+        {files.map((file) => (
+          <div
+            key={file}
+            className="flex items-center relative justify-start gap-2 p-1 bg-neutral-700 rounded-md"
+          >
+            <Image
+              src={file}
+              alt="uploaded image"
+              className="size-12 rounded-md object-cover"
+              width={40}
+              height={40}
+            />
+            <Button
+              size="iconXsss"
+              variant="secondary"
+              className={`absolute top-0.5 right-0.5 ${
+                isAiWorking ? "opacity-50 !cursor-not-allowed" : ""
+              }`}
+              disabled={isAiWorking}
+              onClick={() => onDelete(file)}
+            >
+              <Minus className="size-4" />
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

components/editor/ask-ai/uploader.tsx

@@ -0,0 +1,202 @@
+import { useRef, useState } from "react";
+import { Images, Upload } from "lucide-react";
+import Image from "next/image";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Page, Project } from "@/types";
+import Loading from "@/components/loading";
+import { RiCheckboxCircleFill } from "react-icons/ri";
+import { useUser } from "@/hooks/useUser";
+import { LoginModal } from "@/components/login-modal";
+import { DeployButtonContent } from "../deploy-button/content";
+
+export const Uploader = ({
+  pages,
+  onLoading,
+  isLoading,
+  onFiles,
+  onSelectFile,
+  selectedFiles,
+  files,
+  project,
+}: {
+  pages: Page[];
+  onLoading: (isLoading: boolean) => void;
+  isLoading: boolean;
+  files: string[];
+  onFiles: React.Dispatch<React.SetStateAction<string[]>>;
+  onSelectFile: (file: string) => void;
+  selectedFiles: string[];
+  project?: Project | null;
+}) => {
+  const { user } = useUser();
+
+  const [open, setOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const uploadFiles = async (files: FileList | null) => {
+    if (!files) return;
+    if (!project) return;
+
+    onLoading(true);
+
+    const images = Array.from(files).filter((file) => {
+      return file.type.startsWith("image/");
+    });
+
+    const data = new FormData();
+    images.forEach((image) => {
+      data.append("images", image);
+    });
+
+    const response = await fetch(
+      `/api/me/projects/${project.space_id}/images`,
+      {
+        method: "POST",
+        body: data,
+      }
+    );
+    if (response.ok) {
+      const data = await response.json();
+      onFiles((prev) => [...prev, ...data.uploadedFiles]);
+    }
+    onLoading(false);
+  };
+
+  // TODO FIRST PUBLISH YOUR PROJECT TO UPLOAD IMAGES.
+  return user?.id ? (
+    <Popover open={open} onOpenChange={setOpen}>
+      <form>
+        <PopoverTrigger asChild>
+          <Button
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+          >
+            <Images className="size-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
+        >
+          {project?.space_id ? (
+            <>
+              <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+                <div className="flex items-center justify-center -space-x-4 mb-3">
+                  <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                    🎨
+                  </div>
+                  <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                    🖼️
+                  </div>
+                  <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                    💻
+                  </div>
+                </div>
+                <p className="text-xl font-semibold text-neutral-950">
+                  Add Custom Images
+                </p>
+                <p className="text-sm text-neutral-500 mt-1.5">
+                  Upload images to your project and use them with DeepSite!
+                </p>
+              </header>
+              <main className="space-y-4 p-5">
+                <div>
+                  <p className="text-xs text-left text-neutral-700 mb-2">
+                    Uploaded Images
+                  </p>
+                  <div className="grid grid-cols-4 gap-1 flex-wrap">
+                    {files.map((file) => (
+                      <div
+                        key={file}
+                        className="select-none relative cursor-pointer bg-white rounded-md border-[2px] border-white hover:shadow-2xl transition-all duration-300"
+                        onClick={() => onSelectFile(file)}
+                      >
+                        <Image
+                          src={file}
+                          alt="uploaded image"
+                          width={56}
+                          height={56}
+                          className="object-cover w-full rounded-sm aspect-square"
+                        />
+                        {selectedFiles.includes(file) && (
+                          <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
+                            <RiCheckboxCircleFill className="size-6 text-neutral-100" />
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <p className="text-xs text-left text-neutral-700 mb-2">
+                    Or import images from your computer
+                  </p>
+                  <Button
+                    variant="black"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="relative w-full"
+                  >
+                    {isLoading ? (
+                      <>
+                        <Loading
+                          overlay={false}
+                          className="ml-2 size-4 animate-spin"
+                        />
+                        Uploading image(s)...
+                      </>
+                    ) : (
+                      <>
+                        <Upload className="size-4" />
+                        Upload Images
+                      </>
+                    )}
+                  </Button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    className="hidden"
+                    multiple
+                    accept="image/*"
+                    onChange={(e) => uploadFiles(e.target.files)}
+                  />
+                </div>
+              </main>
+            </>
+          ) : (
+            <DeployButtonContent
+              pages={pages}
+              prompts={[]}
+              options={{
+                description: "Publish your project first to add custom images.",
+              }}
+            />
+          )}
+        </PopoverContent>
+      </form>
+    </Popover>
+  ) : (
+    <>
+      <Button
+        size="iconXs"
+        variant="outline"
+        className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+      >
+        <Images className="size-4" />
+      </Button>
+      <LoginModal
+        open={open}
+        onClose={() => setOpen(false)}
+        pages={pages}
+        title="Log In to add Custom Images"
+        description="Log In through your Hugging Face account to publish your project and increase your monthly free limit."
+      />
+    </>
+  );
+};

components/editor/deploy-button/content.tsx

@@ -0,0 +1,111 @@
+import { Rocket } from "lucide-react";
+import Image from "next/image";
+
+import Loading from "@/components/loading";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import SpaceIcon from "@/assets/space.svg";
+import { Page } from "@/types";
+import { api } from "@/lib/api";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export const DeployButtonContent = ({
+  pages,
+  options,
+  prompts,
+}: {
+  pages: Page[];
+  options?: {
+    title?: string;
+    description?: string;
+  };
+  prompts: string[];
+}) => {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const [config, setConfig] = useState({
+    title: "",
+  });
+
+  const createSpace = async () => {
+    if (!config.title) {
+      toast.error("Please enter a title for your space.");
+      return;
+    }
+    setLoading(true);
+
+    try {
+      const res = await api.post("/me/projects", {
+        title: config.title,
+        pages,
+        prompts,
+      });
+      if (res.data.ok) {
+        router.push(`/projects/${res.data.path}?deploy=true`);
+      } else {
+        toast.error(res?.data?.error || "Failed to create space");
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+        <div className="flex items-center justify-center -space-x-4 mb-3">
+          <div className="size-9 rounded-full bg-amber-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+            🚀
+          </div>
+          <div className="size-11 rounded-full bg-red-200 shadow-2xl flex items-center justify-center z-2">
+            <Image src={SpaceIcon} alt="Space Icon" className="size-7" />
+          </div>
+          <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+            👻
+          </div>
+        </div>
+        <p className="text-xl font-semibold text-neutral-950">
+          Publish as Space!
+        </p>
+        <p className="text-sm text-neutral-500 mt-1.5">
+          {options?.description ??
+            "Save and Publish your project to a Space on the Hub. Spaces are a way to share your project with the world."}
+        </p>
+      </header>
+      <main className="space-y-4 p-6">
+        <div>
+          <p className="text-sm text-neutral-700 mb-2">
+            Choose a title for your space:
+          </p>
+          <Input
+            type="text"
+            placeholder="My Awesome Website"
+            value={config.title}
+            onChange={(e) => setConfig({ ...config, title: e.target.value })}
+            className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-neutral-700 mb-2">
+            Then, let&apos;s publish it!
+          </p>
+          <Button
+            variant="black"
+            onClick={createSpace}
+            className="relative w-full"
+            disabled={loading}
+          >
+            Publish Space <Rocket className="size-4" />
+            {loading && <Loading className="ml-2 size-4 animate-spin" />}
+          </Button>
+        </div>
+      </main>
+    </>
+  );
+};

components/editor/deploy-button/index.tsx

@@ -1,24 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-import { toast } from "sonner";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
 import { MdSave } from "react-icons/md";
-import { Rocket } from "lucide-react";
 
-import SpaceIcon from "@/assets/space.svg";
-import Loading from "@/components/loading";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { api } from "@/lib/api";
 import { LoginModal } from "@/components/login-modal";
 import { useUser } from "@/hooks/useUser";
 import { Page } from "@/types";
+import { DeployButtonContent } from "./content";
 
 export function DeployButton({
   pages,
@@ -27,40 +20,9 @@ export function DeployButton({
   pages: Page[];
   prompts: string[];
 }) {
-  const router = useRouter();
   const { user } = useUser();
-  const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
 
-  const [config, setConfig] = useState({
-    title: "",
-  });
-
-  const createSpace = async () => {
-    if (!config.title) {
-      toast.error("Please enter a title for your space.");
-      return;
-    }
-    setLoading(true);
-
-    try {
-      const res = await api.post("/me/projects", {
-        title: config.title,
-        pages,
-        prompts,
-      });
-      if (res.data.ok) {
-        router.push(`/projects/${res.data.path}?deploy=true`);
-      } else {
-        toast.error(res?.data?.error || "Failed to create space");
-      }
-    } catch (err: any) {
-      toast.error(err.response?.data?.error || err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
     <div className="flex items-center justify-end gap-5">
       <div className="relative flex items-center justify-end">
@@ -81,62 +43,7 @@ export function DeployButton({
               className="!rounded-2xl !p-0 !bg-white !border-neutral-200 min-w-xs text-center overflow-hidden"
               align="end"
             >
-              <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
-                <div className="flex items-center justify-center -space-x-4 mb-3">
-                  <div className="size-9 rounded-full bg-amber-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                    🚀
-                  </div>
-                  <div className="size-11 rounded-full bg-red-200 shadow-2xl flex items-center justify-center z-2">
-                    <Image
-                      src={SpaceIcon}
-                      alt="Space Icon"
-                      className="size-7"
-                    />
-                  </div>
-                  <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                    👻
-                  </div>
-                </div>
-                <p className="text-xl font-semibold text-neutral-950">
-                  Publish as Space!
-                </p>
-                <p className="text-sm text-neutral-500 mt-1.5">
-                  Save and Publish your project to a Space on the Hub. Spaces
-                  are a way to share your project with the world.
-                </p>
-              </header>
-              <main className="space-y-4 p-6">
-                <div>
-                  <p className="text-sm text-neutral-700 mb-2">
-                    Choose a title for your space:
-                  </p>
-                  <Input
-                    type="text"
-                    placeholder="My Awesome Website"
-                    value={config.title}
-                    onChange={(e) =>
-                      setConfig({ ...config, title: e.target.value })
-                    }
-                    className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
-                  />
-                </div>
-                <div>
-                  <p className="text-sm text-neutral-700 mb-2">
-                    Then, let&apos;s publish it!
-                  </p>
-                  <Button
-                    variant="black"
-                    onClick={createSpace}
-                    className="relative w-full"
-                    disabled={loading}
-                  >
-                    Publish Space <Rocket className="size-4" />
-                    {loading && (
-                      <Loading className="ml-2 size-4 animate-spin" />
-                    )}
-                  </Button>
-                </div>
-              </main>
+              <DeployButtonContent pages={pages} prompts={prompts} />
             </PopoverContent>
           </Popover>
         ) : (

components/editor/footer/index.tsx

@@ -8,6 +8,7 @@ import { MdAdd } from "react-icons/md";
 import { History } from "@/components/editor/history";
 import { UserMenu } from "@/components/user-menu";
 import { useUser } from "@/hooks/useUser";
+import Link from "next/link";
 
 const DEVICES = [
   {
@@ -21,14 +22,12 @@ const DEVICES = [
 ];
 
 export function Footer({
-  onReset,
   htmlHistory,
   setPages,
   device,
   setDevice,
   iframeRef,
 }: {
-  onReset: () => void;
   htmlHistory?: HtmlHistory[];
   device: "desktop" | "mobile";
   setPages: (pages: Page[]) => void;
@@ -62,10 +61,12 @@ export function Footer({
             <UserMenu className="!p-1 !pr-3 !h-auto" />
           ))}
         {user && <p className="text-neutral-700">|</p>}
-        <Button size="sm" variant="secondary" onClick={onReset}>
-          <MdAdd className="text-sm" />
-          New <span className="max-lg:hidden">Project</span>
-        </Button>
+        <Link href="/projects/new">
+          <Button size="sm" variant="secondary">
+            <MdAdd className="text-sm" />
+            New <span className="max-lg:hidden">Project</span>
+          </Button>
+        </Link>
         {htmlHistory && htmlHistory.length > 0 && (
           <>
             <p className="text-neutral-700">|</p>

components/editor/index.tsx

@@ -31,10 +31,12 @@ import { ListPages } from "./pages";
 export const AppEditor = ({
   project,
   pages: initialPages,
+  images,
   isNew,
 }: {
   project?: Project | null;
   pages?: Page[];
+  images?: string[];
   isNew?: boolean;
 }) => {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("pages");
@@ -63,6 +65,7 @@ export const AppEditor = ({
   const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
     null
   );
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
 
   const resetLayout = () => {
     if (!editor.current || !preview.current) return;
@@ -285,6 +288,8 @@ export const AppEditor = ({
                 onValidate={handleEditorValidation}
               />
               <AskAI
+                project={project}
+                images={images}
                 currentPage={currentPageData}
                 htmlHistory={htmlHistory}
                 previousPrompts={project?.prompts ?? []}
@@ -297,6 +302,7 @@ export const AppEditor = ({
                   });
                   setHtmlHistory(currentHistory);
                   setSelectedElement(null);
+                  setSelectedFiles([]);
                   // if xs or sm
                   if (window.innerWidth <= 1024) {
                     setCurrentTab("preview");
@@ -340,6 +346,8 @@ export const AppEditor = ({
                 setIsEditableModeEnabled={setIsEditableModeEnabled}
                 selectedElement={selectedElement}
                 setSelectedElement={setSelectedElement}
+                setSelectedFiles={setSelectedFiles}
+                selectedFiles={selectedFiles}
               />
             </div>
             <div
@@ -367,21 +375,6 @@ export const AppEditor = ({
         />
       </main>
       <Footer
-        onReset={() => {
-          if (isAiWorking) {
-            toast.warning("Please wait for the AI to finish working.");
-            return;
-          }
-          if (
-            window.confirm("You're about to reset the editor. Are you sure?")
-          ) {
-            // setHtml(defaultHTML);
-            removeHtmlStorage();
-            editorRef.current?.revealLine(
-              editorRef.current?.getModel()?.getLineCount() ?? 0
-            );
-          }
-        }}
         htmlHistory={htmlHistory}
         setPages={setPages}
         iframeRef={iframeRef}

hooks/useCallAi.ts

@@ -237,7 +237,7 @@ export const useCallAi = ({
     }
   };
 
-  const callAiFollowUp = async (prompt: string, model: string | undefined, provider: string | undefined, previousPrompt: string, selectedElementHtml?: string) => {
+  const callAiFollowUp = async (prompt: string, model: string | undefined, provider: string | undefined, previousPrompt: string, selectedElementHtml?: string, files?: string[]) => {
     if (isAiWorking) return;
     if (!prompt.trim()) return;
     
@@ -258,6 +258,7 @@ export const useCallAi = ({
           model,
           pages,
           selectedElementHtml,
+          files,
         }),
         headers: {
           "Content-Type": "application/json",

next.config.ts

@@ -24,6 +24,9 @@ const nextConfig: NextConfig = {
 
     return config;
   },
+  images: {
+    remotePatterns: [new URL('https://huggingface.co/**')],
+  },
 };
 
 export default nextConfig;