BiteSpeed Frontend Task: Chatbot flow builder

This is created by Denish , and his repo is https://github.com/denishsharma/chatbot-flow-builder-task-bitespeed

I have cloned this and make this more available to my github due to more reach

Scroll Below to see more

See the live demo

We’ll build a simple Chatbot flow builder using React and try to make the code extensible to easily add new features.

A chatbot flow is built by connecting multiple messages to decide the order of execution

Features

Nodes

• Start Node: The starting point of the flow.
• Message Node: A message to be displayed to the user.
• Conditional Path Node: A condition to be matched with multiple cases or paths to be taken. (showcase to use of dynamic handles)
• End Node: The end of the flow.

Sidebars

• Node Sidebar: Contains the list of nodes that can be added to the flow.
• Node Properties Sidebar: Contains the properties of the selected node.

Flow

• Validation: Check if the flow is valid or not. A valid flow should have a start node and an end node.
• Auto Adjust: Nodes will automatically adjust their position to avoid overlapping. It won't adjust the flow lines.

Tech Stack & Libraries

• React
• React Flow
• Zustand
• TypeScript
• UnoCss

Clone this repo and use yarn to run the application

this is based on v-10, 11 ->

Want to collaboration for your project?

let me know then your project mind: : with pro-features

azimaahmed36+reactflow+github@gmail.com

chatbot builder-->

contact me through email to see

ask for better examples

See all examples

https://reactflowexample.vercel.app

New Drag and drop

https://check-automate.vercel.app/ --(PAID)

Preview

Updated Design with

Automation flow

https://automationflow.vercel.app/

Group layout with multiple nodes

https://group-layout-flow.netlify.app/

preview

Auto layout previous implementation

https://auto-layout-workflow.vercel.app/

Square Bear

https://app.squarebear.com.au/

Dalus

only design :

Another work live link :

https://boneguide.netlify.app/workflow

features:

• Editable
• updateable
• searchable
• clickable
• resist manual connect
• Edge type changing -Single color
• Multi-color
• Deletable
• Dagre layouting
• centering node
• selected node

Data analytics

https://flow-diagram-automate.vercel.app/

live link

https://workflowautomation.netlify.app/

Prosp ( Cold outreach model)

https://prosp.ai/

Graphflow

https://graphflow-amber.vercel.app

Features

• Made from JSON
• Elkjs
• Added Algorithm
• Implement Elkjs-tree
• Reactflow v-11
• MUI
• Routing
• Conditional Routing

Last one

https://voiceflow-two.vercel.app/

Last one

Dynamic Handles