mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-01-09 15:17:59 -05:00
refactor(frontend): enhance builder UI for better performance (#10922)
### 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>
This commit is contained in:
@@ -48,6 +48,9 @@
|
||||
"@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",
|
||||
@@ -103,7 +106,8 @@
|
||||
"tailwindcss-animate": "1.0.7",
|
||||
"uuid": "11.1.0",
|
||||
"vaul": "1.1.2",
|
||||
"zod": "3.25.76"
|
||||
"zod": "3.25.76",
|
||||
"zustand": "5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "4.1.1",
|
||||
|
||||
Reference in New Issue
Block a user