Adding report skills feature in SUSI iOS

SUSI.AI is having a various type of Skills that improving the user experience. Skills are powering the SUSI.AI personal chat assistant. SUSI skills have a nice feedback system. We have three different feedback way for SUSI skills, 5-star rating system, posting feedback, and reporting skills. 5-Star Rating - rate skills from 1 (lowest) to 5 (highest) star Posting Feedback - user can post feedback about particular skill Report Skill - user can report skill if he/she found it inappropriate In this post, we will see how reporting skills feature work in SUSI iOS and how it is implemented. You can learn about 5-star rating here and posting feedback feature here. Adding report skill button - let reportSkillButton: UIButton = { let button = UIButton(type: .system) button.contentHorizontalAlignment = .left button.setTitle("Report Skill", for: .normal) button.setTitleColor(UIColor.iOSGray(), for: .normal) button.titleLabel?.font = UIFont.systemFont(ofSize: 16) button.translatesAutoresizingMaskIntoConstraints = false return button }() In above, we have set translatesAutoresizingMaskIntoConstraints property for false. By default, the property is set to true for any view you programmatically create. If you add views in Interface Builder, the system automatically sets this property to false. If this property’s value is true, the system creates a set of constraints that duplicate the behavior specified by the view’s autoresizing mask. Setting up report skill button - We are setting constraints programmatically as we created button programmatically and set translatesAutoresizingMaskIntoConstraints to false. Also, setting a target to the button. if let delegate = UIApplication.shared.delegate as? AppDelegate, let _ = delegate.currentUser { view.addSubview(reportSkillButton) reportSkillButton.widthAnchor.constraint(equalToConstant: 140).isActive = true reportSkillButton.heightAnchor.constraint(equalToConstant: 32).isActive = true reportSkillButton.leftAnchor.constraint(equalTo: contentType.leftAnchor).isActive = true reportSkillButton.topAnchor.constraint(equalTo: contentType.bottomAnchor, constant: 8).isActive = true reportSkillButton.addTarget(self, action: #selector(reportSkillAction), for: .touchUpInside) } In the above method, we can see that we are only showing button if user is logged-in. Only a logged-in user can report the skill. To check if user is logged in or not, we are using the AppDelegate shared instance where we save the logged-in user globally when the user signs in. When user clicks the Report Skill button, a popup is open up with a text field for feedback message like below: This is how UI look like! When user clicks the Report action after typing feedback message, we are using the following endpoint: https://api.susi.ai/cms/reportSkill.json With the following parameters - ModelGroupSkillLanguageAccess TokenFeedback Here is how we are handling the API call within our app - func reportSkill(feedbackMessage: String) { if let delegate = UIApplication.shared.delegate as? AppDelegate, let user = delegate.currentUser { let params = [ Client.SkillListing.model: skill?.model as AnyObject, Client.SkillListing.group: skill?.group as AnyObject, Client.SkillListing.skill: skill?.skillKeyName as AnyObject, Client.SkillListing.language: Locale.current.languageCode as AnyObject, Client.SkillListing.accessToken: user.accessToken as AnyObject, Client.SkillListing.feedback: feedbackMessage as AnyObject ] Client.sharedInstance.reportSkill(params) { (success, error) in DispatchQueue.main.async { if success { self.view.makeToast("Skill reported successfully") } else if let error = error { self.view.makeToast(error) } } } } } On successfully reported skill, we show a toast with ‘Skill reported successfully’ message and if there is error reporting the skills, we present the toast with error as a message. Resources - SUSI Skills: https://skills.susi.ai/Apple’s documentations on translatesAutoresizingMaskIntoConstraintsAllowing user to…

Continue ReadingAdding report skills feature in SUSI iOS

Adding a feature to delete skills from skill page for admins

SUSI Skill CMS has evolved drastically over the past few months with not only the introduction of skill metrics, skill analytics and powerful sorting features and interactive skill view types we needed the SUSI admins to be able to delete skills directly from the skills page and hence the skill can be deleted without visiting the admin service and then locating the skill and deleting it. This feature can be useful when a skill live on the system needs to be removed instantaneously for any reason like the API used by the skill going down or if it is a redundant skill or anything else. This feature was much needed for the admins and thus it was implemented. 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/deleteSkill.json?access_token={access_token}&model={model}&group={group}&language={language}&skill={skill}   Parameters : Model Group Skill Language Feedback Access token (taken from the session of the logged in user) Sample API call : /cms/deleteSkill.json?access_token=ANecfA1GjP4Bkgv4PwjL0OAW4kODzW&model=general&group=Knowledge&language=en&skill=whois Displaying a button with delete icon on skill page The option to delete skill should be available at the skill page for each skill so we add a button with a delete icon for this in the group of edit skills and skill version buttons, clicking over this button will open up a confirmation dialog with two actions notable the delete/confirm button which deletes the skills and the cancel button which can be useful in case the user changes their mind. On clicking the delete button the request to delete the skill is sent to the server and thus the skill is deleted. Import some required components import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import Cookies from 'universal-cookie'; import $ from 'jquery';   Adding some variables to the component state which will help us decide when the delete skill dialog is to be shown. this.state = { ... showDeleteDialog: false, ... }   Display the delete skill button only when the user is logged in user has admin rights. { cookies.get(showAdmin) ? ( ... ): '' }   Adding some JSX to the component’s render function which includes a div in the skill page section and the Dialog component for the delete skill and some actions which in our case is the the confirmation to delete skill and to cancel the skill deletion in case the user changes their mind. Also a tooltip is shown which appears on hovering over the delete skill button. <div className="skillDeleteBtn"> <FloatingActionButton onClick={this.handleDeleteToggle} data-tip="Delete Skill" backgroundColor={colors.header} > <DeleteBtn /> </FloatingActionButton> <ReactTooltip effect="solid" place="bottom" /> <Dialog title="Delete Skill" actions={deleteDialogActions} modal={false} open={this.state.showDeleteDialog} onRequestClose={this.handleDeleteToggle} > <div> Are you sure about deleting{' '} <span style={{ fontWeight: 'bold' }}> {this.state.skill_name} </span>? </div> </Dialog> </div>   Clicking the delete skill button will change the state variable which decides whether the dialog is to be shown or not. handleDeleteToggle = () => { this.setState({ showDeleteDialog: !this.state.showDeleteDialog, }); };   Adding submit and…

Continue ReadingAdding a feature to delete skills from skill page for admins

Adding a feature to report skills in the CMS

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) =>…

Continue ReadingAdding a feature to report skills in the CMS