Fork from React ChatBotify

Table of Contents

• Introduction
• Features
• Technologies
• Quickstart
• Documentation
• Team
• Contributing
• Support
• Attributions

Introduction

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 Attributes: Create interactive conversations by dynamically generating messages and defining multiple conversation paths based on user inputs.
• Custom Rendering of 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.
• Mobile-Friendly Interface: Provide smooth user experience across various devices with our mobile-friendly chatbot interface.

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:

ReactJS

Typescript

Project Repository

• https://github.com/tjtanjin/react-chatbotify

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:

• https://react-chatbotify.tjtanjin.com/

Examples on the website are also run on a live editor so feel free to explore to your heart's content!

Team

• Tan Jin

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:

• Logo
• Bot Avatar

Sound

Credits are to be given for the notification sound:

• 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:

• Tidio
• React Simple Chatbot

Note: All other media content are hand-drawn unless otherwise stated, feel free to use them!

CHANGELOG.md

v1.6.0 (11-05-2024)

Added:

• Added a new sensitiveInput configuration section to cater for sensitive information (refer to API documentation)
• Added a new autoLoad property to the chatHistory section which allows chat history messages to be automatically loaded on start
• Added a new dangerouslySetInnerHtml property to both userBubble and botBubble which allows setting of raw HTML content (use with caution)

Fixed:

• Fixed several type definitions within the library itself
• Fixed an issue where the load chat history button can appear distorted if given a long text string
• Fixed an issue where some chat history messages may not be saved when using real-time stream
• Fixed an issue where chat input textarea may resize when focused on some occasions
• Fixed selection of emoji causing textarea to lose focus
• Improved performance for saving chat history
• Further reduced assets file size

Note:

This update contains significant additions but they have been documented on the API documentation and you will also find new live examples for Sensitive Input and Markup Message. This will be one of the last few (if not the last) release before v2.0.0 arrives. Feel free to join discord to stay up to date!

v1.5.2 (08-04-2024)

Added:

• Added 2 new style props for chatInputAreaFocusedStyle and chatInputAreaDisabledStyle

Fixed:

• Fixed a few instances where chat history options/checkboxes are not rendered correctly
• Reduced notification sound file size

v1.5.1 (30-03-2024)

Fixed:

• Fixed an issue where library css file is not injected for commonjs users
• Fixed an issue where tooltip mode may not be respected
• Fixed an issue where option boxes do not stretch on much larger chatbot window width
• Fixed an issue where overflowing text are not hidden for checkboxes/option boxes
• Fixed an issue where if header section is used, then showAvatar is a required property
• Fixed usage of oversized images (improves default chatbot load time!)

v1.5.0 (29-03-2024)

Added:

• Added a new animate option to both userBubble and botBubble to easily toggle animations on and off for them

Fixed:

• Fixed an issue where empty chat bubbles from stream messages are being saved to chat history

Miscellaneous:

• As of this version (1.5.0), it is no longer necessary to import react-chatbotify.css file in your projects (injected implicitly). Keeping the import statement will not cause any issues currently but this will be a breaking change in version 2.0.0. It is recommended to remove the import statement as soon as possible and the documentation website has also been updated to reflect this change.

v1.4.0 (22-03-2024)

Added:

• A new chatWindow section has been added into the Configurations category with the following default values:

  chatWindow: {
    showScrollbar: false,
    autoJumpToBottom: false,
    showMessagePrompt: true,
    messagePromptText: "New Messages ↓",
    messagePromptOffset: 30,
  }

  Explanations for what each property does can be found on the documentation website.

Fixed:

• Fixed an occasional issue where stream messages do not autoscroll when user is at the bottom of the chat
• Fixed an issue where users can interrupt the start block if it is streaming
• Fixed a bug where users can pinch-zoom the chat window on mobile devices to cause it to be distorted
• Fixed a rare bug where the chat window could be scrolled out of view
• Fixed a longstanding issue where playing notification sounds on mobile devices causes media controls to appear in notifications tray

Note:

Initially planned for only bug fixes, I eventually added a whole new chatWindow section simply because I felt there were many small areas that could use enhancements (hiding the scrollbar, showing new message prompts instead of forcing users to the bottom etc). This led to version 1.4.0 which was entirely focused on cleaning up the imperfections from the several changes that have been made in the last few releases.

v1.3.2 (16-03-2024)

Fixed:

• Fixed an issue where chat window auto-scrolling does not work for streamed messages
• Fixed an issue where loading chat history caused current scroll position to shift
• Fixed an issue where extremely long words get abruptly cut-off at the tail end of the message bubble

v1.3.1 (13-03-2024)

Added:

• Added simStream and streamSpeed options for userBubble to be consistent with botBubble

Fixed:

• Fixed an issue where users can quickly click on options or checkboxes in rapid succession resulting in multiple inputs
• Fixed an issue where simulating stream messages would ignore the blockSpam option

v1.3.0 (12-03-2024)

Added:

• Added simStream and streamSpeed options within botBubble to simulate streaming of messages
• Added params.streamMessage parameter that allows real-time streaming of messages (great for integration with LLMs)

Modified:

• The isUser field within Message component has been replaced with sender.
• Both params.injectMessage and newly added params.streamMessage are now async functions (previously, params.injectMessage was non-async)

Miscellaneous:

• Internally, logic for chat history, notifications and a few other minor areas have been updated to support stream messages

Note:

The documentation website has been updated to reflect all the latest information. A possible "breaking" change would be params.injectMessage which is now async. Depending on your existing usage, there might not be a need to make any changes. However, if you are using multiple params.injectMessage in quick succession, this could mean multiple messages are being sent at once without the use of await.

v1.2.0 (12-02-2024)

Fixed:

• Fixed chatbot window resizing on mobile devices (previously window is out of view on some devices/browsers)
• Fixed chatbot window orientation (previously chatbot would not re-orientate on phone rotation)

Note:

The above fixes are important for users who wish to properly support the chatbot on mobile devices. While there has been significantly more mobile view tests done for these fixes, it is near-impossible to exhaustively run through all devices/browsers. Should anyone still encounter issues with mobile view, please do not hesitate to reach out.

v1.1.0 (28-01-2024)

Added:

• Added support for enforcing & showing character count/limit via the following options:
  • chatInput.showCharacterCount: false
  • chatInput.characterLimit: -1
• Added support for styling the above character limit display via the following styles:
  • characterLimitStyle
  • characterLimitReachedStyle

Note:

The above additions have been updated on the documentation website for reference.

v1.0.6 (10-09-2023)

Fixed:

• Fixed async file uploads

Miscellaneous:

• Disabled speech recognition on unsupported browsers (e.g. Opera)

v1.0.5 (31-08-2023)

Fixed:

• Fixed missing support for user defined async functions (important fix if you wish to make use of API calls and wait for completion)

v1.0.4 (13-08-2023)

Fixed:

• Fixed module export (imports by consumers should work properly for both cjs and mjs)

v1.0.3 (05-08-2023)

Added:

• Added desktopEnabled and mobileEnabled options under the theme section to allow developers to control chatbot visibility based on platform

Fixed:

• Fixed a bug with distorted layout for embedded chat windows on mobile

v1.0.2 (03-08-2023)

Fixed:

• Fixed missing export in package.json

v1.0.1 (03-08-2023)

Miscellaneous:

• Cleanup dist folder (halved the build size)
• Cleanup unused exports
• Cleanup documentation and configurations

v1.0.0 (02-08-2023)

Added:

• Initial Release