initial commit

.env.example

@@ -0,0 +1,4 @@
+AUTH_HUGGINGFACE_ID=
+AUTH_HUGGINGFACE_SECRET=
+NEXTAUTH_URL=http://localhost:3001
+AUTH_SECRET=

.gitignore

@@ -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

Dockerfile

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

README.md

@@ -0,0 +1,23 @@
+---
+title: DeepSite v4
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
+sdk: docker
+pinned: false
+app_port: 3001
+license: mit
+failure_strategy: rollback
+short_description: Generate any application by Vibe Coding it
+models:
+  - deepseek-ai/DeepSeek-V3-0324
+  - deepseek-ai/DeepSeek-V3.2
+  - Qwen/Qwen3-Coder-30B-A3B-Instruct
+  - moonshotai/Kimi-K2-Instruct-0905
+  - zai-org/GLM-4.7
+  - MiniMaxAI/MiniMax-M2.1
+---
+
+# DeepSite 🏗️
+
+DeepSite is a Vibe Coding Platform 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.

actions/mentions.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { File } from "@/lib/type";
+
+export const searchMentions = async (query: string) => {
+  const promises = [searchModels(query), searchDatasets(query)];
+  const results = await Promise.all(promises);
+  return { models: results[0], datasets: results[1] };
+};
+
+const searchModels = async (query: string) => {
+  const response = await fetch(
+    `https://huggingface.co/api/quicksearch?q=${query}&type=model&limit=3`
+  );
+  const data = await response.json();
+  return data?.models ?? [];
+};
+
+const searchDatasets = async (query: string) => {
+  const response = await fetch(
+    `https://huggingface.co/api/quicksearch?q=${query}&type=dataset&limit=3`
+  );
+  const data = await response.json();
+  return data?.datasets ?? [];
+};
+
+export const searchFilesMentions = async (query: string, files: File[]) => {
+  if (!query) return files;
+  const lowerQuery = query.toLowerCase();
+  return files.filter((file) => file.path.toLowerCase().includes(lowerQuery));
+};

actions/projects.ts

@@ -0,0 +1,156 @@
+"use server";
+import {
+  downloadFile,
+  listCommits,
+  listFiles,
+  listSpaces,
+  RepoDesignation,
+  SpaceEntry,
+  spaceInfo,
+} from "@huggingface/hub";
+
+import { auth } from "@/lib/auth";
+import { Commit, File } from "@/lib/type";
+
+export interface ProjectWithCommits extends SpaceEntry {
+  commits?: Commit[];
+}
+
+const IGNORED_PATHS = ["README.md", ".gitignore", ".gitattributes"];
+
+export const getProjects = async () => {
+  const projects: SpaceEntry[] = [];
+  const session = await auth();
+  if (!session?.user) {
+    return projects;
+  }
+  const token = session.accessToken;
+  for await (const space of listSpaces({
+    accessToken: token,
+    additionalFields: ["author", "cardData"],
+    search: {
+      owner: "enzostvs",
+    },
+  })) {
+    if (
+      space.sdk === "static" &&
+      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
+      (space.cardData as { tags?: string[] })?.tags?.some((tag) =>
+        tag.includes("deepsite")
+      )
+    ) {
+      projects.push(space);
+    }
+  }
+  return projects;
+};
+export const getProject = async (id: string, commitId?: string) => {
+  const session = await auth();
+  if (!session?.user) {
+    return null;
+  }
+  const token = session.accessToken;
+  try {
+    const project: ProjectWithCommits | null = await spaceInfo({
+      name: id,
+      accessToken: token,
+      additionalFields: ["author", "cardData"],
+    });
+    const repo: RepoDesignation = {
+      type: "space",
+      name: id,
+    };
+    const files: File[] = [];
+    const params = { repo, accessToken: token };
+    if (commitId) {
+      Object.assign(params, { revision: commitId });
+    }
+    for await (const fileInfo of listFiles(params)) {
+      if (IGNORED_PATHS.includes(fileInfo.path)) continue;
+      if (
+        fileInfo.path.endsWith(".html") ||
+        fileInfo.path.endsWith(".css") ||
+        fileInfo.path.endsWith(".js") ||
+        fileInfo.path.endsWith(".json")
+      ) {
+        const blob = await downloadFile({
+          repo,
+          accessToken: token,
+          path: fileInfo.path,
+          raw: true,
+          ...(commitId ? { revision: commitId } : {}),
+        }).catch((_) => {
+          return null;
+        });
+        if (!blob) {
+          continue;
+        }
+        const html = await blob?.text();
+        if (!html) {
+          continue;
+        }
+        files[fileInfo.path === "index.html" ? "unshift" : "push"]({
+          path: fileInfo.path,
+          content: html,
+        });
+      }
+      if (fileInfo.type === "directory") {
+        for await (const subFile of listFiles({
+          repo,
+          accessToken: token,
+          path: fileInfo.path,
+        })) {
+          if (
+            subFile.path.endsWith(".html") ||
+            subFile.path.endsWith(".css") ||
+            subFile.path.endsWith(".js") ||
+            subFile.path.endsWith(".json")
+          ) {
+            const blob = await downloadFile({
+              repo,
+              accessToken: token,
+              path: subFile.path,
+              raw: true,
+              ...(commitId ? { revision: commitId } : {}),
+            }).catch((_) => {
+              return null;
+            });
+            if (!blob) {
+              continue;
+            }
+            const html = await blob?.text();
+            if (!html) {
+              continue;
+            }
+            files[subFile.path === "index.html" ? "unshift" : "push"]({
+              path: subFile.path,
+              content: html,
+            });
+          }
+        }
+      }
+    }
+    const commits: Commit[] = [];
+    const commitIterator = listCommits({ repo, accessToken: token });
+    for await (const commit of commitIterator) {
+      if (commit.title?.toLowerCase() === "initial commit") continue;
+      commits.push({
+        title: commit.title,
+        oid: commit.oid,
+        date: commit.date,
+      });
+      if (commits.length >= 20) {
+        break;
+      }
+    }
+
+    project.commits = commits;
+
+    return { project, files };
+  } catch (error) {
+    return {
+      project: null,
+      files: [],
+    };
+  }
+};

app/(public)/layout.tsx

@@ -0,0 +1,14 @@
+import { Navigation } from "@/components/public/navigation";
+
+export default function PublicLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen font-sans">
+      <Navigation />
+      {children}
+    </div>
+  );
+}

app/(public)/page.tsx

@@ -0,0 +1,21 @@
+import { AnimatedDotsBackground } from "@/components/public/animated-dots-background";
+import { HeroHeader } from "@/components/public/hero-header";
+import { UserProjects } from "@/components/projects/user-projects";
+import { AskAiLanding } from "@/components/ask-ai/ask-ai-landing";
+
+export default async function Homepage() {
+  return (
+    <>
+      <section className="container mx-auto relative z-10">
+        <HeroHeader />
+        <div className="absolute inset-0 -z-10">
+          <AnimatedDotsBackground />
+        </div>
+        <div className="max-w-xl mx-auto px-6">
+          <AskAiLanding />
+        </div>
+      </section>
+      <UserProjects />
+    </>
+  );
+}

app/[owner]/[repoId]/page.tsx

@@ -0,0 +1,25 @@
+import { getProject } from "@/actions/projects";
+import { AppEditor } from "@/components/editor";
+import { notFound } from "next/navigation";
+
+export default async function ProjectPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ owner: string; repoId: string }>;
+  searchParams: Promise<{ commit?: string }>;
+}) {
+  const { owner, repoId } = await params;
+  const { commit } = await searchParams;
+  const datas = await getProject(`${owner}/${repoId}`, commit);
+  if (!datas?.project) {
+    return notFound();
+  }
+  return (
+    <AppEditor
+      project={datas.project}
+      files={datas.files ?? []}
+      isHistoryView={!!commit}
+    />
+  );
+}

app/api/ask/route.ts

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NextResponse } from "next/server";
+import { InferenceClient } from "@huggingface/inference";
+
+import { FOLLOW_UP_SYSTEM_PROMPT, INITIAL_SYSTEM_PROMPT } from "@/lib/prompts";
+import { auth } from "@/lib/auth";
+import { File, Message } from "@/lib/type";
+import { MODELS } from "@/lib/providers";
+
+export async function POST(request: Request) {
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const token = session.accessToken;
+
+  const body = await request.json();
+  const {
+    prompt,
+    previousMessages = [],
+    files = [],
+    provider: initialProvider,
+    mentions = [],
+    model,
+    redesignMd,
+  } = body;
+  const provider = initialProvider ?? "auto";
+
+  if (!prompt) {
+    return NextResponse.json({ error: "Prompt is required" }, { status: 400 });
+  }
+  if (!model || !MODELS.find((m: (typeof MODELS)[0]) => m.value === model)) {
+    return NextResponse.json({ error: "Model is required" }, { status: 400 });
+  }
+
+  const client = new InferenceClient(token);
+
+  try {
+    const encoder = new TextEncoder();
+    const stream = new TransformStream();
+    const writer = stream.writable.getWriter();
+
+    const response = new NextResponse(stream.readable, {
+      headers: {
+        "Content-Type": "text/plain; charset=utf-8",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+    (async () => {
+      try {
+        const chatCompletion = client.chatCompletionStream({
+          model: model + (provider !== "auto" ? `:${provider}` : ""),
+          messages: [
+            {
+              role: "system",
+              content:
+                files.length > 0
+                  ? FOLLOW_UP_SYSTEM_PROMPT
+                  : INITIAL_SYSTEM_PROMPT,
+            },
+            ...previousMessages.map((message: Message) => ({
+              role: message.role,
+              content: message.content,
+            })),
+            ...(files?.length > 0
+              ? [
+                  {
+                    role: "user",
+                    content: `Here are the files that the user has provider:${files
+                      .map(
+                        (file: File) =>
+                          `File: ${file.path}\nContent: ${file.content}`
+                      )
+                      .join("\n")}\n\n${prompt}`,
+                  },
+                ]
+              : []),
+            {
+              role: "user",
+              content: `
+${prompt}
+${
+  mentions?.length > 0
+    ? `\n\nHere are the informations about the model or dataset that the user has mentioned to use: ${mentions
+        .map(
+          (mention: any) =>
+            `Library: ${mention.library_name}\nPipeline: ${mention.pipeline_tag}\nModel: ${mention.model_id}\nReadme for more information: \n${mention.readme}`
+        )
+        .join("\n")}`
+    : ""
+}
+            `,
+            },
+          ],
+          stream: true,
+          max_tokens: 16_000,
+        });
+        while (true) {
+          const { done, value } = await chatCompletion.next();
+          if (done) {
+            break;
+          }
+
+          const chunk = value.choices[0]?.delta?.content;
+          if (chunk) {
+            await writer.write(encoder.encode(chunk));
+          }
+        }
+
+        await writer.close();
+      } catch (error) {
+        console.error(error);
+        try {
+          const errorMessage =
+            error instanceof Error
+              ? error.message
+              : "An error occurred while processing your request";
+          const errorPayload = JSON.stringify({
+            messageError: errorMessage,
+            isError: true,
+          });
+          await writer.write(encoder.encode(`\n\n__ERROR__:${errorPayload}`));
+          await writer.close();
+        } catch (closeError) {
+          console.error("Failed to send error message:", closeError);
+          try {
+            await writer.abort(error);
+          } catch (abortError) {
+            console.error("Failed to abort writer:", abortError);
+          }
+        }
+      }
+    })();
+
+    return response;
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,4 @@
+import { handlers } from "@/lib/auth";
+
+export const { GET, POST } = handlers;
+

app/api/projects/[repoId]/[commitId]/route.ts

@@ -0,0 +1,49 @@
+import { auth } from "@/lib/auth";
+import { createBranch, RepoDesignation } from "@huggingface/hub";
+import { format } from "date-fns";
+import { NextResponse } from "next/server";
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ repoId: string; commitId: string }> }
+) {
+  const { repoId, commitId }: { repoId: string; commitId: string } =
+    await params;
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const token = session.accessToken;
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: session.user?.username + "/" + repoId,
+  };
+
+  const commitTitle = `🔖 ${format(new Date(), "dd/MM")} - ${format(
+    new Date(),
+    "HH:mm"
+  )} - Set commit ${commitId} as default.`;
+
+  await fetch(
+    `https://huggingface.co/api/spaces/${session.user?.username}/${repoId}/branch/main`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        startingPoint: commitId,
+        overwrite: true,
+      }),
+    }
+  ).catch((error) => {
+    return NextResponse.json(
+      { error: error ?? "Failed to create branch" },
+      { status: 500 }
+    );
+  });
+
+  return NextResponse.json({ success: true }, { status: 200 });
+}

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

@@ -0,0 +1,97 @@
+import { auth } from "@/lib/auth";
+import { RepoDesignation, deleteRepo, uploadFiles } from "@huggingface/hub";
+import { format } from "date-fns";
+import { NextResponse } from "next/server";
+
+export async function PUT(
+  request: Request,
+  { params }: { params: Promise<{ repoId: string }> }
+) {
+  const { repoId }: { repoId: string } = await params;
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const token = session.accessToken;
+
+  const body = await request.json();
+  const { files, prompt, isManualChanges } = body;
+
+  if (!files) {
+    return NextResponse.json({ error: "Files are required" }, { status: 400 });
+  }
+
+  if (!prompt) {
+    return NextResponse.json({ error: "Prompt is required" }, { status: 400 });
+  }
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: session.user?.username + "/" + repoId,
+  };
+
+  const filesToUpload: File[] = [];
+  for (const file of files) {
+    let mimeType = "text/x-python";
+    if (file.path.endsWith(".txt")) {
+      mimeType = "text/plain";
+    } else if (file.path.endsWith(".md")) {
+      mimeType = "text/markdown";
+    } else if (file.path.endsWith(".json")) {
+      mimeType = "application/json";
+    }
+    filesToUpload.push(new File([file.content], file.path, { type: mimeType }));
+  }
+  const baseTitle = isManualChanges
+    ? ""
+    : `🐳 ${format(new Date(), "dd/MM")} - ${format(new Date(), "HH:mm")} - `;
+  const commitTitle = baseTitle + (prompt ?? "Follow-up DeepSite commit");
+  const response = await uploadFiles({
+    repo,
+    files: filesToUpload,
+    accessToken: token,
+    commitTitle,
+  });
+
+  return NextResponse.json(
+    {
+      success: true,
+      commit: {
+        oid: response.commit,
+        title: commitTitle,
+        date: new Date(),
+      },
+    },
+    { status: 200 }
+  );
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ repoId: string }> }
+) {
+  const { repoId }: { repoId: string } = await params;
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const token = session.accessToken;
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: session.user?.username + "/" + repoId,
+  };
+
+  try {
+    await deleteRepo({
+      repo,
+      accessToken: token as string,
+    });
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    const errMsg =
+      error instanceof Error ? error.message : "Failed to delete project";
+    return NextResponse.json({ error: errMsg }, { status: 500 });
+  }
+}

app/api/projects/route.ts

@@ -0,0 +1,97 @@
+import { NextResponse } from "next/server";
+import { RepoDesignation, createRepo, uploadFiles } from "@huggingface/hub";
+
+import { auth } from "@/lib/auth";
+import { COLORS, injectDeepSiteBadge, isIndexPage } from "@/lib/utils";
+
+export async function POST(request: Request) {
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const token = session.accessToken;
+
+  const body = await request.json();
+  const { projectTitle, files, prompt } = body;
+
+  if (!files) {
+    return NextResponse.json(
+      { error: "Project title and files are required" },
+      { status: 400 }
+    );
+  }
+
+  const title =
+    projectTitle || projectTitle !== "" ? projectTitle : "DeepSite Project";
+
+  const formattedTitle = title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .split("-")
+    .filter(Boolean)
+    .join("-")
+    .slice(0, 96);
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: session.user?.username + "/" + formattedTitle,
+  };
+
+  const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+  const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+  const README = `---
+title: ${projectTitle}
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+sdk: static
+tags:
+  - deepsite-v4
+---
+
+# ${title}
+
+This project has been created with [DeepSite](https://huggingface.co/deepsite) AI Vibe Coding.
+`;
+
+  const filesToUpload: File[] = [
+    new File([README], "README.md", { type: "text/markdown" }),
+  ];
+  for (const file of files) {
+    let mimeType = "text/html";
+    if (file.path.endsWith(".css")) {
+      mimeType = "text/css";
+    } else if (file.path.endsWith(".js")) {
+      mimeType = "text/javascript";
+    }
+    const content =
+      mimeType === "text/html" && isIndexPage(file.path)
+        ? injectDeepSiteBadge(file.content)
+        : file.content;
+
+    filesToUpload.push(new File([content], file.path, { type: mimeType }));
+  }
+
+  try {
+    const { repoUrl } = await createRepo({
+      accessToken: token as string,
+      repo: repo,
+      sdk: "static",
+    });
+
+    const commitTitle = prompt ?? "Initial DeepSite commit";
+    await uploadFiles({
+      repo,
+      files: filesToUpload,
+      accessToken: token as string,
+      commitTitle,
+    });
+
+    const path = repoUrl.split("/").slice(-2).join("/");
+
+    return NextResponse.json({ repoUrl: path }, { status: 200 });
+  } catch (error) {
+    const errMsg =
+      error instanceof Error ? error.message : "Failed to upload files";
+    return NextResponse.json({ error: errMsg }, { status: 500 });
+  }
+}

