fix(webchat): convert plain URLs to links in markdown messages (#607)

* fix(webchat): convert plain URLs to links in markdown messages * don't use fuzzy linkification * lint
botpress · Jul 6, 2023 · d341cf8 · d341cf8
1 parent 7e593f3
commit d341cf8
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 12 deletions.
diff --git a/Tiltfile b/Tiltfile
@@ -7,7 +7,7 @@ config.set_enabled_resources([
 
 webchat_port = 3543
 inject_port = 8080
-messaging_port = 3100
+messaging_port = 3101
 
 local_resource(
   name="messaging",
@@ -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",
+  serve_cmd="yarn serve", 
   labels=["service"],
   resource_deps=["messaging"],
+  serve_env={
+    'MESSAGING_ENDPOINT': 'http://localhost:%s' % messaging_port,
+  }
 )
diff --git a/packages/components/src/renderer/dropdown.tsx b/packages/components/src/renderer/dropdown.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import Select from 'react-select'
 import Creatable from 'react-select/creatable'
 import { MessageTypeHandlerProps } from '../typings'
-import { renderUnsafeHTML } from '../utils'
+import { markdownToHtml } from '../utils'
 import { Prepend } from './keyboard'
 
 export const Dropdown = ({
@@ -79,7 +79,7 @@ export const Dropdown = ({
   const shouldDisplay = config.isLastGroup && config.isLastOfGroup
   let text: JSX.Element
   if (markdown) {
-    const html = renderUnsafeHTML(message, config.escapeHTML)
+    const html = markdownToHtml(message, config.escapeHTML)
     text = <div dangerouslySetInnerHTML={{ __html: html }} />
   } else {
     text = <p>{message}</p>

diff --git a/packages/components/src/renderer/text.tsx b/packages/components/src/renderer/text.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import ReactTextFormat from 'react-text-format'
 import { MessageTypeHandlerProps } from '../typings'
-import { renderUnsafeHTML } from '../utils'
+import { markdownToHtml } from '../utils'
 
 export const Text: React.FC<MessageTypeHandlerProps<'text'>> = ({ text, markdown, config }) => {
   const { escapeHTML } = config
 
   let message: React.ReactNode
   if (markdown) {
-    const html = renderUnsafeHTML(text, escapeHTML)
+    const html = markdownToHtml(text, escapeHTML)
     message = <div dangerouslySetInnerHTML={{ __html: html }} />
   } else {
     message = <p>{text}</p>

diff --git a/packages/components/src/utils.ts b/packages/components/src/utils.ts
@@ -1,13 +1,17 @@
+import MarkdownIt from 'markdown-it'
 import { createIntl } from 'react-intl'
-import snarkdown from 'snarkdown'
 import { MessageConfig } from './typings'
 
-export const renderUnsafeHTML = (message: string = '', escaped: boolean): string => {
+export const markdownToHtml = (message: string = '', escaped: boolean): string => {
   if (escaped) {
     message = message.replace(/</g, '&lt;').replace(/>/g, '&gt;')
   }
 
-  const html = snarkdown(message)
+  const md = new MarkdownIt({ linkify: true })
+  md.linkify.set({
+    fuzzyLink: false // Only convert valid URLs to links.
+  })
+  const html = md.render(message)
   return html.replace(/<a href/gi, '<a target="_blank" href')
 }
 

diff --git a/packages/webchat/package.json b/packages/webchat/package.json
@@ -20,6 +20,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.178",
+    "@types/markdown-it": "^12.2.3",
     "@types/mime": "^2.0.3",
     "@types/node": "^16.11.13",
     "@types/react": "^17.0.38",
@@ -40,6 +41,7 @@
     "date-fns": "^1.30.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
     "mime": "^3.0.0",
     "mobx": "5.15.7",
     "mobx-react": "^6.2.1",

diff --git a/yarn.lock b/yarn.lock
@@ -2575,6 +2575,7 @@ __metadata:
     "@types/crypto-js": ^4.1.1
     "@types/js-cookie": ^3.0.1
     "@types/lodash": ^4.14.178
+    "@types/markdown-it": ^12.2.3
     "@types/mime": ^2.0.3
     "@types/node": ^16.11.13
     "@types/react": ^17.0.38
@@ -2586,6 +2587,7 @@ __metadata:
     date-fns: ^1.30.1
     js-cookie: ^3.0.1
     lodash: ^4.17.21
+    markdown-it: ^13.0.1
     mime: ^3.0.0
     mobx: 5.15.7
     mobx-react: ^6.2.1
@@ -7173,6 +7175,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/linkify-it@npm:*":
+  version: 3.0.2
+  resolution: "@types/linkify-it@npm:3.0.2"
+  checksum: dff8f10fafb885422474e456596f12d518ec4cdd6c33cca7a08e7c86b912d301ed91cf5a7613e148c45a12600dc9ab3d85ad16d5b48dc1aaeda151a68f16b536
+  languageName: node
+  linkType: hard
+
 "@types/lodash.isfunction@npm:^3.0.6":
   version: 3.0.6
   resolution: "@types/lodash.isfunction@npm:3.0.6"
@@ -7223,6 +7232,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/markdown-it@npm:^12.2.3":
+  version: 12.2.3
+  resolution: "@types/markdown-it@npm:12.2.3"
+  dependencies:
+    "@types/linkify-it": "*"
+    "@types/mdurl": "*"
+  checksum: 868824a3e4d00718ba9cd4762cf16694762a670860f4b402e6e9f952b6841a2027488bdc55d05c2b960bf5078df21a9d041270af7e8949514645fe88fdb722ac
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -7232,6 +7251,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdurl@npm:*":
+  version: 1.0.2
+  resolution: "@types/mdurl@npm:1.0.2"
+  checksum: 79c7e523b377f53cf1f5a240fe23d0c6cae856667692bd21bf1d064eafe5ccc40ae39a2aa0a9a51e8c94d1307228c8f6b121e847124591a9a828c3baf65e86e2
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:^1":
   version: 1.3.2
   resolution: "@types/mime@npm:1.3.2"
@@ -12301,7 +12327,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^3.0.1":
+"entities@npm:^3.0.1, entities@npm:~3.0.1":
   version: 3.0.1
   resolution: "entities@npm:3.0.1"
   checksum: aaf7f12033f0939be91f5161593f853f2da55866db55ccbf72f45430b8977e2b79dbd58c53d0fdd2d00bd7d313b75b0968d09f038df88e308aa97e39f9456572
@@ -17403,6 +17429,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkify-it@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "linkify-it@npm:4.0.1"
+  dependencies:
+    uc.micro: ^1.0.1
+  checksum: 3e0a29921269c14eb7ac6f5db2da68d4854ea9acca6e9014a323f75f2dd39b197ffab57c1fbd6a906ceb021aad3ee6d7ba7d0181236dd9630ffc452b392f7f71
+  languageName: node
+  linkType: hard
+
 "listr2@npm:^3.8.3":
   version: 3.14.0
   resolution: "listr2@npm:3.14.0"
@@ -17904,6 +17939,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-it@npm:^13.0.1":
+  version: 13.0.1
+  resolution: "markdown-it@npm:13.0.1"
+  dependencies:
+    argparse: ^2.0.1
+    entities: ~3.0.1
+    linkify-it: ^4.0.1
+    mdurl: ^1.0.1
+    uc.micro: ^1.0.5
+  bin:
+    markdown-it: bin/markdown-it.js
+  checksum: faf5891d389dc433bcf21d3fbff2009beb044b42b117c92f4848899780ca1a2282a209e3ff4672db4afed726a7248304ec473e6e242a7d6498af7113d31974e7
+  languageName: node
+  linkType: hard
+
 "markdown-to-jsx@npm:^7.1.3":
   version: 7.1.5
   resolution: "markdown-to-jsx@npm:7.1.5"
@@ -17979,7 +18029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdurl@npm:^1.0.0":
+"mdurl@npm:^1.0.0, mdurl@npm:^1.0.1":
   version: 1.0.1
   resolution: "mdurl@npm:1.0.1"
   checksum: 71731ecba943926bfbf9f9b51e28b5945f9411c4eda80894221b47cc105afa43ba2da820732b436f0798fd3edbbffcd1fc1415843c41a87fea08a41cc1e3d02b
@@ -25059,7 +25109,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uc.micro@npm:^1.0.1":
+"uc.micro@npm:^1.0.1, uc.micro@npm:^1.0.5":
   version: 1.0.6
   resolution: "uc.micro@npm:1.0.6"
   checksum: 6898bb556319a38e9cf175e3628689347bd26fec15fc6b29fa38e0045af63075ff3fea4cf1fdba9db46c9f0cbf07f2348cd8844889dd31ebd288c29fe0d27e7a