IBM Developer

Tutorial

Implementing a feedback mechanism in your chatbot applications

Use watsonx Assistant to integrate thumbs-up and thumbs-down feedback mechanism in your chatbot applications

By Jatindra Suthar, Nidhi Jain, Amit Khandelwal

On this page

IBM's watsonx Assistant is a state-of-the-art conversational AI platform that allows users to build generative AI assistants, providing seamless self-service experiences across multiple devices and channels. With a user-friendly interface, pre-built templates, and out-of-the-box AI models, Watsonx Assistant simplifies the process of creating conversational interfaces that understand natural language and provide accurate, contextual answers.

When building conversational AI systems, it is crucial to evaluate the accuracy and relevance of the chatbot's responses. A feedback mechanism becomes essential in this process, enabling users to provide instant feedback. Developers can analyze this feedback, identify areas for improvement, and fine-tune the chatbot's performance. In this tutorial, we will guide you through implementing a simple yet effective feedback mechanism using thumbs-up and thumbs-down buttons, which can be easily integrated into your own chatbot applications, including those built with Watsonx Assistant.

alt

Prerequisites

  • watsonx Assistant Instance
    • If you do not already have an existing Watsonx Assistant instance, you can create one via the web client by following this guide.
  • Basic CSS HTML knowledge
  • Knowledge of watsonx Assistant methods and events

Steps

To implement the thumbs-up and thumbs-down functionality, we will leverage the custom methods and events exposed by Watsonx Assistant. You can find the documentation on watsonx Assistant configuration, events and methods for integration into your web application.

Creating a Feedback Action

Create an action named Feedback Handler, which will handle the thumbs-up and thumbs-down functionality. Having a dedicated action allows us to reuse it as a sub-action wherever user feedback is needed.

Next, add a step to the newly created action. Since we require a custom UI/UX with thumbs-up and thumbs-down icons, create a response with a custom payload. In the Assistant says section, switch to the JSON editor by clicking on the code icon, and insert the following code. Be sure to select End the Action to stop the flow.

{
  "generic": [
    {
      "user_defined": {
        "user_defined_type": "end_feedback"
      },
      "response_type": "user_defined"
    }
  ]
}

JSON Editor

In the snippet above, we have defined a custom response by using "response_type": "user_defined". This allows us to render the thumbs-up/down interface on the front-end when the userDefinedResponse event is triggered.

Calling Feedback handler action as a subaction

Assuming you’ve already created an action where the assistant replies to the user, and you want to display thumbs-up/down feedback right after the response:

  1. Open the desired action and select the step after which you want to gather user feedback.
  2. Under And then, choose Go to a subaction and select the Feedback Handler action we created earlier.

alt

At this point, we have set up the feedback actions, but they won't appear in the chatbot yet because we haven’t rendered the user_defined response on the front-end.

Web app integration

To embed Watsonx Assistant into your web app, obtain the embeddable code and add it to your HTML/JS file. If you're unsure how to embed it, refer to these instructions.

For an optimal user experience, you’ll also need to include some additional CSS and images. Create a styles.css file and link it to your main HTML file. Then, copy the following styles and paste them into your styles.css file.

#WACContainer.WACContainer .reactions {
    margin-top: 5px;
}

#WACContainer.WACContainer .reaction {
    font-size: 20px;
    margin-right: 5px;
    cursor: pointer;
  }

#WACContainer.WACContainer .disable-reaction {
  pointer-events: none;
}

#WACContainer.WACContainer .img-reaction {
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: cover;
  }

#WACContainer.WACContainer .img-reaction-up {
  background-image: url('thumbs-up.svg');
}

#WACContainer.WACContainer .img-reaction-up:hover, #WACContainer.WACContainer .img-reaction-up-active {
  background-image: url('thumbs-up--filled.svg');
}

#WACContainer.WACContainer .img-reaction-down {
  background-image: url('thumbs-down.svg');
}

