CODEWITHSUNDEEP
javascriptbotframework
MaxOvrdrv
MaxOvrdrv

Reputation: 1916

Callback once chat is ready

I am building a ChatBot service using the Microsoft Bot Framework, over Azure as the service, and QnA Maker for the key-value-pairs.

In our implementation, we are having everything completely hosted in the cloud using Azure, and therefore, we do NOT have access to any code-behind for the framework. It is all done in JS via the webpage. No "cards" or special "interfaces" that we can push through from the back-end. As such, I have had to implement a bit of a "hack" in that, I have implemented my own JS functionality, which, when the page loads, sends out a message on behalf of the user in order to trigger a QnA Maker response.

The issue I am having is that even though the DOM may be ready, the ChatBot implementation and back-end service, may not! It may still be in a "connecting..." or loading state and therefore, when my JS tries to send out the message, it simply does not fire, because the button to send the message is disabled until the service is ready. This part is all controlled by the bot framework. Therefore, on some instantiations (usually on the first ones for the day or the first one after a while without it being used), the message "Hi! I have a question..." remains in the "User chat bar" and never fires.

Here is my question: Is there a way for me to have the bot framework perform a Callback once it is ready to receive input? If so, where would I place that callback in the JS implementation? Or alternatively, how could I "wait until the button is enabled" before firing off the send event?

Let me know if this is not clear or if you need more information.

UPDATE

Upon verification, the button is NOT even disabled while the chatbot is connecting to the service, so even that option is not available. A callback seems the only possible way of achieving this?

UPDATE --> SOLUTION! In case anyone is wondering how to do this, here is a working example that shows you exactly how. This was amalgamated from different GitHub instructions pages for the BotFramework, which Steven Kanberg provided in the comments below. Thanks!

//This is how you build your store, and load the web chat... StyleOptions is a constant that is up to you to create.

const token = 'ENTER YOUR SECRET HERE';

const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
     if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
          const event = new Event('webchatreadyactivity');
          event.data = action.payload.activity;
          window.dispatchEvent(event);

          // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
          dispatch({
               type: 'WEB_CHAT/SEND_EVENT',
               payload: {
                    name: 'webchat/join',
                    value: { language: window.navigator.language }
               }
          });
     }
     return next(action);
});

window.WebChat.renderWebChat({
     directLine: window.WebChat.createDirectLine({ token }),
     store,
     styleOptions
}, document.getElementById("ENTER CHAT ELEMENT ID HERE"));

//THEN, simply hook onto the event like this, to send your initial message...
//This event will fire only ONCE, and only once the chat is READY.
window.addEventListener('webchatreadyactivity', ({ data }) => {
//this is yours to build as well...
sendWelcomeMessage(); 
});

Upvotes: 1

Views: 446

Answers (1)

Steven Kanberg
Steven Kanberg

Reputation: 6393

The BotFramework-WebChat repo has a variety of samples showing different functionalities. For instance, this sample shows how to trigger events only after the bot has connected. In this way, via styleOptions, you may be able to initially turn off the sendBox until the bot has connected.

Hope of help!

Upvotes: 2

Related Questions