app/api/redesign/route.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NextRequest, NextResponse } from "next/server";
+
+const FETCH_TIMEOUT = 30_000;
+export const maxDuration = 60;
+
+export async function PUT(request: NextRequest) {
+  const body = await request.json();
+  const { url } = body;
+
+  if (!url) {
+    return NextResponse.json({ error: "URL is required" }, { status: 400 });
+  }
+
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
+
+    try {
+      const response = await fetch(
+        `https://r.jina.ai/${encodeURIComponent(url)}`,
+        {
+          method: "POST",
+          signal: controller.signal,
+        }
+      );
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        return NextResponse.json(
+          { error: "Failed to fetch redesign" },
+          { status: 500 }
+        );
+      }
+      const markdown = await response.text();
+      return NextResponse.json(
+        {
+          ok: true,
+          markdown,
+        },
+        { status: 200 }
+      );
+    } catch (fetchError: any) {
+      clearTimeout(timeoutId);
+
+      if (fetchError.name === "AbortError") {
+        return NextResponse.json(
+          {
+            error:
+              "Request timeout: The external service took too long to respond. Please try again.",
+          },
+          { status: 504 }
+        );
+      }
+      throw fetchError;
+    }
+  } catch (error: any) {
+    if (error.name === "AbortError" || error.message?.includes("timeout")) {
+      return NextResponse.json(
+        {
+          error:
+            "Request timeout: The external service took too long to respond. Please try again.",
+        },
+        { status: 504 }
+      );
+    }
+    return NextResponse.json(
+      { error: error.message || "An error occurred" },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -0,0 +1,161 @@
+@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-geist-sans);
+  --font-mono: var(--font-geist-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.65rem;
+  --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);
+  --radius: 0.625rem;
+  --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;
+  }
+}
+
+.monaco-editor .margin {
+  @apply bg-background!;
+}
+.monaco-editor .monaco-editor-background {
+  @apply bg-background!;
+}
+.monaco-editor .decorationsOverviewRuler {
+  @apply opacity-0!;
+}
+.monaco-editor .view-line {
+  /* @apply bg-primary/50!; */
+}
+.monaco-editor .scroll-decoration {
+  @apply opacity-0!;
+}
+.monaco-editor .cursors-layer .cursor {
+  @apply bg-primary!;
+}
+
+.content-placeholder::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  pointer-events: none;
+  opacity: 0.5;
+  @apply top-5 left-6;
+}
+
+.sp-layout .sp-file-explorer .sp-file-explorer-list .sp-explorer[data-active="true"] {
+  @apply text-indigo-500!;
+}
+
+.sp-layout .sp-stack .sp-tabs .sp-tab-container[aria-selected="true"] .sp-tab-button {
+  @apply text-indigo-500!;
+}
+.sp-layout .sp-stack .sp-tabs .sp-tab-container:has(button:focus) {
+  @apply outline-none! border-none!;
+}

app/layout.tsx

@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/providers/theme";
+import { AuthProvider } from "@/components/providers/session";
+import { Toaster } from "@/components/ui/sonner";
+import { ReactQueryProvider } from "@/components/providers/react-query";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Build your next application | DeepSite",
+  description:
+    "Build your next application with ease and speed by using AI Vibe Coding.",
+  icons: {
+    icon: "/logo.svg",
+    shortcut: "/logo.svg",
+    apple: "/logo.svg",
+    other: {
+      rel: "icon",
+      url: "/logo.svg",
+    },
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <Toaster richColors />
+        <AuthProvider>
+          <ReactQueryProvider>
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="system"
+              enableSystem
+              disableTransitionOnChange
+            >
+              {children}
+            </ThemeProvider>
+          </ReactQueryProvider>
+        </AuthProvider>
+      </body>
+    </html>
+  );
+}

app/new/page.tsx

@@ -0,0 +1,10 @@
+import { AppEditor } from "@/components/editor";
+
+export default async function NewProjectPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ prompt: string }>;
+}) {
+  const { prompt } = await searchParams;
+  return <AppEditor isNew={true} initialPrompt={prompt} />;
+}

app/not-found.tsx

@@ -0,0 +1,17 @@
+import { NotFoundButtons } from "@/components/not-found/buttons";
+import { Navigation } from "@/components/public/navigation";
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen font-sans">
+      <Navigation />
+      <div className="px-6 py-16 max-w-5xl mx-auto text-center">
+        <h1 className="text-5xl font-bold mb-5">Oh no! Page not found.</h1>
+        <p className="text-lg text-muted-foreground mb-8">
+          The page you are looking for does not exist.
+        </p>
+        <NotFoundButtons />
+      </div>
+    </div>
+  );
+}

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

components/ask-ai/ask-ai-landing.tsx

@@ -0,0 +1,66 @@
+"use client";
+import { ArrowUp } from "lucide-react";
+import { useState } from "react";
+import { useInterval, useLocalStorage } from "react-use";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { ProviderType } from "@/lib/type";
+import { Models } from "./models";
+import { MODELS } from "@/lib/providers";
+import { cn } from "@/lib/utils";
+import { AiLoading } from "./loading";
+import { EXAMPLES_OF_PROJECT_SUGGESTIONS } from "@/lib/prompts";
+
+export function AskAiLanding({ className }: { className?: string }) {
+  const [model, setModel] = useState<string>(MODELS[0].value);
+  const [provider, setProvider] = useLocalStorage<ProviderType>(
+    "provider",
+    "auto" as ProviderType
+  );
+  const router = useRouter();
+  const [prompt, setPrompt] = useState<string>("");
+  return (
+    <div
+      className={cn(
+        "dark:bg-[#222222] bg-accent border border-border-muted rounded-xl p-3 block relative",
+        className
+      )}
+    >
+      <textarea
+        id="prompt-input"
+        className="w-full h-full resize-none outline-none text-primary text-sm"
+        placeholder="Ask me anything..."
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            router.push(`/new?prompt=${prompt}`);
+          }
+        }}
+      />
+      <footer className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Models
+            model={model}
+            setModel={setModel}
+            provider={provider as ProviderType}
+            setProvider={setProvider}
+          />
+        </div>
+        <div>
+          <Button
+            size="icon-sm"
+            className="rounded-full!"
+            onClick={() => {
+              router.push(`/new?prompt=${prompt}`);
+            }}
+          >
+            <ArrowUp />
+          </Button>
+        </div>
+      </footer>
+    </div>
+  );
+}

components/ask-ai/ask-ai.tsx

