Webchat Component for Rasa Stack

Published in

WEBKNOSSOS

3 min readApr 6, 2018

— This project is no longer maintained. Feel free to fork it on GitHub and host it yourself. —

Our recent chatbot projects are built around the great open-source Rasa Stack framework. Besides the strong machine learning foundation for natural language understanding (NLU) and dialogue handling, it comes with support for many popular channels out of the box: Facebook Messenger, Slack, and Telegram.

Most of our clients, however, prefer to embed a chat interface directly into their website. In this blog post we introduce our custom, open-source, react-based chat UI that allows for an easy connection between a website and Rasa Core. Our solution consists of two components: 1) a web-based chat UI and 2) a custom connector for the Rasa Stack.

A React-based Chat UI for the Web

For the web-based UI, we chose to implement a simple chat with React and modern Javascript. The chat interface supports images, buttons for quick replies, and understands markdown for text formatting.

After submitting a message the chat displays a waiting indicator while waiting for the bot’s reply. In cases where the bot responds with multiple individual messages, they are revealed one after another with a slight delay to aid readability and give the bot a more life-like feeling.

You can specify a welcome message that will greet your customers when they first open the UI. We found that test users usually felt instantly familiar with the interface when the bot took the first steps and introduced itself.

The module can be easily integrated into existing websites without much effort. We provide a hosted version of the script on Amazon AWS S3 for simple integration. Alternatively, you can also integrate the component with NPM: @scalableminds/chatroom.

<head>
  <link
    rel="stylesheet"
    href="https://npm-scalableminds.s3.eu-central-1.amazonaws.com/@scalableminds/chatroom@master/dist/Chatroom.css"
  />
</head>
<body>
  <div class="chat-container"></div>
  <script 
    src="https://npm-scalableminds.s3.eu-central-1.amazonaws.com/@scalableminds/chatroom@master/dist/Chatroom.js"
  /></script>
  <script type="text/javascript">
    var chatroom = window.Chatroom({
      host: "https://mike.bots.scm.io",
      title: "Chat with Mike",
      container: document.querySelector(".container"),
      welcomeMessage: "Hi, I am Mike. How may I help you?"
    });
  </script>
</body>

Customizing the chat UI is straightforward for any developer familiar with React and SASS. We made sure to extract all color options into SASS variables for easy theming. If you wish to further extend the chatroom’s functionalities you can dive into the modular React components. We are always happy to accept pull requests for new features.

Demo Mode for Scripted Screencasts

For new project pitches, we like to give customers a preview of the chatbot experience. Usually, the easiest way to visualize a typical chatbot interaction is by recording a short screencast of an example dialogue.

Therefore, we added a “demo mode” to the chat UI. You can specify a message exchange between your bot and a user as a JSON array and replay the conversations as often as you like. Check out our demo.

Custom Rasa Channel

In order to connect your web chat to Rasa Core, you have to implement a custom channel. We created the BotServerInputChannel to complement our web chat. Custom channels require you to implement both a Python class for outgoing and incoming messages. Both can be inherited from Rasa’s default implementations: OutputChannel and InputChannel.

For our connector, we set up a very simple Python REST server with Klein for the incoming messages (inherited from Rasa’s HttpInputComponent). Once the server is started, just point the web chat to its URL on port 5002 and you should be all set.

To register your custom channel with Rasa Core you need to give a new instance of our BotServerInputChannel to a Rasa Core agent. In your project’s main Python file add:

from bot_server_channel import BotServerInputChannel
def main_server():
  agent = Agent.load(...)
  channel = BotServerInputChannel(agent)
  agent.handle_channel(channel)
main_server()

All the code is hosted on Github. If you are interested in building your own chatbot or need support with the Rasa Stack, please get in touch with us.

Webchat Component for Rasa Stack

A React-based Chat UI for the Web

Demo Mode for Scripted Screencasts

Custom Rasa Channel

Written by Tom Herold