Merge branch 'dev' into abhi/ci-chromatic

Author: Abhi1992002

autogpt_platform/backend/backend/blocks/google/sheets.py

@@ -3,7 +3,7 @@
 
 from backend.data.block import Block, BlockCategory, BlockOutput, BlockSchema
 from backend.data.model import SchemaField
-from backend.util.settings import Settings
+from backend.util.settings import AppEnvironment, Settings
 
 from ._auth import (
     GOOGLE_OAUTH_IS_CONFIGURED,
@@ -36,13 +36,15 @@ class Output(BlockSchema):
         )
 
     def __init__(self):
+        settings = Settings()
         super().__init__(
             id="5724e902-3635-47e9-a108-aaa0263a4988",
             description="This block reads data from a Google Sheets spreadsheet.",
             categories={BlockCategory.DATA},
             input_schema=GoogleSheetsReadBlock.Input,
             output_schema=GoogleSheetsReadBlock.Output,
-            disabled=not GOOGLE_OAUTH_IS_CONFIGURED,
+            disabled=not GOOGLE_OAUTH_IS_CONFIGURED
+            or settings.config.app_env == AppEnvironment.PRODUCTION,
             test_input={
                 "spreadsheet_id": "1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms",
                 "range": "Sheet1!A1:B2",

autogpt_platform/backend/backend/data/credit.py

@@ -438,22 +438,19 @@ async def top_up_credits(
         )
 
     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,
-            }
-        ):
+        try:
             await self._add_transaction(
                 user_id=user_id,
                 amount=credits,
                 transaction_type=CreditTransactionType.GRANT,
-                transaction_key=key,
+                transaction_key=f"REWARD-{user_id}-{step.value}",
                 metadata=Json(
                     {"reason": f"Reward for completing {step.value} onboarding step."}
                 ),
             )
