Skill Editor in SUSI Skill CMS
SUSI Skill CMS is a web application built on ReactJS framework for creating and editing SUSI skills easily. It follows an API centric approach where the SUSI Server acts as an API server. In this blogpost we will see how to add a component which can be used to create a new skill SUSI Skill CMS.
For creating any skill in SUSI we need four parameters i.e model, group, language, skill name. So we need to ask these 4 parameters from the user. For input purposes we have a common card component which has dropdowns for selecting models, groups and languages, and a text field for skill name input.
<SelectField floatingLabelText="Model" value={this.state.modelValue} onChange={this.handleModelChange} > {models} </SelectField> <SelectField floatingLabelText="Group" value={this.state.groupValue} onChange={this.handleGroupChange} > {groups} </SelectField> <SelectField floatingLabelText="Language" value={this.state.languageValue} onChange={this.handleLanguageChange} > {languages} </SelectField> <TextField floatingLabelText="Enter Skill name" floatingLabelFixed={true} hintText="My SUSI Skill" onChange={this.handleExpertChange} /> <RaisedButton label="Save" backgroundColor="#4285f4" labelColor="#fff" style={{marginLeft:10}} onTouchTap={this.saveClick} />
This is the card component where we get the user input. We have API endpoints on SUSI Server for getting the list of models, groups and languages. Using those APIs we inflate the dropdowns.
Then the user needs to edit the skill. For editing of skills we have used Ace Editor. Ace is an codeeditor written in pure javascript. It matches the features native editors like Sublime and TextMate.
To use Ace we need to install the component.
npm install react-ace --save
This command will install the dependency and update the package.json file in our project with this dependency.
To use this editor we need to import AceEditor and place it in the render function of our react class.
<AceEditor mode=" markup" theme={this.state.editorTheme} width="100%" fontSize={this.state.fontSizeCode} height= "400px" value={this.state.code} name="skill_code_editor" onChange={this.onChange} editorProps={{$blockScrolling: true}} />
Now we have a page that looks something like this
Now we need to handle the click event when a user clicks on the save button.
First we check if the user is logged in or not. For this we check if we have the required cookies and the access token of the user.
if(!cookies.get('loggedIn')) { notification.open({ message: 'Not logged In', description: 'Please login and then try to create/edit a skill', icon: <Icon type="close-circle" style={{ color: '#f44336' }} />, }); return 0; }
If the user is not logged in then we show him a error notification and asks him to login.
Then we check if he has filled all the required fields like name of the skill etc. and after that we call an API Endpoint on SUSI Server that will finally store the skill in the skill_data_repo.
let url= “http://api.susi.ai/cms/modifySkill.json” $.ajax({ url:url, dataType: 'jsonp', jsonp: 'callback', crossDomain: true, success: function (data) { console.log(data); if(data.accepted===true){ notification.open({ message: 'Accepted', description: 'Your Skill has been uploaded to the server', icon: <Icon type="check-circle" style={{ color: '#00C853' }} />, }); } } });
In the success function of ajax call we check if accepted parameter is true from the server or not. If accepted is true then we show user a notification with a message that “Your Skill has been uploaded to the server”.
To see this component running please visit http://skills.susi.ai/skillEditor.
Resources
Material-UI: http://www.material-ui.com/
Ace Editor: https://github.com/securingsincity/react-ace
Ajax: http://api.jquery.com/jquery.ajax/
Universal Cookies: https://www.npmjs.com/package/universal-cookie