Merge branch 'develop' into feat/add-promotekit-referral-id

README.md

@@ -118,6 +118,8 @@ PUBLIC_GRAPHQL_ENDPOINT="https://graphql.service.staging.fleeksandbox.xyz/graphq
 PUBLIC_FLEEK_REST_API_URL="https://api.staging.fleeksandbox.xyz/api/v1"
 PUBLIC_DYNAMIC_ENVIRONMENT_ID="c4d4ccad-9460-419c-9ca3-494488f8c892"
 PUBLIC_UI_APP_URL="https://staging.fleeksandbox.xyz"
+PUBLIC_POSTHOG_HOST="https://us.i.posthog.com"
+PUBLIC_POSTHOG_API_KEY="phc_SdvLWEagL7nAauyEBun0ZF6v59DxMIk8ofzI91gpIUw"
 ```
 
 💡 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.
@@ -1012,9 +1014,9 @@ Here's an example:
 const response = await fetch(url, {
   method: 'POST',
   headers: {
-    'Content-Type': 'application/json'
+    'Content-Type': 'application/json',
   },
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
 });
 
 const result = await response.json();

src/components/Eliza/CoreEliza.tsx

@@ -1,25 +1,26 @@
 import React from 'react';
 
 import Step from './components/Step';
-import DeploymentStatus from './components/DeploymentStatus.tsx';
-import DeploymentFailed from './components/DeploymentFailed.tsx';
+import DeploymentStatus from './components/DeploymentStatus';
+import DeploymentFailed from './components/DeploymentFailed';
 
 import {
   useDeployAIAgent,
   type UseDeployAIAgentProps,
-} from './hooks/useDeployAIAgent.ts';
-import { Navigation } from '@components/Eliza/components/Navigation.tsx';
+} from './hooks/useDeployAIAgent';
+import { Navigation } from '@components/Eliza/components/Navigation';
 import { useState } from 'react';
-import { Button } from '@components/Eliza/components/Button.tsx';
+import { Button } from '@components/Eliza/components/Button';
 import { FaChevronLeft } from 'react-icons/fa6';
-import type { NavigationState } from './utils/types.ts';
-import { Layout } from './components/Layout.tsx';
-import { IllustrationIcon } from './components/CustomIcons.tsx';
-import { Box } from './components/Box.tsx';
-import { Text } from './components/Text.tsx';
+import type { NavigationState } from './utils/types';
+import { Layout } from './components/Layout';
+import { IllustrationIcon } from './components/CustomIcons';
+import { Box } from './components/Box';
+import { Text } from './components/Text';
 
 import { pages } from './settings';
-import { NewsletterSubscriber } from './components/NewsletterSubscriber.tsx';
+import { NewsletterSubscriber } from './components/NewsletterSubscriber';
+import type { CaptureEventFn } from './types';
 
 interface ElizaCoreProps {
   isLoggedIn: UseDeployAIAgentProps['isLoggedIn'];
@@ -29,6 +30,7 @@ interface ElizaCoreProps {
   getAgentDeploymentStatus: UseDeployAIAgentProps['getAgentDeploymentStatus'];
   ensureUserSubscription: UseDeployAIAgentProps['ensureUserSubscription'];
   projectId: string | undefined;
+  captureEvent?: CaptureEventFn;
 }
 
 export const CoreEliza: React.FC<ElizaCoreProps> = ({
@@ -39,14 +41,26 @@ export const CoreEliza: React.FC<ElizaCoreProps> = ({
   ensureUserSubscription,
   getAgentDeploymentStatus,
   projectId,
+  captureEvent: externalCaptureEvent,
 }) => {
+  const captureEvent: CaptureEventFn = (eventName, eventProperties) => {
+    if (externalCaptureEvent) {
+      try {
+        externalCaptureEvent(eventName, eventProperties);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
   const elizaIntegrations: UseDeployAIAgentProps = {
     login,
     isLoggedIn,
     isLoggingIn,
     triggerAgentDeployment,
     getAgentDeploymentStatus,
     ensureUserSubscription,
+    captureEvent,
   };
 
   const {
@@ -105,6 +119,7 @@ export const CoreEliza: React.FC<ElizaCoreProps> = ({
           onDeployBtnClick={onDeployButtonClick}
           login={login}
           isLoggedIn={isLoggedIn}
+          captureEvent={captureEvent}
         />
       ),
     },

src/components/Eliza/ElizaIntegrationLayer.tsx

@@ -10,8 +10,9 @@ import {
 import {
   SubscriptionModal,
   useSubscriptionModal,
-} from './components/SubscriptionModal.tsx';
-import { CoreEliza } from './CoreEliza.tsx';
+} from './components/SubscriptionModal';
+import { CoreEliza } from './CoreEliza';
+import { captureEvent } from '@components/Tracking/trackingUtils';
 
 type getSubscriptionsType = (
   projectId?: string,
@@ -214,6 +215,7 @@ export const ElizaIntegrationLayer: React.FC<ElizaIntegrationLayerProps> = ({
         getAgentDeploymentStatus={getAgentDeploymentStatus}
         ensureUserSubscription={ensureUserSubscription}
         projectId={activeProjectId}
+        captureEvent={captureEvent}
       />
 
       <Toaster

src/components/Eliza/components/ChooseCharacterFile.tsx

@@ -1,21 +1,31 @@
-import { cn } from '@utils/cn';
 import FileUpload from '../components/FileUpload';
+import type { CaptureEventFn } from '../types';
 
 interface ChooseCharacterFileProps {
   handleCharacterFileChange: (content: string) => void;
   className?: string;
+  captureEvent: CaptureEventFn;
 }
 
 const ChooseCharacterFile: React.FC<ChooseCharacterFileProps> = ({
   handleCharacterFileChange,
   className,
+  captureEvent,
 }) => {
+  const onFileValidation = (res: boolean, msg?: string) => {
+    captureEvent('agent-ui-wizard.file-upload', {
+      res,
+      msg,
+    });
+  };
+
   return (
     <FileUpload
       label="Drag & drop your .json characterfile here"
       className={className}
       fileType="json"
       onFileUpload={(fileContent) => handleCharacterFileChange(fileContent)}
+      onFileValidation={onFileValidation}
     />
   );
 };

src/components/Eliza/components/FileUpload.tsx

@@ -35,6 +35,7 @@ interface FileUploadProps {
   className?: string;
   label?: string;
   ctaLabel?: string;
+  onFileValidation?: (result: boolean, msg?: string) => void;
 }
 
 const FileUpload: React.FC<FileUploadProps> = ({
@@ -43,6 +44,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
   className,
   label,
   ctaLabel,
+  onFileValidation,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -52,11 +54,16 @@ const FileUpload: React.FC<FileUploadProps> = ({
     setErrorMessage(null);
     const extensionRegex = getFileExtension(fileType);
 
+    // TODO: this logic has to be reviewed as there are probably some leftovers from previous iterations of the product
     if (fileType === 'json' && !extensionRegex.test(file.name)) {
-      setErrorMessage('Please upload a valid characterfile.');
+      const msg = 'Please upload a valid characterfile.';
+      onFileValidation?.(false, msg);
+      setErrorMessage(msg);
       return;
     } else if (!allowedMimeTypes[fileType].includes(file.type)) {
-      setErrorMessage(`Please upload a valid .${fileType} file.`);
+      const msg = `Please upload a valid .${fileType} file.`;
+      onFileValidation?.(false, msg);
+      setErrorMessage(msg);
       return;
     }
 
@@ -68,11 +75,13 @@ const FileUpload: React.FC<FileUploadProps> = ({
           JSON.parse(content);
         }
         onFileUpload(content);
+        onFileValidation?.(true);
         setErrorMessage(null);
       } catch {
-        setErrorMessage(
-          fileType === 'json' ? 'Invalid characterfile' : 'Invalid env file',
-        );
+        const msg =
+          fileType === 'json' ? 'Invalid characterfile' : 'Invalid env file';
+        onFileValidation?.(false, msg);
+        setErrorMessage(msg);
       }
     };
     reader.readAsText(file);

src/components/Eliza/components/Navigation.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { GetStarted } from './GetStarted';
 import {
   type Page,
@@ -11,6 +12,7 @@ import type { UseDeployAIAgentProps } from '../hooks/useDeployAIAgent';
 import { SettingsPage } from './SettingsPage';
 import { ReviewPage } from './ReviewPage';
 import { UploadPage } from './UploadPage';
+import type { CaptureEventFn } from '../types';
 
 type NavigationProps = {
   onDeployBtnClick: (characterfile: string | undefined) => void;
@@ -19,6 +21,7 @@ type NavigationProps = {
   navigationState: NavigationState;
   isLoggedIn: UseDeployAIAgentProps['isLoggedIn'];
   login: UseDeployAIAgentProps['login'];
+  captureEvent: CaptureEventFn;
 };
 
 export const Navigation: React.FC<NavigationProps> = ({
@@ -28,12 +31,18 @@ export const Navigation: React.FC<NavigationProps> = ({
   isOverCapacity = false,
   login,
   isLoggedIn,
+  captureEvent,
 }) => {
   const updateState = (newState: Partial<NavigationState>) => {
     handleNavigationStateChange({ ...navigationState, ...newState });
   };
 
   const goTo = (page: Page, options?: Options) => {
+    captureEvent('agent-ui-wizard.navigation', {
+      from: navigationState.page,
+      to: page,
+      template: options?.template,
+    });
     if (page === 'getStarted') {
       updateState({ page, options, characterFile: undefined });
     } else {
@@ -50,6 +59,15 @@ export const Navigation: React.FC<NavigationProps> = ({
     onDeployBtnClick(characterFile);
   };
 
+  useEffect(() => {
+    if (
+      navigationState.page === 'getStarted' &&
+      !navigationState.options.from
+    ) {
+      captureEvent('agent-ui-wizard.journey-init');
+    }
+  });
+
   const pages: Record<Page, React.ReactNode> = {
     getStarted: (
       <GetStarted
@@ -59,7 +77,7 @@ export const Navigation: React.FC<NavigationProps> = ({
         isLoggedIn={isLoggedIn}
       />
     ),
-    upload: <UploadPage goTo={goTo} />,
+    upload: <UploadPage goTo={goTo} captureEvent={captureEvent} />,
     characterfile: (
       <Characterfile
         goTo={goTo}

src/components/Eliza/components/UploadPage.tsx

@@ -16,8 +16,16 @@ import { characterfileSchema } from '../utils/schema';
 import { useState } from 'react';
 import { cn } from '@utils/cn';
 import { Input } from './Input';
+import type { CaptureEventFn } from '../types';
 
-export const UploadPage: React.FC<GoToProps> = ({ goTo }) => {
+interface UploadPageProps extends GoToProps {
+  captureEvent: CaptureEventFn;
+}
+
+export const UploadPage: React.FC<UploadPageProps> = ({
+  goTo,
+  captureEvent,
+}) => {
   const [errors, setErrors] = useState<FormattedError[]>([]);
 
   const { reset } = useElizaForm();
@@ -69,6 +77,7 @@ export const UploadPage: React.FC<GoToProps> = ({ goTo }) => {
         <ChooseCharacterFile
           handleCharacterFileChange={onCharacterfileChange}
           className={cn({ 'border-elz-danger-8': errors.length > 0 })}
+          captureEvent={captureEvent}
         />
         {errors.length > 0 && (
           <Box className="gap-4 duration-300 animate-in fade-in-75 slide-in-from-top-12">