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>
191 lines
6.4 KiB
JSON
191 lines
6.4 KiB
JSON
{
|
|
"name": "frontend",
|
|
"version": "0.3.4",
|
|
"private": true,
|
|
"engines": {
|
|
"node": "22.x"
|
|
},
|
|
"scripts": {
|
|
"dev": "pnpm run generate:api:force && next dev --turbo",
|
|
"build": "cross-env NODE_OPTIONS=--max-old-space-size=16384 next build",
|
|
"start": "next start",
|
|
"start:standalone": "cd .next/standalone && node server.js",
|
|
"lint": "next lint && prettier --check .",
|
|
"format": "next lint --fix; prettier --write .",
|
|
"types": "tsc --noEmit",
|
|
"test": "NEXT_PUBLIC_PW_TEST=true next build --turbo && playwright test",
|
|
"test-ui": "NEXT_PUBLIC_PW_TEST=true next build --turbo && playwright test --ui",
|
|
"test:unit": "vitest run --coverage",
|
|
"test:unit:watch": "vitest",
|
|
"test:no-build": "playwright test",
|
|
"gentests": "playwright codegen http://localhost:3000",
|
|
"storybook": "storybook dev -p 6006",
|
|
"build-storybook": "storybook build",
|
|
"test-storybook": "test-storybook",
|
|
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm run test-storybook\"",
|
|
"generate:api": "npx --yes tsx ./scripts/generate-api-queries.ts && orval --config ./orval.config.ts",
|
|
"generate:api:force": "npx --yes tsx ./scripts/generate-api-queries.ts --force && orval --config ./orval.config.ts"
|
|
},
|
|
"browserslist": [
|
|
"defaults"
|
|
],
|
|
"dependencies": {
|
|
"@ai-sdk/react": "3.0.61",
|
|
"@faker-js/faker": "10.0.0",
|
|
"@ferrucc-io/emoji-picker": "0.0.48",
|
|
"@hookform/resolvers": "5.2.2",
|
|
"@next/third-parties": "15.4.6",
|
|
"@phosphor-icons/react": "2.1.10",
|
|
"@posthog/react": "1.7.0",
|
|
"@radix-ui/react-accordion": "1.2.12",
|
|
"@radix-ui/react-alert-dialog": "1.1.15",
|
|
"@radix-ui/react-avatar": "1.1.10",
|
|
"@radix-ui/react-checkbox": "1.3.3",
|
|
"@radix-ui/react-collapsible": "1.1.12",
|
|
"@radix-ui/react-context-menu": "2.2.16",
|
|
"@radix-ui/react-dialog": "1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "2.1.16",
|
|
"@radix-ui/react-icons": "1.3.2",
|
|
"@radix-ui/react-label": "2.1.7",
|
|
"@radix-ui/react-popover": "1.1.15",
|
|
"@radix-ui/react-radio-group": "1.3.8",
|
|
"@radix-ui/react-scroll-area": "1.2.10",
|
|
"@radix-ui/react-select": "2.2.6",
|
|
"@radix-ui/react-separator": "1.1.7",
|
|
"@radix-ui/react-slider": "1.3.6",
|
|
"@radix-ui/react-slot": "1.2.3",
|
|
"@radix-ui/react-switch": "1.2.6",
|
|
"@radix-ui/react-tabs": "1.1.13",
|
|
"@radix-ui/react-toast": "1.2.15",
|
|
"@radix-ui/react-tooltip": "1.2.8",
|
|
"@rjsf/core": "6.1.2",
|
|
"@rjsf/utils": "6.1.2",
|
|
"@rjsf/validator-ajv8": "6.1.2",
|
|
"@sentry/nextjs": "10.27.0",
|
|
"@streamdown/cjk": "1.0.1",
|
|
"@streamdown/math": "1.0.1",
|
|
"@streamdown/mermaid": "1.0.1",
|
|
"@supabase/ssr": "0.7.0",
|
|
"@supabase/supabase-js": "2.78.0",
|
|
"@tanstack/react-query": "5.90.6",
|
|
"@tanstack/react-table": "8.21.3",
|
|
"@types/jaro-winkler": "0.2.4",
|
|
"@vercel/analytics": "1.5.0",
|
|
"@vercel/speed-insights": "1.2.0",
|
|
"@xyflow/react": "12.9.2",
|
|
"ai": "6.0.134",
|
|
"boring-avatars": "1.11.2",
|
|
"canvas-confetti": "1.9.4",
|
|
"class-variance-authority": "0.7.1",
|
|
"clsx": "2.1.1",
|
|
"cmdk": "1.1.1",
|
|
"cookie": "1.0.2",
|
|
"date-fns": "4.1.0",
|
|
"dexie": "4.2.1",
|
|
"dotenv": "17.2.3",
|
|
"elliptic": "6.6.1",
|
|
"embla-carousel-react": "8.6.0",
|
|
"flatbush": "4.5.0",
|
|
"framer-motion": "12.23.24",
|
|
"geist": "1.5.1",
|
|
"highlight.js": "11.11.1",
|
|
"jaro-winkler": "0.2.8",
|
|
"katex": "0.16.25",
|
|
"launchdarkly-react-client-sdk": "3.9.0",
|
|
"lodash": "4.17.21",
|
|
"lucide-react": "0.552.0",
|
|
"next": "15.4.10",
|
|
"next-themes": "0.4.6",
|
|
"nuqs": "2.7.2",
|
|
"posthog-js": "1.334.1",
|
|
"react": "18.3.1",
|
|
"react-currency-input-field": "4.0.3",
|
|
"react-day-picker": "9.11.1",
|
|
"react-dom": "18.3.1",
|
|
"react-hook-form": "7.66.0",
|
|
"react-icons": "5.5.0",
|
|
"react-markdown": "9.0.3",
|
|
"react-modal": "3.16.3",
|
|
"react-shepherd": "6.1.9",
|
|
"react-window": "2.2.0",
|
|
"recharts": "3.3.0",
|
|
"rehype-autolink-headings": "7.1.0",
|
|
"rehype-highlight": "7.0.2",
|
|
"rehype-katex": "7.0.1",
|
|
"rehype-slug": "6.0.0",
|
|
"remark-gfm": "4.0.1",
|
|
"remark-math": "6.0.0",
|
|
"shepherd.js": "14.5.1",
|
|
"shiki": "^3.21.0",
|
|
"sonner": "2.0.7",
|
|
"streamdown": "2.1.0",
|
|
"tailwind-merge": "2.6.0",
|
|
"tailwind-scrollbar": "3.1.0",
|
|
"tailwindcss-animate": "1.0.7",
|
|
"twemoji": "14.0.2",
|
|
"use-stick-to-bottom": "1.1.2",
|
|
"uuid": "11.1.0",
|
|
"vaul": "1.1.2",
|
|
"zod": "3.25.76",
|
|
"zustand": "5.0.8"
|
|
},
|
|
"devDependencies": {
|
|
"@chromatic-com/storybook": "4.1.2",
|
|
"@opentelemetry/instrumentation": "0.209.0",
|
|
"@playwright/test": "1.56.1",
|
|
"@storybook/addon-a11y": "9.1.5",
|
|
"@storybook/addon-docs": "9.1.5",
|
|
"@storybook/addon-links": "9.1.5",
|
|
"@storybook/addon-onboarding": "9.1.5",
|
|
"@storybook/nextjs": "9.1.5",
|
|
"@tanstack/eslint-plugin-query": "5.91.2",
|
|
"@tanstack/react-query-devtools": "5.90.2",
|
|
"@testing-library/dom": "10.4.1",
|
|
"@testing-library/react": "16.3.2",
|
|
"@types/canvas-confetti": "1.9.0",
|
|
"@types/lodash": "4.17.20",
|
|
"@types/negotiator": "0.6.4",
|
|
"@types/node": "24.10.0",
|
|
"@types/react": "18.3.17",
|
|
"@types/react-dom": "18.3.5",
|
|
"@types/react-modal": "3.16.3",
|
|
"@types/react-window": "2.0.0",
|
|
"@vitejs/plugin-react": "5.1.2",
|
|
"@vitest/coverage-v8": "4.0.17",
|
|
"axe-playwright": "2.2.2",
|
|
"chromatic": "13.3.3",
|
|
"concurrently": "9.2.1",
|
|
"cross-env": "10.1.0",
|
|
"eslint": "8.57.1",
|
|
"eslint-config-next": "15.5.7",
|
|
"eslint-plugin-storybook": "9.1.5",
|
|
"happy-dom": "20.3.4",
|
|
"import-in-the-middle": "2.0.2",
|
|
"msw": "2.11.6",
|
|
"msw-storybook-addon": "2.0.6",
|
|
"orval": "7.13.0",
|
|
"pbkdf2": "3.1.5",
|
|
"postcss": "8.5.6",
|
|
"prettier": "3.6.2",
|
|
"prettier-plugin-tailwindcss": "0.7.1",
|
|
"require-in-the-middle": "8.0.1",
|
|
"storybook": "9.1.5",
|
|
"tailwindcss": "3.4.17",
|
|
"typescript": "5.9.3",
|
|
"vite-tsconfig-paths": "6.0.4",
|
|
"vitest": "4.0.17"
|
|
},
|
|
"msw": {
|
|
"workerDirectory": [
|
|
"public"
|
|
]
|
|
},
|
|
"pnpm": {
|
|
"overrides": {
|
|
"@opentelemetry/instrumentation": "0.209.0",
|
|
"lodash-es": "4.17.23"
|
|
}
|
|
},
|
|
"packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
|
|
}
|