Disable Chat Text box field for list entities - Latest

With regards to this Disable Chat Text box field for list entities. There is an update in configuring the request as per the customer’s question.

Description: To disable the chat text box field in the bot builder when the list of entities is displayed while talking to the bot.

Please follow the updated steps below.

STEP 1 - Defining the appropriate function and class to disable chat input box:

  • Once you configure the webSDK to your bot.

  • Open the chatWindow.js file available in the following folder structure.
    SDKApp >> sdk >> UI >> chatWindow.js

  • In the chatWindow.js file, we will need to define a function that will disable the chat input box.

  • We have named the function as “disableChat” and defined with the following snippet after the HTML code. Please refer the below screenshot to understand placement of the function:
    function disableChat(disable){
    if(disable){ $(’.chatInputBox’).addClass(‘disable’); $(’.chatInputBox’).blur(); } else{ $(’.chatInputBox’).removeClass(‘disable’); } };

If you observe in the above snippet, we have used the “disable” class name as value to addClass method.
Now, we need to define the class: disable in the chatWindow.css.

  • Open SDKApp >> sdk >> UI >> chatWindow.css

  • Add the following class in the CSS file:

.kore-chat-window .kore-chat-footer .chatInputBox.disable{
pointer-events : none !important;
opacity : 0.7;

STEP 2- Calling the disableChat function as per our condition:

  • Our condition is that the chat input box should be disabled when the bot message is a template asking for input.
  • Under the bot.on(“message”, function (message) function, add the following “if” statement that will check if the bot message is of template type and then calls the disableChat function.

if(tempData.message[0].component && tempData.message[0].component.type == “template”){

  • Now, execute the SDK.
  • You should be able to observe that the input box is disabled when the bot prompts with a template.