BiteSpeed Frontend Task: Chatbot flow builder

This project is a home assignment for BiteSpeed Frontend Development - SDE1 role.

Live link: ChatFlow

Features

1. Drag and Drop Nodes

2. Custom Nodes

3. Save in Local Storage

4. Delete Node (Ctrl + Click)

5. Update Node Text

Adding Node

Nodes are added to the flow by dragging and dropping a Node from the Nodes Panel.

Save Changes

Nodes will get saved into localStorage so that on page refresh you can see the last changes.

Update Node Text.

Click on any node, in sidebar you will get input box to update the text of node.

Deleting Node

Ctrl + Mouse click (left click) to delete the node from UI.

Node types

Support Message node for now.

Source Node

Source node can only originate one edge at a time.

Target Node

Target node can have more than one edge connecting.