feat: Added support for workspace option/buttons (#95)

* added IAM API support * Minor formatting of readme * removed comments * Update .env assistant url * Update readme to the same as assistant simple, as there is no difference in configuring these two demos * Minor update * Added gif demo * Added gif demo * Removed if else to create Assistant object as it not required as SDK searchs for environmental variables * Added comment to Assistant constructor * Added a little extra info in the README for credentials automaticaly being localed in the .env file * Small correction * Small correction * Added options/buttons to chat area * Removed a console.log * Minor changes * Added .ibm-project to .gitignore * Delete .ibm-project * fixed conflict
watson-developer-cloud · Aug 2, 2018 · 9395469 · 9395469
1 parent d7d8008
commit 9395469
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,5 @@ coverage
 npm-debug.log
 .idea/
 dist/
+.ibm-project
+.jshintrc
diff --git a/package-lock.json b/package-lock.json
diff --git a/routes/conversation.js b/routes/conversation.js
@@ -22,7 +22,7 @@ const AssistantV1 = require('watson-developer-cloud/assistant/v1'); // watson sd
  * file i.e. username and password or IAM credentials
  */
 var assistant = new AssistantV1({
-  version: '2018-02-16'
+  version: '2018-07-10'
 });
 
 /**
@@ -85,6 +85,19 @@ module.exports = function (app) {
       if (error) {
         return next(error);
       }
+
+      // This is a fix for now, as since Assistant version 2018-07-10,
+      // output text can now be in output.generic.text
+      if (data.output.text.length === 0) {
+        if (data.output.generic !== undefined) {
+          if (data.output.generic[0].text !== undefined) {
+            data.output.text = data.output.generic[0].text;
+          } else if (data.output.generic[0].title !== undefined) {
+            data.output.text = data.output.generic[0].title;
+          }
+        }
+      }
+
       return res.json(updateMessage(payload, data));
     });
   });

diff --git a/training/car_workspace.json b/training/car_workspace.json
diff --git a/ui/css/conversation.css b/ui/css/conversation.css
@@ -200,7 +200,8 @@ input#user-input:-moz-placeholder {
 }
 
 .watson-message,
-.user-message {
+.user-message,
+.option-buttons {
     border-radius: 0.375rem;
     font-family: "Helvetica Neue for IBM Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 1rem;
@@ -220,6 +221,17 @@ input#user-input:-moz-placeholder {
     background: #00B4A0;
 }
 
+.option-buttons {
+  background-color: #8d25e8;
+  border-radius: 6px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin: 3px;
+  cursor: pointer;
+}
+
 .user-message::before {
     content: "";
     position: absolute;

diff --git a/ui/js/conversation.js b/ui/js/conversation.js
@@ -22,7 +22,7 @@
 /* global Api: true, Common: true */
 
 
-var Conversation = (function() {
+var Conversation = (function () {
   'use strict';
   var ids = {
     userInput: 'user-input',
@@ -61,13 +61,13 @@ var Conversation = (function() {
     document.getElementById(ids.chatScrollWrapper).style.display = 'none';
 
     var currentRequestPayloadSetter = Api.setUserPayload;
-    Api.setUserPayload = function(payload) {
+    Api.setUserPayload = function (payload) {
       currentRequestPayloadSetter.call(Api, payload);
       displayMessage(payload, authorTypes.user);
     };
 
     var currentResponsePayloadSetter = Api.setWatsonPayload;
-    Api.setWatsonPayload = function(payload) {
+    Api.setWatsonPayload = function (payload) {
       currentResponsePayloadSetter.call(Api, payload);
       displayMessage(payload, authorTypes.watson);
     };
@@ -76,7 +76,7 @@ var Conversation = (function() {
   // Set up the input box to submit a message when enter is pressed
   function initEnterSubmit() {
     document.getElementById(ids.userInput)
-      .addEventListener('keypress', function(event) {
+      .addEventListener('keypress', function (event) {
         if (event.keyCode === 13) {
           sendMessage();
           event.preventDefault();
@@ -122,7 +122,8 @@ var Conversation = (function() {
         Common.addClass(input, classes.underline);
         var txtNode = document.createTextNode(input.value);
         ['font-size', 'font-style', 'font-weight', 'font-family', 'line-height',
-          'text-transform', 'letter-spacing'].forEach(function(index) {
+          'text-transform', 'letter-spacing'
+        ].forEach(function (index) {
           dummy.style[index] = window.getComputedStyle(input, null).getPropertyValue(index);
         });
         dummy.textContent = txtNode.textContent;
@@ -131,13 +132,13 @@ var Conversation = (function() {
         var htmlElem = document.getElementsByTagName('html')[0];
         var currentFontSize = parseInt(window.getComputedStyle(htmlElem, null).getPropertyValue('font-size'), 10);
         if (currentFontSize) {
-          padding = Math.floor((currentFontSize - minFontSize) / (maxFontSize - minFontSize)
-            * (maxPadding - minPadding) + minPadding);
+          padding = Math.floor((currentFontSize - minFontSize) / (maxFontSize - minFontSize) *
+            (maxPadding - minPadding) + minPadding);
         } else {
           padding = maxPadding;
         }
 
-        var widthValue = ( dummy.offsetWidth + padding) + 'px';
+        var widthValue = (dummy.offsetWidth + padding) + 'px';
         input.setAttribute('style', 'width:' + widthValue);
         input.style.width = widthValue;
       }
@@ -183,12 +184,13 @@ var Conversation = (function() {
 
   // Display a message, given a message payload and a message type (user or Watson)
   function displayMessage(newPayload, typeValue) {
+    //console.log('SSSS: ' + JSON.stringify(newPayload, null, 2));
     var isUser = isUserMessage(typeValue);
-    var textExists = (newPayload.input && newPayload.input.text)
-      || (newPayload.output && newPayload.output.text);
+    var textExists = (newPayload.input && newPayload.input.text) ||
+      (newPayload.output && newPayload.output.text);
     if (isUser !== null && textExists) {
-      if (newPayload.output && Object.prototype.toString.call( newPayload.output.text ) === '[object Array]') {
-        newPayload.output.text = newPayload.output.text.filter(function(item) {
+      if (newPayload.output && Object.prototype.toString.call(newPayload.output.text) === '[object Array]') {
+        newPayload.output.text = newPayload.output.text.filter(function (item) {
           return item && item.length > 0;
         }).join(' ');
       }
@@ -218,18 +220,57 @@ var Conversation = (function() {
 
   // Builds the message DOM element (using auxiliary function Common.buildDomElement)
   function buildMessageDomElement(newPayload, isUser) {
+
     var dataObj = isUser ? newPayload.input : newPayload.output;
+    let outMsg = dataObj.text;
+    if (newPayload.output !== undefined) {
+      if (newPayload.output.generic !== undefined) {
+        let options = null;
+
+        let preference = 'text';
+
+        for (var i = 0; i < newPayload.output.generic.length; i++) {
+          if (newPayload.output.generic[i].options !== undefined) {
+            options = newPayload.output.generic[i].options;
+          }
+
+          if (newPayload.output.generic[i].preference !== undefined) {
+            preference = newPayload.output.generic[i].preference;
+          }
+        }
+
+        if (options !== null) {
+          if (preference === 'text') {
+
+            outMsg += '<ul>';
+
+            for (let i = 0; i < options.length; i++) {
+              if (options[i].value) {
+                outMsg += '<li>' + options[i].label + '</li>';
+              }
+            }
+            outMsg += '</ul>';
+          } else if (preference === 'button') {
+            outMsg += '<br>';
+
+            for (let i = 0; i < options.length; i++) {
+              if (options[i].value) {
+                outMsg += '<p class="option-buttons" onclick="Conversation.sendMessage(\''  + options[i].value.input.text + '\');" >' + options[i].label + '</p> ';
+              }
+            }
+          }
+        }
+      }
+    }
     var messageJson = {
       // <div class='user / watson'>
       'tagName': 'div',
       'classNames': ['message-wrapper', (isUser ? authorTypes.user : authorTypes.watson)],
       'children': [{
         // <p class='user-message / watson-message'>
         'tagName': 'p',
-        'classNames': (isUser
-          ? [authorTypes.user + '-message']
-          : [authorTypes.watson + '-message', classes.preBar]),
-        'html': (isUser ? '<img src=\'/images/head.svg\' />' + dataObj.text : dataObj.text)
+        'classNames': (isUser ? [authorTypes.user + '-message'] : [authorTypes.watson + '-message', classes.preBar]),
+        'html': (isUser ? '<img src=\'/images/head.svg\' />' + dataObj.text : outMsg)
       }]
     };
 
@@ -239,6 +280,7 @@ var Conversation = (function() {
   // Display the chat box if it's currently hidden
   // (i.e. if this is the first message), scroll to the bottom of the chat
   function updateChat() {
+    //console.log('oooo');
     document.getElementById(ids.chatScrollWrapper).style.display = '';
     var messages = document.getElementById(ids.chatFlow).getElementsByClassName(classes.messageWrapper);
     document.getElementById(ids.chatFlow).scrollTop = messages[messages.length - 1].offsetTop;
@@ -248,4 +290,4 @@ var Conversation = (function() {
   function focusInput() {
     document.getElementById(ids.userInput).focus();
   }
-}());
+}());
diff --git a/ui/js/conversationResponse.js b/ui/js/conversationResponse.js
@@ -102,15 +102,14 @@ var ConversationResponse = (function () {
   // on the user intent that was determined by Watson
   function responseHandler(data) {
 
-    let action = data.output.action;
-
+    let action = data.output.ui_action || data.output.action;
 
     if (data && !data.output.error) {
       // Check if message is handled by retrieve and rank and there is no message set
       if (action && !data.output.text) {
         // TODO add EIR link
-        data.output.text = ['I am not able to answer that. You can try asking the'
-        + ' <a href="https://conversation-with-discovery.mybluemix.net/" target="_blank">Information Retrieval with Discovery App</a>'];
+        data.output.text = ['I am not able to answer that. You can try asking the' +
+        ' <a href="https://conversation-with-discovery.mybluemix.net/" target="_blank">Information Retrieval with Discovery App</a>'];
 
         Api.setWatsonPayload(data);
         return;