Edits for Facebook bot

Custom version from conversation-simple with following modification:
1- Ready to integrate with Facebook messenger.
2- Maintain webhook conversation context per user.
3- Method to handle conversation from browser URL with text tag.
4- Click the tab icon will hide JSON tab instead of increasing it.
5- Edit in the conversation.js to convert Arabic numbers into English
numbers.

Author: Barqawiz

.env.example

@@ -2,3 +2,6 @@
 WORKSPACE_ID=<workspace-id>
 CONVERSATION_USERNAME=<conversation-username>
 CONVERSATION_PASSWORD=<conversation-password>
+FACEBOOK_VERIFY=<facebook-verify>
+FACEBOOK_TOKEN=<facebook-token>
+GET_ACTIVE=OFF

README.md

@@ -1,6 +1,15 @@
 # Conversation Sample Application [![Build Status](https://travis-ci.org/watson-developer-cloud/conversation-simple.svg?branch=master)](http://travis-ci.org/watson-developer-cloud/conversation-simple) [![codecov.io](https://codecov.io/github/watson-developer-cloud/conversation-simple/coverage.svg?branch=master)](https://codecov.io/github/watson-developer-cloud/conversation-simple?branch=master)
 
-This Node.js app demonstrates the Conversation service in a simple chat interface simulating a cognitive car dashboard.
+This Node.js app demonstrates the Conversation service in a simple chat interface simulating a cognitive car dashboard.<br/>
+This is **custom version from conversation-simple** with following modification:<br/>
+1- Ready to integrate with Facebook messenger.<br/>
+2- Maintain webhook conversation context per user.<br/>
+3- Method to handle conversation from browser URL with text tag.<br/>
+(the method created to make testing easier, the default status for method is not activate until you activate it from .env variable)<br/>
+4- Click the tab icon will hide JSON tab instead of increasing it.<br/>
+5- Edit in the conversation.js to convert Arabic numbers into English numbers. (For Watson To Match)<br/>
+**For more about changes check section Facebook Integration**
+
 
 ![Demo](readme_images/demo.gif)
 
@@ -202,6 +211,7 @@ Full license text is available in [LICENSE](LICENSE).
 ## Contributing
 
 See [CONTRIBUTING](CONTRIBUTING.md).
+This custom version forked by Barqawiz
 
 ## Open Source @ IBM
 

app.js

@@ -13,15 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+/** Forked version by Barqawiz **/
 'use strict';
 
 var express = require('express'); // app server
+var request = require('request');//Http requests
 var bodyParser = require('body-parser'); // parser for post requests
 var Conversation = require('watson-developer-cloud/conversation/v1'); // watson sdk
 
 var app = express();
-
+/*contextCash: save context through conversation when come from facebook or
+any third party messanger, working on enhanced version that clear context after x time*/
+var contextCash = {}
 // Bootstrap application settings
 app.use(express.static('./public')); // load UI from public folder
 app.use(bodyParser.json());
@@ -30,13 +33,43 @@ app.use(bodyParser.json());
 var conversation = new Conversation({
   // If unspecified here, the CONVERSATION_USERNAME and CONVERSATION_PASSWORD env properties will be checked
   // After that, the SDK will fall back to the bluemix-provided VCAP_SERVICES environment property
-  //'username': process.env.CONVERSATION_USERNAME,
-  //'password': process.env.CONVERSATION_PASSWORD,
+  'username': process.env.CONVERSATION_USERNAME,
+  'password': process.env.CONVERSATION_PASSWORD,
   'version_date': '2017-05-26'
 });
 
