Merge pull request #78 from SAPConversationalAI/mergeToOpenSource

Merge to open source

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webchat",
-  "version": "1.4.37",
+  "version": "1.4.38",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/components/Input/index.js

@@ -8,6 +8,7 @@ import { safeArrayOfItem } from 'helpers'
 import Menu from 'components/Menu'
 import MenuSVG from 'components/svgs/menu'
 import './style.scss'
+import { pathOr } from 'ramda'
 
 // Number of minimum char to display the char limit.
 const NUMBER_BEFORE_LIMIT = 5
@@ -106,7 +107,8 @@ class Input extends Component {
   }
   sendMenuSelection = (action) => {
     if (action) {
-      this.props.onSubmit(action)
+      const title = pathOr(null, ['content', 'title'], action)
+      this.props.onSubmit(action, title)
     }
   }
   sendMessage = () => {
@@ -115,7 +117,7 @@ class Input extends Component {
       this.props.onSubmit({
         type: 'text',
         content,
-      })
+      }, content.title)
       this.setState(prevState => {
         const historyValues = append(content, prevState.historyValues)
         const previousValues = append('', historyValues)

src/components/Message/QuickReplies.js

@@ -10,6 +10,7 @@ import { truncate, safeArrayOfItem, validButtonContent } from 'helpers'
 
 import Text from './Text'
 import { PrevArrow, NextArrow } from 'components/arrows'
+import { pathOr } from 'ramda'
 
 class QuickReplies extends Component {
   state = {
@@ -46,8 +47,9 @@ class QuickReplies extends Component {
     // then one button click has already been send.
     if (!this._messageHasAlreadyBeenSent) {
       this._messageHasAlreadyBeenSent = true
+      const title = pathOr(null, ['content', 'title'], message)
       this.setState({ displayQuickReplies: false }, () => {
-        this.props.sendMessage(message)
+        this.props.sendMessage(message, title)
       })
     }
   }

src/components/Message/index.js

@@ -12,6 +12,13 @@ import Picture from './Picture'
 import Carousel from './Carousel'
 import QuickReplies from './QuickReplies'
 
+// Replace cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css with ours to avoid
+// conflicts in other slick.scss
+import './styleMin.scss'
+
+// Replace cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css with ours to avoid
+// conflicts in other slick.scss
+import './styleThemeMin.scss'
 import './style.scss'
 
 class Message extends Component {

src/components/Message/styleMin.scss

@@ -0,0 +1,98 @@
+.CaiAppCarousel,
+.CaiAppQuickReplies {
+    .slick-list,.slick-slider,.slick-track {
+        position: relative;
+        display: block;
+    }
+
+    .slick-loading .slick-slide,.slick-loading .slick-track {
+        visibility: hidden;
+    }
+
+    .slick-slider {
+        box-sizing: border-box;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        -webkit-touch-callout: none;
+        -khtml-user-select: none;
+        -ms-touch-action: pan-y;
+        touch-action: pan-y;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .slick-list {
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+    }
+
+    .slick-list:focus {
+        outline: 0;
+    }
+
+    .slick-list.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+
+    .slick-slider .slick-list,.slick-slider .slick-track {
+        -webkit-transform: translate3d(0,0,0);
+        -moz-transform: translate3d(0,0,0);
+        -ms-transform: translate3d(0,0,0);
+        -o-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0);
+    }
+
+    .slick-track {
+        top: 0;
+        left: 0;
+    }
+
+    .slick-track:after,.slick-track:before {
+        display: table;
+        content: '';
+    }
+
+    .slick-track:after {
+        clear: both;
+    }
+
+    .slick-slide {
+        display: none;
+        float: left;
+        height: 100%;
+        min-height: 1px;
+    }
+
+    [dir=rtl] .slick-slide {
+        float: right;
+    }
+
+    .slick-slide img {
+        display: block;
+    }
+
+    .slick-slide.slick-loading img {
+        display: none;
+    }
+
+    .slick-slide.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized .slick-slide {
+        display: block;
+    }
+
+    .slick-vertical .slick-slide {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+
+    .slick-arrow.slick-hidden {
+        display: none;
+    }
+}

src/components/Message/styleThemeMin.scss

@@ -0,0 +1,143 @@
+.CaiAppCarousel,
+.CaiAppQuickReplies {
+    .slick-dots,.slick-next,.slick-prev {
+        position: absolute;
+        display: block;
+        padding: 0;
+    }
+
+    .slick-dots li button:before,.slick-next:before,.slick-prev:before {
+        font-family: slick;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .slick-next,.slick-prev {
+        font-size: 0;
+        line-height: 0;
+        top: 50%;
+        width: 20px;
+        height: 20px;
+        -webkit-transform: translate(0,-50%);
+        -ms-transform: translate(0,-50%);
+        transform: translate(0,-50%);
+        cursor: pointer;
+        color: transparent;
+        outline: 0;
+        background: 0 0;
+    }
+
+    .slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover {
+        color: transparent;
+        outline: 0;
+        background: 0 0;
+    }
+
+    .slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before {
+        opacity: 1;
+    }
+
+    .slick-next.slick-disabled:before,.slick-prev.slick-disabled:before {
+        opacity: .25;
+    }
+
+    .slick-next:before,.slick-prev:before {
+        font-size: 20px;
+        line-height: 1;
+        opacity: .75;
+        color: #fff;
+    }
+
+    .slick-prev {
+        left: -25px;
+    }
+
+    [dir=rtl] .slick-prev {
+        right: -25px;
+        left: auto;
+    }
+
+    .slick-prev:before {
+        content: '←';
+    }
+
+    .slick-next:before,[dir=rtl] .slick-prev:before {
+        content: '→';
+    }
+
+    .slick-next {
+        right: -25px;
+    }
+
+    [dir=rtl] .slick-next {
+        right: auto;
+        left: -25px;
+    }
+
+    [dir=rtl] .slick-next:before {
+        content: '←';
+    }
+
+    .slick-dotted.slick-slider {
+        margin-bottom: 30px;
+    }
+
+    .slick-dots {
+        bottom: -25px;
+        width: 100%;
+        margin: 0;
+        list-style: none;
+        text-align: center;
+    }
+
+    .slick-dots li {
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    .slick-dots li button {
+        font-size: 0;
+        line-height: 0;
+        display: block;
+        width: 20px;
+        height: 20px;
+        padding: 5px;
+        cursor: pointer;
+        color: transparent;
+        border: 0;
+        outline: 0;
+        background: 0 0;
+    }
+
+    .slick-dots li button:focus,.slick-dots li button:hover {
+        outline: 0;
+    }
+
+    .slick-dots li button:focus:before,.slick-dots li button:hover:before {
+        opacity: 1;
+    }
+
+    .slick-dots li button:before {
+        font-size: 6px;
+        line-height: 20px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 20px;
+        height: 20px;
+        content: '•';
+        text-align: center;
+        opacity: .25;
+        color: #000;
+    }
+
+    .slick-dots li.slick-active button:before {
+        opacity: .75;
+        color: #000;
+    }
+}

src/containers/App/index.js

@@ -24,6 +24,7 @@ const NO_LOCALSTORAGE_MESSAGE
   removeAllMessages,
   },
 )
+
 class App extends Component {
   state = {
     expanded: this.props.expanded || false,
@@ -90,7 +91,7 @@ class App extends Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
-    const { onToggle, conversationHistoryId } = this.props
+    const { onToggle } = this.props
 
     if (prevState.expanded !== this.state.expanded) {
       if (window.localStorage) {
@@ -146,17 +147,6 @@ class App extends Component {
 
     return (
       <div className='RecastApp CaiApp'>
-        <link
-          rel='stylesheet'
-          type='text/css'
-          href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'
-        />
-        <link
-          rel='stylesheet'
-          type='text/css'
-          href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'
-        />
-
         <Expander
           show={!expanded}
           onClick={this.toggleChat}

src/containers/Chat/index.js

@@ -253,7 +253,7 @@ class Chat extends Component {
     }
 
     this.setState(
-      prevState => ({ messages: concat(prevState.messages, [backendMessage]) }),
+      prevState => ({ messages: concat(prevState.messages, [userMessage || backendMessage]) }),
       () => {
         if (sendMessagePromise) {
           addUserMessage(userMessage || backendMessage)