feat(web): added support for markdown render of text

Author: slvnperron

channels/botpress-channel-web/README.md

@@ -1,8 +1,9 @@
 # Botpress Webchat
 
 This channel is a customizable web chat that can be:
-- **Embedded** on any website
-- Used as a **Standalone** full-screen chat
+
+* **Embedded** on any website
+* Used as a **Standalone** full-screen chat
 
 ## Installation
 
@@ -24,14 +25,20 @@ yarn add @botpress/channel-web
     {
       on: 'webchat',
       typing: true,
-      text: data.text
+      text: data.text,
+      markdown: true
     }
 ]
 ```
+
 #### `typing` (optional)
 
 Can be `true` to use natural typing speed (based on characters length) or can also be a natural time string (parsed by [`ms module`](https://www.npmjs.com/package/ms)).
 
+#### `markdown` (optional)
+
+Can be `true` to render the text as markdown format. This allows you to include links, bold and italic text.
+
 #### `web-style` (optional)
 
 `web-style` (optional) will pass the arguments as [DOM style](https://www.w3schools.com/jsref/dom_obj_style.asp) properties. This allows you to customize how specific messages look.
@@ -53,8 +60,8 @@ Array of string, with the `<PAYLOAD> Text` format.
 ```js
 quick_replies: data.choices.map(choice => `<${choice.payload}> ${choice.text}`)
 ```
-</details>
 
+</details>
 
 <details>
     <summary><b>Form</b> (documentation for Botpress X coming soon)</summary>
@@ -84,16 +91,17 @@ welcome:
 ```
 
 It's look's like a usually web form. After submitted, you can handle this event with botpress.hear method. For example:
+
 ```js
-bp.hear({ type: 'form', formId: "survey" }, (event, next) => {
-    // Your code
-});
+bp.hear({ type: 'form', formId: 'survey' }, (event, next) => {
+  // Your code
+})
 ```
 
-You can always catch formId in the hear function, because Id is not an option in the form element. You  choose a value to go with your id keys.
+You can always catch formId in the hear function, because Id is not an option in the form element. You choose a value to go with your id keys.
 
 ```yaml
-welcome: 
+welcome:
   - text: "Welcome"
     typing: 250ms
     form:
@@ -104,7 +112,7 @@ welcome:
 
 
 form-email:
-  - text: Provide me your email 
+  - text: Provide me your email
     form:
       title: Email
       id: email
@@ -113,7 +121,6 @@ form-email:
 #
 ```
 
-
 in your `bp.hear` function
 
 ```js
@@ -136,6 +143,7 @@ Has a same attributes like `input`, but has no `subtype` attribute
 Has a same attributes like `textarea`, but has no `maxlength` and `minlength` attributes, and has `options` attribute, which contain an option elements.
 
 Example:
+
 ```yaml
 - select:
     label: Select one item
@@ -158,10 +166,8 @@ Example:
 
 </details>
 
-
 <details>
     <summary><b>Carousel</b></summary>
-    
 
 #### `elements` (required)
 
