Author: rishiraj824

This author has written 16 articles
Read more about the article Implementing Internationalization with Weblate Integration on SUSI Web Chat

Implementing Internationalization with Weblate Integration on SUSI Web Chat

SUSI Web Chat supports different browser languages on the Chat UI. The content used to render the date/time formats and the text is translated to the preferred language based on the language selected in the Language Settings. To test it out on SUSI Web Chat,  Head over to http://chat.susi.ai Go to settings from the right dropdown. Set your preferred language inside Language Settings. Save and see the SUSI Chat render in the preferred language. To achieve Internationalization, a number of important steps are to be followed - The best approach to follow would be to use po/pot files and get the translated string from the files. The format of the files can be used as follows. This is a JSON Structure for Javascript Projects. (File : de.json) { "About":"About", "Chat":"Chat", "Skills":"Skills", "Settings":"Settings", "Login":"Login", "Logout":"Logout", "Themes": "Themes", }   2. After creating the valid po/pot files in the right formats, we create a component which shall translate our text in the selected language and will import that particular string from that po file. To make it easier in Javascript we are using the JSON files that we created here. 3. Our Translate.react.js component is a special component which shall return us only a <span> text which shall get the User’s preferred language from the store and import that particular po/pot file and match the key as text which is being passed to it and give us the translated text. The following code snippet explains the above sentences more precisely. changeLanguage = (text) => { this.setState({ text:text }) } // Here 'de' is the JSON file which we imported into this component componentDidMount() { let defaultPrefLanguage = this.state.defaultPrefLanguage; var arrDe = Object.keys(de); let text = this.state.text; if(defaultPrefLanguage!=='en-US'){ for (let key=0;key<arrDe.length;key++) { if (arrDe[key]===text) { this.changeLanguage(de[arrDe[key]]); } } } } render() { return <span>{this.state.text}</span> } 4. The next step is to bind all the text throughout our components into this <Translate text=” ”/> component which shall send us back the translated content. So any string in any component can be replaced with the following. <Translate text="About" /> Here the text “About” is being sent over to the Translate.react.js component and it is getting us the German translation of the string About from the file de.json. 5. We then render the Translated content in our Chat UI. (File: Translate.react.js)          About Weblate Weblate is a Web based translation tool with git integration supporting wide range of file formats and making it easy for translators to contribute. The translations should be kept within the same repository as source code and translation process should closely follow development. To know more about Weblate go to this link. Integrating SUSI Web Chat with Weblate First, we deploy Weblate on our localhost using the installation guide given in these docs. I used the pip installation guide for Weblate as mentioned in this link. After doing that we copy weblate/settings_example.py to weblate/settings.py. Then we configure settings.py and use the following command to migrate the settings. ./manage.py migrate Next step is to create…

Continue ReadingImplementing Internationalization with Weblate Integration on SUSI Web Chat
Read more about the article Auto Deployment of SUSI Web Chat on gh-pages with Travis-CI

Auto Deployment of SUSI Web Chat on gh-pages with Travis-CI

