chore: 🤖 Chatbox to deployment setup

.github/workflows/build-dry-run.yml

@@ -28,7 +28,6 @@ jobs:
       PUBLIC_FLEEK_REST_API_URL: dry.run
       PUBLIC_DYNAMIC_ENVIRONMENT_ID: 'UNAVAILABLE'
       PUBLIC_UI_APP_URL: dry.run
-      PUBLIC_PERSONA_GENERATOR_API_URL: dry.run
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/fleek-deploy-common.yml

@@ -37,7 +37,6 @@ jobs:
       PUBLIC_SUPPORT_API_HOST: ${{ vars.PUBLIC_SUPPORT_API_HOST }}
       PUBLIC_UI_APP_URL: ${{ vars.PUBLIC_UI_APP_URL }}
       PUBLIC_UI_AGENTS_APP_URL: ${{ vars.PUBLIC_UI_AGENTS_APP_URL }}
-      PUBLIC_PERSONA_GENERATOR_API_URL: ${{ vars.PUBLIC_PERSONA_GENERATOR_API_URL }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4

README.md

@@ -130,7 +130,6 @@ PUBLIC_POSTHOG_HOST="https://us.i.posthog.com"
 PUBLIC_POSTHOG_API_KEY="phc_SdvLWEagL7nAauyEBun0ZF6v59DxMIk8ofzI91gpIUw"
 PUBLIC_OPEN_API_ENDPOINT="https://api.fleek.xyz/api/openapi.json"
 PUBLIC_FLEEK_WEBSITE_URL="https://fleek.xyz"
-PUBLIC_PERSONA_GENERATOR_API_URL="https://persona-generator.flkservices.io"
 ```
 
 💡 The SUPPORT_ALLOW_ORIGIN_ADDR and SUPPORT_RATE_LIMIT_PATHS are comma separated values (csv). the MEILISEARCH_DOCUMENTS_CLIENT_API_KEY is required when querying staging, production environments which should be provided in the headers.

package.json

@@ -53,7 +53,7 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "^8.12.0",
+    "@fleek-platform/agents-ui": "8.10.5",
     "@fleek-platform/dashboard": "0.20.4",
     "@fleek-platform/login-button": "2.10.1",
     "@fleek-platform/sdk": "^3.6.2",
@@ -65,7 +65,6 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tanstack/react-query": "^5.66.7",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
     "astro": "^4.15.3",

src/components/ChatToAIAgentDeploy/index.tsx

@@ -2,76 +2,63 @@ import '@fleek-platform/agents-ui/styles';
 import {
   ChatBox,
   type FileWithPreview,
-  useDeployFromPrompt,
-  SubscriptionModal,
-  setDefined,
+  DRAFT_BOOTSTRAP_DATA_KEY,
+  ROUTE_NEW_DRAFT,
 } from '@fleek-platform/agents-ui';
 import { useAuthStore } from '@fleek-platform/login-button';
+import { storeFunnelData } from '@utils/funnel';
+import { fileToBase64 } from '@utils/file';
 import { setReferralQueryKeyValuePair } from '@utils/referrals';
-import { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { isClient } from '@utils/common';
-import toast from 'react-hot-toast';
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
-const updateDefined = () => {
-  setDefined({
-    PUBLIC_FLEEK_REST_API_HOST: import.meta.env.PUBLIC_FLEEK_REST_API_HOST,
-    PUBLIC_PERSONA_GENERATOR_API_URL: import.meta.env
-      .PUBLIC_PERSONA_GENERATOR_API_URL,
-  });
-};
-
 export const ChatToAIAgentDeploy = ({
   role,
   onDescriptionChange,
 }: {
   role?: string;
   onDescriptionChange?: () => void;
 }) => {
-  const { triggerLoginModal, isLoggedIn, accessToken, projectId } =
-    useAuthStore();
-
-  const { deploy, isDeploying } = useDeployFromPrompt({
-    onDeploy: ({ agentId }) => {
-      window.location.href = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}/drafts/${agentId}/deploying`;
-    },
-    onError: () => {
-      toast.error('Failed to deploy agent');
-    },
-  });
-
-  const hasRun = useRef(false);
-  const pendingPrompt = useRef<string>();
-  useEffect(() => {
-    if (isLoggedIn && !hasRun.current && pendingPrompt.current) {
-      hasRun.current = true;
-      updateDefined();
-      deploy({
-        prompt: pendingPrompt.current,
-        accessToken,
-        projectId,
-      });
-      pendingPrompt.current = undefined;
-    }
-  }, [isLoggedIn, accessToken, projectId, deploy]);
+  const { triggerLoginModal, isLoggedIn } = useAuthStore();
 
   const onSubmit = async (description: string, files: FileWithPreview[]) => {
+    console.log('[debug] Description:', description);
+    console.log('[debug] Files:', files);
+
+    // TODO: Validate data
+
+    const fileDataPromises = files.map((file) => fileToBase64(file));
+    const fileDataArray = await Promise.all(fileDataPromises);
+
+    const data = {
+      mode: 'chat',
+      fromApp: 'website',
+      prompt: description,
+      timestamp: new Date(),
+    };
+
+    setReferralQueryKeyValuePair('agents');
+    storeFunnelData({
+      key: DRAFT_BOOTSTRAP_DATA_KEY,
+      data,
+    });
+
     if (isLoggedIn) {
-      updateDefined();
-      deploy({
-        prompt: description,
-        accessToken,
-        projectId,
+      const currentParams = new URLSearchParams(window.location.search);
+
+      const targetUrl = new URL(
+        `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}${ROUTE_NEW_DRAFT}`,
+      );
+
+      currentParams.forEach((value, key) => {
+        targetUrl.searchParams.append(key, value);
       });
 
+      window.location.assign(targetUrl.toString());
+
       return true;
     }
 
-    pendingPrompt.current = description;
-    hasRun.current = false;
-    setReferralQueryKeyValuePair('agents');
     if (typeof triggerLoginModal !== 'function') {
       console.log('[debug] triggerLoginModal is not a fn!');
 
@@ -83,10 +70,6 @@ export const ChatToAIAgentDeploy = ({
     return true;
   };
 
-  useEffect(() => {
-    updateDefined();
-  }, []);
-
   const onSuccess = () => {
     console.log('[debug] Submission successful');
   };
@@ -106,16 +89,7 @@ export const ChatToAIAgentDeploy = ({
         prompt={
           role ? `I want to create a ${role.toLocaleLowerCase()}.` : undefined
         }
-        isSubmitting={isDeploying}
       />
-
-      {isClient &&
-        createPortal(
-          <div className="agents-ui">
-            <SubscriptionModal />
-          </div>,
-          document.body,
-        )}
     </div>
   );
 };

src/components/LandingPage/Hero.tsx

@@ -16,9 +16,6 @@ import { ChatToAIAgentDeploy } from '@components/ChatToAIAgentDeploy';
 import type { IconType } from 'react-icons/lib';
 import { cn } from '@utils/cn';
 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)}>

src/components/Navbar/index.tsx

@@ -18,20 +18,26 @@ import type { Project } from '@fleek-platform/sdk/browser';
 import { isClient } from '../../utils/common';
 import { useSession } from '@hooks/useSession';
 import { isReferralName } from '@utils/referrals';
+import { ROUTE_NEW_DRAFT } from '@fleek-platform/agents-ui';
 
 const dashboardUrl = import.meta.env.PUBLIC_UI_APP_URL;
+const agentsUrl = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}${ROUTE_NEW_DRAFT}`;
 
 const onAuthenticationSuccess = () => {
-  if (!isClient || isReferralName('agents')) return;
+  if (!isClient) return;
 
   const currentParams = new URLSearchParams(window.location.search);
 
-  const targetUrl = new URL(dashboardUrl);
+  let targetUrl = new URL(agentsUrl);
 
   currentParams.forEach((value, key) => {
     targetUrl.searchParams.append(key, value);
   });
 
+  if (isReferralName('dashboard')) {
+    targetUrl = new URL(dashboardUrl);
+  }
+
   window.location.assign(targetUrl.toString());
 };
 

src/utils/funnel.ts

@@ -0,0 +1,16 @@
+// TODO: Use `sessionStorage` instead of `localStorage`
+// to prevent tab concurrency? Might not be necessary
+// if the user journey happens in a particular route path
+export const storeFunnelData = ({
+  key,
+  data,
+}: {
+  key: string;
+  data: unknown;
+}) => window.localStorage.setItem(key, JSON.stringify(data));
+
+export const retrieveFunnelData = ({ key }: { key: string }) =>
+  window.localStorage.getItem(key);
+
+export const clearFunnelData = ({ key }: { key: string }) =>
+  window.localStorage.removeItem(key);