Adding a Chatbot to the SAP Community Code Challenge

[Dan_Wroblewski]

OK, I admit it. I can't get enough of puzzles and contests.

And since I had been studying SAP Conversational AI chatbots for a while, and I was preparing a blog post about the chatbot's client-side APIs, I thought I would add a chatbot to the code challenge project. Specifically, a chatbot that let the user give their community ID and that would update the SAPUI5 app with the user's avatar.

More info on the latest SAP Community Code Challenge and the related discussion group.

(I had already implemented this as a simple button on the toolbar, but I wanted to do it as a chatbot. The chatbot is pretty simple, but could easily be expanded to provide help on the app like an FAQ bot, or perform other editor tasks.)

 

What was created

Previously, for the challenge, I created some buttons within the Image Editor control:

• Language Picker: I translated the i18n strings to French and Hebrew, and implemented a language picker to change the language, including the Fiori frame and including RTL for Hebrew.


• Toolbar Spacing: Used SAPUI5 classes to better space out toolbar.


• Save As: Fixed bug that checks if there is a picture loaded and displays message if not.

All of this was mostly to understand SAPUI5 better, but now I wanted to add a chatbot to the app and let the user just type in their community ID and load their current avatar. The chatbot also checks if the community ID is valid.

 

What was learned

The chatbot is quite simple, but what I learned are the following:

• How to build a SAP Conversational AI chatbot that can understand when the user is entering their community ID


• How to add that chatbot to a SAPUI5 app


• How to capture chatbot events (specifically the sending of message) on the client


• How to call SAPUI5 methods from the Web Client Bridge API methods


• How to check if a community ID is valid


• How to get the avatar for a community member


• How to dynamically set the Image Editor control (with the community avatar)

Other things I learned:

• How to create a link to a particular post in the new Groups in the SAP Community.


• How to add JavaScript code via the sap.ui.define method

 

How it was coded

The following describes the major parts I added to the app.

Add chatbot to view

At first I added the chatbot to the index.html file, but this added the chatbot to the Fiori wrapper, and I wanted the chatbot only when the view loaded.

So in the controller for the view, I added the following methods:

onAfterRendering: function () {

    // Set up chatbot

    this.renderCAIChatBot()

    window.sapcai.webclientBridge.imageeditor = this.getView().byId("image")

},



renderCAIChatBot: function () {

    var s = document.createElement("script");

    s.setAttribute("src", "https://cdn.cai.tools.sap/webclient/bootstrap.js");

    s.setAttribute("id", "cai-webclient-custom");

    s.setAttribute("data-expander-preferences","<from chatbot script>");

    s.setAttribute("data-channel-id","<from chatbot script>");

    s.setAttribute("data-token","<from chatbot script>");

    s.setAttribute("data-expander-type","CAI");

    document.body.appendChild(s);

},

In the onAfterRendering method, I added the chatbot script.

I also stored a reference to the Image Editor in the window.sapcai.webclientBridge object, since I did not know how to make reference from the window object to specific views of the SAPUI5 app. I'd be happy to learn how best to do this.

Add message event handler

If chatbot recognized a community ID and sent a message with the ID, I want to listen for this and update the UI.

In the sap.ui.define method, I added a JavaScript file with the callback function (the file was in the controller folder).

sap.ui.define([

        "profilePic/controller/BaseController",

        "./webclient"

    ],

    function (BaseController, webclient) {



...

The Web Client Bridge callback is called whenever a message is added to the chat, either from the user or the chatbot.

const webclientBridge = {

  onMessage: (payload) => {

    payload.messages.forEach(element => {

      if (element.participant.isBot && element.attachment.content.text.startsWith("SENDING AVATAR")) {

        profile = element.attachment.content.text.substring(19)

    	window.sapcai.webclientBridge.imageeditor.setSrc("https://avatars.services.sap.com/images/" + profile + ".png")

      }

    })

  }

}

The callback checks if the chatbot is the one sending a message, and if the message starts with "SENDING AVATAR". If both are true, the community ID is retrieved and the corresponding avatar is loaded.

---

The full code is in this pull request. The chatbot project is at https://cai.tools.sap/thecodester/codechallenge.