Skip to content

This task entails creating a chatbot flow builder in React using React Flow, with text nodes, a nodes panel, edges, handles, a settings panel, and a save button. It must handle errors for multiple nodes with empty target handles.

Notifications You must be signed in to change notification settings

raobaba/BiteSpeed-FrontEnd-Task

Repository files navigation

Certainly! Below is an example README.md file written in Markdown for your project:

# Chatbot Flow Builder

## Overview
This project is a simple chatbot flow builder implemented in React, utilizing the React Flow library. It allows users to create chatbot flows by connecting text nodes together. The builder supports various features including a nodes panel, edges, handles, a settings panel, and a save button.

## Features
1. **Text Node**: Allows users to add text messages to the flow.
2. **Nodes Panel**: Displays available node types for adding to the flow. Easily extensible for future node types.
3. **Edge**: Connects nodes together to define the flow.
4. **Source Handle**: Origin of a connecting edge.
5. **Target Handle**: Destination of a connecting edge. Supports multiple connections.
6. **Settings Panel**: Replaces the nodes panel when a node is selected, enabling users to edit text content.
7. **Save Button**: Saves the flow. Displays an error if multiple nodes have empty target handles.

## Installation
1. Clone the repository:

git clone

2. Navigate to the project directory:

cd chatbot-flow-builder

3. Install dependencies:

npm install


## Usage
1. Start the development server:

npm start

2. Open your browser and go to `http://localhost:5173` to access the chatbot flow builder.
3. Drag and drop text nodes from the nodes panel onto the canvas.
4. Connect nodes together by dragging from the source handle to the target handle.
5. Edit node text by selecting a node and using the settings panel.
6. Save the flow using the save button.

## Contributing
Contributions are welcome! Please see the [contributing guidelines](CONTRIBUTING.md) for more details.

## License
This project is licensed under the [MIT License](LICENSE).

Screenshots

Screenshot (154) Screenshot (155)

Feel free to adjust the content according to your project's specifics and requirements!

About

This task entails creating a chatbot flow builder in React using React Flow, with text nodes, a nodes panel, edges, handles, a settings panel, and a save button. It must handle errors for multiple nodes with empty target handles.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published