@webdevarif/reactflow/README.md

Reusable ReactFlow components for social media bot automation

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

### Facebook Bot Workflow

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

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

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