+        except UniqueViolationError:
+            # Already rewarded for this step
+            pass
 
     async def top_up_refund(
         self, user_id: str, transaction_key: str, metadata: dict[str, str]

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/3-services/page.tsx

@@ -163,14 +163,7 @@ export default function Page() {
       </div>
 
       <OnboardingFooter>
-        <OnboardingButton
-          className="mb-2"
-          href="/onboarding/4-agent"
-          disabled={
-            state?.integrations.length === 0 &&
-            isEmptyOrWhitespace(state.otherIntegrations)
-          }
-        >
+        <OnboardingButton className="mb-2" href="/onboarding/4-agent">
           Next
         </OnboardingButton>
       </OnboardingFooter>

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/4-agent/page.tsx

@@ -59,7 +59,7 @@ export default function Page() {
 
       <div className="my-12 flex items-center justify-between gap-5">
         <OnboardingAgentCard
-          {...(agents[0] || {})}
+          agent={agents[0]}
           selected={
             agents[0] !== undefined
               ? state?.selectedStoreListingVersionId ==
@@ -74,7 +74,7 @@ export default function Page() {
           }
         />
         <OnboardingAgentCard
-          {...(agents[1] || {})}
+          agent={agents[1]}
           selected={
             agents[1] !== undefined
               ? state?.selectedStoreListingVersionId ==

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/page.tsx

@@ -9,14 +9,14 @@ import StarRating from "@/components/onboarding/StarRating";
 import { Play } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useCallback, useEffect, useState } from "react";
-import Image from "next/image";
 import { GraphMeta, StoreAgentDetails } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { useRouter } from "next/navigation";
 import { useOnboarding } from "@/components/onboarding/onboarding-provider";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SchemaTooltip from "@/components/SchemaTooltip";
 import { TypeBasedInput } from "@/components/type-based-input";
+import SmartImage from "@/components/agptui/SmartImage";
 
 export default function Page() {
   const { state, updateState, setStep } = useOnboarding(
@@ -99,7 +99,7 @@ export default function Page() {
   }, [api, agent, router, state?.agentInput, storeAgent, updateState]);
 
   const runYourAgent = (
-    <div className="ml-[54px] w-[481px] pl-5">
+    <div className="ml-[104px] w-[481px] pl-5">
       <div className="flex flex-col">
         <OnboardingText variant="header">Run your first agent</OnboardingText>
         <span className="mt-9 text-base font-normal leading-normal text-zinc-600">
@@ -147,32 +147,25 @@ export default function Page() {
   return (
     <OnboardingStep dotted>
       <OnboardingHeader backHref={"/onboarding/4-agent"} transparent />
-      <div
-        className={cn(
-          "flex w-full items-center justify-center",
-          showInput ? "mt-[32px]" : "mt-[192px]",
-        )}
-      >
-        {/* Left side */}
-        <div className="mr-[52px] w-[481px]">
-          <div className="h-[156px] w-[481px] rounded-xl bg-white px-6 pb-5 pt-4">
-            <span className="font-sans text-xs font-medium tracking-wide text-zinc-500">
-              SELECTED AGENT
-            </span>
+      {/* Agent card */}
+      <div className="fixed left-1/4 top-1/2 w-[481px] -translate-x-1/2 -translate-y-1/2">
+        <div className="h-[156px] w-[481px] rounded-xl bg-white px-6 pb-5 pt-4">
+          <span className="font-sans text-xs font-medium tracking-wide text-zinc-500">
+            SELECTED AGENT
+          </span>
+          {storeAgent ? (
             <div className="mt-4 flex h-20 rounded-lg bg-violet-50 p-2">
               {/* Left image */}
-              <Image
-                src={storeAgent?.agent_image[0] || ""}
-                alt="Description"
-                width={350}
-                height={196}
-                className="h-full w-auto rounded-lg object-contain"
+              <SmartImage
+                src={storeAgent?.agent_image[0]}
+                alt="Agent cover"
+                imageContain
+                className="w-[350px] rounded-lg"
               />
-
               {/* Right content */}
               <div className="ml-2 flex flex-1 flex-col">
                 <span className="w-[292px] truncate font-sans text-[14px] font-medium leading-normal text-zinc-800">
-                  {agent?.name}
+                  {storeAgent?.agent_name}
                 </span>
                 <span className="mt-[5px] w-[292px] truncate font-sans text-xs font-normal leading-tight text-zinc-600">
                   by {storeAgent?.creator}
@@ -189,13 +182,19 @@ export default function Page() {
                 </div>
               </div>
             </div>
-          </div>
+          ) : (
+            <div className="mt-4 flex h-20 animate-pulse rounded-lg bg-gray-300 p-2" />
+          )}
         </div>
+      </div>
+      <div className="flex min-h-[80vh] items-center justify-center">
+        {/* Left side */}
+        <div className="w-[481px]" />
         {/* Right side */}
         {!showInput ? (
           runYourAgent
         ) : (
-          <div className="ml-[54px] w-[481px] pl-5">
+          <div className="ml-[104px] w-[481px] pl-5">
             <div className="flex flex-col">
               <OnboardingText variant="header">
                 Provide details for your agent

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/6-congrats/actions.ts

@@ -6,6 +6,13 @@ import { redirect } from "next/navigation";
 export async function finishOnboarding() {
   const api = new BackendAPI();
   const onboarding = await api.getUserOnboarding();
-  revalidatePath("/library", "layout");
-  redirect("/library");
+  const listingId = onboarding?.selectedStoreListingVersionId;
+  if (listingId) {
+    const libraryAgent = await api.addMarketplaceAgentToLibrary(listingId);
+    revalidatePath(`/library/agents/${libraryAgent.id}`, "layout");
+    redirect(`/library/agents/${libraryAgent.id}`);
+  } else {
+    revalidatePath("/library", "layout");
+    redirect("/library");
+  }
 }

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/page.tsx

@@ -13,7 +13,7 @@ export default async function OnboardingPage() {
   // CONGRATS is the last step in intro onboarding
   if (onboarding.completedSteps.includes("CONGRATS")) redirect("/marketplace");
   else if (onboarding.completedSteps.includes("AGENT_INPUT"))
-    redirect("/onboarding/6-congrats");
+    redirect("/onboarding/5-run");
   else if (onboarding.completedSteps.includes("AGENT_NEW_RUN"))
     redirect("/onboarding/5-run");
   else if (onboarding.completedSteps.includes("AGENT_CHOICE"))

autogpt_platform/frontend/src/components/agptui/SmartImage.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { useState } from "react";
+
+interface SmartImageProps {
+  src?: string | null;
+  alt: string;
+  imageContain?: boolean;
+  className?: string;
+}
+
+export default function SmartImage({
+  src,
+  alt,
+  imageContain,
+  className,
+}: SmartImageProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const shouldShowSkeleton = isLoading || !src;
+
+  return (
+    <div className={cn("relative overflow-hidden", className)}>
+      {src && (
+        <Image
+          src={src}
+          alt={alt}
+          fill
+          onLoad={() => setIsLoading(false)}
+          className={cn(
+            "rounded-inherit object-center transition-opacity duration-300",
+            isLoading ? "opacity-0" : "opacity-100",
+            imageContain ? "object-contain" : "object-cover",
+          )}
+          sizes="100%"
+        />
+      )}
+      {shouldShowSkeleton && (
+        <div className="rounded-inherit absolute inset-0 animate-pulse bg-gray-300 dark:bg-gray-700" />
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/agptui/Wallet.tsx

@@ -11,7 +11,7 @@ import { PopoverClose } from "@radix-ui/react-popover";
 import { TaskGroups } from "../onboarding/WalletTaskGroups";
 import { ScrollArea } from "../ui/scroll-area";
 import { useOnboarding } from "../onboarding/onboarding-provider";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import * as party from "party-js";
 import WalletRefill from "./WalletRefill";
@@ -21,6 +21,11 @@ export default function Wallet() {
     fetchInitialCredits: true,
   });
   const { state, updateState } = useOnboarding();
+  const [prevCredits, setPrevCredits] = useState<number | null>(credits);
+  const [flash, setFlash] = useState(false);
+  const [stepsLength, setStepsLength] = useState<number | null>(
+    state?.completedSteps?.length || null,
+  );
   const walletRef = useRef<HTMLButtonElement | null>(null);
 
   const onWalletOpen = useCallback(async () => {
@@ -37,49 +42,81 @@ export default function Wallet() {
     .through("lifetime")
     .build();
 
+  // Confetti effect on the wallet button
   useEffect(() => {
-    // Check if there are any completed tasks (state?.completedTasks) that
-    // are not in the state?.notified array and play confetti if so
-    const pending = state?.completedSteps
-      .filter((step) => !state?.notified.includes(step))
-      // Ignore steps that are not relevant for notifications
-      .filter(
-        (step) =>
-          step !== "WELCOME" &&
-          step !== "USAGE_REASON" &&
-          step !== "INTEGRATIONS" &&
-          step !== "AGENT_CHOICE" &&
-          step !== "AGENT_NEW_RUN" &&
-          step !== "AGENT_INPUT",
-      );
-    if ((pending?.length || 0) > 0 && walletRef.current) {
-      party.confetti(walletRef.current, {
-        count: 30,
-        spread: 120,
-        shapes: ["square", "circle"],
-        size: party.variation.range(1, 2),
-        speed: party.variation.range(200, 300),
-        modules: [fadeOut],
-      });
+    if (!state?.completedSteps) {
+      return;
+    }
+    // If we haven't set the length yet, just set it and return
+    if (stepsLength === null) {
+      setStepsLength(state?.completedSteps?.length);
+      return;
+    }
+    // It's enough to compare array lengths,
+    // because the order of completed steps is not important
+    // If the length is the same, we don't need to do anything
+    if (state?.completedSteps?.length === stepsLength) {
+      return;
+    }
+    // Otherwise, we need to set the new length
+    setStepsLength(state?.completedSteps?.length);
+    // And make confetti
+    if (walletRef.current) {
+      setTimeout(() => {
+        fetchCredits();
+        party.confetti(walletRef.current!, {
+          count: 30,
+          spread: 120,
+          shapes: ["square", "circle"],
+          size: party.variation.range(1, 2),
+          speed: party.variation.range(200, 300),
+          modules: [fadeOut],
+        });
+      }, 800);
     }
   }, [state?.completedSteps, state?.notified]);
 
+  // Wallet flash on credits change
+  useEffect(() => {
+    if (credits === prevCredits) {
+      return;
+    }
+    setPrevCredits(credits);
+    if (prevCredits === null) {
+      return;
+    }
+    setFlash(true);
+    setTimeout(() => {
+      setFlash(false);
+    }, 300);
+  }, [credits]);
+
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <button
-          ref={walletRef}
-          className="relative flex items-center gap-1 rounded-md bg-zinc-200 px-3 py-2 text-sm transition-colors duration-200 hover:bg-zinc-300"
-          onClick={onWalletOpen}
-        >
-          Wallet{" "}
-          <span className="text-sm font-semibold">
-            {formatCredits(credits)}
-          </span>
-          {state?.notificationDot && (
-            <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-violet-600"></span>
-          )}
-        </button>
+        <div className="relative inline-block">
+          <button
+            ref={walletRef}
+            className={cn(
+              "relative flex items-center gap-1 rounded-md bg-zinc-200 px-3 py-2 text-sm transition-colors duration-200 hover:bg-zinc-300",
+            )}
+            onClick={onWalletOpen}
+          >
+            Wallet{" "}
+            <span className="text-sm font-semibold">
+              {formatCredits(credits)}
+            </span>
+            {state?.notificationDot && (
+              <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-violet-600"></span>
+            )}
+          </button>
+          <div
+            className={cn(
+              "pointer-events-none absolute inset-0 rounded-md bg-violet-400 duration-2000 ease-in-out",
+              flash ? "opacity-50 duration-0" : "opacity-0",
+            )}
+          />
+        </div>
       </PopoverTrigger>
       <PopoverContent
         className={cn(