Upload 105 files

Dockerfile.txt

@@ -0,0 +1,19 @@
+FROM node:20-alpine
+USER root
+
+USER 1000
+WORKDIR /usr/src/app
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+
+RUN npm install
+RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

Project.ts

@@ -0,0 +1,27 @@
+import mongoose from "mongoose";
+
+const ProjectSchema = new mongoose.Schema({
+  space_id: {
+    type: String,
+    required: true,
+  },
+  user_id: {
+    type: String,
+    required: true,
+  },
+  prompts: {
+    type: [String],
+    default: [],
+  },
+  _createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+  _updatedAt: {
+    type: Date,
+    default: Date.now,
+  },
+});
+
+export default mongoose.models.Project ||
+  mongoose.model("Project", ProjectSchema);

README (2).md

@@ -0,0 +1,22 @@
+---
+title: DeepSite v2
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
+sdk: docker
+pinned: true
+app_port: 3000
+license: mit
+short_description: Generate any application with DeepSeek
+models:
+  - deepseek-ai/DeepSeek-V3-0324
+  - deepseek-ai/DeepSeek-R1-0528
+---
+
+# DeepSite 🐳
+
+DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
+
+## How to use it locally
+
+Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)

api.ts

@@ -0,0 +1,35 @@
+import axios from "axios";
+import MY_TOKEN_KEY from "./get-cookie-name";
+
+export const api = axios.create({
+  baseURL: `/api`,
+  headers: {
+    cache: "no-store",
+  },
+});
+
+export const apiServer = axios.create({
+  baseURL: process.env.NEXT_APP_API_URL as string,
+  headers: {
+    cache: "no-store",
+  },
+});
+
+api.interceptors.request.use(
+  async (config) => {
+    // get the token from cookies
+    const cookie_name = MY_TOKEN_KEY();
+    const token = document.cookie
+      .split("; ")
+      .find((row) => row.startsWith(`${cookie_name}=`))
+      ?.split("=")[1];
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    // Handle the error
+    return Promise.reject(error);
+  }
+);

app-context.tsx.txt

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { useUser } from "@/hooks/useUser";
+import { usePathname, useRouter } from "next/navigation";
+import { useMount } from "react-use";
+import { UserContext } from "@/components/contexts/user-context";
+import { User } from "@/types";
+import { toast } from "sonner";
+import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
+
+export default function AppContext({
+  children,
+  me: initialData,
+}: {
+  children: React.ReactNode;
+  me?: {
+    user: User | null;
+    errCode: number | null;
+  };
+}) {
+  const { loginFromCode, user, logout, loading, errCode } =
+    useUser(initialData);
+  const pathname = usePathname();
+  const router = useRouter();
+
+  useMount(() => {
+    if (!initialData?.user && !user) {
+      if ([401, 403].includes(errCode as number)) {
+        logout();
+      } else if (pathname.includes("/spaces")) {
+        if (errCode) {
+          toast.error("An error occured while trying to log in");
+        }
+        // If we did not manage to log in (probs because api is down), we simply redirect to the home page
+        router.push("/");
+      }
+    }
+  });
+
+  const events: any = {};
+
+  useBroadcastChannel("auth", (message) => {
+    if (pathname.includes("/auth/callback")) return;
+
+    if (!message.code) return;
+    if (message.type === "user-oauth" && message?.code && !events.code) {
+      loginFromCode(message.code);
+    }
+  });
+
+  return (
+    <UserContext value={{ user, loading, logout } as any}>
+      {children}
+    </UserContext>
+  );
+}

auth (1).ts

@@ -0,0 +1,18 @@
+"use server";
+
+import { headers } from "next/headers";
+
+export async function getAuth() {
+  const authList = await headers();
+  const host = authList.get("host") ?? "localhost:3000";
+  const url = host.includes("/spaces/enzostvs")
+    ? "enzostvs-deepsite.hf.space"
+    : host;
+  const redirect_uri =
+    `${host.includes("localhost") ? "http://" : "https://"}` +
+    url +
+    "/auth/callback";
+
+  const loginRedirectUrl = `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${redirect_uri}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`;
+  return loginRedirectUrl;
+}

auth.ts

@@ -0,0 +1,72 @@
+import { User } from "@/types";
+import { NextResponse } from "next/server";
+import { cookies, headers } from "next/headers";
+import MY_TOKEN_KEY from "./get-cookie-name";
+
+// UserResponse = type User & { token: string };
+type UserResponse = User & { token: string };
+
+export const isAuthenticated = async (): // req: NextRequest
+Promise<UserResponse | NextResponse<unknown> | undefined> => {
+  const authHeaders = await headers();
+  const cookieStore = await cookies();
+  const token = cookieStore.get(MY_TOKEN_KEY())?.value
+    ? `Bearer ${cookieStore.get(MY_TOKEN_KEY())?.value}`
+    : authHeaders.get("Authorization");
+
+  if (!token) {
+    return NextResponse.json(
+      {
+        ok: false,
+        message: "Wrong castle fam :(",
+      },
+      {
+        status: 401,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  const user = await fetch("https://huggingface.co/api/whoami-v2", {
+    headers: {
+      Authorization: token,
+    },
+    method: "GET",
+  })
+    .then((res) => res.json())
+    .catch(() => {
+      return NextResponse.json(
+        {
+          ok: false,
+          message: "Invalid token",
+        },
+        {
+          status: 401,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+    });
+  if (!user || !user.id) {
+    return NextResponse.json(
+      {
+        ok: false,
+        message: "Invalid token",
+      },
+      {
+        status: 401,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  return {
+    ...user,
+    token: token.replace("Bearer ", ""),
+  };
+};

avatar.tsx.txt

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

button.tsx.txt

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-sans font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-red-500 text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 [&_svg]:!text-white",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        lightGray: "bg-neutral-200/60 hover:bg-neutral-200",
+        link: "text-primary underline-offset-4 hover:underline",
+        ghostDarker:
+          "text-white shadow-xs focus-visible:ring-black/40 bg-black/40 hover:bg-black/70",
+        black: "bg-neutral-950 text-neutral-300 hover:brightness-110",
+        sky: "bg-sky-500 text-white hover:brightness-110",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-full text-[13px] gap-1.5 px-3",
+        lg: "h-10 rounded-full px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        iconXs: "size-7",
+        iconXss: "size-6",
+        iconXsss: "size-5",
+        xs: "h-6 text-xs rounded-full pl-2 pr-2 gap-1",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

checkbox.tsx.txt

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-3.5 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

collapsible.tsx.txt

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

compare-html-diff.ts

@@ -0,0 +1,11 @@
+import { defaultHTML } from "./consts";
+
+export const isTheSameHtml = (currentHtml: string): boolean => {
+  const normalize = (html: string): string =>
+    html
+      .replace(/<!--[\s\S]*?-->/g, "")
+      .replace(/\s+/g, " ")
+      .trim();
+
+  return normalize(defaultHTML) === normalize(currentHtml);
+};

consts.ts

@@ -0,0 +1,21 @@
+export const defaultHTML = `<!DOCTYPE html>
+<html>
+  <head>
+    <title>My app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
+    <div class="w-full">
+      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
+      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
+        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
+        Ask me anything.
+      </h1>
+    </div>
+      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
+    <script></script>
+  </body>
+</html>
+`;

content.tsx.txt

@@ -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>
+    </>
+  );
+};

declare.d.ts

@@ -0,0 +1,4 @@
+declare module "*.mp3" {
+  const src: string;
+  export default src;
+}

dialog.tsx.txt

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

dropdown-menu.tsx.txt

@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

follow-up-tooltip.tsx.txt

@@ -0,0 +1,36 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Info } from "lucide-react";
+
+export const FollowUpTooltip = () => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Info className="size-3 text-neutral-300 cursor-pointer" />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="!rounded-2xl !p-0 min-w-xs text-center overflow-hidden"
+      >
+        <header className="bg-neutral-950 px-4 py-3 border-b border-neutral-700/70">
+          <p className="text-base text-neutral-200 font-semibold">
+            ⚡ Faster, Smarter Updates
+          </p>
+        </header>
+        <main className="p-4">
+          <p className="text-neutral-300 text-sm">
+            Using the Diff-Patch system, allow DeepSite to intelligently update
+            your project without rewritting the entire codebase.
+          </p>
+          <p className="text-neutral-500 text-sm mt-2">
+            This means faster updates, less data usage, and a more efficient
+            development process.
+          </p>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+};

get-cookie-name.ts

@@ -0,0 +1,3 @@
+export default function MY_TOKEN_KEY() {
+  return "deepsite-auth-token";
+}

gitignore.txt

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

globals.css

@@ -0,0 +1,146 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter-sans);
+  --font-mono: var(--font-ptSans-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+}
+
+.background__noisy {
+  @apply bg-blend-normal pointer-events-none opacity-90;
+  background-size: 25ww auto;
+  background-image: url("/background_noisy.webp");
+  @apply fixed w-screen h-screen -z-1 top-0 left-0;
+}
+
+.monaco-editor .margin {
+  @apply !bg-neutral-900;
+}
+.monaco-editor .monaco-editor-background {
+  @apply !bg-neutral-900;
+}
+.monaco-editor .line-numbers {
+  @apply !text-neutral-500;
+}
+
+.matched-line {
+  @apply bg-sky-500/30;
+}

grid-pattern.tsx.txt

@@ -0,0 +1,69 @@
+import { useId } from "react";
+import { cn } from "@/lib/utils";
+
+interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  squares?: Array<[x: number, y: number]>;
+  strokeDasharray?: string;
+  className?: string;
+  [key: string]: unknown;
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = "0",
+  squares,
+  className,
+  ...props
+}: GridPatternProps) {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-neutral-700 -z-[1]",
+        className
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width - 1}
+              height={height - 1}
+              x={x * width + 1}
+              y={y * height + 1}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}

html-tag-to-text.ts

@@ -0,0 +1,96 @@
+export const htmlTagToText = (tagName: string): string => {
+  switch (tagName.toLowerCase()) {
+    case "h1":
+      return "Heading 1";
+    case "h2":
+      return "Heading 2";
+    case "h3":
+      return "Heading 3";
+    case "h4":
+      return "Heading 4";
+    case "h5":
+      return "Heading 5";
+    case "h6":
+      return "Heading 6";
+    case "p":
+      return "Text Paragraph";
+    case "span":
+      return "Inline Text";
+    case "button":
+      return "Button";
+    case "input":
+      return "Input Field";
+    case "select":
+      return "Select Dropdown";
+    case "textarea":
+      return "Text Area";
+    case "form":
+      return "Form";
+    case "table":
+      return "Table";
+    case "thead":
+      return "Table Header";
+    case "tbody":
+      return "Table Body";
+    case "tr":
+      return "Table Row";
+    case "th":
+      return "Table Header Cell";
+    case "td":
+      return "Table Data Cell";
+    case "nav":
+      return "Navigation";
+    case "header":
+      return "Header";
+    case "footer":
+      return "Footer";
+    case "section":
+      return "Section";
+    case "article":
+      return "Article";
+    case "aside":
+      return "Aside";
+    case "div":
+      return "Block";
+    case "main":
+      return "Main Content";
+    case "details":
+      return "Details";
+    case "summary":
+      return "Summary";
+    case "code":
+      return "Code Snippet";
+    case "pre":
+      return "Preformatted Text";
+    case "kbd":
+      return "Keyboard Input";
+    case "label":
+      return "Label";
+    case "canvas":
+      return "Canvas";
+    case "svg":
+      return "SVG Graphic";
+    case "video":
+      return "Video Player";
+    case "audio":
+      return "Audio Player";
+    case "iframe":
+      return "Embedded Frame";
+    case "link":
+      return "Link";
+    case "a":
+      return "Link";
+    case "img":
+      return "Image";
+    case "ul":
+      return "Unordered List";
+    case "ol":
+      return "Ordered List";
+    case "li":
+      return "List Item";
+    case "blockquote":
+      return "Blockquote";
+    default:
+      return tagName.charAt(0).toUpperCase() + tagName.slice(1);
+  }
+};

