mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-01-10 07:38:04 -05:00
da6e1ad26d
### Changes 🏗️ This PR introduces a new high-performance builder interface for the AutoGPT platform, implementing a React Flow-based visual editor with optimized state management and rendering. #### Key Changes: 1. **New Flow Editor Implementation** - Built on React Flow for efficient graph rendering and interaction - Implements a node-based visual workflow builder with custom nodes and edges - Dynamic form generation using React JSON Schema Form (RJSF) for block inputs - Intelligent connection handling with visual feedback 2. **State Management Optimization** - Added Zustand for lightweight, performant state management - Separated node and edge stores for better data isolation - Reduced unnecessary re-renders through granular state updates 3. **Dual Builder View (Temporary)** - Added toggle between old and new builder implementations - Allows A/B testing and gradual migration - Feature flagged for controlled rollout 4. **Enhanced UI Components** - Custom form widgets for various input types (date, time, file, etc.) - Array and object editors with improved UX - Connection handles with visual state indicators - Advanced mode toggle for complex configurations 5. **Architecture Improvements** - Modular component structure for better code organization - Comprehensive documentation for the new system - Type-safe implementation with TypeScript #### Dependencies Added: - `zustand` (v5.0.2) - State management - `@rjsf/core` (v5.22.8) - JSON Schema Form core - `@rjsf/utils` (v5.22.8) - RJSF utilities - `@rjsf/validator-ajv8` (v5.22.8) - Schema validation ### Performance Improvements 🚀 - **Reduced Re-renders**: Zustand's shallow comparison and selective subscriptions minimize unnecessary component updates - **Optimized Graph Rendering**: React Flow provides efficient canvas-based rendering for large workflows - **Lazy Loading**: Components are loaded on-demand reducing initial bundle size - **Memoized Computations**: Heavy calculations are cached to avoid redundant processing ### Test Plan 📋 #### 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: #### Test Checklist: - [x] Create a new agent from scratch with at least 5 blocks - [x] Connect blocks and verify connections render correctly - [x] Switch between old and new builder views - [x] Test all form input types (text, number, boolean, array, object) - [x] Verify data persistence when switching views - [x] Test advanced mode toggle functionality - [x] Performance test with 50+ blocks to verify smooth interaction ### Migration Strategy The implementation includes a temporary toggle to switch between the old and new builder. This allows for: - Gradual user migration - A/B testing to measure performance improvements - Fallback option if issues are discovered - Collecting user feedback before full rollout ### Documentation Comprehensive documentation has been added: - `/components/FlowEditor/docs/README.md` - Architecture overview and store management - `/components/FlowEditor/docs/FORM_CREATOR.md` - Detailed form system documentation --------- Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co> Co-authored-by: Claude <noreply@anthropic.com>
157 lines
5.3 KiB
JSON
157 lines
5.3 KiB
JSON
{
|
|
"name": "frontend",
|
|
"version": "0.3.4",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "pnpm run generate:api:force && next dev --turbo",
|
|
"build": "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: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": {
|
|
"@faker-js/faker": "9.9.0",
|
|
"@hookform/resolvers": "5.2.1",
|
|
"@next/third-parties": "15.4.6",
|
|
"@phosphor-icons/react": "2.1.10",
|
|
"@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-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": "5.24.13",
|
|
"@rjsf/utils": "5.24.13",
|
|
"@rjsf/validator-ajv8": "5.24.13",
|
|
"@sentry/nextjs": "9.42.0",
|
|
"@supabase/ssr": "0.6.1",
|
|
"@supabase/supabase-js": "2.55.0",
|
|
"@tanstack/react-query": "5.85.3",
|
|
"@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.8.3",
|
|
"boring-avatars": "1.11.2",
|
|
"class-variance-authority": "0.7.1",
|
|
"clsx": "2.1.1",
|
|
"cmdk": "1.1.1",
|
|
"cookie": "1.0.2",
|
|
"date-fns": "4.1.0",
|
|
"dotenv": "17.2.1",
|
|
"elliptic": "6.6.1",
|
|
"embla-carousel-react": "8.6.0",
|
|
"framer-motion": "12.23.12",
|
|
"geist": "1.4.2",
|
|
"highlight.js": "11.11.1",
|
|
"jaro-winkler": "0.2.8",
|
|
"katex": "0.16.22",
|
|
"launchdarkly-react-client-sdk": "3.8.1",
|
|
"lodash": "4.17.21",
|
|
"lucide-react": "0.539.0",
|
|
"moment": "2.30.1",
|
|
"next": "15.4.7",
|
|
"next-themes": "0.4.6",
|
|
"nuqs": "2.4.3",
|
|
"party-js": "2.2.0",
|
|
"react": "18.3.1",
|
|
"react-day-picker": "9.8.1",
|
|
"react-dom": "18.3.1",
|
|
"react-drag-drop-files": "2.4.0",
|
|
"react-hook-form": "7.62.0",
|
|
"react-icons": "5.5.0",
|
|
"react-markdown": "9.0.3",
|
|
"react-modal": "3.16.3",
|
|
"react-shepherd": "6.1.9",
|
|
"react-window": "1.8.11",
|
|
"recharts": "3.1.2",
|
|
"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",
|
|
"sonner": "2.0.7",
|
|
"tailwind-merge": "2.6.0",
|
|
"tailwind-scrollbar": "4.0.2",
|
|
"tailwindcss-animate": "1.0.7",
|
|
"uuid": "11.1.0",
|
|
"vaul": "1.1.2",
|
|
"zod": "3.25.76",
|
|
"zustand": "5.0.8"
|
|
},
|
|
"devDependencies": {
|
|
"@chromatic-com/storybook": "4.1.1",
|
|
"@playwright/test": "1.55.0",
|
|
"@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.86.0",
|
|
"@tanstack/react-query-devtools": "5.87.3",
|
|
"@types/canvas-confetti": "1.9.0",
|
|
"@types/lodash": "4.17.20",
|
|
"@types/negotiator": "0.6.4",
|
|
"@types/node": "24.3.1",
|
|
"@types/react": "18.3.17",
|
|
"@types/react-dom": "18.3.5",
|
|
"@types/react-modal": "3.16.3",
|
|
"@types/react-window": "1.8.8",
|
|
"axe-playwright": "2.1.0",
|
|
"chromatic": "13.1.4",
|
|
"concurrently": "9.2.1",
|
|
"cross-env": "7.0.3",
|
|
"eslint": "8.57.1",
|
|
"eslint-config-next": "15.5.2",
|
|
"eslint-plugin-storybook": "9.1.5",
|
|
"import-in-the-middle": "1.14.2",
|
|
"msw": "2.11.1",
|
|
"msw-storybook-addon": "2.0.5",
|
|
"orval": "7.11.2",
|
|
"pbkdf2": "3.1.3",
|
|
"postcss": "8.5.6",
|
|
"prettier": "3.6.2",
|
|
"prettier-plugin-tailwindcss": "0.6.14",
|
|
"require-in-the-middle": "7.5.2",
|
|
"storybook": "9.1.5",
|
|
"tailwindcss": "3.4.17",
|
|
"typescript": "5.9.2"
|
|
},
|
|
"msw": {
|
|
"workerDirectory": [
|
|
"public"
|
|
]
|
|
},
|
|
"packageManager": "pnpm@10.11.1+sha256.211e9990148495c9fc30b7e58396f7eeda83d9243eb75407ea4f8650fb161f7c"
|
|
}
|