improved search for same questions and question variants

Handle user input

README.md

@@ -72,7 +72,8 @@ Prerequests for step 3 (run on server):
 requires running mongodb service
 
 	Database (tellall) with collection (skill_list)
-		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae", "intents" : [ 	{ 	"intentName" : "GetFirstQuestion", "questionExplanation" : "",	"questions" : [ 	"tell me something about projects", 	"tell me all about projects" ], 	"answer" : "blablabla bla bla" }, 	{ 	"intentName" : "GetThirdQuestion", "questionExplanation" : "",	"questions" : [ 	"Give me third question" ], 	"answer" : "This is answer to the third question" } ], "invocationName" : "Saburly", "invocationAnswer" : "We are Saburly team one" })
+		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.2445552d-954d-4cd6-b77f-295368e02842", "intents" : [ { "intentName" : "GetFirstQuestion", "questionExplanation" : "","questions" : [ "tell me something about projects", "tell me all about projects" ], "answer" : "blablabla bla bla", "answerType":0, "externalAnswerSource":"" }, { "intentName" : "GetThirdQuestion", "questionExplanation" : "","questions" : [ "Give me third question" ], "answer" : "This is answer to the third question", "answerType":1, "externalAnswerSource":"http://sarajevotimes.com" } ], "invocationName" : "saburly", "invocationAnswer" : "We are Saburly team one", "contactEmail":"bilal@saburly.com" })
+
 		
         *obtain _id and change in web/src/App.js, and also skill_db_id in backend/config.js
 		*enter web/ dir and run "npm run build"

backend/config/config.js

@@ -1,5 +1,8 @@
+constants = require('./constants')
 var config = {};
 
+config.SKILL_STAGE = constants.skillStage.IN_DEVELOPMENT;
+
 config.DB_URL = 'mongodb://localhost:27017/tellall';
 config.PORT = 5000;
 
@@ -17,7 +20,7 @@ config.TOKEN_EXPIRES_IN = 1515100500;
 //config.SKILL_ID = 'amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae'; //bilal
 config.SKILL_ID = 'amzn1.ask.skill.2445552d-954d-4cd6-b77f-295368e02842'; //saburly
 //config.SKILL_DB_ID = '5a5016e775becaef2015da10'; //for server
-config.SKILL_DB_ID = '5a232fb86ce046c749739455'; //for local
+config.SKILL_DB_ID = '5abd461329f85e4ec728d945'; //for local
 
 //Bilal 
 //config.CLIENT_ID = 'amzn1.application-oa2-client.c748ca56ded04a95b236979898585ff7';

backend/config/constants.js

@@ -1,5 +1,10 @@
 const constants = {};
 
