feat(web-channel): markdown on cards

modules/builtin/src/content-types/card.js

@@ -1,7 +1,8 @@
+const base = require('./_base')
 const ActionButton = require('./action_button')
 const utils = require('./_utils')
 
-module.exports = {
+const Card = {
   id: 'builtin_card',
   group: 'Built-in Messages',
   title: 'card',
@@ -29,7 +30,8 @@ module.exports = {
         type: 'array',
         title: 'module.builtin.actionButton',
         items: ActionButton.jsonSchema
-      }
+      },
+      ...base.useMarkdown
     }
   },
 
@@ -40,3 +42,7 @@ module.exports = {
     return utils.extractPayload('card', data)
   }
 }
+
+Card.jsonSchema.properties.markdown.default = false
+
+module.exports = Card

modules/channel-web/package.json

@@ -47,6 +47,7 @@
     "multer": "^1.4.2",
     "multer-s3": "^2.9.0",
     "query-string": "^5.0.1",
+    "react-children-utilities": "^2.8.0",
     "react-ga": "^2.7.0",
     "react-intl": "^2.8.0",
     "react-linkify": "^0.2.2",

modules/channel-web/src/views/lite/components/messages/Message.tsx

@@ -53,7 +53,15 @@ class Message extends Component<MessageProps> {
   }
 
   render_carousel() {
-    return <Carousel onSendData={this.props.onSendData} carousel={this.props.payload} />
+    return (
+      <Carousel
+        onSendData={this.props.onSendData}
+        carousel={this.props.payload}
+        escapeHTML={this.props.store.escapeHTML}
+        isBotMessage={this.props.isBotMessage}
+        intl={this.props.intl}
+      />
+    )
   }
 
   render_typing() {

modules/channel-web/src/views/lite/components/messages/renderer/Carousel.tsx

@@ -5,6 +5,7 @@ import Slider from 'react-slick'
 import '../../../../../../assets/slick/slick-theme.css'
 import '../../../../../../assets/slick/slick.css'
 import { Renderer } from '../../../typings'
+import { ProcessedText } from '../../../utils'
 
 const CarouselSkeleton = () => {
   const common = { width: '100%', borderRadius: 5, padding: 10 }
@@ -55,7 +56,14 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
     return (
       <Slider {...settings}>
         {elements.map((el, idx) => (
-          <Card element={el} key={idx} onSendData={this.props.onSendData} />
+          <Card
+            element={el}
+            key={idx}
+            onSendData={this.props.onSendData}
+            escapeHTML={this.props.escapeHTML}
+            isBotMessage={this.props.isBotMessage}
+            intl={this.props.intl}
+          />
         ))}
       </Slider>
     )
@@ -71,15 +79,39 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
 }
 
 export const Card = props => {
-  const { picture, title, subtitle, buttons } = props.element as Renderer.Card
+  const { picture, title, subtitle, buttons, markdown } = props.element as Renderer.Card
+  const { escapeHTML, intl } = props
 
   return (
     <div className={'bpw-card-container'}>
       {picture && <div className={'bpw-card-picture'} style={{ backgroundImage: `url("${picture}")` }} />}
       <div>
         <div className={'bpw-card-header'}>
-          <div className={'bpw-card-title'}>{title}</div>
-          {subtitle && <div className={'bpw-card-subtitle'}>{subtitle}</div>}
+          <ProcessedText
+            wrapperProps={{
+              className: 'bpw-card-title',
+              tag: 'div'
+            }}
+            isBotMessage={props.isBotMessage}
+            markdown={markdown}
+            escapeHTML={escapeHTML}
+          >
+            {title}
+          </ProcessedText>
+          {subtitle && (
+            <ProcessedText
+              wrapperProps={{
+                className: 'bpw-card-subtitle',
+                tag: 'div'
+              }}
+              isBotMessage={props.isBotMessage}
+              markdown={markdown}
+              escapeHTML={escapeHTML}
+              intl={props.intl}
+            >
+              {subtitle}
+            </ProcessedText>
+          )}
         </div>
         <div className={'bpw-card-buttons'}>
           {buttons.map((btn: Renderer.CardButton) => {
@@ -134,6 +166,9 @@ interface ICarouselProps {
   carousel: Renderer.Carousel
   onSendData: any
   style?: object
+  escapeHTML: boolean
+  isBotMessage: boolean
+  intl: any
 }
 
 interface ICarouselState {

modules/channel-web/src/views/lite/components/messages/renderer/Text.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import Linkify from 'react-linkify'
 
 import { Renderer } from '../../../typings'
-import { renderUnsafeHTML, isRTLText } from '../../../utils'
+import { isRTLText, ProcessedText } from '../../../utils'
 
 /**
  * A simple text element with optional markdown
@@ -22,26 +22,22 @@ export const Text = (props: Renderer.Text) => {
     hasShowMore = true
   }
 
-  const truncateIfRequired = message => {
-    return hasShowMore && !showMore ? truncate(message, maxLength) : message
-  }
-
-  let message
-  if (markdown) {
-    const isUserMessage = !props.isBotMessage
-    const shouldEscapeHTML = isUserMessage || escapeHTML
-    const html = renderUnsafeHTML(text, shouldEscapeHTML)
-
-    message = <div dangerouslySetInnerHTML={{ __html: truncateIfRequired(html) }} />
-  } else {
-    message = <p>{truncateIfRequired(text)}</p>
-  }
-
   const rtl = isRTLText.test(text)
 
   return (
     <Linkify properties={{ target: '_blank' }}>
-      <div className={classNames({ rtl })}>{message}</div>
+      <div className={classNames({ rtl })}>
+        <ProcessedText
+          isBotMessage={props.isBotMessage}
+          intl={intl}
+          maxLength={maxLength}
+          escapeHTML={escapeHTML}
+          markdown={markdown}
+          showMore={showMore}
+        >
+          {text}
+        </ProcessedText>
+      </div>
 
       {hasShowMore && (
         <button type="button" onClick={e => setShowMore(!showMore)} className="bpw-message-read-more">

modules/channel-web/src/views/lite/typings.d.ts

@@ -142,6 +142,7 @@ export namespace Renderer {
     title: string
     subtitle: string
     buttons: CardButton[]
+    markdown: boolean
   }
 
   export interface CardButton {

modules/channel-web/src/views/lite/utils.tsx

@@ -1,3 +1,6 @@
+import truncate from 'html-truncate'
+import React from 'react'
+import Children from 'react-children-utilities'
 import ReactGA from 'react-ga'
 import snarkdown from 'snarkdown'
 
@@ -150,3 +153,53 @@ export const isRTLText = new RegExp(
     ].join('') +
     ']'
 )
+
+export const ProcessedText = (props: {
+  markdown?: boolean
+  escapeHTML?: boolean
+  isBotMessage: boolean
+  maxLength?: number
+  intl?: any
+  showMore?: boolean
+  wrapperProps?: any & { tag: string }
+  children?: string
+}) => {
+  let message
+  let hasShowMore
+  let WrapperTag
+
+  const {
+    markdown = false,
+    escapeHTML = false,
+    isBotMessage = false,
+    maxLength,
+    intl = false,
+    showMore = false,
+    wrapperProps = {},
+    children
+  } = props
+  const { tag, ...rest } = wrapperProps
+
+  const text = Children.onlyText(children)
+
+  if (intl && maxLength && text.length > maxLength) {
+    hasShowMore = true
+  }
+
+  const truncateIfRequired = message => {
+    return hasShowMore && !showMore ? truncate(message, maxLength) : message
+  }
+
+  if (markdown) {
+    const isUserMessage = !isBotMessage
+    const shouldEscapeHTML = isUserMessage || escapeHTML
+    const html = renderUnsafeHTML(text, shouldEscapeHTML)
+    WrapperTag = tag || 'div'
+    message = <WrapperTag {...rest} dangerouslySetInnerHTML={{ __html: truncateIfRequired(html) }} />
+  } else {
+    WrapperTag = tag || 'p'
+    message = <WrapperTag {...rest}>{truncateIfRequired(text)}</WrapperTag>
+  }
+
+  return message
+}

modules/channel-web/yarn.lock

@@ -1184,6 +1184,11 @@ raf@^3.4.0:
   dependencies:
     performance-now "^2.1.0"
 
+react-children-utilities@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/react-children-utilities/-/react-children-utilities-2.8.0.tgz#ab6866249bcf1729fe463128de5e15074f43caaa"
+  integrity sha512-g42oRsZLrFJgCcIdK1lad1CWujNH4gh1Cp1lsMQpHWdDjWQ8gUlaBebgy2iXofyPEpfJ4T/xt4qWrvDkgVCCNg==
+
 react-ga@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.7.0.tgz#24328f157f31e8cffbf4de74a3396536679d8d7c"

packages/bp/src/sdk/botpress.d.ts

@@ -1566,6 +1566,7 @@ declare module 'botpress/sdk' {
     subtitle?: string | MultiLangText
     image?: string
     actions: ActionButton[]
+    markdown?: boolean
   }
 
   export interface LocationContent extends Content {

packages/ui-shared-lite/Payloads/index.ts

@@ -180,7 +180,8 @@ const renderCarouselPayload = (content: sdk.CarouselContent & CollectFeedback) =
         } else {
           throw new Error(`Webchat carousel does not support "${a.action}" action-buttons at the moment`)
         }
-      })
+      }),
+      markdown: card.markdown
     }))
   }
 }