Update src/components/ask-ai/ask-ai.tsx

src/components/ask-ai/ask-ai.tsx

@@ -1,17 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
 import classNames from "classnames";
 import { toast } from "react-toastify";
-import { useLocalStorage } from "react-use";
 import { MdPreview } from "react-icons/md";
 
-import Login from "../login/login";
-import { defaultHTML } from "./../../../utils/consts";
-import SuccessSound from "./../../assets/success.mp3";
-import Settings from "../settings/settings";
-import ProModal from "../pro-modal/pro-modal";
+import { defaultHTML } from "../../../utils/consts";
+import SuccessSound from "../../assets/success.mp3";
 
 function AskAI({
   html,
@@ -30,245 +26,122 @@ function AskAI({
   setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
-  const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
-  const [provider, setProvider] = useLocalStorage("provider", "auto");
-  const [openProvider, setOpenProvider] = useState(false);
-  const [providerError, setProviderError] = useState("");
-  const [openProModal, setOpenProModal] = useState(false);
-  const [localSettings, setLocalSettings] = useState(() => {
-    const saved = localStorage.getItem('localSettings');
-    return saved ? JSON.parse(saved) : {
-      apiKey: "",
-      apiUrl: "http://localhost:11434/v1",
-      model: "gemma3:1b",
-      openRouterApiKey: "<OPENROUTER_API_KEY>",
-      openRouterApiUrl: "https://openrouter.ai/api/v1",
-      openRouterModel: "deepseek/deepseek-chat-v3-0324:free",
-    };
-  });
-
-  const loadLocalSettings = () => {
-    const saved = localStorage.getItem('localSettings');
-    if (saved) {
-      const parsed = JSON.parse(saved);
-      setLocalSettings(parsed);
-    } else {
-      setLocalSettings({
-        apiKey: "",
-        apiUrl: "http://localhost:11434/v1",
-        model: "gemma3:1b",
-        openRouterApiKey: "<OPENROUTER_API_KEY>",
-        openRouterApiUrl: "https://openrouter.ai/api/v1",
-        openRouterModel: "deepseek/deepseek-chat-v3-0324:free",
-      });
-    }
-  };
-
-  useEffect(() => {
-    loadLocalSettings();
-  }, []);
-
-  const audio = new Audio(SuccessSound);
-  audio.volume = 0.5;
+  const controllerRef = useRef<AbortController | null>(null);
+  const audio = useRef(new Audio(SuccessSound));
 
   const callAi = async () => {
     if (isAiWorking || !prompt.trim()) return;
     setisAiWorking(true);
-    setProviderError("");
 
-    let contentResponse = "";
-    let lastRenderTime = 0;
+    controllerRef.current?.abort();
+    controllerRef.current = new AbortController();
+
+    const signal = controllerRef.current.signal;
+
     try {
       onNewPrompt(prompt);
-      const request = await fetch("/api/ask-ai", {
+
+      const response = await fetch("/api/ask-ai", {
         method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           prompt,
-          provider,
-          ...(provider === "local"
-            ? {
-                ApiKey: localSettings.apiKey,
-                ApiUrl: localSettings.apiUrl,
-                Model: localSettings.model,
-              }
-            : {}),
-            ...(provider === "openrouter"
-              ? {
-                  ApiKey: localSettings.openRouterApiKey,
-                  ApiUrl: localSettings.openRouterApiUrl,
-                  Model: localSettings.openRouterModel,
-                }
-              : {}),
+          previousPrompt,
           ...(html === defaultHTML ? {} : { html }),
-          ...(previousPrompt ? { previousPrompt } : {}),
         }),
-        headers: {
-          "Content-Type": "application/json",
-        },
+        signal,
       });
-      if (request && request.body) {
-        if (!request.ok) {
-          const res = await request.json();
-          if (res.openLogin) {
-            setOpen(true);
-          } else if (res.openSelectProvider) {
-            setOpenProvider(true);
-            setProviderError(res.message);
-          } else if (res.openProModal) {
-            setOpenProModal(true);
-          } else {
-            toast.error(res.message);
-          }
-          setisAiWorking(false);
-          return;
-        }
-        const reader = request.body.getReader();
-        const decoder = new TextDecoder("utf-8");
-
-        const read = async () => {
-          const { done, value } = await reader.read();
-          if (done) {
-            toast.success("AI responded successfully");
-            setPrompt("");
-            setPreviousPrompt(prompt);
-            setisAiWorking(false);
-            setHasAsked(true);
-            audio.play();
-            setView("preview");
-
-            // Now we have the complete HTML including </html>, so set it to be sure
-            const finalDoc = contentResponse.match(
-              /<!DOCTYPE html>[\s\S]*<\/html>/
-            )?.[0];
-            if (finalDoc) {
-              setHtml(finalDoc);
-            }
-
-            return;
-          }
-
-          const chunk = decoder.decode(value, { stream: true });
-          contentResponse += chunk;
-          const newHtml = contentResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
-          if (newHtml) {
-            // Force-close the HTML tag so the iframe doesn't render half-finished markup
-            let partialDoc = newHtml;
-            if (!partialDoc.includes("</html>")) {
-              partialDoc += "\n</html>";
-            }
 
-            // Throttle the re-renders to avoid flashing/flicker
-            const now = Date.now();
-            if (now - lastRenderTime > 300) {
-              setHtml(partialDoc);
-              lastRenderTime = now;
-            }
+      if (!response.ok || !response.body) {
+        toast.error("Erro ao chamar a IA.");
+        setisAiWorking(false);
+        return;
+      }
 
-            if (partialDoc.length > 200) {
-              onScrollToBottom();
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder("utf-8");
+      let completeResponse = "";
+      let lastRenderTime = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split("\n").filter((line) => line.startsWith("data: "));
+
+        for (const line of lines) {
+          try {
+            const json = JSON.parse(line.slice(6));
+            const content = json?.choices?.[0]?.delta?.content;
+            if (content) {
+              completeResponse += content;
+
+              const now = Date.now();
+              if (now - lastRenderTime > 300) {
+                let partial = completeResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
+                if (partial && !partial.includes("</html>")) partial += "</html>";
+                if (partial) setHtml(partial);
+                lastRenderTime = now;
+              }
+              if (completeResponse.length > 200) onScrollToBottom();
             }
+          } catch (e) {
+            continue;
           }
-          read();
-        };
-
-        read();
+        }
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
+      const finalDoc = completeResponse.match(/<!DOCTYPE html>[\s\S]*<\/html>/)?.[0];
+      if (finalDoc) setHtml(finalDoc);
+      setPrompt("");
+      setPreviousPrompt(prompt);
       setisAiWorking(false);
-      toast.error(error.message);
-      if (error.openLogin) {
-        setOpen(true);
+      setHasAsked(true);
+      setView("preview");
+      setTimeout(() => audio.current.play(), 0);
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        toast.error(error.message || "Erro inesperado");
       }
+      setisAiWorking(false);
     }
   };
 
   return (
-    <div
-      className={`bg-gray-950 rounded-xl py-2 lg:py-2.5 pl-3.5 lg:pl-4 pr-2 lg:pr-2.5 absolute lg:sticky bottom-3 left-3 lg:bottom-4 lg:left-4 w-[calc(100%-1.5rem)] lg:w-[calc(100%-2rem)] z-10 group ${
-        isAiWorking ? "animate-pulse" : ""
-      }`}
-    >
+    <div className={`bg-gray-950 rounded-xl py-2 px-4 absolute bottom-3 left-3 w-[calc(100%-1.5rem)] z-10 group ${isAiWorking ? "animate-pulse" : ""}`}>
       {defaultHTML !== html && (
         <button
-          className="bg-white lg:hidden -translate-y-[calc(100%+8px)] absolute left-0 top-0 shadow-md text-gray-950 text-xs font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          className="bg-white text-gray-950 text-xs font-medium py-2 px-3 rounded-lg flex items-center gap-2 border border-gray-100 hover:brightness-150"
           onClick={() => setView("preview")}
         >
-          <MdPreview className="text-sm" />
-          View Preview
+          <MdPreview className="text-sm" /> View Preview
         </button>
       )}
-      <div className="w-full relative flex items-center justify-between">
-        <RiSparkling2Fill className="text-lg lg:text-xl text-gray-500 group-focus-within:text-pink-500" />
+      <div className="flex items-center justify-between">
+        <RiSparkling2Fill className="text-xl text-gray-500 group-focus-within:text-pink-500" />
         <input
           type="text"
           disabled={isAiWorking}
-          className="w-full bg-transparent max-lg:text-sm outline-none px-3 text-white placeholder:text-gray-500 font-code"
-          placeholder={
-            hasAsked ? "What do you want to ask AI next?" : "Ask AI anything..."
-          }
+          className="w-full bg-transparent text-sm outline-none px-3 text-white placeholder:text-gray-500"
+          placeholder={hasAsked ? "O que você quer criar agora?" : "Digite sua ideia aqui..."}
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              callAi();
-            }
-          }}
+          onKeyDown={(e) => e.key === "Enter" && callAi()}
         />
-        <div className="flex items-center justify-end gap-2">
-          {/* <SpeechPrompt setPrompt={setPrompt} /> */}
-          <Settings
-            provider={provider as string}
-            onChange={setProvider}
-            open={openProvider}
-            error={providerError}
-            onClose={setOpenProvider}
-            setLocalSettings={setLocalSettings}
-            localSettings={localSettings}
-          />
-          <button
-            disabled={isAiWorking}
-            className="relative overflow-hidden cursor-pointer flex-none flex items-center justify-center rounded-full text-sm font-semibold size-8 text-center bg-pink-500 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
-            onClick={callAi}
-          >
-            <GrSend className="-translate-x-[1px]" />
-          </button>
-        </div>
-      </div>
-      <div
-        className={classNames(
-          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-        onClick={() => setOpen(false)}
-      ></div>
-      <div
-        className={classNames(
-          "absolute top-0 -translate-y-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-      >
-        <Login html={html}>
-          <p className="text-gray-500 text-sm mb-3">
-            You reached the limit of free AI usage. Please login to continue.
-          </p>
-        </Login>
+        <button
+          disabled={isAiWorking}
+          className="rounded-full bg-pink-500 text-white size-8 flex items-center justify-center disabled:bg-gray-300"
+          onClick={callAi}
+        >
+          <GrSend className="-translate-x-[1px]" />
+        </button>
       </div>
-      <ProModal
-        html={html}
-        open={openProModal}
-        onClose={() => setOpenProModal(false)}
-      />
     </div>
   );
 }
 
-export default AskAI;
+export default AskAI;