+constants.skillStage = {
+  IN_DEVELOPMENT : 'development',
+  LIVE : 'live'
+}
+
 constants.amazonResultCodes = {
   OK: 200,
   ACCEPTED: 202,
@@ -58,4 +63,10 @@ constants.stringConstraints = {
   EMAIL_MAX_LENGTH: 100,
 };
 
+constants.answerType = {
+  PREDEFINED: 0,
+  EXTERNAL_SOURCE_WP_TITLES : 1,
+  EXTERNAL_SOURCE_WP_NEWS : 2
+}
+
 module.exports = constants;

backend/controllers/skill.js

@@ -1,10 +1,10 @@
-var express = require ('express'), router = express.Router ();
+let express = require ('express'), router = express.Router ();
 const constants = require ('../config/constants');
-var databaseHelper = require ('../helpers/database');
+let databaseHelper = require ('../helpers/database');
-var amazonHelper = require ('../helpers/amazon');
+let amazonHelper = require ('../helpers/amazon');
-var skillValidator = require('../helpers/skillValidator');
+let skillValidator = require('../helpers/skillValidator');
-var bodyParser = require ('body-parser');
+let bodyParser = require ('body-parser');
-var alexa = require ('../models/alexa');
+let alexa = require ('../models/alexa');
 
 router.get ('/:id', async (req, res, next) => {
   const id = req.params.id;

backend/helpers/amazon.js

@@ -271,10 +271,11 @@ var generateInteractionModel = function (skill) {
 
 var uploadSkill = function (skill) {
   let generatedInteractionModel = generateInteractionModel (skill);
+  console.log(skill.skillID);
   return fetch (
-    `https://api.amazonalexa.com/v0/skills/${skill.skillID}/interactionModel/locales/en-US`,
+    `https://api.amazonalexa.com/v1/skills/${skill.skillID}/stages/development/interactionModel/locales/en-US`,
     {
-      method: 'POST',
+      method: 'PUT',
       headers: {
         Authorization: config.TOKEN,
       },

backend/helpers/externalSource.js

@@ -0,0 +1,44 @@
+let request = require ('request');
+let Parser = require ('rss-parser');
+
+let parser = new Parser ();
+
+getDataFromWPJSON = function (sourceUrl, page = 1, maxPosts = 10) {
+  return new Promise ((resolve, reject) => {
+    var options = {
+      method: 'GET',
+      url: `${sourceUrl}/wp-json/wp/v2/posts`,
+      qs:{
+          page:page,
+          per_page:maxPosts
+      }
+    };
+
+    request (options, (error, response, body)=> {
+      if (error) {
+        reject (error);
+      } else {
+        resolve(JSON.parse (body));
+      }
+    });
+  });
+}
+
+module.exports = {
+  getAnswerFromWP : function (sourceUrl){
+    //This function will extract needed data from JSON, which we got from getDataFromWPJSON
+    //At the moment, it's taking titles and creates answer
+    return new Promise((resolve,reject)=>{
+      getDataFromWPJSON(sourceUrl).then(rawData=>{
+        let result='';
+        rawData.forEach(post=>{
+          result += post.title.rendered + '<break time="300ms"/> '
+        });
+        resolve(result);
+      }).catch(err=>{
+        reject('Failed to get answer');
+      });
+    });
+  }
+}
+

backend/helpers/skillValidator.js

@@ -26,7 +26,9 @@ validateQuestion = function (question) {
   return validQuestionNameRegex.test (question);
 };
 
-validateAnswer = function (answer) {
+validateAnswer = function (answer, answerType) {
+  if (answerType !== constants.answerType.PREDEFINED) return true;
+  
   if (
     answer.length < constants.stringConstraints.ANSWER_MIN_LENGTH ||
     answer.length > constants.stringConstraints.ANSWER_MAX_LENGTH
@@ -36,13 +38,18 @@ validateAnswer = function (answer) {
   return validAnswerRegex.test (answer);
 };
 
+validateExternalAnswerSource = function (externalAnswerSource, answerType){
+  // TODO: implement validation logic
+  return true;
+}
+
 validateInvocationName = function (invocationName) {
   if (
     invocationName.length < constants.stringConstraints.INVOCATION_NAME_MIN_LENGTH ||
     invocationName.length > constants.stringConstraints.INVOCATION_NAME_MAX_LENGTH
   )
     return false;
-  let validInvocationNameRegex = /^[a-z,.' ]*$/i;
+  let validInvocationNameRegex = /^[a-z,.' ]*$/;
   return validInvocationNameRegex.test (invocationName);
 };
 
@@ -69,10 +76,10 @@ module.exports = {
         !validateInvocationAnswer (skill.invocationAnswer)
       )
         return false;
-
       for (let i = 0; i < skill.intents.length; i++) {
         if (!validateIntentName (skill.intents[i].intentName)) return false;
-        if (!validateAnswer (skill.intents[i].answer)) return false;
+        if (!validateAnswer (skill.intents[i].answer, skill.intents[i].answerType)) return false;
+        if (!validateExternalAnswerSource(skill.intents[i].externalAnswerSource, skill.intents[i].answerType)) return false;
 
         for (let j = 0; j < skill.intents.length; j++) {
           if (i === j) continue;

backend/models/alexa.js

@@ -3,9 +3,11 @@ const config = require ('../config/config');
 var databaseHelper = require ('../helpers/database');
 var emailHelper = require ('../helpers/email');
 const constants = require ('../config/constants');
+let predefinedSourceHelper = require ('../helpers/externalSource');
 
 var handlers = {};
 var destinationEmail;
+let skillName; 
 
 module.exports = {
   run: function (req, res) {
@@ -32,6 +34,7 @@ module.exports = {
       .then (activeSkill => {
         handlers = {};
         destinationEmail = activeSkill.contactEmail;
+        skillName = activeSkill.invocationName;
 
         let listOfPossibleQuestions = '';
         activeSkill.intents.forEach (intent => {
@@ -44,7 +47,8 @@ module.exports = {
               'ms"/>';
           }
         });
-        listOfPossibleQuestions += 'If you dont know what to do, just say help or stop';
+        listOfPossibleQuestions +=
+          'If you dont know what to do, just say help or stop';
 
         //Handler for launch requestconsole.log()
         handlers = {
@@ -58,7 +62,7 @@ module.exports = {
                   'Would you like to hear list of questions that you can ask me'
               )
               .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
-              this.attributes['LaunchRequestYesNo'] = true;
+            this.attributes['LaunchRequestYesNo'] = true;
             this.emit (':responseReady');
           },
         };
@@ -66,19 +70,58 @@ module.exports = {
         //Handlers for user defined questions
         activeSkill.intents.map (intent => {
           handlers[intent.intentName] = function () {
-            if (this.attributes['LaunchRequestYesNo']){
+            if (this.attributes['LaunchRequestYesNo']) {
               this.attributes['LaunchRequestYesNo'] = false;
             }
-            this.response
+
-              .speak (intent.answer)
+            let answerPromiseProps = {
-              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+              resolve: null,
-            this.emit (':responseReady');
+              reject: null
+            }
+
+            let answerPromise = new Promise ((resolve, reject) => {
+              answerPromiseProps = {
+                resolve:resolve,
+                reject:reject
+              }
+            });
+            
+            switch (intent.answerType){
+              case constants.answerType.PREDEFINED:
+                answerPromiseProps.resolve(intent.answer);
+                break;
+              case constants.answerType.EXTERNAL_SOURCE_WP_TITLES:
+                predefinedSourceHelper.getAnswerFromWP(intent.externalAnswerSource).then(answer=>{
+                  answerPromiseProps.resolve(answer);
+                }).catch(error=>{
+                  answerPromiseProps.reject(error);
+                });
+                break;
+              case constants.answerType.EXTERNAL_SOURCE_WP_NEWS:
+                answer = 'Not implemented yet'
+                answerPromiseProps.resolve(answer);
+                break;
+            }
+
+            answerPromise
+              .then (answer => {
+                this.response
+                  .speak (answer)
+                  .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+                this.emit (':responseReady');
+              })
+              .catch (error => {
+                this.response
+                  .speak (error)
+                  .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+                this.emit (':responseReady');
+              });
           };
         });
 
         //Handler for sending message
         handlers.SendMessageIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
 
@@ -171,15 +214,15 @@ module.exports = {
         //Built-In intents
 
         handlers.CancelIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
-          this.response.speak ('Thank you for using Saburly');
+          this.response.speak (`Thank you for using ${skillName}`);
           this.emit (':responseReady');
         };
 
         handlers.HelpIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
           this.response
@@ -188,26 +231,32 @@ module.exports = {
           this.emit (':responseReady');
         };
 
-        handlers.YesIntent = function(){
+        handlers.YesIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
-            this.emit('HelpIntent');
+            this.emit ('HelpIntent');
-          }else{
+          } else {
-            this.response.speak(constants.voiceResponseStrings.DIDNT_ASK_ANYTHING).listen(constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.response
-            this.emit(':responseReady');
+              .speak (constants.voiceResponseStrings.DIDNT_ASK_ANYTHING)
+              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.emit (':responseReady');
           }
-        }
+        };
 
-        handlers.NoIntent = function (){
+        handlers.NoIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
-            this.response.speak('').listen(constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.response
-            this.emit(':responseReady');
+              .speak ('')
-          }else{
+              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
-            this.response.speak(constants.voiceResponseStrings.DIDNT_ASK_ANYTHING).listen(constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.emit (':responseReady');
-            this.emit(':responseReady');
+          } else {
+            this.response
+              .speak (constants.voiceResponseStrings.DIDNT_ASK_ANYTHING)
+              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
+            this.emit (':responseReady');
           }
-        }
+        };
 
         //Default handler for unknown question
 

backend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "tellall",
   "version": "1.0.0",
   "description": "",
   "main": "test.js",
@@ -10,9 +10,9 @@
     "express": "^4.13.0",
     "isomorphic-fetch": "^2.2.1",
     "mongodb": "^2.2.33",
+    "nodejs-text-summarizer": "^2.0.3",
     "nodemailer": "^4.4.1",
-    "request": "^2.83.0"
+    "request": "^2.83.0",
-  },
+    "rss-parser": "^3.1.1"
-  "author": "Matt Kruse <github@mattkruse.com> (http://mattkruse.com/)",
+  }
-  "license": "MIT"
 }

web/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "keymaster": "^1.6.2",
+    "node-sass-chokidar": "0.0.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-md": "^1.2.8",
@@ -17,7 +18,7 @@
     "watch-css": "nodemon -e scss -x \"npm run watch-css-mine\"",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
-    "react-build" : "react-scripts build",
+    "react-build": "react-scripts build",
     "build": "npm-run-all -p build-css react-build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

web/src/App.js

@@ -17,6 +17,7 @@ import {
   INTENT_NAME_MIN_LENGTH,
   QUESTION_MIN_LENGTH,
   ANSWER_MIN_LENGTH,
+  ANSWER_TYPE,
 } from './config/constants';
 
 class App extends Component {
@@ -24,7 +25,7 @@ class App extends Component {
     super (props);
 
     this.state = {
-      _id: '5a232fb86ce046c749739455',
+      _id: '5abd461329f85e4ec728d945',
       skillID: '',
       skillName: '',
       invocationName: 'Saburly',
@@ -35,6 +36,8 @@ class App extends Component {
         intentExplanation: '',
         questions: [''],
         answer: '',
+        answerType: ANSWER_TYPE.PREDEFINED,
+        externalAnswerSource: '',
       },
       selectedIndex: NEW_INTENT_SELECTED_INDEX,
       contactEmail: '',
@@ -149,8 +152,7 @@ class App extends Component {
   }
 
   handleSaveLaunchRequestClick (name, answer) {
-
+    if (name.length < INVOCATION_NAME_MIN_LENGTH) {
-    if (name.length < INVOCATION_NAME_MIN_LENGTH){
       Popup.alert ('Invocation name should be at least 2 characters long');
       return;
     }
@@ -173,7 +175,7 @@ class App extends Component {
   }
 
   handleSaveEmailClick (email) {
-    if (isEmailValid(email)){
+    if (isEmailValid (email)) {
       this.setState ({waiting: true});
       this.sendSkill (
         this.state.allIntents,
@@ -185,7 +187,7 @@ class App extends Component {
         email,
         false
       );
-    }else{
+    } else {
       Popup.alert ('Please enter valid email');
     }
   }
@@ -230,51 +232,52 @@ class App extends Component {
   }
 
   handleSaveIntentClick (selectedIntent) {
-
+    if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH) {
-    if (selectedIntent.intentName.length < INTENT_NAME_MIN_LENGTH){
       Popup.alert ('Question name should have at least 2 characters');
       return;
     }
 
-    if (selectedIntent.answer.length < ANSWER_MIN_LENGTH){
+    if (
-      Popup.alert('Answer should have at least 2 characters');
+      selectedIntent.answerType === ANSWER_TYPE.PREDEFINED &&
+      selectedIntent.answer.length < ANSWER_MIN_LENGTH
+    ) {
+      Popup.alert ('Answer should have at least 2 characters');
       return;
     }
 
-    for(let i=0;i<selectedIntent.questions.length;i++){
+    for (let i = 0; i < selectedIntent.questions.length; i++) {
-      if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH){
+      if (selectedIntent.questions[i].length < QUESTION_MIN_LENGTH) {
-        Popup.alert('Question variant should have at least 2 characters');
+        Popup.alert ('Question variant should have at least 2 characters');
         return;
       }
     }
 
     //Check for same question variants and same question name in other intents
+    //all intents with the same intentName, or some of the questions are the same
+    //will be kept in filteredIntents. After filterring, there should be only one 
+    //intent left, the selected one
+    
+    let selectedIntentQuestionsForSearch = selectedIntent.questions.map(question=>
+      question.toLowerCase().trim());
 
-    for (let i=0;i<this.state.allIntents.length;i++){
+    let filteredIntents = this.state.allIntents.filter(intent=>{
-      if (i!==this.state.selectedIndex){
+      let result = (selectedIntent.intentName.toLowerCase().trim() === intent.intentName.toLowerCase().trim());
-        if (selectedIntent.intentName === this.state.allIntents[i].intentName){
+      let filteredQuestions = intent.questions.filter(question=>{
-          Popup.alert('Question name already exists');
+        return (selectedIntentQuestionsForSearch.indexOf(question.toLowerCase().trim())!==-1);
-          return;
+      });
-        }
+      return (result || filteredQuestions.length > 0);
+    });
 
-        for(let j=0;j<selectedIntent.questions.length;j++){
+    if (filteredIntents.length > 1){
-          for (let k=0;k<this.state.allIntents[i].questions.length;k++){
+      Popup.alert('Question name or question variant already exists');
-            if (selectedIntent.questions[j] === this.state.allIntents[i].questions[k]){
+      return;
-              Popup.alert('Question variant already exists (in question :' + this.state.allIntents[i].intentName + ')');
-              return;
-            }
-          }
-        }
-      }
     }
 
-
-
     let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
     let newAllIntents = JSON.parse (newAllIntentsJSON);
-    
+
     let resolveState = null;
-    let rejectState = {waiting:false}
+    let rejectState = {waiting: false};
 
     if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
       //new intent
@@ -290,7 +293,7 @@ class App extends Component {
       resolveState = {
         allIntents: newAllIntents,
         selectedIntent: selectedIntent,
-        waiting:false,
+        waiting: false,
       };
     }
     this.setState ({waiting: true});
@@ -311,7 +314,14 @@ class App extends Component {
       allIntents: this.state.allIntents,
       selectedIndex: NEW_INTENT_SELECTED_INDEX,
       launchRequest: false,
-      selectedIntent: {intentName: '', questions: [''], answer: '', intentExplanation:''},
+      selectedIntent: {
+        intentName: '',
+        questions: [''],
+        answer: '',
+        intentExplanation: '',
+        answerType: ANSWER_TYPE.PREDEFINED,
+        externalAnswerSource: '',
+      },
     });
   }
 

web/src/components/AnswerSource.js

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import {Button} from 'react-md';
+import AnswerSourceForm from './helper/AnswerSourceForm';
+import '../css/components/IntentDetails.css';
+
+class AnswerSource extends Component {
+  constructor (props) {
+    super (props);
+
+    this.state = {
+      isModalOpen: false,
+      answerType: this.props.answerType
+    };
+  }
+
+  onOpen () {
+    this.setState ({
+      isModalOpen: true,
+      answerType: this.props.answerType
+    });
+  }
+
+  onClose () {
+    this.setState ({
+      isModalOpen: false,
+    });
+  }
+
+  onSave(){
+    this.onClose();
+    this.props.onSaveAnswerType(this.state.answerType);
+  }
+
+  onSourceChange(value, event){
+    this.setState({answerType:parseInt(value,10)});
+  }
+
+  render () {
+    let modal;
+    if (this.state.isModalOpen) {
+      modal = <AnswerSourceForm 
+                isModalOpen={this.state.isModalOpen}
+                answerType={this.state.answerType}
+                onSave={this.onSave.bind(this)}
+                onClose={this.onClose.bind(this)}
+                onSourceChange={this.onSourceChange.bind(this)}
+              />
+    }
+    return (
+      <div>
+        <Button flat primary onClick={this.onOpen.bind (this)}>
+          Answer type
+        </Button>
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default AnswerSource;

web/src/components/IntentDetails.js

@@ -1,41 +1,54 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
+import AnswerSource from './AnswerSource.js';
 import '../css/components/IntentDetails.css';
 import '../css/Common.css';
-import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';
+import {
+  QUESTION_MAX_LENGTH,
+  ANSWER_MAX_LENGTH,
+  INTENT_NAME_MAX_LENGTH,
+  INTENT_EXPLANATION_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../config/constants';
+import AnswerTextBox from './helper/AnswerTextBox.js';
 
 class IntentDetails extends Component {
-  constructor(props){
+  constructor (props) {
-    super(props);
+    super (props);
 
-    this.state= {intent: props.selectedIntent};
+    this.state = {intent: props.selectedIntent};
 
-    this.addQuestion = this.addQuestion.bind(this);
+    this.addQuestion = this.addQuestion.bind (this);
-    this.deleteQuestion = this.deleteQuestion.bind(this);
+    this.deleteQuestion = this.deleteQuestion.bind (this);
-    this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
+    this.handleQuestionEdit = this.handleQuestionEdit.bind (this);
-    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
+    this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
-    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
+    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
-    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
+      this
+    );
   }
 
-  componentWillReceiveProps(props){
+  componentWillReceiveProps (props) {
-    this.setState({intent: props.selectedIntent});
+    this.setState ({intent: props.selectedIntent});
   }
 
-  render() {
+  render () {
     return (
       <div className="RightPanelBox">
         <div className="QuestionBox">
-        <h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
+          <h5 className="PanelSubTitle">
-        <TextField
+            {' '}
+            In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
+          </h5>
+          <TextField
             id="intent explanation"
             lineDirection="center"
             placeholder="To ask us about our services, say "
             className="md-cell md-cell--bottom IntentDetailsInputBoxes"
             onChange={this.handleIntentExplanationEdit}
             maxLength={INTENT_EXPLANATION_MAX_LENGTH}
-            value={this.state.intent.intentExplanation} />
+            value={this.state.intent.intentExplanation}
-          <br/>
+          />
+          <br />
           <TextField
             id="intent name"
             lineDirection="center"
@@ -43,91 +56,146 @@ class IntentDetails extends Component {
             className="md-cell md-cell--bottom IntentDetailsInputBoxes"
             onChange={this.handleIntentNameEdit}
             maxLength={INTENT_NAME_MAX_LENGTH}
-            value={this.state.intent.intentName} />
+            value={this.state.intent.intentName}
+          />
         </div>
         <h5 className="QuestionTitle">Question variants</h5>
-        {
+        {this.state.intent.questions.map ((question, index) => {
-          this.state.intent.questions.map((question, index)=>{
+          return (
-            return (
+            <div key={index} className="QuestionBox">
-              <div key={index} className="QuestionBox">
+              <TextField
-                <TextField
+                id="intent question"
-                  id="intent question"
+                lineDirection="center"
-                  lineDirection="center"
+                placeholder="Question"
-                  placeholder="Question"
+                className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                maxLength={QUESTION_MAX_LENGTH}
-                  maxLength={QUESTION_MAX_LENGTH}
+                rightIcon={
-                  rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
+                  <SVGIcon
-                  onChange={(e)=>{this.handleQuestionEdit(e,index)}}
+                    onClick={() => {
-                  value={question}/>
+                      this.deleteQuestion (question);
-              </div>
+                    }}
-            );
+                  >
-          })
+                    {' '}
-        }
+                    <path
-        <br></br>
+                      fill="#000000"
-        {
+                      d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
-          <div className="QuestionBox">
+                    />
-            <TextField
+                    {' '}
-              id="intent answer"
+                  </SVGIcon>
-              lineDirection="center"
+                }
-              label="Answer"
+                onChange={e => {
-              placeholder="Answer"
+                  this.handleQuestionEdit (e, index);
-              maxLength={ANSWER_MAX_LENGTH}
+                }}
-              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                value={question}
-              onChange={this.handleAnswerEdit}
+              />
-              value={this.state.intent.answer}/>
+            </div>
-          </div>
+          );
-        }
+        })}
-        <br></br>
+        <Button
-        <br></br>
+          className="AddQuestionVariantButton"
-        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
+          icon
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>        
+          primary
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
+          onClick={this.addQuestion}
-        
+          disabled={this.props.waiting}
+        >
+          add
+        </Button>
+        <AnswerSource
+          className="AnswerTypeButton"
+          onSaveAnswerType={this.handleExternalSourceSave.bind(this)}
+          answerType={this.state.intent.answerType}
+        />
+        <AnswerTextBox
+          answerType={this.state.intent.answerType}
+          externalAnswerSource={this.state.intent.externalAnswerSource}
+          handleAnswerSourceEdit={this.handleAnswerSourceEdit.bind(this)}
+          handleAnswerEdit={this.handleAnswerEdit.bind(this)}
+          answer={this.state.intent.answer}
+        />
+        <Button
+          className="IntentDetailsButton-firstInRow"
+          flat
+          primary
+          swapTheming
+          onClick={() => {
+            this.props.onSaveIntentClick (this.state.intent);
+          }}
+          disabled={this.props.waiting}
+        >
+          Save
+        </Button>
+        <Button
+          className="IntentDetailsButton"
+          flat
+          primary
+          onClick={() => {
+            this.props.onDeleteIntentClick (this.state.intent);
+          }}
+          disabled={this.props.waiting}
+        >
+          Delete
+        </Button>
+
       </div>
     );
   }
 
-  addQuestion(){
+  addQuestion () {
     let newIntent = this.state.intent;
-    newIntent.questions.push('');
+    newIntent.questions.push ('');
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  deleteQuestion(question){
+  deleteQuestion (question) {
-    let newIntent = this.state.intent;
+    if (this.state.intent.questions.length > 1) {
-    let removeId = newIntent.questions.indexOf(question);
+      let newIntent = this.state.intent;
-    if (removeId !== -1)
+      let removeId = newIntent.questions.indexOf (question);
-      newIntent.questions.splice(removeId,1);
+      if (removeId !== -1) newIntent.questions.splice (removeId, 1);
-    
+
-    this.setState({intent: newIntent});
+      this.setState ({intent: newIntent});
+    }
   }
 
-  handleQuestionEdit(e,index){
+  handleQuestionEdit (e, index) {
-    if (e.length === QUESTION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+    if (e.length === QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
     let newIntent = this.state.intent;
     newIntent.questions[index] = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  handleIntentExplanationEdit(e,index){
+  handleIntentExplanationEdit (e, index) {
-    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
+      return;
     let newIntent = this.state.intent;
     newIntent.intentExplanation = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  handleAnswerEdit(e){
+  handleAnswerEdit (e) {
-    if (e.length === ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+    if (e.length === ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
     let newIntent = this.state.intent;
     newIntent.answer = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  handleIntentNameEdit(e){
+  handleAnswerSourceEdit (e) {
-    if (e.length === INTENT_NAME_MAX_LENGTH || !(/^[a-z]*$/i.test(e))) return;
+    if (e.length === ANSWER_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.externalAnswerSource = e;
+    this.setState ({intent: newIntent});
+  }
+
+  handleIntentNameEdit (e) {
+    if (e.length === INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
     let newIntent = this.state.intent;
     newIntent.intentName = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
+  }
+
+  handleExternalSourceSave (answerType) {
+    let newIntent = this.state.intent;
+    newIntent.answerType = answerType;
+    this.setState ({intent: newIntent});
   }
 }
 

web/src/components/LaunchRequest.js

@@ -25,7 +25,7 @@ class LaunchRequest extends Component {
         <TextField
           id="invocation name"
           lineDirection="center"
-          placeholder="Saburly"
+          placeholder="saburly"
           label="Invocation name"
           className="md-cell md-cell--bottom InvocationInputBoxes"
           maxLength={INVOCATION_NAME_MAX_LENGTH}
@@ -52,7 +52,7 @@ class LaunchRequest extends Component {
   }
 
   handleNameEdit(e){
-    if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return; 
+    if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/.test(e))) return; 
     this.setState({invocationName: e});
   }
 

web/src/components/helper/AnswerSourceForm.js

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {Button, SelectionControlGroup} from 'react-md';
+import Modal from './Modal';
+
+class AnswerSourceForm extends Component{
+
+    render(){
+        return(
+        <Modal
+            title="Answer type"
+            actions={[
+            <Button
+                flat
+                swapTheming
+                onClick={this.props.onClose.bind (this)}
+                key="cancel"
+            >
+                Cancel
+            </Button>,
+            <Button 
+                flat 
+                primary 
+                swapTheming 
+                key="save"
+                onClick={this.props.onSave.bind(this)}
+            >
+                Save
+            </Button>,
+            ]}
+        >
+            <SelectionControlGroup
+            id="answer-source"
+            name="answer-source"
+            type="radio"
+            label="Import answer from:"
+            onChange={this.props.onSourceChange.bind(this)}
+            controls={[
+                {
+                label: 'Predefined answer',
+                value: '0'
+                },
+                {
+                label: 'WordPress titles',
+                value: '1',
+                },
+                {
+                label: 'WordPress latest news',
+                value: '2',
+                },
+            ]}
+            defaultValue={String(this.props.answerType)}
+            />
+        </Modal>);
+    }
+}
+
+export default AnswerSourceForm;

web/src/components/helper/AnswerTextBox.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import {TextField} from 'react-md';
+import '../../css/components/IntentDetails.css';
+import '../../css/Common.css';
+import {
+  ANSWER_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../../config/constants';
+
+class AnswerTextBox extends Component {
+
+  render () {
+      //theese are defaults for ANSWER_TYPE.PREDEFINED
+      let labelText="Answer";
+      let valueText=this.props.answer;
+      let onChangeValue=this.props.handleAnswerEdit;
+      switch(this.props.answerType){
+          case ANSWER_TYPE.EXTERNAL_SOURCE_WP_TITLES:
+          case ANSWER_TYPE.EXTERNAL_SOURCE_WP_NEWS:
+            labelText="Answer source";
+            valueText=this.props.externalAnswerSource;
+            onChangeValue=this.props.handleAnswerSourceEdit
+            break;
+      }
+      
+
+    return(
+    <div className="QuestionBox">
+        <TextField
+          id="intent answer"
+          lineDirection="center"
+          label={labelText}
+          placeholder={labelText}
+          maxLength={ANSWER_MAX_LENGTH}
+          className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+          onChange={onChangeValue}
+          value={valueText}
+        />
+      </div>
+    );
+  }
+}
+
+export default AnswerTextBox;

web/src/components/helper/Modal.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import '../../css/components/Modal.css';
+
+class Modal extends Component {
+    render() {
+        const { title, children, actions } = this.props;
+        return (
+            <div className="modal">
+                <div className="modal-content">
+                    <h2 className="header">
+                        {title}
+                    </h2>
+                    {children}
+                    <div className="actions">
+                        {actions}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Modal;

web/src/config/constants.js

@@ -22,6 +22,12 @@ export const NEW_INTENT_SELECTED_INDEX = -1;
 export const LAUNCH_REQUEST_SELECTED_INDEX = -2;
 export const CONTACT_SELECTED_INDEX = -3;
 
+export const ANSWER_TYPE = {
+  PREDEFINED: 0,
+  EXTERNAL_SOURCE_WP_TITLES : 1,
+  EXTERNAL_SOURCE_WP_NEWS : 2
+}
+
 export const RESULT_CODES = {
   OK: 0,
   ERROR: -1,

web/src/css/components/IntentDetails.scss

@@ -9,10 +9,25 @@
 }
 
 .IntentDetailsInputBoxes{
-    width: 60%;
+    width: 90%;
 }
 
 .IntentDetailsButton{
-    float: left;
+    float: right;
-    margin-left: 25px;
+    margin-right: 25px;
+}
+
+.IntentDetailsButton-firstInRow{
+    float: right;
+    margin-right: 10%;
+}
+
+.AddQuestionVariantButton{
+    float: right;
+    margin-right: 10%;
+}
+
+.AnswerTypeButton{
+    float: right;
+    margin-right: 30px;
 }

web/src/css/components/Modal.scss

@@ -0,0 +1,32 @@
+.modal {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(37, 37, 37, .7);
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.modal-content {
+		color: black;
+		padding: 20px;
+		padding-bottom: 0px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		height: auto;
+		background-color: #FFF;
+		min-width: 500px;
+		.actions {
+			border-top: 1px solid #bebebe;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			min-width: 500px;
+			margin: 0 -20px;
+			padding: 10px;
+		}
+	}
+}

web/src/css/index.css

@@ -115,10 +115,10 @@ h5, .md-subheading-1 {
   line-height: 24px; }
 
 p, .md-body-1 {
-  line-height: 1.42857; }
+  line-height: 20px; }
 
 h6, .md-body-2 {
-  line-height: 1.42857; }
+  line-height: 24px; }
 
 caption, .md-caption {
   font-size: 12px; }
@@ -1378,7 +1378,7 @@ tbody .md-table-row {
     line-height: inherit; }
 
 .md-table-checkbox .md-selection-control-label {
-  display: block; }
+  display: flex; }
 
 .md-table-checkbox .md-selection-control-container {
   margin-left: 12px;

web/src/lib/api.js

@@ -17,4 +17,4 @@ export const updateSkill = (skill)=>{
     },
     body: JSON.stringify(skill),
   });
-}
+}