ChatFlow - Visual Chatbot Flow Builder

A modern, interactive web application for building chatbot conversation flows using React and React Flow. Create, connect, and manage message nodes with an intuitive drag-and-drop interface.

🖼️ Screenshot

ChatFlow in action - Building a conversational flow with multiple connected message nodes

✨ Features

🎯 Core Functionality

• Drag & Drop Interface: Easily add message nodes to the canvas
• Visual Flow Builder: Connect nodes with intuitive edge connections
• Real-time Editing: Edit node text content in the settings panel
• Flow Validation: Ensure all nodes are properly connected before saving
• Modern UI: Clean, responsive design with professional styling

🛠️ Technical Features

• React Flow Integration: Powered by React Flow for smooth node interactions
• State Management: Efficient state handling with React hooks
• Component Architecture: Modular, reusable components
• Validation System: Comprehensive flow validation with error handling
• Responsive Design: Works seamlessly across different screen sizes

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd chatflow

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000 to see the application

📖 How to Use

1. Adding Nodes

• Drag a "Message" node from the left panel onto the canvas
• Drop it anywhere on the canvas to create a new message node

2. Connecting Nodes

• Click and drag from the bottom handle (source) of one node
• Connect to the top handle (target) of another node
• Release to create a connection between the nodes

3. Editing Node Content

• Click on any node to select it
• Edit the text in the settings panel on the right
• Changes are reflected immediately on the canvas

4. Saving Your Flow

• Click the "💾 Save Flow" button in the top-right corner
• Validation ensures all nodes are connected and have content
• Success/Error messages provide clear feedback

🏗️ Project Structure

src/
├── components/
│   ├── FlowCanvas.jsx      # Main canvas with React Flow
│   ├── NodesPanel.jsx      # Left panel with draggable nodes
│   ├── SettingsPanel.jsx   # Right panel for node editing
│   ├── TextNode.jsx        # Custom message node component
│   └── SaveButton.jsx      # Save and validation button
├── utils/
│   └── validation.js       # Flow validation logic
├── App.js                  # Main application component
└── App.css                 # Global styles

🔧 Technologies Used

• React 18: Modern React with hooks
• React Flow: Node-based editor library
• CSS3: Custom styling and responsive design
• UUID: Unique identifier generation
• HTML5 Drag & Drop: Native drag and drop functionality

✅ Validation Rules

The application enforces the following validation rules:

1. Minimum Nodes: Flow must contain at least one node
2. Connection Requirements:
   • Single node flows are always valid
   • Multiple node flows require all nodes to have at least one connection
3. Content Requirements: All nodes must have non-empty text content
4. Error Handling: Clear error messages for validation failures

🎨 UI Components

Nodes Panel (Left)

• Draggable "Message" node template
• Usage instructions and guidelines
• Clean, organized layout

Flow Canvas (Center)

• Interactive React Flow canvas
• Grid background for visual reference
• Zoom controls and minimap
• Node selection and connection tools

Settings Panel (Right)

• Node text editor for selected nodes
• Real-time content updates
• Clear visual feedback for selection state

Save Button (Top-Right)

• Prominent save functionality
• Validation feedback
• Success/error message display

🔄 Recent Updates

Latest Fixes

• ✅ Drag & Drop: Fixed node persistence on canvas
• ✅ Text Editing: Real-time text updates on nodes
• ✅ State Management: Resolved circular update issues
• ✅ Validation: Improved flow validation logic
• ✅ Branding: Updated to ChatFlow branding with custom favicon

Performance Improvements

• Memoized node types to prevent React Flow warnings
• Optimized state management between components
• Added proper error handling and debugging

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Flow for the excellent node-based editor library
• React for the powerful UI framework
• The open-source community for inspiration and best practices

---

Built with ❤️ for creating amazing chatbot experiences