add more

app/api/ask-ai/route.ts

@@ -22,7 +22,7 @@ export async function POST(request: NextRequest) {
   const userToken = request.cookies.get(MY_TOKEN_KEY())?.value;
 
   const body = await request.json();
-  const { prompt, provider, model, redesignMarkdown } = body;
+  const { prompt, provider, model, redesignMarkdown, html } = body;
 
   if (!model || (!prompt && !redesignMarkdown)) {
     return NextResponse.json(
@@ -107,7 +107,6 @@ export async function POST(request: NextRequest) {
       },
     });
 
-    // Process in background
     (async () => {
       let completeResponse = "";
       try {
@@ -125,6 +124,8 @@ export async function POST(request: NextRequest) {
                 role: "user",
                 content: redesignMarkdown
                   ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.`
+                  : html
+                  ? `Here is my current HTML code:\n\n\`\`\`html\n${html}\n\`\`\`\n\nNow, please create a new design based on this HTML.`
                   : prompt,
               },
             ],
@@ -294,9 +295,12 @@ export async function PUT(request: NextRequest) {
           },
           {
             role: "assistant",
-            content: selectedElementHtml
-              ? `Here is the selected HTML element:\n\n${selectedElementHtml}`
-              : `The current code is: \n\`\`\`html\n${html}\n\`\`\``,
+
+            content: `The current code is: \n\`\`\`html\n${html}\n\`\`\` ${
+              selectedElementHtml
+                ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\``
+                : ""
+            }`,
           },
           {
             role: "user",

app/api/re-design/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+
+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 response = await fetch(
+      `https://r.jina.ai/${encodeURIComponent(url)}`,
+      {
+        method: "POST",
+      }
+    );
+    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 }
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || "An error occurred" },
+      { status: 500 }
+    );
+  }
+}

components/contexts/app-context.tsx

@@ -45,7 +45,6 @@ export default function AppContext({
 
     if (!message.code) return;
     if (message.type === "user-oauth" && message?.code && !events.code) {
-      console.log("Received code from broadcast channel:", message.code);
       loginFromCode(message.code);
     }
   });

components/editor/ask-ai/index.tsx