SUSI Web Chat uses Travis CI with a custom build script to deploy itself on gh-pages after every pull request is merged into the project. The build system auto updates the latest changes hosted on chat.susi.ai. In this blog, we will see how to automatically deploy the repository on gh pages. To proceed with auto deploy on gh-pages branch, We first need to setup Travis for the project. Register on https://travis-ci.org/ and turn on the Travis for this repository. Next, we add .travis.yml in the root directory of the project. # Set system config sudo: required dist: trusty language: node_js # Specifying node version node_js: - 6 # Running the test script for the project script: - npm test # Running the deploy script by specifying the location of the script, here ‘deploy.sh’ deploy: provider: script script: "./deploy.sh" # We proceed with the cache if there are no changes in the node_modules cache: directories: - node_modules branches: only: - master To find the code go to https://github.com/fossasia/chat.susi.ai/blob/master/.travis.yml The Travis configuration files will ensure that the project is building for every change made, using npm test command, in our case, it will only consider changes made on the master branch. If one wants to watch other branches one can add the respective branch name in travis configurations. After checking for build passing we need to automatically push the changes made for which we will use a bash script. #!/bin/bash SOURCE_BRANCH="master" TARGET_BRANCH="gh-pages" # Pull requests and commits to other branches shouldn't try to deploy. if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then echo "Skipping deploy; The request or commit is not on master" exit 0 fi # Save some useful information REPO=`git config remote.origin.url` SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:} SHA=`git rev-parse --verify HEAD` ENCRYPTED_KEY_VAR="encrypted_${ENCRYPTION_LABEL}_key" ENCRYPTED_IV_VAR="encrypted_${ENCRYPTION_LABEL}_iv" ENCRYPTED_KEY=${!ENCRYPTED_KEY_VAR} ENCRYPTED_IV=${!ENCRYPTED_IV_VAR} openssl aes-256-cbc -K $ENCRYPTED_KEY -iv $ENCRYPTED_IV -in deploy_key.enc -out ../deploy_key -d chmod 600 ../deploy_key eval `ssh-agent -s` ssh-add ../deploy_key # Cloning the repository to repo/ directory, # Creating gh-pages branch if it doesn't exists else moving to that branch git clone $REPO repo cd repo git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH cd .. # Setting up the username and email. git config user.name "Travis CI" git config user.email "$COMMIT_AUTHOR_EMAIL" # Cleaning up the old repo's gh-pages branch except CNAME file and 404.html find repo/* ! -name "CNAME" ! -name "404.html" -maxdepth 1 -exec rm -rf {} \; 2> /dev/null cd repo git add --all git commit -m "Travis CI Clean Deploy : ${SHA}" git checkout $SOURCE_BRANCH # Actual building and setup of current push or PR. npm install npm run build mv build ../build/ git checkout $TARGET_BRANCH rm -rf node_modules/ mv ../build/* . cp index.html 404.html # Staging the new build for commit; and then committing the latest build git add -A git commit --amend --no-edit --allow-empty # Deploying only if the build has changed if [ -z `git diff --name-only HEAD HEAD~1` ]; then echo "No Changes in the Build; exiting" exit 0 else # There are changes in the Build; push the…

Continue ReadingAuto Deployment of SUSI Web Chat on gh-pages with Travis-CI
Read more about the article Modifying SUSI Skills using SUSI Skill CMS

Modifying SUSI Skills using SUSI Skill CMS

SUSI Skill CMS is a complete solution right from creating a skill to modifying the skill. The skills in SUSI are well synced with the remote repository and can be completely modified using the Edit Skill feature of SUSI Skill CMS. Here’s how to Modify a Skill. Sign Up/Login to the website using your credentials in skills.susi.ai Choose the SKill which you want to edit and click on the pencil icon. The following screen allows editing the skill. One can change the Group, Language, Skill Name, Image and the content as well. After making the changes the commit message can be added to Save the changes. To achieve the above steps we require the following API Endpoints of the SUSI Server. http://api.susi.ai/cms/getSkillMetadata.json - This gives us the meta data which populates the various Skill Content, Image, Author etc. http://api.susi.ai/cms/getAllLanguages.json - This gives us all the languages of a Skill Group. http://api.susi.ai/cms/getGroups.json - This gives us all the list of Skill Groups whether Knowledge, Entertainment, Smalltalk etc. Now since we have all the APIs in place we make the following AJAX calls to update the Skill Process. Since we are detecting changes in all the fields (Group Value, Skill Name, Language Value, Image Value, Commit Message, Content changes and the format of the content), the AJAX call can only be sent when there is a change in the PR and there is no null or undefined value in them. For that, we make various form validations. They are as follows. We first detect whether the User is in a logged in state. 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' }} />, }); } We check whether the image uploaded matches the format of the Skill image to be stored which is ::image images/imageName.png if (!new RegExp(/images\/\w+\.\w+/g).test(this.state.imageUrl)) { notification.open({ message: 'Error Processing your Request', description: 'image must be in format of images/imageName.jpg', icon: <Icon type="close-circle" style={{ color: '#f44336' }} />, }); } We check if the commit message is not null and notify the user if he forgot to add a message. if (this.state.commitMessage === null) { notification.open({ message: 'Please make some changes to save the Skill', icon: <Icon type="close-circle" style={{ color: '#f44336' }} />, }); } We also check whether the old values of the skill are completely similar to the new ones, in this case, we do not send the request. if (toldValues===newValues { notification.open({ message: 'Please make some changes to save the Skill', icon: <Icon type="close-circle" style={{ color: '#f44336' }} />, }); } To check out the complete code, go to this link. Next, if the above validations are successful, we send a POST request to the server and show the notification to the user accordingly, whether the changes to the Skill Data have been updated or not. Here’s the AJAX call snippet. // create a form object let form = new FormData();        /* Append the following fields from…

