feat(platform): Onboarding Phase 2 (#9736)

### Changes 🏗️

- Update onboarding to give user rewards for completing steps
- Remove `canvas-confetti` lib and add `party-js` instead; the former
didn't allow to play confetti from a component
- Add onboarding videos in `frontend/public/onboarding/`
- Remove Balance (`CreditsCard.tsx`) and add openable `Wallet.tsx` (and
accompanying `WalletTaskGroup.tsx`) instead that displays grouped
onboarding tasks with descriptions and short instructional videos
- Further relevant updates to `useOnboarding`, `types.ts`
- Implement onboarding rewards
- Add `onboarding_reward` function in `credit.py` that is used to reward
user for finished onboarding tasks safely - transaction key is
deterministic, so the same user won't be rewarded twice for the same
step.
  - Add `reward_user` in `onboarding.py`
- Update `UserOnboarding` model and add a migration

<img width="464" alt="Screenshot 2025-04-05 at 6 06 29 PM"
src="https://github.com/user-attachments/assets/fca8d09e-0139-466b-b679-d24117ad01f0"
/>

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Onboarding works
  - [x] Tasks can be completed
  - [x] Rewards are added correctly for all completed tasks

Author: kcze

autogpt_platform/backend/backend/data/credit.py

@@ -11,6 +11,7 @@
     CreditRefundRequestStatus,
     CreditTransactionType,
     NotificationType,
+    OnboardingStep,
 )
 from prisma.errors import UniqueViolationError
 from prisma.models import CreditRefundRequest, CreditTransaction, User
@@ -121,6 +122,18 @@ async def top_up_credits(self, user_id: str, amount: int):
         """
         pass
 
+    @abstractmethod
+    async def onboarding_reward(self, user_id: str, credits: int, step: OnboardingStep):
+        """
+        Reward the user with credits for completing an onboarding step.
+        Won't reward if the user has already received credits for the step.
+
+        Args:
+            user_id (str): The user ID.
+            step (OnboardingStep): The onboarding step.
+        """
+        pass
+
     @abstractmethod
     async def top_up_intent(self, user_id: str, amount: int) -> str:
         """