#WACContainer.WACContainer .img-reaction-down:hover, #WACContainer.WACContainer .img-reaction-down-active {
  background-image: url('thumbs-down--filled.svg');
}

You will also need SVG or PNG files for the thumbs-up and thumbs-down icons. In this example, we’ve used SVG files, which are referenced in the CSS script. You can find these files in the source code, or download them from the Carbon Design System.

To listen for the user_defined response event, you need to add an event listener in the Watsonx Assistant's embeddable script. Copy the following code and place it above the await instance.render() line.

window.WebChatInstance = instance;
instance.on({
    type: 'customResponse',
    handler: customResponseHandler
});

window.WebChatInstance = instance; This will register the assistant instance in a variable named WebChatInstance within the browser's window object. You can use this variable later to call the assistant’s methods programmatically.

The customResponse event is the one we're interested in. It will trigger the customResponseHandler function whenever a user_defined response is received by the assistant.

Next, let's create a customResponseHandler function and add logic to render the thumbs-up and thumbs-down icons in the assistant. Copy the code snippet below and add it to your JavaScript file.

function customResponseHandler(event, instance) {
    let elementToUpdate = event.data.element;

    if (event.data.message.user_defined && event.data.message.user_defined.user_defined_type === 'end_feedback') {

        disableReactions();

        let feebackDiv = '<div class="message received">' +
            '<div class="message-content"></div>' +
            '<div class="reactions">' +
            '<span onClick="submitReaction(this, \'img-reaction-up-active\', \'thumbs-up-clicked\')" class="reaction">' +
            '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="img-reaction img-reaction-up"/>' +
            '</span>' +
            '<span onClick="submitReaction(this, \'img-reaction-down-active\',\'thumbs-down-clicked\')" class="reaction">' +
            '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="img-reaction img-reaction-down"/></span>';

        feebackDiv = feebackDiv + '</div></div>';
        elementToUpdate.innerHTML = feebackDiv;
        isResponseRegenerated = false;
    }
}

The function above calls the disableReactions() method, which is responsible for disabling the thumbs-up and thumbs-down reactions when a new message arrives or the user has submitted feedback.

It also invokes the submitReaction method, which is used to silently send the user's feedback to the assistant. This method utilizes the window.WebChatInstance variable (registered in the previous step) and calls the send method to transmit the feedback to the assistant without displaying it to the user.

Copy and add the following code to disable reactions and send the message.

// function to disable reactions
function disableReactions() {
    let reactionsElements = document.getElementsByClassName('reaction');
    for (let elem of reactionsElements) {
        elem.classList.add('disable-reaction');
    }
}

// function to send submit feedback and send message to assistant
function submitReaction(event, clazzName, text) {
    event.querySelector('.img-reaction').classList.add(clazzName);
    disableReactions();
    sendToAssistant(true, text);
}

function sendToAssistant(isSilent, text) {
    let sendOptions = {
        silent: isSilent
    }
    const sendObject = {
        input: {
            message_type: 'text',
            text: text
        }
    };
    window.WebChatInstance.send(sendObject, sendOptions);
}

We are now ready to run the web app. Ask a question that triggers the action where you’ve integrated the user feedback steps. After running the web application, you should see the thumbs-up and thumbs-down icons as shown below.

alt

You may notice that when you click thumbs-up or thumbs-down, the assistant responds with "I'm afraid I don't understand. Please rephrase your question." This occurs because the assistant is unable to interpret the user’s feedback input.

To resolve this, go to your assistant instance and open the Feedback Handler action. Recall the submitReaction method where we send feedback values like thumbs-up-clicked and thumbs-down-clicked to the assistant. You can add a condition in the first step of the Feedback Handler action to handle these inputs and stop the action flow.

Add a new step and make it the first step, with the condition shown in the screenshot below, and stop the flow. Also, include example phrases for this action.

alt

Example phrases for the action:

alt

Now, re-run the app, and it should work as expected.

Summary

This tutorial showed you some of the features of watsonx Assistant's web methods and events. You learned how to use these events and methods and render the custom response in watsonx Assistant.