Continue ReadingModifying SUSI Skills using SUSI Skill CMS
Read more about the article Enhanced Skill Tiles in SUSI Skill CMS

Enhanced Skill Tiles in SUSI Skill CMS

The SUSI Skill Wiki is a management system for all the SUSI Skills and the Skill display screen ought to look attractive. The earlier version of the Skill Display was just a display with the skill name populated as cards as shown in the image. So as we progressed over to add more metadata to the SUSI Skills, we had the challenge to show all details which were as follows - An example of a skill metadata format- "cricketTest": { "image": "images/images.jpg", "author_url": "skill.susi.ai", "examples": ["Testing Works"], "developer_privacy_policy": "na", "author": "cms", "skill_name": "cricket", "dynamic_content": true, "terms_of_use": "na", "descriptions": "testing", "skill_rating": null } To embed the Skill metadata in the Tiles the following steps are to be followed - We first use the end point at the SUSI Server, http://api.susi.ai/cms/getSkillList.json with the following attributes - model - The skill follows a general model or maybe a tutorial model group -The category or group of the skill. language - The language of the skill output. 2.  An AJAX request to this end point gives us the following response. { accepted: true, model: "general", group: "Knowledge", language: "en", skills: { capital: { image: "images/capital.png", author_url: "https://github.com/chashmeetsingh", examples: [ "capital of Bangladesh" ], developer_privacy_policy: null, author: "chashmeet singh", skill_name: "capital", dynamic_content: true, terms_of_use: null, descriptions: "a skill to tell user about capital of any country.", skill_rating: { negative: "0", positive: "1" } } We use the descriptions, skill_name, examples, image from the skill metadata to create our Skill Tile. The styles of the cards follow a CSS flexbox structure. A sample mock up of the Skill Card looks as follows. We first handle all the base cases and show “No name available”, “No description available” for data which does not exist or is found to be “null”. We then create the card mock-up in ReactJS which looks somewhat like this code snippet in the file BrowseSkill.js <Card style={styles.row} key={el}> <div style={styles.right} key={el}> {image ? <div style={styles.imageContainer}> <img alt={skill_name} src={image} style={styles.image}/> </div>: <CircleImage name={el} size="48"/>} <div style={styles.titleStyle}>"{examples}"</div> </div> <div style={styles.details}> <h3 style={styles.name}>{skill_name}</h3> <p style={styles.description}>{description}</p> </div> </Card> We then add the following styles to the Card and its contents which complete the look of the View. imageContainer:{ position: 'relative', height: '80px', width: '80px', verticalAlign: 'top' }, name:{ textAlign: 'left', fontSize: '15px', color: '#4285f4', margin: '4px 0' }, details:{ paddingLeft:'10px' }, image:{ maxWidth: '100%', border: 0 }, description:{ textAlign:'left', fontSize: '14px' }, row: { width: 280, minHeight:'200px', margin:"10px", overflow:'hidden', justifyContent: "center", fontSize: '10px', textAlign: 'center', display: 'inline-block', background: '#f2f2f2', borderRadius: '5px', backgroundColor: '#f4f6f6', border: '1px solid #eaeded', padding: '4px', alignSelf:'flex-start' }, titleStyle:{ textAlign: 'left', fontStyle: 'italic', fontSize: '16px', textOverflow: 'ellipsis', overflow: 'hidden', width: '138px', marginLeft: '15px', verticalAlign: 'middle', display: 'block' } To see the SUSI Skills or to contribute to it, please visit http://skills.susi.ai Resources Material UI - http://material-ui.com CSS Flexbox Guide - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Continue ReadingEnhanced Skill Tiles in SUSI Skill CMS
Read more about the article Storing SUSI Settings for Anonymous Users

