The SUSI skill CMS is an editor to write and edit skill easily. It follows an API-centric approach where the SUSI server acts as API server and a web front-end  act as the client for the API and provides the user interface. A skill is a set of intents. One text file represents one skill, it may contain several intents which all belong together. All the skills are stored in SUSI Skill Data repository and the schema is Models -> Groups -> Languages -> Skill -> Intents. Using this, one can access any skill based on four tuples parameters model, group, language, skill.

A skill format looks like following,

::name <Skill_name>
::author <author_name>
::author_url <author_url>
::description <description> 
::dynamic_content <Yes/No>
::developer_privacy_policy <link>
::image <image_url>
::terms_of_use <link>

#Intent
User query1 query2 quer3....
!example:<The question that should be shown in public skill displays>
!expect:<The answer expected for the above example>
Answer for the user query

Susi Skill class in Susi Server provides parser methods for sets of intents, given as text files.  It reads the skill line by line. The SusiMind class process this JSON and stores the metadata in a map of skill path and data, which provides the API endpoint for getting the skill the metadata .    http://api.susi.ai/cms/getSkillMetadata.json?model=general&group=Knowledge&language=en&skill=cars. It takes four parameters, model, group, language, and skill. The endpoint returns null value if the skill metadata field is not present in the skill. The following is the response for model=general, group=Knowledge, language =en and skill =cars.

"skill_metadata": {
    "model": "general",
    "group": "Knowledge",
    "language": "en",
    "developer_privacy_policy": null,
    "descriptions": "A skill to tell user about cars made by a car manufacturer",
    "image": "images/cars.png",
    "author": "Uday Theja",
    "author_url": "https://github.com/uday96",
    "skill_name": "Cars",
    "terms_of_use": null,
    "dynamic_content": true,
    "examples": [
      "Know any car models manufactured by ford",
      "Know any car models manufactured by ford in the year 2016",
      "Know any car models manufactured in 2016 by ford"
    ]
  },

Image is the path to image of the skill, stored in skill data repository and dynamic content represents if the skill’s response changes based on the user inputs.
To make the required API call we first need the value of 4 parameters. We will get these as props from browse skill route.

<Link key={el}
   to={{
        pathname: '/skillPage',
state: { url: url, element: el, name: el, modelValue: self.state.modelValue, groupValue:self.state.groupValue,        languageValue:self.state.languageValue}
                             }}>

Using these props we will append the base url with all the four parameters.

 let baseUrl = 'http://api.susi.ai/cms/getSkillMetadata.json';
 url = baseUrl + '?model=' + modelValue + '&group=' + groupValue + '&language=' + languageValue + '&skill=' + name;

Next we will make a ajax call and get the data updated.

 $.ajax({
                url: url,
                jsonpCallback: 'pc',
                dataType: 'jsonp',
                jsonp: 'callback',
                crossDomain: true,
                success: function (data) {
                    self.updateData(data.skill_metadata)
                }
            });

To display data on Skill CMS we will use Material UI components. Before rendering we will check the each state if it is null , we will display the default values for it.

{this.state.imgUrl === undefined?
                            <CircleImage name={this.state.skill_name.toUpperCase()} size="250"/>:
                            <img className="avatar-img" alt="Thumbnail" src={this.state.imgUrl}/>

If the image is not present in the skill, we display the placeholder showing the name of the skill.

Otherwise, the image stored in skill_data repository is shown.

Similarly, we will display the other components using material-ui. Next, we add an edit button for editing the skill.

To make edit button we use floating action button. We link the button to skillEditor route and pass the  URL and skillname as props.

  <Link to={{
           pathname: '/skillEditor',
           state: { url: urlCode, name:name, }
   }}>

SkillEditor components uses getSkill.json endpoint and using these props make the ajax call to the endpoint like: http://api.susi.ai/cms/getSkill.json?model=general&group=Entertainment&language=en&skill=<skill_name>.

This is how skill Page is implemented in Susi skill CMS, To add more skills or modify the existing ones visit skills.susi.ai. For more information and complete code take a look at Susi server and Susi_Skill_cms and join gitter chat channel for discussions.

Resources

• Read more about Servlets – https://www.tutorialspoint.com/servlets/
• The source code –https://github.com/fossasia/susi_skill_cms/tree/master/src/components/SkillPage
• Read about servlet interface – https://www.javatpoint.com/Servlet-interface
• Read merits of Material UI- https://thenextweb.com/dd/2015/11/10/what-are-the-real-merits-of-material-design/#.tnw_hnWuEF06