raypages

Sleeping

App Files Files Community

caiosilva1221 commited on May 5, 2025

Commit

00e32a4

verified ·

1 Parent(s): f3c5e82

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

Browse files

Files changed (1) hide show

src/components/ask-ai/ask-ai.tsx +45 -35

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

@@ -2,10 +2,9 @@
 import { useState } 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";
@@ -39,26 +38,39 @@ function AskAI({
     let contentResponse = "";
     let lastRenderTime = 0;
     try {
       onNewPrompt(prompt);
       const request = await fetch("https://openrouter.ai/api/v1/chat/completions", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": "Bearer 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"
         },
         body: JSON.stringify({
-          model: "openrouter/auto", // ou outro como deepseek-coder
           messages: [
-            { role: "system", content: "Você é um especialista em HTML. Gere apenas código HTML puro, sem explicações." },
-            { role: "user", content: prompt }
-          ],
-          stream: true
         })
       });
-      if (!request.body) throw new Error("Sem resposta da IA.");
       const reader = request.body.getReader();
       const decoder = new TextDecoder("utf-8");
@@ -66,7 +78,7 @@ function AskAI({
       const read = async () => {
         const { done, value } = await reader.read();
         if (done) {
-          toast.success("IA respondeu com sucesso!");
           setPrompt("");
           setPreviousPrompt(prompt);
           setisAiWorking(false);
@@ -80,21 +92,25 @@ function AskAI({
         }
         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();
           }
         }
@@ -104,7 +120,7 @@ function AskAI({
       read();
     } catch (error: any) {
       setisAiWorking(false);
-      toast.error(error.message || "Erro ao chamar IA");
     }
   };
@@ -125,21 +141,15 @@ function AskAI({
           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..."
-          }
           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 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]" />

 import { useState } from "react";
 import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
+import { MdPreview } from "react-icons/md";
 import classNames from "classnames";
 import { toast } from "react-toastify";
 import { defaultHTML } from "./../../../utils/consts";
 import SuccessSound from "./../../assets/success.mp3";
     let contentResponse = "";
     let lastRenderTime = 0;
     try {
       onNewPrompt(prompt);
       const request = await fetch("https://openrouter.ai/api/v1/chat/completions", {
         method: "POST",
         headers: {
+          "Authorization": "Bearer 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",
           "Content-Type": "application/json",
+          "HTTP-Referer": "https://raypages.com", // ou o seu domínio
+          "X-Title": "RayPages AI"
         },
         body: JSON.stringify({
+          model: "deepseek-chat-v3.0",
+          stream: true,
           messages: [
+            {
+              role: "system",
+              content: "Você é um especialista em landing pages. Gere um HTML bonito e persuasivo para a copy enviada. Responda apenas com código HTML válido e completo."
+            },
+            {
+              role: "user",
+              content: prompt
+            }
+          ]
         })
       });
+      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);
         }
         const chunk = decoder.decode(value, { stream: true });
+        const matches = chunk.match(/"content":"([^"]*)"/g);
+        if (matches) {
+          for (const match of matches) {
+            const text = match.replace(/"content":"|"/g, "").replace(/\\n/g, "\n").replace(/\\t/g, "\t");
+            contentResponse += text;
+            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();
     } catch (error: any) {
       setisAiWorking(false);
+      toast.error("Erro: " + error.message);
     }
   };
           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..."}
           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]" />