raypages

Sleeping

App Files Files Community

caiosilva1221 commited on May 6, 2025

Commit

bdba398

verified ·

1 Parent(s): 0c97c9d

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

Browse files

Files changed (1) hide show

src/components/ask-ai/ask-ai.tsx +64 -67

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

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-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 { MdPreview } from "react-icons/md";
-import { defaultHTML } from "../../../utils/consts";
-import SuccessSound from "../../assets/success.mp3";
 function AskAI({
   html,
@@ -29,116 +27,115 @@ function AskAI({
   const [prompt, setPrompt] = useState("");
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
-  const controllerRef = useRef<AbortController | null>(null);
-  const audio = useRef(new Audio(SuccessSound));
   const callAi = async () => {
     if (isAiWorking || !prompt.trim()) return;
     setisAiWorking(true);
-    controllerRef.current?.abort();
-    controllerRef.current = new AbortController();
-    const signal = controllerRef.current.signal;
     try {
       onNewPrompt(prompt);
-      const response = await fetch("/api/ask-ai", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           prompt,
           previousPrompt,
           ...(html === defaultHTML ? {} : { html }),
         }),
-        signal,
       });
-      if (!response.ok || !response.body) {
         toast.error("Erro ao chamar a IA.");
         setisAiWorking(false);
         return;
       }
-      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;
           }
         }
-      }
-      const finalDoc = completeResponse.match(/<!DOCTYPE html>[\s\S]*<\/html>/)?.[0];
-      if (finalDoc) setHtml(finalDoc);
-      setPrompt("");
-      setPreviousPrompt(prompt);
-      setisAiWorking(false);
-      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 px-4 absolute bottom-3 left-3 w-[calc(100%-1.5rem)] z-10 group ${isAiWorking ? "animate-pulse" : ""}`}>
       {defaultHTML !== html && (
         <button
-          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
         </button>
       )}
-      <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 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) => e.key === "Enter" && callAi()}
         />
-        <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>
     </div>
   );

 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
 import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
 import { MdPreview } from "react-icons/md";
+import { toast } from "react-toastify";
+import { defaultHTML } from "./../../../utils/consts";
+import SuccessSound from "./../../assets/success.mp3";
 function AskAI({
   html,
   const [prompt, setPrompt] = useState("");
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
+  const audio = new Audio(SuccessSound);
+  audio.volume = 0.5;
   const callAi = async () => {
     if (isAiWorking || !prompt.trim()) return;
     setisAiWorking(true);
+    let contentResponse = "";
+    let lastRenderTime = 0;
     try {
       onNewPrompt(prompt);
+      const request = await fetch("/api/ask-ai", {
         method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
         body: JSON.stringify({
           prompt,
           previousPrompt,
           ...(html === defaultHTML ? {} : { html }),
         }),
       });
+      if (!request.ok || !request.body) {
         toast.error("Erro ao chamar a IA.");
         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("Página gerada com sucesso!");
+          setPrompt("");
+          setPreviousPrompt(prompt);
+          setisAiWorking(false);
+          setHasAsked(true);
+          audio.play();
+          setView("preview");
+          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) {
+          let partialDoc = newHtml;
+          if (!partialDoc.includes("</html>")) partialDoc += "\n</html>";
+          const now = Date.now();
+          if (now - lastRenderTime > 300) {
+            setHtml(partialDoc);
+            lastRenderTime = now;
           }
+          if (partialDoc.length > 200) onScrollToBottom();
         }
+        read();
+      };
+      read();
     } catch (error: any) {
       setisAiWorking(false);
+      toast.error("Erro: " + error.message);
     }
   };
   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" : ""}`}>
       {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"
           onClick={() => setView("preview")}
         >
+          <MdPreview className="text-sm" />
+          Ver Prévia
         </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" />
         <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 ? "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(); }}
         />
+        <div className="flex items-center justify-end gap-2">
+          <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 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed"
+            onClick={callAi}
+          >
+            <GrSend className="-translate-x-[1px]" />
+          </button>
+        </div>
       </div>
     </div>
   );