Introduction
The humble journey of React ChatBotify began in late July of last year. However, it wasn’t until recent months that it saw a steady increase in adoptions alongside a series of updates. With the release of v2 beta, it’s a great opportunity to look at what’s changed, what’s new, as well as what’s next in future plans down the road.
This article serves to cover the major changes and the thought processes that goes behind them. It’s not a migration guide, so if you’re looking for detailed steps to upgrade from v1 to v2, refer to the migration guide here.
What’s Changed?
In v1, a lot of effort went into making things work. Early adopters might recall issues with the chatbot on mobile devices, such as improper display on certain browsers or operating systems, or notifications causing media controls to appear. The chatbot’s come a long way since then and has gotten a lot more stable, thanks to the community of bug reporters who surfaced these issues to be addressed.
In v2, priority shifted to making things right. Admittedly, some early design decisions were not optimal, and a v2 upgrade was timely for rectifying those mistakes. Below, we will look at 3 significant changes from this update.
Reorganization of Options into Settings & Styles
One of the most significant breaking changes in v2 is the reorganization of the options prop (also referred to as BotOptions) into settings and styles. Previously in v1, all configurations for the chatbot were centrally managed within the options prop. This included both configurations for determining the functionalities of the chatbot, as well as styling for the appearance of the chatbot.
However, as the library expanded its capabilities, the options prop grew significantly larger and it became apparent that mixing both functionalities and styles into a single prop was not a great idea. For better clarity and to make configurations more manageable, it was necessary to separate styling from functionalities.
Hence in v2, the settings prop was introduced to manage the functional configurations, such as notification and audio, while the styles prop handles the visual aspects such as headerStyle and botBubbleStyle. This separation not only clarifies the API, it also facilitates future expansions and maintenance.
Dropping of Dynamic Attributes Concept
In v1, dynamic attributes was introduced to refer to a specific set of attributes that allowed you to use params. On hindsight, the concept of dynamic attributes was restrictive, allowing only specific attributes to use params. In fact, removing it would simplify the mental model for developers.
And that’s what was done! In v2, all attributes can now access params and users no longer need to make any distinction between them. This change improves consistency across the API and reduces the need for special handling or conditional checks when working with various attributes.
Updates to Internal Message Component
This change is subtle, but for users who were using their own custom components with the chatbot, it is a potential breaking change as the message container itself was updated.
In v1, there was a specific logic written to control the showing of avatars alongside bot or user messages. Internally, default chat messages from both the user and the bot were considered to be chat bubbles and showAvatar was written to specifically only apply to them. Thus, options and checkboxes (which are not chat bubbles) would be specifically filtered out to avoid sending any avatars at all.
This was never an issue, until the need to support media display arose as part of the new showMediaDisplay enhancement for file attachments. With this new feature, there was a need to support sending of avatars for non-chat bubble messages as well because if a user was sending an attachment, it would be weird to not show the avatar if it was enabled. This meant the current design would not work, and prompted a re-look at the need for such special handling in the first place.
To address this and avoid similar issues in future, the decision was made to standardise how avatars will be shown. In short, if enabled, an avatar appears at the beginning of a message group from the same sender, similar to conventional messaging apps (I know, why even do something different in the first place? 😔).
With this change, all message components now adopt a standardised style, which required changes to how messages were displayed. Thus, custom components may experience breaking changes where minor styling updates need to be applied. This was a genuine oversight but it’s a necessary update to avoid further issues down the road.
What’s New?
Beyond the above changes, v2 itself also brings several exciting new features. A bulk of the new features in v2 stem from user requirements, which often present themselves in the form of feature requests or clarifications for use cases. Below, we’ll look at a handful of new features that you might find useful!
Greater Customisation of Header, Chat Input & Footer Buttons
A question that has popped up numerous times - Is it possible to add my own buttons in the header?
In v1, the chatbot came with a set of buttons available in the header, chatInput and footer which could be enabled or disabled. However, re-ordering them was not possible, much less adding custom buttons.
This has changed in v2, with a new buttons prop added to the header, chatInput and footer sections. The buttons prop is essentially an array of buttons, which allows not only custom buttons to be added but also the ability to re-order them however you wish!
Media Displays In Messages
While it was possible to send file attachments in v1, it was not possible to display their content even if they were media files. This meant that viewing images and playing videos or audio in the chatbot was not possible.
Furthermore, without support for media display, it also meant that it’s not possible to send voice messages as a playable audio. With v2, support has been added for media display in messages which enables the following features:
- Display image, video or audio in file attachments
- Send voice messages as an audio file to be played
These are disabled by default but for those who are actively using the file attachment features or would like to send voice messages in the form of audio, enabling them could enhance the overall experience that your chatbot provides for your users!
New Themes Prop
In v1, customising the chatbot appearance could involve heavy styling work, especially if you were looking for a design that was drastically different from the base template.
To improve the customisation experience, a new themes prop was added in v2 which allows users to specify a theme (or list of themes) to apply pre-configured settings and styles quickly. This meant that it is now possible to browse for themes, pick out a design that you like, apply it to your chatbot, then add further refinements on top of it. It helps to think of themes as a set-meal containing settings and styles that save you the work of having to do all the customisations from scratch.
On a small note, implementing the themes feature was an interesting experience itself and I’ll be writing a separate short article to share about my experience working on it. If you’re keen, look out for the next article!
What’s Next?
So far, we’ve explored features that are presently improved or available. Looking ahead, there are a plethora of exciting still in the works. Below, we visit a few ideas that hold great potential.
To manage expectations, it is important to note that while these features hold great potential, they are all still being explored or worked on. The result might be different or the approach may change along the way while grappling with challenges and navigating new ideas. Keep an open mind!
Theme Builder
If you’ve checked out the React ChatBotify Gallery website mentioned earlier, you might have noticed a few other pages apart from themes. If you’ve also tried logging on, you’ll notice that GitHub OAuth integration has been added. These are all leading towards an eventual plan to have a theme builder on the website, allowing users to craft custom themes directly before optionally uploading them to share with others.
If you’re wondering about the GitHub integration, it is an implementation detail of themes, which will be covered in a separate article that will discuss about this more in depth.
Plugins
Plugins arose as an idea from several requests for live chat support. While exploring how best to support this feature, the appeal of a plugin stood out. This is because there simply isn’t a clean way to provide in-built live chat support without restricting the kind of backend setup that could be supported. On the contrary, enabling third-party plugin integrations presents a much more adaptable solution, opening the doors for more possibilities.
With that in mind, the live chat feature evolved into something even more ambitious - rewriting parts of the library to support third-party plugin integrations. More than just live chats, we’re looking at the possibility of features such as chatbot analytics, how cool is that!
Emitting ChatBot Events
Last but not least and as an extension to complement the plugin feature, exploratory work is being done for emitting chatbot events. The intention is to allow users to listen for these chatbot events and trigger custom logic based on them.
If you’ve ever thought about performing certain actions when a message is sent, when a chatbot is opened, or when certain features are enabled, this would be a feature to look forward to!
Conclusion
The newly released v2 beta of React ChatBotify marks the beginning of many more exciting updates. There are various interesting pieces of ongoing work, several of which are gearing us towards enabling and fostering a much more collaborative community.
While I’d like to think that the library is already very feature-rich with a great degree of flexibility for customisation, the truth is there’s always room for improvements if you look hard enough and definitely much more that can be achieved.
I hope that this sharing has been interesting, and if you happen to be looking to contribute to open source projects, then do consider picking up some of the good-first-issues! It’s always great to have people come together to build something cool! Finally and as usual, feel free to reach out and connect on discord or share your thoughts, suggestions and feedback in the comments. Hope to catch you in the next article!😊