Merge from master

.pipeline/config.yml

@@ -2,8 +2,8 @@ general:
   gitSshKeyCredentialsId: 'SSH_github'
   scanType: 'npm'
   verbose: true
-  whitesourceProductName: 'SHC - SAP RECAST CONVERSAT OD 2.0 1911'
-  whitesourceProductToken: '892b9b8c9a4440e2beb92a46498e9c258a36e21cfaaa41f28230f3abde0ef20c'
+  whitesourceProductName: 'SHC - SAP RECAST CONVERSAT OD 2.0 2001'
+  whitesourceProductToken: 'eec7a161e0bc4d908549740cc950e95ab19d5175761140e1bb61a0bf0b4786f3'
   whitesourceUserTokenCredentialsId: 'Whitesource_UserKey'
 steps:
   setVersion:

Jenkinsfile

@@ -60,6 +60,8 @@ pipeline {
                             executeDocker(dockerImage: 'docker.wdf.sap.corp:50001/com.sap.cai/node-dev:8.12.0-alpine-build-7') {
                                 withEnv(["NPM_CONFIG_PREFIX=${env.WORKSPACE}/.npm-global"]) {
                                     sh "npm i -g npm-audit-html"
+                                    //Should be removed when the 'uglifyjs-webpack-plugin' is updated with safer version of 'serialize-javascript' dependency
+                                    sh "npx npm-force-resolutions"
                                     sh "npm audit --json >> npm-audit.json"
                                 }
                             }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-cai-webchat",
-  "version": "1.4.13",
+  "version": "1.4.16",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -83,5 +83,8 @@
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.41.2",
     "webpack-dev-server": "^3.9.0"
+  },
+  "resolutions": {
+    "serialize-javascript": "^2.1.2"
   }
 }

src/components/Button/index.js

@@ -10,14 +10,25 @@ const Button = ({ button, sendMessage }) => {
   const { value, title } = button
   // Increase Button length to 80 characters per SAPMLCONV-3486
   const formattedTitle = truncate(title, 80)
+  const tooltip = title && title.length > 80 ? title : null
 
   if (button.type === 'web_url' && sanitizeUrl(value) === 'about:blank') {
     return null
   }
 
   let content = null
 
+  // https://sapjira.wdf.sap.corp/browse/SAPMLCONV-4781 - Support the pnonenumber options
+  const telHref = value && value.indexOf('tel:') === 0 ? value : `tel:${value}`
   switch (button.type) {
+  case 'phonenumber':
+    content = (
+      <a
+        className='RecastAppButton-Link CaiAppButton-Link' href={telHref}>
+        {formattedTitle}
+      </a>
+    )
+    break
   case 'web_url':
     content = (
       <a
@@ -30,6 +41,7 @@ const Button = ({ button, sendMessage }) => {
   default:
     content = (
       <div
+        title={tooltip}
         className='RecastAppButton CaiAppButton'
         onClick={() => sendMessage({ type: 'button', content: button }, title)}
       >

src/components/Message/Card.js

@@ -12,7 +12,8 @@ const Card = ({ content, sendMessage, onImageLoaded }) => {
   if (imageUrl && sanitizeUrl(imageUrl) === 'about:blank') {
     return null
   }
-
+  // https://sapjira.wdf.sap.corp/browse/SAPMLCONV-6296
+  // Need to check if buttons is null before rendering the button html.
   return (
     <div className={'RecastAppCard CaiAppCard'}>
       {imageUrl && <img src={imageUrl} onLoad={onImageLoaded} className='RecastAppCard--img CaiAppCard--img' />}
@@ -22,7 +23,7 @@ const Card = ({ content, sendMessage, onImageLoaded }) => {
         {subtitle && <p className='Card--text-subtitle'>{truncate(subtitle, 80)}</p>}
       </div>
 
-      {buttons.length ? (
+      {buttons && buttons.length ? (
         <div className='RecastAppCard--button-container CaiAppCard--button-container'>
           {buttons.slice(0, 3).map((b, i) => (
             <Button key={i} button={b} sendMessage={sendMessage} />

src/components/Message/List.js

@@ -13,6 +13,40 @@ const ListElement = ({ title, subtitle, imageUrl, buttons, sendMessage }) => {
   const buttonTitleMaxLength = 20
 
   const button = propOr(null, 0, buttons)
+  if (!button) {
+    return null
+  }
+
+  // https://sapjira.wdf.sap.corp/browse/SAPMLCONV-4781 - Support the pnonenumber options
+  const formattedTitle = truncate(button.title, buttonTitleMaxLength)
+  const telHref = button.value && button.value.indexOf('tel:') === 0 ? button.value : `tel:${button.value}`
+  let content = null
+
+  switch (button.type) {
+  case 'phonenumber':
+    content = (
+      <a
+        className='RecastAppListElement--button CaiAppListElement--button' href={telHref}>
+        {formattedTitle}
+      </a>
+    )
+    break
+  case 'web_url':
+    if (sanitizeUrl(button.value) !== 'about:blank') {
+      content = (
+        <a
+          className='RecastAppListElement--button CaiAppListElement--button' href={button.value} target='_blank'
+          rel='noopener noreferrer'>
+          {formattedTitle}
+        </a>
+      )
+    } else {
+      content = 'about:blank'
+    }
+    break
+  default:
+    break
+  }
 
   return (
     <div className='RecastAppListElement CaiAppListElement'>
@@ -26,17 +60,9 @@ const ListElement = ({ title, subtitle, imageUrl, buttons, sendMessage }) => {
         <p className='RecastAppListElement--subtitle CaiAppListElement--subtitle'>{truncate(subtitle, subTitleMaxLength)}</p>
 
         {button
-          && (button.type === 'web_url' ? (
-            sanitizeUrl(button.value) !== 'about:blank' && (
-              <a
-                href={button.value}
-                className='RecastAppListElement--button CaiAppListElement--button'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {truncate(button.title, buttonTitleMaxLength)}
-              </a>
-            )
+          && (content ? (content !== 'about:blank' && (
+            content
+          )
           ) : (
             <div
               className='RecastAppListElement--button CaiAppListElement--button'

src/components/Message/QuickReplies.js

@@ -75,6 +75,7 @@ class QuickReplies extends Component {
                   ref={ref => {
                     this.buttons[i] = ref
                   }}
+                  title={b.title.length > 20 ? b.title : null}
                   className='RecastAppQuickReplies--button CaiAppQuickReplies--button'
                   onClick={() => this.doSendMessage({ type: 'quickReply', content: b })}
                   style={{

src/components/Message/Text.js

@@ -46,7 +46,16 @@ const Text = ({ content, style, isMarkdown }) => {
     respond = ''
   }
 
-  const compiledResponse = sanitizeHtml(truncate(respond, 640), {
+  let maxLengthLimit = 640
+  // JIRA: https://sapjira.wdf.sap.corp/browse/SAPMLCONV-4904
+  if (isMarkdown) {
+    // Remove markdown tags and replace [Link Name Text](http:url...) with 'Link Name Text' only.
+    const displayText = respond.replace(/__|\*|#|(?:\[([^\]]*)\]\([^)]*\))/gm, '$1')
+    // Increase the max length limit to include any markdown (links) strings, to avoid losing the href strings.
+    maxLengthLimit += Math.max(respond.length - displayText.length, 0)
+  }
+
+  const compiledResponse = sanitizeHtml(truncate(respond, maxLengthLimit), {
     allowedTags: ['b', 'i', 'em', 'strong', 'a'],
   })
     .replace(/&/g, 'g')