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:
Abhimanyu Yadav
2025-09-26 16:12:05 +05:30
committed by GitHub
parent 634fffb967
commit da6e1ad26d
58 changed files with 3729 additions and 113 deletions

View File

@@ -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",