Abhimanyu Yadav da6e1ad26d 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>

2025-09-26 10:42:05 +00:00

..

DateInput.tsx

refactor(frontend): enhance builder UI for better performance (#10922)

2025-09-26 10:42:05 +00:00