akash-goswami/chatbot-flow-builder

Chatbot flow builder using React.js

Chatbot Flow Builder

This is a simple chatbot flow builder application built using React and React Flow library. It allows users to create chatbot flow diagrams by connecting nodes and editing text messages.

Features

• Text Nodes: Create multiple text nodes in a flow.
• Nodes Panel: Drag and drop nodes from the panel to the canvas.
• Edge: Connect nodes together to define the flow.
• Source Handle: Origin of a connecting edge.
• Target Handle: Destination of a connecting edge.
• Settings Panel: Edit the text of selected nodes.
• Save Button: Save the flow configuration.

Deployment

The application is deployed and can be accessed at [https://akash-chatbot.netlify.app/].

How to Use

1. Add Nodes: Drag nodes from the Nodes Panel on the left to the canvas.
2. Connect Nodes: Click on a node's source handle, drag to another node's target handle to create an edge.
3. Edit Text: Click on a node to select it, then edit the text in the Settings Panel on the right.
4. Save Flow: Click the Save button to save the chatbot flow configuration.

Development

To run the project locally:

1. Clone the repository:

   git clone https://github.com/Akash-goswami/Chatbot-flow-builder.git
   cd chatbot-flow-builder