Storing SUSI Settings for Anonymous Users

SUSI Web Chat is equipped with a number of settings by which it can be configured. For a user who is logged in and using the chat, he can change his settings and save them by sending it to the server. But for an anonymous user, this feature is not available while opening the chat every time, unless one stores the settings. Thus to overcome this problem we store the settings in the browser’s cookies which we do by following the steps. The current User Settings available are :- Theme - One can change the theme to either ‘dark’ or ‘light’. To have the option to send a message on enter. Enable mic to give voice input. Enable speech output only for speech input. To have speech output always ON. To select the default language. To adjust the speech output rate. To adjust the speech output pitch. The first step is to have a default state for all the settings which act as default settings for all users when opening the chat for the first time. We get these settings from the User preferences store available at the file UserPreferencesStore.js let _defaults = { Theme: 'light', Server: 'http://api.susi.ai', StandardServer: 'http://api.susi.ai', EnterAsSend: true, MicInput: true, SpeechOutput: true, SpeechOutputAlways: false, SpeechRate: 1, SpeechPitch: 1, }; We assign these default settings as the default constructor state of our component so that we populate them beforehand. 2. On changing the values of the various settings we update the state through various function handlers which are as follows- handleSelectChange - handles all the theme changes, handleEnterAsSend, handleMicInput - handles Mic Input as true, handleSpeechOutput - handles whether Speech Output should be enabled or not, handleSpeechOutputAlways - handles if user wants to listen to speech after every input, handleLanguage - handles the language settings related to speech, handleTextToSpeech - handles the Text to Speech Settings including Speech Rate, Pitch.         Once the values are changed we make use of the universal-cookie package and save the settings in the User’s browser. This is done in a function handleSubmit in the Settings.react.js file.          import Cookies from 'universal-cookie'; const cookies = new Cookies(); // Create cookie object. // set all values let vals = { theme: newTheme, server: newDefaultServer, enterAsSend: newEnterAsSend, micInput: newMicInput, speechOutput: newSpeechOutput, speechOutputAlways: newSpeechOutputAlways, rate: newSpeechRate, pitch: newSpeechPitch, } let settings = Object.assign({}, vals); settings.LocalStorage = true; // Store in cookies for anonymous user cookies.set('settings',settings); Once the values are set in the browser we load the new settings every time the user opens the SUSI Web Chat by having the following checks in the file API.actions.js. We get the values from the cookies using the get function if the person is not logged in and initialise the new settings for that user. if(cookies.get('loggedIn')===null|| cookies.get('loggedIn')===undefined){ // check if not logged in and get the value from the set cookie let settings = cookies.get('settings'); if(settings!==undefined){ // Check if the settings are set in the cookie SettingsActions.initialiseSettings(settings); } } else{ // call the AJAX for getting Settings for loggedIn users } Resources Package…

Continue ReadingStoring SUSI Settings for Anonymous Users
Read more about the article Handling Offline Message Responses in SUSI Web Chat

Handling Offline Message Responses in SUSI Web Chat