iframe-detector.tsx.txt

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import IframeWarningModal from "./iframe-warning-modal";
+
+export default function IframeDetector() {
+  const [showWarning, setShowWarning] = useState(false);
+
+  useEffect(() => {
+    // Helper function to check if a hostname is from allowed domains
+    const isAllowedDomain = (hostname: string) => {
+      const host = hostname.toLowerCase();
+      return (
+        host.endsWith(".huggingface.co") ||
+        host.endsWith(".hf.co") ||
+        host === "huggingface.co" ||
+        host === "hf.co"
+      );
+    };
+
+    // Check if the current window is in an iframe
+    const isInIframe = () => {
+      try {
+        return window.self !== window.top;
+      } catch {
+        // If we can't access window.top due to cross-origin restrictions,
+        // we're likely in an iframe
+        return true;
+      }
+    };
+
+    // Additional check: compare window location with parent location
+    const isEmbedded = () => {
+      try {
+        return window.location !== window.parent.location;
+      } catch {
+        // Cross-origin iframe
+        return true;
+      }
+    };
+
+    // Check if we're in an iframe from a non-allowed domain
+    const shouldShowWarning = () => {
+      if (!isInIframe() && !isEmbedded()) {
+        return false; // Not in an iframe
+      }
+
+      try {
+        // Try to get the parent's hostname
+        const parentHostname = window.parent.location.hostname;
+        return !isAllowedDomain(parentHostname);
+      } catch {
+        // Cross-origin iframe - try to get referrer instead
+        try {
+          if (document.referrer) {
+            const referrerUrl = new URL(document.referrer);
+            return !isAllowedDomain(referrerUrl.hostname);
+          }
+        } catch {
+          // If we can't determine the parent domain, assume it's not allowed
+        }
+        return true;
+      }
+    };
+
+    if (shouldShowWarning()) {
+      // Show warning modal instead of redirecting immediately
+      setShowWarning(true);
+    }
+  }, []);
+
+  return (
+    <IframeWarningModal isOpen={showWarning} onOpenChange={setShowWarning} />
+  );
+}

