SUSI responses can contain links or email ids. Whenever we want to access those links or send a mail to those email ids, it is very inconvenient for the user to manually copy the link and check out the contents, which is a very bad UX.
I used a module called ‘react-linkify’ to address this issue.
‘React-linkify’ is a React component to parse links (urls, emails, etc.) in text into clickable links.
Usage:
<Linkify>{text to linkify}</Linkify>
Any link that appears inside the linkify component will be hyperlinked and is made clickable. It uses regular expressions and pattern matching to detect URLs and mail ids and are made clickable such that clicking on URLs opens the link in a new window and clicking a mail id opens “mailto:” .
Code:
export const parseAndReplace = (text) => {return <Linkify properties={{target:"_blank"}}>{text}</Linkify>;}
Lets visit SUSI WebChat and try it out.
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.