Previously, the SUSI Web Chat stopped working when there was no Internet connectivity. The application’s overall state was disturbed as one would see the loading message gif and the users were left to wonder on how to proceed. To handle this situation, we required notifying the User in the offline mode, with a message, that there is no Internet Connectivity. This following image demonstrates the previous state where the application hung. This image shows how this state was handled currently. One can test this out on http://chat.susi.ai by disconnecting and sending a message to SUSI and then connecting back to the Internet. To achieve this, one needed to handle the offline and online events of the browser. The following steps can be followed to achieve this. We make use of the following eventListener functions to know whether the user is connected to the Internet. // handles the Offlines event window.addEventListener('offline', handleOffline.bind(this)); // handles the Online event window.addEventListener('online', handleOnline.bind(this)); We then set a global offline message which is modified on the connections switching from online to an offline state. They are handled by the following functions. let offlineMessage = null; function handleOffline() { offlineMessage = 'Sorry, cannot answer that now. I have no net connectivity'; } function handleOnline() { offlineMessage = null; } We then handle the action createSUSIMessage() in API.actions.js and send the  AJAX request which we are making according to the offline/online state. This enables us to send the correct message response to the User even in the offline state and not letting the Application state crash. // So if the offlineMessage variable is not null we call the AJAX if(!offlineMessage){ // handle AJAX } else { // we create a message saying there is no Internet connectivity. }       The messages on refreshing back restore back to the original state as these are not being stored in the server. Hence the User is able to see the correct History, i.e., only those messages which were sent to the server and successfully responded to by SUSI. Resources Navigator Online API Documentation https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine Online and offline events by Mozilla

Continue ReadingHandling Offline Message Responses in SUSI Web Chat
Read more about the article Implementing Speech to Text for Chrome in SUSI Web Chat

Implementing Speech to Text for Chrome in SUSI Web Chat

SUSI Web Chat now replies to voice inputs. To achieve this, I made use of the Web Speech API. The voice input saves one from the pain of typing and it’s a much needed feature for the Web Chat and to maintain the similarity with the other SUSI Android and SUSI iOS clients. To test the feature out in SUSI Web Chat, click on the microphone icon beside the text area on chat.susi.ai. Say the message once the dialog appears, and you will see the message being sent to the Chat List rendered in text. Let’s achieve the same result following the steps below. First, initialize the class Voice Recognition with defaults for the Speech Recognition, for that we create a file VoiceRecognition.js We first initialize the Speech Recognition API with the window object. We warn the User with a console message if there is no Speech Recognition API available. If it's available call the recognition function using the following line this.recognition = this.createRecognition(SpeechRecognition) // Initialise the Speech recognition API const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition || window.oSpeechRecognition // Warn the user if not available otherwise call the createRecognition function if (SpeechRecognition != null) { this.recognition = this.createRecognition(SpeechRecognition) } else { console.warn('The current browser does not support the SpeechRecognition API.'); } } Then we write the createRecognition function We set our defaults first as “continuous  - true, interimResults - false, and language - ‘en-US’ ” We pass these options to the recognition object that we created in the above step and finally return the recognition object. createRecognition = (SpeechRecognition) => { const defaults = { continuous: true, interimResults: false, lang: 'en-US' } const options = Object.assign({}, defaults, this.props) let recognition = new SpeechRecognition() recognition.continuous = options.continuous recognition.interimResults = options.interimResults recognition.lang = options.lang return recognition } Initialize all the helper functions to be passed as props. start - This method starts the recognition and invokes the Mic of the browser. It also checks if the browser has the access to the user’s Mic. stop - Stop method closes the Mic and returns the audio captured so far. abort - Abort method stops the SpeechRecognition service. onspeechend - This method is called if there is any inactivity and there is no voice input. Hence, stops the recognition service. componentWillReceiveProps - This method waits for the stop method and calls it when it has received the stop object. componentWIllUnmount - This method is invoked just before the component is about to unmount and therefore its function is to abort the Speech Recognition Service render -  We return null as there is nothing to return in this component and all the converted text of the captured Speech will be sent to the parent element. start = () => { this.recognition.start() } stop = () => { this.recognition.stop() } abort = () => { this.recognition.abort() } onspeechend = () => { console.log('no sound detected'); this.recognition.stop() } componentWillReceiveProps ({ stop }) { if (stop) { this.stop() } } componentWillUnmount () { this.abort() } render () { return null…

Continue ReadingImplementing Speech to Text for Chrome in SUSI Web Chat
Read more about the article Implementing Text to Speech on SUSI Web Chat

Implementing Text to Speech on SUSI Web Chat

