Chatbot Flow Builder

A modern, intuitive visual flow builder for creating chatbot conversations. Built with React, TypeScript, and React Flow.

🔗 Live Demo: Live Demo

📋 Table of Contents

• Features
• Screenshots
• Tech Stack
• Project Structure
• Getting Started
• Usage Guide
• Validation Rules
• Extensibility
• Deployment
• Assignment Completion

✨ Features

Core Functionality

• Drag and Drop Interface: Intuitive node placement on canvas
• Visual Connection System: Connect nodes with visual edges to define conversation flow
• Real-time Editing: Edit message content with instant visual feedback
• Flow Validation: Smart validation ensures proper chatbot flow structure
• Auto-Save to localStorage: Flow automatically persists and restores on page refresh
• Responsive Design: Works seamlessly across different screen sizes

Technical Highlights

• TypeScript: Full type safety across the application
• Custom React Hooks: Reusable logic with useFlowValidation, useNodeOperations, useFlowPersistence
• Clean Architecture: Well-organized, maintainable codebase
• Extensible Design: Easy to add new node types
• Commented Code: Comprehensive documentation for future developers
• Production Ready: Optimized build with proper error handling

📸 Screenshots

Main Interface

• Canvas area with draggable nodes
• Right panel showing available node types
• Save button with validation

Settings Panel

• Appears when a node is selected
• Real-time text editing
• Easy navigation back to nodes panel

Validation

• Success notification when flow is valid
• Error notification with descriptive message when flow is invalid

🛠 Tech Stack

• React 18 - UI Framework
• TypeScript - Type Safety
• React Flow - Flow visualization and management
• Vite - Build tool and dev server
• CSS3 - Styling with modern features

📁 Project Structure

src/
├── components/
│   ├── FlowBuilder.tsx       # Main orchestrator component
│   ├── TextNode.tsx           # Custom message node component
│   ├── NodesPanel.tsx         # Panel with draggable node types
│   ├── SettingsPanel.tsx      # Node editing interface
│   └── SaveButton.tsx         # Validation and save functionality
├── hooks/
│   ├── index.ts               # Hooks barrel export
│   ├── useFlowValidation.ts   # Validation & notification logic
│   ├── useNodeOperations.ts   # Node CRUD operations
│   └── useFlowPersistence.ts  # localStorage save/load logic
├── types/
│   └── index.ts               # TypeScript type definitions
├── utils/
│   └── validation.ts          # Flow validation logic
├── styles/
│   ├── FlowBuilder.css        # Main canvas styles
│   ├── TextNode.css           # Node styling
│   ├── NodesPanel.css         # Nodes panel styling
│   ├── SettingsPanel.css      # Settings panel styling
│   └── SaveButton.css         # Button and notification styles
├── App.tsx                    # Root component
├── main.tsx                   # Application entry point
└── index.css                  # Global styles

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository

git clone <your-repo-url>
cd chatbot-flow-builder

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Open browser and navigate to http://localhost:5173

Build for Production

npm run build

The production-ready files will be in the dist/ directory.

📖 Usage Guide

Adding Nodes

1. Look at the Nodes Panel on the right side
2. Find the Message node type
3. Drag it onto the canvas
4. Drop it where you want it placed

Connecting Nodes

1. Click and drag from a node's source handle (right side)
2. Connect to another node's target handle (left side)
3. The edge (connection) will be created
4. Note: Each source handle can only have ONE outgoing connection

Editing Node Content

1. Click on a node to select it
2. The Settings Panel appears on the right
3. Edit the text in the textarea
4. Changes are saved automatically
5. Click the back button to return to the Nodes Panel

Saving Your Flow

1. Click the Save Changes button (top right)
2. The flow will be validated
3. You'll see either:
   • ✓ Success message if flow is valid (automatically saved to localStorage)
   • ⚠ Error message if flow has issues

Auto-Persistence

Your flow is automatically saved and restored:

• On Save: When you click "Save Changes" and validation passes, the flow is saved to browser localStorage
• On Load: When you refresh the page or return later, your flow is automatically restored
• No Setup: Everything works out of the box - no configuration needed

Note: localStorage is browser-specific and domain-specific. Your flow persists across sessions but is stored locally in your browser.

✅ Validation Rules

The flow builder enforces one key rule:

If there are more than one nodes, then more than one node cannot have empty target handles.

What does this mean?

• Empty Target Handle: A node with no incoming connections
• Valid Flow: At most ONE node can have an empty target (the start node)
• Invalid Flow: Multiple nodes with empty targets means a disconnected flow

Examples

✅ Valid Flows:

• Single node (no connections needed)
• Multiple nodes where only ONE has no incoming connection
• All nodes connected in a sequence

❌ Invalid Flows:

• Two or more disconnected nodes
• Multiple "start" nodes with no incoming connections