@@ -196,22 +202,22 @@ Settings to pass the [`react-slick`](https://github.com/akiran/react-slick) comp
 In your `index.js` file, add this:
 
 ```js
-  const config = {
-    botName: '<<REPLACE>>',
-    botAvatarUrl: '<<REPLACE BY URL>>',
-    botConvoTitle: '<<REPLACE>>',
-    botConvoDescription: "<<REPLACE>>",
-    backgroundColor: '#ffffff',
-    textColorOnBackground: '#666666',
-    foregroundColor: '#000000',
-    textColorOnForeground: '#ffffff'
-  }
-
-  bp.createShortlink('chat', '/lite', {
-    m: 'channel-web',
-    v: 'fullscreen',
-    options: JSON.stringify({ config: config })
-  })
+const config = {
+  botName: '<<REPLACE>>',
+  botAvatarUrl: '<<REPLACE BY URL>>',
+  botConvoTitle: '<<REPLACE>>',
+  botConvoDescription: '<<REPLACE>>',
+  backgroundColor: '#ffffff',
+  textColorOnBackground: '#666666',
+  foregroundColor: '#000000',
+  textColorOnForeground: '#ffffff'
+}
+
+bp.createShortlink('chat', '/lite', {
+  m: 'channel-web',
+  v: 'fullscreen',
+  options: JSON.stringify({ config: config })
+})
 ```
 
 **Now your bot is available at the following url: `<BOT_URL>/s/chat`, e.g. `http://localhost:3000/s/chat`.**
@@ -228,19 +234,20 @@ To embedded the web interface to a website, you simply need to add this script a
 ```
 
 ## Customize the look and feel
+
 You can customize look and feel of the web chat by passing additional keys to `init` method like this:
 
 ```javascript
 window.botpressWebChat.init({
   host: '<host>',
-  botName: 'Bot',                     // Name of your bot
-  botAvatarUrl: null,                 // Default avatar url of the image (e.g. 'https://avatars3.githubusercontent.com/u/1315508?v=4&s=400' )
+  botName: 'Bot', // Name of your bot
+  botAvatarUrl: null, // Default avatar url of the image (e.g. 'https://avatars3.githubusercontent.com/u/1315508?v=4&s=400' )
   botConvoTitle: 'Technical Support', // Title of the first conversation with the bot
   botConvoDescription: '',
-  backgroundColor: '#ffffff',         // Color of the background 
-  textColorOnBackground: '#666666',   // Color of the text on the background
-  foregroundColor: '#0176ff',         // Element background color (header, composer, button..)
-  textColorOnForeground: '#ffffff'    // Element text color (header, composer, button..)
+  backgroundColor: '#ffffff', // Color of the background
+  textColorOnBackground: '#666666', // Color of the text on the background
+  foregroundColor: '#0176ff', // Element background color (header, composer, button..)
+  textColorOnForeground: '#ffffff' // Element text color (header, composer, button..)
 })
 ```
 

channels/botpress-channel-web/package.json

@@ -60,6 +60,7 @@
     "react-spinkit": "^3.0.0",
     "sass-loader": "^6.0.6",
     "slick-carousel": "^1.8.1",
+    "snarkdown": "^1.2.2",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",
     "webpack-node-externals": "^1.6.0"

channels/botpress-channel-web/src/umm.js

@@ -220,7 +220,7 @@ function processOutgoing({ event, blocName, instruction }) {
   // PRE-PROCESSING
   ////////
 
-  const optionsList = ['typing', 'quick_replies', 'file', 'form', 'elements', 'web-style', 'settings']
+  const optionsList = ['typing', 'quick_replies', 'file', 'form', 'elements', 'web-style', 'settings', 'markdown']
 
   const options = _.pick(instruction, optionsList)
 

channels/botpress-channel-web/src/views/web/messages/index.jsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import format from 'date-fns/format'
 import differenceInMinutes from 'date-fns/difference_in_minutes'
 import Linkify from 'react-linkify'
+import snarkdown from 'snarkdown'
 
 import BotAvatar from '../bot_avatar'
 import QuickReplies from './quick_replies'
@@ -208,12 +209,23 @@ class Message extends Component {
     return this.props.data.message_raw && this.props.data.message_raw['web-style']
   }
 
+  getMarkdownElement() {
+    let html = snarkdown(this.props.data.message_text)
+    html = html.replace(/<a href/gi, `<a target="_blank" href`)
+
+    return <div dangerouslySetInnerHTML={{ __html: html }} />
+  }
+
   render_text() {
+    const element =
+      this.props.data.message_raw && this.props.data.message_raw.markdown ? (
+        this.getMarkdownElement()
+      ) : (
+        <p style={this.getAddStyle()}>{this.props.data.message_text}</p>
+      )
     return (
       <Linkify properties={{ target: '_blank' }}>
-        <div>
-          <p style={this.getAddStyle()}>{this.props.data.message_text}</p>
-        </div>
+        <div>{element}</div>
       </Linkify>
     )
   }

channels/botpress-channel-web/yarn.lock

@@ -5042,6 +5042,10 @@ slick-carousel@^1.6.0, slick-carousel@^1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
 
+snarkdown@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/snarkdown/-/snarkdown-1.2.2.tgz#0cfe2f3012b804de120fc0c9f7791e869c59cc74"
+
 sntp@1.x.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"