ui

app/api/ask/route.ts

@@ -78,19 +78,10 @@ export async function POST(request: Request) {
               : []),
             {
               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")}`
-    : ""
-}
-            `,
+              content: `${
+                redesignMd?.url &&
+                `Redesign the following website ${redesignMd.url}, try to use the same images and content, but you can still improve it if needed. Do the best version possibile. Here is the markdown:\n ${redesignMd.md} \n\n`
+              }${prompt}`,
             },
           ],
           stream: true,

components/ask-ai/ask-ai.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ArrowUp, Paintbrush, X } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { HiStop } from "react-icons/hi2";
 import { useLocalStorage, useMount } from "react-use";
 import { useRouter } from "next/navigation";
@@ -15,8 +15,6 @@ 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,
@@ -34,6 +32,7 @@ export function AskAI({
   isHistoryView?: boolean;
   projectName?: string;
 }) {
+  const contentEditableRef = useRef<HTMLDivElement | null>(null);
   const [prompt, setPrompt] = useState(initialPrompt ?? "");
   const [model = MODELS[0].value, setModel] = useLocalStorage<string>(
     "model",
@@ -81,6 +80,9 @@ export function AskAI({
 
   const onSubmit = () => {
     if (isHistoryView) return;
+    if (contentEditableRef.current) {
+      contentEditableRef.current.innerHTML = "";
+    }
     callAi({ prompt, model, onComplete, provider, redesignMd });
   };
 
@@ -92,6 +94,7 @@ export function AskAI({
       )}
     >
       <InputMentions
+        ref={contentEditableRef}
         files={files}
         prompt={prompt}
         setPrompt={setPrompt}
@@ -145,7 +148,11 @@ export function AskAI({
             <Button
               size="icon-sm"
               className="rounded-full!"
-              disabled={!prompt.trim() || isLoading || isHistoryView}
+              disabled={
+                isHistoryView ||
+                isLoading ||
+                (prompt.trim() === "" && !redesignMd)
+              }
               onClick={onSubmit}
             >
               <ArrowUp />

components/ask-ai/input-mentions.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, RefObject } from "react";
 import { useClickAway } from "react-use";
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -7,12 +7,14 @@ import { File } from "@/lib/type";
 import { Braces, FileCode, FileText } from "lucide-react";
 
 export function InputMentions({
+  ref,
   prompt,
   files,
   setPrompt,
   redesignMdUrl,
   onSubmit,
 }: {
+  ref: RefObject<HTMLDivElement | null>;
   prompt: string;
   files?: File[] | null;
   redesignMdUrl?: string;
@@ -22,7 +24,6 @@ export function InputMentions({
   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[]>([]);
 
@@ -51,10 +52,10 @@ export function InputMentions({
   };
 
   const extractPromptWithIds = (): string => {
-    if (!contentEditableRef.current) return "";
+    if (!ref.current) return "";
 
     let text = "";
-    const childNodes = contentEditableRef.current.childNodes;
+    const childNodes = ref.current.childNodes;
 
     for (let i = 0; i < childNodes.length; i++) {
       const node = childNodes[i];
@@ -77,7 +78,7 @@ export function InputMentions({
     textBeforeCursor: string;
   } => {
     const selection = window.getSelection();
-    if (!selection || !contentEditableRef.current) {
+    if (!selection || !ref.current) {
       return { detect: false, textBeforeCursor: "" };
     }
 
@@ -113,10 +114,10 @@ export function InputMentions({
   };
 
   const handleInput = async () => {
-    if (!contentEditableRef.current) return;
-    const text = getTextContent(contentEditableRef.current);
+    if (!ref.current) return;
+    const text = getTextContent(ref.current);
     if (text.trim() === "") {
-      contentEditableRef.current.innerHTML = "";
+      ref.current.innerHTML = "";
     }
     setPrompt(text);
 
@@ -150,7 +151,7 @@ export function InputMentions({
   };
 
   const insertMention = (mentionId: string) => {
-    if (!contentEditableRef.current) return;
+    if (!ref.current) return;
 
     const selection = window.getSelection();
     if (!selection || selection.rangeCount === 0) return;
@@ -201,7 +202,7 @@ export function InputMentions({
       selection.removeAllRanges();
       selection.addRange(newRange);
 
-      const newText = getTextContent(contentEditableRef.current);
+      const newText = getTextContent(ref.current);
       setPrompt(newText);
       setShowMentionDropdown(false);
       setMentionSearch("");
@@ -217,8 +218,8 @@ export function InputMentions({
       setPrompt(promptWithIds);
       onSubmit();
 
-      if (contentEditableRef.current) {
-        contentEditableRef.current.innerHTML = "";
+      if (ref.current) {
+        ref.current.innerHTML = "";
       }
       setPrompt("");
       setShowMentionDropdown(false);
@@ -228,12 +229,8 @@ export function InputMentions({
   };
 
   useEffect(() => {
-    if (
-      contentEditableRef.current &&
-      prompt === "" &&
-      contentEditableRef.current.innerHTML !== ""
-    ) {
-      contentEditableRef.current.innerHTML = "";
+    if (ref.current && prompt === "" && ref.current.innerHTML !== "") {
+      ref.current.innerHTML = "";
     }
   }, [prompt]);
 
@@ -247,12 +244,12 @@ export function InputMentions({
     <div className="relative">
       <div
         id="prompt-input"
-        ref={contentEditableRef}
+        ref={ref}
         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}...`