iframe-warning-modal.tsx.txt

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, AlertTriangle } from "lucide-react";
+
+interface IframeWarningModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function IframeWarningModal({
+  isOpen,
+}: // onOpenChange,
+IframeWarningModalProps) {
+  const handleVisitSite = () => {
+    window.open("https://deepsite.hf.co", "_blank");
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => {}}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-red-500" />
+            <DialogTitle>Unauthorized Embedding</DialogTitle>
+          </div>
+          <DialogDescription className="text-left">
+            You&apos;re viewing DeepSite through an unauthorized iframe. For the
+            best experience and security, please visit the official website
+            directly.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="bg-muted/50 rounded-lg p-4 space-y-2">
+          <p className="text-sm font-medium">Why visit the official site?</p>
+          <ul className="text-sm text-muted-foreground space-y-1">
+            <li>• Better performance and security</li>
+            <li>• Full functionality access</li>
+            <li>• Latest features and updates</li>
+            <li>• Proper authentication support</li>
+          </ul>
+        </div>
+
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button onClick={handleVisitSite} className="w-full sm:w-auto">
+            <ExternalLink className="mr-2 h-4 w-4" />
+            Visit Deepsite.hf.co
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

index (1).html

@@ -0,0 +1,562 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Enhanced ID Generator Tool</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Tailwind CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+  <!-- Chart.js -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
+  <style>
+    html, body { font-family: 'Roboto', sans-serif; background: #f3f4f6; color: #222;}
+    .shadow-card { box-shadow: 0 6px 24px rgb(0 0 0 / 7%),0 1.5px 5px rgb(0 0 0 / 4%);}
+    .admin-divider {border-bottom: 1.5px solid #e5e7eb;}
+    .fa {vertical-align: middle;}
+    /* Hide scrollbars for PDF export */
+    ::-webkit-scrollbar {display: none;}
+    * { scrollbar-width: none; -ms-overflow-style: none;}
+    /* Remove number input arrows for consistency in PDF export*/
+    input[type=number]::-webkit-inner-spin-button,
+    input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+    input[type=number] { -moz-appearance: textfield;}
+    /* Card table for generated list */
+    #generatedCardsTable th, #generatedCardsTable td {padding: 0.25rem 0.5rem; border-right: 1px solid #eee;}
+    #generatedCardsTable tr {border-top: 1px solid #eee;}
+    /* Hide file input for a better button */
+    #importFile {display:none;}
+    .table-wrap {overflow-x: auto;}
+    @media print {
+      html, body {background: white;}
+      .print-hide {display: none !important;}
+    }
+  </style>
+</head>
+<body>
+  <!-- HEADER -->
+  <header class="flex items-center bg-gradient-to-r from-green-400 to-green-200 p-4 shadow-lg">
+    <div class="flex items-center space-x-3">
+      <i class="fa fa-id-card text-2xl text-white"></i>
+      <span class="text-2xl font-bold text-white tracking-wide">Fake ID Data Tools+</span>
+    </div>
+    <button onclick="showAdmin(true)" class="ml-auto px-6 py-2 rounded bg-black text-white font-semibold shadow-card print-hide transition hover:bg-green-800 text-sm"><i class="fas fa-user-cog mr-2"></i>Admin Panel</button>
+  </header>
+  <main class="max-w-5xl mx-auto p-4 space-y-6 bg-white mt-6 rounded-lg shadow-card">
+    <!-- CARD GENERATION -->
+    <section>
+      <div class="flex items-center mb-2">
+        <i class="fa fa-credit-card text-green-600 mr-2"></i>
+        <h2 class="text-xl font-bold text-green-800">Card Generation</h2>
+      </div>
+      <div class="rounded bg-green-50 p-4 shadow-card border border-green-200">
+        <div class="grid md:grid-cols-6 sm:grid-cols-2 grid-cols-1 gap-3 mb-4">
+          <div><label class="block text-xs mb-1 font-semibold">Card Holder Name</label><input id="holderInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Random if blank"></div>
+          <div><label class="block text-xs mb-1 font-semibold">Phone Number</label><input id="phoneInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Random if blank"></div>
+          <div><label class="block text-xs mb-1 font-semibold">Date of Birth</label><input id="dobInput" type="date" class="w-full rounded border px-2 py-1"></div>
+          <div><label class="block text-xs mb-1 font-semibold">Number to Generate <span class="text-gray-400">(max 5000)</span></label><input id="qtyInput" min="1" max="5000" type="number" value="1" class="w-full rounded border px-2 py-1"></div>
+          <div><label class="block text-xs mb-1 font-semibold">BIN Source</label><input id="binInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Leave blank for random"></div>
+          <div><label class="block text-xs mb-1 font-semibold">Bank Name</label><input id="bankInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Optional"></div>
+        </div>
+        <div class="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 mb-3">
+          <div><label class="block text-xs mb-1 font-semibold">Email</label><input id="emailInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Auto-generated if blank"></div>
+          <div><label class="block text-xs mb-1 font-semibold">Address</label><input id="addressInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Optional"></div>
+          <div class="flex items-center mt-7">
+            <input id="randBinCheck" type="checkbox" class="mr-2"><label for="randBinCheck" class="text-xs font-semibold">System Random BIN</label>
+          </div>
+        </div>
+        <div class="flex flex-wrap space-x-2 mt-2 mb-2 items-center">
+          <button id="generateBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold rounded-md px-4 py-2 shadow-card flex items-center mb-2"><i class="fa-solid fa-circle-plus mr-2"></i>Generate Cards</button>
+          <label for="importFile" class="bg-blue-400 hover:bg-blue-600 text-white font-bold rounded-md px-4 py-2 shadow-card flex items-center cursor-pointer mb-2"><i class="fa fa-file-upload mr-2"></i>Import Data</label>
+          <input type="file" id="importFile" accept=".txt,.csv,.json,.pdf">
+          <button onclick="clearHistory()" class="bg-red-400 hover:bg-red-600 text-white font-bold rounded-md px-4 py-2 shadow-card flex items-center mb-2"><i class="fa fa-trash mr-2"></i>Clear History</button>
+          <button onclick="exportHistory('csv')" class="bg-gray-800 hover:bg-gray-900 text-white font-bold rounded-md px-3 py-2 shadow-card flex items-center text-xs mb-2"><i class="fa fa-file-csv mr-2"></i>Export CSV</button>
+          <button onclick="exportHistory('json')" class="bg-gray-800 hover:bg-gray-900 text-white font-bold rounded-md px-3 py-2 shadow-card flex items-center text-xs mb-2"><i class="fa fa-file-code mr-2"></i>Export JSON</button>
+          <button onclick="exportHistory('txt')" class="bg-gray-800 hover:bg-gray-900 text-white font-bold rounded-md px-3 py-2 shadow-card flex items-center text-xs mb-2"><i class="fa fa-file-lines mr-2"></i>Export TXT</button>
+          <button onclick="copyAllCards()" class="bg-purple-500 hover:bg-purple-600 text-white font-bold rounded-md px-3 py-2 shadow-card flex items-center text-xs mb-2"><i class="fa fa-copy mr-2"></i>Copy All</button>
+        </div>
+      </div>
+    </section>
+    <!-- GENERATED CARDS HISTORY -->
+    <section>
+      <h3 class="text-lg font-semibold mt-8 mb-1 text-blue-800 flex items-center"><i class="fa fa-history mr-2"></i>Generated Cards History</h3>
+      <div class="table-wrap border rounded bg-blue-50 border-blue-200 shadow-card pb-2 pt-2 px-2">
+        <input id="historySearch" type="text" class="w-full mb-2 rounded px-2 py-1 border border-blue-100" placeholder="Search History (Name, Card, Bank, etc.)..." oninput="filterHistory()">
+        <table id="generatedCardsTable" class="w-full text-xs border-collapse">
+          <thead>
+            <tr class="bg-blue-100">
+              <th>#</th>
+              <th>Card Holder</th>
+              <th>Number</th>
+              <th>MM/YY</th>
+              <th>CVV</th>
+              <th>Bank</th>
+              <th>BIN</th>
+              <th>Email</th>
+              <th>IP</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody id="cardHistory"></tbody>
+        </table>
+        <div id="noCardMsg" class="text-center text-gray-400 py-4">No generated cards yet.</div>
+      </div>
+    </section>
+    <!-- CARD VALIDATOR -->
+    <section id="validator-section">
+      <h3 class="text-lg font-semibold mt-6 mb-3 flex items-center text-yellow-700"><i class="fa fa-magnifying-glass mr-2"></i>Card Validator (Simulated)</h3>
+      <div class="flex flex-col sm:flex-row items-center mb-2">
+        <input id="validateCardNumber" type="text" class="w-full sm:w-1/2 rounded border px-2 py-2 mr-4 mb-2 sm:mb-0" placeholder="Paste or type card number">
+        <button onclick="validateCard()" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-6 rounded shadow-card mr-2 flex items-center"><i class="fa fa-check mr-2"></i>Validate</button>
+        <button onclick="autoValidateCard()" class="bg-yellow-200 text-black hover:bg-yellow-300 rounded shadow px-3 py-2 font-bold flex items-center" title="Auto Validate"><i class="fa fa-bolt"></i> Auto</button>
+      </div>
+      <div id="validateStatus" class="font-bold mt-2 mb-3 ml-1"></div>
+    </section>
+    <!-- SIMULATED ANALYZERS -->
+    <section>
+      <h3 class="text-lg font-semibold mt-8 mb-3 flex items-center text-indigo-700"><i class="fa fa-flask mr-2"></i>Simulated Analyzers</h3>
+      <div class="grid md:grid-cols-3 gap-3">
+        <!-- Fraud Score Simulator -->
+        <div class="bg-indigo-50 border rounded shadow-card p-3">
+          <div class="flex items-center mb-1 text-indigo-700 font-semibold"><i class="fa fa-shield-halved mr-2"></i>Fraud Score Simulator</div>
+          <div class="flex mb-2">
+            <input id="fraudCardInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Enter card number">
+            <button onclick="analyzeFraudScore()" class="ml-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded px-3 flex items-center"><i class="fa fa-vial mr-2"></i>Analyze</button>
+            <button onclick="autoAnalyzeFraud()" class="ml-2 bg-indigo-300 hover:bg-indigo-400 text-black rounded px-2 flex items-center" title="Auto Analyze"><i class="fa fa-bolt"></i></button>
+          </div>
+          <div id="fraudScoreResult" class="mt-2 font-bold"></div>
+        </div>
+        <!-- IP Address Simulator -->
+        <div class="bg-blue-50 border rounded shadow-card p-3">
+          <div class="flex items-center mb-1 text-blue-700 font-semibold"><i class="fa fa-globe mr-2"></i>IP Address Simulator</div>
+          <div class="flex mb-2">
+            <input id="ipInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Enter IPv4 or IPv6">
+            <button onclick="analyzeIP()" class="ml-2 bg-blue-600 hover:bg-blue-700 text-white rounded px-3 flex items-center"><i class="fa fa-network-wired mr-2"></i>Analyze</button>
+            <button onclick="autoAnalyzeIP()" class="ml-2 bg-blue-300 hover:bg-blue-400 text-black rounded px-2 flex items-center" title="Auto Analyze"><i class="fa fa-bolt"></i></button>
+          </div>
+          <div id="ipResult" class="mt-2 font-bold"></div>
+        </div>
+        <!-- Email Analyzer Simulator -->
+        <div class="bg-green-50 border rounded shadow-card p-3">
+          <div class="flex items-center mb-1 text-green-800 font-semibold"><i class="fa fa-envelope mr-2"></i>Email Analyzer Simulator</div>
+          <div class="flex mb-2">
+            <input id="emailAnalyzerInput" type="text" class="w-full rounded border px-2 py-1" placeholder="Enter email address">
+            <button onclick="analyzeEmail()" class="ml-2 bg-green-700 hover:bg-green-800 text-white rounded px-3 flex items-center"><i class="fa fa-envelope-open-text mr-2"></i>Analyze</button>
+            <button onclick="autoAnalyzeEmail()" class="ml-2 bg-green-200 hover:bg-green-300 text-black rounded px-2 flex items-center" title="Auto Analyze"><i class="fa fa-bolt"></i></button>
+          </div>
+          <div id="emailResult" class="mt-2 font-bold"></div>
+        </div>
+      </div>
+    </section>
+    <!-- SSN TOOLS -->
+    <section>
+      <h3 class="text-lg font-semibold mt-8 mb-3 flex items-center text-blue-900"><i class="fa fa-address-card mr-2"></i>SSN Tools (Fake Data)</h3>
+      <div class="flex flex-col md:flex-row gap-4 mb-2">
+        <!-- Fake SSN Generator -->
+        <div class="bg-blue-100 border rounded shadow-card p-3 flex-1">
+          <div class="flex items-center mb-2 text-blue-900 font-semibold"><i class="fa fa-magic mr-2"></i>Fake SSN Generator</div>
+          <div class="flex mb-2 items-center gap-2">
+            <input id="ssnQtyInput" type="number" min="1" max="5000" value="1" class="rounded border px-2 py-1 w-20">
+            <button onclick="generateSSNs()" class="bg-blue-700 hover:bg-blue-900 text-white rounded px-3 flex items-center font-bold"><i class="fa fa-plus mr-2"></i>Generate SSNs</button>
+            <button onclick="autoGenerateSSN()" class="bg-blue-300 hover:bg-blue-400 text-black rounded px-2 flex items-center" title="Auto Generate"><i class="fa fa-bolt"></i></button>
+          </div>
+          <div>
+            <textarea id="ssnGenResult" class="w-full h-16 rounded px-2 py-1 border" readonly></textarea>
+          </div>
+        </div>
+        <!-- SSN Validator -->
+        <div class="bg-blue-100 border rounded shadow-card p-3 flex-1">
+          <div class="flex items-center mb-2 text-blue-900 font-semibold"><i class="fa fa-spell-check mr-2"></i>SSN Validator (Basic)</div>
+          <div class="flex mb-2 items-center gap-2">
+            <input id="ssnValidateInput" type="text" class="rounded border px-2 py-1 w-48" placeholder="SSN (XXX-XX-XXXX)">
+            <button onclick="validateSSN()" class="bg-blue-700 hover:bg-blue-900 text-white rounded px-3 flex items-center font-bold"><i class="fa fa-check mr-2"></i>Validate</button>
+            <button onclick="autoValidateSSN()" class="bg-blue-300 hover:bg-blue-400 text-black rounded px-2 flex items-center" title="Auto Validate"><i class="fa fa-bolt"></i></button>
+          </div>
+          <div id="ssnValidateResult" class="mt-2 font-bold"></div>
+        </div>
+      </div>
+      <div class="text-xs text-gray-600 ml-1"><i class="fa fa-info-circle text-blue-400"></i> Generated SSNs are <b>fake</b>, follow known allocation patterns, but are not real. Validation is basic format/rule check only.</div>
+    </section>
+  </main>
+  <!-- ADMIN PANEL MODAL -->
+  <div id="adminModal" class="hidden fixed inset-0 z-50 bg-black bg-opacity-40 flex justify-center items-center print-hide">
+    <div class="bg-white rounded-lg p-6 w-full max-w-2xl shadow-card relative">
+      <button onclick="showAdmin(false)" class="absolute top-3 right-4 text-gray-700 hover:text-red-800 text-lg font-bold"><i class="fa fa-times"></i></button>
+      <div class="text-2xl font-bold mb-1 text-green-800 flex items-center"><i class="fa fa-user-cog mr-2"></i>Admin Panel</div>
+      <div class="admin-divider mb-4"></div>
+      <div class="grid md:grid-cols-2 gap-6 mb-6">
+        <div>
+          <label class="block mb-1 font-bold">Live Card Generation Stats</label>
+          <ul class="text-green-800 font-semibold space-y-2 text-sm list-inside list-disc">
+            <li><span>Cards generated (this session): </span><span id="adminCardsCount">0</span></li>
+            <li><span>Unique BINs imported: </span><span id="adminBinsCount">0</span></li>
+            <li><span>Saved emails: </span><span id="adminEmailsCount">0</span></li>
+            <li><span>Uploaded IPs: </span><span id="adminIPsCount">0</span></li>
+          </ul>
+        </div>
+        <div>
+          <label class="block mb-1 font-bold">Recently Imported Data</label>
+          <div class="bg-gray-100 rounded px-3 py-2 h-32 overflow-y-auto text-xs" id="adminImports"></div>
+        </div>
+      </div>
+      <div>
+        <label class="block mb-1 font-bold">Card Generation Timeline</label>
+        <canvas id="cardGenChart" height="60"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- FOOTER -->
+  <footer class="w-full text-xs text-center py-5 mt-10 text-gray-500 print-hide">
+    © 2025 Fake ID Data Tools+ &mdash; Data is for testing and educational purposes only.<br>
+    Design optimized for browser PDF export - use browser’s print-to-PDF for full content.
+  </footer>
+  <script>
+    // DATA STORAGE
+    let cards = JSON.parse(localStorage.getItem("cards")||"[]");
+    let importedBins = JSON.parse(localStorage.getItem("importedBins")||"[]");
+    let importedEmails = JSON.parse(localStorage.getItem("importedEmails")||"[]");
+    let importedIPs = JSON.parse(localStorage.getItem("importedIPs")||"[]");
+    let genTimeline = JSON.parse(localStorage.getItem("genTimeline")||"[]"); // [{ts,count}]
+    // BIN SOURCES (you can expand with your own or imported)
+    const staticBins = [
+      '4539 1488', '4556 7375', '4916 7336', '4485 2847',
+      '5490 7559', '4621 0428', '4024 0071', '6011 9400'
+    ];
+
+    // DOM HELPERS
+    function el(id) { return document.getElementById(id);}
+    function showAdmin(show) {
+      el('adminModal').style.display = show ? 'flex' : 'none';
+      if(show) renderAdmin();
+    }
+    // RENDER CARDS HISTORY
+    function renderHistory() {
+      let tbody = el('cardHistory');
+      let noCardMsg = el('noCardMsg');
+      tbody.innerHTML = "";
+      let filtered = cards;
+      let kw = el('historySearch').value.trim().toLowerCase();
+      if(kw.length) {
+        filtered = cards.filter(card =>
+          (card.name||"").toLowerCase().includes(kw) ||
+          (card.number||"").toLowerCase().includes(kw) ||
+          (card.bank||"").toLowerCase().includes(kw) ||
+          (card.email||"").toLowerCase().includes(kw) ||
+          (card.ip||"").toLowerCase().includes(kw)
+        );
+      }
+      if(!filtered.length) {
+        noCardMsg.style.display = '';
+        return;
+      }
+      noCardMsg.style.display = 'none';
+      filtered.forEach((card, i) => {
+        let tr = document.createElement("tr");
+        tr.innerHTML = `
+          <td>${i+1}</td>
+          <td>${escapeHTML(card.name)}</td>
+          <td><span class="font-mono">${card.number}</span></td>
+          <td>${escapeHTML(card.mm)}/${escapeHTML(card.yy)}</td>
+          <td>${escapeHTML(card.cvv)}</td>
+          <td>${escapeHTML(card.bank||'-')}</td>
+          <td>${escapeHTML(card.bin||'-')}</td>
+          <td>${escapeHTML(card.email||'-')}</td>
+          <td>${escapeHTML(card.ip||'-')}</td>
+          <td>${escapeHTML(card.status||'-')}</td>
+        `;
+        tbody.appendChild(tr);
+      });
+    }
+    // CARD GENERATION LOGIC
+    el('generateBtn').onclick = function() {
+      let n = parseInt(el('qtyInput').value);
+      if(n < 1 || n > 5000 || isNaN(n)) { alert("Number to generate: Enter between 1 and 5000."); return;}
+      let inputBin = el('binInput').value.replace(/\s+/g, '');
+      let useRandomBin = el('randBinCheck').checked || !inputBin;
+      let bins = useRandomBin ? (staticBins.concat(importedBins)) : [inputBin];
+      let bankName = el('bankInput').value || '-';
+      let emails = [];
+      let ips = [];
+      let cardsBatch = [];
+      for(let i=0;i<n;i++) {
+        let bin = bins[Math.floor(Math.random() * bins.length)] || "400000";
+        let cardNumber = genCardNumberFromBin(bin.replace(/\s+/g,""));
+        let mm = String(Math.floor(Math.random()*12+1)).padStart(2,'0');
+        let y  = (new Date().getFullYear()+Math.floor(Math.random()*7)+1).toString().substr(2,2);
+        let cvv = String(Math.floor(Math.random()*900)+100);
+        let name = el('holderInput').value || genRndName();
+        let phone = el('phoneInput').value || ("+1"+randStr(10,"0123456789"));
+        let email = el('emailInput').value || (genRndMail(name));
+        let addr  = el('addressInput').value || genRndAddr();
+        let ip = randIP();
+        let status = "LIVE";
+        let obj = {number: cardNumber, mm, yy:y, cvv, bank:bankName, bin, name, phone, email, address:addr, ip, status};
+        cards.push(obj);
+        cardsBatch.push(obj);
+        emails.push(email);
+        ips.push(ip);
+      }
+      // Track imported
+      importedEmails = importedEmails.concat(emails.filter(x=>!importedEmails.includes(x)));
+      importedIPs = importedIPs.concat(ips.filter(x=>!importedIPs.includes(x)));
+      // Timeline chart
+      const now = new Date();
+      genTimeline.push({ts: now.getTime(), count: n});
+      localStorage.setItem("cards",JSON.stringify(cards));
+      localStorage.setItem("importedEmails",JSON.stringify(importedEmails));
+      localStorage.setItem("importedIPs",JSON.stringify(importedIPs));
+      localStorage.setItem("genTimeline",JSON.stringify(genTimeline));
+      renderHistory();
+      alert(`Generated ${n} cards.`);
+    }
+    function filterHistory() {renderHistory();}
+    function clearHistory() {
+      if(confirm("Clear all generated cards?")) {
+        cards = [];
+        localStorage.setItem("cards","[]");
+        renderHistory();
+      }
+    }
+    // Helper: Generate Card Number According to Luhn algorithm
+    function genCardNumberFromBin(bin) {
+      let res = bin;
+      for(let i=bin.length;i<15;i++) res += Math.floor(Math.random()*10);
+      // Luhn digit
+      let arr = res.split('').map(Number);
+      for(let i=arr.length-1;i>=0;i-=2)arr[i]*=2;
+      let sum = arr.join('').split('').reduce((a,c)=>a+parseInt(c),0);
+      let last = (10 - sum%10)%10;
+      return res + last;
+    }
+    function randIP() {
+      return [rand4(),rand4(),rand4(),rand4()].join('.');
+      function rand4(){ let n=Math.floor(Math.random()*254)+1; return n==127?128:n;}
+    }
+    function randStr(n, chars) {
+      let out = ""; let C = chars || "abcdefghijklmnopqrstuvwxyz";
+      for(let i=0;i<n;i++) out += C[Math.floor(Math.random()*C.length)];
+      return out;
+    }
+    function genRndName() {
+      const first = ["Alex","Dana","Taylor","Jordan","Robin","Morgan","Sam","Jesse"];
+      const last = ["Smith","Johnson","Lee","Walker","Cooper","Scott","Lewis","Allen"];
+      return first[Math.floor(Math.random()*first.length)]+" "+last[Math.floor(Math.random()*last.length)];
+    }
+    function genRndAddr() {
+      const streets = ["Park Ave","Maple St.","Elm Dr.","Sunset Blvd.","Oak St.","First Ave."];
+      return `${Math.floor(Math.random()*9999)+101} ${streets[Math.floor(Math.random()*streets.length)]}`;
+    }
+    function genRndMail(name) {
+      const d = ["mail.com","yahoo.com","testmail.io","example.org"];
+      let nick = name.replace(/\s+/g,'').toLowerCase() + randStr(2,"1234567890");
+      return nick+"@"+d[Math.floor(Math.random()*d.length)];
+    }
+    // CARD EXPORT
+    function exportHistory(fmt) {
+      let sep, ext, mimetype, content="";
+      if(!cards.length) {alert("No cards to export."); return;}
+      if(fmt=='csv'){
+        let keys = ["Card Holder","Number","MM/YY","CVV","Bank","BIN","Email","IP","Status"];
+        content = keys.join(",")+'\n';
+        cards.forEach(card=>{
+          content += `"${card.name}","${card.number}","${card.mm}/${card.yy}","${card.cvv}","${card.bank}","${card.bin}","${card.email}","${card.ip}","${card.status}"\n`;
+        });
+        downloadText(content,"cards.csv");
+      } else if(fmt=='json'){
+        downloadText(JSON.stringify(cards,null,2),"cards.json");
+      } else if(fmt=='txt'){
+        cards.forEach(c=>{
+          content+=`${c.number}|${c.mm}|${c.yy}|${c.cvv}|${c.name}|${c.email}|${c.bank}|${c.bin}|${c.ip}|${c.status}\n`;
+        });
+        downloadText(content,"cards.txt");
+      }
+    }
+    function downloadText(text, filename){
+      let a = document.createElement('a');
+      a.href = 'data:text/plain;charset=utf-8,'+encodeURIComponent(text);
+      a.download = filename; a.click();
+    }
+    function copyAllCards() {
+      let out = "";
+      cards.forEach(c=>{
+        out+=`${c.number}|${c.mm}|${c.yy}|${c.cvv}|${c.name}|${c.email}|${c.bank}|${c.bin}|${c.ip}|${c.status}\n`;
+      });
+      navigator.clipboard.writeText(out).then(()=>alert("All cards copied."));
+    }
+    // CARD VALIDATOR (Simulated)
+    function validateCard() {
+      let num = (el('validateCardNumber').value || "").replace(/\s+/g,'');
+      if(!num.match(/^\d{13,19}$/)) { showStatus("Enter a valid card number.",false); return;}
+      let isLuhn = luhnChk(num);
+      let randomStatus = Math.random()>.3 ? "LIVE" : "DEAD";
+      let score = Math.floor(Math.random()*60)+40;
+      showStatus(`${isLuhn?"Valid, ":"INVALID "} ${randomStatus}. Score:${score}/100`,isLuhn);
+    }
+    function luhnChk(num) {
+      let arr = num.split('').reverse().map(x=>parseInt(x));
+      let sum = 0;
+      for(let i=0;i<arr.length;i++) {
+        let v = arr[i];
+        if(i%2==1) v = v*2;
+        if(v>9) v-=9;
+        sum+=v;
+      }
+      return sum%10===0;
+    }
+    function autoValidateCard() {
+      if(cards.length){el('validateCardNumber').value = cards[0].number; validateCard();}
+      else {alert("Generate at least one card first.");}
+    }
+    function showStatus(txt, good) {
+      el('validateStatus').innerHTML = txt;
+      el('validateStatus').style.color = good?"green":"#d97706";
+    }
+    // FRAUD SCORE SIMULATOR (random)
+    function analyzeFraudScore() {
+      let num = (el('fraudCardInput').value || "").replace(/\s+/g,'');
+      if(!num.match(/^\d{13,19}$/)){el('fraudScoreResult').textContent = "Enter a valid card number.";return;}
+      let fs = Math.floor(Math.random()*40)+50;
+      el('fraudScoreResult').innerHTML = `Fraud Score: <span class="font-bold">${fs}</span>/100 [${fs < 65 ? "LOW" : "HIGH"}]`;
+      el('fraudScoreResult').style.color = fs<65?"#18590d":"#b91c1c";
+    }
+    function autoAnalyzeFraud() {
+      if(cards.length){el('fraudCardInput').value = cards[0].number; analyzeFraudScore();}
+      else {alert("Generate at least one card first.");}
+    }
+    // IP ANALYZER
+    function analyzeIP() {
+      let ip = el('ipInput').value;
+      if(!ip.match(/^(\d{1,3}\.){3}\d{1,3}$/)) { el('ipResult').textContent = "Enter valid IPv4"; el('ipResult').style.color='red'; return; }
+      let tag = Math.random() > 0.5 ? "Residential" : "Datacenter";
+      el('ipResult').innerHTML = `<b class="text-blue-900">${ip}</b> - Type: <span class="font-bold text-gray-700">${tag}</span>`;
+      el('ipResult').style.color = "#1e293b";
+    }
+    function autoAnalyzeIP() {
+      if(cards.length){el('ipInput').value = cards[0].ip; analyzeIP();}
+      else {alert("Generate at least one card first.");}
+    }
+    // EMAIL ANALYZER
+    function analyzeEmail() {
+      let e = el('emailAnalyzerInput').value || "";
+      let hasAt = e.includes("@") && e.length>5;
+      el('emailResult').textContent = !hasAt ? "Invalid email address." : (["Valid","Suspicious"][Math.round(Math.random())]);
+      el('emailResult').style.color = hasAt ? (el('emailResult').textContent==='Valid'?'#18590d':'#E6B800') : "red";
+    }
+    function autoAnalyzeEmail() {
+      if(cards.length){el('emailAnalyzerInput').value = cards[0].email; analyzeEmail();}
+      else {alert("Generate at least one card first.");}
+    }
+    // SSN GENERATOR
+    function generateSSNs() {
+      let n = parseInt(el('ssnQtyInput').value)||1;
+      let out = "";
+      for(let i=0;i<Math.min(5000,n);i++) {
+        let a = String(Math.floor(Math.random()*900)+100);
+        let g = String(Math.floor(Math.random()*90)+10);
+        let s = String(Math.floor(Math.random()*9000)+1000);
+        out += `${a}-${g}-${s}\n`;
+      }
+      el('ssnGenResult').value=out.trim();
+    }
+    function autoGenerateSSN() {
+      el('ssnQtyInput').value=5; generateSSNs();
+    }
+    // SSN VALIDATOR (format check)
+    function validateSSN() {
+      let ssn = (el('ssnValidateInput').value||"").replace(/-/g,'');
+      let valid = ssn.match(/^(?!000|666|9\d{2})\d{3}(?!00)\d{2}(?!0000)\d{4}$/);
+      el('ssnValidateResult').textContent = valid ? "Valid (format)." : "INVALID";
+      el('ssnValidateResult').style.color = valid?"#18590d":"#b91c1c";
+    }
+    function autoValidateSSN() {
+      if(el('ssnGenResult').value){
+        let v = el('ssnGenResult').value.split('\n')[0];
+        el('ssnValidateInput').value = v;
+        validateSSN();
+      } else {
+        autoGenerateSSN(); setTimeout(autoValidateSSN,100);
+      }
+    }
+    // DATA IMPORT HANDLING
+    el('importFile').addEventListener('change', function(evt){
+      let file = evt.target.files[0]; if(!file) return;
+      let ext = file.name.split(".").pop().toLowerCase();
+      let reader = new FileReader();
+      reader.onload = function(e) {
+        let text = e.target.result;
+        if(ext==="json") {
+          let data = JSON.parse(text);
+          if(Array.isArray(data)){
+            data.forEach(x=>{
+              if(x.bin) importedBins.push(x.bin);
+              if(x.email) importedEmails.push(x.email);
+              if(x.ip) importedIPs.push(x.ip);
+            });
+            alert("Imported data from JSON.");
+          }
+        } else if(ext==="csv" || ext==="txt"){
+          let rows = text.split('\n');
+          rows.forEach(r=>{
+            let vals = r.split(/[,|;]/);
+            vals.forEach(v=>{
+              v = v.trim();
+              if(v.match(/^\d{6,8}$/)) importedBins.push(v);
+              if(v.includes('@')) importedEmails.push(v);
+              if(v.match(/^(\d{1,3}\.){3}\d{1,3}$/)) importedIPs.push(v);
+            });
+          });
+          alert("Imported plaintext/csv data.");
+        } else if(ext==="pdf"){
+          alert("PDF import requires server parsing: Cannot auto-detect BINs/emails/ips here.");
+        }
+        importedBins = Array.from(new Set(importedBins));
+        importedEmails = Array.from(new Set(importedEmails));
+        importedIPs = Array.from(new Set(importedIPs));
+        localStorage.setItem("importedBins",JSON.stringify(importedBins));
+        localStorage.setItem("importedEmails",JSON.stringify(importedEmails));
+        localStorage.setItem("importedIPs",JSON.stringify(importedIPs));
+      };
+      if(file) reader.readAsText(file);
+    });
+    // ADMIN PANEL RENDER
+    function renderAdmin() {
+      el('adminCardsCount').innerText = cards.length;
+      el('adminBinsCount').innerText = importedBins.length;
+      el('adminEmailsCount').innerText = importedEmails.length;
+      el('adminIPsCount').innerText = importedIPs.length;
+      let imports = "";
+      if(importedBins.length) imports += "<b>Bins:</b><br>"+importedBins.slice(-6).join(", ")+"<br>";
+      if(importedEmails.length) imports += "<b>Emails:</b><br>"+importedEmails.slice(-6).join(", ")+"<br>";
+      if(importedIPs.length) imports += "<b>IPs:</b><br>"+importedIPs.slice(-6).join(", ")+"<br>";
+      el('adminImports').innerHTML = imports||"No data imported yet.";
+      renderChart();
+    }
+    // Card timeline chart
+    function renderChart() {
+      let data = {};
+      genTimeline.forEach(x=>{
+        let dt = new Date(x.ts);
+        let ds = `${dt.getFullYear()}-${(dt.getMonth()+1).toString().padStart(2,'0')}-${dt.getDate().toString().padStart(2,'0')}`;
+        data[ds]= (data[ds]||0)+x.count;
+      });
+      let labels = Object.keys(data);
+      let counts = Object.values(data);
+      if(window.cardGenChart) window.cardGenChart.destroy();
+      let ctx = document.getElementById('cardGenChart').getContext('2d');
+      window.cardGenChart = new Chart(ctx, {
+        type: 'bar',
+        data: {labels, datasets:[{label:'Cards Generated',data:counts, backgroundColor:"#059669"}]},
+        options: {plugins:{legend:{display:false}},scales:{y:{beginAtZero:true}}}
+      });
+    }
+    // UTILS
+    function escapeHTML(txt){return String(txt||'').replace(/[&<>"']/g,c=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
+    // INIT
+    renderHistory();
+    // END
+  </script>
+</body>
+</html>

index.ts

@@ -0,0 +1,31 @@
+export interface User {
+  fullname: string;
+  avatarUrl: string;
+  name: string;
+  isLocalUse?: boolean;
+  isPro: boolean;
+  id: string;
+  token?: string;
+}
+
+export interface HtmlHistory {
+  pages: Page[];
+  createdAt: Date;
+  prompt: string;
+}
+
+export interface Project {
+  title: string;
+  html: string;
+  prompts: string[];
+  user_id: string;
+  space_id: string;
+  _id?: string;
+  _updatedAt?: Date;
+  _createdAt?: Date;
+}
+
+export interface Page {
+  path: string;
+  html: string;
+}

index.tsx (1).txt

@@ -0,0 +1,156 @@
+"use client";
+
+import { useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMount, useUnmount } from "react-use";
+import classNames from "classnames";
+
+import { Button } from "@/components/ui/button";
+import Logo from "@/assets/logo.svg";
+import { useUser } from "@/hooks/useUser";
+import { UserMenu } from "@/components/user-menu";
+
+const navigationLinks = [
+  {
+    name: "Create Website",
+    href: "/projects/new",
+  },
+  {
+    name: "Features",
+    href: "#features",
+  },
+  {
+    name: "Community",
+    href: "#community",
+  },
+  {
+    name: "Deploy",
+    href: "#deploy",
+  },
+];
+
+export default function Navigation() {
+  const { openLoginWindow, user } = useUser();
+  const [hash, setHash] = useState("");
+
+  const selectorRef = useRef<HTMLDivElement>(null);
+  const linksRef = useRef<HTMLLIElement[]>(
+    new Array(navigationLinks.length).fill(null)
+  );
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useMount(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      setIsScrolled(scrollTop > 100);
+    };
+
+    const initialHash = window.location.hash;
+    if (initialHash) {
+      setHash(initialHash);
+      calculateSelectorPosition(initialHash);
+    }
+
+    window.addEventListener("scroll", handleScroll);
+  });
+
+  useUnmount(() => {
+    window.removeEventListener("scroll", () => {});
+  });
+
+  const handleClick = (href: string) => {
+    setHash(href);
+    calculateSelectorPosition(href);
+  };
+
+  const calculateSelectorPosition = (href: string) => {
+    if (selectorRef.current && linksRef.current) {
+      const index = navigationLinks.findIndex((l) => l.href === href);
+      const targetLink = linksRef.current[index];
+      if (targetLink) {
+        const targetRect = targetLink.getBoundingClientRect();
+        selectorRef.current.style.left = targetRect.left + "px";
+        selectorRef.current.style.width = targetRect.width + "px";
+      }
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        "sticky top-0 z-10 transition-all duration-200 backdrop-blur-md",
+        {
+          "bg-black/30": isScrolled,
+        }
+      )}
+    >
+      <nav className="grid grid-cols-2 p-4 container mx-auto">
+        <Link href="/" className="flex items-center gap-1">
+          <Image
+            src={Logo}
+            className="w-9 mr-1"
+            alt="DeepSite Logo"
+            width={64}
+            height={64}
+          />
+          <p className="font-sans text-white text-xl font-bold">DeepSite</p>
+        </Link>
+        <ul className="items-center justify-center gap-6 hidden">
+          {navigationLinks.map((link) => (
+            <li
+              key={link.name}
+              ref={(el) => {
+                const index = navigationLinks.findIndex(
+                  (l) => l.href === link.href
+                );
+                if (el && linksRef.current[index] !== el) {
+                  linksRef.current[index] = el;
+                }
+              }}
+              className="inline-block font-sans text-sm"
+            >
+              <Link
+                href={link.href}
+                className={classNames(
+                  "text-neutral-500 hover:text-primary transition-colors",
+                  {
+                    "text-primary": hash === link.href,
+                  }
+                )}
+                onClick={() => {
+                  handleClick(link.href);
+                }}
+              >
+                {link.name}
+              </Link>
+            </li>
+          ))}
+          <div
+            ref={selectorRef}
+            className={classNames(
+              "h-1 absolute bottom-4 transition-all duration-200 flex items-center justify-center",
+              {
+                "opacity-0": !hash,
+              }
+            )}
+          >
+            <div className="size-1 bg-white rounded-full" />
+          </div>
+        </ul>
+        <div className="flex items-center justify-end gap-2">
+          {user ? (
+            <UserMenu className="!pl-3 !pr-4 !py-2 !h-auto !rounded-lg" />
+          ) : (
+            <>
+              <Button variant="link" size={"sm"} onClick={openLoginWindow}>
+                Log In
+              </Button>
+              <Button size={"sm"}>Sign Up</Button>
+            </>
+          )}
+        </div>
+      </nav>
+    </div>
+  );
+}

index.tsx (10).txt

@@ -0,0 +1,231 @@
+"use client";
+import { useUpdateEffect } from "react-use";
+import { useMemo, useState } from "react";
+import classNames from "classnames";
+import { toast } from "sonner";
+import { useThrottleFn } from "react-use";
+
+import { cn } from "@/lib/utils";
+import { GridPattern } from "@/components/magic-ui/grid-pattern";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
+import { Page } from "@/types";
+
+export const Preview = ({
+  html,
+  isResizing,
+  isAiWorking,
+  ref,
+  device,
+  currentTab,
+  iframeRef,
+  pages,
+  setCurrentPage,
+  isEditableModeEnabled,
+  onClickElement,
+}: {
+  html: string;
+  isResizing: boolean;
+  isAiWorking: boolean;
+  pages: Page[];
+  setCurrentPage: React.Dispatch<React.SetStateAction<string>>;
+  ref: React.RefObject<HTMLDivElement | null>;
+  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  device: "desktop" | "mobile";
+  currentTab: string;
+  isEditableModeEnabled?: boolean;
+  onClickElement?: (element: HTMLElement) => void;
+}) => {
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  const handleMouseOver = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (
+          hoveredElement !== targetElement &&
+          targetElement !== iframeDocument.body
+        ) {
+          setHoveredElement(targetElement);
+          targetElement.classList.add("hovered-element");
+        } else {
+          return setHoveredElement(null);
+        }
+      }
+    }
+  };
+  const handleMouseOut = () => {
+    setHoveredElement(null);
+  };
+  const handleClick = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (targetElement !== iframeDocument.body) {
+          onClickElement?.(targetElement);
+        }
+      }
+    }
+  };
+  const handleCustomNavigation = (event: MouseEvent) => {
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const findClosestAnchor = (
+          element: HTMLElement
+        ): HTMLAnchorElement | null => {
+          let current = element;
+          while (current && current !== iframeDocument.body) {
+            if (current.tagName === "A") {
+              return current as HTMLAnchorElement;
+            }
+            current = current.parentElement as HTMLElement;
+          }
+          return null;
+        };
+
+        const anchorElement = findClosestAnchor(event.target as HTMLElement);
+        if (anchorElement) {
+          let href = anchorElement.getAttribute("href");
+          if (href) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            if (href.includes("#") && !href.includes(".html")) {
+              const targetElement = iframeDocument.querySelector(href);
+              if (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth" });
+              }
+              return;
+            }
+
+            href = href.split(".html")[0] + ".html";
+            const isPageExist = pages.some((page) => page.path === href);
+            if (isPageExist) {
+              setCurrentPage(href);
+            }
+          }
+        }
+      }
+    }
+  };
+
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (iframeRef?.current?.contentDocument) {
+        const iframeDocument = iframeRef.current.contentDocument;
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
+      }
+    };
+
+    if (iframeRef?.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        cleanupListeners();
+
+        if (isEditableModeEnabled) {
+          iframeDocument.addEventListener("mouseover", handleMouseOver);
+          iframeDocument.addEventListener("mouseout", handleMouseOut);
+          iframeDocument.addEventListener("click", handleClick);
+        }
+      }
+    }
+
+    return cleanupListeners;
+  }, [iframeRef, isEditableModeEnabled]);
+
+  const selectedElement = useMemo(() => {
+    if (!isEditableModeEnabled) return null;
+    if (!hoveredElement) return null;
+    return hoveredElement;
+  }, [hoveredElement, isEditableModeEnabled]);
+
+  const throttledHtml = useThrottleFn((html) => html, 1000, [html]);
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
+        {
+          "lg:p-4": currentTab !== "preview",
+          "max-lg:h-0": currentTab === "chat",
+          "max-lg:h-full": currentTab === "preview",
+        }
+      )}
+      onClick={(e) => {
+        if (isAiWorking) {
+          e.preventDefault();
+          e.stopPropagation();
+          toast.warning("Please wait for the AI to finish working.");
+        }
+      }}
+    >
+      <GridPattern
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className={cn(
+          "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]"
+        )}
+      />
+      {!isAiWorking && hoveredElement && selectedElement && (
+        <div
+          className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
+          style={{
+            top:
+              selectedElement.getBoundingClientRect().top +
+              (currentTab === "preview" ? 0 : 24),
+            left:
+              selectedElement.getBoundingClientRect().left +
+              (currentTab === "preview" ? 0 : 24),
+            width: selectedElement.getBoundingClientRect().width,
+            height: selectedElement.getBoundingClientRect().height,
+          }}
+        >
+          <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
+            {htmlTagToText(selectedElement.tagName.toLowerCase())}
+          </span>
+        </div>
+      )}
+      <iframe
+        id="preview-iframe"
+        ref={iframeRef}
+        title="output"
+        className={classNames(
+          "w-full select-none transition-all duration-200 bg-black h-full",
+          {
+            "pointer-events-none": isResizing || isAiWorking,
+            "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
+              device === "mobile",
+            "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
+              currentTab !== "preview" && device === "desktop",
+          }
+        )}
+        srcDoc={isAiWorking ? (throttledHtml as string) : html}
+        onLoad={() => {
+          if (iframeRef?.current?.contentWindow?.document?.body) {
+            iframeRef.current.contentWindow.document.body.scrollIntoView({
+              block: isAiWorking ? "end" : "start",
+              inline: "nearest",
+              behavior: isAiWorking ? "instant" : "smooth",
+            });
+          }
+          // add event listener to all links in the iframe to handle navigation
+          if (iframeRef?.current?.contentWindow?.document) {
+            const links =
+              iframeRef.current.contentWindow.document.querySelectorAll("a");
+            links.forEach((link) => {
+              link.addEventListener("click", handleCustomNavigation);
+            });
+          }
+        }}
+      />
+    </div>
+  );
+};

