4a. import content from WP ; change design to reflect 4a

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_JSON : 1,
+  EXTERNAL_SOURCE_RSS : 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,52 @@
+let request = require ('request');
+let Parser = require ('rss-parser');
+
+let parser = new Parser ();
+
+getDataFromRSSFeed = function (url) {
+  //let feed = await parser.parseURL(url);
+  //console.log(feed.title);
+  //feed.items.forEach(item => {
+  //  console.log(item.title + ':' + item.link)
+  //});
+}
+
+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(err);
+      });
+    });
+  }
+}
+

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,8 @@ const config = require ('../config/config');
 var databaseHelper = require ('../helpers/database');
 var emailHelper = require ('../helpers/email');
 const constants = require ('../config/constants');
-let Parser = require('rss-parser');
+let predefinedSourceHelper = require ('../helpers/externalSource');
 
-let parser = new Parser();
 var handlers = {};
 var destinationEmail;
 
@@ -46,7 +45,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 = {
@@ -60,7 +60,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');
           },
         };
@@ -68,20 +68,23 @@ 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;
             }
-            if (intent.predefinedAnswer) {
+            let answer = '';
-              const url = 'https://www.klix.ba/rss/naslovnica';
+            switch (intent.answerType){
-              let feed = await parser.parseURL(url);
+              case constants.answerType.PREDEFINED:
-              console.log(feed.title);
+                answer = intent.answer;
-             
+                break;
-              feed.items.forEach(item => {
+              case constants.answerType.EXTERNAL_SOURCE_WP_JSON:
-                console.log(item.title + ':' + item.link)
+                answer = predefinedSourceHelper.getAnswerFromWP(intent.externalAnswerSource);
-              });
+                break;
+              case constants.answerType.EXTERNAL_SOURCE_RSS:
+                answer = 'Not implemented yet'
+                break;
             }
             this.response
-              .speak (intent.answer)
+              .speak (answer)
               .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
             this.emit (':responseReady');
           };
