Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Infinity-code/Chatbot-flow-builder

Repository files navigation

Chatbot-flow-builder

A simple chatbot flow builder built using React. A chatbot flow is built by connecting the nodes by edges. DRAG FROM THE RIGHT (SIDEBAR) AND DROP IT ON THE LEFT AND YOU GET YOURSELF A NODE. This is hosted at https://chatbot-flow-builder-omega.vercel.app/

Screenshot 2024-04-17 160923

Features

  1. Custom nodes can be added based on the functionality. Right now only type of node exist which is a text message node. Screenshot 2024-04-17 161031

  2. Clicking on the node will open up a settings panel on the right, where one can type a message which gets reflected onto the corresponding node only. Screenshot 2024-04-17 161103

  3. Flow will not be saved if more than one node has empty target handle or there are not nodes on the react-flow pane. Screenshot 2024-04-17 161139

  4. The text inside the text node does not overflow out of the node, instead the node resizes vertically to accommodate the growing length of the message. Screenshot 2024-04-17 161556

  5. Also source handle can send only one edge out but target handles can receive any number of edges.

  6. Deleting an edge and adding the same edge is possible, this builder will not ban you from performing such a task (which is important)

Setting up the project locally

To set up the project locally, run the following command. This download all the dependencies.

npm install

Run

To run the project, following command is used.

npm run dev

About

Chatbot flow builder is built using React

Resources

License

Stars

Watchers

Forks