Add prompt when redesign website

app/api/ask/route.ts

@@ -80,12 +80,6 @@ export async function POST(request: NextRequest) {
     billTo = "huggingface";
   }
 
-  let rewrittenPrompt = redesignMarkdown ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : prompt;
-
-  if (enhancedSettings.isActive) {
-    // rewrittenPrompt = await rewritePrompt(rewrittenPrompt, enhancedSettings, { token, billTo }, selectedModel.value, selectedProvider.provider);
-  }
-
   try {
     const encoder = new TextEncoder();
     const stream = new TransformStream();
@@ -107,8 +101,8 @@ export async function POST(request: NextRequest) {
           ? INITIAL_SYSTEM_PROMPT_LIGHT 
           : INITIAL_SYSTEM_PROMPT;
         
-        const userPrompt = rewrittenPrompt;
-        
+        const userPrompt = prompt;
+                
         const chatCompletion = client.chatCompletionStream(
           {
             model: selectedModel.value + (provider !== "auto" ? `:${provider}` : ""),
@@ -117,6 +111,10 @@ export async function POST(request: NextRequest) {
                 role: "system",
                 content: systemPrompt,
               },
+              ...(redesignMarkdown ? [{
+                role: "assistant",
+                content: `User will ask you to redesign the site based on this markdown. Use the same images as the site, but you can improve the content and the design. Here is the markdown: ${redesignMarkdown}`
+              }] : []),
               {
                 role: "user",
                 content: userPrompt + (enhancedSettings.isActive ? `1. I want to use the following primary color: ${enhancedSettings.primaryColor} (eg: bg-${enhancedSettings.primaryColor}-500).

components/editor/ask-ai/index.tsx

@@ -22,6 +22,7 @@ import { Settings } from "./settings";
 import { useProModal } from "@/components/contexts/pro-context";
 import { MAX_FREE_PROJECTS } from "@/lib/utils";
 import { PROMPTS_FOR_AI } from "@/lib/prompts";
+import { SelectedRedesignUrl } from "./selected-redesign-url";
 
 export const AskAi = ({
   project,
@@ -52,6 +53,9 @@ export const AskAi = ({
   const { openProModal } = useProModal();
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
+  const [redesignData, setRedesignData] = useState<
+    undefined | { markdown: string; url: string }
+  >(undefined);
   const refThink = useRef<HTMLDivElement>(null);
 
   const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
@@ -76,7 +80,7 @@ export const AskAi = ({
     }
   });
 
-  const callAi = async (redesignMarkdown?: string) => {
+  const callAi = async (redesignMarkdown?: string | undefined) => {
     removePromptStorage();
     if (user && !user.isPro && projects.length >= MAX_FREE_PROJECTS)
       return openProModal([]);
@@ -218,6 +222,15 @@ export const AskAi = ({
             />
           </div>
         )}
+        {redesignData && (
+          <div className="px-4 pt-3">
+            <SelectedRedesignUrl
+              url={redesignData.url}
+              isAiWorking={isAiWorking}
+              onDelete={() => setRedesignData(undefined)}
+            />
+          </div>
+        )}
         <div className="w-full relative flex items-center justify-between">
           {(isAiWorking || isUploading || isThinking || isLoadingProject) && (
             <div className="absolute bg-neutral-800 top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
@@ -259,6 +272,8 @@ export const AskAi = ({
             placeholder={
               selectedElement
                 ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
+                : redesignData
+                ? "Ask DeepSite anything about the redesign of your site..."
                 : isFollowUp && (!isSameHtml || pages?.length > 1)
                 ? "Ask DeepSite for edits"
                 : "Ask DeepSite anything..."
@@ -303,7 +318,13 @@ export const AskAi = ({
               onClose={setOpenProvider}
             />
             {!isNew && <Uploader project={project} />}
-            {isNew && <ReImagine onRedesign={(md) => callAi(md)} />}
+            {isNew && (
+              <ReImagine
+                onRedesign={(md, url) =>
+                  setRedesignData({ markdown: md, url: url })
+                }
+              />
+            )}
             {!isNew && !isSameHtml && <Selector />}
           </div>
           <div className="flex items-center justify-end gap-2">
@@ -312,9 +333,11 @@ export const AskAi = ({
               variant="outline"
               className="!rounded-md"
               disabled={
-                isAiWorking || isUploading || isThinking || !prompt.trim()
+                !!redesignData?.url?.trim()
+                  ? false
+                  : isAiWorking || isUploading || isThinking || !prompt.trim()
               }
-              onClick={() => callAi()}
+              onClick={() => callAi(redesignData?.markdown)}
             >
               <ArrowUp className="size-4" />
             </Button>

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

@@ -13,11 +13,12 @@ import Loading from "@/components/loading";
 import { api } from "@/lib/api";
 import { useAi } from "@/hooks/useAi";
 import { useEditor } from "@/hooks/useEditor";
+import classNames from "classnames";
 
 export function ReImagine({
   onRedesign,
 }: {
-  onRedesign: (md: string) => void;
+  onRedesign: (md: string, url: string) => void;
 }) {
   const [url, setUrl] = useState<string>("");
   const [open, setOpen] = useState(false);
@@ -49,8 +50,8 @@ export function ReImagine({
     });
     if (response?.data?.ok) {
       setOpen(false);
+      onRedesign(response.data.markdown, url.trim());
       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.");
@@ -117,6 +118,11 @@ export function ReImagine({
                   }
                   setUrl(inputUrl);
                 }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleClick();
+                  }
+                }}
                 className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
               />
             </div>

components/editor/ask-ai/selected-redesign-url.tsx

@@ -0,0 +1,37 @@
+import classNames from "classnames";
+import { Paintbrush, XCircle } from "lucide-react";
+
+export const SelectedRedesignUrl = ({
+  url,
+  isAiWorking = false,
+  onDelete,
+}: {
+  url: string;
+  isAiWorking: boolean;
+  onDelete?: () => void;
+}) => {
+  return (
+    <div
+      className={classNames(
+        "border border-emerald-500/50 bg-emerald-500/10 rounded-xl p-1.5 pr-3 max-w-max hover:brightness-110 transition-all duration-200 ease-in-out",
+        {
+          "cursor-pointer": !isAiWorking,
+          "opacity-50 cursor-not-allowed": isAiWorking,
+        }
+      )}
+      onClick={() => {
+        if (!isAiWorking && onDelete) {
+          onDelete();
+        }
+      }}
+    >
+      <div className="flex items-center justify-start gap-2">
+        <div className="rounded-lg bg-emerald-500/20 size-6 flex items-center justify-center">
+          <Paintbrush className="text-emerald-300 size-3.5" />
+        </div>
+        <p className="text-sm font-semibold text-emerald-200">{url}</p>
+        <XCircle className="text-emerald-300 size-4 hover:text-emerald-200 transition-colors" />
+      </div>
+    </div>
+  );
+};