As we went through the effort of getting the chat bot to send chat state notifications, it would seem silly not to also display these to the end user so that they know that something is happening. To do this, we'll need to add another section of HTML and extend our received message function. In the HTML, we'll add a simple <p> tag after our received <div> to display the chat status, as follows:

<p class="chat-status"></p> 

Next, we'll update the function call just above the if (!incoming.content) line to handle chat status notifications, making the function look like this:

  var receivedMessage = function(incoming) { 
    if (('localhost' !== incoming.from.domain) || ('bot'!==incoming.from.local))
    { 
      return /* Ignore messages from anywhere else */ 
    } 
    handleChatState(incoming.state) 
    if (!incoming.content) return
      /* Ignore anything which isn't a chat message */ ...