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.
- 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.
- Node Sidebar: Contains the list of nodes that can be added to the flow.
- Node Properties Sidebar: Contains the properties of the selected node.
- 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.
- React
- React Flow
- Zustand
- TypeScript
- UnoCss
Want to collaboration for your project?
let me know then your project mind: : with pro-features and custom logic
contact me through email to see
https://check-automate.vercel.app/ --(PAID)
Updated Design with
https://auto-layout-workflow.vercel.app/
https://app.squarebear.com.au/
features:
- Editable
- updateable
- searchable
- clickable
- resist manual connect
- Edge type changing -Single color
- Multi-color
- Deletable
- Dagre layouting
- centering node
- selected node
https://workflowautomation.netlify.app/
https://graphflow-amber.vercel.app
- Made from JSON
- Elkjs
- Added Algorithm
- Implement Elkjs-tree
- Reactflow v-11
- MUI
- Routing
- Conditional Routing
https://voiceflow-two.vercel.app/
