{"id":31026905,"url":"https://github.com/sanghanmol/chatbot-flow-builder","last_synced_at":"2026-05-08T09:32:17.085Z","repository":{"id":310889018,"uuid":"1041640512","full_name":"Sanghanmol/Chatbot-Flow-Builder","owner":"Sanghanmol","description":"An interactive chatbot flow builder with a drag-and-drop UI, node connection logic, and a modern panel-based interface. ","archived":false,"fork":false,"pushed_at":"2025-08-20T21:04:15.000Z","size":154,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-13T18:24:50.170Z","etag":null,"topics":["reactflow","reactjs","uuid","vitejs"],"latest_commit_sha":null,"homepage":"https://sanghanmol.github.io/Chatbot-Flow-Builder/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sanghanmol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-20T19:40:42.000Z","updated_at":"2025-08-22T12:38:54.000Z","dependencies_parsed_at":"2025-08-20T21:49:14.240Z","dependency_job_id":null,"html_url":"https://github.com/Sanghanmol/Chatbot-Flow-Builder","commit_stats":null,"previous_names":["sanghanmol/chatbot-flow-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sanghanmol/Chatbot-Flow-Builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanghanmol%2FChatbot-Flow-Builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanghanmol%2FChatbot-Flow-Builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanghanmol%2FChatbot-Flow-Builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanghanmol%2FChatbot-Flow-Builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sanghanmol","download_url":"https://codeload.github.com/Sanghanmol/Chatbot-Flow-Builder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanghanmol%2FChatbot-Flow-Builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32774756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactflow","reactjs","uuid","vitejs"],"created_at":"2025-09-13T18:06:59.168Z","updated_at":"2026-05-08T09:32:17.058Z","avatar_url":"https://github.com/Sanghanmol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🤖 BiteSpeed Chatbot Flow Builder\n\nAn interactive chatbot flow builder with a **drag-and-drop UI**, node connection logic, and a modern panel-based interface.  \nBuilt with **React + React Flow + MUI**.\n\n---\n\n## 📌 Overview\nBiteSpeed Flow Builder allows users to:\n\n✅ Create **Text Nodes** representing messages  \n✅ Drag and drop nodes from the **Nodes Panel**  \n✅ Connect nodes using **edges** to define conversation flow  \n✅ Edit node text via **Settings Panel**  \n✅ Save flows with **validation for incomplete connections**\n\n---\n\n## 🚀 Features\n\n- 📍 **Text Node**  \n  - Represents a chatbot message  \n  - Multiple nodes can exist in a single flow  \n  - Added to canvas via drag-and-drop\n\n- 🖇 **Edges**  \n  - Connect nodes to define flow order  \n  - Source handle: **only one outgoing edge allowed**  \n  - Target handle: **can have multiple incoming edges**\n\n- 🛠 **Settings Panel**  \n  - Appears when a node is selected  \n  - Edit node text dynamically\n\n- 💾 **Save Button**  \n  - Validates flow  \n  - Shows error if multiple nodes have empty target handles  \n  - Logs nodes \u0026 edges to console on successful save\n\n- 🎨 **UI**  \n  - Color-coded nodes \u0026 handles  \n  - Panels for node selection and settings  \n  - Responsive and modern layout\n\n---\n\n## 🖥️ Tech Stack\n\n- ⚛️ React + Vite  \n- 🔗 React Flow  \n- 💾 Local state management (useState, useRef)  \n- 📝 UUID for unique node IDs  \n\n---\n\n## 📸 UI Preview\n\n- **Left panel:** Nodes Panel for dragging new nodes  \n- **Canvas:** Main flow area to place \u0026 connect nodes  \n- **Right panel:** Settings Panel for editing selected node  \n- **Edges:** Connect nodes to define chatbot conversation\n\n---\n\n## 🛠️ Installation \u0026 Run\n\n# Clone the repo\n- git clone https://github.com/Sanghanmol/Chatbot-Flow-Builder.git\n- cd my-app\n  \n# Install dependencies\nnpm install\n\n# Run the app\nnpm run dev\n\n---\n\n## 🚀 Usage\n\n1️⃣ Drag a **Message node** from Nodes Panel to canvas  \n2️⃣ Drag from a node’s **source handle** to another node’s **target handle** to connect them  \n3️⃣ Select a node to edit text via **Settings Panel**  \n4️⃣ Click **Save** → Validates flow and logs nodes \u0026 edges  \n5️⃣ Add multiple nodes and connect freely to build chatbot flow\n\n---\n\n## 🎨 UI Highlights\n\n✅ Drag-and-drop **Nodes Panel**  \n✅ **Color-coded nodes** for easy identification  \n✅ **Edges** clearly show connections  \n✅ Responsive **canvas \u0026 panels**  \n✅ **Settings Panel** for live node editing\n\n---\n\n### 📜 License\n\nMIT License © 2025 - Created with ❤️ by Anmol Sangha\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanghanmol%2Fchatbot-flow-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanghanmol%2Fchatbot-flow-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanghanmol%2Fchatbot-flow-builder/lists"}