SUSI Web Chat now gives voice replies while chatting with it similar to SUSI Android and SUSI iOS clients. To test the Voice Output on Chrome, Visit chat.susi.ai Click on the Mic input button. Say something using the Mic when the Speak Now View appears The simplest way to add text-to-speech to your website is by using the official Speech API currently available for Chrome Browser. The following steps help to achieve it in ReactJS. Initialize state defaults in a component named, VoicePlayer. const defaults = { text: '', volume: 1, rate: 1, pitch: 1, lang: 'en-US' } There are two states which need to be maintained throughout the component and to be passed as such in our props which will maintain the state. Thus our state is simply this.state = { started: false, playing: false } Our next step is to make use of functions of the Web Speech API to carry out the relevant processes. speak() - window.speechSynthesis.speak(this.speech) - Calls the speak method of the Speech API cancel() - window.speechSynthesis.cancel() - Calls the cancel method of the Speech API We then use our component helper functions to assign eventListeners and listen to any changes occurring in the background. For this purpose we make use of the functions componentWillReceiveProps(), shouldComponentUpdate(), componentDidMount(), componentWillUnmount(), and render(). componentWillReceiveProps() - receives the object parameter {pause} to listen to any paused action shouldComponentUpdate() simply returns false if no updates are to be made in the speech outputs. componentDidMount() is the master function which listens to the action start, adds the eventListener start and end, and calls the speak() function if the prop play is true. componentWillUnmount() destroys the speech object and ends the speech. Here’s a code snippet for Function componentDidMount() - componentDidMount () { const events = [ { name: 'start', action: this.props.onStart } ] // Adding event listeners events.forEach(e => { this.speech.addEventListener(e.name, e.action) }) this.speech.addEventListener('end', () => { this.setState({ started: false }) this.props.onEnd() }) if (this.props.play) { this.speak() } } We then add proper props validation in the following way to our VoicePlayer component. VoicePlayer.propTypes = { play: PropTypes.bool, text: PropTypes.string, onStart: PropTypes.func, onEnd: PropTypes.func }; The next step is to pass the props from a listener view to the VoicePlayer component. Hence the listener here is the component MessageListItem.js from where the voice player is initialized. First step is to initialise the state. this.state = { play: false, } onStart = () => { this.setState({ play: true }); } onEnd = () => { this.setState({ play: false }); } Next, we set play to true when we want to pass the props and the text which is to be said and append it to the message lists which have voice set as `true` { this.props.message.voice && (<VoicePlayer play text={voiceOutput} onStart={this.onStart} onEnd={this.onEnd} />)} Finally, our message lists with voice true will be heard on the speaker as they have been spoken on the microphone. To get access to the full code, go to the repository https://github.com/fossasia/chat.susi.ai or on our chat channel at gitter.im/fossasia/susi_webchat Resources Speak-easy-synthesis repository http://mdn.github.io/web-speech-api/speak-easy-synthesis Web-speech-api repository https://github.com/mdn/web-speech-api/

Continue ReadingImplementing Text to Speech on SUSI Web Chat
Read more about the article Showing Offline and Online Status in SUSI Web Chat

Showing Offline and Online Status in SUSI Web Chat

A lot of times while chatting on SUSI Web Chat, one does not receive responses, this could either be due to no Internet connection or a down server. For a better user experience, the user needs to be notified whether he is connected to the SUSI Chat. If one ever loses out on the Internet connection, SUSI Web Chat will notify you what’s the status through a snack bar. Here are the steps to achieve the above:- The first step is to initialize the state of the Snackbar and the message. this.state = { snackopen: false, snackMessage: 'It seems you are offline!' } Next, we add eventListeners in the component which will bind to our browser’s window object. While this event can be added to any component in the App but we need it in the MessageSection particularly to show the snack bar. The window object listens to any online offline activity of the browser. In the file MessageSection.react.js, inside the function componentDidMount() We initialize window listeners in our constructor section and bind them to the function handleOnline and handleOffline to set states to the opening of the SnackBar. // handles the Offlines event window.addEventListener('offline', this.handleOffline.bind(this)); // handles the Online event window.addEventListener('online', this.handleOnline.bind(this)); We then create the handleOnline and handleOffline functions which sets our state to make the Snackbar open and close respectively. // handles the Offlines event window.addEventListener('offline', this.handleOffline.bind(this)); // handles the Online event window.addEventListener('online', this.handleOnline.bind(this)); Next, we create a Snackbar component using the material-ui snackbar component. The Snackbar is visible as soon as the the snackopen state is set to true with the message which is passed whether offline or online. <Snackbar autoHideDuration={4000} open={this.state.snackopen} message={this.state.snackMessage} /> To get access to the full code, go to the repository https://github.com/fossasia/chat.susi.ai Resources Material-ui Snack Bar Online and offline events Navigator Online API Documentation https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine

Continue ReadingShowing Offline and Online Status in SUSI Web Chat
Read more about the article Using react-slick for Populating RSS Feeds in SUSI Chat

Using react-slick for Populating RSS Feeds in SUSI Chat

To populate SUSI RSS Feed generated, while chatting on SUSI Web Chat, I needed a Horizontal Swipeable Tile Slider. For this purpose, I made use of the package react-slick. The information which was supposed to be handled as obtained from the SUSI Server to populate the RSS feed was Title Description Link Hence to show all of this information like a horizontal scrollable feed, tiles by react-slick solves the purpose. To achieve the same, let’s see follow the steps below. First step is to install the react-slick package into our project folder, for that we use npm install react-slick --save Next we import the Slider component from react-slick package into the file where we want the slider, here MessageListItem.react.js import Slider from 'react-slick' Add Slider with settings as given in the docs. This is totally customisable. For more customisable options go to https://github.com/akiran/react-slick var settings = { speed: 500, slidesToShow: 3, slidesToScroll: 1, swipeToSlide:true, swipe:true, arrows:false }; speed - The Slider will scroll horizontally with this speed. slidesToShow - The number of slides to populate in one visible screen swipeToSlide, swipe - Enable swiping on touch screen devices. arrows - Put false, to disable arrows The next step is to initialize the Slider component inside the render function and populate it with the tiles. The full code snippet is available at MessageListItem.react.js <Slider {..settings}>//Append the settings which you created {yourListToProps} // Add the list tiles you want to see </Slider> Adding a little bit of styling, full code available in ChatApp.css .slick-slide{ margin: 0 10px; } .slick-list{ max-height: 100px; } This is the output you would get in your screen. Note - To prevent errors like the following on testing with jest, you will have to add the following lines into the code. Error log, which one may encounter while using react-slick - matchMedia not present, legacy browsers require a polyfill at Object.MediaQueryDispatch (node_modules/enquire.js/dist/enquire.js:226:19) at node_modules/enquire.js/dist/enquire.js:291:9 at i (node_modules/enquire.js/dist/enquire.js:11:20) at Object.<anonymous> (node_modules/enquire.js/dist/enquire.js:21:2) at Object.<anonymous> (node_modules/react-responsive-mixin/index.js:2:28) at Object.<anonymous> (node_modules/react-slick/lib/slider.js:19:29) at Object.<anonymous> (node_modules/react-slick/lib/index.js:3:18) at Object.<anonymous> (src/components/Testimonials.jsx:3:45) at Object.<anonymous> (src/pages/Index.jsx:7:47) at Object.<anonymous> (src/App.jsx:8:40) at Object.<anonymous> (src/App.test.jsx:3:38) at process._tickCallback (internal/process/next_tick.js:103:7) In package.json, add the following lines- "peerDependencies": { "react": "^0.14.0 || ^15.0.1", "react-dom": "^0.14.0 || ^15.0.1" }, "jest": { "setupFiles": ["./src/setupTests.js", "./src/node_modules/react-scripts/config/polyfills.js"] }, In src/setupTests.js, add the following lines. window.matchMedia = window.matchMedia || (() => { return { matches: false, addListener: () => {}, removeListener: () => {}, }; }); These lines will help resolve any occurring errors while testing with Jest or ESLint. To have a look at the full project, visit https://github.com/fossasia/chat.susi.ai and feel free to contribute. To test the project visit http://chat.susi.ai Resources NPM Package - React-slick Official Examples - http://neostack.com/opensource/react-slick  

Continue ReadingUsing react-slick for Populating RSS Feeds in SUSI Chat