fix: Added server errors to be displayed in the chat area (#222)

* Show server error such as  session timeout in chat window

* Enforced node >=8.15.0 to resolve 502 errors with node 6.15.0

* Added 1 second pause before scrolling chat window to fix image loading in chat window

Author: Steve Green

package-lock.json

@@ -28,6 +28,10 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "engines": {
+    "node": ">=8.15.0"
+  },
+  "engineStrict": true,
   "devDependencies": {
     "babel-eslint": "^8.2.6",
     "casperjs": "^1.1.4",

package.json

@@ -27,6 +27,8 @@ var Api = (function() {
     },
     setResponsePayload: function(newPayloadStr) {
       responsePayload = JSON.parse(newPayloadStr);
+    },
+    setErrorPayload: function() {
     }
   };
 
@@ -35,7 +37,7 @@ var Api = (function() {
     http.open('GET', sessionEndpoint, true);
     http.setRequestHeader('Content-type', 'application/json');
     http.onreadystatechange = function () {
-      if (http.readyState == XMLHttpRequest.DONE) {
+      if (http.readyState === XMLHttpRequest.DONE) {
         var res = JSON.parse(http.responseText);
         sessionId = res.session_id;
         callback();
@@ -65,8 +67,19 @@ var Api = (function() {
     http.open('POST', messageEndpoint, true);
     http.setRequestHeader('Content-type', 'application/json');
     http.onreadystatechange = function() {
-      if (http.readyState === 4 && http.status === 200 && http.responseText) {
+      if (http.readyState === XMLHttpRequest.DONE && http.status === 200 && http.responseText) {
         Api.setResponsePayload(http.responseText);
+      } else if (http.readyState === XMLHttpRequest.DONE && http.status !== 200) {
+        Api.setErrorPayload({
+          'output': {
+            'generic': [
+              {
+                'response_type': 'text',
+                'text': 'I\'m having trouble connecting to the server, please refresh the page'
+              }
+            ],
+          }
+        });
       }
     };
 

public/js/api.js

@@ -46,6 +46,10 @@ var ConversationPanel = (function () {
       currentResponsePayloadSetter.call(Api, newPayloadStr);
       displayMessage(JSON.parse(newPayloadStr), settings.authorTypes.watson);
     };
+
+    Api.setErrorPayload = function (newPayload) {
+      displayMessage(newPayload, settings.authorTypes.watson);
+    };
   }
 
   // Set up the input box to underline text as it is typed
@@ -146,7 +150,10 @@ var ConversationPanel = (function () {
         // Class to start fade in animation
         currentDiv.classList.add('load');
         // Move chat to the most recent messages when new messages are added
-        scrollToChatBottom();
+        setTimeout(function () {
+          // wait a sec before scrolling
+          scrollToChatBottom();
+        }, 1000);
         setResponse(responses, isUser, chatBoxElement, index + 1, false);
       } else {
         var userTypringField = document.getElementById('user-typing-field');