index.tsx (11).txt

@@ -0,0 +1,30 @@
+import { Page } from "@/types";
+import { ListPagesItem } from "./page";
+
+export function ListPages({
+  pages,
+  currentPage,
+  onSelectPage,
+  onDeletePage,
+}: {
+  pages: Array<Page>;
+  currentPage: string;
+  onSelectPage: (path: string, newPath?: string) => void;
+  onNewPage: () => void;
+  onDeletePage: (path: string) => void;
+}) {
+  return (
+    <div className="w-full flex items-center justify-start bg-neutral-950 overflow-auto flex-nowrap min-h-[44px]">
+      {pages.map((page, i) => (
+        <ListPagesItem
+          key={i}
+          page={page}
+          currentPage={currentPage}
+          onSelectPage={onSelectPage}
+          onDeletePage={onDeletePage}
+          index={i}
+        />
+      ))}
+    </div>
+  );
+}

index.tsx (12).txt

@@ -0,0 +1,73 @@
+import { History as HistoryIcon } from "lucide-react";
+import { HtmlHistory, Page } from "@/types";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+export function History({
+  history,
+  setPages,
+}: {
+  history: HtmlHistory[];
+  setPages: (pages: Page[]) => void;
+}) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="sm" className="max-lg:hidden">
+          <HistoryIcon className="size-4 text-neutral-300" />
+          {history?.length} edit{history.length !== 1 ? "s" : ""}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="!rounded-2xl !p-0 overflow-hidden !bg-neutral-900"
+        align="start"
+      >
+        <header className="text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
+          History
+        </header>
+        <main className="px-4 space-y-3">
+          <ul className="max-h-[250px] overflow-y-auto">
+            {history?.map((item, index) => (
+              <li
+                key={index}
+                className="text-gray-300 text-xs py-2 border-b border-gray-800 last:border-0 flex items-center justify-between gap-2"
+              >
+                <div className="">
+                  <span className="line-clamp-1">{item.prompt}</span>
+                  <span className="text-gray-500 text-[10px]">
+                    {new Date(item.createdAt).toLocaleDateString("en-US", {
+                      month: "2-digit",
+                      day: "2-digit",
+                      year: "2-digit",
+                    }) +
+                      " " +
+                      new Date(item.createdAt).toLocaleTimeString("en-US", {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        second: "2-digit",
+                        hour12: false,
+                      })}
+                  </span>
+                </div>
+                <Button
+                  variant="sky"
+                  size="xs"
+                  onClick={() => {
+                    console.log(item);
+                    setPages(item.pages);
+                  }}
+                >
+                  Select
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+}

index.tsx (13).txt

@@ -0,0 +1,69 @@
+import { ReactNode } from "react";
+import { Eye, MessageCircleCode } from "lucide-react";
+
+import Logo from "@/assets/logo.svg";
+
+import { Button } from "@/components/ui/button";
+import classNames from "classnames";
+import Image from "next/image";
+
+const TABS = [
+  {
+    value: "chat",
+    label: "Chat",
+    icon: MessageCircleCode,
+  },
+  {
+    value: "preview",
+    label: "Preview",
+    icon: Eye,
+  },
+];
+
+export function Header({
+  tab,
+  onNewTab,
+  children,
+}: {
+  tab: string;
+  onNewTab: (tab: string) => void;
+  children?: ReactNode;
+}) {
+  return (
+    <header className="border-b bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 lg:px-6 py-2 flex items-center max-lg:gap-3 justify-between lg:grid lg:grid-cols-3 z-20">
+      <div className="flex items-center justify-start gap-3">
+        <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
+          <Image
+            src={Logo}
+            alt="DeepSite Logo"
+            className="size-6 lg:size-8 mr-2 invert-100 dark:invert-0"
+          />
+          <p className="max-md:hidden flex items-center justify-start">
+            DeepSite
+            <span className="font-mono bg-gradient-to-br from-sky-500 to-emerald-500 text-neutral-950 rounded-full text-xs ml-2 px-1.5 py-0.5">
+              {" "}
+              v2
+            </span>
+          </p>
+        </h1>
+      </div>
+      <div className="flex items-center justify-start lg:justify-center gap-1 max-lg:pl-3 flex-1 max-lg:border-l max-lg:border-l-neutral-800">
+        {TABS.map((item) => (
+          <Button
+            key={item.value}
+            variant={tab === item.value ? "secondary" : "ghost"}
+            className={classNames("", {
+              "opacity-60": tab !== item.value,
+            })}
+            size="sm"
+            onClick={() => onNewTab(item.value)}
+          >
+            <item.icon className="size-4" />
+            <span className="hidden md:inline">{item.label}</span>
+          </Button>
+        ))}
+      </div>
+      <div className="flex items-center justify-end gap-3">{children}</div>
+    </header>
+  );
+}

index.tsx (14).txt

@@ -0,0 +1,150 @@
+import classNames from "classnames";
+import { FaMobileAlt } from "react-icons/fa";
+import { HelpCircle, LogIn, RefreshCcw, SparkleIcon } from "lucide-react";
+import { FaLaptopCode } from "react-icons/fa6";
+import { HtmlHistory, Page } from "@/types";
+import { Button } from "@/components/ui/button";
+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";
+import { useLocalStorage } from "react-use";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+
+const DEVICES = [
+  {
+    name: "desktop",
+    icon: FaLaptopCode,
+  },
+  {
+    name: "mobile",
+    icon: FaMobileAlt,
+  },
+];
+
+export function Footer({
+  pages,
+  isNew = false,
+  htmlHistory,
+  setPages,
+  device,
+  setDevice,
+  iframeRef,
+}: {
+  pages: Page[];
+  isNew?: boolean;
+  htmlHistory?: HtmlHistory[];
+  device: "desktop" | "mobile";
+  setPages: (pages: Page[]) => void;
+  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  setDevice: React.Dispatch<React.SetStateAction<"desktop" | "mobile">>;
+}) {
+  const { user, openLoginWindow } = useUser();
+
+  const handleRefreshIframe = () => {
+    if (iframeRef?.current) {
+      const iframe = iframeRef.current;
+      const content = iframe.srcdoc;
+      iframe.srcdoc = "";
+      setTimeout(() => {
+        iframe.srcdoc = content;
+      }, 10);
+    }
+  };
+
+  const [, setStorage] = useLocalStorage("pages");
+  const handleClick = async () => {
+    if (pages && !isTheSameHtml(pages[0].html)) {
+      setStorage(pages);
+    }
+    openLoginWindow();
+  };
+
+  return (
+    <footer className="border-t bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 py-2 flex items-center justify-between sticky bottom-0 z-20">
+      <div className="flex items-center gap-2">
+        {user ? (
+          user?.isLocalUse ? (
+            <>
+              <div className="max-w-max bg-amber-500/10 rounded-full px-3 py-1 text-amber-500 border border-amber-500/20 text-sm font-semibold">
+                Local Usage
+              </div>
+            </>
+          ) : (
+            <UserMenu className="!p-1 !pr-3 !h-auto" />
+          )
+        ) : (
+          <Button size="sm" variant="default" onClick={handleClick}>
+            <LogIn className="text-sm" />
+            Log In
+          </Button>
+        )}
+        {user && !isNew && <p className="text-neutral-700">|</p>}
+        {!isNew && (
+          <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>
+            <History history={htmlHistory} setPages={setPages} />
+          </>
+        )}
+      </div>
+      <div className="flex justify-end items-center gap-2.5">
+        <a
+          href="https://huggingface.co/spaces/victor/deepsite-gallery"
+          target="_blank"
+        >
+          <Button size="sm" variant="ghost">
+            <SparkleIcon className="size-3.5" />
+            <span className="max-lg:hidden">DeepSite Gallery</span>
+          </Button>
+        </a>
+        <a
+          target="_blank"
+          href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/157"
+        >
+          <Button size="sm" variant="outline">
+            <HelpCircle className="size-3.5" />
+            <span className="max-lg:hidden">Help</span>
+          </Button>
+        </a>
+        <Button size="sm" variant="outline" onClick={handleRefreshIframe}>
+          <RefreshCcw className="size-3.5" />
+          <span className="max-lg:hidden">Refresh Preview</span>
+        </Button>
+        <div className="flex items-center rounded-full p-0.5 bg-neutral-700/70 relative overflow-hidden z-0 max-lg:hidden gap-0.5">
+          <div
+            className={classNames(
+              "absolute left-0.5 top-0.5 rounded-full bg-white size-7 -z-[1] transition-all duration-200",
+              {
+                "translate-x-[calc(100%+2px)]": device === "mobile",
+              }
+            )}
+          />
+          {DEVICES.map((deviceItem) => (
+            <button
+              key={deviceItem.name}
+              className={classNames(
+                "rounded-full text-neutral-300 size-7 flex items-center justify-center cursor-pointer",
+                {
+                  "!text-black": device === deviceItem.name,
+                  "hover:bg-neutral-800": device !== deviceItem.name,
+                }
+              )}
+              onClick={() => setDevice(deviceItem.name as "desktop" | "mobile")}
+            >
+              <deviceItem.icon className="text-sm" />
+            </button>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}

index.tsx (15).txt

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { MdSave } from "react-icons/md";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { LoginModal } from "@/components/login-modal";
+import { useUser } from "@/hooks/useUser";
+import { Page } from "@/types";
+import { DeployButtonContent } from "./content";
+
+export function DeployButton({
+  pages,
+  prompts,
+}: {
+  pages: Page[];
+  prompts: string[];
+}) {
+  const { user } = useUser();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex items-center justify-end gap-5">
+      <div className="relative flex items-center justify-end">
+        {user?.id ? (
+          <Popover>
+            <PopoverTrigger asChild>
+              <div>
+                <Button variant="default" className="max-lg:hidden !px-4">
+                  <MdSave className="size-4" />
+                  Publish your Project
+                </Button>
+                <Button variant="default" size="sm" className="lg:hidden">
+                  Publish
+                </Button>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              className="!rounded-2xl !p-0 !bg-white !border-neutral-200 min-w-xs text-center overflow-hidden"
+              align="end"
+            >
+              <DeployButtonContent pages={pages} prompts={prompts} />
+            </PopoverContent>
+          </Popover>
+        ) : (
+          <>
+            <Button
+              variant="default"
+              className="max-lg:hidden !px-4"
+              onClick={() => setOpen(true)}
+            >
+              <MdSave className="size-4" />
+              Publish your Project
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              className="lg:hidden"
+              onClick={() => setOpen(true)}
+            >
+              Publish
+            </Button>
+          </>
+        )}
+        <LoginModal
+          open={open}
+          onClose={() => setOpen(false)}
+          pages={pages}
+          title="Log In to publish your Project"
+          description="Log In through your Hugging Face account to publish your project and increase your monthly free limit."
+        />
+      </div>
+    </div>
+  );
+}

index.tsx (16).txt

@@ -0,0 +1,500 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useMemo, useRef } from "react";
+import classNames from "classnames";
+import { toast } from "sonner";
+import { useLocalStorage, useUpdateEffect } from "react-use";
+import { ArrowUp, ChevronDown, Crosshair } from "lucide-react";
+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, 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";
+import Loading from "@/components/loading";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
+import { TooltipContent } from "@radix-ui/react-tooltip";
+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({
+  isNew,
+  project,
+  images,
+  currentPage,
+  previousPrompts,
+  onScrollToBottom,
+  isAiWorking,
+  setisAiWorking,
+  isEditableModeEnabled = false,
+  pages,
+  htmlHistory,
+  selectedElement,
+  setSelectedElement,
+  selectedFiles,
+  setSelectedFiles,
+  setIsEditableModeEnabled,
+  onNewPrompt,
+  onSuccess,
+  setPages,
+  setCurrentPage,
+}: {
+  project?: Project | null;
+  currentPage: Page;
+  images?: string[];
+  pages: Page[];
+  onScrollToBottom: () => void;
+  previousPrompts: string[];
+  isAiWorking: boolean;
+  onNewPrompt: (prompt: string) => void;
+  htmlHistory?: HtmlHistory[];
+  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
+  isNew?: boolean;
+  onSuccess: (page: Page[], p: string, n?: number[][]) => void;
+  isEditableModeEnabled: boolean;
+  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>>;
+}) {
+  const refThink = useRef<HTMLDivElement | null>(null);
+
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [provider, setProvider] = useLocalStorage("provider", "auto");
+  const [model, setModel] = useLocalStorage("model", MODELS[0].value);
+  const [openProvider, setOpenProvider] = useState(false);
+  const [providerError, setProviderError] = useState("");
+  const [openProModal, setOpenProModal] = useState(false);
+  const [openThink, setOpenThink] = useState(false);
+  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,
+    callAiFollowUp,
+    callAiNewPage,
+    stopController,
+    audio: hookAudio,
+  } = useCallAi({
+    onNewPrompt,
+    onSuccess,
+    onScrollToBottom,
+    setPages,
+    setCurrentPage,
+    currentPage,
+    pages,
+    isAiWorking,
+    setisAiWorking,
+  });
+
+  const selectedModel = useMemo(() => {
+    return MODELS.find((m: { value: string }) => m.value === model);
+  }, [model]);
+
+  const callAi = async (redesignMarkdown?: string) => {
+    if (isAiWorking) return;
+    if (!redesignMarkdown && !prompt.trim()) return;
+
+    if (isFollowUp && !redesignMarkdown && !isSameHtml) {
+      // Use follow-up function for existing projects
+      const selectedElementHtml = selectedElement
+        ? selectedElement.outerHTML
+        : "";
+
+      const result = await callAiFollowUp(
+        prompt,
+        model,
+        provider,
+        previousPrompts,
+        selectedElementHtml,
+        selectedFiles
+      );
+
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
+
+      if (result?.success) {
+        setPrompt("");
+      }
+    } else if (isFollowUp && pages.length > 1 && isSameHtml) {
+      const result = await callAiNewPage(
+        prompt,
+        model,
+        provider,
+        currentPage.path,
+        [
+          ...(previousPrompts ?? []),
+          ...(htmlHistory?.map((h) => h.prompt) ?? []),
+        ]
+      );
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
+
+      if (result?.success) {
+        setPrompt("");
+      }
+    } else {
+      const result = await callAiNewProject(
+        prompt,
+        model,
+        provider,
+        redesignMarkdown,
+        handleThink,
+        () => {
+          setIsThinking(false);
+        }
+      );
+
+      if (result?.error) {
+        handleError(result.error, result.message);
+        return;
+      }
+
+      if (result?.success) {
+        setPrompt("");
+        if (selectedModel?.isThinker) {
+          setModel(MODELS[0].value);
+        }
+      }
+    }
+  };
+
+  const handleThink = (think: string) => {
+    setThink(think);
+    setIsThinking(true);
+    setOpenThink(true);
+  };
+
+  const handleError = (error: string, message?: string) => {
+    switch (error) {
+      case "login_required":
+        setOpen(true);
+        break;
+      case "provider_required":
+        setOpenProvider(true);
+        setProviderError(message || "");
+        break;
+      case "pro_required":
+        setOpenProModal(true);
+        break;
+      case "api_error":
+        toast.error(message || "An error occurred");
+        break;
+      case "network_error":
+        toast.error(message || "Network error occurred");
+        break;
+      default:
+        toast.error("An unexpected error occurred");
+    }
+  };
+
+  useUpdateEffect(() => {
+    if (refThink.current) {
+      refThink.current.scrollTop = refThink.current.scrollHeight;
+    }
+  }, [think]);
+
+  useUpdateEffect(() => {
+    if (!isThinking) {
+      setOpenThink(false);
+    }
+  }, [isThinking]);
+
+  const isSameHtml = useMemo(() => {
+    return isTheSameHtml(currentPage.html);
+  }, [currentPage.html]);
+
+  return (
+    <div className="px-3">
+      <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 w-full group">
+        {think && (
+          <div className="w-full border-b border-neutral-700 relative overflow-hidden">
+            <header
+              className="flex items-center justify-between px-5 py-2.5 group hover:bg-neutral-600/20 transition-colors duration-200 cursor-pointer"
+              onClick={() => {
+                setOpenThink(!openThink);
+              }}
+            >
+              <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
+                {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"}
+              </p>
+              <ChevronDown
+                className={classNames(
+                  "size-4 text-neutral-400 group-hover:text-neutral-300 transition-all duration-200",
+                  {
+                    "rotate-180": openThink,
+                  }
+                )}
+              />
+            </header>
+            <main
+              ref={refThink}
+              className={classNames(
+                "overflow-y-auto transition-all duration-200 ease-in-out",
+                {
+                  "max-h-[0px]": !openThink,
+                  "min-h-[250px] max-h-[250px] border-t border-neutral-700":
+                    openThink,
+                }
+              )}
+            >
+              <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
+                {think}
+              </p>
+            </main>
+          </div>
+        )}
+        <SelectedFiles
+          files={selectedFiles}
+          isAiWorking={isAiWorking}
+          onDelete={(file) =>
+            setSelectedFiles((prev) => prev.filter((f) => f !== file))
+          }
+        />
+        {selectedElement && (
+          <div className="px-4 pt-3">
+            <SelectedHtmlElement
+              element={selectedElement}
+              isAiWorking={isAiWorking}
+              onDelete={() => setSelectedElement(null)}
+            />
+          </div>
+        )}
+        <div className="w-full relative flex items-center justify-between">
+          {(isAiWorking || isUploading) && (
+            <div className="absolute bg-neutral-800 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 opacity-50" />
+                <p className="text-neutral-400 text-sm">
+                  {isUploading ? (
+                    "Uploading images..."
+                  ) : isAiWorking && !isSameHtml ? (
+                    "AI is working..."
+                  ) : (
+                    <span className="inline-flex">
+                      {[
+                        "D",
+                        "e",
+                        "e",
+                        "p",
+                        "S",
+                        "i",
+                        "t",
+                        "e",
+                        " ",
+                        "i",
+                        "s",
+                        " ",
+                        "T",
+                        "h",
+                        "i",
+                        "n",
+                        "k",
+                        "i",
+                        "n",
+                        "g",
+                        ".",
+                        ".",
+                        ".",
+                        " ",
+                        "W",
+                        "a",
+                        "i",
+                        "t",
+                        " ",
+                        "a",
+                        " ",
+                        "m",
+                        "o",
+                        "m",
+                        "e",
+                        "n",
+                        "t",
+                        ".",
+                        ".",
+                        ".",
+                      ].map((char, index) => (
+                        <span
+                          key={index}
+                          className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
+                          style={{
+                            animationDelay: `${index * 0.1}s`,
+                            animationDuration: "1.3s",
+                            animationIterationCount: "infinite",
+                          }}
+                        >
+                          {char === " " ? "\u00A0" : char}
+                        </span>
+                      ))}
+                    </span>
+                  )}
+                </p>
+              </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
+            disabled={isAiWorking}
+            className={classNames(
+              "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none",
+              {
+                "!pt-2.5": selectedElement && !isAiWorking,
+              }
+            )}
+            placeholder={
+              selectedElement
+                ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
+                : isFollowUp && (!isSameHtml || pages?.length > 1)
+                ? "Ask DeepSite for edits"
+                : "Ask DeepSite anything..."
+            }
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                callAi();
+              }
+            }}
+          />
+        </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}
+            />
+            {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
+            {!isSameHtml && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="xs"
+                    variant={isEditableModeEnabled ? "default" : "outline"}
+                    onClick={() => {
+                      setIsEditableModeEnabled?.(!isEditableModeEnabled);
+                    }}
+                    className={classNames("h-[28px]", {
+                      "!text-neutral-400 hover:!text-neutral-200 !border-neutral-600 !hover:!border-neutral-500":
+                        !isEditableModeEnabled,
+                    })}
+                  >
+                    <Crosshair className="size-4" />
+                    Edit
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent
+                  align="start"
+                  className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
+                >
+                  Select an element on the page to ask DeepSite edit it
+                  directly.
+                </TooltipContent>
+              </Tooltip>
+            )}
+            {/* <InviteFriends /> */}
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Settings
+              provider={provider as string}
+              model={model as string}
+              onChange={setProvider}
+              onModelChange={setModel}
+              open={openProvider}
+              error={providerError}
+              isFollowUp={!isSameHtml && isFollowUp}
+              onClose={setOpenProvider}
+            />
+            <Button
+              size="iconXs"
+              disabled={isAiWorking || !prompt.trim()}
+              onClick={() => callAi()}
+            >
+              <ArrowUp className="size-4" />
+            </Button>
+          </div>
+        </div>
+        <LoginModal open={open} onClose={() => setOpen(false)} pages={pages} />
+        <ProModal
+          pages={pages}
+          open={openProModal}
+          onClose={() => setOpenProModal(false)}
+        />
+        {pages.length === 1 && (
+          <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>
+            <p className="text-sm text-neutral-100">
+              DeepSite can now create multiple pages at once. Try it!
+            </p>
+          </div>
+        )}
+        {!isSameHtml && (
+          <div className="absolute top-0 right-0 -translate-y-[calc(100%+8px)] select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5">
+            <label
+              htmlFor="diff-patch-checkbox"
+              className="flex items-center gap-1.5 cursor-pointer"
+            >
+              <Checkbox
+                id="diff-patch-checkbox"
+                checked={isFollowUp}
+                onCheckedChange={(e) => {
+                  if (e === true && !isSameHtml && selectedModel?.isThinker) {
+                    setModel(MODELS[0].value);
+                  }
+                  setIsFollowUp(e === true);
+                }}
+              />
+              Diff-Patch Update
+            </label>
+            <FollowUpTooltip />
+          </div>
+        )}
+      </div>
+      <audio ref={hookAudio} id="audio" className="hidden">
+        <source src="/success.mp3" type="audio/mpeg" />
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  );
+}

index.tsx (2).txt

@@ -0,0 +1,43 @@
+"use client";
+
+import { ArrowUp } from "lucide-react";
+import { PiGearSixFill } from "react-icons/pi";
+import { TiUserAdd } from "react-icons/ti";
+
+import { Button } from "@/components/ui/button";
+
+export const AskAi = () => {
+  return (
+    <>
+      <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent group">
+        <textarea
+          rows={3}
+          className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none mb-1"
+          placeholder="Ask DeepSite anything..."
+          onChange={() => {}}
+          onKeyDown={() => {}}
+        />
+        <div className="flex items-center justify-between gap-2 px-4 pb-3">
+          <div className="flex-1 flex justify-start">
+            <Button
+              size="iconXs"
+              variant="outline"
+              className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+            >
+              <TiUserAdd className="size-4" />
+            </Button>
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button variant="black" size="sm">
+              <PiGearSixFill className="size-4" />
+              Settings
+            </Button>
+            <Button size="iconXs">
+              <ArrowUp className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

index.tsx (3).txt

@@ -0,0 +1,93 @@
+import { useLocalStorage } from "react-use";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { CheckCheck } from "lucide-react";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { Page } from "@/types";
+
+export const ProModal = ({
+  open,
+  pages,
+  onClose,
+}: {
+  open: boolean;
+  pages: Page[];
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const [, setStorage] = useLocalStorage("pages");
+  const handleProClick = () => {
+    if (pages && !isTheSameHtml(pages?.[0].html)) {
+      setStorage(pages);
+    }
+    window.open("https://huggingface.co/subscribe/pro?from=DeepSite", "_blank");
+    onClose(false);
+  };
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+        <DialogTitle className="hidden" />
+        <main className="flex flex-col items-start text-left relative pt-2">
+          <div className="flex items-center justify-start -space-x-4 mb-5">
+            <div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              🚀
+            </div>
+            <div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
+              🤩
+            </div>
+            <div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              🥳
+            </div>
+          </div>
+          <h2 className="text-2xl font-bold text-neutral-950">
+            Only $9 to enhance your possibilities
+          </h2>
+          <p className="text-neutral-500 text-base mt-2 max-w-sm">
+            It seems like you have reached the monthly free limit of DeepSite.
+          </p>
+          <hr className="bg-neutral-200 w-full max-w-[150px] my-6" />
+          <p className="text-lg mt-3 text-neutral-900 font-semibold">
+            Upgrade to a <ProTag className="mx-1" /> Account, and unlock your
+            DeepSite high quota access ⚡
+          </p>
+          <ul className="mt-3 space-y-1 text-neutral-500">
+            <li className="text-sm text-neutral-500 space-x-2 flex items-center justify-start gap-2 mb-3">
+              You&apos;ll also unlock some Hugging Face PRO features, like:
+            </li>
+            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
+              <CheckCheck className="text-emerald-500 size-4" />
+              Get acces to thousands of AI app (ZeroGPU) with high quota
+            </li>
+            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
+              <CheckCheck className="text-emerald-500 size-4" />
+              Get exclusive early access to new features and updates
+            </li>
+            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
+              <CheckCheck className="text-emerald-500 size-4" />
+              Get free credits across all Inference Providers
+            </li>
+            <li className="text-sm text-neutral-500 space-x-2 flex items-center justify-start gap-2 mt-3">
+              ... and lots more!
+            </li>
+          </ul>
+          <Button
+            variant="black"
+            size="lg"
+            className="w-full !text-base !h-11 mt-8"
+            onClick={handleProClick}
+          >
+            Subscribe to PRO ($9/month)
+          </Button>
+        </main>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const ProTag = ({ className }: { className?: string }) => (
+  <span
+    className={`${className} bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg rounded-md px-2.5 py-0.5`}
+  >
+    PRO
+  </span>
+);
+export default ProModal;

index.tsx (4).txt

@@ -0,0 +1,57 @@
+"use client";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+import { useUser } from "@/hooks/useUser";
+import { Project } from "@/types";
+import { redirect } from "next/navigation";
+import { ProjectCard } from "./project-card";
+import { LoadProject } from "./load-project";
+
+export function MyProjects({
+  projects: initialProjects,
+}: {
+  projects: Project[];
+}) {
+  const { user } = useUser();
+  if (!user) {
+    redirect("/");
+  }
+  const [projects, setProjects] = useState<Project[]>(initialProjects || []);
+  return (
+    <>
+      <section className="max-w-[86rem] py-12 px-4 mx-auto">
+        <header className="flex items-center justify-between max-lg:flex-col gap-4">
+          <div className="text-left">
+            <h1 className="text-3xl font-bold text-white">
+              <span className="capitalize">{user.fullname}</span>&apos;s
+              DeepSite Projects
+            </h1>
+            <p className="text-muted-foreground text-base mt-1 max-w-xl">
+              Create, manage, and explore your DeepSite projects.
+            </p>
+          </div>
+          <LoadProject
+            fullXsBtn
+            onSuccess={(project: Project) => {
+              setProjects((prev) => [...prev, project]);
+            }}
+          />
+        </header>
+        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          <Link
+            href="/projects/new"
+            className="bg-neutral-900 rounded-xl h-44 flex items-center justify-center text-neutral-300 border border-neutral-800 hover:brightness-110 transition-all duration-200"
+          >
+            <Plus className="size-5 mr-1.5" />
+            Create Project
+          </Link>
+          {projects.map((project: Project) => (
+            <ProjectCard key={project._id} project={project} />
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}

index.tsx (5).txt

@@ -0,0 +1,62 @@
+import { useLocalStorage } from "react-use";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { useUser } from "@/hooks/useUser";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+import { Page } from "@/types";
+
+export const LoginModal = ({
+  open,
+  pages,
+  onClose,
+  title = "Log In to use DeepSite for free",
+  description = "Log In through your Hugging Face account to continue using DeepSite and increase your monthly free limit.",
+}: {
+  open: boolean;
+  pages?: Page[];
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+  title?: string;
+  description?: string;
+}) => {
+  const { openLoginWindow } = useUser();
+  const [, setStorage] = useLocalStorage("pages");
+  const handleClick = async () => {
+    if (pages && !isTheSameHtml(pages[0].html)) {
+      setStorage(pages);
+    }
+    openLoginWindow();
+    onClose(false);
+  };
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+        <DialogTitle className="hidden" />
+        <main className="flex flex-col items-start text-left relative pt-2">
+          <div className="flex items-center justify-start -space-x-4 mb-5">
+            <div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              💪
+            </div>
+            <div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
+              😎
+            </div>
+            <div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              🙌
+            </div>
+          </div>
+          <p className="text-2xl font-bold text-neutral-950">{title}</p>
+          <p className="text-neutral-500 text-base mt-2 max-w-sm">
+            {description}
+          </p>
+          <Button
+            variant="black"
+            size="lg"
+            className="w-full !text-base !h-11 mt-8"
+            onClick={handleClick}
+          >
+            Log In to Continue
+          </Button>
+        </main>
+      </DialogContent>
+    </Dialog>
+  );
+};

index.tsx (6).txt

@@ -0,0 +1,41 @@
+import classNames from "classnames";
+
+function Loading({
+  overlay = true,
+  className,
+}: {
+  overlay?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={classNames("", {
+        "absolute left-0 top-0 h-full w-full flex items-center justify-center z-20 bg-black/50 rounded-full":
+          overlay,
+      })}
+    >
+      <svg
+        className={`size-5 animate-spin text-white ${className}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+}
+
+export default Loading;

index.tsx (7).txt

@@ -0,0 +1,85 @@
+import { TiUserAdd } from "react-icons/ti";
+import { Link } from "lucide-react";
+import { FaXTwitter } from "react-icons/fa6";
+import { useCopyToClipboard } from "react-use";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export function InviteFriends() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+          >
+            <TiUserAdd className="size-4" />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+          <DialogTitle className="hidden" />
+          <main>
+            <div className="flex items-center justify-start -space-x-4 mb-5">
+              <div className="size-11 rounded-full bg-pink-300 shadow-2xs flex items-center justify-center text-2xl">
+                😎
+              </div>
+              <div className="size-11 rounded-full bg-amber-300 shadow-2xs flex items-center justify-center text-2xl z-2">
+                😇
+              </div>
+              <div className="size-11 rounded-full bg-sky-300 shadow-2xs flex items-center justify-center text-2xl">
+                😜
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-neutral-950 max-w-[200px]">
+              Invite your friends to join us!
+            </p>
+            <p className="text-sm text-neutral-500 mt-2 max-w-sm">
+              Support us and share the love and let them know about our awesome
+              platform.
+            </p>
+            <div className="mt-4 space-x-3.5">
+              <a
+                href="https://x.com/intent/post?url=https://enzostvs-deepsite.hf.space/&text=Checkout%20this%20awesome%20Ai%20Tool!%20Vibe%20coding%20has%20never%20been%20so%20easy✨"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button
+                  variant="lightGray"
+                  size="sm"
+                  className="!text-neutral-700"
+                >
+                  <FaXTwitter className="size-4" />
+                  Share on
+                </Button>
+              </a>
+              <Button
+                variant="lightGray"
+                size="sm"
+                className="!text-neutral-700"
+                onClick={() => {
+                  copyToClipboard("https://enzostvs-deepsite.hf.space/");
+                  toast.success("Invite link copied to clipboard!");
+                }}
+              >
+                <Link className="size-4" />
+                Copy Invite Link
+              </Button>
+            </div>
+          </main>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}

index.tsx (8).txt

@@ -0,0 +1,392 @@
+"use client";
+import { useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { editor } from "monaco-editor";
+import Editor from "@monaco-editor/react";
+import { CopyIcon } from "lucide-react";
+import {
+  useCopyToClipboard,
+  useEvent,
+  useLocalStorage,
+  useMount,
+  useUnmount,
+  useUpdateEffect,
+} from "react-use";
+import classNames from "classnames";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { Header } from "@/components/editor/header";
+import { Footer } from "@/components/editor/footer";
+import { defaultHTML } from "@/lib/consts";
+import { Preview } from "@/components/editor/preview";
+import { useEditor } from "@/hooks/useEditor";
+import { AskAI } from "@/components/editor/ask-ai";
+import { DeployButton } from "./deploy-button";
+import { Page, Project } from "@/types";
+import { SaveButton } from "./save-button";
+import { LoadProject } from "../my-projects/load-project";
+import { isTheSameHtml } from "@/lib/compare-html-diff";
+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");
+  const [, copyToClipboard] = useCopyToClipboard();
+  const { htmlHistory, setHtmlHistory, prompts, setPrompts, pages, setPages } =
+    useEditor(
+      initialPages,
+      project?.prompts ?? [],
+      typeof htmlStorage === "string" ? htmlStorage : undefined
+    );
+
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const deploy = searchParams.get("deploy") === "true";
+
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const preview = useRef<HTMLDivElement>(null);
+  const editor = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const resizer = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const monacoRef = useRef<any>(null);
+
+  const [currentTab, setCurrentTab] = useState("chat");
+  const [currentPage, setCurrentPage] = useState("index.html");
+  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
+  const [isResizing, setIsResizing] = useState(false);
+  const [isAiWorking, setIsAiWorking] = useState(false);
+  const [isEditableModeEnabled, setIsEditableModeEnabled] = useState(false);
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
+    null
+  );
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
+
+  const resetLayout = () => {
+    if (!editor.current || !preview.current) return;
+
+    // lg breakpoint is 1024px based on useBreakpoint definition and Tailwind defaults
+    if (window.innerWidth >= 1024) {
+      // Set initial 1/3 - 2/3 sizes for large screens, accounting for resizer width
+      const resizerWidth = resizer.current?.offsetWidth ?? 8; // w-2 = 0.5rem = 8px
+      const availableWidth = window.innerWidth - resizerWidth;
+      const initialEditorWidth = availableWidth / 3; // Editor takes 1/3 of space
+      const initialPreviewWidth = availableWidth - initialEditorWidth; // Preview takes 2/3
+      editor.current.style.width = `${initialEditorWidth}px`;
+      preview.current.style.width = `${initialPreviewWidth}px`;
+    } else {
+      // Remove inline styles for smaller screens, let CSS flex-col handle it
+      editor.current.style.width = "";
+      preview.current.style.width = "";
+    }
+  };
+
+  const handleResize = (e: MouseEvent) => {
+    if (!editor.current || !preview.current || !resizer.current) return;
+
+    const resizerWidth = resizer.current.offsetWidth;
+    const minWidth = 100; // Minimum width for editor/preview
+    const maxWidth = window.innerWidth - resizerWidth - minWidth;
+
+    const editorWidth = e.clientX;
+    const clampedEditorWidth = Math.max(
+      minWidth,
+      Math.min(editorWidth, maxWidth)
+    );
+    const calculatedPreviewWidth =
+      window.innerWidth - clampedEditorWidth - resizerWidth;
+
+    editor.current.style.width = `${clampedEditorWidth}px`;
+    preview.current.style.width = `${calculatedPreviewWidth}px`;
+  };
+
+  const handleMouseDown = () => {
+    setIsResizing(true);
+    document.addEventListener("mousemove", handleResize);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  const handleMouseUp = () => {
+    setIsResizing(false);
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  useMount(() => {
+    if (deploy && project?._id) {
+      toast.success("Your project is deployed! 🎉", {
+        action: {
+          label: "See Project",
+          onClick: () => {
+            window.open(
+              `https://huggingface.co/spaces/${project?.space_id}`,
+              "_blank"
+            );
+          },
+        },
+      });
+      router.replace(`/projects/${project?.space_id}`);
+    }
+    if (htmlStorage) {
+      removeHtmlStorage();
+      toast.warning("Previous HTML content restored from local storage.");
+    }
+
+    resetLayout();
+    if (!resizer.current) return;
+    resizer.current.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("resize", resetLayout);
+  });
+  useUnmount(() => {
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+    if (resizer.current) {
+      resizer.current.removeEventListener("mousedown", handleMouseDown);
+    }
+    window.removeEventListener("resize", resetLayout);
+  });
+
+  // Prevent accidental navigation away when AI is working or content has changed
+  useEvent("beforeunload", (e) => {
+    if (isAiWorking || !isTheSameHtml(currentPageData?.html)) {
+      e.preventDefault();
+      return "";
+    }
+  });
+
+  useUpdateEffect(() => {
+    if (currentTab === "chat") {
+      // Reset editor width when switching to reasoning tab
+      resetLayout();
+      // re-add the event listener for resizing
+      if (resizer.current) {
+        resizer.current.addEventListener("mousedown", handleMouseDown);
+      }
+    } else {
+      if (preview.current) {
+        // Reset preview width when switching to preview tab
+        preview.current.style.width = "100%";
+      }
+    }
+  }, [currentTab]);
+
+  const handleEditorValidation = (markers: editor.IMarker[]) => {
+    console.log("Editor validation markers:", markers);
+  };
+
+  const currentPageData = useMemo(() => {
+    return (
+      pages.find((page) => page.path === currentPage) ?? {
+        path: "index.html",
+        html: defaultHTML,
+      }
+    );
+  }, [pages, currentPage]);
+
+  return (
+    <section className="h-[100dvh] bg-neutral-950 flex flex-col">
+      <Header tab={currentTab} onNewTab={setCurrentTab}>
+        <LoadProject
+          onSuccess={(project: Project) => {
+            router.push(`/projects/${project.space_id}`);
+          }}
+        />
+        {/* for these buttons pass the whole pages */}
+        {project?._id ? (
+          <SaveButton pages={pages} prompts={prompts} />
+        ) : (
+          <DeployButton pages={pages} prompts={prompts} />
+        )}
+      </Header>
+      <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full max-lg:h-[calc(100%-82px)] relative">
+        {currentTab === "chat" && (
+          <>
+            <div
+              ref={editor}
+              className="bg-neutral-900 relative flex-1 overflow-hidden h-full flex flex-col gap-2 pb-3"
+            >
+              <ListPages
+                pages={pages}
+                currentPage={currentPage}
+                onSelectPage={(path, newPath) => {
+                  if (newPath) {
+                    setPages((prev) =>
+                      prev.map((page) =>
+                        page.path === path ? { ...page, path: newPath } : page
+                      )
+                    );
+                    setCurrentPage(newPath);
+                  } else {
+                    setCurrentPage(path);
+                  }
+                }}
+                onDeletePage={(path) => {
+                  const newPages = pages.filter((page) => page.path !== path);
+                  setPages(newPages);
+                  if (currentPage === path) {
+                    setCurrentPage(newPages[0]?.path ?? "index.html");
+                  }
+                }}
+                onNewPage={() => {
+                  setPages((prev) => [
+                    ...prev,
+                    {
+                      path: `page-${prev.length + 1}.html`,
+                      html: defaultHTML,
+                    },
+                  ]);
+                  setCurrentPage(`page-${pages.length + 1}.html`);
+                }}
+              />
+              <CopyIcon
+                className="size-4 absolute top-14 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
+                onClick={() => {
+                  copyToClipboard(currentPageData.html);
+                  toast.success("HTML copied to clipboard!");
+                }}
+              />
+              <Editor
+                defaultLanguage="html"
+                theme="vs-dark"
+                className={classNames(
+                  "h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
+                  {
+                    "pointer-events-none": isAiWorking,
+                  }
+                )}
+                options={{
+                  colorDecorators: true,
+                  fontLigatures: true,
+                  theme: "vs-dark",
+                  minimap: { enabled: false },
+                  scrollbar: {
+                    horizontal: "hidden",
+                  },
+                  wordWrap: "on",
+                }}
+                value={currentPageData.html}
+                onChange={(value) => {
+                  const newValue = value ?? "";
+                  // setHtml(newValue);
+                  setPages((prev) =>
+                    prev.map((page) =>
+                      page.path === currentPageData.path
+                        ? { ...page, html: newValue }
+                        : page
+                    )
+                  );
+                }}
+                onMount={(editor, monaco) => {
+                  editorRef.current = editor;
+                  monacoRef.current = monaco;
+                }}
+                onValidate={handleEditorValidation}
+              />
+              <AskAI
+                project={project}
+                images={images}
+                currentPage={currentPageData}
+                htmlHistory={htmlHistory}
+                previousPrompts={prompts}
+                onSuccess={(newPages, p: string) => {
+                  const currentHistory = [...htmlHistory];
+                  currentHistory.unshift({
+                    pages: newPages,
+                    createdAt: new Date(),
+                    prompt: p,
+                  });
+                  setHtmlHistory(currentHistory);
+                  setSelectedElement(null);
+                  setSelectedFiles([]);
+                  // if xs or sm
+                  if (window.innerWidth <= 1024) {
+                    setCurrentTab("preview");
+                  }
+                  // if (updatedLines && updatedLines?.length > 0) {
+                  //   const decorations = updatedLines.map((line) => ({
+                  //     range: new monacoRef.current.Range(
+                  //       line[0],
+                  //       1,
+                  //       line[1],
+                  //       1
+                  //     ),
+                  //     options: {
+                  //       inlineClassName: "matched-line",
+                  //     },
+                  //   }));
+                  //   setTimeout(() => {
+                  //     editorRef?.current
+                  //       ?.getModel()
+                  //       ?.deltaDecorations([], decorations);
+
+                  //     editorRef.current?.revealLine(updatedLines[0][0]);
+                  //   }, 100);
+                  // }
+                }}
+                setPages={setPages}
+                pages={pages}
+                setCurrentPage={setCurrentPage}
+                isAiWorking={isAiWorking}
+                setisAiWorking={setIsAiWorking}
+                onNewPrompt={(prompt: string) => {
+                  setPrompts((prev) => [...prev, prompt]);
+                }}
+                onScrollToBottom={() => {
+                  editorRef.current?.revealLine(
+                    editorRef.current?.getModel()?.getLineCount() ?? 0
+                  );
+                }}
+                isNew={isNew}
+                isEditableModeEnabled={isEditableModeEnabled}
+                setIsEditableModeEnabled={setIsEditableModeEnabled}
+                selectedElement={selectedElement}
+                setSelectedElement={setSelectedElement}
+                setSelectedFiles={setSelectedFiles}
+                selectedFiles={selectedFiles}
+              />
+            </div>
+            <div
+              ref={resizer}
+              className="bg-neutral-800 hover:bg-sky-500 active:bg-sky-500 w-1.5 cursor-col-resize h-full max-lg:hidden"
+            />
+          </>
+        )}
+        <Preview
+          html={currentPageData?.html}
+          isResizing={isResizing}
+          isAiWorking={isAiWorking}
+          ref={preview}
+          device={device}
+          pages={pages}
+          setCurrentPage={setCurrentPage}
+          currentTab={currentTab}
+          isEditableModeEnabled={isEditableModeEnabled}
+          iframeRef={iframeRef}
+          onClickElement={(element) => {
+            setIsEditableModeEnabled(false);
+            setSelectedElement(element);
+            setCurrentTab("chat");
+          }}
+        />
+      </main>
+      <Footer
+        pages={pages}
+        htmlHistory={htmlHistory}
+        setPages={setPages}
+        iframeRef={iframeRef}
+        device={device}
+        isNew={isNew}
+        setDevice={setDevice}
+      />
+    </section>
+  );
+};

index.tsx (9).txt

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { toast } from "sonner";
+import { MdSave } from "react-icons/md";
+import { useParams } from "next/navigation";
+
+import Loading from "@/components/loading";
+import { Button } from "@/components/ui/button";
+import { api } from "@/lib/api";
+import { Page } from "@/types";
+
+export function SaveButton({
+  pages,
+  prompts,
+}: {
+  pages: Page[];
+  prompts: string[];
+}) {
+  // get params from URL
+  const { namespace, repoId } = useParams<{
+    namespace: string;
+    repoId: string;
+  }>();
+  const [loading, setLoading] = useState(false);
+
+  const updateSpace = async () => {
+    setLoading(true);
+
+    try {
+      const res = await api.put(`/me/projects/${namespace}/${repoId}`, {
+        pages,
+        prompts,
+      });
+      if (res.data.ok) {
+        toast.success("Your space is updated! 🎉", {
+          action: {
+            label: "See Space",
+            onClick: () => {
+              window.open(
+                `https://huggingface.co/spaces/${namespace}/${repoId}`,
+                "_blank"
+              );
+            },
+          },
+        });
+      } else {
+        toast.error(res?.data?.error || "Failed to update space");
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <>
+      <Button
+        variant="default"
+        className="max-lg:hidden !px-4 relative"
+        onClick={updateSpace}
+      >
+        <MdSave className="size-4" />
+        Publish your Project{" "}
+        {loading && <Loading className="ml-2 size-4 animate-spin" />}
+      </Button>
+      <Button
+        variant="default"
+        size="sm"
+        className="lg:hidden relative"
+        onClick={updateSpace}
+      >
+        Publish {loading && <Loading className="ml-2 size-4 animate-spin" />}
+      </Button>
+    </>
+  );
+}