mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
86abfbd394
### Why / What / How <img width="800" height="827" alt="Screenshot 2026-04-02 at 15 40 24" src="https://github.com/user-attachments/assets/69a381c1-2884-434b-9406-4a3f7eec87cf" /> <img width="800" height="825" alt="Screenshot 2026-04-02 at 15 40 41" src="https://github.com/user-attachments/assets/c6191a68-a8ba-482b-ba47-c06c71d69f0c" /> <img width="800" height="825" alt="Screenshot 2026-04-02 at 15 40 48" src="https://github.com/user-attachments/assets/31b632b9-59cb-4bf7-a6a0-6158846fcf9a" /> <img width="800" height="812" alt="Screenshot 2026-04-02 at 15 40 54" src="https://github.com/user-attachments/assets/64e38a15-2e56-4c0e-bd84-987bf6076bf7" /> **Why:** The existing onboarding flow was outdated and didn't align with the new Autopilot-first experience. New users need a streamlined, visually polished wizard that collects their role and pain points to personalize Autopilot suggestions. **What:** Complete redesign of the onboarding wizard as a 4-step flow: Welcome → Role selection → Pain points → Preparing workspace. Uses the design system throughout (atoms/molecules), adds animations, and syncs steps with URL search params. **How:** - Zustand store manages wizard state (name, role, pain points, current step) - Steps synced to `?step=N` URL params for browser navigation support - Pain points reordered based on selected role (e.g. Sales sees "Finding leads" first) - Design system components used exclusively (no raw shadcn `ui/` imports) - New reusable components: `FadeIn` (atom), `TypingText` (molecule) with Storybook stories - `AutoGPTLogo` made sizeable via Tailwind className prop, migrated in Navbar - Fixed `SetupAnalytics` crash (client component was rendered inside `<head>`) ### Changes 🏗️ - **New onboarding wizard** (`steps/WelcomeStep`, `RoleStep`, `PainPointsStep`, `PreparingStep`) - **New shared components**: `ProgressBar`, `StepIndicator`, `SelectableCard`, `CardCarousel` - **New design system components**: `FadeIn` atom with stories, `TypingText` molecule with stories - **`AutoGPTLogo`** — size now controlled via `className` prop instead of numeric `size` - **Navbar** — migrated from legacy `IconAutoGPTLogo` to design system `AutoGPTLogo` - **Layout fix** — moved `SetupAnalytics` from `<head>` to `<body>` to fix React hydration crash - **Role-based pain point ordering** — top picks surfaced first based on role selection - **URL-synced steps** — `?step=N` search params for back/forward navigation - Removed old onboarding pages (1-welcome through 6-congrats, reset page) - Emoji/image assets for role selection cards ### 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] Complete onboarding flow from step 1 through 4 as a new user - [x] Verify back button navigates to previous step - [x] Verify progress bar advances correctly (hidden on step 4) - [x] Verify step indicator dots show for steps 1-3 - [x] Verify role selection reorders pain points on next step - [x] Verify "Other" role/pain point shows text input - [x] Verify typing animation on PreparingStep title - [x] Verify fade-in animations on all steps - [x] Verify URL updates with `?step=N` on navigation - [x] Verify browser back/forward works with step URLs - [x] Verify mobile horizontal scroll on card grids - [x] Verify `pnpm types` passes cleanly --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { DEFAULT_SEARCH_TERMS } from "@/app/(platform)/marketplace/components/HeroSection/helpers";
|
|
import { environment } from "@/services/environment";
|
|
import { useFlags } from "launchdarkly-react-client-sdk";
|
|
|
|
export enum Flag {
|
|
BETA_BLOCKS = "beta-blocks",
|
|
NEW_BLOCK_MENU = "new-block-menu",
|
|
GRAPH_SEARCH = "graph-search",
|
|
ENABLE_ENHANCED_OUTPUT_HANDLING = "enable-enhanced-output-handling",
|
|
SHARE_EXECUTION_RESULTS = "share-execution-results",
|
|
AGENT_FAVORITING = "agent-favoriting",
|
|
MARKETPLACE_SEARCH_TERMS = "marketplace-search-terms",
|
|
ENABLE_PLATFORM_PAYMENT = "enable-platform-payment",
|
|
}
|
|
|
|
const isPwMockEnabled = process.env.NEXT_PUBLIC_PW_TEST === "true";
|
|
|
|
const defaultFlags = {
|
|
[Flag.BETA_BLOCKS]: [],
|
|
[Flag.NEW_BLOCK_MENU]: false,
|
|
[Flag.GRAPH_SEARCH]: false,
|
|
[Flag.ENABLE_ENHANCED_OUTPUT_HANDLING]: false,
|
|
[Flag.SHARE_EXECUTION_RESULTS]: false,
|
|
[Flag.AGENT_FAVORITING]: false,
|
|
[Flag.MARKETPLACE_SEARCH_TERMS]: DEFAULT_SEARCH_TERMS,
|
|
[Flag.ENABLE_PLATFORM_PAYMENT]: false,
|
|
};
|
|
|
|
type FlagValues = typeof defaultFlags;
|
|
|
|
export function useGetFlag<T extends Flag>(flag: T): FlagValues[T] {
|
|
const currentFlags = useFlags<FlagValues>();
|
|
const flagValue = currentFlags[flag];
|
|
const areFlagsEnabled = environment.areFeatureFlagsEnabled();
|
|
|
|
if (!areFlagsEnabled || isPwMockEnabled) {
|
|
return defaultFlags[flag];
|
|
}
|
|
|
|
return flagValue ?? defaultFlags[flag];
|
|
}
|