🔧 Extensibility

The codebase is designed for easy extension with custom React hooks and modular architecture.

Custom Hooks

The application uses three custom hooks for clean separation of concerns:

useFlowValidation

Handles flow validation and notification state management:

const { notification, validateAndSave } = useFlowValidation();
const isValid = validateAndSave(nodes, edges);

useNodeOperations

Provides methods for node CRUD operations:

const { updateNodeData, deleteNode, duplicateNode, getNodeById } =
  useNodeOperations({ nodes, setNodes });

useFlowPersistence

Manages localStorage save/load operations:

const { saveFlow, loadFlow, clearFlow, hasStoredFlow } =
  useFlowPersistence({ nodes, edges, setNodes, setEdges });

Adding New Node Types

Here's how to add a new node type:

1. Add Node Type Constant

// src/types/index.ts
export const NodeType = {
  TEXT_MESSAGE: 'textMessage',
  IMAGE_MESSAGE: 'imageMessage', // New type
} as const;

2. Create Node Data Interface

// src/types/index.ts
export interface ImageMessageData {
  imageUrl: string;
  caption: string;
}

3. Create Node Component

// src/components/ImageNode.tsx
import { memo } from 'react';
import { Handle, Position, type NodeProps } from 'reactflow';
import type { ImageMessageData } from '../types';

const ImageNode = ({ data }: NodeProps<ImageMessageData>) => {
  return (
    <div className="image-node">
      <Handle type="target" position={Position.Left} />
      <img src={data.imageUrl} alt={data.caption} />
      <Handle type="source" position={Position.Right} />
    </div>
  );
};

export default memo(ImageNode);

4. Register Node Type

// src/components/FlowBuilder.tsx
const nodeTypes = {
  [NodeType.TEXT_MESSAGE]: TextNode,
  [NodeType.IMAGE_MESSAGE]: ImageNode, // Register new type
};

5. Add to Nodes Panel

// src/components/NodesPanel.tsx
const availableNodes: DraggableNodeType[] = [
  {
    type: NodeType.TEXT_MESSAGE,
    label: 'Message',
    icon: '💬',
    description: 'Send a text message'
  },
  {
    type: NodeType.IMAGE_MESSAGE,
    label: 'Image',
    icon: '🖼️',
    description: 'Send an image'
  },
];

🌐 Deployment

Deploy to Vercel (Recommended)

1. Install Vercel CLI

npm install -g vercel

2. Build the project

npm run build

3. Deploy

vercel --prod

Deploy to Netlify

1. Build the project

npm run build

2. Drag and drop the dist folder to Netlify Drop

Or use Netlify CLI:

npm install -g netlify-cli
netlify deploy --prod --dir=dist

Deploy to GitHub Pages

1. Install gh-pages

npm install --save-dev gh-pages

2. Add to package.json

{
  "homepage": "https://yourusername.github.io/chatbot-flow-builder",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

3. Deploy

npm run deploy

📝 Assignment Completion

This project was built as a submission for the BiteSpeed Frontend Task. Here's how it meets all requirements:

✅ Required Features Implemented

1. Text Node - Custom node component with message display
2. Nodes Panel - Draggable panel with available node types
3. Edge - Visual connections between nodes
4. Source Handle - Only one edge originating from source (enforced)
5. Target Handle - Multiple edges can connect to target
6. Settings Panel - Replaces nodes panel when node is selected
7. Save Button - Validates flow and shows notifications

✅ Technical Requirements

• ✓ Built with React and TypeScript
• ✓ Uses React Flow library
• ✓ Code is well-commented
• ✓ Extensible architecture for adding new node types
• ✓ Proper validation logic implemented
• ✓ Production build works correctly

🌟 Bonus Features Implemented

Beyond the basic requirements, this submission includes:

1. Custom React Hooks - Three reusable hooks (useFlowValidation, useNodeOperations, useFlowPersistence)
2. Auto-Persistence - Flow automatically saves to localStorage and restores on refresh
3. Advanced TypeScript - Full type safety with no any types
4. Clean Architecture - Separation of concerns (components, hooks, utils, types)
5. Professional UI/UX - Smooth animations, hover states, and visual feedback
6. Comprehensive Documentation - Detailed README, FEATURES.md, and SUBMISSION_GUIDE.md

📦 Submission Checklist

• ✓ Code hosted on GitHub
• ✓ Application deployed and accessible
• ✓ README with deployment link
• ✓ All features working as specified
• ✓ Clean, commented code
• ✓ TypeScript for better code quality

🤝 Contributing

This is a submission project, but suggestions are welcome! Feel free to open an issue or reach out.

📄 License

MIT License - feel free to use this code for learning and development.

👨‍💻 Author

Built with ❤️ for the BiteSpeed Frontend Task