diff --git a/CHANGELOG.md b/CHANGELOG.md index 465096b..657b9a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,9 +4,14 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] +## [0.0.26] - 2017-05-27 + +- Fixed #17: Showing some messages twice (Paul.O'Flaherty) +- Fixed #10: Made the conversation scrollable -> This is a temporary fix (Paul.O'Flaherty) + ## [0.0.25] - 2017-04-02 -- Fixed #11: Allow changing styles from Chat component. (Paul.O'Flaherty) +- Fixed #11: Allow changing styles from Chat component (Paul.O'Flaherty) ## [0.0.24] - 2017-02-03 diff --git a/README.md b/README.md index b4cb5d5..ef94493 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,16 @@ This parameter is optional. ``` +### Turning on scrollable conversation (Temporary fix - v1 release will have a more supported scrollable conversation) +The conversation is not scrollable by default. + +To enable scrolling, add a isScrollable attribute to Conversation. + +This parameter is optional. +``` + +``` + ## Storybook examples Live stories are displayed [here](http://sevenleaps.github.io/chat-template/). diff --git a/builds/chat-template-min.js b/builds/chat-template-min.js index ae2464f..79b802e 100644 --- a/builds/chat-template-min.js +++ b/builds/chat-template-min.js @@ -18,9 +18,9 @@ boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0 * @internal * @license Modernizr 3.0.0pre (Custom Build) | MIT */ -function r(e,t){if(!i.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var a=document.createElement("div");a.setAttribute(n,"return;"),r="function"==typeof a[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var o,i=n(5);i.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t,n){"use strict";var r=n(5),o=/^[ \r\n\t\f]/,i=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,a=n(59),s=a(function(e,t){e.innerHTML=t});if(r.canUseDOM){var u=document.createElement("div");u.innerHTML=" ",""===u.innerHTML&&(s=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&i.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),u=null}e.exports=s},function(e,t){"use strict";function n(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var o=typeof e,i=typeof t;return"string"===o||"number"===o?"string"===i||"number"===i:"object"===i&&e.type===t.type&&e.key===t.key}e.exports=n},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,i){var f=typeof e;if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||a.isValidElement(e))return n(i,e,""===t?c+r(e,0):t),1;var d,h,m=0,v=""===t?c:t+p;if(Array.isArray(e))for(var g=0;g0){var o=r.state.messagesToBeDisplayed.shift(),i=r.state.isTyping,a=r.state.inbound;"typing"===o.type?(i=!0,a=o.inbound):(e.push(o),i=!1);var u=void 0;o.onDisplay&&(u=o.onDisplay.bind(null,o.id)),r.setState(s({},r.state,{messages:e,messagesToBeDisplayed:t,isTyping:i,inbound:a,reset:n}),u),r.timeoutId=setTimeout(r.showMessage,o.duration||800)}else r.state.turnOffLoop||(r.setState(s({},r.state,{messagesToBeDisplayed:r.state.originalMessagesToBeDisplayed.slice(),messages:r.state.historicMessages.slice(),isTyping:!1,inbound:!0,reset:!n})),r.timeoutId=setTimeout(r.showMessage,r.state.startingDelay))},r.state={startingDelay:e.delay||1e3,messages:e.historicMessages?e.historicMessages.slice():[],historicMessages:e.historicMessages?e.historicMessages.slice():[],messagesToBeDisplayed:e.messages.slice(),originalMessagesToBeDisplayed:e.messages.slice(),isTyping:!1,inbound:!0,reset:!1,turnOffLoop:e.turnOffLoop},r}return a(t,e),u(t,[{key:"componentDidMount",value:function(){this.timeoutId=setTimeout(this.showMessage,this.state.startingDelay)}},{key:"componentWillReceiveProps",value:function(e){var t=this.state.messagesToBeDisplayed.length+this.state.messages.length-this.state.historicMessages.length;e.messages.length>t&&(clearTimeout(this.timeoutId),this.setState({messagesToBeDisplayed:this.state.messagesToBeDisplayed.concat(e.messages.slice(t))}),this.timeoutId=setTimeout(this.showMessage,this.state.startingDelay))}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeoutId)}},{key:"render",value:function(){var e=this.state,t=e.isTyping,n=e.inbound,r=t&&n,o=t&&!n,i=(0,b["default"])({},_,{conversation:{height:this.props.height||_.conversation.height}},this.props.styles||{}),a=g.StyleSheet.create(i);return c["default"].createElement("div",{className:(0,g.css)(a.conversation)},c["default"].createElement(v["default"],{messages:this.props.messages}),c["default"].createElement("div",{className:(0,g.css)(a.messages)},c["default"].createElement(f["default"],{key:this.state.reset,height:a.conversation.height,messages:this.state.messages})),c["default"].createElement("div",{className:(0,g.css)(r&&a.inbound,o&&a.outbound,!t&&a.noTyping)},t&&c["default"].createElement(h["default"],{styles:C})))}}]),t}(c["default"].Component);x.propTypes={delay:l.PropTypes.number,height:l.PropTypes.number,turnOffLoop:l.PropTypes.bool,messages:l.PropTypes.arrayOf(l.PropTypes.shape({message:l.PropTypes.string,src:l.PropTypes.string,inbound:l.PropTypes.bool.isRequired,avatar:l.PropTypes.string,duration:l.PropTypes.number,backColor:l.PropTypes.string,textColor:l.PropTypes.string})).isRequired,historicMessages:l.PropTypes.arrayOf(l.PropTypes.shape({message:l.PropTypes.string,src:l.PropTypes.string,inbound:l.PropTypes.bool.isRequired,avatar:l.PropTypes.string,duration:l.PropTypes.number,backColor:l.PropTypes.string,textColor:l.PropTypes.string})),styles:l.PropTypes.object},t["default"]=x},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(13),s=n(16),u=r(s),l={container:{display:"none"}},c=function(e){return e.map(function(e,t){return e.src&&i["default"].createElement("img",{role:"presentation",key:t,src:e.src,width:"1px",height:"1px"})})},p=function(e){var t=e.messages,n=e.styles,r=a.StyleSheet.create((0,u["default"])({},l,n));return i["default"].createElement("div",{className:(0,a.css)(r.container)},c(t))};p.propTypes={messages:o.PropTypes.arrayOf(o.PropTypes.shape({src:o.PropTypes.string})).isRequired,styles:o.PropTypes.object},t["default"]=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(69),s=r(a),u=n(73),l=r(u),c=n(13),p=n(16),f=r(p),d={container:{width:"100%",clear:"both",display:"flex",overflow:"hidden"}},h=function(e){var t=e.height,n=e.message,r=e.styles,o=c.StyleSheet.create((0,f["default"])({},d,r)),a={container:{order:n.inbound?1:3}};return i["default"].createElement("div",{className:(0,c.css)(o.container)},n.avatar&&i["default"].createElement(s["default"],{src:n.avatar,styles:a}),i["default"].createElement(l["default"],{height:t,message:n}))};h.propTypes={height:o.PropTypes.number,message:o.PropTypes.shape({message:o.PropTypes.string,src:o.PropTypes.string,inbound:o.PropTypes.bool.isRequired,avatar:o.PropTypes.string,backColor:o.PropTypes.string.isRequired,textColor:o.PropTypes.string}),styles:o.PropTypes.object},t["default"]=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(13),s=n(16),u=r(s),l={contentBase:{backgroundColor:"white",maxWidth:"60%",wordWrap:"break-word",color:"#262626",borderRadius:"10px",padding:"2%",borderColor:"grey",boxShadow:"1px 5px 10px rgba(0,0,0,.13)",marginBottom:"2%",order:"2"},contentRight:{marginLeft:"auto"},image:{width:"100%"},imageContainer:{minHeight:"100px",height:"100px",width:"100%",margin:"0px"}},c=function(e){var t=e.height,n=e.message,r=e.styles,o=a.StyleSheet.create((0,u["default"])({},l,{contentBase:{color:n.textColor||l.contentBase.color,backgroundColor:n.backColor||l.contentBase.backgroundColor}},r||{})),s=function(e){var n=(t||0)/3;return e&&i["default"].createElement("div",{className:(0,a.css)(o.imageContainer)},i["default"].createElement("img",{src:e,role:"presentation",height:n+"px",className:(0,a.css)(o.image)}))};return i["default"].createElement("div",{className:(0,a.css)(o.contentBase,!n.inbound&&o.contentRight)},i["default"].createElement("span",null,n.message),s(n.src,t))};c.propTypes={height:o.PropTypes.number,message:o.PropTypes.shape({message:o.PropTypes.string,src:o.PropTypes.string,inbound:o.PropTypes.bool.isRequired,avatar:o.PropTypes.string,backColor:o.PropTypes.string.isRequired,textColor:o.PropTypes.string}).isRequired,styles:o.PropTypes.object},t["default"]=c},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(13),s=n(16),u=r(s),l={dot:{MozBorderRadius:"40px/40px",WebkitBorderRadius:"40px 40px",borderRadius:"40px/40px",border:"solid",borderWidth:"4px",borderColor:"#435AD9","float":"left",marginRight:"2.0%"}},c=function(e){var t=e.styles,n=a.StyleSheet.create((0,u["default"])({},l,t||{}));return i["default"].createElement("div",null,i["default"].createElement("style",null,"\n ._chat_template_dot:nth-child(2) {\n animation: _chat_template_updown1 linear 1.5s infinite;\n }\n\n ._chat_template_dot:nth-child(3) {\n animation: _chat_template_updown2 linear 1.5s infinite;\n }\n\n ._chat_template_dot:nth-child(4) {\n animation: _chat_template_updown3 linear 1.5s infinite;\n }\n\n @keyframes _chat_template_updown1 {\n 0% {\n transform: translateY(5px);\n }\n 25% {\n transform: translateY(10px);\n }\n 50% {\n transform: translateY(15px);\n }\n 75% {\n transform: translateY(10px);\n }\n 100% {\n transform: translateY(5px);\n }\n }\n\n @keyframes _chat_template_updown2 {\n from {\n transform: translateY(10px);\n }\n 25% {\n transform: translateY(15px);\n }\n 50% {\n transform: translateY(10px);\n }\n 75% {\n transform: translateY(5px);\n }\n to {\n transform: translateY(10px);\n }\n }\n\n @keyframes _chat_template_updown3 {\n from {\n transform: translateY(15px);\n }\n 25% {\n transform: translateY(10px);\n }\n 50% {\n transform: translateY(5px);\n }\n 75% {\n transform: translateY(10px);\n }\n to {\n transform: translateY(15px);\n }\n }\n "),i["default"].createElement("div",{className:"_chat_template_dot "+(0,a.css)(n.dot)}),i["default"].createElement("div",{className:"_chat_template_dot "+(0,a.css)(n.dot)}),i["default"].createElement("div",{className:"_chat_template_dot "+(0,a.css)(n.dot)}))};c.propTypes={styles:o.PropTypes.object},t["default"]=c},function(e,t,n){"use strict";var r=n(6),o={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=o},function(e,t){"use strict";function n(e){try{e.focus()}catch(t){}}e.exports=n},function(e,t){"use strict";function n(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=n},function(e,t,n){"use strict";function r(e){return a?void 0:i(!1),f.hasOwnProperty(e)||(e="*"),s.hasOwnProperty(e)||("*"===e?a.innerHTML="":a.innerHTML="<"+e+">",s[e]=!a.firstChild),s[e]?f[e]:null}var o=n(5),i=n(1),a=o.canUseDOM?document.createElement("div"):null,s={},u=[1,'"],l=[1,"","
"],c=[3,"","
"],p=[1,'',""],f={"*":[1,"?
","
"],area:[1,"",""],col:[2,"","
"],legend:[1,"
","
"],param:[1,"",""],tr:[2,"","
"],optgroup:u,option:u,caption:l,colgroup:l,tbody:l,tfoot:l,thead:l,td:c,th:c},d=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];d.forEach(function(e){f[e]=p,s[e]=!0}),e.exports=r},function(e,t){"use strict";function n(e,t){return e===t?0!==e||0!==t||1/e===1/t:e!==e&&t!==t}function r(e,t){if(n(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(var a=0;a1?t-1:0),r=1;rn?n:e}function r(e){var t=e.type,n=e.values;if(t.indexOf("rgb")>-1)for(var r=0;r<3;r++)n[r]=parseInt(n[r]);var o=void 0;return o=t.indexOf("hsl")>-1?e.type+"("+n[0]+", "+n[1]+"%, "+n[2]+"%":e.type+"("+n[0]+", "+n[1]+", "+n[2],o+=4===n.length?", "+e.values[3]+")":")"}function o(e){if(4===e.length){for(var t="#",n=1;n-1){var t=e.values.map(function(e){return e/=255,e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)});return Number((.2126*t[0]+.7152*t[1]+.0722*t[2]).toFixed(3))}if(e.type.indexOf("hsl")>-1)return e.values[2]/100}function u(e){var t=arguments.length<=1||void 0===arguments[1]?.15:arguments[1];return s(e)>.5?c(e,t):p(e,t)}function l(e,t){return e=i(e),t=n(t,0,1),"rgb"!==e.type&&"hsl"!==e.type||(e.type+="a"),e.values[3]=t,r(e)}function c(e,t){if(e=i(e),t=n(t,0,1),e.type.indexOf("hsl")>-1)e.values[2]*=1-t;else if(e.type.indexOf("rgb")>-1)for(var o=0;o<3;o++)e.values[o]*=1-t;return r(e)}function p(e,t){if(e=i(e),t=n(t,0,1),e.type.indexOf("hsl")>-1)e.values[2]+=(100-e.values[2])*t;else if(e.type.indexOf("rgb")>-1)for(var o=0;o<3;o++)e.values[o]+=(255-e.values[o])*t;return r(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.convertColorToString=r,t.convertHexToRGB=o,t.decomposeColor=i,t.getContrastRatio=a,t.getLuminance=s,t.emphasize=u,t.fade=l,t.darken=c,t.lighten=p},function(e,t){"use strict";function n(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}var r={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},o=["Webkit","ms","Moz","O"];Object.keys(r).forEach(function(e){o.forEach(function(t){r[n(t,e)]=r[e]})});var i={background:{backgroundAttachment:!0,backgroundColor:!0,backgroundImage:!0,backgroundPositionX:!0,backgroundPositionY:!0,backgroundRepeat:!0},backgroundPosition:{backgroundPositionX:!0,backgroundPositionY:!0},border:{borderWidth:!0,borderStyle:!0, -borderColor:!0},borderBottom:{borderBottomWidth:!0,borderBottomStyle:!0,borderBottomColor:!0},borderLeft:{borderLeftWidth:!0,borderLeftStyle:!0,borderLeftColor:!0},borderRight:{borderRightWidth:!0,borderRightStyle:!0,borderRightColor:!0},borderTop:{borderTopWidth:!0,borderTopStyle:!0,borderTopColor:!0},font:{fontStyle:!0,fontVariant:!0,fontWeight:!0,fontSize:!0,lineHeight:!0,fontFamily:!0},outline:{outlineWidth:!0,outlineStyle:!0,outlineColor:!0}},a={isUnitlessNumber:r,shorthandPropertyExpansions:i};e.exports=a},function(e,t,n){"use strict";function r(){this._callbacks=null,this._contexts=null}var o=n(3),i=n(17),a=n(1);o(r.prototype,{enqueue:function(e,t){this._callbacks=this._callbacks||[],this._contexts=this._contexts||[],this._callbacks.push(e),this._contexts.push(t)},notifyAll:function(){var e=this._callbacks,t=this._contexts;if(e){e.length!==t.length?a(!1):void 0,this._callbacks=null,this._contexts=null;for(var n=0;n.")}var a=h[e]||(h[e]={});if(a[o])return null;a[o]=!0;var s={parentOrOwner:o,url:" See https://fb.me/react-warning-keys for more information.",childOwner:null};return t&&t._owner&&t._owner!==p.current&&(s.childOwner=" It was passed a child from "+t._owner.getName()+"."),s}function a(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n>",w={array:i("array"),bool:i("boolean"),func:i("function"),number:i("number"),object:i("object"),string:i("string"),any:a(),arrayOf:s,element:u(),instanceOf:l,node:d(),objectOf:p,oneOf:c,oneOfType:f,shape:h};e.exports=w},function(e,t,n){"use strict";function r(e){a.enqueueUpdate(e)}function o(e,t){var n=i.get(e);return n?n:null}var i=(n(18),n(57)),a=n(10),s=n(1),u=(n(2),{isMounted:function(e){var t=i.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){u.validateCallback(t,n);var i=o(e);return i?(i._pendingCallbacks?i._pendingCallbacks.push(t):i._pendingCallbacks=[t],void r(i)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=o(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=o(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=o(e,"setState");if(n){var i=n._pendingStateQueue||(n._pendingStateQueue=[]);i.push(t),r(n)}},enqueueElementInternal:function(e,t){e._pendingElement=t,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?s(!1):void 0}});e.exports=u},function(e,t){"use strict";e.exports="15.1.0"},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t,n){"use strict";function r(e,t){if(null==t?o(!1):void 0,null==e)return t;var n=Array.isArray(e),r=Array.isArray(t);return n&&r?(e.push.apply(e,t),e):n?(e.push(t),e):r?[e].concat(t):[e,t]}var o=n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t,n){var r=e,o=void 0===r[n];o&&null!=t&&(r[n]=t)}function o(e){if(null==e)return e;var t={};return i(e,r,t),t}var i=(n(53),n(67));n(2);e.exports=o},function(e,t){"use strict";var n=function(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)};e.exports=n},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.NATIVE?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(108);e.exports=r},function(e,t,n){"use strict";function r(){return!i&&o.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var o=n(5),i=null;e.exports=r},function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function o(e){if(s[e])return s[e];if(!a[e])return e;var t=a[e];for(var n in t)if(t.hasOwnProperty(n)&&n in u)return s[e]=t[n];return""}var i=n(5),a={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},s={},u={};i.canUseDOM&&(u=document.createElement("div").style,"AnimationEvent"in window||(delete a.animationend.animation,delete a.animationiteration.animation,delete a.animationstart.animation),"TransitionEvent"in window||delete a.transitionend.transition),e.exports=o},function(e,t,n){"use strict";function r(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function o(e){var t,n=null===e||e===!1;if(n)t=s.create(o);else if("object"==typeof e){var i=e;!i||"function"!=typeof i.type&&"string"!=typeof i.type?l(!1):void 0,t="string"==typeof i.type?u.createInternalComponent(i):r(i.type)?new i.type(i):new c(i)}else"string"==typeof e||"number"==typeof e?t=u.createInstanceForText(e):l(!1);t._mountIndex=0,t._mountImage=null;return t}var i=n(3),a=n(239),s=n(102),u=n(107),l=(n(7),n(1)),c=(n(2),function(e){this.construct(e)});i(c.prototype,a.Mixin,{_instantiateReactComponent:o});e.exports=o},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&r[e.type]||"textarea"===t)}var r={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=n},function(e,t,n){"use strict";function r(e){return o.isValidElement(e)?void 0:i(!1),e}var o=n(8),i=n(1);e.exports=r},function(e,t,n){"use strict";var r=n(5),o=n(40),i=n(65),a=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){i(e,o(t))})),e.exports=a},function(e,t,n){"use strict";var r=function(){};e.exports=r},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children=[],e.webpackPolyfill=1),e}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(u){o=!0,i=u}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=n(157),a=r(i),s=n(41),u=function p(e,t,n,r){var o=t.reduce(s.recursiveMerge),i={},a={},u={};return Object.keys(o).forEach(function(e){":"===e[0]?u[e]=o[e]:"@"===e[0]?a[e]=o[e]:i[e]=o[e]}),c(e,i,n,r)+Object.keys(u).map(function(t){return c(e+t,u[t],n,r)}).join("")+Object.keys(a).map(function(t){var o=p(e,[a[t]],n,r);return t+"{"+o+"}"}).join("")};t.generateCSS=u;var l=function(e,t){var n={};return Object.keys(e).forEach(function(r){t&&t.hasOwnProperty(r)?n[r]=t[r](e[r]):n[r]=e[r]}),n},c=function(e,t,n,r){var i=l(t,n),u=(0,a["default"])(i),c=(0,s.objectToPairs)(u).map(function(e){var t=o(e,2),n=t[0],i=t[1],a=(0,s.stringifyValue)(n,i),u=(0,s.kebabifyStyleName)(n)+":"+a+";";return r===!1?u:(0,s.importantify)(u)}).join("");return c?e+"{"+c+"}":""};t.generateCSSRuleset=c},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(128),i=r(o),a=n(126),s=n(41),u=null,l=function(e){if(null==u&&(u=document.querySelector("style[data-aphrodite]"),null==u)){var t=document.head||document.getElementsByTagName("head")[0];u=document.createElement("style"),u.type="text/css",u.setAttribute("data-aphrodite",""),t.appendChild(u)}u.styleSheet?u.styleSheet.cssText+=e:u.appendChild(document.createTextNode(e))},c={fontFamily:function x(e){return Array.isArray(e)?e.map(x).join(","):"object"==typeof e?(m(e.fontFamily,"@font-face",[e],!1),'"'+e.fontFamily+'"'):e},animationName:function(e){if("object"!=typeof e)return e;var t="keyframe_"+(0,s.hashObject)(e),n="@keyframes "+t+"{";return Object.keys(e).forEach(function(t){n+=(0,a.generateCSS)(t,[e[t]],c,!1)}),n+="}",h(t,n),t}},p={},f="",d=!1,h=function(e,t){if(!p[e]){if(!d){if("undefined"==typeof document)throw new Error("Cannot automatically buffer without a document");d=!0,(0,i["default"])(b)}f+=t,p[e]=!0}},m=function(e,t,n,r){if(!p[e]){var o=(0,a.generateCSS)(t,n,c,r);h(e,o)}};t.injectStyleOnce=m;var v=function(){f="",p={},d=!1,u=null};t.reset=v;var g=function(){if(d)throw new Error("Cannot buffer while already buffering");d=!0};t.startBuffering=g;var y=function(){d=!1;var e=f;return f="",e};t.flushToString=y;var b=function(){var e=y();e.length>0&&l(e)};t.flushToStyleTag=b;var _=function(){return Object.keys(p)};t.getRenderedClassNames=_;var C=function(e){e.forEach(function(e){p[e]=!0})};t.addRenderedClassNames=C},function(e,t,n){"use strict";function r(){if(u.length)throw u.shift()}function o(e){var t;t=s.length?s.pop():new i,t.task=e,a(t)}function i(){this.task=null}var a=n(129),s=[],u=[],l=a.makeRequestCallFromTimer(r);e.exports=o,i.prototype.call=function(){try{this.task.call()}catch(e){o.onerror?o.onerror(e):(u.push(e),l())}finally{this.task=null,s[s.length]=this}}},function(e,t){(function(t){"use strict";function n(e){s.length||(a(),u=!0),s[s.length]=e}function r(){for(;lc){for(var t=0,n=s.length-l;t]/,a=n(59),s=a(function(e,t){e.innerHTML=t});if(r.canUseDOM){var u=document.createElement("div");u.innerHTML=" ",""===u.innerHTML&&(s=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&i.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),u=null}e.exports=s},function(e,t){"use strict";function n(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var o=typeof e,i=typeof t;return"string"===o||"number"===o?"string"===i||"number"===i:"object"===i&&e.type===t.type&&e.key===t.key}e.exports=n},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,i){var f=typeof e;if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||a.isValidElement(e))return n(i,e,""===t?c+r(e,0):t),1;var d,h,m=0,v=""===t?c:t+p;if(Array.isArray(e))for(var g=0;g0){var o=r.state.messagesToBeDisplayed.shift(),i=r.state.isTyping,a=r.state.inbound;"typing"===o.type?(i=!0,a=o.inbound):(e.push(o),i=!1);var u=void 0;o.onDisplay&&(u=o.onDisplay.bind(null,o.id)),r.setState(s({},r.state,{messages:e,messagesToBeDisplayed:t,isTyping:i,inbound:a,reset:n}),u),r.timeoutId=setTimeout(r.showMessage,o.duration||800)}else r.state.turnOffLoop||(r.setState(s({},r.state,{messagesToBeDisplayed:r.state.originalMessagesToBeDisplayed.slice(),messages:r.state.historicMessages.slice(),isTyping:!1,inbound:!0,reset:!n})),r.timeoutId=setTimeout(r.showMessage,r.state.startingDelay))},r.paneDidMount=function(e){e&&r.state.isScrollable&&e.addEventListener("wheel",function(t){var n=t.deltaY,r=e,o=e.children[0],i=e.children[0].children[1],a=r.getBoundingClientRect().height,s=r.getBoundingClientRect().bottom,u=i.getBoundingClientRect().height,l=o.getBoundingClientRect(),c=l.top,p=a-s,f=(u-a)*-1,d=u>a;if(d){var h=void 0;if(n<0){var m=pc-n+p;if(g)h=f;else{var y=c-n+p;h=g?f:y}}o.style.top=h+"px"}})},r.state={startingDelay:e.delay||1e3,messages:e.historicMessages?e.historicMessages.slice():[],historicMessages:e.historicMessages?e.historicMessages.slice():[],messagesToBeDisplayed:e.messages.slice(),originalMessagesToBeDisplayed:e.messages.slice(),isScrollable:e.isScrollable,isTyping:!1,inbound:!0,reset:!1,turnOffLoop:e.turnOffLoop},r}return a(t,e),u(t,[{key:"componentDidMount",value:function(){this.timeoutId=setTimeout(this.showMessage,this.state.startingDelay)}},{key:"componentWillReceiveProps",value:function(e){var t=this.state.messagesToBeDisplayed.length+this.state.messages.length-this.state.historicMessages.length;e.messages.length>t&&(clearTimeout(this.timeoutId),this.setState({messagesToBeDisplayed:this.state.messagesToBeDisplayed.concat(e.messages.slice(t))}),this.timeoutId=setTimeout(this.showMessage,this.state.startingDelay))}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeoutId)}},{key:"render",value:function(){var e=this.state,t=e.isTyping,n=e.inbound,r=t&&n,o=t&&!n,i=(0,b["default"])({},_,{conversation:{height:this.props.height||_.conversation.height}},this.props.styles||{}),a=g.StyleSheet.create(i);return c["default"].createElement("div",{className:(0,g.css)(a.conversation)},c["default"].createElement(v["default"],{messages:this.props.messages}),c["default"].createElement("div",{ref:this.paneDidMount,className:(0,g.css)(a.messages)},c["default"].createElement(f["default"],{key:this.state.reset,height:a.conversation.height,messages:this.state.messages})),c["default"].createElement("div",{className:(0,g.css)(r&&a.inbound,o&&a.outbound,!t&&a.noTyping)},t&&c["default"].createElement(h["default"],{styles:C})))}}]),t}(c["default"].Component);x.propTypes={delay:l.PropTypes.number,height:l.PropTypes.number,turnOffLoop:l.PropTypes.bool,isScrollable:l.PropTypes.bool,messages:l.PropTypes.arrayOf(l.PropTypes.shape({message:l.PropTypes.string,src:l.PropTypes.string,inbound:l.PropTypes.bool.isRequired,avatar:l.PropTypes.string,duration:l.PropTypes.number,backColor:l.PropTypes.string,textColor:l.PropTypes.string})).isRequired,historicMessages:l.PropTypes.arrayOf(l.PropTypes.shape({message:l.PropTypes.string,src:l.PropTypes.string,inbound:l.PropTypes.bool.isRequired,avatar:l.PropTypes.string,duration:l.PropTypes.number,backColor:l.PropTypes.string,textColor:l.PropTypes.string})),styles:l.PropTypes.object},t["default"]=x},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(13),s=n(16),u=r(s),l={container:{display:"none"}},c=function(e){return e.map(function(e,t){return e.src&&i["default"].createElement("img",{role:"presentation",key:t,src:e.src,width:"1px",height:"1px"})})},p=function(e){var t=e.messages,n=e.styles,r=a.StyleSheet.create((0,u["default"])({},l,n));return i["default"].createElement("div",{className:(0,a.css)(r.container)},c(t))};p.propTypes={messages:o.PropTypes.arrayOf(o.PropTypes.shape({src:o.PropTypes.string})).isRequired,styles:o.PropTypes.object},t["default"]=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(69),s=r(a),u=n(73),l=r(u),c=n(13),p=n(16),f=r(p),d={container:{width:"100%",clear:"both",display:"flex",overflow:"hidden"}},h=function(e){var t=e.height,n=e.message,r=e.styles,o=c.StyleSheet.create((0,f["default"])({},d,r)),a={container:{order:n.inbound?1:3}};return i["default"].createElement("div",{className:(0,c.css)(o.container)},n.avatar&&i["default"].createElement(s["default"],{src:n.avatar,styles:a}),i["default"].createElement(l["default"],{height:t,message:n}))};h.propTypes={height:o.PropTypes.number,message:o.PropTypes.shape({message:o.PropTypes.string,src:o.PropTypes.string,inbound:o.PropTypes.bool.isRequired,avatar:o.PropTypes.string,backColor:o.PropTypes.string.isRequired,textColor:o.PropTypes.string}),styles:o.PropTypes.object},t["default"]=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(13),s=n(16),u=r(s),l={contentBase:{backgroundColor:"white",maxWidth:"60%",wordWrap:"break-word",color:"#262626",borderRadius:"10px",padding:"2%",borderColor:"grey",boxShadow:"1px 5px 10px rgba(0,0,0,.13)",marginBottom:"2%",order:"2"},contentRight:{marginLeft:"auto"},image:{width:"100%"},imageContainer:{minHeight:"100px",height:"100px",width:"100%",margin:"0px"}},c=function(e){var t=e.height,n=e.message,r=e.styles,o=a.StyleSheet.create((0,u["default"])({},l,{contentBase:{color:n.textColor||l.contentBase.color,backgroundColor:n.backColor||l.contentBase.backgroundColor}},r||{})),s=function(e){var n=(t||0)/3;return e&&i["default"].createElement("div",{className:(0,a.css)(o.imageContainer)},i["default"].createElement("img",{src:e,role:"presentation",height:n+"px",className:(0,a.css)(o.image)}))};return i["default"].createElement("div",{className:(0,a.css)(o.contentBase,!n.inbound&&o.contentRight)},i["default"].createElement("span",null,n.message),s(n.src,t))};c.propTypes={height:o.PropTypes.number,message:o.PropTypes.shape({message:o.PropTypes.string,src:o.PropTypes.string,inbound:o.PropTypes.bool.isRequired,avatar:o.PropTypes.string,backColor:o.PropTypes.string.isRequired,textColor:o.PropTypes.string}).isRequired,styles:o.PropTypes.object},t["default"]=c},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),i=r(o),a=n(13),s=n(16),u=r(s),l={dot:{MozBorderRadius:"40px/40px",WebkitBorderRadius:"40px 40px",borderRadius:"40px/40px",border:"solid",borderWidth:"4px",borderColor:"#435AD9","float":"left",marginRight:"2.0%"}},c=function(e){var t=e.styles,n=a.StyleSheet.create((0,u["default"])({},l,t||{}));return i["default"].createElement("div",null,i["default"].createElement("style",null,"\n ._chat_template_dot:nth-child(2) {\n animation: _chat_template_updown1 linear 1.5s infinite;\n }\n\n ._chat_template_dot:nth-child(3) {\n animation: _chat_template_updown2 linear 1.5s infinite;\n }\n\n ._chat_template_dot:nth-child(4) {\n animation: _chat_template_updown3 linear 1.5s infinite;\n }\n\n @keyframes _chat_template_updown1 {\n 0% {\n transform: translateY(5px);\n }\n 25% {\n transform: translateY(10px);\n }\n 50% {\n transform: translateY(15px);\n }\n 75% {\n transform: translateY(10px);\n }\n 100% {\n transform: translateY(5px);\n }\n }\n\n @keyframes _chat_template_updown2 {\n from {\n transform: translateY(10px);\n }\n 25% {\n transform: translateY(15px);\n }\n 50% {\n transform: translateY(10px);\n }\n 75% {\n transform: translateY(5px);\n }\n to {\n transform: translateY(10px);\n }\n }\n\n @keyframes _chat_template_updown3 {\n from {\n transform: translateY(15px);\n }\n 25% {\n transform: translateY(10px);\n }\n 50% {\n transform: translateY(5px);\n }\n 75% {\n transform: translateY(10px);\n }\n to {\n transform: translateY(15px);\n }\n }\n "),i["default"].createElement("div",{className:"_chat_template_dot "+(0,a.css)(n.dot)}),i["default"].createElement("div",{className:"_chat_template_dot "+(0,a.css)(n.dot)}),i["default"].createElement("div",{className:"_chat_template_dot "+(0,a.css)(n.dot)}))};c.propTypes={styles:o.PropTypes.object},t["default"]=c},function(e,t,n){"use strict";var r=n(6),o={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=o},function(e,t){"use strict";function n(e){try{e.focus()}catch(t){}}e.exports=n},function(e,t){"use strict";function n(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=n},function(e,t,n){"use strict";function r(e){return a?void 0:i(!1),f.hasOwnProperty(e)||(e="*"),s.hasOwnProperty(e)||("*"===e?a.innerHTML="":a.innerHTML="<"+e+">",s[e]=!a.firstChild),s[e]?f[e]:null}var o=n(5),i=n(1),a=o.canUseDOM?document.createElement("div"):null,s={},u=[1,'"],l=[1,"","
"],c=[3,"","
"],p=[1,'',""],f={"*":[1,"?
","
"],area:[1,"",""],col:[2,"","
"],legend:[1,"
","
"],param:[1,"",""],tr:[2,"","
"],optgroup:u,option:u,caption:l,colgroup:l,tbody:l,tfoot:l,thead:l,td:c,th:c},d=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];d.forEach(function(e){f[e]=p,s[e]=!0}),e.exports=r},function(e,t){"use strict";function n(e,t){return e===t?0!==e||0!==t||1/e===1/t:e!==e&&t!==t}function r(e,t){if(n(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(var a=0;a1?t-1:0),r=1;rn?n:e}function r(e){var t=e.type,n=e.values;if(t.indexOf("rgb")>-1)for(var r=0;r<3;r++)n[r]=parseInt(n[r]);var o=void 0;return o=t.indexOf("hsl")>-1?e.type+"("+n[0]+", "+n[1]+"%, "+n[2]+"%":e.type+"("+n[0]+", "+n[1]+", "+n[2],o+=4===n.length?", "+e.values[3]+")":")"}function o(e){if(4===e.length){for(var t="#",n=1;n-1){var t=e.values.map(function(e){return e/=255,e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)});return Number((.2126*t[0]+.7152*t[1]+.0722*t[2]).toFixed(3))}if(e.type.indexOf("hsl")>-1)return e.values[2]/100}function u(e){var t=arguments.length<=1||void 0===arguments[1]?.15:arguments[1];return s(e)>.5?c(e,t):p(e,t)}function l(e,t){return e=i(e),t=n(t,0,1),"rgb"!==e.type&&"hsl"!==e.type||(e.type+="a"),e.values[3]=t,r(e)}function c(e,t){if(e=i(e),t=n(t,0,1),e.type.indexOf("hsl")>-1)e.values[2]*=1-t;else if(e.type.indexOf("rgb")>-1)for(var o=0;o<3;o++)e.values[o]*=1-t;return r(e)}function p(e,t){if(e=i(e),t=n(t,0,1),e.type.indexOf("hsl")>-1)e.values[2]+=(100-e.values[2])*t;else if(e.type.indexOf("rgb")>-1)for(var o=0;o<3;o++)e.values[o]+=(255-e.values[o])*t;return r(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.convertColorToString=r,t.convertHexToRGB=o,t.decomposeColor=i,t.getContrastRatio=a,t.getLuminance=s,t.emphasize=u,t.fade=l,t.darken=c,t.lighten=p},function(e,t){"use strict";function n(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}var r={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0, +orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},o=["Webkit","ms","Moz","O"];Object.keys(r).forEach(function(e){o.forEach(function(t){r[n(t,e)]=r[e]})});var i={background:{backgroundAttachment:!0,backgroundColor:!0,backgroundImage:!0,backgroundPositionX:!0,backgroundPositionY:!0,backgroundRepeat:!0},backgroundPosition:{backgroundPositionX:!0,backgroundPositionY:!0},border:{borderWidth:!0,borderStyle:!0,borderColor:!0},borderBottom:{borderBottomWidth:!0,borderBottomStyle:!0,borderBottomColor:!0},borderLeft:{borderLeftWidth:!0,borderLeftStyle:!0,borderLeftColor:!0},borderRight:{borderRightWidth:!0,borderRightStyle:!0,borderRightColor:!0},borderTop:{borderTopWidth:!0,borderTopStyle:!0,borderTopColor:!0},font:{fontStyle:!0,fontVariant:!0,fontWeight:!0,fontSize:!0,lineHeight:!0,fontFamily:!0},outline:{outlineWidth:!0,outlineStyle:!0,outlineColor:!0}},a={isUnitlessNumber:r,shorthandPropertyExpansions:i};e.exports=a},function(e,t,n){"use strict";function r(){this._callbacks=null,this._contexts=null}var o=n(3),i=n(17),a=n(1);o(r.prototype,{enqueue:function(e,t){this._callbacks=this._callbacks||[],this._contexts=this._contexts||[],this._callbacks.push(e),this._contexts.push(t)},notifyAll:function(){var e=this._callbacks,t=this._contexts;if(e){e.length!==t.length?a(!1):void 0,this._callbacks=null,this._contexts=null;for(var n=0;n.")}var a=h[e]||(h[e]={});if(a[o])return null;a[o]=!0;var s={parentOrOwner:o,url:" See https://fb.me/react-warning-keys for more information.",childOwner:null};return t&&t._owner&&t._owner!==p.current&&(s.childOwner=" It was passed a child from "+t._owner.getName()+"."),s}function a(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n>",w={array:i("array"),bool:i("boolean"),func:i("function"),number:i("number"),object:i("object"),string:i("string"),any:a(),arrayOf:s,element:u(),instanceOf:l,node:d(),objectOf:p,oneOf:c,oneOfType:f,shape:h};e.exports=w},function(e,t,n){"use strict";function r(e){a.enqueueUpdate(e)}function o(e,t){var n=i.get(e);return n?n:null}var i=(n(18),n(57)),a=n(10),s=n(1),u=(n(2),{isMounted:function(e){var t=i.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){u.validateCallback(t,n);var i=o(e);return i?(i._pendingCallbacks?i._pendingCallbacks.push(t):i._pendingCallbacks=[t],void r(i)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=o(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=o(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=o(e,"setState");if(n){var i=n._pendingStateQueue||(n._pendingStateQueue=[]);i.push(t),r(n)}},enqueueElementInternal:function(e,t){e._pendingElement=t,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?s(!1):void 0}});e.exports=u},function(e,t){"use strict";e.exports="15.1.0"},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t,n){"use strict";function r(e,t){if(null==t?o(!1):void 0,null==e)return t;var n=Array.isArray(e),r=Array.isArray(t);return n&&r?(e.push.apply(e,t),e):n?(e.push(t),e):r?[e].concat(t):[e,t]}var o=n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t,n){var r=e,o=void 0===r[n];o&&null!=t&&(r[n]=t)}function o(e){if(null==e)return e;var t={};return i(e,r,t),t}var i=(n(53),n(67));n(2);e.exports=o},function(e,t){"use strict";var n=function(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)};e.exports=n},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.NATIVE?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(108);e.exports=r},function(e,t,n){"use strict";function r(){return!i&&o.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var o=n(5),i=null;e.exports=r},function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function o(e){if(s[e])return s[e];if(!a[e])return e;var t=a[e];for(var n in t)if(t.hasOwnProperty(n)&&n in u)return s[e]=t[n];return""}var i=n(5),a={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},s={},u={};i.canUseDOM&&(u=document.createElement("div").style,"AnimationEvent"in window||(delete a.animationend.animation,delete a.animationiteration.animation,delete a.animationstart.animation),"TransitionEvent"in window||delete a.transitionend.transition),e.exports=o},function(e,t,n){"use strict";function r(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function o(e){var t,n=null===e||e===!1;if(n)t=s.create(o);else if("object"==typeof e){var i=e;!i||"function"!=typeof i.type&&"string"!=typeof i.type?l(!1):void 0,t="string"==typeof i.type?u.createInternalComponent(i):r(i.type)?new i.type(i):new c(i)}else"string"==typeof e||"number"==typeof e?t=u.createInstanceForText(e):l(!1);t._mountIndex=0,t._mountImage=null;return t}var i=n(3),a=n(239),s=n(102),u=n(107),l=(n(7),n(1)),c=(n(2),function(e){this.construct(e)});i(c.prototype,a.Mixin,{_instantiateReactComponent:o});e.exports=o},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&r[e.type]||"textarea"===t)}var r={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=n},function(e,t,n){"use strict";function r(e){return o.isValidElement(e)?void 0:i(!1),e}var o=n(8),i=n(1);e.exports=r},function(e,t,n){"use strict";var r=n(5),o=n(40),i=n(65),a=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){i(e,o(t))})),e.exports=a},function(e,t,n){"use strict";var r=function(){};e.exports=r},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children=[],e.webpackPolyfill=1),e}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(u){o=!0,i=u}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),i=n(157),a=r(i),s=n(41),u=function p(e,t,n,r){var o=t.reduce(s.recursiveMerge),i={},a={},u={};return Object.keys(o).forEach(function(e){":"===e[0]?u[e]=o[e]:"@"===e[0]?a[e]=o[e]:i[e]=o[e]}),c(e,i,n,r)+Object.keys(u).map(function(t){return c(e+t,u[t],n,r)}).join("")+Object.keys(a).map(function(t){var o=p(e,[a[t]],n,r);return t+"{"+o+"}"}).join("")};t.generateCSS=u;var l=function(e,t){var n={};return Object.keys(e).forEach(function(r){t&&t.hasOwnProperty(r)?n[r]=t[r](e[r]):n[r]=e[r]}),n},c=function(e,t,n,r){var i=l(t,n),u=(0,a["default"])(i),c=(0,s.objectToPairs)(u).map(function(e){var t=o(e,2),n=t[0],i=t[1],a=(0,s.stringifyValue)(n,i),u=(0,s.kebabifyStyleName)(n)+":"+a+";";return r===!1?u:(0,s.importantify)(u)}).join("");return c?e+"{"+c+"}":""};t.generateCSSRuleset=c},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(128),i=r(o),a=n(126),s=n(41),u=null,l=function(e){if(null==u&&(u=document.querySelector("style[data-aphrodite]"),null==u)){var t=document.head||document.getElementsByTagName("head")[0];u=document.createElement("style"),u.type="text/css",u.setAttribute("data-aphrodite",""),t.appendChild(u)}u.styleSheet?u.styleSheet.cssText+=e:u.appendChild(document.createTextNode(e))},c={fontFamily:function x(e){return Array.isArray(e)?e.map(x).join(","):"object"==typeof e?(m(e.fontFamily,"@font-face",[e],!1),'"'+e.fontFamily+'"'):e},animationName:function(e){if("object"!=typeof e)return e;var t="keyframe_"+(0,s.hashObject)(e),n="@keyframes "+t+"{";return Object.keys(e).forEach(function(t){n+=(0,a.generateCSS)(t,[e[t]],c,!1)}),n+="}",h(t,n),t}},p={},f="",d=!1,h=function(e,t){if(!p[e]){if(!d){if("undefined"==typeof document)throw new Error("Cannot automatically buffer without a document");d=!0,(0,i["default"])(b)}f+=t,p[e]=!0}},m=function(e,t,n,r){if(!p[e]){var o=(0,a.generateCSS)(t,n,c,r);h(e,o)}};t.injectStyleOnce=m;var v=function(){f="",p={},d=!1,u=null};t.reset=v;var g=function(){if(d)throw new Error("Cannot buffer while already buffering");d=!0};t.startBuffering=g;var y=function(){d=!1;var e=f;return f="",e};t.flushToString=y;var b=function(){var e=y();e.length>0&&l(e)};t.flushToStyleTag=b;var _=function(){return Object.keys(p)};t.getRenderedClassNames=_;var C=function(e){e.forEach(function(e){p[e]=!0})};t.addRenderedClassNames=C},function(e,t,n){"use strict";function r(){if(u.length)throw u.shift()}function o(e){var t;t=s.length?s.pop():new i,t.task=e,a(t)}function i(){this.task=null}var a=n(129),s=[],u=[],l=a.makeRequestCallFromTimer(r);e.exports=o,i.prototype.call=function(){try{this.task.call()}catch(e){o.onerror?o.onerror(e):(u.push(e),l())}finally{this.task=null,s[s.length]=this}}},function(e,t){(function(t){"use strict";function n(e){s.length||(a(),u=!0),s[s.length]=e}function r(){for(;lc){for(var t=0,n=s.length-l;t heightOfDisplay; + + if (isScrollingEnabled) { + var topPixels = void 0; + if (mouseMoveY < 0) { + var isScrollAmountAboveTopMessage = maxTop < scrollElementTopOfMessages - mouseMoveY; + if (isScrollAmountAboveTopMessage) { + topPixels = maxTop; + } else { + var topElementToBeMoved = scrollElementTopOfMessages - mouseMoveY; + topPixels = isScrollAmountAboveTopMessage ? maxTop : topElementToBeMoved; + } + } else { + var isScrollAmountBelowBottomMessage = minTop > scrollElementTopOfMessages - mouseMoveY + maxTop; + if (isScrollAmountBelowBottomMessage) { + topPixels = minTop; + } else { + var _topElementToBeMoved = scrollElementTopOfMessages - mouseMoveY + maxTop; + topPixels = isScrollAmountBelowBottomMessage ? minTop : _topElementToBeMoved; + } + } + scrollElement.style.top = topPixels + 'px'; + } + }); + } + }; + _this.state = { startingDelay: props.delay || 1000, messages: props.historicMessages ? props.historicMessages.slice() : [], historicMessages: props.historicMessages ? props.historicMessages.slice() : [], messagesToBeDisplayed: props.messages.slice(), originalMessagesToBeDisplayed: props.messages.slice(), + isScrollable: props.isScrollable, isTyping: false, inbound: true, reset: false, @@ -15017,7 +15068,7 @@ var showChatTemplate = _react2.default.createElement(_ImageLoader2.default, { messages: this.props.messages }), _react2.default.createElement( 'div', - { className: (0, _aphrodite.css)(style.messages) }, + { ref: this.paneDidMount, className: (0, _aphrodite.css)(style.messages) }, _react2.default.createElement(_Messages2.default, { key: this.state.reset, height: style.conversation.height, messages: this.state.messages }) ), _react2.default.createElement( @@ -15036,6 +15087,7 @@ var showChatTemplate = delay: _react.PropTypes.number, height: _react.PropTypes.number, turnOffLoop: _react.PropTypes.bool, + isScrollable: _react.PropTypes.bool, messages: _react.PropTypes.arrayOf(_react.PropTypes.shape({ message: _react.PropTypes.string, src: _react.PropTypes.string, diff --git a/package.json b/package.json index 8707e3e..62b2ca2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chat-template", - "version": "0.0.25", + "version": "0.0.26", "description": "Chat-Template is a React component that enables quick prototyping of bot conversations.", "repository": { "type": "git", @@ -56,10 +56,12 @@ }, "dependencies": { "aphrodite": "0.3.1", - "object-assign-deep": "0.0.4", "material-ui": "0.15.0", + "object-assign-deep": "0.0.4", "react-addons-css-transition-group": "15.1.0", - "react-dom": "15.1.0" + "react-dom": "15.1.0", + "react-scroll": "^1.5.2", + "react-scrollbar": "^0.5.1" }, "main": "dist/index.js", "engines": { diff --git a/src/Chat.js b/src/Chat.js index 023e258..8ee236b 100644 --- a/src/Chat.js +++ b/src/Chat.js @@ -32,6 +32,7 @@ class Chat extends React.Component { this.state = { messages: props.messages ? props.messages.slice() : [], historicMessages: props.historicMessages ? props.historicMessages.slice() : [], + isScrollable: props.isScrollable, }; this.keyPress = this.keyPress.bind(this); } @@ -42,8 +43,11 @@ class Chat extends React.Component { backColor: '#dcf8c6', duration: 800, }; - this.state.messages.push(message); - this.setState({ messages: this.state.messages }); + let messages = this.state.messages; + messages = messages.filter((element) => element.type !== 'typing'); + messages.push({ type: 'typing', duration: 500, inbound: true }); + messages.push(message); + this.setState({ messages }); } keyPress(e) { if (e.key === 'Enter' && e.target.value) { @@ -57,7 +61,7 @@ class Chat extends React.Component { return (
- +
@@ -67,6 +71,7 @@ class Chat extends React.Component { } Chat.propTypes = { turnOffLoop: PropTypes.bool, + isScrollable: PropTypes.bool, messages: PropTypes.arrayOf( PropTypes.shape({ message: PropTypes.string, diff --git a/src/Conversation.js b/src/Conversation.js index e25647e..79eee70 100644 --- a/src/Conversation.js +++ b/src/Conversation.js @@ -47,6 +47,7 @@ class Conversation extends React.Component { historicMessages: props.historicMessages ? props.historicMessages.slice() : [], messagesToBeDisplayed: props.messages.slice(), originalMessagesToBeDisplayed: props.messages.slice(), + isScrollable: props.isScrollable, isTyping: false, inbound: true, reset: false, @@ -119,7 +120,49 @@ class Conversation extends React.Component { }); this.timeoutId = setTimeout(this.showMessage, this.state.startingDelay); } - } + }; + paneDidMount = (node) => { + if (node && this.state.isScrollable) { + node.addEventListener('wheel', (event) => { + const mouseMoveY = event.deltaY; + const conversationDisplayElement = node; + const scrollElement = node.children[0]; + const messagesElement = node.children[0].children[1]; + const heightOfDisplay = conversationDisplayElement.getBoundingClientRect().height; + const bottomOfDisplay = conversationDisplayElement.getBoundingClientRect().bottom; + const heightOfActualMessages = messagesElement.getBoundingClientRect().height; + const scrollElementClientRect = scrollElement.getBoundingClientRect(); + const scrollElementTopOfMessages = scrollElementClientRect.top; + + const maxTop = heightOfDisplay - bottomOfDisplay; + const minTop = (heightOfActualMessages - heightOfDisplay) * -1; + + const isScrollingEnabled = heightOfActualMessages > heightOfDisplay; + + if (isScrollingEnabled) { + let topPixels; + if (mouseMoveY < 0) { + const isScrollAmountAboveTopMessage = maxTop < (scrollElementTopOfMessages - mouseMoveY); + if (isScrollAmountAboveTopMessage) { + topPixels = maxTop; + } else { + const topElementToBeMoved = scrollElementTopOfMessages - mouseMoveY; + topPixels = isScrollAmountAboveTopMessage ? maxTop : topElementToBeMoved; + } + } else { + const isScrollAmountBelowBottomMessage = minTop > (scrollElementTopOfMessages - mouseMoveY + maxTop); + if (isScrollAmountBelowBottomMessage) { + topPixels = minTop; + } else { + const topElementToBeMoved = (scrollElementTopOfMessages - mouseMoveY) + maxTop; + topPixels = isScrollAmountBelowBottomMessage ? minTop : topElementToBeMoved; + } + } + scrollElement.style.top = `${topPixels}px`; + } + }); + } + }; render() { const { isTyping, inbound } = this.state; @@ -136,7 +179,7 @@ class Conversation extends React.Component { return (
-
+
@@ -151,6 +194,7 @@ Conversation.propTypes = { delay: PropTypes.number, height: PropTypes.number, turnOffLoop: PropTypes.bool, + isScrollable: PropTypes.bool, messages: PropTypes.arrayOf( PropTypes.shape({ message: PropTypes.string, diff --git a/src/stories/chat.js b/src/stories/chat.js index beb4f59..ff5a298 100644 --- a/src/stories/chat.js +++ b/src/stories/chat.js @@ -69,4 +69,31 @@ storiesOf('Chat', module)
); +}) +.add('Chat configured styles and ends at the last message and allows the user to add and scroll messages', () => { + const messagesForConversation = [ + { + type: 'typing', + duration: 500, + inbound: true, + }, + { + message: 'Press enter to write a message', + inbound: true, + backColor: 'white', + duration: 1000, + }, + ]; + const historicMessages = [ + { + message: 'Type in the input box below', + inbound: true, + backColor: 'white', + }, + ]; + return ( +
+ +
+ ); });