fix: settings for localhost calls

app/api/ask-ai/route.ts

@@ -3,7 +3,6 @@ import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import OpenAI from "openai";
 
-import { MODELS } from "@/lib/providers";
 import {
   DIVIDER,
   FOLLOW_UP_SYSTEM_PROMPT,
@@ -14,7 +13,7 @@ import {
 
 export async function POST(request: NextRequest) {
   const body = await request.json();
-  const { prompt, model, redesignMarkdown, html, apiKey, customModel, baseUrl } = body;
+  const { prompt, model, redesignMarkdown, html, apiKey, baseUrl } = body;
 
   const openai = new OpenAI({
     apiKey: apiKey || process.env.OPENAI_API_KEY || "",
@@ -28,23 +27,11 @@ export async function POST(request: NextRequest) {
     );
   }
 
-  const selectedModel = MODELS.find(
-    (m) => m.value === model || m.label === model
-  );
-  if (!selectedModel) {
-    return NextResponse.json(
-      { ok: false, error: "Invalid model selected" },
-      { status: 400 }
-    );
-  }
-
   try {
-    // Create a stream response
     const encoder = new TextEncoder();
     const stream = new TransformStream();
     const writer = stream.writable.getWriter();
 
-    // Start the response
     const response = new NextResponse(stream.readable, {
       headers: {
         "Content-Type": "text/plain; charset=utf-8",
@@ -57,12 +44,10 @@ export async function POST(request: NextRequest) {
       let completeResponse = "";
       try {
         const chatCompletion = await openai.chat.completions.create({
-          model: customModel || selectedModel.value,
+          model,
+          stream: true,
           messages: [
-            {
-              role: "system",
-              content: INITIAL_SYSTEM_PROMPT,
-            },
+            { role: "system", content: INITIAL_SYSTEM_PROMPT },
             {
               role: "user",
               content: redesignMarkdown
@@ -72,16 +57,19 @@ export async function POST(request: NextRequest) {
                 : prompt,
             },
           ],
-          stream: true,
         });
 
         for await (const chunk of chatCompletion) {
           const content = chunk.choices[0]?.delta?.content || "";
-          await writer.write(encoder.encode(content));
+          if (!content) continue;
           completeResponse += content;
-          if (completeResponse.includes("</html>")) {
-            break;
-          }
+          await writer.write(encoder.encode(content));
+        }
+
+        if (!completeResponse.trim()) {
+          await writer.write(
+            encoder.encode("\n[ERROR] Model returned empty response.\n")
+          );
         }
       } catch (error: any) {
         await writer.write(
@@ -95,7 +83,7 @@ export async function POST(request: NextRequest) {
           )
         );
       } finally {
-        await writer?.close();
+        await writer.close();
       }
     })();
 
@@ -114,10 +102,18 @@ export async function POST(request: NextRequest) {
 
 export async function PUT(request: NextRequest) {
   const body = await request.json();
-  const { prompt, html, previousPrompt, selectedElementHtml, apiKey, model, baseUrl, customModel } = body;
+  const {
+    prompt,
+    html,
+    previousPrompt,
+    selectedElementHtml,
+    apiKey,
+    model,
+    baseUrl,
+  } = body;
 
   const openai = new OpenAI({
-    apiKey: apiKey || process.env.OPENAI_API_KEY,
+    apiKey: apiKey || process.env.OPENAI_API_KEY || "",
     baseURL: baseUrl || process.env.OPENAI_BASE_URL,
   });
 
@@ -128,116 +124,95 @@ export async function PUT(request: NextRequest) {
     );
   }
 
-  const selectedModel = MODELS.find(
-    (m) => m.value === model || m.label === model
-  );
-  if (!selectedModel) {
-    return NextResponse.json(
-      { ok: false, error: "Invalid model selected" },
-      { status: 400 }
-    );
-  }
-
   try {
     const response = await openai.chat.completions.create({
-      model: customModel || selectedModel.value,
+      model,
       messages: [
-        {
-          role: "system",
-          content: FOLLOW_UP_SYSTEM_PROMPT,
-        },
+        { role: "system", content: FOLLOW_UP_SYSTEM_PROMPT },
         {
           role: "user",
-          content: previousPrompt
-            ? previousPrompt
-            : "You are modifying the HTML file based on the user's request.",
+          content:
+            previousPrompt ||
+            "You are modifying the HTML file based on the user's request.",
         },
         {
           role: "assistant",
-          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",
-          content: prompt,
+          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", content: prompt },
       ],
     });
 
-    const chunk = response.choices[0]?.message?.content;
-    if (!chunk) {
+    const chunk = response.choices[0]?.message?.content || "";
+    if (!chunk.trim()) {
       return NextResponse.json(
-        { ok: false, message: "No content returned from the model" },
+        { ok: false, message: "Model returned empty response" },
         { status: 400 }
       );
     }
 
-    if (chunk) {
-      const updatedLines: number[][] = [];
-      let newHtml = html;
-      let position = 0;
-      let moreBlocks = true;
-
-      while (moreBlocks) {
-        const searchStartIndex = chunk.indexOf(SEARCH_START, position);
-        if (searchStartIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
+    // aplica os blocos de modificação SEARCH_START...DIVIDER...REPLACE_END
+    let newHtml = html;
+    const updatedLines: number[][] = [];
+    let position = 0;
+    let moreBlocks = true;
+
+    while (moreBlocks) {
+      const searchStartIndex = chunk.indexOf(SEARCH_START, position);
+      if (searchStartIndex === -1) {
+        moreBlocks = false;
+        continue;
+      }
 
-        const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
-        if (dividerIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
+      const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
+      if (dividerIndex === -1) {
+        moreBlocks = false;
+        continue;
+      }
 
-        const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
-        if (replaceEndIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
+      const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
+      if (replaceEndIndex === -1) {
+        moreBlocks = false;
+        continue;
+      }
 
-        const searchBlock = chunk.substring(
-          searchStartIndex + SEARCH_START.length,
-          dividerIndex
-        );
-        const replaceBlock = chunk.substring(
-          dividerIndex + DIVIDER.length,
-          replaceEndIndex
-        );
+      const searchBlock = chunk.substring(
+        searchStartIndex + SEARCH_START.length,
+        dividerIndex
+      );
+      const replaceBlock = chunk.substring(
+        dividerIndex + DIVIDER.length,
+        replaceEndIndex
+      );
 
-        if (searchBlock.trim() === "") {
-          newHtml = `${replaceBlock}\n${newHtml}`;
-          updatedLines.push([1, replaceBlock.split("\n").length]);
-        } else {
-          const blockPosition = newHtml.indexOf(searchBlock);
-          if (blockPosition !== -1) {
-            const beforeText = newHtml.substring(0, blockPosition);
-            const startLineNumber = beforeText.split("\n").length;
-            const replaceLines = replaceBlock.split("\n").length;
-            const endLineNumber = startLineNumber + replaceLines - 1;
-
-            updatedLines.push([startLineNumber, endLineNumber]);
-            newHtml = newHtml.replace(searchBlock, replaceBlock);
-          }
+      if (searchBlock.trim() === "") {
+        newHtml = `${replaceBlock}\n${newHtml}`;
+        updatedLines.push([1, replaceBlock.split("\n").length]);
+      } else {
+        const blockPosition = newHtml.indexOf(searchBlock);
+        if (blockPosition !== -1) {
+          const beforeText = newHtml.substring(0, blockPosition);
+          const startLineNumber = beforeText.split("\n").length;
+          const replaceLines = replaceBlock.split("\n").length;
+          const endLineNumber = startLineNumber + replaceLines - 1;
+
+          updatedLines.push([startLineNumber, endLineNumber]);
+          newHtml = newHtml.replace(searchBlock, replaceBlock);
         }
-
-        position = replaceEndIndex + REPLACE_END.length;
       }
 
-      return NextResponse.json({
-        ok: true,
-        html: newHtml,
-        updatedLines,
-      });
-    } else {
-      return NextResponse.json(
-        { ok: false, message: "No content returned from the model" },
-        { status: 400 }
-      );
+      position = replaceEndIndex + REPLACE_END.length;
     }
+
+    return NextResponse.json({
+      ok: true,
+      html: newHtml,
+      updatedLines,
+    });
   } catch (error: any) {
     return NextResponse.json(
       {
@@ -248,4 +223,4 @@ export async function PUT(request: NextRequest) {
       { status: 500 }
     );
   }
-}
+}

components/editor/ask-ai/index.tsx

@@ -54,12 +54,6 @@ export function AskAI({
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
   const [provider, setProvider] = useLocalStorage("provider", "auto");
-    const [model, setModel] = useLocalStorage(
-      "model",
-      typeof window !== "undefined"
-        ? localStorage.getItem("openai_model") || MODELS[0].value
-        : MODELS[0].value
-    );
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
   const [think, setThink] = useState<string | undefined>(undefined);
@@ -68,6 +62,11 @@ export function AskAI({
   const [controller, setController] = useState<AbortController | null>(null);
   const [isFollowUp, setIsFollowUp] = useState(true);
 
+  const getModel = () =>
+  typeof window !== "undefined"
+    ? localStorage.getItem("openai_model") || "gpt-4o-mini"
+    : "gpt-4o-mini";
+
   const callAi = async (redesignMarkdown?: string) => {
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
@@ -91,7 +90,7 @@ export function AskAI({
           : "";
         const apiKey = localStorage.getItem("openai_api_key");
         const baseUrl = localStorage.getItem("openai_base_url");
-        const customModel = localStorage.getItem("openai_model");
+        const model = getModel();
         const request = await fetch("/api/ask-ai", {
           method: "PUT",
           body: JSON.stringify({
@@ -103,7 +102,6 @@ export function AskAI({
             selectedElementHtml,
             apiKey,
             baseUrl,
-            customModel,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -128,7 +126,7 @@ export function AskAI({
       } else {
         const apiKey = localStorage.getItem("openai_api_key");
         const baseUrl = localStorage.getItem("openai_base_url");
-        const customModel = localStorage.getItem("openai_model");
+        const model = getModel();
         const request = await fetch("/api/ask-ai", {
           method: "POST",
           body: JSON.stringify({
@@ -139,7 +137,6 @@ export function AskAI({
             redesignMarkdown,
             apiKey,
             baseUrl,
-            customModel,
           }),
           headers: {
             "Content-Type": "application/json",
@@ -188,7 +185,6 @@ export function AskAI({
               setPrompt("");
               setisAiWorking(false);
               setHasAsked(true);
-              setModel(MODELS[0].value);
               if (audio.current) audio.current.play();
 
               // Now we have the complete HTML including </html>, so set it to be sure
@@ -418,9 +414,11 @@ export function AskAI({
           <div className="flex items-center justify-end gap-2">
             <Settings
               provider={provider as string}
-              model={model as string}
+              model={getModel()}
               onChange={setProvider}
-              onModelChange={setModel}
+              onModelChange={(newModel: string) => {
+                localStorage.setItem("openai_model", newModel);
+              }}
               open={openProvider}
               error={providerError}
               isFollowUp={!isSameHtml && isFollowUp}