feat: Added clickable button options (#191)

watson-developer-cloud · Aug 31, 2018 · d239235 · d239235
1 parent eb59368
commit d239235
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -435,3 +435,8 @@ html{
   font-weight: normal;
   font-style: normal;
 }
+
+.button-options {
+  color: #8d25e8;
+  cursor: pointer;
+}
diff --git a/public/js/conversation.js b/public/js/conversation.js
@@ -20,7 +20,8 @@ var ConversationPanel = (function () {
   // Publicly accessible methods defined
   return {
     init: init,
-    inputKeyDown: inputKeyDown
+    inputKeyDown: inputKeyDown,
+    sendMessage: sendMessage
   };
 
   // Initialize the module
@@ -162,16 +163,20 @@ var ConversationPanel = (function () {
 
     var outMsg = '';
 
-    if (newPayload.output !== undefined) {
-      if (newPayload.output.generic !== undefined) {
+    if (newPayload.hasOwnProperty('output')) {
+      if (newPayload.output.hasOwnProperty('generic')) {
         var options = null;
 
         var preference = 'text';
 
         for (var i = 0; i < newPayload.output.generic.length; i++) {
-          if (newPayload.output.generic[i].options !== undefined) {
+          if (newPayload.output.generic[i].hasOwnProperty('options')) {
             options = newPayload.output.generic[i].options;
           }
+
+          if (newPayload.output.generic[i].hasOwnProperty('preference')) {
+            preference = newPayload.output.generic[i].preference;
+          }
         }
         if (options !== null) {
           if (preference === 'text') {
@@ -182,6 +187,14 @@ var ConversationPanel = (function () {
               }
             }
             outMsg += '</ul>';
+          } else if (preference === 'button') {
+            outMsg += '<ul>';
+            for (i = 0; i < options.length; i++) {
+              if (options[i].value) {
+                outMsg += '<li><div class="button-options" onclick="ConversationPanel.sendMessage(\'' + options[i].value.input.text + '\');" >' + options[i].label + '</div></li>';
+              }
+            }
+            outMsg += '</ul>';
           }
         }
       }
@@ -236,20 +249,23 @@ var ConversationPanel = (function () {
     }
   }
 
+  function sendMessage(text) {
+    // Retrieve the context from the previous server response
+    var context;
+    var latestResponse = Api.getResponsePayload();
+    if (latestResponse) {
+      context = latestResponse.context;
+    }
+
+    // Send the user message
+    Api.sendRequest(text, context);
+  }
+
   // Handles the submission of input
   function inputKeyDown(event, inputBox) {
     // Submit on enter key, dis-allowing blank messages
     if (event.keyCode === 13 && inputBox.value) {
-      // Retrieve the context from the previous server response
-      var context;
-      var latestResponse = Api.getResponsePayload();
-      if (latestResponse) {
-        context = latestResponse.context;
-      }
-
-      // Send the user message
-      Api.sendRequest(inputBox.value, context);
-
+      sendMessage(inputBox.value);
       // Clear input box for further messages
       inputBox.value = '';
       Common.fireEvent(inputBox, 'input');