From 5c1b3dc9ce6601c6ee979c664331fdd370368e3a Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Mon, 5 May 2025 17:22:40 +0100
Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20rearchitecture?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatToAIAgentDeploy/index.tsx | 63 +++++++++++++-------
 src/components/LandingPage/Hero.tsx          | 23 +++----
 src/pages/index.astro                        |  2 +-
 3 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/components/ChatToAIAgentDeploy/index.tsx b/src/components/ChatToAIAgentDeploy/index.tsx
index 44f26e5f7..12ce31817 100644
--- a/src/components/ChatToAIAgentDeploy/index.tsx
+++ b/src/components/ChatToAIAgentDeploy/index.tsx
@@ -13,6 +13,7 @@ import { createPortal } from 'react-dom';
 import { isClient } from '@utils/common';
 import toast from 'react-hot-toast';
 import { ZodError } from 'zod';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
@@ -22,7 +23,9 @@ setDefined({
     .PUBLIC_PERSONA_GENERATOR_API_URL,
 });
 
-export const ChatToAIAgentDeploy = ({
+const queryClient = new QueryClient();
+
+export const ChatToAIAgentDeployChild = ({
   role,
   onDescriptionChange,
 }: {
@@ -51,6 +54,7 @@ export const ChatToAIAgentDeploy = ({
 
   const hasRun = useRef(false);
   const pendingPrompt = useRef<string>();
+
   useEffect(() => {
     if (isLoggedIn && !hasRun.current && pendingPrompt.current) {
       hasRun.current = true;
@@ -96,27 +100,46 @@ export const ChatToAIAgentDeploy = ({
     console.error('[debug] Submission failed:', error);
   };
 
+  const portalRef = useRef<React.ReactPortal>();
+
+  useEffect(() => {
+    if (isClient && !portalRef.current) {
+      portalRef.current = createPortal(
+        <div className="agents-ui">
+          <SubscriptionModal />
+        </div>,
+        document.body,
+      );
+    }
+  }, []);
+
   return (
     <div className="agents-ui my-20 flex justify-center text-14">
-      <ChatBox
-        onSubmit={onSubmit}
-        onSuccess={onSuccess}
-        onError={onError}
-        maxFileSize={MAX_FILE_SIZE}
-        onDescriptionChange={onDescriptionChange}
-        prompt={
-          role ? `I want to create a ${role.toLocaleLowerCase()}.` : undefined
-        }
-        isSubmitting={isDeploying}
-      />
-
-      {isClient &&
-        createPortal(
-          <div className="agents-ui">
-            <SubscriptionModal />
-          </div>,
-          document.body,
-        )}
+        <ChatBox
+          onSubmit={onSubmit}
+          onSuccess={onSuccess}
+          onError={onError}
+          maxFileSize={MAX_FILE_SIZE}
+          onDescriptionChange={onDescriptionChange}
+          prompt={
+            role ? `I want to create a ${role.toLocaleLowerCase()}.` : undefined
+          }
+          isSubmitting={isDeploying}
+        />
+
+        {portalRef.current}
     </div>
   );
 };
+
+export const ChatToAIAgentDeploy = ({
+  role,
+  onDescriptionChange,
+}: {
+  role?: string;
+  onDescriptionChange?: () => void;
+}) => (
+    <QueryClientProvider client={queryClient}>
+      <ChatToAIAgentDeployChild role={role} onDescriptionChange={onDescriptionChange} />
+    </QueryClientProvider>
+  );
diff --git a/src/components/LandingPage/Hero.tsx b/src/components/LandingPage/Hero.tsx
index dd4695c37..5a894fe08 100644
--- a/src/components/LandingPage/Hero.tsx
+++ b/src/components/LandingPage/Hero.tsx
@@ -12,13 +12,10 @@ import {
   IoHeadsetOutline,
   IoPawOutline,
 } from 'react-icons/io5';
-import { ChatToAIAgentDeploy } from '@components/ChatToAIAgentDeploy';
 import type { IconType } from 'react-icons/lib';
 import { cn } from '@utils/cn';
+import { ChatToAIAgentDeploy } from '@components/ChatToAIAgentDeploy';
 import { useState } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-const queryClient = new QueryClient();
 
 const calculateDelay = (factor: number) => 0.25 * factor;
 
@@ -101,12 +98,10 @@ export const Hero = () => {
               </div>
             </div>
             <BlurFade delay={calculateDelay(3)}>
-              <QueryClientProvider client={queryClient}>
-                <ChatToAIAgentDeploy
-                  role={role}
-                  onDescriptionChange={() => setRole(undefined)}
-                />
-              </QueryClientProvider>
+              <ChatToAIAgentDeploy
+                role={role}
+                onDescriptionChange={() => setRole(undefined)}
+              />
             </BlurFade>
           </div>
           <BlurFade delay={calculateDelay(4)}>
@@ -134,3 +129,11 @@ export const Hero = () => {
     </header>
   );
 };
+
+export const HeroTest = () => {
+  console.log('[debug] HeroTest render');
+  
+  return (
+    <p>HeroTest</p>
+  );
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b84d63bf7..d4842c7a2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import LandingPageHtml from '@layouts/LandingPageHtml.astro';
 import { Navbar } from '@components/Navbar';
-import { Hero } from '@components/LandingPage/Hero';
+import { Hero, HeroTest } from '@components/LandingPage/Hero';
 import { Partners } from '@components/LandingPage/Partners';
 import AnnouncementModal from '@components/AnnouncementModal';
 import { AgentsVideo } from '@components/LandingPage/AgentsVideo';

From 3b5a58b47a993ffabed21dd019009ff6b955d068 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Mon, 5 May 2025 17:31:09 +0100
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20format=20and=20comm?=
 =?UTF-8?q?ent=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatToAIAgentDeploy/index.tsx | 41 ++++++++++++--------
 src/components/LandingPage/Hero.tsx          |  8 ----
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/ChatToAIAgentDeploy/index.tsx b/src/components/ChatToAIAgentDeploy/index.tsx
index 12ce31817..578ca8234 100644
--- a/src/components/ChatToAIAgentDeploy/index.tsx
+++ b/src/components/ChatToAIAgentDeploy/index.tsx
@@ -104,6 +104,10 @@ export const ChatToAIAgentDeployChild = ({
 
   useEffect(() => {
     if (isClient && !portalRef.current) {
+      // Be careful with createPortal
+      // causes unwanted re-render
+      // due to SubscriptionModal context or store triggers
+      // Here we use a reference to prevent subsequent render
       portalRef.current = createPortal(
         <div className="agents-ui">
           <SubscriptionModal />
@@ -115,19 +119,19 @@ export const ChatToAIAgentDeployChild = ({
 
   return (
     <div className="agents-ui my-20 flex justify-center text-14">
-        <ChatBox
-          onSubmit={onSubmit}
-          onSuccess={onSuccess}
-          onError={onError}
-          maxFileSize={MAX_FILE_SIZE}
-          onDescriptionChange={onDescriptionChange}
-          prompt={
-            role ? `I want to create a ${role.toLocaleLowerCase()}.` : undefined
-          }
-          isSubmitting={isDeploying}
-        />
-
-        {portalRef.current}
+      <ChatBox
+        onSubmit={onSubmit}
+        onSuccess={onSuccess}
+        onError={onError}
+        maxFileSize={MAX_FILE_SIZE}
+        onDescriptionChange={onDescriptionChange}
+        prompt={
+          role ? `I want to create a ${role.toLocaleLowerCase()}.` : undefined
+        }
+        isSubmitting={isDeploying}
+      />
+
+      {portalRef.current}
     </div>
   );
 };
@@ -139,7 +143,10 @@ export const ChatToAIAgentDeploy = ({
   role?: string;
   onDescriptionChange?: () => void;
 }) => (
-    <QueryClientProvider client={queryClient}>
-      <ChatToAIAgentDeployChild role={role} onDescriptionChange={onDescriptionChange} />
-    </QueryClientProvider>
-  );
+  <QueryClientProvider client={queryClient}>
+    <ChatToAIAgentDeployChild
+      role={role}
+      onDescriptionChange={onDescriptionChange}
+    />
+  </QueryClientProvider>
+);
diff --git a/src/components/LandingPage/Hero.tsx b/src/components/LandingPage/Hero.tsx
index 5a894fe08..e3919944d 100644
--- a/src/components/LandingPage/Hero.tsx
+++ b/src/components/LandingPage/Hero.tsx
@@ -129,11 +129,3 @@ export const Hero = () => {
     </header>
   );
 };
-
-export const HeroTest = () => {
-  console.log('[debug] HeroTest render');
-  
-  return (
-    <p>HeroTest</p>
-  );
-};

From 626350e7e9505a330282e51a806f80f4514cf85e Mon Sep 17 00:00:00 2001
From: Helder Oliveira <heldrida@gmail.com>
Date: Mon, 5 May 2025 17:31:48 +0100
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20unwanted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index d4842c7a2..b84d63bf7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import LandingPageHtml from '@layouts/LandingPageHtml.astro';
 import { Navbar } from '@components/Navbar';
-import { Hero, HeroTest } from '@components/LandingPage/Hero';
+import { Hero } from '@components/LandingPage/Hero';
 import { Partners } from '@components/LandingPage/Partners';
 import AnnouncementModal from '@components/AnnouncementModal';
 import { AgentsVideo } from '@components/LandingPage/AgentsVideo';