@@ -89,7 +92,7 @@ module.exports = {
 
         //Handler for sending message
         handlers.SendMessageIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
 
@@ -182,7 +185,7 @@ 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');
@@ -190,7 +193,7 @@ module.exports = {
         };
 
         handlers.HelpIntent = function () {
-          if (this.attributes['LaunchRequestYesNo']){
+          if (this.attributes['LaunchRequestYesNo']) {
             this.attributes['LaunchRequestYesNo'] = false;
           }
           this.response
@@ -199,26 +202,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

@@ -13,6 +13,6 @@
     "nodejs-text-summarizer": "^2.0.3",
     "nodemailer": "^4.4.1",
     "request": "^2.83.0",
-    "rss-parser": "^3.1.1",
+    "rss-parser": "^3.1.1"
   }
 }

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,37 +232,46 @@ 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
 
-    for (let i=0;i<this.state.allIntents.length;i++){
+    for (let i = 0; i < this.state.allIntents.length; i++) {
-      if (i!==this.state.selectedIndex){
+      if (i !== this.state.selectedIndex) {
-        if (selectedIntent.intentName === this.state.allIntents[i].intentName){
+        if (selectedIntent.intentName === this.state.allIntents[i].intentName) {
-          Popup.alert('Question name already exists');
+          Popup.alert ('Question name already exists');
           return;
         }
 
-        for(let j=0;j<selectedIntent.questions.length;j++){
+        for (let j = 0; j < selectedIntent.questions.length; j++) {
-          for (let k=0;k<this.state.allIntents[i].questions.length;k++){
+          for (let k = 0; k < this.state.allIntents[i].questions.length; k++) {
-            if (selectedIntent.questions[j] === this.state.allIntents[i].questions[k]){
+            if (
-              Popup.alert('Question variant already exists (in question :' + this.state.allIntents[i].intentName + ')');
+              selectedIntent.questions[j] ===
+              this.state.allIntents[i].questions[k]
+            ) {
+              Popup.alert (
+                'Question variant already exists (in question :' +
+                  this.state.allIntents[i].intentName +
+                  ')'
+              );
               return;
             }
           }
@@ -268,13 +279,11 @@ class App extends Component {
       }
     }
 
-
-
     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 +299,7 @@ class App extends Component {
       resolveState = {
         allIntents: newAllIntents,
         selectedIntent: selectedIntent,
-        waiting:false,
+        waiting: false,
       };
     }
     this.setState ({waiting: true});
@@ -311,7 +320,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

@@ -1,57 +1,97 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
-import { Button, SelectionControlGroup } from 'react-md';
+import {Button, SelectionControlGroup} from 'react-md';
 import Modal from './modal/Modal';
+import {
+  ANSWER_TYPE
+} from '../config/constants';
 
 class AnswerSource extends Component {
-  constructor(props){
+  constructor (props) {
-    super(props);
+    super (props);
 
     this.state = {
-      isModalOpen: false
+      isModalOpen: false,
+      answerType: this.props.answerType
     };
   }
 
-  onOpen() {
+  onOpen () {
-    this.setState({
+    this.setState ({
-      isModalOpen: true
+      isModalOpen: true,
+      answerType: this.props.answerType
     });
   }
 
-  onClose() {
+  onClose () {
-    this.setState({
+    this.setState ({
-      isModalOpen: false
+      isModalOpen: false,
     });
   }
 
-  render() {
+  onSave(){
+    this.onClose();
+    this.props.onSaveHandle(this.state.answerType);
+  }
+
+  onSourceChange(value, event){
+    this.setState({answerType:parseInt(value)});
+  }
+
+  render () {
     let modal;
     if (this.state.isModalOpen) {
       modal = (
         <Modal
-          title="Predefined answers"
+          title="Answer type"
           actions={[
-            <Button flat swapTheming onClick={this.onClose.bind(this)} key="cancel">Cancel</Button>,
+            <Button
-            <Button flat primary swapTheming key="save">Save</Button>
+              flat
-          ]}>
+              swapTheming
+              onClick={this.onClose.bind (this)}
+              key="cancel"
+            >
+              Cancel
+            </Button>,
+            <Button 
+              flat 
+              primary 
+              swapTheming 
+              key="save"
+              onClick={this.onSave.bind(this)}
+            >
+              Save
+            </Button>,
+          ]}
+        >
           <SelectionControlGroup
             id="answer-source"
             name="answer-source"
             type="radio"
             label="Import answer from:"
-            controls={[{
+            onChange={this.onSourceChange.bind(this)}
-              label: 'RSS feed - latest',
+            controls={[
-              value: 'latest',
+              {
-            }]}>
+                label: 'Predefined answer',
-
+                value: '0'
-          </SelectionControlGroup>
+              },
+              {
+                label: 'WordPress titles',
+                value: '1',
+              },
+              {
+                label: 'RSS feed - latest',
+                value: '2',
+              },
+            ]}
+            defaultValue={String(this.state.answerType)}
+          />
         </Modal>
-        )
+      );
     }
     return (
       <div>
-        <Button flat primary swapTheming 
+        <Button flat primary swapTheming onClick={this.onOpen.bind (this)}>
-                onClick={this.onOpen.bind(this)}>
+          Answer type
-          Predefined answers
         </Button>
         {modal}
       </div>

web/src/components/IntentDetails.js

@@ -1,72 +1,43 @@
-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';
 
 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.handleAnswerEdit = this.handleAnswerEdit.bind (this);
-    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
+    this.handleAnswerSourceEdit = this.handleAnswerSourceEdit.bind (this);
-    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
+    this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
+    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
+      this
+    );
+    this.handleExternalSourceSave = this.handleExternalSourceSave.bind (this);
   }
 
-  componentWillReceiveProps(props){
+  componentWillReceiveProps (props) {
-    this.setState({intent: props.selectedIntent});
+    this.setState ({intent: props.selectedIntent});
   }
 
-  render() {
+  render () {
-    return (
+    let answerBox;
-      <div className="RightPanelBox">
+    switch (this.state.intent.answerType) {
-        <div className="QuestionBox">
+      case ANSWER_TYPE.PREDEFINED:
-        <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>
+        answerBox = (
-        <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} />
-          <br/>
-          <TextField
-            id="intent name"
-            lineDirection="center"
-            label="Question name"
-            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-            onChange={this.handleIntentNameEdit}
-            maxLength={INTENT_NAME_MAX_LENGTH}
-            value={this.state.intent.intentName} />
-        </div>
-        <AnswerSource />
-        <h5 className="QuestionTitle">Question variants</h5>
-        {
-          this.state.intent.questions.map((question, index)=>{
-            return (
-              <div key={index} className="QuestionBox">
-                <TextField
-                  id="intent question"
-                  lineDirection="center"
-                  placeholder="Question"
-                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-                  maxLength={QUESTION_MAX_LENGTH}
-                  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>}
-                  onChange={(e)=>{this.handleQuestionEdit(e,index)}}
-                  value={question}/>
-              </div>
-            );
-          })
-        }
-        <br></br>
-        {
           <div className="QuestionBox">
             <TextField
               id="intent answer"
@@ -76,60 +47,188 @@ class IntentDetails extends Component {
               maxLength={ANSWER_MAX_LENGTH}
               className="md-cell md-cell--bottom IntentDetailsInputBoxes"
               onChange={this.handleAnswerEdit}
-              value={this.state.intent.answer}/>
+              value={this.state.intent.answer}
+            />
           </div>
-        }
+        );
-        <br></br>
+        break;
-        <br></br>
+      case ANSWER_TYPE.EXTERNAL_SOURCE_WP_JSON:
-        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
+      case ANSWER_TYPE.EXTERNAL_SOURCE_RSS:
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>        
+        answerBox = (
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
+          <div className="QuestionBox">
+            <TextField
+              id="intent answer"
+              lineDirection="center"
+              label="Answer source"
+              placeholder="Answer source"
+              maxLength={ANSWER_MAX_LENGTH}
+              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+              onChange={this.handleAnswerSourceEdit}
+              value={this.state.intent.externalAnswerSource}
+            />
+          </div>
+        );
+        break;
+    }
+
+    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>
+          <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}
+          />
+          <br />
+          <TextField
+            id="intent name"
+            lineDirection="center"
+            label="Question name"
+            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onChange={this.handleIntentNameEdit}
+            maxLength={INTENT_NAME_MAX_LENGTH}
+            value={this.state.intent.intentName}
+          />
+        </div>
+        <h5 className="QuestionTitle">Question variants</h5>
+        {this.state.intent.questions.map ((question, index) => {
+          return (
+            <div key={index} className="QuestionBox">
+              <TextField
+                id="intent question"
+                lineDirection="center"
+                placeholder="Question"
+                className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                maxLength={QUESTION_MAX_LENGTH}
+                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>
+                }
+                onChange={e => {
+                  this.handleQuestionEdit (e, index);
+                }}
+                value={question}
+              />
+            </div>
+          );
+        })}
+        <Button
+          className="AddQuestionVariantButton"
+          icon
+          primary
+          onClick={this.addQuestion}
+          disabled={this.props.waiting}
+        >
+          add
+        </Button>
+        <AnswerSource
+          className="QuestionTypeButton"
+          onSaveHandle={this.handleExternalSourceSave}
+          answerType={this.state.intent.answerType}
+        />
+        {answerBox}
+        <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/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_JSON : 1,
+  EXTERNAL_SOURCE_RSS : 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%;
+}
+
+.QuestionTypeButton{
+    float: left;
+    margin-left: 30px;
 }