Awesome
<p align="center"> <img width="200px" src="https://raw.githubusercontent.com/tjtanjin/react-chatbotify/main/assets/logo.png" /> <h1 align="center">React ChatBotify</h1> </p> <p align="center"> <a href="https://github.com/tjtanjin/react-chatbotify/actions/workflows/lint.yml"> <img src="https://github.com/tjtanjin/react-chatbotify/actions/workflows/lint.yml/badge.svg" /> </a> <a href="https://github.com/tjtanjin/react-chatbotify/actions/workflows/build.yml"> <img src="https://github.com/tjtanjin/react-chatbotify/actions/workflows/build.yml/badge.svg" /> </a> <a href="https://github.com/tjtanjin/react-chatbotify/actions/workflows/test.yml"> <img src="https://github.com/tjtanjin/react-chatbotify/actions/workflows/test.yml/badge.svg" /> </a> <a href="https://www.npmjs.com/package/react-chatbotify"> <img src="https://img.shields.io/npm/v/react-chatbotify?logo=semver&label=version&color=%2331c854" /> </a> <a href="https://www.npmjs.com/package/react-chatbotify"> <img src="https://img.shields.io/npm/d18m/react-chatbotify?logo=npm&label=npm%20downloads&color=%232281c2" /> </a> <a href="https://discord.gg/6R4DK4G5Zh"> <img src="https://img.shields.io/endpoint?url=https://my-api.tjtanjin.com/aggregator/api/v1/get/rcb_discord_member_count&logo=discord&logoColor=ffffff" /> </a> </p>Table of Contents
Introduction
<p align="center"> <img height="400px" src="https://github.com/user-attachments/assets/dd957c4b-0ff4-42e9-8097-4efb7c98055a" /> </p>React ChatBotify is an intuitive and versatile chatbot library tailored to streamline your development process while providing the flexibility to implement advanced features. It is crafted to meet a wide range of requirements, whether you're building a straightforward FAQ chatbot, an intricate conversational interface or even an integration with Large Language Models (LLMs).
React ChatBotify aims to simplify the creation of chatbots by offering a user-friendly experience while accommodating the diverse needs of developers. With its extensive capabilities, you can easily customize and expand your chatbot's functionalities. From basic interactions to sophisticated conversational flows, React ChatBotify empowers you to build chatbots that meet your specific project goals. Head over to our community showcases and get inspired to start your own today!
npm install react-chatbotify --save
Note that this repository contains the code for the library. If you're looking for the repository for the React ChatBotify user guide, you may look here.
Features
React ChatBotify offers a wide array of features designed to enhance your chatbot experience. Here are just a few of the key features:
- Dynamic Outputs: Create interactive conversations by dynamically generating messages and defining multiple conversation paths based on user inputs.
- Custom Components: Seamlessly integrate your own custom components into the chatbot interface to boast your application's unique design and functionality.
- Stream Responses: Integrate with LLM models and custom endpoints to stream (or even simulate) your bot responses for an elevated user experience.
- Timeouts and Auto-Transitions: Set timeouts and automate transitions between chatbot paths, providing users with a guided flow and journey.
- Voice Input & Audio Output: Enable voice input for users to interact with the chatbot through speech, and leverage audio output capabilities to provide spoken responses or prompts.
- Chat Notifications: Keep users informed with real-time chat notifications, ensuring they never miss important updates or new messages.
- Checkbox & Options Support: Utilize checkboxes and options within the chatbot interface, allowing users to select from a list of choices and easily make selections.
- Emoji Picker: Enhance the chatbot's expression and engagement with users by incorporating emojis into messages, adding a touch of personality and emotion.
- File Attachments: Seamlessly handle file attachments within the chatbot, enabling users to share and receive documents, images, or other relevant files during conversations.
- Sensitive Input: Handle sensitive information from your users by masking them, maintaining user confidentiality.
- Mobile-Friendly Interface: Provide smooth user experience across various devices with our mobile-friendly chatbot interface.
- Themes: Choose from a wide variety of community themes, stack multiple themes together, and explore endless possibilities to customize the appearance of your chatbot!
These features, along with many others, empower developers to create highly interactive and personalized chatbot experiences tailored to their specific application requirements.
Technologies
Technologies used by React ChatBotify are as below:
Done with:
<p align="center"> <img height="150" width="150" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" /> </p> <p align="center"> ReactJS </p> <p align="center"> <img height="150" width="150" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/2048px-Typescript_logo_2020.svg.png" /> </p> <p align="center"> Typescript </p>Project Repository
Quickstart
For a thorough walkthrough on getting started, you may refer to the Quickstart Guide on the Documentation Website.
Documentation
A full documentation (along with a live playground) for the library can be found at the following link:
Examples on the website are also run on a live editor so feel free to explore to your heart's content!
Team
Contributing
If you are looking to contribute to the project, you may find the Developer Guide useful.
In general, the forking workflow is encouraged and you may open a pull request with clear descriptions on the changes and what they are intended to do (enhancement, bug fixes etc). Alternatively, you may simply raise bugs or suggestions by opening an issue or raising it up on discord.
Note: Templates have been created for pull requests and issues to guide you in the process.
Support
If there are any questions pertaining to the application itself (usage or implementation wise), you may create an issue, raise it up on discord, or drop me an email at: cjtanjin@gmail.com.
Attributions
Images
Credits are to be given for the following images:
Sound
Credits are to be given for the notification sound:
Inspirations
As I have used similar alternatives at some point in my developer journey, some inspirations have been taken from them and they ought to be credited here:
Note: All other media content are hand-drawn unless otherwise stated, feel free to use them!