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{ result.push(item); } }); return result; }
The text is split using the regular expression and every matched part is replaced with the corresponding image using the img tag with source as the URL contained in the text.
The client then parses URLs and Mail IDs.
Query: search internet
Response: Internet The global system of interconnected computer networks that use the Internet protocol suite to… https://duckduckgo.com/Internet
The link has been parsed from the response text and has been successfully hyperlinked. Clicking the links opens the respective url in a new window.
We used react-linkify module to parse links and email IDs. The module parses the text and hyperlinks all kinds of URLs and Mail IDs.
import Linkify from 'react-linkify'; export const parseAndReplace = (text) => {return <Linkify properties={{target:"_blank"}}>{text}</Linkify>;}
Finally, let us see, how emojis are parsed.
Query : dream textprocessing
Response: dreaming enabled for textprocessing
Query : susi, do you use emojis?
Response: Ofcourse ^__^ 😎 What about you!? 😉 😛
All the notations for emojis have been parsed and rendered as emojis instead of text!
We used react-emojine module to emojify the text.
import Emojify from 'react-emojione'; <Emojify>{text}</Emojify>;
This is how text is processed to support special characters, images, links and emojis, ensuring a rich user experience. You can find the complete code at SUSI WebChat.
You must be logged in to post a comment.