A lot of interesting features were introduced in the SUSI.AI Skills CMS over the past few months but it lacked the functionality for users to be able to report skills which they find inappropriate or for any other reason. So an API was developed at the server to flag the skills as inappropriate and thus using this API endpoint an option was added at the skill page for each skill to mark the skill as inappropriate or report it. This data could be useful by admins to re-review the skills and see if something is wrong with it and it things seem out of place the skill can be removed or can be disabled.
About the API
An API is developed at the server so from the client we call this API to fetch data from the server and plug this data into the chart we wish to render.
Endpoint :
/cms/reportSkill.json?model={model}&group={group}&skill={skill}&feedback={feedback message}&access_token={access_token}
Parameters :
- Model
- Group
- Skill
- Language
- Feedback
- Access token (taken from the session of the logged in user)
Sample API call :
/cms/reportSkill.json?model=general&group=Knowledge&skill=Anime Suggestions&feedback=Not good&access_token=6O7cqoMbzlClxPwg1is31Tz5pjVwo3
Displaying option to report on skill page
The option to report skill should be available at the skill page for each skill so we add a field in the skill details section to the skill page component which will only be visible to the logged in users and on clicking over this field we display a dialog with a text field, the user can enter the message or the reason for reporting the skill and then clicking on the submit button when the user is done writing or click on the cancel button in case the user changes their mind to report the skill. Once the message is submitted we run a function by passing in the feedback message which in turn hits the corresponding endpoint and posts the data on the server.
Import some required components
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
Adding some variables to the component state which will help us decide when the report dialog is to be shown and the feedback message as the user types and some other relevant data.
this.state = {
...
skillTag: '',
showReportDialog: false,
feedbackMessage: ''
...
}
Display the report feature only when the user is logged in.
{
cookies.get('loggedIn') ? (
...
): ''
}
Adding some jsx to the component’s render function which includes a div in the skill details section and the Dialog component for the report message and confirmation and the dialog contains a text field to take report message and some actions which in our case is the send report action and the cancel report action.
<tr>
<td>Report: </td>
<td>
<div
style={{ color: '#108ee9', cursor: 'pointer' }}
onClick={this.handleReportToggle}
>
Flag as inappropriate
</div>
</td>
<Dialog
title="Flag as inappropriate"
actions={reportDialogActions}
modal={false}
open={this.state.showReportDialog}
onRequestClose={this.handleReportToggle}
>
<TextField
hintText="Leave a feedback message"
floatingLabelText="Feedback message"
multiLine
floatingLabelFocusStyle={{
color: 'rgb(66, 133, 244)',
}}
underlineFocusStyle={{
borderColor: 'rgb(66, 133, 244)',
}}
fullWidth
onChange={(event, val) =>
this.saveReportFeedback(val)
}
/>
</Dialog>
</tr>
Clicking the report as inappropriate will change the state variable which decides whether the dialog is to be shown or not.
handleReportToggle = () => {
this.setState({
showReportDialog: !this.state.showReportDialog,
});
};
Adding submit and cancel actions for the dialog menu and send them to the dialog as a prop.
const reportDialogActions = [
<FlatButton
label="Cancel"
key="cancel"
style={{ color: 'rgb(66, 133, 244)' }}
onClick={this.handleReportToggle}
/>,
<FlatButton
label="Submit"
key="submit"
style={{ color: 'rgb(66, 133, 244)' }}
onClick={this.handleReportSubmit}
/>,
];
Hitting the endpoint for report submit.
Adding onClick event handlers for dialog actions, for the cancel button we simply toggle the view of the report dialog and for the submit button we take the feedback message entered by the user in the text field and hit the endpoint for skill reporting and then we display a snackbar message about the status of report submit if it succeeded or failed.
Once the skill is submitted button is clicked we hit the report endpoint and post the feedback data and call the API through AJAX with appropriate params and thus this concludes the skill reporting workflow.
Build the URL for the AJAX request.
let reportUrl = `${urls.API_URL}/cms/reportSkill.json?model=${
this.state.skillModel
}&group=${this.state.skillGroup}&language=${
this.state.skillLanguage
}&skill=${this.state.skillTag}&feedback=${
this.state.feedbackMessage
}&access_token=${cookies.get('loggedIn')}`;
Make an AJAX request to the built API URL and in case the request is successful we set the conditional for displaying the snackbar to true and set the snackbar message depending on whether the skill was reported successfully or it failed.
$.ajax({
url: reportUrl,
dataType: 'jsonp',
jsonp: 'callback',
crossDomain: true,
success: function(data) {
self.handleReportToggle();
self.setState({
openSnack: true,
snackMessage: 'Skill has been reported successfully.',
});
},
error: function(e) {
self.handleReportToggle();
self.setState({
openSnack: true,
snackMessage: 'Failed to report the skill.',
});
},
});
This concludes the workflow of how the skill reporting feature was implemented on the CMS. I hope you found this useful.
Resources