+//Endpoint to handle bot request
+app.get('/api/bot', function(req, res) {
+
+  var user_text = req.param('text') || '<empty>'
+  var workspace = process.env.WORKSPACE_ID || '<workspace-id>';
+  if (!workspace || workspace === '<workspace-id>' || user_text === '<empty>' || process.env.GET_ACTIVE === 'OFF') {
+    return "";
+  }
+
+  user_text = { text: user_text.toString("utf8") }
+  var payload = {
+    workspace_id: workspace,
+    context: req.body.context || {},
+    input: user_text || {}
+  };
+
+  // Send the input to the conversation service
+  conversation.message(payload, function(err, data) {
+    if (err) {
+      return res.status(err.code || 500).json(err);
+    }
+    if (data.output && data.output.text) {
+      return data.output.text[0]
+    } else {
+      return "";
+    }
+
+  });
+});
 // Endpoint to be call from the client side
 app.post('/api/message', function(req, res) {
+
   var workspace = process.env.WORKSPACE_ID || '<workspace-id>';
   if (!workspace || workspace === '<workspace-id>') {
     return res.json({
@@ -45,6 +78,7 @@ app.post('/api/message', function(req, res) {
       }
     });
   }
+
   var payload = {
     workspace_id: workspace,
     context: req.body.context || {},
@@ -56,7 +90,9 @@ app.post('/api/message', function(req, res) {
     if (err) {
       return res.status(err.code || 500).json(err);
     }
+
     return res.json(updateMessage(payload, data));
+
   });
 });
 
@@ -92,4 +128,116 @@ function updateMessage(input, response) {
   return response;
 }
 
+//THIRD PARTY
+// Subscribing the webhook
+app.get('/webhook/', function (req, res) {
+    if (req.query['hub.verify_token'] === process.env.FACEBOOK_VERIFY) {
+        res.send(req.query['hub.challenge']);
+    }
+    res.send('Error, wrong validation token');
+})
+
+// Incoming messages reach this end point //
+app.post('/webhook', (req, res) => {
+  console.log('**webhook invoced')
+  // Parse the request body from the POST
+  let body = req.body;
+  // Check the webhook event is from a Page subscription
+  if (body.object === 'page') {
+    // Iterate over each entry - there may be multiple if batched
+    body.entry.forEach(function(entry) {
+
+      // Gets the body of the webhook event
+      let webhook_event = entry.messaging[0];
+      //console.log(webhook_event);
+
+      // Get the sender PSID
+      let sender_psid = webhook_event.sender.id;
+      //console.log('Sender PSID: ' + sender_psid);
+
+      // Check if the event is a message or postback and
+      // pass the event to the appropriate handler function
+      if (webhook_event.message) {
+        let ctx = {}
+        ctx = contextCash[sender_psid] || ctx
+
+        handleMessage(sender_psid, webhook_event.message, ctx);
+      } else if (webhook_event.postback) {
+        console.log('postback request in webhook')
+      }
+
+    });
+    // Return a '200 OK' response to all events
+    res.status(200).send('EVENT_RECEIVED');
+
+  } else {
+    // Return a '404 Not Found' if event is not from a page subscription
+    res.sendStatus(404);
+  }
+
+});
+
+function handleMessage(sender_psid, received_message, contx) {
+
+  // Check if the message contains text
+  if (received_message.text) {
+    console.log("inside check")
+
+    let workspace = process.env.WORKSPACE_ID;
+    let text = { text: "'"+received_message.text+"'" }
+    let payload = {
+      workspace_id: workspace,
+      context:  contx || {},
+      input: text || {}
+    };
+
+    // Send the input to the conversation service
+    conversation.message(payload, function(err, data) {
+      if (err) {
+        return res.status(err.code || 500).json(err);
+      }
+
+      if (data.output && data.output.text) {
+
+        let response = {
+          "text": "'"+data.output.text[0]+"'"
+        }
+        callFacebookAPI(sender_psid, response);
+        //cash last context with the user
+        contextCash[sender_psid] = data.context
+      } else {
+        console.log("***response is empty: ***")
+        return;
+      }
+
+    });
+  }
+
+
+}
+
+function callFacebookAPI(sender_psid, response) {
+  // Construct the message body
+  let request_body = {
+    "recipient": {
+      "id": sender_psid
+    },
+    "message": response
+  }
+
+  // Send the HTTP request to the Messenger Platform
+  request({
+    "uri": "https://graph.facebook.com/v2.6/me/messages",
+    "qs": { "access_token": process.env.FACEBOOK_TOKEN },
+    "method": "POST",
+    "json": request_body
+  }, (err, res, body) => {
+    if (!err) {
+      console.log('message sent!')
+    } else {
+      console.error("Unable to send message:" + err);
+    }
+  });
+}
+
 module.exports = app;

manifest.yml

@@ -1,15 +1,5 @@
 ---
-declared-services:
-  my-conversation-service:
-    label: conversation
-    plan: free
 applications:
-- name: conversation-simple
-  command: npm start
-  path: .
-  memory: 256M
-  instances: 1
-  services:
-  - my-conversation-service
-  env:
-    NPM_CONFIG_PRODUCTION: false
+ - name: conversation-simple
+   random-route: true
+   memory: 256M

package.json

@@ -22,7 +22,9 @@
     "body-parser": "^1.18.2",
     "dotenv": "^2.0.0",
     "express": "^4.16.1",
-    "watson-developer-cloud": "^2.40.0"
+    "watson-developer-cloud": "^2.40.0",
+    "jsonwebtoken": "^7.1.9",
+    "request": "^2.73.0"
   },
   "devDependencies": {
     "babel-eslint": "^6.0.4",
@@ -35,7 +37,7 @@
     "supertest": "^1.2.0"
   },
   "engines": {
-    "node": ">= 6.9.x",
-    "npm": "> 3.10.x"
+    "node": "6.*",
+    "npm": "3.*"
   }
 }

