Drag nd Drop Chatbot Flow Builder

Live demo :Drag and drop chatbot flow builder

Tech Stack:

• Next.js
• React Flow
• Tailwind CSS

Features:

• Drag and drop nodes from the Nodes Panel
• Nodes panel that houses all the nodes
• Edges that connects two nodes together
• Source handle that can only have one edge originating from it
• Target handle that can have more than one edge connecting to it
• Settings Panel,with a text field to edit text of the selected Text Node, that will replace the Nodes Panel when a Node is selected
• Save button to save the flow. It will show an error if there are more than one Nodes and more than one Node has empty target handles
• Edge that can be updated