@webdevarif/reactflow

A reusable ReactFlow package for creating social media bot automation workflows. This package provides pre-built node types and components for Facebook, WhatsApp, and Telegram bot automation.

Features

• 🎨 Pre-built Node Types: Ready-to-use message nodes for different platforms
• 🔧 Customizable: Easy to extend and customize for your needs
• 📱 Multi-Platform: Support for Facebook, WhatsApp, and Telegram
• 🎯 Facebook Ready: Complete Facebook Messenger bot workflow support
• 🚀 TypeScript: Full TypeScript support with type definitions
• 🎨 Tailwind CSS: Beautiful, responsive design with Tailwind CSS

Installation

npm install @webdevarif/reactflow
# or
yarn add @webdevarif/reactflow
# or
pnpm add @webdevarif/reactflow

Usage

Facebook Bot Workflow

import React from 'react';
import { FacebookWorkflow } from '@webdevarif/reactflow/facebook';

function MyBotBuilder() {
  const handleSave = (config) => {
    console.log('Workflow saved:', config);
  };

  const handleNodeClick = (node) => {
    console.log('Node clicked:', node);
  };

  return (
    <div className="h-screen">
      <FacebookWorkflow
        onSave={handleSave}
        onNodeClick={handleNodeClick}
        height="100vh"
      />
    </div>
  );
}

Facebook Message Types

The Facebook workflow supports these message types:

• Text: Simple text messages
• Image: Image messages with media
• Audio: Audio messages
• Video: Video messages
• File: File attachments
• Facebook Media: Facebook-specific media content
• Carousel: Carousel of items
• E-commerce: E-commerce product displays
• AI Reply: AI-powered responses
• Condition: Conditional logic nodes
• Delay: Delay/timer nodes

Custom Node Types

import { facebookNodeTypes } from '@webdevarif/reactflow/facebook';

// Add custom node types
const customNodeTypes = {
  ...facebookNodeTypes,
  customNode: MyCustomNode,
};

API Reference

FacebookWorkflow Props

| Prop | Type | Description | |------|------|-------------| | initialNodes | Node[] | Initial nodes for the workflow | | initialEdges | Edge[] | Initial edges for the workflow | | onSave | (config: WorkflowConfig) => void | Callback when workflow is saved | | onNodeClick | (node: Node) => void | Callback when a node is clicked | | onEdgeClick | (edge: Edge) => void | Callback when an edge is clicked | | className | string | Additional CSS classes | | height | string \| number | Height of the workflow canvas |

WorkflowConfig

interface WorkflowConfig {
  name: string;
  description?: string;
  platform: 'facebook' | 'whatsapp' | 'telegram';
  nodes: WorkflowNode[];
  edges: WorkflowEdge[];
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes
npm run dev

Contributing

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

License

MIT © WebDevArif