public/css/app.css

@@ -72,7 +72,7 @@ div {
   padding: 0.9375rem 0 0.625rem 0;
   margin: auto;
   text-align: left;
-  max-width: 25rem;
+  max-width: 50rem;
   min-width: 9.375rem;
 }
 
@@ -265,6 +265,10 @@ input:-moz-placeholder {
   min-width: initial;
 }
 
+#payload-column.hidden {
+  visibility: hidden;
+}
+
 #payload-column .header-text, #payload-column #payload-initial-message {
   font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 1.125rem;

public/index.html

@@ -12,8 +12,8 @@
 </head>
 <body>
   <div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
-    <img class="option full" src="../img/Chat Button.png">
-    <img class="option not-full" src="../img/Code Button.png">
+    <img class="option full" src="../img/Code Button.png">
+    <img class="option not-full" src="../img/Chat Button.png">
   </div>
   <div id="contentParent" class="responsive-columns-wrapper">
     <div id="chat-column-holder" class="responsive-column content-column">

public/js/common.js

@@ -78,3 +78,25 @@ var Common = (function() {
     }
   }
 }());
+/*
+function _arabicNumberToEng(value) {
+          var newValue="";
+          for (var i=0;i<value.length;i +)
+          {
+              var ch=value.charCodeAt(i);
+              if (ch>=1776 && ch<=1785)   // For Persian digits.
+              {
+                  var newChar=ch-1728;
+                  newValue=newValue String.fromCharCode(newChar);
+              }
+              else if(ch>=1632 && ch<=1641)   // For Arabic digits.
+              {
+                  var newChar=ch-1584;
+                  newValue=newValue String.fromCharCode(newChar);
+              }
+              else
+                  newValue=newValue String.fromCharCode(ch);
+         }
+
+          return newValue;
+ 	}*/

public/js/conversation.js

@@ -218,11 +218,24 @@ var ConversationPanel = (function() {
       }
 
       // Send the user message
-      Api.sendRequest(inputBox.value, context);
+      value = inputBox.value
+      value = arabicToEn(value)
+      Api.sendRequest(value, context);
 
       // Clear input box for further messages
       inputBox.value = '';
       Common.fireEvent(inputBox, 'input');
     }
   }
+
+  function arabicToEn(value) {
+    var enValue="";
+    for (var i=0;i<value.length;i++)
+    {
+      var ch=value.charCodeAt(i);
+      enValue+=(ch>=1632 && ch<=1641) ?String.fromCharCode(ch-1584):String.fromCharCode(ch);
+    }
+    return enValue;
+  }
+
 }());

public/js/payload.js

@@ -6,6 +6,7 @@
 var PayloadPanel = (function() {
   var settings = {
     selectors: {
+      //chat-column-holder
       payloadColumn: '#payload-column',
       payloadInitial: '#payload-initial-message',
       payloadRequest: '#payload-request',
@@ -36,10 +37,10 @@ var PayloadPanel = (function() {
     var payloadColumn = document.querySelector(settings.selectors.payloadColumn);
     if (element.classList.contains('full')) {
       element.classList.remove('full');
-      payloadColumn.classList.remove('full');
+      payloadColumn.classList.remove('hidden');
     } else {
       element.classList.add('full');
-      payloadColumn.classList.add('full');
+      payloadColumn.classList.add('hidden');
     }
   }