fix(webchat): convert plain URLs to links in markdown messages #607
Conversation
CLS-951 [webchat] Hyperlinks not working in webchat
Hyperlinks are working in the emulator, but not in the webchat deployed on my personal website (see screenshots below) These are both text cards :-) same chatbot, haven't made changes since publishing + deploying |
| @@ -7,7 +7,7 @@ config.set_enabled_resources([ | |||
|
|
|||
| webchat_port = 3543 | |||
| inject_port = 8080 | |||
| messaging_port = 3100 | |||
| messaging_port = 3101 | |||
There was a problem hiding this comment.
note: This is so messaging in this Tilt setup doesn't clash with messaging in Skynet by default, so it's easier to have this running alongside Skynet.
| @@ -37,7 +37,11 @@ local_resource( | |||
| local_resource( | |||
| name="webchat", | |||
| serve_dir="packages/inject", | |||
| serve_cmd="yarn serve", | |||
| cmd="mkdir -p dist && yarn copy:shareable", | |||
There was a problem hiding this comment.
note: This fixes the webchat UI not being styled locally when serving from Tilt.
| @@ -1,13 +1,15 @@ | |||
| import { createIntl } from 'react-intl' | |||
| import snarkdown from 'snarkdown' | |||
There was a problem hiding this comment.
note: snarkdown is quite outdated, so we're replacing it with MarkdownIt which supports converting plain URLs to links.
| if (escaped) { | ||
| message = message.replace(/</g, '<').replace(/>/g, '>') | ||
| } | ||
|
|
||
| const html = snarkdown(message) | ||
| const md = new MarkdownIt({ linkify: true }) |
There was a problem hiding this comment.
note: The bug was that the webchat integration sends text messages with markdown: true always (by design, so that people can freely use markdown in the Studio), so to fix the issue we need to convert plain URLs in markdown to actual links.
No description provided.