diff --git a/package-lock.json b/package-lock.json index 022705c..430cf7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "webchat", - "version": "1.4.37", + "version": "1.4.38", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ml-cai-webchat", - "version": "1.4.37", + "version": "1.4.38", "license": "MIT", "dependencies": { "@braintree/sanitize-url": "^5.0.2", diff --git a/package.json b/package.json index dcbfd59..e30289d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "webchat", - "version": "1.4.37", + "version": "1.4.38", "description": "", "main": "lib/index.js", "scripts": { diff --git a/src/components/Input/index.js b/src/components/Input/index.js index 5ca888d..2b24799 100644 --- a/src/components/Input/index.js +++ b/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) diff --git a/src/components/Message/QuickReplies.js b/src/components/Message/QuickReplies.js index 1d31072..474046e 100644 --- a/src/components/Message/QuickReplies.js +++ b/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) }) } } diff --git a/src/components/Message/index.js b/src/components/Message/index.js index 2bca737..f7d19b0 100644 --- a/src/components/Message/index.js +++ b/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 { diff --git a/src/components/Message/styleMin.scss b/src/components/Message/styleMin.scss new file mode 100644 index 0000000..ff7e65d --- /dev/null +++ b/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; + } +} diff --git a/src/components/Message/styleThemeMin.scss b/src/components/Message/styleThemeMin.scss new file mode 100644 index 0000000..4174dfe --- /dev/null +++ b/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; + } +} diff --git a/src/containers/App/index.js b/src/containers/App/index.js index 8c516df..ab221f1 100644 --- a/src/containers/App/index.js +++ b/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 (
- - - ({ messages: concat(prevState.messages, [backendMessage]) }), + prevState => ({ messages: concat(prevState.messages, [userMessage || backendMessage]) }), () => { if (sendMessagePromise) { addUserMessage(userMessage || backendMessage)