@@ -408,6 +421,24 @@ async def spend_credits(
     async def top_up_credits(self, user_id: str, amount: int):
         await self._top_up_credits(user_id, amount)
 
+    async def onboarding_reward(self, user_id: str, credits: int, step: OnboardingStep):
+        key = f"REWARD-{user_id}-{step.value}"
+        if not await CreditTransaction.prisma().find_first(
+            where={
+                "userId": user_id,
+                "transactionKey": key,
+            }
+        ):
+            await self._add_transaction(
+                user_id=user_id,
+                amount=credits,
+                transaction_type=CreditTransactionType.GRANT,
+                transaction_key=key,
+                metadata=Json(
+                    {"reason": f"Reward for completing {step.value} onboarding step."}
+                ),
+            )
+
     async def top_up_refund(
         self, user_id: str, transaction_key: str, metadata: dict[str, str]
     ) -> int:
@@ -895,6 +926,9 @@ async def spend_credits(self, *args, **kwargs) -> int:
     async def top_up_credits(self, *args, **kwargs):
         pass
 
+    async def onboarding_reward(self, *args, **kwargs):
+        pass
+
     async def top_up_intent(self, *args, **kwargs) -> str:
         return ""
 

autogpt_platform/backend/backend/data/onboarding.py

@@ -8,7 +8,9 @@
 from prisma.models import UserOnboarding
 from prisma.types import UserOnboardingCreateInput, UserOnboardingUpdateInput
 
+from backend.data import db
 from backend.data.block import get_blocks
+from backend.data.credit import get_user_credit_model
 from backend.data.graph import GraphModel
 from backend.data.model import CredentialsMetaInput
 from backend.server.v2.store.model import StoreAgentDetails
@@ -24,14 +26,19 @@
 POINTS_AGENT_COUNT = 50  # Number of agents to calculate points for
 MIN_AGENT_COUNT = 2  # Minimum number of marketplace agents to enable onboarding
 
+user_credit = get_user_credit_model()
+
 
 class UserOnboardingUpdate(pydantic.BaseModel):
     completedSteps: Optional[list[OnboardingStep]] = None
+    notificationDot: Optional[bool] = None
+    notified: Optional[list[OnboardingStep]] = None
     usageReason: Optional[str] = None
     integrations: Optional[list[str]] = None
     otherIntegrations: Optional[str] = None
     selectedStoreListingVersionId: Optional[str] = None
     agentInput: Optional[dict[str, Any]] = None
+    onboardingAgentExecutionId: Optional[str] = None
 
 
 async def get_user_onboarding(user_id: str):
@@ -48,6 +55,20 @@ async def update_user_onboarding(user_id: str, data: UserOnboardingUpdate):
     update: UserOnboardingUpdateInput = {}
     if data.completedSteps is not None:
         update["completedSteps"] = list(set(data.completedSteps))
+        for step in (
+            OnboardingStep.AGENT_NEW_RUN,
+            OnboardingStep.GET_RESULTS,
+            OnboardingStep.MARKETPLACE_ADD_AGENT,
+            OnboardingStep.MARKETPLACE_RUN_AGENT,
+            OnboardingStep.BUILDER_SAVE_AGENT,
+            OnboardingStep.BUILDER_RUN_AGENT,
+        ):
+            if step in data.completedSteps:
+                await reward_user(user_id, step)
+    if data.notificationDot is not None:
+        update["notificationDot"] = data.notificationDot
+    if data.notified is not None:
+        update["notified"] = list(set(data.notified))
     if data.usageReason is not None:
         update["usageReason"] = data.usageReason
     if data.integrations is not None:
@@ -58,6 +79,8 @@ async def update_user_onboarding(user_id: str, data: UserOnboardingUpdate):
         update["selectedStoreListingVersionId"] = data.selectedStoreListingVersionId
     if data.agentInput is not None:
         update["agentInput"] = Json(data.agentInput)
+    if data.onboardingAgentExecutionId is not None:
+        update["onboardingAgentExecutionId"] = data.onboardingAgentExecutionId
 
     return await UserOnboarding.prisma().upsert(
         where={"userId": user_id},
@@ -68,6 +91,45 @@ async def update_user_onboarding(user_id: str, data: UserOnboardingUpdate):
     )
 
 
+async def reward_user(user_id: str, step: OnboardingStep):
+    async with db.locked_transaction(f"usr_trx_{user_id}-reward"):
+        reward = 0
+        match step:
+            # Reward user when they clicked New Run during onboarding
+            # This is because they need credits before scheduling a run (next step)
+            case OnboardingStep.AGENT_NEW_RUN:
+                reward = 300
+            case OnboardingStep.GET_RESULTS:
+                reward = 300
+            case OnboardingStep.MARKETPLACE_ADD_AGENT:
+                reward = 100
+            case OnboardingStep.MARKETPLACE_RUN_AGENT:
+                reward = 100
+            case OnboardingStep.BUILDER_SAVE_AGENT:
+                reward = 100
+            case OnboardingStep.BUILDER_RUN_AGENT:
+                reward = 100
+
+        if reward == 0:
+            return
+
+        onboarding = await get_user_onboarding(user_id)
+
+        # Skip if already rewarded
+        if step in onboarding.rewardedFor:
+            return
+
+        onboarding.rewardedFor.append(step)
+        await user_credit.onboarding_reward(user_id, reward, step)
+        await UserOnboarding.prisma().update(
+            where={"userId": user_id},
+            data={
+                "completedSteps": list(set(onboarding.completedSteps + [step])),
+                "rewardedFor": onboarding.rewardedFor,
+            },
+        )
+
+
 def clean_and_split(text: str) -> list[str]:
     """
     Removes all special characters from a string, truncates it to 100 characters,

autogpt_platform/backend/migrations/20250411130000_update_onboarding_step/migration.sql

@@ -0,0 +1,16 @@
+-- Modify the OnboardingStep enum
+ALTER TYPE "OnboardingStep" ADD VALUE 'GET_RESULTS';
+ALTER TYPE "OnboardingStep" ADD VALUE 'MARKETPLACE_VISIT';
+ALTER TYPE "OnboardingStep" ADD VALUE 'MARKETPLACE_ADD_AGENT';
+ALTER TYPE "OnboardingStep" ADD VALUE 'MARKETPLACE_RUN_AGENT';
+ALTER TYPE "OnboardingStep" ADD VALUE 'BUILDER_OPEN';
+ALTER TYPE "OnboardingStep" ADD VALUE 'BUILDER_SAVE_AGENT';
+ALTER TYPE "OnboardingStep" ADD VALUE 'BUILDER_RUN_AGENT';
+
+-- Modify the UserOnboarding table
+ALTER TABLE "UserOnboarding"
+  ADD COLUMN "updatedAt" TIMESTAMP(3),
+  ADD COLUMN "notificationDot" BOOLEAN NOT NULL DEFAULT true,
+  ADD COLUMN "notified" "OnboardingStep"[] DEFAULT '{}',
+  ADD COLUMN "rewardedFor" "OnboardingStep"[] DEFAULT '{}',
+  ADD COLUMN "onboardingAgentExecutionId" TEXT

autogpt_platform/backend/schema.prisma

@@ -58,25 +58,40 @@ model User {
 }
 
 enum OnboardingStep {
+  // Introductory onboarding (Library)
   WELCOME
   USAGE_REASON
   INTEGRATIONS
   AGENT_CHOICE
   AGENT_NEW_RUN
   AGENT_INPUT
   CONGRATS
+  GET_RESULTS
+  // Marketplace
+  MARKETPLACE_VISIT
+  MARKETPLACE_ADD_AGENT
+  MARKETPLACE_RUN_AGENT
+  // Builder
+  BUILDER_OPEN
+  BUILDER_SAVE_AGENT
+  BUILDER_RUN_AGENT
 }
 
 model UserOnboarding {
   id        String   @id @default(uuid())
   createdAt DateTime @default(now())
+  updatedAt DateTime? @updatedAt
 
   completedSteps                OnboardingStep[] @default([])
+  notificationDot               Boolean          @default(true)
+  notified                      OnboardingStep[] @default([])
+  rewardedFor                   OnboardingStep[] @default([])
   usageReason                   String?
   integrations                  String[]         @default([])
   otherIntegrations             String?
   selectedStoreListingVersionId String?
   agentInput                    Json?
+  onboardingAgentExecutionId    String?
 
   userId String @unique
   User   User   @relation(fields: [userId], references: [id], onDelete: Cascade)

autogpt_platform/frontend/package.json

@@ -52,7 +52,6 @@
     "@xyflow/react": "12.4.2",
     "ajv": "^8.17.1",
     "boring-avatars": "^1.11.2",
-    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
@@ -70,6 +69,7 @@
     "moment": "^2.30.1",
     "next": "^14.2.26",
     "next-themes": "^0.4.5",
+    "party-js": "^2.2.0",
     "react": "^18",
     "react-day-picker": "^9.6.1",
     "react-dom": "^18",

autogpt_platform/frontend/public/onboarding/builder-open.mp4

@@ -3,9 +3,16 @@
 import { useSearchParams } from "next/navigation";
 import { GraphID } from "@/lib/autogpt-server-api/types";
 import FlowEditor from "@/components/Flow";
+import { useOnboarding } from "@/components/onboarding/onboarding-provider";
+import { useEffect } from "react";
 
 export default function Home() {
   const query = useSearchParams();
+  const { completeStep } = useOnboarding();
+
+  useEffect(() => {
+    completeStep("BUILDER_OPEN");
+  }, []);
 
   return (
     <FlowEditor

autogpt_platform/frontend/public/onboarding/builder-run.mp4

@@ -22,6 +22,7 @@ import AgentRunDraftView from "@/components/agents/agent-run-draft-view";
 import AgentRunDetailsView from "@/components/agents/agent-run-details-view";
 import AgentRunsSelectorList from "@/components/agents/agent-runs-selector-list";
 import AgentScheduleDetailsView from "@/components/agents/agent-schedule-details-view";
+import { useOnboarding } from "@/components/onboarding/onboarding-provider";
 
 export default function AgentRunsPage(): React.ReactElement {
   const { id: agentID }: { id: LibraryAgentID } = useParams();
@@ -49,6 +50,7 @@ export default function AgentRunsPage(): React.ReactElement {
     useState<boolean>(false);
   const [confirmingDeleteAgentRun, setConfirmingDeleteAgentRun] =
     useState<GraphExecutionMeta | null>(null);
+  const { state, updateState } = useOnboarding();
 
   const openRunDraftView = useCallback(() => {
     selectView({ type: "run" });
@@ -78,6 +80,18 @@ export default function AgentRunsPage(): React.ReactElement {
     [api, graphVersions],
   );
 
+  // Reward user for viewing results of their onboarding agent
+  useEffect(() => {
+    if (!state || !selectedRun || state.completedSteps.includes("GET_RESULTS"))
+      return;
+
+    if (selectedRun.id === state.onboardingAgentExecutionId) {
+      updateState({
+        completedSteps: [...state.completedSteps, "GET_RESULTS"],
+      });
+    }
+  }, [selectedRun, state]);
+
   const fetchAgents = useCallback(() => {
     api.getLibraryAgent(agentID).then((agent) => {
       setAgent(agent);

autogpt_platform/frontend/public/onboarding/builder-save.mp4

@@ -83,8 +83,14 @@ export default function Page() {
     api.addMarketplaceAgentToLibrary(
       storeAgent?.store_listing_version_id || "",
     );
-    api.executeGraph(agent.id, agent.version, state?.agentInput || {});
-    router.push("/onboarding/6-congrats");
+    api
+      .executeGraph(agent.id, agent.version, state?.agentInput || {})
+      .then(({ graph_exec_id }) => {
+        updateState({
+          onboardingAgentExecutionId: graph_exec_id,
+        });
+        router.push("/onboarding/6-congrats");
+      });
   }, [api, agent, router, state?.agentInput]);
 
   const runYourAgent = (

autogpt_platform/frontend/public/onboarding/get-results.mp4

@@ -6,9 +6,6 @@ import { redirect } from "next/navigation";
 export async function finishOnboarding() {
   const api = new BackendAPI();
   const onboarding = await api.getUserOnboarding();
-  await api.updateUserOnboarding({
-    completedSteps: [...onboarding.completedSteps, "CONGRATS"],
-  });
   revalidatePath("/library", "layout");
   redirect("/library");
 }

autogpt_platform/frontend/public/onboarding/marketplace-add.mp4

@@ -1,24 +1,26 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { finishOnboarding } from "./actions";
-import confetti from "canvas-confetti";
 import { useOnboarding } from "@/components/onboarding/onboarding-provider";
+import * as party from "party-js";
 
 export default function Page() {
-  useOnboarding(7, "AGENT_INPUT");
+  const { state, updateState } = useOnboarding(7, "AGENT_INPUT");
   const [showText, setShowText] = useState(false);
   const [showSubtext, setShowSubtext] = useState(false);
+  const divRef = useRef(null);
 
   useEffect(() => {
-    confetti({
-      particleCount: 120,
-      spread: 360,
-      shapes: ["square", "circle"],
-      scalar: 2,
-      decay: 0.93,
-      origin: { y: 0.38, x: 0.51 },
-    });
+    if (divRef.current) {
+      party.confetti(divRef.current, {
+        count: 100,
+        spread: 180,
+        shapes: ["square", "circle"],
+        size: party.variation.range(2, 2), // scalar: 2
+        speed: party.variation.range(300, 1000),
+      });
+    }
 
     const timer0 = setTimeout(() => {
       setShowText(true);
@@ -29,6 +31,9 @@ export default function Page() {
     }, 500);
 
     const timer2 = setTimeout(() => {
+      updateState({
+        completedSteps: [...(state?.completedSteps || []), "CONGRATS"],
+      });
       finishOnboarding();
     }, 3000);
 
@@ -42,6 +47,7 @@ export default function Page() {
   return (
     <div className="flex h-screen w-screen flex-col items-center justify-center bg-violet-100">
       <div
+        ref={divRef}
         className={cn(
           "z-10 -mb-16 text-9xl duration-500",
           showText ? "opacity-100" : "opacity-0",
@@ -63,7 +69,7 @@ export default function Page() {
           showSubtext ? "opacity-100" : "opacity-0",
         )}
       >
-        You earned 15$ for running your first agent
+        You earned 3$ for running your first agent
       </p>
     </div>
   );