+            ? `I'll redesign ${redesignMdUrl}, want to add something?`
             : files && files.length > 0
             ? "Ask me anything. Type @ to mention a file..."
             : "Ask me anything..."

components/code/index.tsx

@@ -13,12 +13,12 @@ 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";
 
+// todo: while no them setted but in dark mode, the dark theme is not setted correctly.
+
 export function AppEditorCode() {
   const queryClient = useQueryClient();
-  const { isManuallyUpdatedSameAsFiles } = useManualUpdates();
   const { repoId } = useParams<{ repoId: string }>();
 
   const [isFileExplorerCollapsed, setIsFileExplorerCollapsed] = useState(true);
@@ -175,12 +175,11 @@ export function AppEditorCode() {
               </p>
             </div>
             <div className="flex items-center justify-end gap-2">
-              {!isSavingChangesSuccess ||
-                (!isSavingChanges && (
-                  <Button size="xs" variant="secondary" onClick={undoChanges}>
-                    Undo
-                  </Button>
-                ))}
+              {!isSavingChangesSuccess && !isSavingChanges && (
+                <Button size="xs" variant="secondary" onClick={undoChanges}>
+                  Undo
+                </Button>
+              )}
 
               {isSavingChangesSuccess || isSavingChangesError ? (
                 <Button

components/editor/index.tsx

@@ -74,12 +74,12 @@ export function AppEditor({
   return (
     <SandpackProvider
       template="static"
-      // options={{
-      //   initMode: "immediate",
-      //   autoReload: false,
-      //   recompileDelay: 3000,
-      //   recompileMode: "immediate",
-      // }}
+      options={{
+        initMode: "immediate",
+        autoReload: false,
+        recompileDelay: 3000,
+        recompileMode: "immediate",
+      }}
       files={sandpackFiles}
       // id={projectName}
       // key={projectName}

components/user-menu/index.tsx

@@ -32,14 +32,14 @@ export function UserMenu() {
         newUrl.searchParams.delete("signin");
         window.history.replaceState({}, "", newUrl.toString());
 
-        signIn("huggingface", { callbackUrl: "/" });
+        signIn("huggingface", { callbackUrl: "/deepsite" });
       }
     }
   }, [session, status]);
 
   const handleSignIn = () => {
     if (window.location.hostname === "localhost") {
-      signIn("huggingface", { callbackUrl: "/" });
+      signIn("huggingface", { callbackUrl: "/deepsite" });
       return;
     }
     const targetUrl = "https://enzostvs-deepsite-v4-demo.hf.space";
@@ -66,7 +66,7 @@ export function UserMenu() {
     if (!isOnTargetPage) {
       window.open(`${targetUrl}?signin=true`, "_blank");
     } else {
-      signIn("huggingface", { callbackUrl: "/" });
+      signIn("huggingface", { callbackUrl: "/deepsite" });
     }
   };
 

lib/auth.ts

@@ -52,12 +52,13 @@ export const authConfig = {
     authorized({ auth, request: { nextUrl } }) {
       const isLoggedIn = !!auth?.user;
       const isOnNew = nextUrl.pathname.startsWith("/new");
-      
+
       const pathSegments = nextUrl.pathname.split("/").filter(Boolean);
-      const isOnProjectPage = pathSegments.length >= 2 && 
-                              !nextUrl.pathname.startsWith("/new") &&
-                              !nextUrl.pathname.startsWith("/api");
-      
+      const isOnProjectPage =
+        pathSegments.length >= 2 &&
+        !nextUrl.pathname.startsWith("/new") &&
+        !nextUrl.pathname.startsWith("/api");
+
       if (isOnProjectPage || isOnNew) {
         if (isLoggedIn) return true;
         return false;
@@ -73,4 +74,3 @@ export const authConfig = {
 } satisfies NextAuthConfig;
 
 export const { handlers, auth, signIn, signOut } = NextAuth(authConfig);
-

lib/format.ts

@@ -9,6 +9,8 @@ import {
 } from "./prompts";
 import { File } from "./type";
 
+// todo: the Editing stuffs in message doesnt show when it"s a SEARCH and REPLACE operation, I mean it shows it but only at the end of the message, not during the generation. fix that.
+
 /**
  * Validates that a filename has an extension.
  * Returns the filename if valid, null otherwise.

next.config.ts

@@ -1,14 +1,13 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  // todo: active this before deployment in production.
-  // basePath: '/deepsite',
-  // assetPrefix: '/deepsite',
+  // basePath: "/deepsite",
+  // assetPrefix: "/deepsite",
   // async redirects() {
   //   return [
   //     {
-  //       source: '/',
-  //       destination: '/deepsite',
+  //       source: "/",
+  //       destination: "/deepsite",
   //       permanent: true,
   //       basePath: false,
   //     },