@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

``bash
npm install @webdevarif/reactflow

or

yarn add @webdevarif/reactflow

or

pnpm add @webdevarif/reactflow
`

Usage

$3

`tsx
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 (

onSave={handleSave}
onNodeClick={handleNodeClick}
height="100vh"
/>

);
}
`

$3

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

$3

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

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

API Reference

$3

| 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 |

$3

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

Development

`bash

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