@@ -0,0 +1,162 @@
+"use client";
+import { ArrowUp, Paintbrush, X } from "lucide-react";
+import { useState } from "react";
+import { HiStop } from "react-icons/hi2";
+import { useLocalStorage, useMount } from "react-use";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useGeneration } from "./useGeneration";
+import { File, MobileTabType, ProviderType } from "@/lib/type";
+import { Models } from "./models";
+import { MODELS } from "@/lib/providers";
+import { Redesign } from "./redesign";
+import { Uploader } from "./uploader";
+import { InputMentions } from "./input-mentions";
+
+// todo: send redesignMd to callAi + add it to the prompt
+
+export function AskAI({
+  initialPrompt,
+  className,
+  onToggleMobileTab,
+  files,
+  isNew = false,
+  isHistoryView,
+  projectName = "new",
+}: {
+  initialPrompt?: string;
+  className?: string;
+  files?: File[] | null;
+  onToggleMobileTab?: (tab: MobileTabType) => void;
+  isNew?: boolean;
+  isHistoryView?: boolean;
+  projectName?: string;
+}) {
+  const [prompt, setPrompt] = useState(initialPrompt ?? "");
+  const [model = MODELS[0].value, setModel] = useLocalStorage<string>(
+    "model",
+    MODELS[0].value
+  );
+  const [provider, setProvider] = useLocalStorage<ProviderType>(
+    "provider",
+    "auto" as ProviderType
+  );
+  const [redesignMd, setRedesignMd] = useState<{
+    md: string;
+    url: string;
+  } | null>(null);
+
+  const router = useRouter();
+  const { callAi, isLoading, stopGeneration, audio } =
+    useGeneration(projectName);
+
+  // const messages =
+  //   queryClient.getQueryData<Message[]>(MESSAGES_QUERY_KEY(projectName)) ?? [];
+
+  // const clearMessages = () => {
+  //   queryClient.setQueryData<Message[]>(MESSAGES_QUERY_KEY(projectName), []);
+  //   localStorage.removeItem(`messages-${projectName}`);
+  // };
+
+  const onComplete = () => {
+    onToggleMobileTab?.("right-sidebar");
+  };
+
+  useMount(() => {
+    if (initialPrompt && initialPrompt.trim() !== "" && isNew) {
+      setTimeout(() => {
+        if (isHistoryView) return;
+        callAi({
+          prompt: initialPrompt,
+          model,
+          onComplete,
+          provider,
+        });
+        router.replace("/new");
+      }, 200);
+    }
+  });
+
+  const onSubmit = () => {
+    if (isHistoryView) return;
+    callAi({ prompt, model, onComplete, provider, redesignMd });
+  };
+
+  return (
+    <div
+      className={cn(
+        "dark:bg-[#222222] bg-accent border border-border-muted rounded-xl p-2.5 block relative",
+        className
+      )}
+    >
+      <InputMentions
+        files={files}
+        prompt={prompt}
+        setPrompt={setPrompt}
+        redesignMdUrl={redesignMd?.url?.replace(/(^\w+:|^)\/\//, "")}
+        onSubmit={onSubmit}
+      />
+      <footer className="flex items-center justify-between mt-0">
+        <div className="flex items-center gap-1.5">
+          <Uploader />
+          <Models
+            model={model}
+            setModel={setModel}
+            provider={provider as ProviderType}
+            setProvider={setProvider}
+          />
+          {!files ||
+            (files?.length === 0 &&
+              (redesignMd ? (
+                <Button
+                  size="xs"
+                  variant="indigo"
+                  className="rounded-full! px-2.5!"
+                  onClick={() => setRedesignMd(null)}
+                >
+                  <Paintbrush className="size-3" />
+                  {redesignMd.url?.replace(/(^\w+:|^)\/\//, "")}
+                  <X className="size-3.5" onClick={() => setRedesignMd(null)} />
+                </Button>
+              ) : (
+                <Redesign
+                  onRedesign={(md, url) => {
+                    setRedesignMd({
+                      md,
+                      url,
+                    });
+                  }}
+                />
+              )))}
+        </div>
+        <div>
+          {isLoading ? (
+            <Button
+              size="icon-sm"
+              className="rounded-full!"
+              variant="bordered"
+              onClick={stopGeneration}
+            >
+              <HiStop />
+            </Button>
+          ) : (
+            <Button
+              size="icon-sm"
+              className="rounded-full!"
+              disabled={!prompt.trim() || isLoading || isHistoryView}
+              onClick={onSubmit}
+            >
+              <ArrowUp />
+            </Button>
+          )}
+        </div>
+      </footer>
+      <audio ref={audio} id="audio" className="hidden">
+        <source src="/ding.mp3" type="audio/mpeg" />
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  );
+}

components/ask-ai/context.tsx

@@ -0,0 +1,123 @@
+import { AtSign, Braces, FileCode, FileText, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { File } from "@/lib/type";
+import { cn } from "@/lib/utils";
+
+export const Context = ({
+  files,
+  setFiles,
+}: {
+  files: File[];
+  setFiles: (files: File[]) => void;
+}) => {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+
+  const getFileIcon = (filePath: string, size = "size-3.5") => {
+    if (filePath.endsWith(".css")) {
+      return <Braces className={size} />;
+    } else if (filePath.endsWith(".js")) {
+      return <FileCode className={size} />;
+    } else if (filePath.endsWith(".json")) {
+      return <Braces className={size} />;
+    } else {
+      return <FileText className={size} />;
+    }
+  };
+
+  const getFiles = () => queryClient.getQueryData<File[]>(["files"]) ?? [];
+
+  return (
+    <div className="flex items-center justify-start gap-1 flex-wrap">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button size="xxs" variant={open ? "default" : "bordered"}>
+            <AtSign className="size-3" />
+            Add Context...
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="translate-x-6 space-y-4 min-w-fit rounded-2xl! p-0!"
+        >
+          <main className="p-4">
+            <p className="text-xs text-muted-foreground mb-2.5">
+              Select a file to send as context
+            </p>
+            <div className="max-h-[200px] overflow-y-auto space-y-0.5">
+              {getFiles().length === 0 ? (
+                <div className="text-xs text-muted-foreground">
+                  No files available
+                </div>
+              ) : (
+                <>
+                  <button
+                    onClick={() => {
+                      setFiles([]);
+                      setOpen(false);
+                    }}
+                    className={`cursor-pointer w-full px-2 py-1.5 text-xs text-left rounded-md  hover:bg-accent hover:text-accent-foreground transition-colors ${
+                      files.length === 0
+                        ? "bg-linear-to-r from-indigo-500/20 to-indigo-500/5 text-primary font-medium"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    All files (default)
+                  </button>
+                  {getFiles()?.map((page) => (
+                    <button
+                      key={page.path}
+                      onClick={() => {
+                        if (files.some((f) => f.path === page.path))
+                          setFiles(files.filter((f) => f.path !== page.path));
+                        else setFiles(files ? [...files, page] : [page]);
+                        setOpen(false);
+                      }}
+                      className={`cursor-pointer w-full px-2 py-1.5 text-xs text-left rounded-md hover:bg-accent hover:text-accent-foreground transition-colors flex items-center gap-1.5 ${
+                        files?.some((f) => f.path === page.path)
+                          ? "bg-linear-to-r from-indigo-500/20 to-indigo-500/5 text-primary font-medium"
+                          : "text-muted-foreground"
+                      }`}
+                    >
+                      <span className="shrink-0">
+                        {getFileIcon(page.path, "size-3")}
+                      </span>
+                      <span className="truncate flex-1">{page.path}</span>
+                    </button>
+                  ))}
+                </>
+              )}
+            </div>
+          </main>
+        </PopoverContent>
+      </Popover>
+      {files?.map((file) => (
+        <Button
+          key={file.path}
+          size="xxs"
+          variant="bordered"
+          className="cursor-default!"
+        >
+          {getFileIcon(file.path, "size-3")}
+          {file.path}
+          <span
+            className="opacity-50 hover:opacity-80 cursor-pointer"
+            onClick={() => {
+              setFiles(files.filter((f) => f.path !== file.path));
+            }}
+          >
+            <X className="size-3.5 opacity-50 hover:opacity-80 shrink-0" />
+          </span>
+        </Button>
+      ))}
+    </div>
+  );
+};

components/ask-ai/input-mentions.tsx

@@ -0,0 +1,317 @@
+import { useRef, useState, useEffect } from "react";
+import { useClickAway } from "react-use";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { searchFilesMentions } from "@/actions/mentions";
+import { File } from "@/lib/type";
+import { Braces, FileCode, FileText } from "lucide-react";
+
+export function InputMentions({
+  prompt,
+  files,
+  setPrompt,
+  redesignMdUrl,
+  onSubmit,
+}: {
+  prompt: string;
+  files?: File[] | null;
+  redesignMdUrl?: string;
+  setPrompt: (prompt: string) => void;
+  onSubmit: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [showMentionDropdown, setShowMentionDropdown] = useState(false);
+  const [, setMentionSearch] = useState("");
+  const contentEditableRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [results, setResults] = useState<File[]>([]);
+
+  useClickAway(dropdownRef, () => {
+    setShowMentionDropdown(false);
+  });
+
+  const getTextContent = (element: HTMLElement): string => {
+    let text = "";
+    const childNodes = element.childNodes;
+
+    for (let i = 0; i < childNodes.length; i++) {
+      const node = childNodes[i];
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent || "";
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        if (el.classList.contains("mention-chip")) {
+          text += el.getAttribute("data-mention-id") || "";
+        } else {
+          text += el.textContent || "";
+        }
+      }
+    }
+    return text + "\u0020";
+  };
+
+  const extractPromptWithIds = (): string => {
+    if (!contentEditableRef.current) return "";
+
+    let text = "";
+    const childNodes = contentEditableRef.current.childNodes;
+
+    for (let i = 0; i < childNodes.length; i++) {
+      const node = childNodes[i];
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent || "";
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        if (el.classList.contains("mention-chip")) {
+          text += el.getAttribute("data-mention-id") || "";
+        } else {
+          text += el.textContent || "";
+        }
+      }
+    }
+    return text;
+  };
+
+  const shouldDetectMention = (): {
+    detect: boolean;
+    textBeforeCursor: string;
+  } => {
+    const selection = window.getSelection();
+    if (!selection || !contentEditableRef.current) {
+      return { detect: false, textBeforeCursor: "" };
+    }
+
+    const range = selection.getRangeAt(0);
+    const node = range.startContainer;
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as HTMLElement;
+      if (element.classList?.contains("mention-chip")) {
+        return { detect: false, textBeforeCursor: "" };
+      }
+    }
+
+    if (node.parentElement?.classList?.contains("mention-chip")) {
+      return { detect: false, textBeforeCursor: "" };
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      const textContent = node.textContent || "";
+      const cursorOffset = range.startOffset;
+      const textBeforeCursor = textContent.substring(0, cursorOffset);
+
+      const lastAtIndex = textBeforeCursor.lastIndexOf("@");
+      if (lastAtIndex !== -1) {
+        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
+        if (!textAfterAt.includes(" ")) {
+          return { detect: true, textBeforeCursor: textAfterAt };
+        }
+      }
+    }
+
+    return { detect: false, textBeforeCursor: "" };
+  };
+
+  const handleInput = async () => {
+    if (!contentEditableRef.current) return;
+    const text = getTextContent(contentEditableRef.current);
+    if (text.trim() === "") {
+      contentEditableRef.current.innerHTML = "";
+    }
+    setPrompt(text);
+
+    const { detect, textBeforeCursor } = shouldDetectMention();
+
+    if (detect && files && files?.length > 0) {
+      setMentionSearch(textBeforeCursor);
+      setShowMentionDropdown(true);
+      const files = queryClient.getQueryData<File[]>(["files"]) ?? [];
+      const results = await searchFilesMentions(textBeforeCursor, files);
+      setResults(results);
+    } else {
+      setShowMentionDropdown(false);
+    }
+  };
+
+  const createMentionChipElement = (mentionId: string): HTMLSpanElement => {
+    const mentionChip = document.createElement("span");
+
+    const baseClasses =
+      "mention-chip inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium";
+    const typeClasses =
+      "bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20 dark:text-indigo-400";
+
+    mentionChip.className = `${baseClasses} ${typeClasses}`;
+    mentionChip.contentEditable = "false";
+    mentionChip.setAttribute("data-mention-id", `file:/${mentionId}`);
+    mentionChip.textContent = `@${mentionId}`;
+
+    return mentionChip;
+  };
+
+  const insertMention = (mentionId: string) => {
+    if (!contentEditableRef.current) return;
+
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+
+    const range = selection.getRangeAt(0);
+    const textNode = range.startContainer;
+
+    if (textNode.nodeType !== Node.TEXT_NODE) return;
+
+    const textContent = textNode.textContent || "";
+    const cursorOffset = range.startOffset;
+
+    const textBeforeCursor = textContent.substring(0, cursorOffset);
+    const lastAtIndex = textBeforeCursor.lastIndexOf("@");
+
+    if (lastAtIndex !== -1) {
+      const mentionChip = createMentionChipElement(mentionId);
+
+      const beforeText = textContent.substring(0, lastAtIndex);
+      const afterText = textContent.substring(cursorOffset);
+      const parent = textNode.parentNode;
+      if (!parent) return;
+
+      const beforeNode = beforeText
+        ? document.createTextNode(beforeText)
+        : null;
+      const spaceNode = document.createTextNode("\u0020");
+      const afterNode = afterText ? document.createTextNode(afterText) : null;
+
+      if (beforeNode) {
+        parent.insertBefore(beforeNode, textNode);
+      }
+      parent.insertBefore(mentionChip, textNode);
+      parent.insertBefore(spaceNode, textNode);
+      if (afterNode) {
+        parent.insertBefore(afterNode, textNode);
+      }
+
+      parent.removeChild(textNode);
+
+      const newRange = document.createRange();
+      if (afterNode) {
+        newRange.setStart(afterNode, 0);
+      } else {
+        newRange.setStartAfter(spaceNode);
+      }
+      newRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+
+      const newText = getTextContent(contentEditableRef.current);
+      setPrompt(newText);
+      setShowMentionDropdown(false);
+      setMentionSearch("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!prompt || prompt.trim() === "") return;
+
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const promptWithIds = extractPromptWithIds();
+      setPrompt(promptWithIds);
+      onSubmit();
+
+      if (contentEditableRef.current) {
+        contentEditableRef.current.innerHTML = "";
+      }
+      setPrompt("");
+      setShowMentionDropdown(false);
+    } else if (e.key === "Escape") {
+      setShowMentionDropdown(false);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      contentEditableRef.current &&
+      prompt === "" &&
+      contentEditableRef.current.innerHTML !== ""
+    ) {
+      contentEditableRef.current.innerHTML = "";
+    }
+  }, [prompt]);
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text/plain");
+    document.execCommand("insertText", false, text);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        id="prompt-input"
+        ref={contentEditableRef}
+        contentEditable
+        className="pb-2 min-h-10 max-h-[130px] overflow-y-auto w-full h-full resize-none outline-none text-primary text-sm bg-transparent empty:before:block empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground empty:before:pointer-events-none"
+        data-placeholder={
+          redesignMdUrl
+            ? `Ask me anything about ${redesignMdUrl}...`
+            : files && files.length > 0
+            ? "Ask me anything. Type @ to mention a file..."
+            : "Ask me anything..."
+        }
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+        suppressContentEditableWarning
+      ></div>
+      {showMentionDropdown && (
+        <div
+          ref={dropdownRef}
+          className="absolute bottom-full mb-2 left-0 z-50 bg-background border border-border rounded-lg shadow-lg min-w-[250px] animate-in fade-in slide-in-from-bottom-2 duration-200"
+        >
+          <div className="text-xs text-muted-foreground/60 px-2 py-2">
+            {results?.length > 0 && (
+              <ul>
+                {results.map((file) => (
+                  <MentionResult
+                    key={file.path}
+                    file={file}
+                    onSelect={() => insertMention(file.path)}
+                  />
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const getFileIcon = (filePath: string, size = "size-3.5") => {
+  if (filePath.endsWith(".css")) {
+    return <Braces className={size} />;
+  } else if (filePath.endsWith(".js")) {
+    return <FileCode className={size} />;
+  } else if (filePath.endsWith(".json")) {
+    return <Braces className={size} />;
+  } else {
+    return <FileText className={size} />;
+  }
+};
+
+function MentionResult({
+  file,
+  onSelect,
+}: {
+  file: File;
+  onSelect: () => void;
+}) {
+  return (
+    <li
+      className="flex items-center justify-start gap-2 transition-all duration-200 hover:bg-linear-to-r from-indigo-500/40 to-indigo-500/5 text-primary font-medium rounded-lg px-2 py-2 cursor-pointer select-none"
+      onClick={onSelect}
+    >
+      {getFileIcon(file.path, "size-3")}
+      {file.path}
+    </li>
+  );
+}

components/ask-ai/loading.tsx

@@ -0,0 +1,35 @@
+"use client";
+import Loading from "@/components/loading";
+
+export const AiLoading = ({
+  text = "AI Assistant is thinking...",
+  showCircle = true,
+  className,
+}: {
+  text?: string;
+  showCircle?: boolean;
+  className?: string;
+}) => {
+  return (
+    <div className={`flex items-center justify-start gap-2 ${className}`}>
+      {showCircle && <Loading overlay={false} className="size-4! opacity-50" />}
+      <p className="text-muted-foreground text-sm">
+        <span className="inline-flex">
+          {text.split("").map((char, index) => (
+            <span
+              key={index}
+              className="bg-linear-to-r from-muted-foreground to-primary 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>
+  );
+};

components/ask-ai/models.tsx

@@ -0,0 +1,210 @@
+import {
+  BrainIcon,
+  ChevronDown,
+  DollarSign,
+  StarsIcon,
+  Zap,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ProviderType } from "@/lib/type";
+import { MODELS } from "@/lib/providers";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export function Models({
+  model,
+  setModel,
+  provider,
+  setProvider,
+}: {
+  model: string;
+  setModel: (model: string) => void;
+  provider: ProviderType;
+  setProvider: (provider: ProviderType) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const formattedModels = useMemo(() => {
+    const lists: ((typeof MODELS)[0] | { isCategory: true; name: string })[] =
+      [];
+    const keys = new Set<string>();
+    MODELS.forEach((model) => {
+      if (!keys.has(model.companyName)) {
+        lists.push({
+          isCategory: true,
+          name: model.companyName,
+          logo: model.logo,
+        });
+        keys.add(model.companyName);
+      }
+      lists.push(model);
+    });
+    return lists;
+  }, []);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant={open ? "default" : "bordered"}
+          size="xs"
+          className="flex items-center gap-1 rounded-full! px-2.5!"
+        >
+          <span className="max-w-48 truncate">
+            {model.split("/").pop()?.toLowerCase()}
+          </span>
+          <ChevronDown className="size-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="translate-x-6 rounded-2xl! p-0! bg-accent! border-border-muted! min-w-fit text-center overflow-hidden">
+        <header className="bg-linear-to-b from-indigo-500/15 dark:from-indigo-500/40 to-accent p-6">
+          <div className="flex items-center justify-center -space-x-4 mb-3">
+            <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              💬
+            </div>
+            <div className="size-11 rounded-full bg-yellow-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+              🧠
+            </div>
+            <div className="size-9 rounded-full bg-green-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              🤖
+            </div>
+          </div>
+          <p className="text-xl font-semibold text-primary">
+            Choose your AI model
+          </p>
+          <p className="text-sm text-muted-foreground mt-1.5">
+            Select the AI model that best fits your needs.
+          </p>
+        </header>
+        <main className="space-y-4 px-6 pb-6">
+          <div>
+            <Select defaultValue={model} onValueChange={setModel}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a model" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {formattedModels.map(
+                    (
+                      item:
+                        | (typeof MODELS)[0]
+                        | { isCategory: true; name: string }
+                    ) => {
+                      if ("isCategory" in item) {
+                        return (
+                          <SelectLabel
+                            key={item.name}
+                            className="flex items-center gap-1"
+                          >
+                            {item.name}
+                          </SelectLabel>
+                        );
+                      }
+                      const {
+                        value,
+                        label,
+                        isNew = false,
+                        isBestSeller = false,
+                      } = item;
+                      return (
+                        <SelectItem key={value} value={value} className="">
+                          {value.split("/").pop() || label}
+                          {isNew && (
+                            <span className="text-xs bg-indigo-500 dark:bg-indigo-500/20 text-primary-foreground dark:text-indigo-500 rounded-full px-1.5 py-0.5">
+                              New
+                            </span>
+                          )}
+                          {isBestSeller && (
+                            <StarsIcon className="size-3.5 text-yellow-500 fill-yellow-500" />
+                          )}
+                        </SelectItem>
+                      );
+                    }
+                  )}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Provider mode:</p>
+            <div
+              role="radiogroup"
+              aria-label="Provider mode"
+              className="flex w-fit items-center gap-1.5"
+            >
+              {(
+                [
+                  { value: "cheapest", icon: DollarSign, color: "emerald" },
+                  {
+                    value: "auto",
+                    icon: BrainIcon,
+                    color: "indigo",
+                    name: "Smartest",
+                  },
+                  { value: "fastest", icon: Zap, color: "amber" },
+                ] as const
+              ).map(
+                ({
+                  value,
+                  icon: Icon,
+                  color,
+                  name,
+                }: {
+                  value: string;
+                  icon: React.ElementType;
+                  color: string;
+                  name?: string;
+                }) => (
+                  <div
+                    key={value}
+                    role="radio"
+                    aria-checked={provider === value}
+                    tabIndex={0}
+                    onClick={() => setProvider(value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setProvider(value);
+                      }
+                    }}
+                    className={cn(
+                      "inline-flex items-center gap-1.5 h-7 px-2.5 text-xs font-medium border border-border rounded-md cursor-pointer transition-colors select-none",
+                      "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      provider === value && [
+                        "bg-transparent",
+                        color === "emerald" &&
+                          "[&_svg]:fill-emerald-500 [&_svg]:stroke-emerald-500 bg-emerald-500/10! border-emerald-500/10! text-emerald-500!",
+                        color === "indigo" &&
+                          "[&_svg]:fill-indigo-500 [&_svg]:stroke-indigo-500 bg-indigo-500/10! border-indigo-500/10! text-indigo-500!",
+                        color === "amber" &&
+                          "[&_svg]:fill-amber-500 [&_svg]:stroke-amber-500 bg-amber-500/10! border-amber-500/10! text-amber-500!",
+                      ]
+                    )}
+                  >
+                    <Icon className="size-3.5" />
+                    {name ?? value.charAt(0).toUpperCase() + value.slice(1)}
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </main>
+      </PopoverContent>
+    </Popover>
+  );
+}

components/ask-ai/redesign.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import Loading from "@/components/loading";
+
+export function Redesign({
+  onRedesign,
+}: {
+  onRedesign: (md: string, url: string) => void;
+}) {
+  const [url, setUrl] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const checkIfUrlIsValid = (url: string) => {
+    const urlPattern = new RegExp(
+      /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
+      "i"
+    );
+    return urlPattern.test(url);
+  };
+
+  const handleClick = async () => {
+    setError(null);
+    if (isLoading) return;
+    if (!url) {
+      toast.error("Please enter a URL.");
+      return;
+    }
+    if (!checkIfUrlIsValid(url)) {
+      toast.error("Please enter a valid URL.");
+      return;
+    }
+    setIsLoading(true);
+    const response = await fetch("/api/redesign", {
+      method: "PUT",
+      body: JSON.stringify({ url: url.trim() }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then(async (response) => {
+        if (response?.ok) {
+          const data = await response.json();
+          return data;
+        }
+      })
+      .catch((error) => {
+        setError(error.message);
+      });
+    if (response.ok) {
+      onRedesign(response.markdown, url);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <form>
+        <PopoverTrigger asChild>
+          <Button
+            size="xs"
+            variant={open ? "default" : "bordered"}
+            className="rounded-full! px-2.5!"
+          >
+            <Paintbrush className="size-3.5" />
+            Redesign
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="rounded-2xl! p-0! bg-accent! border-border-muted! min-w-xs text-center overflow-hidden"
+        >
+          <header className="bg-linear-to-b from-indigo-500/15 dark:from-indigo-500/40 to-accent p-6">
+            <div className="flex items-center justify-center -space-x-4 mb-3">
+              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                🎨
+              </div>
+              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                🥳
+              </div>
+              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                💎
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-primary">
+              Redesign your Site!
+            </p>
+            <p className="text-sm text-muted-foreground mt-1.5">
+              Try our new Redesign feature to give your site a fresh look.
+            </p>
+          </header>
+          <main className="space-y-4 p-6">
+            {error && <p className="text-sm text-red-500">{error}</p>}
+            <div>
+              <p className="text-sm text-muted-foreground mb-2">
+                Enter your website URL to get started:
+              </p>
+              <Input
+                type="text"
+                placeholder="https://example.com"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onBlur={(e) => {
+                  const inputUrl = e.target.value.trim();
+                  if (!inputUrl) {
+                    setUrl("");
+                    return;
+                  }
+                  if (!checkIfUrlIsValid(inputUrl)) {
+                    toast.error("Please enter a valid URL.");
+                    return;
+                  }
+                  setUrl(inputUrl);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleClick();
+                  }
+                }}
+              />
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground mb-2">
+                Then, let&apos;s redesign it!
+              </p>
+              <Button onClick={handleClick} className="relative w-full">
+                {isLoading ? (
+                  <>
+                    <Loading
+                      overlay={false}
+                      className="ml-2 size-4 animate-spin text-primary-foreground"
+                    />
+                    Fetching your site...
+                  </>
+                ) : (
+                  <>
+                    Redesign <Paintbrush className="size-4" />
+                  </>
+                )}
+              </Button>
+            </div>
+          </main>
+        </PopoverContent>
+      </form>
+    </Popover>
+  );
+}

components/ask-ai/uploader.tsx

@@ -0,0 +1,39 @@
+import { Paperclip } from "lucide-react";
+import { useState } from "react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+// todo: implement the uploader component
+
+export const Uploader = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="flex items-center justify-start gap-1 flex-wrap">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            size="icon-xs"
+            variant={open ? "default" : "bordered"}
+            className="rounded-full!"
+          >
+            <Paperclip className="size-3" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="space-y-4 min-w-fit rounded-2xl! p-0!"
+        >
+          <main className="p-4">
+            <p className="text-xs text-muted-foreground mb-2.5">
+              Upload a file
+            </p>
+          </main>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};

components/ask-ai/useGeneration.ts

@@ -0,0 +1,394 @@
+"use client";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRef } from "react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { v4 as uuidv4 } from "uuid";
+
+import { formatResponse } from "@/lib/format";
+import { File, Message, MessageActionType, ProviderType } from "@/lib/type";
+import { getContextFilesFromPrompt } from "@/lib/utils";
+import { useLocalStorage } from "react-use";
+
+const MESSAGES_QUERY_KEY = (projectName: string) =>
+  ["messages", projectName] as const;
+
+export const useGeneration = (projectName: string) => {
+  const router = useRouter();
+  const audio = useRef<HTMLAudioElement>(null);
+  const queryClient = useQueryClient();
+  const abortController = useRef<AbortController | null>(null);
+  const [, setStoredMessages, clearStoredMessages] = useLocalStorage<Message[]>(
+    `messages-${projectName}`,
+    []
+  );
+
+  const { data: isLoading } = useQuery({
+    queryKey: ["ai.generation.isLoading"],
+    queryFn: () => false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    staleTime: Infinity,
+  });
+
+  const setIsLoading = (isLoading: boolean) => {
+    queryClient.setQueryData(["ai.generation.isLoading"], isLoading);
+  };
+
+  const getFiles = () => queryClient.getQueryData<File[]>(["files"]) ?? [];
+  const setFiles = (newFiles: File[]) => {
+    queryClient.setQueryData<File[]>(["files"], (oldFiles: File[] = []) => {
+      const currentFiles = oldFiles.filter(
+        (file) => !newFiles.some((f) => f.path === file.path)
+      );
+      return [...currentFiles, ...newFiles];
+    });
+  };
+
+  const getMessages = () =>
+    queryClient.getQueryData<Message[]>(
+      MESSAGES_QUERY_KEY(projectName ?? "new")
+    ) ?? [];
+  const addMessage = (message: Omit<Message, "id">) => {
+    const id = uuidv4();
+    const key = MESSAGES_QUERY_KEY(projectName ?? "new");
+    queryClient.setQueryData<Message[]>(key, (oldMessages = []) => {
+      const newMessages = [...oldMessages, { ...message, id }];
+      if (projectName !== "new") {
+        localStorage.setItem(
+          `messages-${projectName}`,
+          JSON.stringify(newMessages)
+        );
+      }
+      return newMessages;
+    });
+    return id;
+  };
+
+  const updateLastMessage = (content: string, files?: File[]) => {
+    queryClient.setQueryData<Message[]>(
+      MESSAGES_QUERY_KEY(projectName),
+      (oldMessages = []) => {
+        const newMessages = [
+          ...oldMessages.slice(0, -1),
+          {
+            ...oldMessages[oldMessages.length - 1],
+            content,
+            isThinking: false,
+            files: files?.map((file) => file.path),
+          },
+        ];
+        if (projectName !== "new") {
+          setStoredMessages(newMessages);
+        }
+        return newMessages;
+      }
+    );
+  };
+
+  const updateMessage = (messageId: string, message: Partial<Message>) => {
+    const key = MESSAGES_QUERY_KEY(projectName ?? "new");
+    const currentMessages = queryClient.getQueryData<Message[]>(key);
+    if (!currentMessages) return;
+    const index = currentMessages.findIndex((m) => m.id === messageId);
+    if (index === -1) return;
+    const newMessages = [
+      ...currentMessages.slice(0, index),
+      { ...currentMessages[index], ...message },
+      ...currentMessages.slice(index + 1),
+    ];
+    if (projectName !== "new") {
+      setStoredMessages(newMessages);
+    }
+    queryClient.setQueryData<Message[]>(key, newMessages);
+  };
+
+  const storeMessages = async (newProjectName: string) => {
+    return new Promise((resolve) => {
+      const currentMessages = queryClient.getQueryData<Message[]>(
+        MESSAGES_QUERY_KEY("new")
+      );
+      localStorage.setItem(
+        `messages-${newProjectName}`,
+        JSON.stringify(currentMessages)
+      );
+      queryClient.setQueryData<Message[]>(
+        MESSAGES_QUERY_KEY(newProjectName),
+        currentMessages
+      );
+      setTimeout(() => resolve(true), 100);
+    });
+  };
+
+  const createProject = async (
+    files: File[],
+    projectTitle: string,
+    indexMessage: string,
+    prompt: string
+  ) => {
+    updateMessage(indexMessage, {
+      actions: [
+        {
+          label: "Publishing on Hugging Face...",
+          variant: "default",
+          loading: true,
+          type: MessageActionType.PUBLISH_PROJECT,
+        },
+      ],
+    });
+    try {
+      const response = await fetch("/api/projects", {
+        method: "POST",
+        body: JSON.stringify({
+          projectTitle,
+          files,
+          prompt,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }).then(async (response) => {
+        if (response.ok) {
+          const data = await response.json();
+          return data;
+        }
+        throw new Error("Failed to publish project");
+      });
+
+      if (response.repoUrl) {
+        toast.success("Project has been published, build in progress...");
+        updateMessage(indexMessage, {
+          actions: [
+            {
+              label: "See Live preview",
+              variant: "default",
+              type: MessageActionType.SEE_LIVE_PREVIEW,
+            },
+          ],
+        });
+        storeMessages(response.repoUrl).then(() => {
+          router.push(`/${response.repoUrl}`);
+        });
+      }
+    } catch (error) {
+      toast.error("Failed to publish project");
+      updateMessage(indexMessage, {
+        actions: [
+          {
+            label: "Publish on Hugging Face",
+            variant: "default",
+            type: MessageActionType.PUBLISH_PROJECT,
+            projectTitle,
+            prompt,
+          },
+        ],
+      });
+    }
+  };
+
+  const callAi = async ({
+    prompt,
+    model,
+    onComplete,
+    provider = "auto",
+    redesignMd,
+  }: {
+    prompt: string;
+    model: string;
+    redesignMd?: {
+      url: string;
+      md: string;
+    } | null;
+    onComplete: () => void;
+    provider?: ProviderType;
+  }) => {
+    setIsLoading(true);
+    const messages = getMessages();
+    const files = getFiles();
+    const filesToUse = await getContextFilesFromPrompt(prompt, files);
+    const previousMessages = [...messages]?.filter(
+      (message) => !message.isAutomated || !message.isAborted
+    );
+    addMessage({
+      role: "user",
+      content: prompt,
+      createdAt: new Date(),
+    });
+    addMessage({
+      role: "assistant",
+      isThinking: true,
+      createdAt: new Date(),
+      model,
+    });
+
+    const isFollowUp = files?.length > 0;
+    abortController.current = new AbortController();
+
+    const request = await fetch("/api/ask", {
+      method: "POST",
+      body: JSON.stringify({
+        prompt,
+        model,
+        files: filesToUse,
+        previousMessages,
+        provider,
+        redesignMd,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      ...(abortController.current
+        ? { signal: abortController.current.signal }
+        : {}),
+    });
+
+    const currentMessages = getMessages();
+
+    if (!request.ok) {
+      const lastMessageId = currentMessages[currentMessages.length - 1].id;
+      updateMessage(lastMessageId, {
+        isThinking: false,
+        isAborted: true,
+        content: `Error: Failed to connect to AI service`,
+      });
+      setIsLoading(false);
+      return;
+    }
+
+    if (request && request.body) {
+      const reader = request.body.getReader();
+      const decoder = new TextDecoder();
+      let completeResponse = "";
+      const read = async () => {
+        const { done, value } = await reader.read();
+        if (done) {
+          audio.current?.play();
+          const files = getFiles();
+          const {
+            messageContent,
+            files: newFiles,
+            projectTitle,
+          } = formatResponse(completeResponse, files ?? []);
+          updateLastMessage(messageContent, newFiles);
+          if (newFiles && newFiles.length > 0) {
+            setFiles(newFiles);
+            onComplete();
+            if (projectName === "new") {
+              addMessage({
+                role: "assistant",
+                content:
+                  "I've finished the generation. Now you can decide to publish the project on Hugging Face to share it!",
+                createdAt: new Date(),
+                isAutomated: true,
+                actions: [
+                  {
+                    label: "Publish on Hugging Face",
+                    variant: "default",
+                    type: MessageActionType.PUBLISH_PROJECT,
+                    prompt,
+                    projectTitle,
+                  },
+                ],
+              });
+            } else {
+              const response = await fetch(
+                `/api/projects/${projectName.split("/")[1]}`,
+                {
+                  method: "PUT",
+                  body: JSON.stringify({
+                    files: newFiles,
+                    prompt,
+                  }),
+                  headers: {
+                    "Content-Type": "application/json",
+                  },
+                }
+              ).then(async (response) => {
+                if (response.ok) {
+                  const data = await response.json();
+                  return data;
+                }
+              });
+              if (response.success) {
+                toast.success("Project has been updated");
+              } else {
+                toast.error("Failed to update project");
+              }
+            }
+          }
+
+          setIsLoading(false);
+          return;
+        }
+        // if (abortController.current?.signal.aborted) {
+        //   toast.error("Generation aborted");
+        //   setIsLoading(false);
+        //   return;
+        // }
+        const chunk = decoder.decode(value, { stream: true });
+        completeResponse += chunk;
+
+        if (completeResponse.includes("__ERROR__:")) {
+          const errorMatch = completeResponse.match(/__ERROR__:(.+)/);
+          if (errorMatch) {
+            try {
+              const errorData = JSON.parse(errorMatch[1]);
+              if (errorData.isError) {
+                const lastMessageId =
+                  currentMessages[currentMessages.length - 1].id;
+                updateMessage(lastMessageId, {
+                  isThinking: false,
+                  isAborted: true,
+                  content: `Error: ${errorData.messageError}`,
+                });
+                setIsLoading(false);
+                return;
+              }
+            } catch (e) {
+              console.error("Failed to parse error message:", e);
+            }
+          }
+        }
+
+        const files = getFiles();
+        const { messageContent, files: newFiles } = formatResponse(
+          completeResponse,
+          files ?? []
+        );
+        if (messageContent) updateLastMessage(messageContent);
+        if (newFiles && newFiles.length > 0) {
+          if (!isFollowUp) {
+            setFiles(newFiles);
+          }
+          updateLastMessage(messageContent, newFiles);
+        }
+        read();
+      };
+      return await read();
+    }
+  };
+
+  const stopGeneration = () => {
+    if (abortController.current) {
+      abortController.current.abort();
+      abortController.current = null;
+      setIsLoading(false);
+      const currentMessages = getMessages();
+      const lastMessageId = currentMessages[currentMessages.length - 1].id;
+      updateMessage(lastMessageId, {
+        isAborted: true,
+        isThinking: false,
+      });
+    }
+  };
+
+  return {
+    callAi,
+    isLoading,
+    stopGeneration,
+    files: getFiles(),
+    createProject,
+    audio,
+  };
+};

components/chat/index.tsx

@@ -0,0 +1,315 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useSession } from "next-auth/react";
+import { cn } from "@/lib/utils";
+import { ChevronRight, ExternalLink } from "lucide-react";
+import { useEffect, useRef } from "react";
+import Markdown from "react-markdown";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatDistanceToNow } from "date-fns";
+import { SpaceEntry } from "@huggingface/hub";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { useChat } from "./useChat";
+import { AiLoading } from "../ask-ai/loading";
+import Loading from "../loading";
+import { useGeneration } from "../ask-ai/useGeneration";
+import { MessageAction, MessageActionType, File } from "@/lib/type";
+import { Button } from "../ui/button";
+import { getFileIcon } from "../ask-ai/input-mentions";
+
+export function AppEditorChat({
+  isNew,
+  projectName,
+  onSelectFile,
+}: {
+  isNew?: boolean;
+  projectName?: string;
+  onSelectFile: (file: string) => void;
+}) {
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+  const chatProjectName = isNew ? "new" : projectName ?? "new";
+  const { messages } = useChat(chatProjectName);
+  const { isLoading, createProject } = useGeneration(chatProjectName);
+
+  const project = queryClient.getQueryData<SpaceEntry>(["project"]);
+  const files = queryClient.getQueryData<File[]>(["files"]) ?? [];
+
+  const handleShowLastFile = (files?: string[]) => {
+    if (files && files.length > 0) {
+      const lastGeneratedFile = files[files.length - 1];
+      if (lastGeneratedFile) {
+        onSelectFile?.(lastGeneratedFile);
+      }
+    }
+  };
+  const handleActions = (action: MessageAction, messageId: string) => {
+    if (!action) return;
+    switch (action.type) {
+      case MessageActionType.PUBLISH_PROJECT:
+        return createProject(
+          files ?? [],
+          action.projectTitle ?? "",
+          messageId,
+          action.prompt ?? ""
+        );
+      case MessageActionType.SEE_LIVE_PREVIEW:
+        return window.open(
+          `https://huggingface.co/spaces/${project?.name}`,
+          "_blank"
+        );
+    }
+  };
+
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <div ref={chatContainerRef} className="grow px-2 overflow-y-auto pb-3">
+      {isNew ? (
+        <p className="text-xs text-muted-foreground text-center mb-3 bg-accent rounded-md mx-auto w-fit px-2 py-1">
+          Start a new conversation with the AI
+        </p>
+      ) : (
+        <p className="text-xs text-muted-foreground text-center mb-3 bg-accent rounded-md mx-auto w-fit px-2 py-1">
+          Your last conversation has not been restored.
+        </p>
+      )}
+      <div className="grid grid-cols-1 gap-6 w-full">
+        {messages.map((message, id) => (
+          <div
+            key={id}
+            className={cn(
+              "flex items-center justify-start gap-2 flex-1",
+              message.role === "user"
+                ? "flex-row-reverse text-right"
+                : "flex-row"
+            )}
+          >
+            <Avatar className="size-4">
+              <AvatarImage
+                src={message.role === "user" ? session?.user?.image ?? "" : ""}
+                alt="DeepSite"
+                className="size-4"
+              />
+              <AvatarFallback
+                className={cn(
+                  message.role === "assistant"
+                    ? "bg-linear-to-br from-indigo-500 to-emerald-500"
+                    : ""
+                )}
+              >
+                {message.role === "user"
+                  ? session?.user?.name?.charAt(0) ?? ""
+                  : ""}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col max-w-[90%]">
+              <div
+                className={cn(
+                  "whitespace-pre-line text-sm wrap-break-word text-muted-foreground",
+                  message.role === "assistant"
+                    ? "-space-y-2 min-w-[60px] border border-border bg-linear-to-br from-muted px-4 py-3.5 rounded-xl"
+                    : ""
+                )}
+              >
+                <Markdown
+                  components={{
+                    strong: ({ children }) => (
+                      <b className="font-medium text-primary">{children}</b>
+                    ),
+                    code: ({ className, children }) => {
+                      const isCodeBlock = className?.startsWith("language-");
+                      const language = className?.replace("language-", "");
+                      if (isCodeBlock) {
+                        return (
+                          <SyntaxHighlighter
+                            language={language}
+                            style={dracula}
+                            className="m-0! text-xs! rounded-md!"
+                          >
+                            {String(children).trim()}
+                          </SyntaxHighlighter>
+                        );
+                      }
+
+                      return (
+                        <code className="font-mono bg-indigo-500/10 text-indigo-500 text-[10px] px-1.5 py-0.5 rounded-md">
+                          {children}
+                        </code>
+                      );
+                    },
+                    ul: ({ children }) => (
+                      <ul className="list-inside m-0! p-0! flex flex-col gap-1 list-disc">
+                        {children}
+                      </ul>
+                    ),
+                    ol: ({ children }) => (
+                      <ol className="list-inside m-0! p-0! flex flex-col gap-1 list-decimal">
+                        {children}
+                      </ol>
+                    ),
+                    li: ({ children }) => (
+                      <li className="text-muted-foreground">{children}</li>
+                    ),
+                    a: ({ children, href }) => (
+                      <a
+                        href={href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-blue-500 underline inline-flex items-center gap-0.5"
+                      >
+                        <ExternalLink className="size-3" />
+                        {children}
+                      </a>
+                    ),
+                    pre: ({ children }) => <>{children}</>,
+                    p: ({ children }) => {
+                      if (
+                        typeof children === "string" &&
+                        String(children).includes("file:/")
+                      ) {
+                        const parts = children.split(/(file:\/\S+)/g);
+                        return (
+                          <p>
+                            {parts.map((part, index) =>
+                              part.startsWith("file:/") ? (
+                                <span
+                                  key={index}
+                                  className="inline-flex w-fit items-center justify-center gap-1 font-mono px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20 dark:text-indigo-400"
+                                >
+                                  {getFileIcon(part, "size-2.5")}
+                                  {part.replace("file:/", "")}
+                                </span>
+                              ) : (
+                                part
+                              )
+                            )}
+                          </p>
+                        );
+                      }
+                      return <p>{children}</p>;
+                    },
+                  }}
+                >
+                  {message.content}
+                </Markdown>
+                {message.isThinking && (
+                  <AiLoading showCircle={false} className="opacity-70" />
+                )}
+                {message.isAborted && (
+                  <p
+                    className={cn(
+                      "text-[10px] text-muted-foreground font-mono bg-muted-foreground/10 rounded-md px-2 py-1 w-fit",
+                      message.content ? "mt-5" : ""
+                    )}
+                  >
+                    The request has been aborted due to an error OR the user has
+                    stopped the generation.
+                  </p>
+                )}
+              </div>
+              {message.model && message.createdAt && (
+                <div className="flex items-center justify-between">
+                  <p className="text-xs text-muted-foreground mt-1.5 pl-1">
+                    via{" "}
+                    <code className="font-mono bg-accent text-muted-foreground text-[10px] px-1.5 py-0.5 rounded-md">
+                      {message.model}
+                    </code>
+                  </p>
+                  {!message.isThinking && (
+                    <p className="text-[10px] text-muted-foreground/70 mt-1.5 pl-1">
+                      {formatDistanceToNow(message.createdAt, {
+                        addSuffix: true,
+                      })}
+                    </p>
+                  )}
+                </div>
+              )}
+              {message.files && message.files.length > 0 && (
+                <div className="bg-accent px-3 py-2 rounded-lg w-fit mt-2.5">
+                  <div className="flex items-center gap-2">
+                    {isLoading &&
+                    messages[messages.length - 1].id === message.id ? (
+                      <>
+                        <Loading
+                          overlay={false}
+                          className="size-3! opacity-50"
+                        />
+                        <p className="font-medium text-xs text-muted-foreground">
+                          {isNew ? "Creating" : "Editing"}{" "}
+                          <FileCode
+                            file={message.files[message.files.length - 1]}
+                          />
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <p className="font-medium text-xs text-muted-foreground">
+                          {isNew ? "Created" : "Edited"}{" "}
+                          <FileCode
+                            file={message.files[message.files.length - 1]}
+                          />
+                          {message.files.length > 1 && (
+                            <span className="text-[10px] text-muted-foreground ml-1 font-normal">
+                              (+ {message.files.length - 1} files)
+                            </span>
+                          )}
+                        </p>
+                        <Button
+                          size="icon-xs"
+                          variant="transparent"
+                          className="cursor-pointer size-4"
+                          onClick={() => handleShowLastFile(message.files)}
+                        >
+                          <ChevronRight className="size-3.5 text-muted-foreground/60" />
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              )}
+              {message.actions &&
+                message.actions.length > 0 &&
+                messages.length - 1 === id && (
+                  <div className="flex items-center gap-2 mt-2.5">
+                    {message.actions.map((action, id) => (
+                      <Button
+                        key={id}
+                        size="xs"
+                        disabled={action.disabled ?? action.loading}
+                        variant={action.variant ?? "secondary"}
+                        onClick={() => handleActions(action, message.id)}
+                      >
+                        {action.loading && (
+                          <Loading
+                            className={`size-3! opacity-50 ${
+                              action.variant === "default" ? "text-white!" : ""
+                            }`}
+                            overlay={false}
+                          />
+                        )}
+                        {action.label}
+                      </Button>
+                    ))}
+                  </div>
+                )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const FileCode = ({ file }: { file: string }) => (
+  <code className="font-mono bg-accent text-muted-foreground border border-border-muted rounded text-[10px] px-1 py-0.5">
+    {file}
+  </code>
+);

components/chat/useChat.ts

@@ -0,0 +1,121 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useLocalStorage } from "react-use";
+import { useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import { File, Message } from "@/lib/type";
+
+const MESSAGES_QUERY_KEY = (projectName: string) =>
+  ["messages", projectName] as const;
+const DEFAULT_FIRST_MESSAGE = (projectName: string): Message[] => {
+  if (projectName === "new") {
+    return [
+      {
+        id: uuidv4(),
+        role: "assistant",
+        content: `Hello! Welcome to DeepSite!
+Ask me anything about DeepSite and AI, and I'll help you build it.`,
+        createdAt: new Date(),
+      },
+    ];
+  }
+  return [
+    {
+      id: uuidv4(),
+      role: "assistant",
+      content: "Welcome back to your project! 🤩",
+      createdAt: new Date(),
+    },
+  ];
+};
+
+export function useChat(projectName: string) {
+  const queryClient = useQueryClient();
+  const [, setStoredMessages, clearStoredMessages] = useLocalStorage<Message[]>(
+    `messages-${projectName}`,
+    []
+  );
+
+  useEffect(() => {
+    if (projectName !== "new") {
+      queryClient.invalidateQueries({
+        queryKey: MESSAGES_QUERY_KEY(projectName),
+      });
+    }
+  }, [projectName, queryClient]);
+
+  const { data: messages = [] } = useQuery<Message[]>({
+    queryKey: MESSAGES_QUERY_KEY(projectName),
+    queryFn: () => {
+      if (projectName === "new") {
+        return DEFAULT_FIRST_MESSAGE(projectName);
+      }
+      const storedData = localStorage.getItem(`messages-${projectName}`);
+      if (storedData) {
+        try {
+          const parsedMessages = JSON.parse(storedData);
+          if (parsedMessages && parsedMessages.length > 0) {
+            return parsedMessages;
+          }
+        } catch (error) {
+          console.error("Failed to parse stored messages:", error);
+        }
+      }
+      return DEFAULT_FIRST_MESSAGE(projectName);
+    },
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchInterval: false,
+    refetchIntervalInBackground: false,
+  });
+
+  const addMessage = (message: Omit<Message, "id">) => {
+    const id = uuidv4();
+    queryClient.setQueryData<Message[]>(
+      MESSAGES_QUERY_KEY(projectName),
+      (oldMessages = []) => {
+        const newMessages = [
+          ...oldMessages,
+          {
+            ...message,
+            id,
+          },
+        ];
+        if (projectName !== "new") {
+          setStoredMessages(newMessages);
+        }
+        return newMessages;
+      }
+    );
+    return id;
+  };
+  const clearMessages = () => {
+    queryClient.setQueryData<Message[]>(MESSAGES_QUERY_KEY(projectName), []);
+    clearStoredMessages();
+  };
+
+  const storeMessages = async (newProjectName: string) => {
+    return new Promise((resolve) => {
+      const currentMessages = queryClient.getQueryData<Message[]>(
+        MESSAGES_QUERY_KEY("new")
+      );
+      localStorage.setItem(
+        `messages-${newProjectName}`,
+        JSON.stringify(currentMessages)
+      );
+      queryClient.setQueryData<Message[]>(
+        MESSAGES_QUERY_KEY(newProjectName),
+        currentMessages
+      );
+      setTimeout(() => resolve(true), 100);
+    });
+  };
+
+  return {
+    messages,
+    addMessage,
+    clearMessages,
+    storeMessages,
+  };
+}

components/code/index.tsx

@@ -0,0 +1,215 @@
+import { useState } from "react";
+import {
+  SandpackLayout,
+  SandpackFileExplorer,
+} from "@codesandbox/sandpack-react";
+import { ChevronRight, ChevronLeft } from "lucide-react";
+import { useParams } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { useUpdateEffect } from "react-use";
+
+import { AppEditorMonacoEditor } from "./monaco-editor";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Loading from "../loading";
+import { useManualUpdates } from "../projects/useManualUpdates";
+import { ProjectWithCommits } from "@/actions/projects";
+
+export function AppEditorCode() {
+  const queryClient = useQueryClient();
+  const { isManuallyUpdatedSameAsFiles } = useManualUpdates();
+  const { repoId } = useParams<{ repoId: string }>();
+
+  const [isFileExplorerCollapsed, setIsFileExplorerCollapsed] = useState(true);
+  const [isSavingChanges, setIsSavingChanges] = useState(false);
+  const [isSavingChangesSuccess, setIsSavingChangesSuccess] = useState(false);
+  const [isSavingChangesError, setIsSavingChangesError] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const [showSaveChanges, setShowSaveChanges] = useState(false);
+
+  const handleSaveChanges = async () => {
+    if (repoId === "new") return;
+    setIsSavingChanges(true);
+    const manuallyUpdatedFiles =
+      queryClient.getQueryData<File[]>(["manuallyUpdatedFiles"]) ?? [];
+    const response = await fetch(`/api/projects/${repoId}`, {
+      method: "PUT",
+      body: JSON.stringify({
+        files: manuallyUpdatedFiles,
+        prompt: `✍️ ${format(new Date(), "dd/MM")} - ${format(
+          new Date(),
+          "HH:mm"
+        )} - Manual changes.`,
+        isManualChanges: true,
+      }),
+    }).then(async (response) => {
+      if (response.ok) {
+        const data = await response.json();
+        return data;
+      }
+      throw new Error("Failed to save changes");
+    });
+    if (response.success) {
+      setIsSavingChangesSuccess(true);
+      queryClient.invalidateQueries({ queryKey: ["manuallyUpdatedFiles"] });
+      queryClient.setQueryData(
+        ["project"],
+        (oldProject: ProjectWithCommits) => ({
+          ...oldProject,
+          commits: [response.commit, ...(oldProject?.commits ?? [])],
+        })
+      );
+    } else {
+      setIsSavingChangesError(true);
+    }
+    setIsSavingChanges(false);
+    setShowSaveChanges(false);
+  };
+
+  const undoChanges = () => {
+    queryClient.setQueryData<File[]>(["manuallyUpdatedFiles"], []);
+    setShowSaveChanges(false);
+  };
+
+  useUpdateEffect(() => {
+    if (isSavingChangesSuccess) {
+      setTimeout(() => setIsSavingChangesSuccess(false), 3000);
+    }
+  }, [isSavingChangesSuccess]);
+
+  useUpdateEffect(() => {
+    if (isClosing) {
+      setTimeout(() => {
+        setIsSavingChangesSuccess(false);
+        setIsSavingChangesError(false);
+        setIsClosing(false);
+      }, 300);
+    }
+  }, [isClosing]);
+
+  return (
+    <div className="flex flex-col h-[calc(100%-0px)] w-full relative overflow-hidden">
+      <SandpackLayout className="h-full! flex-row! flex-! rounded-2xl! border! border-border-muted! dark:border-secondary!">
+        <Button
+          variant="bordered"
+          size="icon-xs"
+          className="absolute top-2 left-2 z-10"
+          onClick={() => setIsFileExplorerCollapsed(!isFileExplorerCollapsed)}
+          title={
+            isFileExplorerCollapsed
+              ? "Expand file explorer"
+              : "Collapse file explorer"
+          }
+        >
+          {isFileExplorerCollapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </Button>
+        <SandpackFileExplorer
+          className={cn(
+            "flex-1 h-full! pt-8!",
+            isFileExplorerCollapsed
+              ? "w-[45px]! min-w-[45px]! flex-[0_1_0%]!"
+              : ""
+          )}
+          autoHiddenFiles={true}
+        />
+        <AppEditorMonacoEditor setShowSaveChanges={setShowSaveChanges} />
+      </SandpackLayout>
+      {repoId && (
+        <div
+          className={cn(
+            "absolute bottom-0 left-0 w-full py-3 px-4 transition-all duration-300",
+            (!showSaveChanges &&
+              !isSavingChangesSuccess &&
+              !isSavingChangesError) ||
+              isClosing
+              ? "translate-y-full opacity-0 pointer-events-none"
+              : ""
+          )}
+        >
+          <div
+            className={cn(
+              "bg-accent/50 backdrop-blur-sm rounded-xl border border-border-muted p-3 flex items-center justify-between",
+              isSavingChangesError ? "border-red-500/20 bg-red-500/10!" : "",
+              isSavingChangesSuccess
+                ? "border-emerald-500/20 bg-emerald-500/10!"
+                : ""
+            )}
+          >
+            <div>
+              <p
+                className={cn(
+                  "text-sm font-medium",
+                  isSavingChangesSuccess
+                    ? "text-emerald-500"
+                    : isSavingChangesError
+                    ? "text-red-500"
+                    : "text-primary"
+                )}
+              >
+                {isSavingChangesSuccess
+                  ? "Changes saved"
+                  : isSavingChangesError
+                  ? "Failed to save changes"
+                  : "Save Changes"}
+              </p>
+              <p
+                className={cn(
+                  "text-xs text-muted-foreground",
+                  isSavingChangesSuccess
+                    ? "text-emerald-500"
+                    : isSavingChangesError
+                    ? "text-red-500"
+                    : "text-muted-foreground"
+                )}
+              >
+                {isSavingChangesSuccess
+                  ? "Changes saved successfully"
+                  : isSavingChangesError
+                  ? "Something went wrong, please try again."
+                  : "You have unsaved manual changes. Click the button to save your changes."}
+              </p>
+            </div>
+            <div className="flex items-center justify-end gap-2">
+              {!isSavingChangesSuccess ||
+                (!isSavingChanges && (
+                  <Button size="xs" variant="secondary" onClick={undoChanges}>
+                    Undo
+                  </Button>
+                ))}
+
+              {isSavingChangesSuccess || isSavingChangesError ? (
+                <Button
+                  variant={isSavingChangesError ? "destructive" : "default"}
+                  size="xs"
+                  onClick={() => setIsClosing(true)}
+                >
+                  Close
+                </Button>
+              ) : (
+                <Button
+                  variant="default"
+                  size="xs"
+                  onClick={handleSaveChanges}
+                  disabled={isSavingChanges}
+                >
+                  Save Changes
+                  {isSavingChanges && (
+                    <Loading
+                      overlay={false}
+                      className="text-primary-foreground! size-3.5!"
+                    />
+                  )}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/code/monaco-editor.tsx

@@ -0,0 +1,149 @@
+import { useMemo, useRef, useCallback, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Monaco } from "@monaco-editor/react";
+import {
+  useActiveCode,
+  SandpackStack,
+  FileTabs,
+  useSandpack,
+} from "@codesandbox/sandpack-react";
+import { useTheme } from "next-themes";
+
+import NightLight from "@/components/editor/night-light.json";
+import Night from "@/components/editor/night.json";
+import { File } from "@/lib/type";
+import dynamic from "next/dynamic";
+
+const Editor = dynamic(
+  () => import("@monaco-editor/react").then((mod) => mod.Editor),
+  { ssr: false }
+);
+
+const LANGUAGE_MAP = {
+  js: "javascript",
+  ts: "typescript",
+  html: "html",
+  css: "css",
+  json: "json",
+  txt: "text",
+};
+
+export function AppEditorMonacoEditor({
+  setShowSaveChanges,
+}: {
+  setShowSaveChanges: (show: boolean) => void;
+}) {
+  const { theme } = useTheme();
+  const { code, updateCode } = useActiveCode();
+  const { sandpack } = useSandpack();
+  const queryClient = useQueryClient();
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleEditorDidMount = (monaco: Monaco) => {
+    monaco.editor.defineTheme("NightLight", {
+      base: "vs",
+      inherit: true,
+      ...NightLight,
+      rules: [],
+    });
+    monaco.editor.defineTheme("Night", {
+      base: "vs-dark",
+      ...Night,
+      rules: [],
+    });
+  };
+
+  const language = useMemo(() => {
+    const extension = sandpack.activeFile
+      .split(".")
+      .pop()
+      ?.toLowerCase() as string;
+    return LANGUAGE_MAP[extension as keyof typeof LANGUAGE_MAP] ?? "text";
+  }, [sandpack.activeFile]);
+
+  const updateFile = useCallback(
+    (newValue: string, activeFile: string) => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+
+      updateTimeoutRef.current = setTimeout(() => {
+        const manuallyUpdatedFiles =
+          queryClient.getQueryData<File[]>(["manuallyUpdatedFiles"]) ?? [];
+        const fileIndex = manuallyUpdatedFiles.findIndex(
+          (file) => file.path === activeFile
+        );
+        if (fileIndex !== -1) {
+          manuallyUpdatedFiles[fileIndex].content = newValue;
+        } else {
+          manuallyUpdatedFiles.push({
+            path: activeFile,
+            content: newValue,
+          });
+        }
+        queryClient.setQueryData<File[]>(
+          ["manuallyUpdatedFiles"],
+          manuallyUpdatedFiles
+        );
+      }, 100);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [queryClient]
+  );
+
+  const handleEditorChange = (value: string | undefined) => {
+    setShowSaveChanges(true);
+    const newValue = value || "";
+    updateCode(newValue);
+    const activeFile = sandpack.activeFile?.replace(/^\//, "");
+    updateFile(newValue, activeFile);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <SandpackStack className="h-full!">
+      <FileTabs />
+      <div style={{ flex: 1 }}>
+        <Editor
+          width="100%"
+          height="100%"
+          language={language}
+          theme={theme === "dark" ? "Night" : "NightLight"}
+          key={sandpack.activeFile}
+          options={{
+            fontSize: 14,
+            fontFamily: "Jetbrains-Mono",
+            fontLigatures: true,
+            wordWrap: "on",
+            minimap: {
+              enabled: false,
+            },
+            bracketPairColorization: {
+              enabled: true,
+            },
+            cursorBlinking: "smooth",
+            formatOnPaste: true,
+            suggest: {
+              showFields: false,
+              showFunctions: false,
+            },
+            stickyTabStops: false,
+            stickyScroll: {
+              enabled: false,
+            },
+          }}
+          beforeMount={handleEditorDidMount}
+          value={code}
+          onChange={handleEditorChange}
+        />
+      </div>
+    </SandpackStack>
+  );
+}

components/code/useEditor.ts

@@ -0,0 +1,71 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useProject } from "@/components/projects/useProject";
+import { useMemo } from "react";
+
+const LANGUAGE_MAP = {
+  "py": "python",
+  "js": "javascript",
+  "ts": "typescript",
+  "html": "html",
+  "css": "css",
+  "json": "json",
+  "txt": "text",
+}
+
+export const useEditor = () => {
+  const queryClient = useQueryClient();
+  const { files } = useProject();
+
+  const { data: isFileListOpen } = useQuery<boolean>({
+    queryKey: ["isFileListOpen"],
+    queryFn: () => {
+      return false;
+    },
+    initialData: false,
+    refetchInterval: false,
+    refetchOnWindowFocus: false,
+  });
+
+  const setIsFileListOpen = (isOpen: boolean) => {
+    queryClient.setQueryData<boolean>(["isFileListOpen"], () => isOpen);
+  }
+
+  const { data: editorFilePath } = useQuery<string>({
+    queryKey: ["editorFile"],
+    queryFn: () => {
+      return "app.py";
+    },
+    initialData: "app.py",
+    refetchInterval: false,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchIntervalInBackground: false,
+  });
+
+  const setEditorFilePath = (path: string) => {
+    queryClient.setQueryData<string>(["editorFile"], () => path);
+  }
+
+  const editorFileData = useMemo(() => {
+    const finalFile = { path: "", content: "", language: "" };
+    if (editorFilePath) {
+      const file = files?.find((file) => file.path === editorFilePath);
+      if (file) {
+        finalFile.path = file.path;
+        finalFile.content = file.content ?? "";
+        finalFile.language = LANGUAGE_MAP[file.path.split(".").pop()?.toLowerCase() as keyof typeof LANGUAGE_MAP] ?? "text";
+      }
+    }
+
+    return finalFile
+  }, [editorFilePath, files])
+
+  return {
+    editorFilePath,
+    editorFileData,
+    setEditorFilePath,
+    isFileListOpen,
+    setIsFileListOpen,
+  }
+}

components/editor/commits.tsx

@@ -0,0 +1,115 @@
+import { useRef, useState } from "react";
+import { HistoryIcon } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useUpdateEffect } from "react-use";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Commit } from "@/lib/type";
+import { cn, humanizeNumber } from "@/lib/utils";
+
+export const Commits = function ({ commits }: { commits?: Commit[] }) {
+  const searchParams = useSearchParams();
+  const commitParam = searchParams.get("commit");
+
+  const commitsContainer = useRef<HTMLUListElement>(null);
+  const commitSelected = useRef<HTMLLIElement>(null);
+  const [open, setOpen] = useState(false);
+  const [selectedCommit, setSelectedCommit] = useState<string | null>(
+    commitParam
+      ? commitParam
+      : commits && commits.length > 0
+      ? commits[0]?.oid
+      : null
+  );
+
+  const handleViewCommit = (commitId: string) => {
+    let url = window.location.pathname;
+    if (commitId !== commits?.[0].oid) {
+      url += `?commit=${commitId}`;
+    }
+    window.location.replace(url);
+  };
+
+  useUpdateEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        if (commitSelected.current && commitsContainer.current) {
+          const container = commitsContainer.current;
+          const selected = commitSelected.current;
+          if (!container || !selected) return;
+          const offsetTop = selected.offsetTop;
+          const offsetHeight = selected.offsetHeight;
+          const containerHeight = container.offsetHeight;
+          const scrollTop = offsetTop - containerHeight / 2 + offsetHeight / 2;
+          container.scrollTo({
+            top: scrollTop,
+            behavior: "smooth",
+          });
+        }
+      }, 200);
+    }
+  }, [open]);
+
+  useUpdateEffect(() => {
+    if (selectedCommit !== commits?.[0].oid) {
+      setSelectedCommit(commits ? commits[0]?.oid : null);
+    }
+  }, [commits]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <form>
+        <PopoverTrigger asChild>
+          <Button variant={open ? "default" : "bordered"} size="xs">
+            <HistoryIcon className="size-3.5" />
+            <span>
+              History <span className="max-lg:hidden">version</span>
+            </span>
+            <span className="py-0.5 px-1 text-[10px] flex items-center justify-center rounded font-semibold bg-accent text-primary font-mono">
+              {humanizeNumber(commits ? commits.length : 0)}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="rounded-2xl! p-0! overflow-hidden!"
+        >
+          <header className="bg-background px-3 py-2 border-b border-background-foreground text-xs text-muted-foreground font-medium flex items-center justify-center gap-1.5">
+            Historical Versions
+            <span className="py-0.5 px-1 text-[10px] inline-flex items-center justify-center rounded font-semibold bg-accent text-primary font-mono">
+              {humanizeNumber(commits ? commits.length : 0)}
+            </span>
+          </header>
+          <ul
+            ref={commitsContainer}
+            className="p-1 space-y-1 max-h-80 overflow-y-auto"
+          >
+            {commits?.map((commit) => (
+              <li
+                key={commit.oid}
+                className={cn(
+                  "overflow-hidden group relative px-3 py-2 text-xs cursor-pointer rounded-lg",
+                  selectedCommit === commit.oid
+                    ? "bg-indigo-500/10 text-indigo-600"
+                    : "hover:bg-accent"
+                )}
+                ref={selectedCommit === commit.oid ? commitSelected : undefined}
+                onClick={() => handleViewCommit(commit.oid)}
+              >
+                <p className="truncate break-all">{commit.title}</p>
+                <p className="text-[10px] text-muted-foreground mt-0.5">
+                  {new Date(commit.date).toLocaleString()}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </PopoverContent>
+      </form>
+    </Popover>
+  );
+};

components/editor/header.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Earth,
+  RefreshCw,
+  Monitor,
+  Smartphone,
+  Code,
+  ChevronDown,
+  MessageCircle,
+  ExternalLink,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { useSandpackNavigation } from "@codesandbox/sandpack-react";
+
+import { Button } from "@/components/ui/button";
+import { ActivityType, DeviceType, MobileTabType } from "@/lib/type";
+import { UserMenu } from "@/components/user-menu";
+import { useProject } from "@/components/projects/useProject";
+import { cn } from "@/lib/utils";
+import { Commits } from "./commits";
+
+export function AppEditorHeader({
+  currentActivity,
+  onToggleActivity,
+  onToggleDevice,
+  device,
+  mobileTab,
+  isHistoryView,
+}: {
+  isNew?: boolean;
+  isHistoryView?: boolean;
+  currentActivity: ActivityType;
+  onToggleActivity: (activity: ActivityType) => void;
+  onToggleDevice: () => void;
+  device: DeviceType;
+  mobileTab: MobileTabType;
+  onToggleMobileTab: (tab: MobileTabType) => void;
+}) {
+  const { project, files } = useProject();
+  const { refresh } = useSandpackNavigation();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    setTimeout(() => {
+      refresh();
+      setIsRefreshing(false);
+    }, 1000);
+  };
+
+  const handleToggleActivity = () => {
+    onToggleActivity(currentActivity === "chat" ? "code" : "chat");
+  };
+
+  return (
+    <header className="px-3 lg:px-2 py-1.5 flex items-center gap-3">
+      <div
+        className={cn(
+          "w-1/3 flex items-center gap-1.5 justify-between",
+          mobileTab !== "left-sidebar" ? "max-lg:hidden" : "max-lg:w-full!"
+        )}
+      >
+        <Button variant="ghost" className="pl-2.5! pr-3! py-1.5! h-auto!">
+          <Image
+            src="/logo.svg"
+            alt="DeepSite"
+            width={100}
+            height={100}
+            className="size-8"
+          />
+          <div className="flex flex-col -space-y-1 items-start">
+            <p className="text-sm font-bold text-primary">
+              {project?.cardData?.title ?? "New DeepSite website"}{" "}
+              {project?.cardData?.emoji}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Live preview of your app
+            </p>
+          </div>
+          <ChevronDown />
+        </Button>
+        <div className="flex items-center justify-end gap-2 max-lg:hidden">
+          {(project?.commits?.length ?? 0) > 0 && (
+            <Commits commits={project?.commits} />
+          )}
+        </div>
+      </div>
+      <div className="grow flex items-center justify-end lg:grid lg:grid-cols-3">
+        <div className="flex items-center justify-start gap-1.5 max-lg:hidden">
+          {files && files.length > 0 && (
+            <>
+              {!isHistoryView && (
+                <Button
+                  variant="indigo"
+                  size="xs"
+                  onClick={handleToggleActivity}
+                >
+                  {currentActivity === "chat" ? <Code /> : <MessageCircle />}
+                  {currentActivity === "chat" ? "Code" : "Chat"}
+                </Button>
+              )}
+              <Button
+                variant="bordered"
+                size="xs"
+                onClick={onToggleDevice}
+                className="gap-2"
+              >
+                {device === "desktop" ? (
+                  <>
+                    <Monitor className="size-4" />
+                    Desktop
+                  </>
+                ) : (
+                  <>
+                    <Smartphone className="size-4" />
+                    Mobile
+                  </>
+                )}
+              </Button>
+            </>
+          )}
+          {!isHistoryView && project?.name && (
+            <Link
+              href={`https://${project.name.replaceAll(
+                "/",
+                "-"
+              )}.static.hf.space`}
+              target="_blank"
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              <Button
+                variant="bordered"
+                className="h-7 px-2! overflow-hidden gap-0"
+              >
+                <ExternalLink className="size-4 shrink-0" />
+                <motion.span
+                  initial={false}
+                  animate={{
+                    width: isHovered ? "auto" : 0,
+                    opacity: isHovered ? 1 : 0,
+                    marginLeft: isHovered ? 6 : 0,
+                  }}
+                  transition={{ duration: 0.2, ease: "linear" }}
+                  className="overflow-hidden whitespace-nowrap text-xs"
+                  style={{ display: "inline-block" }}
+                >
+                  See Live preview
+                </motion.span>
+              </Button>
+            </Link>
+          )}
+          {isHistoryView && (
+            <Button
+              variant="indigo"
+              size="xs"
+              className="cursor-default! border-transparent!"
+            >
+              Viewing historical version
+            </Button>
+          )}
+        </div>
+        <div
+          className={cn(
+            "flex items-center justify-center",
+            mobileTab !== "right-sidebar" && "max-lg:hidden"
+          )}
+        >
+          <div className="flex items-center justify-between gap-3 pl-3 pr-2 py-1 bg-secondary rounded-md text-xs">
+            <div className="flex items-center text-muted-foreground">
+              <Earth className="size-3 shrink-0 mr-2" />
+              <span className="font-mono max-w-26 truncate">
+                {project?.name
+                  ? `${project.name.replaceAll("/", "-")}`
+                  : "localhost:3000"}
+              </span>
+              <span className="font-mono">
+                {project?.name && ".static.hf.space"}
+              </span>
+            </div>
+            <div className="flex items-center gap-0.5">
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                onClick={handleRefresh}
+                aria-label="Refresh preview"
+                disabled={isRefreshing}
+                className="hover:bg-background/60"
+              >
+                <RefreshCw
+                  className={`size-3 ${isRefreshing ? "animate-spin" : ""}`}
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-2 w-full">
+          <UserMenu />
+        </div>
+      </div>
+    </header>
+  );
+}

components/editor/history-view.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useParams, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+
+export const HistoryView = function () {
+  const { repoId } = useParams<{ repoId: string }>();
+  const searchParams = useSearchParams();
+  const commitId = searchParams.get("commit");
+
+  const handleSetAsDefault = async () => {
+    const confirmation = confirm(
+      "This action will set this historical version as the default version of the project. Are you sure you want to proceed?"
+    );
+    if (!confirmation) return;
+    const response = await fetch(`/api/projects/${repoId}/${commitId}`, {
+      method: "POST",
+    }).then(async (response) => {
+      if (response.ok) {
+        const data = await response.json();
+        return data;
+      }
+      throw new Error("Failed to save changes");
+    });
+    if (response.success) {
+      toast.success("Set as default version successfully!");
+      setTimeout(() => {
+        close();
+      }, 500);
+    } else {
+      alert("Failed to set as default version, try again later.");
+    }
+  };
+
+  const close = () => {
+    window.location.replace(window.location.pathname);
+  };
+
+  return (
+    <div className="absolute inset-0 bg-background/10 rounded-2xl backdrop-blur-xs z-10 flex items-center justify-center p-4 border">
+      <div className="max-w-sm rounded-2xl overflow-hidden border border-indigo-500/20 text-center bg-linear-to-b from-accent/50 to-accent/30">
+        <header className="bg-linear-to-b from-indigo-500/15 dark:from-indigo-500/40 to-accent p-6">
+          <div className="flex items-center justify-center -space-x-4 mb-3">
+            <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              ✏️
+            </div>
+            <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+              👀
+            </div>
+            <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              🔒
+            </div>
+          </div>
+          <p className="text-xl font-semibold text-primary">
+            History View Enabled
+          </p>
+          <p className="text-sm text-muted-foreground mt-1.5">
+            You are currently viewing a historical version of this project.
+            Editing is disabled in this mode.
+          </p>
+        </header>
+        <div className="p-5 bg-accent flex items-center justify-center gap-2">
+          <Button
+            variant="transparent"
+            size="sm"
+            className="flex-1 cyrsor"
+            onClick={() => close()}
+          >
+            <ArrowLeft className="" />
+            Go Back
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            className="flex-1"
+            onClick={handleSetAsDefault}
+          >
+            Set as Default Version
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

components/editor/index.tsx

@@ -0,0 +1,148 @@
+"use client";
+import { useState, useMemo } from "react";
+import dynamic from "next/dynamic";
+import { useBeforeUnload } from "react-use";
+import { ArrowRight } from "lucide-react";
+import { useTheme } from "next-themes";
+import { amethyst } from "@codesandbox/sandpack-themes";
+
+import { AppEditorHeader } from "./header";
+import { AppViewer } from "@/components/viewer";
+import { ActivityType, DeviceType, File, MobileTabType } from "@/lib/type";
+import { useProject } from "@/components/projects/useProject";
+import { AskAI } from "@/components/ask-ai/ask-ai";
+import { AppEditorChat } from "@/components/chat";
+import { cn, defaultHTML } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { AppEditorCode } from "@/components/code";
+import { ProjectWithCommits } from "@/actions/projects";
+import { HistoryView } from "./history-view";
+
+const SandpackProvider = dynamic(
+  () =>
+    import("@codesandbox/sandpack-react").then((mod) => mod.SandpackProvider),
+  { ssr: false }
+);
+
+export function AppEditor({
+  project: initialProject,
+  files: initialFiles,
+  initialPrompt,
+  isNew = false,
+  isHistoryView = false,
+}: {
+  project?: ProjectWithCommits | null;
+  files?: File[];
+  initialPrompt?: string;
+  isNew?: boolean;
+  isHistoryView?: boolean;
+}) {
+  const [currentActivity, setCurrentActivity] = useState<ActivityType>("chat");
+  const [device, setDevice] = useState<DeviceType>("desktop");
+  const [mobileTab, setMobileTab] = useState<MobileTabType>("left-sidebar");
+  const { project, files } = useProject(initialProject, initialFiles, isNew);
+  const { resolvedTheme } = useTheme();
+  const projectName = isNew ? "new" : project?.name ?? "new";
+
+  const toggleDevice = () => {
+    setDevice((prev) => (prev === "desktop" ? "mobile" : "desktop"));
+  };
+
+  useBeforeUnload(
+    !project && (files?.length ?? 0) > 0,
+    "You have unsaved changes, are you sure?"
+  );
+
+  const sandpackFiles = useMemo(() => {
+    if (files && files.length > 0) {
+      return files.reduce(
+        (acc, file) => ({
+          ...acc,
+          [file.path]: { code: file.content ?? "" },
+        }),
+        {}
+      );
+    } else {
+      return {
+        "/index.html": {
+          code: defaultHTML,
+        },
+      };
+    }
+  }, [files]);
+
+  return (
+    <SandpackProvider
+      template="static"
+      // options={{
+      //   initMode: "immediate",
+      //   autoReload: false,
+      //   recompileDelay: 3000,
+      //   recompileMode: "immediate",
+      // }}
+      files={sandpackFiles}
+      // id={projectName}
+      // key={projectName}
+      theme={resolvedTheme === "dark" ? amethyst : undefined}
+      className="h-screen! w-full! flex! flex-col! justify-between! lg:overflow-hidden!"
+    >
+      <AppEditorHeader
+        currentActivity={currentActivity}
+        onToggleActivity={setCurrentActivity}
+        onToggleDevice={toggleDevice}
+        device={device}
+        mobileTab={mobileTab}
+        onToggleMobileTab={setMobileTab}
+        isNew={isNew}
+        isHistoryView={isHistoryView}
+      />
+      <main className="flex-1! flex! items-center! pb-3! gap-3! px-3!">
+        <div
+          className={cn(
+            "w-1/3 flex flex-col justify-between h-full relative",
+            mobileTab !== "left-sidebar" ? "max-lg:hidden" : "max-lg:w-full!"
+          )}
+        >
+          {currentActivity === "chat" ? (
+            <div className="justify-between flex flex-col h-[calc(100vh-70px)] grow">
+              <AppEditorChat
+                isNew={isNew}
+                projectName={projectName}
+                onSelectFile={() => {
+                  setCurrentActivity("code");
+                }}
+              />
+              <div className="">
+                <div className="lg:hidden flex items-center justify-end pb-2">
+                  <Button
+                    variant="bordered"
+                    size="xs"
+                    onClick={() => setMobileTab("right-sidebar")}
+                  >
+                    Go to Preview <ArrowRight className="size-3" />
+                  </Button>
+                </div>
+                <AskAI
+                  isHistoryView={isHistoryView}
+                  isNew={isNew}
+                  projectName={projectName}
+                  initialPrompt={initialPrompt}
+                  files={files}
+                  onToggleMobileTab={setMobileTab}
+                />
+              </div>
+            </div>
+          ) : (
+            <AppEditorCode />
+          )}
+          {isHistoryView && <HistoryView />}
+        </div>
+        <AppViewer
+          mobileTab={mobileTab}
+          onToggleMobileTab={setMobileTab}
+          device={device}
+        />
+      </main>
+    </SandpackProvider>
+  );
+}

components/editor/night-light.json

@@ -0,0 +1,1728 @@
+{
+  "name": "Night Owl Light",
+  "type": "light",
+  "semanticHighlighting": true,
+  "colors": {
+    "foreground": "#403f53",
+    "focusBorder": "#93A1A1",
+    "errorForeground": "#403f53",
+    "selection.background": "#7a8181ad",
+    "descriptionForeground": "#403f53",
+    "widget.shadow": "#d9d9d9",
+    "titleBar.activeBackground": "#F0F0F0",
+    "notifications.background": "#F0F0F0",
+    "notifications.foreground": "#403f53",
+    "notificationLink.foreground": "#994cc3",
+    "notifications.border": "#CCCCCC",
+    "notificationCenter.border": "#CCCCCC",
+    "notificationToast.border": "#CCCCCC",
+    "notificationCenterHeader.foreground": "#403f53",
+    "notificationCenterHeader.background": "#F0F0F0",
+    "button.background": "#2AA298",
+    "button.foreground": "#F0F0F0",
+    "dropdown.background": "#F0F0F0",
+    "dropdown.foreground": "#403f53",
+    "dropdown.border": "#d9d9d9",
+    "input.background": "#F0F0F0",
+    "input.foreground": "#403f53",
+    "input.border": "#d9d9d9",
+    "input.placeholderForeground": "#93A1A1",
+    "inputOption.activeBorder": "#2AA298",
+    "inputValidation.infoBorder": "#D0D0D0",
+    "inputValidation.infoBackground": "#F0F0F0",
+    "inputValidation.warningBackground": "#daaa01",
+    "inputValidation.warningBorder": "#E0AF02",
+    "inputValidation.errorBackground": "#f76e6e",
+    "inputValidation.errorBorder": "#de3d3b",
+    "badge.background": "#2AA298",
+    "badge.foreground": "#F0F0F0",
+    "progressBar.background": "#2AA298",
+    "list.activeSelectionBackground": "#d3e8f8",
+    "list.activeSelectionForeground": "#403f53",
+    "list.inactiveSelectionBackground": "#E0E7EA",
+    "list.inactiveSelectionForeground": "#403f53",
+    "list.focusBackground": "#d3e8f8",
+    "list.hoverBackground": "#d3e8f8",
+    "list.focusForeground": "#403f53",
+    "list.hoverForeground": "#403f53",
+    "list.highlightForeground": "#403f53",
+    "list.errorForeground": "#E64D49",
+    "list.warningForeground": "#daaa01",
+    "activityBar.background": "#F0F0F0",
+    "activityBar.foreground": "#403f53",
+    "activityBar.dropBackground": "#D0D0D0",
+    "activityBarBadge.background": "#403f53",
+    "activityBarBadge.foreground": "#F0F0F0",
+    "activityBar.border": "#F0F0F0",
+    "sideBar.background": "#F0F0F0",
+    "sideBar.foreground": "#403f53",
+    "sideBarTitle.foreground": "#403f53",
+    "sideBar.border": "#F0F0F0",
+    "scrollbar.shadow": "#CCCCCC",
+    "tab.border": "#F0F0F0",
+    "tab.activeBackground": "#F6F6F6",
+    "tab.activeForeground": "#403f53",
+    "tab.inactiveForeground": "#403f53",
+    "tab.inactiveBackground": "#F0F0F0",
+    "editorGroup.border": "#F0F0F0",
+    "editorGroup.background": "#F6F6F6",
+    "editorGroupHeader.tabsBackground": "#F0F0F0",
+    "editorGroupHeader.tabsBorder": "#F0F0F0",
+    "editorGroupHeader.noTabsBackground": "#F0F0F0",
+    "tab.activeModifiedBorder": "#2AA298",
+    "tab.inactiveModifiedBorder": "#93A1A1",
+    "tab.unfocusedActiveModifiedBorder": "#93A1A1",
+    "tab.unfocusedInactiveModifiedBorder": "#93A1A1",
+    "editor.background": "#FBFBFB",
+    "editor.foreground": "#403f53",
+    "editorCursor.foreground": "#90A7B2",
+    "editorLineNumber.foreground": "#90A7B2",
+    "editorLineNumber.activeForeground": "#403f53",
+    "editor.selectionBackground": "#E0E0E0",
+    "editor.selectionHighlightBackground": "#339cec33",
+    "editor.wordHighlightBackground": "#339cec33",
+    "editor.wordHighlightStrongBackground": "#007dd659",
+    "editor.findMatchBackground": "#93A1A16c",
+    "editor.findMatchHighlightBackground": "#93a1a16c",
+    "editor.findRangeHighlightBackground": "#7497a633",
+    "editor.hoverHighlightBackground": "#339cec33",
+    "editor.lineHighlightBackground": "#F0F0F0",
+    "editor.rangeHighlightBackground": "#000000",
+    "editorWhitespace.foreground": "#d9d9d9",
+    "editorIndentGuide.background": "#d9d9d9",
+    "editorCodeLens.foreground": "#403f53",
+    "editorError.foreground": "#E64D49",
+    "editorError.border": "#FBFBFB",
+    "editorWarning.foreground": "#daaa01",
+    "editorWarning.border": "#daaa01",
+    "editorGutter.addedBackground": "#49d0c5",
+    "editorGutter.modifiedBackground": "#6fbef6",
+    "editorGutter.deletedBackground": "#f76e6e",
+    "editorRuler.foreground": "#d9d9d9",
+    "editorOverviewRuler.errorForeground": "#E64D49",
+    "editorOverviewRuler.warningForeground": "#daaa01",
+    "editorInlayHint.background": "#F0F0F0",
+    "editorInlayHint.foreground": "#403f53",
+    "editorWidget.background": "#F0F0F0",
+    "editorWidget.border": "#d9d9d9",
+    "editorSuggestWidget.background": "#F0F0F0",
+    "editorSuggestWidget.foreground": "#403f53",
+    "editorSuggestWidget.highlightForeground": "#403f53",
+    "editorSuggestWidget.selectedBackground": "#d3e8f8",
+    "editorSuggestWidget.border": "#d9d9d9",
+    "editorHoverWidget.background": "#F0F0F0",
+    "editorHoverWidget.border": "#d9d9d9",
+    "debugExceptionWidget.background": "#F0F0F0",
+    "debugExceptionWidget.border": "#d9d9d9",
+    "editorMarkerNavigation.background": "#D0D0D0",
+    "editorMarkerNavigationError.background": "#f76e6e",
+    "editorMarkerNavigationWarning.background": "#daaa01",
+    "debugToolBar.background": "#F0F0F0",
+    "pickerGroup.border": "#d9d9d9",
+    "pickerGroup.foreground": "#403f53",
+    "extensionButton.prominentBackground": "#2AA298",
+    "extensionButton.prominentForeground": "#F0F0F0",
+    "statusBar.background": "#F0F0F0",
+    "statusBar.border": "#F0F0F0",
+    "statusBar.debuggingBackground": "#F0F0F0",
+    "statusBar.debuggingForeground": "#403f53",
+    "statusBar.foreground": "#403f53",
+    "statusBar.noFolderBackground": "#F0F0F0",
+    "statusBar.noFolderForeground": "#403f53",
+    "panel.background": "#F0F0F0",
+    "panel.border": "#d9d9d9",
+    "peekView.border": "#d9d9d9",
+    "peekViewEditor.background": "#F6F6F6",
+    "peekViewEditorGutter.background": "#F6F6F6",
+    "peekViewEditor.matchHighlightBackground": "#49d0c5",
+    "peekViewResult.background": "#F0F0F0",
+    "peekViewResult.fileForeground": "#403f53",
+    "peekViewResult.lineForeground": "#403f53",
+    "peekViewResult.matchHighlightBackground": "#49d0c5",
+    "peekViewResult.selectionBackground": "#E0E7EA",
+    "peekViewResult.selectionForeground": "#403f53",
+    "peekViewTitle.background": "#F0F0F0",
+    "peekViewTitleLabel.foreground": "#403f53",
+    "peekViewTitleDescription.foreground": "#403f53",
+    "terminal.ansiBrightBlack": "#403f53",
+    "terminal.ansiBlack": "#403f53",
+    "terminal.ansiBrightBlue": "#288ed7",
+    "terminal.ansiBlue": "#288ed7",
+    "terminal.ansiBrightCyan": "#2AA298",
+    "terminal.ansiCyan": "#2AA298",
+    "terminal.ansiBrightGreen": "#08916a",
+    "terminal.ansiGreen": "#08916a",
+    "terminal.ansiBrightMagenta": "#d6438a",
+    "terminal.ansiMagenta": "#d6438a",
+    "terminal.ansiBrightRed": "#de3d3b",
+    "terminal.ansiRed": "#de3d3b",
+    "terminal.ansiBrightWhite": "#93A1A1",
+    "terminal.ansiWhite": "#93A1A1",
+    "terminal.ansiBrightYellow": "#daaa01",
+    "terminal.ansiYellow": "#E0AF02",
+    "terminal.background": "#F6F6F6",
+    "terminal.foreground": "#403f53"
+  },
+  "tokenColors": [
+    {
+      "name": "Changed",
+      "scope": [
+        "markup.changed",
+        "meta.diff.header.git",
+        "meta.diff.header.from-file",
+        "meta.diff.header.to-file"
+      ],
+      "settings": {
+        "foreground": "#a2bffc",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Deleted",
+      "scope": "markup.deleted.diff",
+      "settings": {
+        "foreground": "#EF535090",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Inserted",
+      "scope": "markup.inserted.diff",
+      "settings": {
+        "foreground": "#4876d6ff",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Global settings",
+      "settings": {
+        "background": "#011627",
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Comment",
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#989fb1",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "String",
+      "scope": "string",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "String Quoted",
+      "scope": ["string.quoted", "variable.other.readwrite.js"],
+      "settings": {
+        "foreground": "#c96765"
+      }
+    },
+    {
+      "name": "Support Constant Math",
+      "scope": "support.constant.math",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Number",
+      "scope": ["constant.numeric", "constant.character.numeric"],
+      "settings": {
+        "foreground": "#aa0982",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Built-in constant",
+      "scope": [
+        "constant.language",
+        "punctuation.definition.constant",
+        "variable.other.constant"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "User-defined constant",
+      "scope": ["constant.character", "constant.other"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Constant Character Escape",
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "RegExp String",
+      "scope": ["string.regexp", "string.regexp keyword.other"],
+      "settings": {
+        "foreground": "#5ca7e4"
+      }
+    },
+    {
+      "name": "Comma in functions",
+      "scope": "meta.function punctuation.separator.comma",
+      "settings": {
+        "foreground": "#5f7e97"
+      }
+    },
+    {
+      "name": "Variable",
+      "scope": "variable",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Keyword",
+      "scope": ["punctuation.accessor", "keyword"],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Storage",
+      "scope": [
+        "storage",
+        "meta.var.expr",
+        "meta.class meta.method.declaration meta.var.expr storage.type.js",
+        "storage.type.property.js",
+        "storage.type.property.ts",
+        "storage.type.property.tsx"
+      ],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Storage type",
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "Storage type",
+      "scope": "storage.type.function.arrow.js",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Class name",
+      "scope": ["entity.name.class", "meta.class entity.name.type.class"],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Inherited class",
+      "scope": "entity.other.inherited-class",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Function name",
+      "scope": "entity.name.function",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Meta Tag",
+      "scope": ["punctuation.definition.tag", "meta.tag"],
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "HTML Tag names",
+      "scope": [
+        "entity.name.tag",
+        "meta.tag.other.html",
+        "meta.tag.other.js",
+        "meta.tag.other.tsx",
+        "entity.name.tag.tsx",
+        "entity.name.tag.js",
+        "entity.name.tag",
+        "meta.tag.js",
+        "meta.tag.tsx",
+        "meta.tag.html"
+      ],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Tag attribute",
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Entity Name Tag Custom",
+      "scope": "entity.name.tag.custom",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Library (function & constant)",
+      "scope": ["support.function", "support.constant"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Support Constant Property Value meta",
+      "scope": "support.constant.meta.property-value",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Library class/type",
+      "scope": ["support.type", "support.class"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Support Variable DOM",
+      "scope": "support.variable.dom",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Invalid",
+      "scope": "invalid",
+      "settings": {
+        "foreground": "#ff2c83"
+      }
+    },
+    {
+      "name": "Invalid deprecated",
+      "scope": "invalid.deprecated",
+      "settings": {
+        "foreground": "#d3423e"
+      }
+    },
+    {
+      "name": "Keyword Operator",
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#0c969b",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Keyword Operator Relational",
+      "scope": "keyword.operator.relational",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Keyword Operator Assignment",
+      "scope": "keyword.operator.assignment",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "Keyword Operator Arithmetic",
+      "scope": "keyword.operator.arithmetic",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "Keyword Operator Bitwise",
+      "scope": "keyword.operator.bitwise",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "Keyword Operator Increment",
+      "scope": "keyword.operator.increment",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "Keyword Operator Ternary",
+      "scope": "keyword.operator.ternary",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "Double-Slashed Comment",
+      "scope": "comment.line.double-slash",
+      "settings": {
+        "foreground": "#939dbb"
+      }
+    },
+    {
+      "name": "Object",
+      "scope": "object",
+      "settings": {
+        "foreground": "#cdebf7"
+      }
+    },
+    {
+      "name": "Null",
+      "scope": "constant.language.null",
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "Meta Brace",
+      "scope": "meta.brace",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Meta Delimiter Period",
+      "scope": "meta.delimiter.period",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Punctuation Definition String",
+      "scope": "punctuation.definition.string",
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Punctuation Definition String Markdown",
+      "scope": "punctuation.definition.string.begin.markdown",
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "Boolean",
+      "scope": "constant.language.boolean",
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "Object Comma",
+      "scope": "object.comma",
+      "settings": {
+        "foreground": "#ffffff"
+      }
+    },
+    {
+      "name": "Variable Parameter Function",
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#0c969b",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Support Type Property Name & entity name tags",
+      "scope": [
+        "support.type.vendor.property-name",
+        "support.constant.vendor.property-value",
+        "support.type.property-name",
+        "meta.property-list entity.name.tag"
+      ],
+      "settings": {
+        "foreground": "#0c969b",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Entity Name tag reference in stylesheets",
+      "scope": "meta.property-list entity.name.tag.reference",
+      "settings": {
+        "foreground": "#57eaf1"
+      }
+    },
+    {
+      "name": "Constant Other Color RGB Value Punctuation Definition Constant",
+      "scope": "constant.other.color.rgb-value punctuation.definition.constant",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Constant Other Color",
+      "scope": "constant.other.color",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Keyword Other Unit",
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Meta Selector",
+      "scope": "meta.selector",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Entity Other Attribute Name Id",
+      "scope": "entity.other.attribute-name.id",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Meta Property Name",
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Doctypes",
+      "scope": ["entity.name.tag.doctype", "meta.tag.sgml.doctype"],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Punctuation Definition Parameters",
+      "scope": "punctuation.definition.parameters",
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Keyword Control Operator",
+      "scope": "keyword.control.operator",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Keyword Operator Logical",
+      "scope": "keyword.operator.logical",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Variable Instances",
+      "scope": [
+        "variable.instance",
+        "variable.other.instance",
+        "variable.readwrite.instance",
+        "variable.other.readwrite.instance",
+        "variable.other.property"
+      ],
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Variable Property Other object property",
+      "scope": ["variable.other.object.property"],
+      "settings": {
+        "foreground": "#111111",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Variable Property Other object",
+      "scope": ["variable.other.object.js"],
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Entity Name Function",
+      "scope": ["entity.name.function"],
+      "settings": {
+        "foreground": "#4876d6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Keyword Operator Comparison, imports, returns and Keyword Operator Ruby",
+      "scope": [
+        "keyword.operator.comparison",
+        "keyword.control.flow.js",
+        "keyword.control.flow.ts",
+        "keyword.control.flow.tsx",
+        "keyword.control.ruby",
+        "keyword.control.module.ruby",
+        "keyword.control.class.ruby",
+        "keyword.control.def.ruby",
+        "keyword.control.loop.js",
+        "keyword.control.loop.ts",
+        "keyword.control.import.js",
+        "keyword.control.import.ts",
+        "keyword.control.import.tsx",
+        "keyword.control.from.js",
+        "keyword.control.from.ts",
+        "keyword.control.from.tsx",
+        "keyword.operator.instanceof.js",
+        "keyword.operator.expression.instanceof.ts",
+        "keyword.operator.expression.instanceof.tsx"
+      ],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Keyword Control Conditional",
+      "scope": [
+        "keyword.control.conditional.js",
+        "keyword.control.conditional.ts",
+        "keyword.control.switch.js",
+        "keyword.control.switch.ts"
+      ],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords",
+      "scope": [
+        "support.constant",
+        "keyword.other.special-method",
+        "keyword.other.new",
+        "keyword.other.debugger",
+        "keyword.control"
+      ],
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Support Function",
+      "scope": "support.function",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Invalid Broken",
+      "scope": "invalid.broken",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Invalid Unimplemented",
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "foreground": "#8BD649"
+      }
+    },
+    {
+      "name": "Invalid Illegal",
+      "scope": "invalid.illegal",
+      "settings": {
+        "foreground": "#c96765"
+      }
+    },
+    {
+      "name": "Language Variable",
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Support Variable Property",
+      "scope": "support.variable.property",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Variable Function",
+      "scope": "variable.function",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Variable Interpolation",
+      "scope": "variable.interpolation",
+      "settings": {
+        "foreground": "#ec5f67"
+      }
+    },
+    {
+      "name": "Meta Function Call",
+      "scope": "meta.function-call",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Punctuation Section Embedded",
+      "scope": "punctuation.section.embedded",
+      "settings": {
+        "foreground": "#d3423e"
+      }
+    },
+    {
+      "name": "Punctuation Tweaks",
+      "scope": [
+        "punctuation.terminator.expression",
+        "punctuation.definition.arguments",
+        "punctuation.definition.array",
+        "punctuation.section.array",
+        "meta.array"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "More Punctuation Tweaks",
+      "scope": [
+        "punctuation.definition.list.begin",
+        "punctuation.definition.list.end",
+        "punctuation.separator.arguments",
+        "punctuation.definition.list"
+      ],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Template Strings",
+      "scope": "string.template meta.template.expression",
+      "settings": {
+        "foreground": "#d3423e"
+      }
+    },
+    {
+      "name": "Backtics(``) in Template Strings",
+      "scope": "string.template punctuation.definition.string",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Italics",
+      "scope": "italic",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Bold",
+      "scope": "bold",
+      "settings": {
+        "foreground": "#4876d6",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Quote",
+      "scope": "quote",
+      "settings": {
+        "foreground": "#697098",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Raw Code",
+      "scope": "raw",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "CoffeScript Variable Assignment",
+      "scope": "variable.assignment.coffee",
+      "settings": {
+        "foreground": "#31e1eb"
+      }
+    },
+    {
+      "name": "CoffeScript Parameter Function",
+      "scope": "variable.parameter.function.coffee",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "CoffeeScript Assignments",
+      "scope": "variable.assignment.coffee",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "C# Readwrite Variables",
+      "scope": "variable.other.readwrite.cs",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "C# Classes & Storage types",
+      "scope": ["entity.name.type.class.cs", "storage.type.cs"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "C# Namespaces",
+      "scope": "entity.name.type.namespace.cs",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Tag names in Stylesheets",
+      "scope": [
+        "entity.name.tag.css",
+        "entity.name.tag.less",
+        "entity.name.tag.custom.css",
+        "support.constant.property-value.css"
+      ],
+      "settings": {
+        "foreground": "#c96765",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Wildcard(*) selector in Stylesheets",
+      "scope": [
+        "entity.name.tag.wildcard.css",
+        "entity.name.tag.wildcard.less",
+        "entity.name.tag.wildcard.scss",
+        "entity.name.tag.wildcard.sass"
+      ],
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "CSS Keyword Other Unit",
+      "scope": "keyword.other.unit.css",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Attribute Name for CSS",
+      "scope": [
+        "meta.attribute-selector.css entity.other.attribute-name.attribute",
+        "variable.other.readwrite.js"
+      ],
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Elixir Classes",
+      "scope": [
+        "source.elixir support.type.elixir",
+        "source.elixir meta.module.elixir entity.name.class.elixir"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Elixir Functions",
+      "scope": "source.elixir entity.name.function",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Elixir Constants",
+      "scope": [
+        "source.elixir constant.other.symbol.elixir",
+        "source.elixir constant.other.keywords.elixir"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Elixir String Punctuations",
+      "scope": "source.elixir punctuation.definition.string",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Elixir",
+      "scope": [
+        "source.elixir variable.other.readwrite.module.elixir",
+        "source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Elixir Binary Punctuations",
+      "scope": "source.elixir .punctuation.binary.elixir",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Closure Constant Keyword",
+      "scope": "constant.keyword.clojure",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Go Function Calls",
+      "scope": "source.go meta.function-call.go",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Go Keywords",
+      "scope": [
+        "source.go keyword.package.go",
+        "source.go keyword.import.go",
+        "source.go keyword.function.go",
+        "source.go keyword.type.go",
+        "source.go keyword.struct.go",
+        "source.go keyword.interface.go",
+        "source.go keyword.const.go",
+        "source.go keyword.var.go",
+        "source.go keyword.map.go",
+        "source.go keyword.channel.go",
+        "source.go keyword.control.go"
+      ],
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Go Constants e.g. nil, string format (%s, %d, etc.)",
+      "scope": [
+        "source.go constant.language.go",
+        "source.go constant.other.placeholder.go"
+      ],
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "C++ Functions",
+      "scope": [
+        "entity.name.function.preprocessor.cpp",
+        "entity.scope.name.cpp"
+      ],
+      "settings": {
+        "foreground": "#0c969bff"
+      }
+    },
+    {
+      "name": "C++ Meta Namespace",
+      "scope": ["meta.namespace-block.cpp"],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "C++ Language Primitive Storage",
+      "scope": ["storage.type.language.primitive.cpp"],
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "C++ Preprocessor Macro",
+      "scope": ["meta.preprocessor.macro.cpp"],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "C++ Variable Parameter",
+      "scope": ["variable.parameter"],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Powershell Variables",
+      "scope": ["variable.other.readwrite.powershell"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Powershell Function",
+      "scope": ["support.function.powershell"],
+      "settings": {
+        "foreground": "#0c969bff"
+      }
+    },
+    {
+      "name": "ID Attribute Name in HTML",
+      "scope": "entity.other.attribute-name.id.html",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "HTML Punctuation Definition Tag",
+      "scope": "punctuation.definition.tag.html",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "HTML Doctype",
+      "scope": "meta.tag.sgml.doctype.html",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "JavaScript Classes",
+      "scope": "meta.class entity.name.type.class.js",
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "JavaScript Method Declaration e.g. `constructor`",
+      "scope": "meta.method.declaration storage.type.js",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "JavaScript Terminator",
+      "scope": "terminator.js",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "JavaScript Meta Punctuation Definition",
+      "scope": "meta.js punctuation.definition.js",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Entity Names in Code Documentations",
+      "scope": [
+        "entity.name.type.instance.jsdoc",
+        "entity.name.type.instance.phpdoc"
+      ],
+      "settings": {
+        "foreground": "#5f7e97"
+      }
+    },
+    {
+      "name": "Other Variables in Code Documentations",
+      "scope": ["variable.other.jsdoc", "variable.other.phpdoc"],
+      "settings": {
+        "foreground": "#78ccf0"
+      }
+    },
+    {
+      "name": "JavaScript module imports and exports",
+      "scope": [
+        "variable.other.meta.import.js",
+        "meta.import.js variable.other",
+        "variable.other.meta.export.js",
+        "meta.export.js variable.other"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "JavaScript Variable Parameter Function",
+      "scope": "variable.parameter.function.js",
+      "settings": {
+        "foreground": "#7986E7"
+      }
+    },
+    {
+      "name": "JavaScript[React] Variable Other Object",
+      "scope": [
+        "variable.other.object.js",
+        "variable.other.object.jsx",
+        "variable.object.property.js",
+        "variable.object.property.jsx"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "JavaScript Variables",
+      "scope": ["variable.js", "variable.other.js"],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "JavaScript Entity Name Type",
+      "scope": ["entity.name.type.js", "entity.name.type.module.js"],
+      "settings": {
+        "foreground": "#111111",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "JavaScript Support Classes",
+      "scope": "support.class.js",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "JSON Property Names",
+      "scope": "support.type.property-name.json",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "JSON Support Constants",
+      "scope": "support.constant.json",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "JSON Property values (string)",
+      "scope": "meta.structure.dictionary.value.json string.quoted.double",
+      "settings": {
+        "foreground": "#c789d6"
+      }
+    },
+    {
+      "name": "Strings in JSON values",
+      "scope": "string.quoted.double.json punctuation.definition.string.json",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Specific JSON Property values like null",
+      "scope": "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "JavaScript Other Variable",
+      "scope": "variable.other.object.js",
+      "settings": {
+        "foreground": "#0c969b",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Ruby Variables",
+      "scope": ["variable.other.ruby"],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Ruby Class",
+      "scope": ["entity.name.type.class.ruby"],
+      "settings": {
+        "foreground": "#c96765"
+      }
+    },
+    {
+      "name": "Ruby Hashkeys",
+      "scope": "constant.language.symbol.hashkey.ruby",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Ruby Symbols",
+      "scope": "constant.language.symbol.ruby",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "LESS Tag names",
+      "scope": "entity.name.tag.less",
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "LESS Keyword Other Unit",
+      "scope": "keyword.other.unit.css",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Attribute Name for LESS",
+      "scope": "meta.attribute-selector.less entity.other.attribute-name.attribute",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Markdown Headings",
+      "scope": [
+        "markup.heading",
+        "markup.heading.setext.1",
+        "markup.heading.setext.2"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Markdown Italics",
+      "scope": "markup.italic",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Markdown Bold",
+      "scope": "markup.bold",
+      "settings": {
+        "foreground": "#4876d6",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Markdown Quote + others",
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#697098",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Markdown Raw Code + others",
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Markdown Links",
+      "scope": [
+        "markup.underline.link",
+        "markup.underline.link.image"
+      ],
+      "settings": {
+        "foreground": "#ff869a"
+      }
+    },
+    {
+      "name": "Markdown Link Title and Description",
+      "scope": [
+        "string.other.link.title.markdown",
+        "string.other.link.description.markdown"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Markdown Punctuation",
+      "scope": [
+        "punctuation.definition.string.markdown",
+        "punctuation.definition.string.begin.markdown",
+        "punctuation.definition.string.end.markdown",
+        "meta.link.inline.markdown punctuation.definition.string"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Markdown MetaData Punctuation",
+      "scope": ["punctuation.definition.metadata.markdown"],
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Markdown List Punctuation",
+      "scope": ["beginning.punctuation.definition.list.markdown"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Markdown Inline Raw String",
+      "scope": "markup.inline.raw.string.markdown",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "PHP Variables",
+      "scope": ["variable.other.php", "variable.other.property.php"],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Support Classes in PHP",
+      "scope": "support.class.php",
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Punctuations in PHP function calls",
+      "scope": "meta.function-call.php punctuation",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "PHP Global Variables",
+      "scope": "variable.other.global.php",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Declaration Punctuation in PHP Global Variables",
+      "scope": "variable.other.global.php punctuation.definition.variable",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Language Constants in Python",
+      "scope": "constant.language.python",
+      "settings": {
+        "foreground": "#bc5454"
+      }
+    },
+    {
+      "name": "Python Function Parameter and Arguments",
+      "scope": [
+        "variable.parameter.function.python",
+        "meta.function-call.arguments.python"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Python Function Call",
+      "scope": [
+        "meta.function-call.python",
+        "meta.function-call.generic.python"
+      ],
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "Punctuations in Python",
+      "scope": "punctuation.python",
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Decorator Functions in Python",
+      "scope": "entity.name.function.decorator.python",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Python Language Variable",
+      "scope": "source.python variable.language.special",
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Python import control keyword",
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "#994cc3",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "SCSS Variable",
+      "scope": [
+        "variable.scss",
+        "variable.sass",
+        "variable.parameter.url.scss",
+        "variable.parameter.url.sass"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Variables in SASS At-Rules",
+      "scope": [
+        "source.css.scss meta.at-rule variable",
+        "source.css.sass meta.at-rule variable"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "Variables in SASS At-Rules",
+      "scope": [
+        "source.css.scss meta.at-rule variable",
+        "source.css.sass meta.at-rule variable"
+      ],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "Attribute Name for SASS",
+      "scope": [
+        "meta.attribute-selector.scss entity.other.attribute-name.attribute",
+        "meta.attribute-selector.sass entity.other.attribute-name.attribute"
+      ],
+      "settings": {
+        "foreground": "#aa0982"
+      }
+    },
+    {
+      "name": "Tag names in SASS",
+      "scope": ["entity.name.tag.scss", "entity.name.tag.sass"],
+      "settings": {
+        "foreground": "#0c969b"
+      }
+    },
+    {
+      "name": "SASS Keyword Other Unit",
+      "scope": ["keyword.other.unit.scss", "keyword.other.unit.sass"],
+      "settings": {
+        "foreground": "#994cc3"
+      }
+    },
+    {
+      "name": "TypeScript[React] Variables and Object Properties",
+      "scope": [
+        "variable.other.readwrite.alias.ts",
+        "variable.other.readwrite.alias.tsx",
+        "variable.other.readwrite.ts",
+        "variable.other.readwrite.tsx",
+        "variable.other.object.ts",
+        "variable.other.object.tsx",
+        "variable.object.property.ts",
+        "variable.object.property.tsx",
+        "variable.other.ts",
+        "variable.other.tsx",
+        "variable.tsx",
+        "variable.ts"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "TypeScript[React] Entity Name Types",
+      "scope": ["entity.name.type.ts", "entity.name.type.tsx"],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "TypeScript[React] Node Classes",
+      "scope": ["support.class.node.ts", "support.class.node.tsx"],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "TypeScript[React] Entity Name Types as Parameters",
+      "scope": [
+        "meta.type.parameters.ts entity.name.type",
+        "meta.type.parameters.tsx entity.name.type"
+      ],
+      "settings": {
+        "foreground": "#5f7e97"
+      }
+    },
+    {
+      "name": "TypeScript[React] Import/Export Punctuations",
+      "scope": [
+        "meta.import.ts punctuation.definition.block",
+        "meta.import.tsx punctuation.definition.block",
+        "meta.export.ts punctuation.definition.block",
+        "meta.export.tsx punctuation.definition.block"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "TypeScript[React] Punctuation Decorators",
+      "scope": [
+        "meta.decorator punctuation.decorator.ts",
+        "meta.decorator punctuation.decorator.tsx"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "TypeScript[React] Punctuation Decorators",
+      "scope": "meta.tag.js meta.jsx.children.tsx",
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "YAML Entity Name Tags",
+      "scope": "entity.name.tag.yaml",
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "JavaScript Variable Other ReadWrite",
+      "scope": ["variable.other.readwrite.js", "variable.parameter"],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "Support Class Component",
+      "scope": ["support.class.component.js", "support.class.component.tsx"],
+      "settings": {
+        "foreground": "#aa0982",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Text nested in React tags",
+      "scope": [
+        "meta.jsx.children",
+        "meta.jsx.children.js",
+        "meta.jsx.children.tsx"
+      ],
+      "settings": {
+        "foreground": "#403f53"
+      }
+    },
+    {
+      "name": "TypeScript Classes",
+      "scope": "meta.class entity.name.type.class.tsx",
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "TypeScript Entity Name Type",
+      "scope": ["entity.name.type.tsx", "entity.name.type.module.tsx"],
+      "settings": {
+        "foreground": "#111111"
+      }
+    },
+    {
+      "name": "TypeScript Class Variable Keyword",
+      "scope": [
+        "meta.class.ts meta.var.expr.ts storage.type.ts",
+        "meta.class.tsx meta.var.expr.tsx storage.type.tsx"
+      ],
+      "settings": {
+        "foreground": "#994CC3"
+      }
+    },
+    {
+      "name": "TypeScript Method Declaration e.g. `constructor`",
+      "scope": [
+        "meta.method.declaration storage.type.ts",
+        "meta.method.declaration storage.type.tsx"
+      ],
+      "settings": {
+        "foreground": "#4876d6"
+      }
+    },
+    {
+      "name": "normalize font style of certain components",
+      "scope": [
+        "meta.property-list.css meta.property-value.css variable.other.less",
+        "meta.property-list.scss variable.scss",
+        "meta.property-list.sass variable.sass",
+        "meta.brace",
+        "keyword.operator.operator",
+        "keyword.operator.or.regexp",
+        "keyword.operator.expression.in",
+        "keyword.operator.relational",
+        "keyword.operator.assignment",
+        "keyword.operator.comparison",
+        "keyword.operator.type",
+        "keyword.operator",
+        "keyword",
+        "punctuation.definintion.string",
+        "punctuation",
+        "variable.other.readwrite.js",
+        "storage.type",
+        "source.css",
+        "string.quoted"
+      ],
+      "settings": {
+        "fontStyle": ""
+      }
+    }
+  ]
+}

components/editor/night.json

@@ -0,0 +1,347 @@
+{
+  "inherit": true,
+  "rules": [
+    {
+      "background": "24292e",
+      "token": ""
+    },
+    {
+      "foreground": "959da5",
+      "token": "comment"
+    },
+    {
+      "foreground": "959da5",
+      "token": "punctuation.definition.comment"
+    },
+    {
+      "foreground": "959da5",
+      "token": "string.comment"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "entity.name.constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "variable.other.constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "b392f0",
+      "token": "entity"
+    },
+    {
+      "foreground": "b392f0",
+      "token": "entity.name"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "variable.parameter.function"
+    },
+    {
+      "foreground": "7bcc72",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "ea4a5a",
+      "token": "keyword"
+    },
+    {
+      "foreground": "ea4a5a",
+      "token": "storage"
+    },
+    {
+      "foreground": "ea4a5a",
+      "token": "storage.type"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "storage.modifier.package"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "storage.modifier.import"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "storage.type.java"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "punctuation.definition.string"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string punctuation.section.embedded source"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "support"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "meta.property-name"
+    },
+    {
+      "foreground": "fb8532",
+      "token": "variable"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "variable.other"
+    },
+    {
+      "foreground": "d73a49",
+      "fontStyle": "bold italic underline",
+      "token": "invalid.broken"
+    },
+    {
+      "foreground": "d73a49",
+      "fontStyle": "bold italic underline",
+      "token": "invalid.deprecated"
+    },
+    {
+      "foreground": "fafbfc",
+      "background": "d73a49",
+      "fontStyle": "italic underline",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "fafbfc",
+      "background": "d73a49",
+      "fontStyle": "italic underline",
+      "token": "carriage-return"
+    },
+    {
+      "foreground": "d73a49",
+      "fontStyle": "bold italic underline",
+      "token": "invalid.unimplemented"
+    },
+    {
+      "foreground": "d73a49",
+      "token": "message.error"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "string source"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "string variable"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "source.regexp"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp.character-class"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp constant.character.escape"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp source.ruby.embedded"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp string.regexp.arbitrary-repitition"
+    },
+    {
+      "foreground": "7bcc72",
+      "fontStyle": "bold",
+      "token": "string.regexp constant.character.escape"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "support.variable"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "meta.module-reference"
+    },
+    {
+      "foreground": "fb8532",
+      "token": "markup.list"
+    },
+    {
+      "foreground": "0366d6",
+      "fontStyle": "bold",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "0366d6",
+      "fontStyle": "bold",
+      "token": "markup.heading entity.name"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "markup.quote"
+    },
+    {
+      "foreground": "f6f8fa",
+      "fontStyle": "italic",
+      "token": "markup.italic"
+    },
+    {
+      "foreground": "f6f8fa",
+      "fontStyle": "bold",
+      "token": "markup.bold"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "markup.raw"
+    },
+    {
+      "foreground": "b31d28",
+      "background": "ffeef0",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "b31d28",
+      "background": "ffeef0",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "b31d28",
+      "background": "ffeef0",
+      "token": "punctuation.definition.deleted"
+    },
+    {
+      "foreground": "176f2c",
+      "background": "f0fff4",
+      "token": "markup.inserted"
+    },
+    {
+      "foreground": "176f2c",
+      "background": "f0fff4",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "176f2c",
+      "background": "f0fff4",
+      "token": "punctuation.definition.inserted"
+    },
+    {
+      "foreground": "b08800",
+      "background": "fffdef",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "b08800",
+      "background": "fffdef",
+      "token": "punctuation.definition.changed"
+    },
+    {
+      "foreground": "2f363d",
+      "background": "959da5",
+      "token": "markup.ignored"
+    },
+    {
+      "foreground": "2f363d",
+      "background": "959da5",
+      "token": "markup.untracked"
+    },
+    {
+      "foreground": "b392f0",
+      "fontStyle": "bold",
+      "token": "meta.diff.range"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "meta.diff.header"
+    },
+    {
+      "foreground": "0366d6",
+      "fontStyle": "bold",
+      "token": "meta.separator"
+    },
+    {
+      "foreground": "0366d6",
+      "token": "meta.output"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.tag"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.curly"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.round"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.square"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.angle"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.quote"
+    },
+    {
+      "foreground": "d73a49",
+      "token": "brackethighlighter.unmatched"
+    },
+    {
+      "foreground": "d73a49",
+      "token": "sublimelinter.mark.error"
+    },
+    {
+      "foreground": "fb8532",
+      "token": "sublimelinter.mark.warning"
+    },
+    {
+      "foreground": "6a737d",
+      "token": "sublimelinter.gutter-mark"
+    },
+    {
+      "foreground": "79b8ff",
+      "fontStyle": "underline",
+      "token": "constant.other.reference.link"
+    },
+    {
+      "foreground": "79b8ff",
+      "fontStyle": "underline",
+      "token": "string.other.link"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#f6f8fa",
+    "editor.background": "#24292e",
+    "editor.selectionBackground": "#4c2889",
+    "editor.inactiveSelectionBackground": "#444d56",
+    "editor.lineHighlightBackground": "#444d56",
+    "editorCursor.foreground": "#ffffff",
+    "editorWhitespace.foreground": "#6a737d",
+    "editorIndentGuide.background": "#6a737d",
+    "editorIndentGuide.activeBackground": "#f6f8fa",
+    "editor.selectionHighlightBorder": "#444d56"
+  }
+}

components/grid-pattern/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+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-gray-400 -z-1 dark:fill-gray-600/30 dark:stroke-gray-600",
+        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>
+  );
+}

components/loading/index.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+
+function Loading({
+  overlay = true,
+  className,
+}: {
+  overlay?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("", {
+        "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-primary ${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;

components/not-found/buttons.tsx

@@ -0,0 +1,16 @@
+"use client";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export function NotFoundButtons() {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <Link href="/">
+        <Button size="lg">Return Home</Button>
+      </Link>
+      <Button size="lg" variant="outline" onClick={() => window.history.back()}>
+        Back to previous page
+      </Button>
+    </div>
+  );
+}