@@ -283,44 +283,7 @@ export function AskAI({
 
   return (
     <>
-      <div className="ml-auto select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5 max-w-max">
-        <label
-          htmlFor="follow-up-checkbox"
-          className="flex items-center gap-1.5 cursor-pointer"
-        >
-          <Checkbox
-            id="follow-up-checkbox"
-            checked={isFollowUp}
-            onCheckedChange={(e) => {
-              setIsFollowUp(e === true);
-            }}
-          />
-          Follow-Up
-        </label>
-        <Popover>
-          <PopoverTrigger asChild>
-            <Info className="size-3 text-neutral-300 cursor-pointer" />
-          </PopoverTrigger>
-          <PopoverContent
-            align="start"
-            className="!rounded-2xl !p-0 min-w-xs text-center overflow-hidden"
-          >
-            <header className="bg-neutral-950 px-4 py-3 border-b border-neutral-700/70">
-              <p className="text-base text-neutral-200 font-semibold">
-                What is a Follow-Up?
-              </p>
-            </header>
-            <main className="p-4">
-              <p className="text-sm text-neutral-400">
-                A Follow-Up is a request to DeepSite to edit the current HTML
-                instead of starting from scratch. This is useful when you want
-                to make small changes or improvements to the existing design.
-              </p>
-            </main>
-          </PopoverContent>
-        </Popover>
-      </div>
-      <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 w-full group">
+      <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 w-full group">
         {think && (
           <div className="w-full border-b border-neutral-700 relative overflow-hidden">
             <header
@@ -358,10 +321,11 @@ export function AskAI({
             </main>
           </div>
         )}
-        {!isAiWorking && selectedElement && (
+        {selectedElement && (
           <div className="px-4 pt-3">
             <SelectedHtmlElement
               element={selectedElement}
+              isAiWorking={isAiWorking}
               onDelete={() => setSelectedElement(null)}
             />
           </div>
@@ -466,6 +430,43 @@ export function AskAI({
           open={openProModal}
           onClose={() => setOpenProModal(false)}
         />
+        <div className="absolute top-0 right-0 -translate-y-[calc(100%+8px)] select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5">
+          <label
+            htmlFor="follow-up-checkbox"
+            className="flex items-center gap-1.5 cursor-pointer"
+          >
+            <Checkbox
+              id="follow-up-checkbox"
+              checked={isFollowUp}
+              onCheckedChange={(e) => {
+                setIsFollowUp(e === true);
+              }}
+            />
+            Follow-Up
+          </label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Info className="size-3 text-neutral-300 cursor-pointer" />
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              className="!rounded-2xl !p-0 min-w-xs text-center overflow-hidden"
+            >
+              <header className="bg-neutral-950 px-4 py-3 border-b border-neutral-700/70">
+                <p className="text-base text-neutral-200 font-semibold">
+                  What is a Follow-Up?
+                </p>
+              </header>
+              <main className="p-4">
+                <p className="text-sm text-neutral-400">
+                  A Follow-Up is a request to DeepSite to edit the current HTML
+                  instead of starting from scratch. This is useful when you want
+                  to make small changes or improvements to the existing design.
+                </p>
+              </main>
+            </PopoverContent>
+          </Popover>
+        </div>
       </div>
       <audio ref={audio} id="audio" className="hidden">
         <source src="/success.mp3" type="audio/mpeg" />

components/editor/ask-ai/re-imagine.tsx

@@ -39,25 +39,18 @@ export function ReImagine({
       toast.error("Please enter a valid URL.");
       return;
     }
-    // TODO implement the API call to redesign the site
-    // Here you would typically handle the re-design logic
     setIsLoading(true);
-    // const request = await api.post("/api/re-design", {
-    //   method: "POST",
-    //   body: JSON.stringify({ url }),
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    // });
-    // const response = await request.json();
-    // if (response.ok) {
-    //   setOpen(false);
-    //   setUrl("");
-    //   onRedesign(response.markdown);
-    //   toast.success("DeepSite is redesigning your site! Let him cook... 🔥");
-    // } else {
-    //   toast.error(response.message || "Failed to redesign the site.");
-    // }
+    const response = await api.put("/re-design", {
+      url: url.trim(),
+    });
+    if (response?.data?.ok) {
+      setOpen(false);
+      setUrl("");
+      onRedesign(response.data.markdown);
+      toast.success("DeepSite is redesigning your site! Let him cook... 🔥");
+    } else {
+      toast.error(response?.data?.error || "Failed to redesign the site.");
+    }
     setIsLoading(false);
   };
 

components/editor/ask-ai/selected-html-element.tsx

@@ -1,12 +1,16 @@
+import classNames from "classnames";
+import { Code, XCircle } from "lucide-react";
+
 import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { htmlTagToText } from "@/lib/html-tag-to-text";
-import { Code, XCircle } from "lucide-react";
 
 export const SelectedHtmlElement = ({
   element,
+  isAiWorking = false,
   onDelete,
 }: {
   element: HTMLElement | null;
+  isAiWorking: boolean;
   onDelete?: () => void;
 }) => {
   if (!element) return null;
@@ -14,8 +18,19 @@ export const SelectedHtmlElement = ({
   const tagName = element.tagName.toLowerCase();
   return (
     <Collapsible
-      className="border border-neutral-700 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out !cursor-pointer"
-      onClick={onDelete}
+      className={classNames(
+        "border border-neutral-700 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out !cursor-pointer",
+        {
+          "!cursor-pointer": !isAiWorking,
+          "opacity-50 !cursor-not-allowed": isAiWorking,
+        }
+      )}
+      disabled={isAiWorking}
+      onClick={() => {
+        if (!isAiWorking && onDelete) {
+          onDelete();
+        }
+      }}
     >
       <CollapsibleTrigger className="flex items-center justify-start gap-2 cursor-pointer">
         <div className="rounded-lg bg-neutral-700 size-6 flex items-center justify-center">

components/editor/deploy-button/index.tsx

@@ -67,11 +67,11 @@ export function DeployButton({
           <Popover>
             <PopoverTrigger asChild>
               <div>
-                <Button variant="sky" className="max-lg:hidden !px-4">
+                <Button variant="default" className="max-lg:hidden !px-4">
                   <MdSave className="size-4" />
                   Save your Project
                 </Button>
-                <Button variant="sky" size="sm" className="lg:hidden">
+                <Button variant="default" size="sm" className="lg:hidden">
                   Deploy
                 </Button>
               </div>

components/editor/footer/index.tsx

@@ -83,7 +83,7 @@ export function Footer({
             <span className="max-lg:hidden">DeepSite Gallery</span>
           </Button>
         </a>
-        <Button size="sm" variant="default" onClick={handleRefreshIframe}>
+        <Button size="sm" variant="outline" onClick={handleRefreshIframe}>
           <RefreshCcw className="size-3.5" />
           <span className="max-lg:hidden">Refresh Preview</span>
         </Button>

components/editor/history/index.tsx

@@ -51,14 +51,15 @@ export function History({
                       })}
                   </span>
                 </div>
-                <button
-                  className="bg-pink-500 text-white text-xs font-medium rounded-md px-2 py-1 transition-all duration-100 hover:bg-pink-600 cursor-pointer"
+                <Button
+                  variant="sky"
+                  size="xs"
                   onClick={() => {
                     setHtml(item.html);
                   }}
                 >
                   Select
-                </button>
+                </Button>
               </li>
             ))}
           </ul>

components/editor/index.tsx

@@ -197,7 +197,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                 language="html"
                 theme="vs-dark"
                 className={classNames(
-                  "max-lg:h-[calc(100%-82px)] h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
+                  "h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
                   {
                     "pointer-events-none": isAiWorking,
                   }
@@ -210,6 +210,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                   scrollbar: {
                     horizontal: "hidden",
                   },
+                  wordWrap: "on",
                 }}
                 value={html}
                 onChange={(value) => {

components/editor/preview/index.tsx

@@ -131,14 +131,8 @@ export const Preview = ({
         <div
           className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
           style={{
-            top:
-              selectedElement.getBoundingClientRect().top +
-              (iframeRef?.current?.contentWindow?.scrollY || 0) +
-              24,
-            left:
-              selectedElement.getBoundingClientRect().left +
-              (iframeRef?.current?.contentWindow?.scrollX || 0) +
-              24,
+            top: selectedElement.getBoundingClientRect().top + 24,
+            left: selectedElement.getBoundingClientRect().left + 24,
             width: selectedElement.getBoundingClientRect().width,
             height: selectedElement.getBoundingClientRect().height,
           }}

components/providers/tanstack-query-provider.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export default function TanstackProvider({
   children,
@@ -13,7 +12,7 @@ export default function TanstackProvider({
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   );
 }

components/space/ask-ai/index.tsx

@@ -9,9 +9,6 @@ import { Button } from "@/components/ui/button";
 export const AskAi = () => {
   return (
     <>
-      <div className="bg-red-500 flex items-center justify-end">
-        No Follow-up mode
-      </div>
       <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent group">
         <textarea
           rows={3}

hooks/useUser.ts

@@ -54,7 +54,6 @@ export const useUser = (initialData?: {
   };
 
   const loginFromCode = async (code: string) => {
-    console.log("Login from code => ", code);
     setLoadingAuth(true);
     if (loadingAuth) return;
     await api