Processing Text Responses in SUSI Web Chat
SUSI Web Chat client now supports emojis, images, links and special characters. However, these aren’t declared as separate action types i.e the server doesn’t explicitly tell the client that the response contains any of the above features when it sends the JSON response. So the client must parse the text response from server and add support for each of the above mentioned features instead of rendering the plain text as is, to ensure good UX. SUSI Web Chat client parses the text responses to support : HTML Special Entities Images and GIFs URLs and Mail IDs Emojis and Symbols // Proccess the text for HTML Spl Chars, Images, Links and Emojis function processText(text){ if(text){ let htmlText = entities.decode(text); let imgText = imageParse(htmlText); let replacedText = parseAndReplace(imgText); return <Emojify>{replacedText}</Emojify>; }; return text; } Let us write sample skills to test these out. Visit http://dream.susi.ai/ and enter textprocessing. You can then see few sample queries and responses at http://dream.susi.ai/p/textprocessing. Lets visit SUSI WebChat and try it out. Query : dream textprocessing Response: dreaming enabled for textprocessing Query : text with special characters Response: ¶ Here are few “Special Characters”! All the special entities notations have been parsed and rendered accordingly! Sometimes we might need to use HTML special characters due to reasons like You need to escape HTML special characters like <, &, or ". Your keyboard does not support the required character. For example, many keyboards do not have em-dash or the copyright symbol. You might be wondering why the client needs to handle this separately as it is generally, automatically converted to relevant HTML character while rendering the HTML. SUSI Web Chat client uses reactjs which has JSX and not HTML. So JSX doesn’t support HTML special characters i.e they aren’t automatically converted to relevant characters while rendering. Hence, the client needs to handle this explicitly. We used the module, html-entities to decode all types of special HTML characters and entities. This module parses the text for HTML entities and replaces them with the relevant character for rendering when used to decode text. import {AllHtmlEntities} from 'html-entities'; const entities = new AllHtmlEntities(); let htmlText = entities.decode(text); Now that the HTML entities are processed, the client then processes the text for image links. Let us now look at how images and gifs are handled. Query : random gif Response: https://media1.giphy.com/media/AAKZ9onKpXog8/200.gif Sometimes, the text contains links for images or gifs and the user would be expecting a media type like image or gif instead of text. So we need to replace those image links with actual images to ensure good UX. This is handled using regular expressions to match image type urls and correspondingly replace them with html img tags so that the response is a image and not URL text. // Parse text for Image URLs function imageParse(stringWithLinks){ let replacePattern = new RegExp([ '((?:https?:\\/\\/)(?:[a-zA-Z]{1}', '(?:[\\w-]+\\.)+(?:[\\w]{2,5}))', '(?::[\\d]{1,5})?\\/(?:[^\\s/]+\\/)', '*(?:[^\\s]+\\.(?:jpe?g|gif|png))', '(?:\\?\\w+=\\w+(?:&\\w+=\\w+)*)?)' ].join(''),'gim'); let splits = stringWithLinks.split(replacePattern); let result = []; splits.forEach((item,key)=>{ let checkmatch = item.match(replacePattern); if(checkmatch){ result.push( <img key={key} src={checkmatch} style={{width:'95%',height:'auto'}} alt=''/>) } else{…
