@botonic/react 0.20.8 → 0.21.0

package/lib/components/image.js

@@ -63,14 +63,14 @@ var Image = function Image(props) {
   var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
       getThemeProperty = _useContext.getThemeProperty;
 
-  var imagePreviewer = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer, null);
+  var ImagePreviewer = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer, null);
 
   if ((0, _core.isBrowser)()) {
     content = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledImage, {
       src: props.src,
       onClick: openPreviewer,
-      hasPreviewer: Boolean(imagePreviewer)
-    }), imagePreviewer && imagePreviewer({
+      hasPreviewer: Boolean(ImagePreviewer)
+    }), ImagePreviewer && /*#__PURE__*/_react["default"].createElement(ImagePreviewer, {
       src: props.src,
       isPreviewerOpened: isPreviewerOpened,
       openPreviewer: openPreviewer,

package/lib/components/image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/image.jsx"],"names":["StyledImage","styled","img","hasPreviewer","serialize","imageProps","image","src","Image","props","content","children","isPreviewerOpened","setIsPreviewerOpened","openPreviewer","closePreviewer","WebchatContext","getThemeProperty","imagePreviewer","WEBCHAT","CUSTOM_PROPERTIES","Boolean","ROLES","IMAGE_MESSAGE","INPUT","IMAGE"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,6BAAOC,GAAV,kMAKL;AAAA,MAAGC,YAAH,QAAGA,YAAH;AAAA,SAAuBA,YAAY,GAAG,SAAH,GAAe,MAAlD;AAAA,CALK,CAAjB;;AAQA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,UAAU,EAAI;AAC9B,SAAO;AAAEC,IAAAA,KAAK,EAAED,UAAU,CAACE;AAApB,GAAP;AACD,CAFD;;AAIO,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAAAC,KAAK,EAAI;AAC5B,MAAIC,OAAO,GAAGD,KAAK,CAACE,QAApB;;AAEA,kBAAkD,qBAAS,KAAT,CAAlD;AAAA;AAAA,MAAOC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,WAAMD,oBAAoB,CAAC,IAAD,CAA1B;AAAA,GAAtB;;AACA,MAAME,cAAc,GAAG,SAAjBA,cAAiB;AAAA,WAAMF,oBAAoB,CAAC,KAAD,CAA1B;AAAA,GAAvB;;AAEA,oBAA6B,uBAAWG,wBAAX,CAA7B;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAMC,cAAc,GAAGD,gBAAgB,CACrCE,mBAAQC,iBAAR,CAA0BF,cADW,EAErC,IAFqC,CAAvC;;AAIA,MAAI,sBAAJ,EAAiB;AACfR,IAAAA,OAAO,gBACL,+EACE,gCAAC,WAAD;AACE,MAAA,GAAG,EAAED,KAAK,CAACF,GADb;AAEE,MAAA,OAAO,EAAEO,aAFX;AAGE,MAAA,YAAY,EAAEO,OAAO,CAACH,cAAD;AAHvB,MADF,EAMGA,cAAc,IACbA,cAAc,CAAC;AACbX,MAAAA,GAAG,EAAEE,KAAK,CAACF,GADE;AAEbK,MAAAA,iBAAiB,EAAjBA,iBAFa;AAGbE,MAAAA,aAAa,EAAbA,aAHa;AAIbC,MAAAA,cAAc,EAAdA;AAJa,KAAD,CAPlB,CADF;AAgBD;;AACD,sBACE,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAEO,iBAAMC,aADd;AAEE,IAAA,IAAI,EAAEnB,SAAS,CAACK,KAAD;AAFjB,KAGMA,KAHN;AAIE,IAAA,IAAI,EAAEe,YAAMC;AAJd,MAMGf,OANH,CADF;AAUD,CAxCM;;;AA0CPF,KAAK,CAACJ,SAAN,GAAkBA,SAAlB","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { ROLES, WEBCHAT } from '../constants'\nimport { WebchatContext } from '../contexts'\nimport { Message } from './message'\n\nconst StyledImage = styled.img`\n  border-radius: 8px;\n  max-width: 150px;\n  max-height: 150px;\n  margin: -3px -6px;\n  cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};\n`\n\nconst serialize = imageProps => {\n  return { image: imageProps.src }\n}\n\nexport const Image = props => {\n  let content = props.children\n\n  const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)\n  const openPreviewer = () => setIsPreviewerOpened(true)\n  const closePreviewer = () => setIsPreviewerOpened(false)\n\n  const { getThemeProperty } = useContext(WebchatContext)\n  const imagePreviewer = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,\n    null\n  )\n  if (isBrowser()) {\n    content = (\n      <>\n        <StyledImage\n          src={props.src}\n          onClick={openPreviewer}\n          hasPreviewer={Boolean(imagePreviewer)}\n        />\n        {imagePreviewer &&\n          imagePreviewer({\n            src: props.src,\n            isPreviewerOpened,\n            openPreviewer,\n            closePreviewer,\n          })}\n      </>\n    )\n  }\n  return (\n    <Message\n      role={ROLES.IMAGE_MESSAGE}\n      json={serialize(props)}\n      {...props}\n      type={INPUT.IMAGE}\n    >\n      {content}\n    </Message>\n  )\n}\n\nImage.serialize = serialize\n"],"file":"image.js"}
+{"version":3,"sources":["../../src/components/image.jsx"],"names":["StyledImage","styled","img","hasPreviewer","serialize","imageProps","image","src","Image","props","content","children","isPreviewerOpened","setIsPreviewerOpened","openPreviewer","closePreviewer","WebchatContext","getThemeProperty","ImagePreviewer","WEBCHAT","CUSTOM_PROPERTIES","imagePreviewer","Boolean","ROLES","IMAGE_MESSAGE","INPUT","IMAGE"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,6BAAOC,GAAV,kMAKL;AAAA,MAAGC,YAAH,QAAGA,YAAH;AAAA,SAAuBA,YAAY,GAAG,SAAH,GAAe,MAAlD;AAAA,CALK,CAAjB;;AAQA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,UAAU,EAAI;AAC9B,SAAO;AAAEC,IAAAA,KAAK,EAAED,UAAU,CAACE;AAApB,GAAP;AACD,CAFD;;AAIO,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAAAC,KAAK,EAAI;AAC5B,MAAIC,OAAO,GAAGD,KAAK,CAACE,QAApB;;AAEA,kBAAkD,qBAAS,KAAT,CAAlD;AAAA;AAAA,MAAOC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,WAAMD,oBAAoB,CAAC,IAAD,CAA1B;AAAA,GAAtB;;AACA,MAAME,cAAc,GAAG,SAAjBA,cAAiB;AAAA,WAAMF,oBAAoB,CAAC,KAAD,CAA1B;AAAA,GAAvB;;AAEA,oBAA6B,uBAAWG,wBAAX,CAA7B;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAMC,cAAc,GAAGD,gBAAgB,CACrCE,mBAAQC,iBAAR,CAA0BC,cADW,EAErC,IAFqC,CAAvC;;AAIA,MAAI,sBAAJ,EAAiB;AACfX,IAAAA,OAAO,gBACL,+EACE,gCAAC,WAAD;AACE,MAAA,GAAG,EAAED,KAAK,CAACF,GADb;AAEE,MAAA,OAAO,EAAEO,aAFX;AAGE,MAAA,YAAY,EAAEQ,OAAO,CAACJ,cAAD;AAHvB,MADF,EAMGA,cAAc,iBACb,gCAAC,cAAD;AACE,MAAA,GAAG,EAAET,KAAK,CAACF,GADb;AAEE,MAAA,iBAAiB,EAAEK,iBAFrB;AAGE,MAAA,aAAa,EAAEE,aAHjB;AAIE,MAAA,cAAc,EAAEC;AAJlB,MAPJ,CADF;AAiBD;;AACD,sBACE,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAEQ,iBAAMC,aADd;AAEE,IAAA,IAAI,EAAEpB,SAAS,CAACK,KAAD;AAFjB,KAGMA,KAHN;AAIE,IAAA,IAAI,EAAEgB,YAAMC;AAJd,MAMGhB,OANH,CADF;AAUD,CAzCM;;;AA2CPF,KAAK,CAACJ,SAAN,GAAkBA,SAAlB","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { ROLES, WEBCHAT } from '../constants'\nimport { WebchatContext } from '../contexts'\nimport { Message } from './message'\n\nconst StyledImage = styled.img`\n  border-radius: 8px;\n  max-width: 150px;\n  max-height: 150px;\n  margin: -3px -6px;\n  cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};\n`\n\nconst serialize = imageProps => {\n  return { image: imageProps.src }\n}\n\nexport const Image = props => {\n  let content = props.children\n\n  const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)\n  const openPreviewer = () => setIsPreviewerOpened(true)\n  const closePreviewer = () => setIsPreviewerOpened(false)\n\n  const { getThemeProperty } = useContext(WebchatContext)\n  const ImagePreviewer = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,\n    null\n  )\n  if (isBrowser()) {\n    content = (\n      <>\n        <StyledImage\n          src={props.src}\n          onClick={openPreviewer}\n          hasPreviewer={Boolean(ImagePreviewer)}\n        />\n        {ImagePreviewer && (\n          <ImagePreviewer\n            src={props.src}\n            isPreviewerOpened={isPreviewerOpened}\n            openPreviewer={openPreviewer}\n            closePreviewer={closePreviewer}\n          />\n        )}\n      </>\n    )\n  }\n  return (\n    <Message\n      role={ROLES.IMAGE_MESSAGE}\n      json={serialize(props)}\n      {...props}\n      type={INPUT.IMAGE}\n    >\n      {content}\n    </Message>\n  )\n}\n\nImage.serialize = serialize\n"],"file":"image.js"}

package/lib/components/index.d.ts

@@ -112,7 +112,7 @@ export interface BlobProps {
   blobTick?: boolean
   blobTickStyle?: any
   blobWidth?: string
-  imagestyle?: any
+  imageStyle?: any
 }
 
 export interface ScrollbarProps {
@@ -189,7 +189,7 @@ export interface ThemeProps extends StyleProp {
 }
 
 export interface CoverComponentOptions {
-  component: React.Component<CoverComponentProps>
+  component: React.ComponentType<CoverComponentProps>
   props?: any
 }
 

package/lib/components/message.js

@@ -317,7 +317,9 @@ var Message = function Message(props) {
       markdownstyle: (0, _markdown.getMarkdownStyle)(getThemeProperty, isFromUser ? _constants.COLORS.SEASHELL_WHITE : brandColor)
     }) : /*#__PURE__*/_react["default"].createElement(BlobText, {
       blob: blob
-    }, textChildren), buttons, Boolean(blob) && hasBlobTick() && getBlobTick(6), Boolean(blob) && hasBlobTick() && getBlobTick(5))), timestampsEnabled && /*#__PURE__*/_react["default"].createElement(_timestamps.MessageTimestamp, {
+    }, textChildren), !!buttons.length && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "message-buttons-container"
+    }, buttons), Boolean(blob) && hasBlobTick() && getBlobTick(6), Boolean(blob) && hasBlobTick() && getBlobTick(5))), timestampsEnabled && /*#__PURE__*/_react["default"].createElement(_timestamps.MessageTimestamp, {
       timestamp: m.timestamp,
       style: timestampStyle,
       isfromuser: isFromUser

package/lib/components/message.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/message.jsx"],"names":["MessageContainer","styled","div","props","isfromuser","BotMessageImageContainer","Blob","bgcolor","color","blob","blobwidth","BlobText","markdownstyle","BlobTickContainer","BlobTick","pointerSize","COLORS","TRANSPARENT","Message","RequestContext","defaultTyping","defaultDelay","type","from","SENDERS","bot","delay","typing","children","enabletimestamps","enableTimestamps","json","style","imagestyle","imageStyle","otherProps","isFromUser","user","isFromBot","markdown","WebchatContext","webchatState","addMessage","updateReplies","getThemeProperty","id","state","setState","disabled","setDisabled","ButtonsDisabler","updateChildrenButtons","parentId","replies","React","Children","toArray","filter","e","Reply","buttons","Button","textChildren","includes","map","timestampsEnabled","getFormattedTimestamp","timestampStyle","getEnvAck","isDev","ack","undefined","decomposedChildren","message","data","timestamp","b","payload","path","url","target","webview","String","title","withDisabledProps","r","text","display","customTypeName","msg","messagesJSON","find","m","length","brandColor","WEBCHAT","CUSTOM_PROPERTIES","BOTONIC_BLUE","getBgColor","userMessageBackground","botMessageBackground","SEASHELL_WHITE","getMessageStyle","botMessageStyle","userMessageStyle","hasBlobTick","renderBrowser","getBlobTick","containerStyle","blobTickStyle","right","marginRight","borderRight","borderLeftColor","left","marginLeft","borderLeft","borderRightColor","BotMessageImage","botMessageImage","brandImage","DEFAULTS","LOGO","animationsEnabled","enableAnimations","resolveCustomTypeName","INPUT","CUSTOM","className","messageStyle","botMessageImageStyle","width","SOLID_WHITE","SOLID_BLACK","botMessageBlobWidth","opacity","__html","Boolean","_blob","_json","nodeProps","renderNode","JSON","stringify"],"mappings":"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","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useEffect, useState } from 'react'\nimport Fade from 'react-reveal/Fade'\nimport styled from 'styled-components'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { COLORS, SENDERS, WEBCHAT } from '../constants'\nimport { RequestContext, WebchatContext } from '../contexts'\nimport { isDev, resolveImage } from '../util/environment'\nimport { ConditionalWrapper, renderComponent } from '../util/react'\nimport { Button } from './button'\nimport { ButtonsDisabler } from './buttons-disabler'\nimport { getMarkdownStyle, renderLinks, renderMarkdown } from './markdown'\nimport { Reply } from './reply'\nimport { MessageTimestamp, resolveMessageTimestamps } from './timestamps'\n\nconst MessageContainer = styled.div`\n  display: flex;\n  justify-content: ${props => (props.isfromuser ? 'flex-end' : 'flex-start')};\n  position: relative;\n  padding: 0px 6px;\n`\n\nconst BotMessageImageContainer = styled.div`\n  width: 28px;\n  padding: 12px 4px;\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Blob = styled.div`\n  position: relative;\n  margin: 8px;\n  border-radius: 8px;\n  background-color: ${props => props.bgcolor};\n  color: ${props => props.color};\n  max-width: ${props =>\n    props.blob\n      ? props.blobwidth\n        ? props.blobwidth\n        : '60%'\n      : 'calc(100% - 16px)'};\n`\n\nconst BlobText = styled.div`\n  padding: ${props => (props.blob ? '8px 12px' : '0px')};\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  ${props => props.markdownstyle}\n`\n\nconst BlobTickContainer = styled.div`\n  position: absolute;\n  box-sizing: border-box;\n  height: 100%;\n  padding: 18px 0px 18px 0px;\n  display: flex;\n  top: 0;\n  align-items: center;\n`\nconst BlobTick = styled.div`\n  position: relative;\n  margin: -${props => props.pointerSize}px 0px;\n  border: ${props => props.pointerSize}px solid ${COLORS.TRANSPARENT};\n`\n\nexport const Message = props => {\n  const { defaultTyping, defaultDelay } = useContext(RequestContext)\n  let {\n    type = '',\n    blob = true,\n    from = SENDERS.bot,\n    delay = defaultDelay,\n    typing = defaultTyping,\n    children,\n    enabletimestamps = props.enabletimestamps || props.enableTimestamps,\n    json,\n    style,\n    imagestyle = props.imagestyle || props.imageStyle,\n    ...otherProps\n  } = props\n  const isFromUser = from === SENDERS.user\n  const isFromBot = from === SENDERS.bot\n  const markdown = props.markdown\n  const {\n    webchatState,\n    addMessage,\n    updateReplies,\n    getThemeProperty,\n  } = useContext(WebchatContext)\n  const [state, setState] = useState({\n    id: props.id || uuidv4(),\n  })\n\n  const [disabled, setDisabled] = useState(false)\n  children = ButtonsDisabler.updateChildrenButtons(children, {\n    parentId: state.id,\n    disabled,\n    setDisabled,\n  })\n  const replies = React.Children.toArray(children).filter(e => e.type === Reply)\n  const buttons = React.Children.toArray(children).filter(\n    e => e.type === Button\n  )\n\n  let textChildren = React.Children.toArray(children).filter(\n    e => ![Button, Reply].includes(e.type)\n  )\n  if (isFromUser)\n    textChildren = textChildren.map(e =>\n      typeof e === 'string' ? renderLinks(e) : e\n    )\n\n  const {\n    timestampsEnabled,\n    getFormattedTimestamp,\n    timestampStyle,\n  } = resolveMessageTimestamps(getThemeProperty, enabletimestamps)\n\n  const getEnvAck = () => {\n    if (isDev) return 1\n    if (!isFromUser) return 1\n    if (props.ack !== undefined) return props.ack\n    return 0\n  }\n\n  const ack = getEnvAck()\n\n  if (isBrowser()) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const decomposedChildren = json\n      const message = {\n        id: state.id,\n        type,\n        data: decomposedChildren ? decomposedChildren : textChildren,\n        timestamp: props.timestamp || getFormattedTimestamp,\n        markdown,\n        from,\n        buttons: buttons.map(b => ({\n          parentId: b.props.parentId,\n          payload: b.props.payload,\n          path: b.props.path,\n          url: b.props.url,\n          target: b.props.target,\n          webview: b.props.webview && String(b.props.webview),\n          title: b.props.children,\n          ...ButtonsDisabler.withDisabledProps(b.props),\n        })),\n        delay,\n        typing,\n        replies: replies.map(r => ({\n          payload: r.props.payload,\n          path: r.props.path,\n          url: r.props.url,\n          text: r.props.children,\n        })),\n        display: delay + typing == 0,\n        customTypeName: decomposedChildren.customTypeName,\n        ack: ack,\n      }\n      addMessage(message)\n    }, [])\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const msg = webchatState.messagesJSON.find(m => m.id === state.id)\n      if (\n        msg &&\n        msg.display &&\n        webchatState.messagesJSON.filter(m => !m.display).length == 0\n      ) {\n        updateReplies(replies)\n      }\n    }, [webchatState.messagesJSON])\n  }\n\n  const brandColor = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.brandColor,\n    COLORS.BOTONIC_BLUE\n  )\n\n  const getBgColor = () => {\n    if (!blob) return COLORS.TRANSPARENT\n    if (isFromUser) {\n      return getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground,\n        brandColor\n      )\n    }\n    return getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground,\n      COLORS.SEASHELL_WHITE\n    )\n  }\n\n  const getMessageStyle = () =>\n    isFromBot\n      ? getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle)\n      : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle)\n\n  const hasBlobTick = () => getThemeProperty(`message.${from}.blobTick`, true)\n\n  const renderBrowser = () => {\n    const m = webchatState.messagesJSON.find(m => m.id === state.id)\n    if (!m || !m.display) return <></>\n\n    const getBlobTick = pointerSize => {\n      // to add a border to the blobTick we need to create two triangles and overlap them\n      // that is why the color depends on the pointerSize\n      // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/\n      const color =\n        pointerSize == 5\n          ? getBgColor()\n          : getThemeProperty(\n              `message.${from}.style.borderColor`,\n              COLORS.TRANSPARENT\n            )\n      const containerStyle = {\n        ...getThemeProperty(`message.${from}.blobTickStyle`),\n      }\n      const blobTickStyle = {}\n      if (isFromUser) {\n        containerStyle.right = 0\n        containerStyle.marginRight = -pointerSize\n        blobTickStyle.borderRight = 0\n        blobTickStyle.borderLeftColor = color\n      } else {\n        containerStyle.left = 0\n        containerStyle.marginLeft = -pointerSize\n        blobTickStyle.borderLeft = 0\n        blobTickStyle.borderRightColor = color\n      }\n      return (\n        <BlobTickContainer style={containerStyle}>\n          <BlobTick pointerSize={pointerSize} style={blobTickStyle} />\n        </BlobTickContainer>\n      )\n    }\n\n    const BotMessageImage = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,\n      getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.brandImage,\n        WEBCHAT.DEFAULTS.LOGO\n      )\n    )\n    const animationsEnabled = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,\n      true\n    )\n\n    const resolveCustomTypeName = () =>\n      isFromBot && type === INPUT.CUSTOM ? ` ${m.customTypeName}` : ''\n\n    const className = `${type}-${from}${resolveCustomTypeName()}`\n    return (\n      <ConditionalWrapper\n        condition={animationsEnabled}\n        wrapper={children => <Fade>{children}</Fade>}\n      >\n        <>\n          <MessageContainer\n            isfromuser={isFromUser}\n            style={{\n              ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),\n            }}\n          >\n            {isFromBot && BotMessageImage && (\n              <BotMessageImageContainer\n                style={{\n                  ...getThemeProperty(\n                    WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle\n                  ),\n                  ...imagestyle,\n                }}\n              >\n                <img\n                  style={{ width: '100%' }}\n                  src={resolveImage(BotMessageImage)}\n                />\n              </BotMessageImageContainer>\n            )}\n            <Blob\n              className={className}\n              bgcolor={getBgColor()}\n              color={isFromUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}\n              blobwidth={getThemeProperty(\n                WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth\n              )}\n              blob={blob}\n              style={{\n                ...getMessageStyle(),\n                ...style,\n                ...{ opacity: ack === 0 ? 0.6 : 1 },\n              }}\n              {...otherProps}\n            >\n              {markdown ? (\n                <BlobText\n                  blob={blob}\n                  dangerouslySetInnerHTML={{\n                    __html: renderMarkdown(textChildren),\n                  }}\n                  markdownstyle={getMarkdownStyle(\n                    getThemeProperty,\n                    isFromUser ? COLORS.SEASHELL_WHITE : brandColor\n                  )}\n                />\n              ) : (\n                <BlobText blob={blob}>{textChildren}</BlobText>\n              )}\n              {buttons}\n              {Boolean(blob) && hasBlobTick() && getBlobTick(6)}\n              {Boolean(blob) && hasBlobTick() && getBlobTick(5)}\n            </Blob>\n          </MessageContainer>\n          {timestampsEnabled && (\n            <MessageTimestamp\n              timestamp={m.timestamp}\n              style={timestampStyle}\n              isfromuser={isFromUser}\n            />\n          )}\n        </>\n      </ConditionalWrapper>\n    )\n  }\n\n  const { blob: _blob, json: _json, ...nodeProps } = props\n  const renderNode = () =>\n    type === INPUT.CUSTOM ? (\n      <message\n        json={JSON.stringify(_json)}\n        typing={typing}\n        delay={delay}\n        {...nodeProps}\n      />\n    ) : (\n      <message typing={typing} delay={delay} {...nodeProps}>\n        {children}\n      </message>\n    )\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n"],"file":"message.js"}
+{"version":3,"sources":["../../src/components/message.jsx"],"names":["MessageContainer","styled","div","props","isfromuser","BotMessageImageContainer","Blob","bgcolor","color","blob","blobwidth","BlobText","markdownstyle","BlobTickContainer","BlobTick","pointerSize","COLORS","TRANSPARENT","Message","RequestContext","defaultTyping","defaultDelay","type","from","SENDERS","bot","delay","typing","children","enabletimestamps","enableTimestamps","json","style","imagestyle","imageStyle","otherProps","isFromUser","user","isFromBot","markdown","WebchatContext","webchatState","addMessage","updateReplies","getThemeProperty","id","state","setState","disabled","setDisabled","ButtonsDisabler","updateChildrenButtons","parentId","replies","React","Children","toArray","filter","e","Reply","buttons","Button","textChildren","includes","map","timestampsEnabled","getFormattedTimestamp","timestampStyle","getEnvAck","isDev","ack","undefined","decomposedChildren","message","data","timestamp","b","payload","path","url","target","webview","String","title","withDisabledProps","r","text","display","customTypeName","msg","messagesJSON","find","m","length","brandColor","WEBCHAT","CUSTOM_PROPERTIES","BOTONIC_BLUE","getBgColor","userMessageBackground","botMessageBackground","SEASHELL_WHITE","getMessageStyle","botMessageStyle","userMessageStyle","hasBlobTick","renderBrowser","getBlobTick","containerStyle","blobTickStyle","right","marginRight","borderRight","borderLeftColor","left","marginLeft","borderLeft","borderRightColor","BotMessageImage","botMessageImage","brandImage","DEFAULTS","LOGO","animationsEnabled","enableAnimations","resolveCustomTypeName","INPUT","CUSTOM","className","messageStyle","botMessageImageStyle","width","SOLID_WHITE","SOLID_BLACK","botMessageBlobWidth","opacity","__html","Boolean","_blob","_json","nodeProps","renderNode","JSON","stringify"],"mappings":"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","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useEffect, useState } from 'react'\nimport Fade from 'react-reveal/Fade'\nimport styled from 'styled-components'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { COLORS, SENDERS, WEBCHAT } from '../constants'\nimport { RequestContext, WebchatContext } from '../contexts'\nimport { isDev, resolveImage } from '../util/environment'\nimport { ConditionalWrapper, renderComponent } from '../util/react'\nimport { Button } from './button'\nimport { ButtonsDisabler } from './buttons-disabler'\nimport { getMarkdownStyle, renderLinks, renderMarkdown } from './markdown'\nimport { Reply } from './reply'\nimport { MessageTimestamp, resolveMessageTimestamps } from './timestamps'\n\nconst MessageContainer = styled.div`\n  display: flex;\n  justify-content: ${props => (props.isfromuser ? 'flex-end' : 'flex-start')};\n  position: relative;\n  padding: 0px 6px;\n`\n\nconst BotMessageImageContainer = styled.div`\n  width: 28px;\n  padding: 12px 4px;\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Blob = styled.div`\n  position: relative;\n  margin: 8px;\n  border-radius: 8px;\n  background-color: ${props => props.bgcolor};\n  color: ${props => props.color};\n  max-width: ${props =>\n    props.blob\n      ? props.blobwidth\n        ? props.blobwidth\n        : '60%'\n      : 'calc(100% - 16px)'};\n`\n\nconst BlobText = styled.div`\n  padding: ${props => (props.blob ? '8px 12px' : '0px')};\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  ${props => props.markdownstyle}\n`\n\nconst BlobTickContainer = styled.div`\n  position: absolute;\n  box-sizing: border-box;\n  height: 100%;\n  padding: 18px 0px 18px 0px;\n  display: flex;\n  top: 0;\n  align-items: center;\n`\nconst BlobTick = styled.div`\n  position: relative;\n  margin: -${props => props.pointerSize}px 0px;\n  border: ${props => props.pointerSize}px solid ${COLORS.TRANSPARENT};\n`\n\nexport const Message = props => {\n  const { defaultTyping, defaultDelay } = useContext(RequestContext)\n  let {\n    type = '',\n    blob = true,\n    from = SENDERS.bot,\n    delay = defaultDelay,\n    typing = defaultTyping,\n    children,\n    enabletimestamps = props.enabletimestamps || props.enableTimestamps,\n    json,\n    style,\n    imagestyle = props.imagestyle || props.imageStyle,\n    ...otherProps\n  } = props\n  const isFromUser = from === SENDERS.user\n  const isFromBot = from === SENDERS.bot\n  const markdown = props.markdown\n  const {\n    webchatState,\n    addMessage,\n    updateReplies,\n    getThemeProperty,\n  } = useContext(WebchatContext)\n  const [state, setState] = useState({\n    id: props.id || uuidv4(),\n  })\n\n  const [disabled, setDisabled] = useState(false)\n  children = ButtonsDisabler.updateChildrenButtons(children, {\n    parentId: state.id,\n    disabled,\n    setDisabled,\n  })\n  const replies = React.Children.toArray(children).filter(e => e.type === Reply)\n  const buttons = React.Children.toArray(children).filter(\n    e => e.type === Button\n  )\n\n  let textChildren = React.Children.toArray(children).filter(\n    e => ![Button, Reply].includes(e.type)\n  )\n  if (isFromUser)\n    textChildren = textChildren.map(e =>\n      typeof e === 'string' ? renderLinks(e) : e\n    )\n\n  const {\n    timestampsEnabled,\n    getFormattedTimestamp,\n    timestampStyle,\n  } = resolveMessageTimestamps(getThemeProperty, enabletimestamps)\n\n  const getEnvAck = () => {\n    if (isDev) return 1\n    if (!isFromUser) return 1\n    if (props.ack !== undefined) return props.ack\n    return 0\n  }\n\n  const ack = getEnvAck()\n\n  if (isBrowser()) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const decomposedChildren = json\n      const message = {\n        id: state.id,\n        type,\n        data: decomposedChildren ? decomposedChildren : textChildren,\n        timestamp: props.timestamp || getFormattedTimestamp,\n        markdown,\n        from,\n        buttons: buttons.map(b => ({\n          parentId: b.props.parentId,\n          payload: b.props.payload,\n          path: b.props.path,\n          url: b.props.url,\n          target: b.props.target,\n          webview: b.props.webview && String(b.props.webview),\n          title: b.props.children,\n          ...ButtonsDisabler.withDisabledProps(b.props),\n        })),\n        delay,\n        typing,\n        replies: replies.map(r => ({\n          payload: r.props.payload,\n          path: r.props.path,\n          url: r.props.url,\n          text: r.props.children,\n        })),\n        display: delay + typing == 0,\n        customTypeName: decomposedChildren.customTypeName,\n        ack: ack,\n      }\n      addMessage(message)\n    }, [])\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const msg = webchatState.messagesJSON.find(m => m.id === state.id)\n      if (\n        msg &&\n        msg.display &&\n        webchatState.messagesJSON.filter(m => !m.display).length == 0\n      ) {\n        updateReplies(replies)\n      }\n    }, [webchatState.messagesJSON])\n  }\n\n  const brandColor = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.brandColor,\n    COLORS.BOTONIC_BLUE\n  )\n\n  const getBgColor = () => {\n    if (!blob) return COLORS.TRANSPARENT\n    if (isFromUser) {\n      return getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground,\n        brandColor\n      )\n    }\n    return getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground,\n      COLORS.SEASHELL_WHITE\n    )\n  }\n\n  const getMessageStyle = () =>\n    isFromBot\n      ? getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle)\n      : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle)\n\n  const hasBlobTick = () => getThemeProperty(`message.${from}.blobTick`, true)\n\n  const renderBrowser = () => {\n    const m = webchatState.messagesJSON.find(m => m.id === state.id)\n    if (!m || !m.display) return <></>\n\n    const getBlobTick = pointerSize => {\n      // to add a border to the blobTick we need to create two triangles and overlap them\n      // that is why the color depends on the pointerSize\n      // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/\n      const color =\n        pointerSize == 5\n          ? getBgColor()\n          : getThemeProperty(\n              `message.${from}.style.borderColor`,\n              COLORS.TRANSPARENT\n            )\n      const containerStyle = {\n        ...getThemeProperty(`message.${from}.blobTickStyle`),\n      }\n      const blobTickStyle = {}\n      if (isFromUser) {\n        containerStyle.right = 0\n        containerStyle.marginRight = -pointerSize\n        blobTickStyle.borderRight = 0\n        blobTickStyle.borderLeftColor = color\n      } else {\n        containerStyle.left = 0\n        containerStyle.marginLeft = -pointerSize\n        blobTickStyle.borderLeft = 0\n        blobTickStyle.borderRightColor = color\n      }\n      return (\n        <BlobTickContainer style={containerStyle}>\n          <BlobTick pointerSize={pointerSize} style={blobTickStyle} />\n        </BlobTickContainer>\n      )\n    }\n\n    const BotMessageImage = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,\n      getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.brandImage,\n        WEBCHAT.DEFAULTS.LOGO\n      )\n    )\n    const animationsEnabled = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,\n      true\n    )\n\n    const resolveCustomTypeName = () =>\n      isFromBot && type === INPUT.CUSTOM ? ` ${m.customTypeName}` : ''\n\n    const className = `${type}-${from}${resolveCustomTypeName()}`\n    return (\n      <ConditionalWrapper\n        condition={animationsEnabled}\n        wrapper={children => <Fade>{children}</Fade>}\n      >\n        <>\n          <MessageContainer\n            isfromuser={isFromUser}\n            style={{\n              ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),\n            }}\n          >\n            {isFromBot && BotMessageImage && (\n              <BotMessageImageContainer\n                style={{\n                  ...getThemeProperty(\n                    WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle\n                  ),\n                  ...imagestyle,\n                }}\n              >\n                <img\n                  style={{ width: '100%' }}\n                  src={resolveImage(BotMessageImage)}\n                />\n              </BotMessageImageContainer>\n            )}\n            <Blob\n              className={className}\n              bgcolor={getBgColor()}\n              color={isFromUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}\n              blobwidth={getThemeProperty(\n                WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth\n              )}\n              blob={blob}\n              style={{\n                ...getMessageStyle(),\n                ...style,\n                ...{ opacity: ack === 0 ? 0.6 : 1 },\n              }}\n              {...otherProps}\n            >\n              {markdown ? (\n                <BlobText\n                  blob={blob}\n                  dangerouslySetInnerHTML={{\n                    __html: renderMarkdown(textChildren),\n                  }}\n                  markdownstyle={getMarkdownStyle(\n                    getThemeProperty,\n                    isFromUser ? COLORS.SEASHELL_WHITE : brandColor\n                  )}\n                />\n              ) : (\n                <BlobText blob={blob}>{textChildren}</BlobText>\n              )}\n              {!!buttons.length && (\n                <div className='message-buttons-container'>{buttons}</div>\n              )}\n              {Boolean(blob) && hasBlobTick() && getBlobTick(6)}\n              {Boolean(blob) && hasBlobTick() && getBlobTick(5)}\n            </Blob>\n          </MessageContainer>\n          {timestampsEnabled && (\n            <MessageTimestamp\n              timestamp={m.timestamp}\n              style={timestampStyle}\n              isfromuser={isFromUser}\n            />\n          )}\n        </>\n      </ConditionalWrapper>\n    )\n  }\n\n  const { blob: _blob, json: _json, ...nodeProps } = props\n  const renderNode = () =>\n    type === INPUT.CUSTOM ? (\n      <message\n        json={JSON.stringify(_json)}\n        typing={typing}\n        delay={delay}\n        {...nodeProps}\n      />\n    ) : (\n      <message typing={typing} delay={delay} {...nodeProps}>\n        {children}\n      </message>\n    )\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n"],"file":"message.js"}

package/lib/components/timestamps.js

@@ -56,7 +56,10 @@ var MessageTimestamp = function MessageTimestamp(_ref) {
   var timestamp = _ref.timestamp,
       style = _ref.style,
       isfromuser = _ref.isfromuser;
-  return /*#__PURE__*/_react["default"].createElement(TimestampContainer, null, /*#__PURE__*/_react["default"].createElement(TimestampText, {
+  var classSufix = isfromuser ? 'user' : 'bot';
+  return /*#__PURE__*/_react["default"].createElement(TimestampContainer, {
+    className: "botonic-timestamp-".concat(classSufix)
+  }, /*#__PURE__*/_react["default"].createElement(TimestampText, {
     isfromuser: isfromuser,
     style: _objectSpread({}, style)
   }, timestamp));

package/lib/components/timestamps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/timestamps.jsx"],"names":["resolveMessageTimestamps","getThemeFn","messageTimestampEnabled","timestampsFormat","timestampStyle","timestampsEnabled","Boolean","undefined","defaultTimestampFormat","month","day","hour","minute","second","getFormattedTimestamp","Date","toLocaleString","TimestampContainer","styled","div","TimestampText","COLORS","SOLID_BLACK","props","isfromuser","MessageTimestamp","timestamp","style"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;AAEO,IAAMA,wBAAwB,GAAG,SAA3BA,wBAA2B,CACtCC,UADsC,EAEtCC,uBAFsC,EAGnC;AACH,MAAMC,gBAAgB,GAAGF,UAAU,CAAC,2BAAD,CAAnC;AACA,MAAMG,cAAc,GAAGH,UAAU,CAAC,0BAAD,CAAjC;AACA,MAAMI,iBAAiB,GAAGC,OAAO,CAC/BJ,uBAAuB,KAAKK,SAA5B,GACIL,uBADJ,GAEID,UAAU,CACR,2BADQ,EAERK,OAAO,CAACF,cAAD,CAAP,IAA2BE,OAAO,CAACH,gBAAD,CAAlC,IAAwD,KAFhD,CAHiB,CAAjC;AAQA,MAAMK,sBAAsB,GAAG;AAC7BC,IAAAA,KAAK,EAAE,OADsB;AAE7BC,IAAAA,GAAG,EAAE,SAFwB;AAG7BC,IAAAA,IAAI,EAAE,SAHuB;AAI7BC,IAAAA,MAAM,EAAE,SAJqB;AAK7BC,IAAAA,MAAM,EAAE;AALqB,GAA/B;AAOA,MAAMC,qBAAqB,GACxBX,gBAAgB,IAAIA,gBAAgB,EAArC,IACA,IAAIY,IAAJ,GAAWC,cAAX,CAA0BT,SAA1B,EAAqCC,sBAArC,CAFF;AAGA,SAAO;AACLH,IAAAA,iBAAiB,EAAjBA,iBADK;AAELS,IAAAA,qBAAqB,EAArBA,qBAFK;AAGLV,IAAAA,cAAc,EAAdA;AAHK,GAAP;AAKD,CA7BM;;;;AA+BP,IAAMa,kBAAkB,GAAGC,6BAAOC,GAAV,6JAAxB;;AAMA,IAAMC,aAAa,GAAGF,6BAAOC,GAAV,mSAIRE,kBAAOC,WAJC,EAMH,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,OAAnB,GAA6B,MAAlC;AAAA,CANF,EAON,UAAAD,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,UAAnB,GAAgC,UAArC;AAAA,CAPC,CAAnB;;AAWO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAsC;AAAA,MAAnCC,SAAmC,QAAnCA,SAAmC;AAAA,MAAxBC,KAAwB,QAAxBA,KAAwB;AAAA,MAAjBH,UAAiB,QAAjBA,UAAiB;AACpE,sBACE,gCAAC,kBAAD,qBACE,gCAAC,aAAD;AACE,IAAA,UAAU,EAAEA,UADd;AAEE,IAAA,KAAK,oBACAG,KADA;AAFP,KAMGD,SANH,CADF,CADF;AAYD,CAbM","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS } from '../constants'\n\nexport const resolveMessageTimestamps = (\n  getThemeFn,\n  messageTimestampEnabled\n) => {\n  const timestampsFormat = getThemeFn('message.timestamps.format')\n  const timestampStyle = getThemeFn('message.timestamps.style')\n  const timestampsEnabled = Boolean(\n    messageTimestampEnabled !== undefined\n      ? messageTimestampEnabled\n      : getThemeFn(\n          'message.timestamps.enable',\n          Boolean(timestampStyle) || Boolean(timestampsFormat) || false\n        )\n  )\n  const defaultTimestampFormat = {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: 'numeric',\n    second: 'numeric',\n  }\n  const getFormattedTimestamp =\n    (timestampsFormat && timestampsFormat()) ||\n    new Date().toLocaleString(undefined, defaultTimestampFormat)\n  return {\n    timestampsEnabled,\n    getFormattedTimestamp,\n    timestampStyle,\n  }\n}\n\nconst TimestampContainer = styled.div`\n  display: flex;\n  position: relative;\n  align-items: flex-start;\n`\n\nconst TimestampText = styled.div`\n  @import url('https://fonts.googleapis.com/css?family=Lato');\n  font-family: Lato;\n  font-size: 10px;\n  color: ${COLORS.SOLID_BLACK};\n  width: 100%;\n  text-align: ${props => (props.isfromuser ? 'right' : 'left')};\n  padding: ${props => (props.isfromuser ? '0px 15px' : '0px 50px')};\n  margin-bottom: 5px;\n`\n\nexport const MessageTimestamp = ({ timestamp, style, isfromuser }) => {\n  return (\n    <TimestampContainer>\n      <TimestampText\n        isfromuser={isfromuser}\n        style={{\n          ...style,\n        }}\n      >\n        {timestamp}\n      </TimestampText>\n    </TimestampContainer>\n  )\n}\n"],"file":"timestamps.js"}
+{"version":3,"sources":["../../src/components/timestamps.jsx"],"names":["resolveMessageTimestamps","getThemeFn","messageTimestampEnabled","timestampsFormat","timestampStyle","timestampsEnabled","Boolean","undefined","defaultTimestampFormat","month","day","hour","minute","second","getFormattedTimestamp","Date","toLocaleString","TimestampContainer","styled","div","TimestampText","COLORS","SOLID_BLACK","props","isfromuser","MessageTimestamp","timestamp","style","classSufix"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;AAEO,IAAMA,wBAAwB,GAAG,SAA3BA,wBAA2B,CACtCC,UADsC,EAEtCC,uBAFsC,EAGnC;AACH,MAAMC,gBAAgB,GAAGF,UAAU,CAAC,2BAAD,CAAnC;AACA,MAAMG,cAAc,GAAGH,UAAU,CAAC,0BAAD,CAAjC;AACA,MAAMI,iBAAiB,GAAGC,OAAO,CAC/BJ,uBAAuB,KAAKK,SAA5B,GACIL,uBADJ,GAEID,UAAU,CACR,2BADQ,EAERK,OAAO,CAACF,cAAD,CAAP,IAA2BE,OAAO,CAACH,gBAAD,CAAlC,IAAwD,KAFhD,CAHiB,CAAjC;AAQA,MAAMK,sBAAsB,GAAG;AAC7BC,IAAAA,KAAK,EAAE,OADsB;AAE7BC,IAAAA,GAAG,EAAE,SAFwB;AAG7BC,IAAAA,IAAI,EAAE,SAHuB;AAI7BC,IAAAA,MAAM,EAAE,SAJqB;AAK7BC,IAAAA,MAAM,EAAE;AALqB,GAA/B;AAOA,MAAMC,qBAAqB,GACxBX,gBAAgB,IAAIA,gBAAgB,EAArC,IACA,IAAIY,IAAJ,GAAWC,cAAX,CAA0BT,SAA1B,EAAqCC,sBAArC,CAFF;AAGA,SAAO;AACLH,IAAAA,iBAAiB,EAAjBA,iBADK;AAELS,IAAAA,qBAAqB,EAArBA,qBAFK;AAGLV,IAAAA,cAAc,EAAdA;AAHK,GAAP;AAKD,CA7BM;;;;AA+BP,IAAMa,kBAAkB,GAAGC,6BAAOC,GAAV,6JAAxB;;AAMA,IAAMC,aAAa,GAAGF,6BAAOC,GAAV,mSAIRE,kBAAOC,WAJC,EAMH,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,OAAnB,GAA6B,MAAlC;AAAA,CANF,EAON,UAAAD,KAAK;AAAA,SAAKA,KAAK,CAACC,UAAN,GAAmB,UAAnB,GAAgC,UAArC;AAAA,CAPC,CAAnB;;AAWO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAsC;AAAA,MAAnCC,SAAmC,QAAnCA,SAAmC;AAAA,MAAxBC,KAAwB,QAAxBA,KAAwB;AAAA,MAAjBH,UAAiB,QAAjBA,UAAiB;AACpE,MAAMI,UAAU,GAAGJ,UAAU,GAAG,MAAH,GAAY,KAAzC;AACA,sBACE,gCAAC,kBAAD;AAAoB,IAAA,SAAS,8BAAuBI,UAAvB;AAA7B,kBACE,gCAAC,aAAD;AACE,IAAA,UAAU,EAAEJ,UADd;AAEE,IAAA,KAAK,oBACAG,KADA;AAFP,KAMGD,SANH,CADF,CADF;AAYD,CAdM","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS } from '../constants'\n\nexport const resolveMessageTimestamps = (\n  getThemeFn,\n  messageTimestampEnabled\n) => {\n  const timestampsFormat = getThemeFn('message.timestamps.format')\n  const timestampStyle = getThemeFn('message.timestamps.style')\n  const timestampsEnabled = Boolean(\n    messageTimestampEnabled !== undefined\n      ? messageTimestampEnabled\n      : getThemeFn(\n          'message.timestamps.enable',\n          Boolean(timestampStyle) || Boolean(timestampsFormat) || false\n        )\n  )\n  const defaultTimestampFormat = {\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: 'numeric',\n    second: 'numeric',\n  }\n  const getFormattedTimestamp =\n    (timestampsFormat && timestampsFormat()) ||\n    new Date().toLocaleString(undefined, defaultTimestampFormat)\n  return {\n    timestampsEnabled,\n    getFormattedTimestamp,\n    timestampStyle,\n  }\n}\n\nconst TimestampContainer = styled.div`\n  display: flex;\n  position: relative;\n  align-items: flex-start;\n`\n\nconst TimestampText = styled.div`\n  @import url('https://fonts.googleapis.com/css?family=Lato');\n  font-family: Lato;\n  font-size: 10px;\n  color: ${COLORS.SOLID_BLACK};\n  width: 100%;\n  text-align: ${props => (props.isfromuser ? 'right' : 'left')};\n  padding: ${props => (props.isfromuser ? '0px 15px' : '0px 50px')};\n  margin-bottom: 5px;\n`\n\nexport const MessageTimestamp = ({ timestamp, style, isfromuser }) => {\n  const classSufix = isfromuser ? 'user' : 'bot'\n  return (\n    <TimestampContainer className={`botonic-timestamp-${classSufix}`}>\n      <TimestampText\n        isfromuser={isfromuser}\n        style={{\n          ...style,\n        }}\n      >\n        {timestamp}\n      </TimestampText>\n    </TimestampContainer>\n  )\n}\n"],"file":"timestamps.js"}

package/lib/index.d.ts

@@ -112,7 +112,7 @@ export interface WebchatArgs {
   onOpen?: (app: WebchatApp, args: any) => void
   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
   persistentMenu?: PersistentMenuTheme
-  storage?: Storage
+  storage?: Storage | null
   storageKey?: any
   theme?: ThemeProps
 }
@@ -171,6 +171,7 @@ export class WebchatApp {
   clearMessages(): void
   close(): void
   closeCoverComponent(): void
+  destroy(): void
   getComponent(
     host: HTMLElement,
     optionsAtRuntime?: WebchatAppArgs
@@ -187,7 +188,7 @@ export class WebchatApp {
   onUserInput(args: OnUserInputArgs): Promise<void>
   open(): void
   openCoverComponent(): void
-  render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
+  render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
   resendUnsentInputs(): Promise<void>
   resolveWebchatVisibility(optionsAtRuntime: {
     appId: string
@@ -198,14 +199,14 @@ export class WebchatApp {
   toggleCoverComponent(): void
   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
   updateLastMessageDate(date: string): void
-  updateUser(user: core.SessionUser): void
+  updateUser(user: Partial<core.SessionUser>): void
   updateWebchatSettings(settings: WebchatSettingsProps): void
   renderCustomComponent(customComponent: React.ReactNode): void
   unmountCustomComponent(): void
 }
 
 export interface WebchatContextProps {
-  sendText: (text: string) => void
+  sendText: (text: string, payload?: string) => void
   sendAttachment: (attachment: File) => void
   sendPayload: (payload: string) => void
   sendInput: (input: core.Input) => void
@@ -221,7 +222,7 @@ export interface WebchatContextProps {
   theme: ThemeProps
   webchatState: WebchatState
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
-  updateUser: (user: core.SessionUser) => void
+  updateUser: (user: Partial<core.SessionUser>) => void
 }
 export const WebchatContext: React.Context<WebchatContextProps>
 export type WebchatContext = React.Context<WebchatContextProps>

package/lib/webchat/components/emoji-picker.js

@@ -26,10 +26,15 @@ var _common = require("./common");
 var _templateObject;
 
 var EmojiPicker = function EmojiPicker(props) {
+  var onClick = function onClick(event) {
+    props.onClick();
+    event.stopPropagation();
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_common.IconContainer, {
     role: _constants.ROLES.EMOJI_PICKER_ICON
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: props.onClick
+    onClick: onClick
   }, /*#__PURE__*/_react["default"].createElement(_common.Icon, {
     src: _emojiButton["default"]
   })));

package/lib/webchat/components/emoji-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/webchat/components/emoji-picker.jsx"],"names":["EmojiPicker","props","ROLES","EMOJI_PICKER_ICON","onClick","LogoEmoji","Container","styled","div","OpenedEmojiPicker","ref","isComponentVisible","EMOJI_PICKER","onEmojiClick"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAAAC,KAAK;AAAA,sBAC9B,gCAAC,qBAAD;AAAe,IAAA,IAAI,EAAEC,iBAAMC;AAA3B,kBACE;AAAK,IAAA,OAAO,EAAEF,KAAK,CAACG;AAApB,kBACE,gCAAC,YAAD;AAAM,IAAA,GAAG,EAAEC;AAAX,IADF,CADF,CAD8B;AAAA,CAAzB;;;;AAQP,IAAMC,SAAS,GAAGC,6BAAOC,GAAV,8LAAf;;AAQO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAR,KAAK,EAAI;AACxC,6BAAoC,gCAAoB,IAApB,EAA0BA,KAAK,CAACG,OAAhC,CAApC;AAAA,MAAQM,GAAR,wBAAQA,GAAR;AAAA,MAAaC,kBAAb,wBAAaA,kBAAb;;AACA,sBACE;AAAK,IAAA,GAAG,EAAED;AAAV,KACGC,kBAAkB,iBACjB,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAET,iBAAMU;AAAvB,kBACE,gCAAC,4BAAD;AAAQ,IAAA,YAAY,EAAEX,KAAK,CAACY,YAA5B;AAA0C,IAAA,gBAAgB,EAAE;AAA5D,IADF,CAFJ,CADF;AASD,CAXM","sourcesContent":["import Picker from 'emoji-picker-react'\nimport React from 'react'\nimport styled from 'styled-components'\n\nimport LogoEmoji from '../../assets/emojiButton.svg'\nimport { ROLES } from '../../constants'\nimport { useComponentVisible } from '../hooks'\nimport { Icon, IconContainer } from './common'\n\nexport const EmojiPicker = props => (\n  <IconContainer role={ROLES.EMOJI_PICKER_ICON}>\n    <div onClick={props.onClick}>\n      <Icon src={LogoEmoji} />\n    </div>\n  </IconContainer>\n)\n\nconst Container = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  right: 3px;\n  top: -324px;\n`\n\nexport const OpenedEmojiPicker = props => {\n  const { ref, isComponentVisible } = useComponentVisible(true, props.onClick)\n  return (\n    <div ref={ref}>\n      {isComponentVisible && (\n        <Container role={ROLES.EMOJI_PICKER}>\n          <Picker onEmojiClick={props.onEmojiClick} disableAutoFocus={true} />\n        </Container>\n      )}\n    </div>\n  )\n}\n"],"file":"emoji-picker.js"}
+{"version":3,"sources":["../../../src/webchat/components/emoji-picker.jsx"],"names":["EmojiPicker","props","onClick","event","stopPropagation","ROLES","EMOJI_PICKER_ICON","LogoEmoji","Container","styled","div","OpenedEmojiPicker","ref","isComponentVisible","EMOJI_PICKER","onEmojiClick"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAAAC,KAAK,EAAG;AACjC,MAAMC,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAG;AACtBF,IAAAA,KAAK,CAACC,OAAN;AACAC,IAAAA,KAAK,CAACC,eAAN;AACD,GAHD;;AAKA,sBACE,gCAAC,qBAAD;AAAe,IAAA,IAAI,EAAEC,iBAAMC;AAA3B,kBACE;AAAK,IAAA,OAAO,EAAEJ;AAAd,kBACE,gCAAC,YAAD;AAAM,IAAA,GAAG,EAAEK;AAAX,IADF,CADF,CADF;AAOD,CAbM;;;;AAeP,IAAMC,SAAS,GAAGC,6BAAOC,GAAV,8LAAf;;AAQO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAV,KAAK,EAAI;AACxC,6BAAoC,gCAAoB,IAApB,EAA0BA,KAAK,CAACC,OAAhC,CAApC;AAAA,MAAQU,GAAR,wBAAQA,GAAR;AAAA,MAAaC,kBAAb,wBAAaA,kBAAb;;AACA,sBACE;AAAK,IAAA,GAAG,EAAED;AAAV,KACGC,kBAAkB,iBACjB,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAER,iBAAMS;AAAvB,kBACE,gCAAC,4BAAD;AAAQ,IAAA,YAAY,EAAEb,KAAK,CAACc,YAA5B;AAA0C,IAAA,gBAAgB,EAAE;AAA5D,IADF,CAFJ,CADF;AASD,CAXM","sourcesContent":["import Picker from 'emoji-picker-react'\nimport React from 'react'\nimport styled from 'styled-components'\n\nimport LogoEmoji from '../../assets/emojiButton.svg'\nimport { ROLES } from '../../constants'\nimport { useComponentVisible } from '../hooks'\nimport { Icon, IconContainer } from './common'\n\nexport const EmojiPicker = props =>{\n  const onClick = event =>{\n    props.onClick()\n    event.stopPropagation()\n  }\n\n  return (\n    <IconContainer role={ROLES.EMOJI_PICKER_ICON}>\n      <div onClick={onClick}>\n        <Icon src={LogoEmoji} />\n      </div>\n    </IconContainer>\n  )\n} \n\nconst Container = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  right: 3px;\n  top: -324px;\n`\n\nexport const OpenedEmojiPicker = props => {\n  const { ref, isComponentVisible } = useComponentVisible(true, props.onClick)\n  return (\n    <div ref={ref}>\n      {isComponentVisible && (\n        <Container role={ROLES.EMOJI_PICKER}>\n          <Picker onEmojiClick={props.onEmojiClick} disableAutoFocus={true} />\n        </Container>\n      )}\n    </div>\n  )\n}\n"],"file":"emoji-picker.js"}

package/lib/webchat/devices/scrollbar-controller.js

@@ -117,7 +117,7 @@ var ScrollbarController = /*#__PURE__*/function () {
       }
 
       this.webchat.ontouchmove = function (e) {
-        return e.preventDefault();
+        if (e.target === e.currentTarget) e.preventDefault();
       };
     }
   }, {

package/lib/webchat/devices/scrollbar-controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/webchat/devices/scrollbar-controller.js"],"names":["debounced","delay","fn","timerId","args","clearTimeout","setTimeout","stopAtScrollLimit","element","scrollTop","scrollHeight","clientHeight","ScrollbarController","currentDevice","host","webchat","DEVICES","MOBILE","IPHONE","limitScrollBoundaries","ontouchstart","e","handleOnTouchMoveEvents","ontouchmove","onmouseover","handleOnMouseOverEvents","scrollableArea","isScrollable","visible","full","target","currentTarget","toggleOnMouseWheelEvents","parentNode","scrollableContent","hasScrollbar","onmousewheel","preventDefault","toggleOnTouchMoveEvents","frame","dStopAtScrollLimit","window","addEventListener","attachEvent"],"mappings":"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","sourcesContent":["import {\n  getScrollableArea,\n  getScrollableContent,\n  getWebchatElement,\n} from '../../util/dom'\nimport { DEVICES, isMobileDevice } from '.'\n\nconst debounced = (delay, fn) => {\n  let timerId\n  return function (...args) {\n    if (timerId) {\n      clearTimeout(timerId)\n    }\n    timerId = setTimeout(() => {\n      fn(...args)\n      timerId = null\n    }, delay)\n  }\n}\n\nconst stopAtScrollLimit = element => {\n  if (element.scrollTop === 0) element.scrollTop = 1\n  if (element.scrollHeight - element.scrollTop === element.clientHeight)\n    element.scrollTop -= 1\n}\n\nexport class ScrollbarController {\n  constructor(currentDevice, host) {\n    this.currentDevice = currentDevice\n    this.webchat = getWebchatElement(host)\n  }\n\n  handleScrollEvents() {\n    /*\n      It handles scroll events for Mobile/Desktop.\n      \"ontouchmove\" is the phone equivalent for \"onmouseover\"\n    */\n    if (isMobileDevice()) {\n      if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n      this.limitScrollBoundaries()\n      this.webchat.ontouchstart = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n      this.webchat.ontouchmove = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n    } else {\n      this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e)\n    }\n  }\n\n  hasScrollbar() {\n    const scrollableArea = getScrollableArea(this.webchat)\n    const isScrollable =\n      scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0\n    return isScrollable\n  }\n\n  handleOnMouseOverEvents(e) {\n    let target = e.currentTarget\n    while (target) {\n      this.toggleOnMouseWheelEvents()\n      target = target.parentNode\n    }\n  }\n\n  toggleOnMouseWheelEvents() {\n    const scrollableContent = getScrollableContent(this.webchat)\n    if (this.hasScrollbar()) {\n      scrollableContent.onmousewheel = {}\n      return\n    }\n    scrollableContent.onmousewheel = e => e.preventDefault()\n  }\n\n  handleOnTouchMoveEvents(e) {\n    this.toggleOnTouchMoveEvents()\n  }\n\n  toggleOnTouchMoveEvents() {\n    if (this.hasScrollbar()) {\n      this.webchat.ontouchmove = {}\n      this.webchat.ontouchstart = {}\n      return\n    }\n    this.webchat.ontouchmove = e => e.preventDefault()\n  }\n\n  limitScrollBoundaries() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    /*\n      It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,\n      as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)\n    */\n    const frame = getScrollableArea(this.webchat).visible\n    const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)\n    if (frame) {\n      if (window.addEventListener) {\n        frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true)\n      } else if (window.attachEvent) {\n        frame.attachEvent('scroll', () => dStopAtScrollLimit(frame))\n      }\n    }\n  }\n}\n"],"file":"scrollbar-controller.js"}
+{"version":3,"sources":["../../../src/webchat/devices/scrollbar-controller.js"],"names":["debounced","delay","fn","timerId","args","clearTimeout","setTimeout","stopAtScrollLimit","element","scrollTop","scrollHeight","clientHeight","ScrollbarController","currentDevice","host","webchat","DEVICES","MOBILE","IPHONE","limitScrollBoundaries","ontouchstart","e","handleOnTouchMoveEvents","ontouchmove","onmouseover","handleOnMouseOverEvents","scrollableArea","isScrollable","visible","full","target","currentTarget","toggleOnMouseWheelEvents","parentNode","scrollableContent","hasScrollbar","onmousewheel","preventDefault","toggleOnTouchMoveEvents","frame","dStopAtScrollLimit","window","addEventListener","attachEvent"],"mappings":"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","sourcesContent":["import {\n  getScrollableArea,\n  getScrollableContent,\n  getWebchatElement,\n} from '../../util/dom'\nimport { DEVICES, isMobileDevice } from '.'\n\nconst debounced = (delay, fn) => {\n  let timerId\n  return function (...args) {\n    if (timerId) {\n      clearTimeout(timerId)\n    }\n    timerId = setTimeout(() => {\n      fn(...args)\n      timerId = null\n    }, delay)\n  }\n}\n\nconst stopAtScrollLimit = element => {\n  if (element.scrollTop === 0) element.scrollTop = 1\n  if (element.scrollHeight - element.scrollTop === element.clientHeight)\n    element.scrollTop -= 1\n}\n\nexport class ScrollbarController {\n  constructor(currentDevice, host) {\n    this.currentDevice = currentDevice\n    this.webchat = getWebchatElement(host)\n  }\n\n  handleScrollEvents() {\n    /*\n      It handles scroll events for Mobile/Desktop.\n      \"ontouchmove\" is the phone equivalent for \"onmouseover\"\n    */\n    if (isMobileDevice()) {\n      if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n      this.limitScrollBoundaries()\n      this.webchat.ontouchstart = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n      this.webchat.ontouchmove = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n    } else {\n      this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e)\n    }\n  }\n\n  hasScrollbar() {\n    const scrollableArea = getScrollableArea(this.webchat)\n    const isScrollable =\n      scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0\n    return isScrollable\n  }\n\n  handleOnMouseOverEvents(e) {\n    let target = e.currentTarget\n    while (target) {\n      this.toggleOnMouseWheelEvents()\n      target = target.parentNode\n    }\n  }\n\n  toggleOnMouseWheelEvents() {\n    const scrollableContent = getScrollableContent(this.webchat)\n    if (this.hasScrollbar()) {\n      scrollableContent.onmousewheel = {}\n      return\n    }\n    scrollableContent.onmousewheel = e => e.preventDefault()\n  }\n\n  handleOnTouchMoveEvents(e) {\n    this.toggleOnTouchMoveEvents()\n  }\n\n  toggleOnTouchMoveEvents() {\n    if (this.hasScrollbar()) {\n      this.webchat.ontouchmove = {}\n      this.webchat.ontouchstart = {}\n      return\n    }\n    this.webchat.ontouchmove = e => {\n      if(e.target === e.currentTarget)\n      e.preventDefault()\n    }\n  }\n\n  limitScrollBoundaries() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    /*\n      It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,\n      as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)\n    */\n    const frame = getScrollableArea(this.webchat).visible\n    const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)\n    if (frame) {\n      if (window.addEventListener) {\n        frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true)\n      } else if (window.attachEvent) {\n        frame.attachEvent('scroll', () => dStopAtScrollLimit(frame))\n      }\n    }\n  }\n}\n"],"file":"scrollbar-controller.js"}

package/lib/webchat/hooks.js

@@ -332,7 +332,7 @@ function useComponentVisible(initialIsVisible, onClickOutside) {
   var ref = (0, _react.useRef)(null);
 
   var handleClickOutside = function handleClickOutside(event) {
-    if (ref.current && !ref.current.contains(event.target)) {
+    if (ref.current && !ref.current.contains(event.path[0])) {
       setIsComponentVisible(false);
       onClickOutside();
     }

package/lib/webchat/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/webchat/hooks.js"],"names":["webchatInitialState","width","WEBCHAT","DEFAULTS","WIDTH","height","HEIGHT","messagesJSON","messagesComponents","replies","latestInput","typing","webview","webviewParams","session","user","lastRoutePath","handoff","theme","headerTitle","TITLE","brandColor","COLORS","BOTONIC_BLUE","brandImage","LOGO","triggerButtonImage","undefined","textPlaceholder","PLACEHOLDER","style","fontFamily","FONT_FAMILY","themeUpdates","error","online","devSettings","keepSessionOnReload","isWebchatOpen","isEmojiPickerOpen","isPersistentMenuOpen","isCoverComponentOpen","isCustomComponentRendered","lastMessageUpdate","currentAttachment","jwt","useWebchat","webchatReducer","webchatState","webchatDispatch","addMessage","message","type","ADD_MESSAGE","payload","addMessageComponent","ADD_MESSAGE_COMPONENT","updateMessage","UPDATE_MESSAGE","updateReplies","UPDATE_REPLIES","updateLatestInput","input","UPDATE_LATEST_INPUT","updateTyping","UPDATE_TYPING","updateWebview","params","UPDATE_WEBVIEW","updateSession","UPDATE_SESSION","updateLastRoutePath","path","UPDATE_LAST_ROUTE_PATH","updateHandoff","UPDATE_HANDOFF","updateTheme","UPDATE_THEME","updateDevSettings","settings","UPDATE_DEV_SETTINGS","toggleWebchat","toggle","TOGGLE_WEBCHAT","toggleEmojiPicker","TOGGLE_EMOJI_PICKER","togglePersistentMenu","TOGGLE_PERSISTENT_MENU","toggleCoverComponent","TOGGLE_COVER_COMPONENT","doRenderCustomComponent","DO_RENDER_CUSTOM_COMPONENT","setError","SET_ERROR","setOnline","SET_ONLINE","clearMessages","CLEAR_MESSAGES","updateLastMessageDate","date","UPDATE_LAST_MESSAGE_DATE","setCurrentAttachment","attachment","SET_CURRENT_ATTACHMENT","updateJwt","UPDATE_JWT","useTyping","host","delayTimeout","typingTimeout","nextMsg","filter","m","display","delay","setTimeout","totalDelay","e","clearTimeout","usePrevious","value","ref","current","useComponentVisible","initialIsVisible","onClickOutside","isComponentVisible","setIsComponentVisible","handleClickOutside","event","contains","target","document","addEventListener","removeEventListener","useComponentWillMount","func"],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from 'react'\n\nimport { COLORS, WEBCHAT } from '../constants'\nimport { scrollToBottom } from '../util/dom'\nimport {\n  ADD_MESSAGE,\n  ADD_MESSAGE_COMPONENT,\n  CLEAR_MESSAGES,\n  DO_RENDER_CUSTOM_COMPONENT,\n  SET_CURRENT_ATTACHMENT,\n  SET_ERROR,\n  SET_ONLINE,\n  TOGGLE_COVER_COMPONENT,\n  TOGGLE_EMOJI_PICKER,\n  TOGGLE_PERSISTENT_MENU,\n  TOGGLE_WEBCHAT,\n  UPDATE_DEV_SETTINGS,\n  UPDATE_HANDOFF,\n  UPDATE_JWT,\n  UPDATE_LAST_MESSAGE_DATE,\n  UPDATE_LAST_ROUTE_PATH,\n  UPDATE_LATEST_INPUT,\n  UPDATE_MESSAGE,\n  UPDATE_REPLIES,\n  UPDATE_SESSION,\n  UPDATE_THEME,\n  UPDATE_TYPING,\n  UPDATE_WEBVIEW,\n} from './actions'\nimport { webchatReducer } from './webchat-reducer'\n\nexport const webchatInitialState = {\n  width: WEBCHAT.DEFAULTS.WIDTH,\n  height: WEBCHAT.DEFAULTS.HEIGHT,\n  messagesJSON: [],\n  messagesComponents: [],\n  replies: [],\n  latestInput: {},\n  typing: false,\n  webview: null,\n  webviewParams: null,\n  session: { user: null },\n  lastRoutePath: null,\n  handoff: false,\n  theme: {\n    headerTitle: WEBCHAT.DEFAULTS.TITLE,\n    brandColor: COLORS.BOTONIC_BLUE,\n    brandImage: WEBCHAT.DEFAULTS.LOGO,\n    triggerButtonImage: undefined,\n    textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,\n    style: {\n      fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,\n    },\n  },\n  themeUpdates: {},\n  error: {},\n  online: true,\n  devSettings: { keepSessionOnReload: false },\n  isWebchatOpen: false,\n  isEmojiPickerOpen: false,\n  isPersistentMenuOpen: false,\n  isCoverComponentOpen: false,\n  isCustomComponentRendered: false,\n  lastMessageUpdate: undefined,\n  currentAttachment: undefined,\n  jwt: null,\n}\n\nexport function useWebchat() {\n  const [webchatState, webchatDispatch] = useReducer(\n    webchatReducer,\n    webchatInitialState\n  )\n\n  const addMessage = message =>\n    webchatDispatch({ type: ADD_MESSAGE, payload: message })\n  const addMessageComponent = message =>\n    webchatDispatch({ type: ADD_MESSAGE_COMPONENT, payload: message })\n  const updateMessage = message =>\n    webchatDispatch({ type: UPDATE_MESSAGE, payload: message })\n  const updateReplies = replies =>\n    webchatDispatch({ type: UPDATE_REPLIES, payload: replies })\n  const updateLatestInput = input =>\n    webchatDispatch({ type: UPDATE_LATEST_INPUT, payload: input })\n  const updateTyping = typing =>\n    webchatDispatch({ type: UPDATE_TYPING, payload: typing })\n  const updateWebview = (webview, params) =>\n    webchatDispatch({\n      type: UPDATE_WEBVIEW,\n      payload: { webview, webviewParams: params },\n    })\n  const updateSession = session => {\n    webchatDispatch({\n      type: UPDATE_SESSION,\n      payload: session,\n    })\n  }\n\n  const updateLastRoutePath = path =>\n    webchatDispatch({\n      type: UPDATE_LAST_ROUTE_PATH,\n      payload: path,\n    })\n  const updateHandoff = handoff =>\n    webchatDispatch({\n      type: UPDATE_HANDOFF,\n      payload: handoff,\n    })\n  const updateTheme = (theme, themeUpdates = undefined) => {\n    const payload =\n      themeUpdates !== undefined ? { theme, themeUpdates } : { theme }\n    webchatDispatch({\n      type: UPDATE_THEME,\n      payload,\n    })\n  }\n  const updateDevSettings = settings =>\n    webchatDispatch({\n      type: UPDATE_DEV_SETTINGS,\n      payload: settings,\n    })\n  const toggleWebchat = toggle =>\n    webchatDispatch({\n      type: TOGGLE_WEBCHAT,\n      payload: toggle,\n    })\n  const toggleEmojiPicker = toggle =>\n    webchatDispatch({\n      type: TOGGLE_EMOJI_PICKER,\n      payload: toggle,\n    })\n  const togglePersistentMenu = toggle =>\n    webchatDispatch({\n      type: TOGGLE_PERSISTENT_MENU,\n      payload: toggle,\n    })\n  const toggleCoverComponent = toggle =>\n    webchatDispatch({\n      type: TOGGLE_COVER_COMPONENT,\n      payload: toggle,\n    })\n  const doRenderCustomComponent = toggle =>\n    webchatDispatch({\n      type: DO_RENDER_CUSTOM_COMPONENT,\n      payload: toggle,\n    })\n  const setError = error =>\n    webchatDispatch({\n      type: SET_ERROR,\n      payload: error,\n    })\n  const setOnline = online =>\n    webchatDispatch({\n      type: SET_ONLINE,\n      payload: online,\n    })\n\n  const clearMessages = () => {\n    webchatDispatch({\n      type: CLEAR_MESSAGES,\n    })\n  }\n  const updateLastMessageDate = date => {\n    webchatDispatch({\n      type: UPDATE_LAST_MESSAGE_DATE,\n      payload: date,\n    })\n  }\n  const setCurrentAttachment = attachment => {\n    webchatDispatch({\n      type: SET_CURRENT_ATTACHMENT,\n      payload: attachment,\n    })\n  }\n\n  const updateJwt = jwt => {\n    webchatDispatch({\n      type: UPDATE_JWT,\n      payload: jwt,\n    })\n  }\n\n  return {\n    webchatState,\n    webchatDispatch,\n    addMessage,\n    addMessageComponent,\n    updateMessage,\n    updateReplies,\n    updateLatestInput,\n    updateTyping,\n    updateWebview,\n    updateSession,\n    updateLastRoutePath,\n    updateHandoff,\n    updateTheme,\n    updateDevSettings,\n    toggleWebchat,\n    toggleEmojiPicker,\n    togglePersistentMenu,\n    toggleCoverComponent,\n    doRenderCustomComponent,\n    setError,\n    setOnline,\n    clearMessages,\n    updateLastMessageDate,\n    setCurrentAttachment,\n    updateJwt,\n  }\n}\n\nexport function useTyping({ webchatState, updateTyping, updateMessage, host }) {\n  useEffect(() => {\n    let delayTimeout, typingTimeout\n    scrollToBottom({ host })\n    try {\n      const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]\n      if (nextMsg.delay && nextMsg.typing) {\n        delayTimeout = setTimeout(\n          () => updateTyping(true),\n          nextMsg.delay * 1000\n        )\n      } else if (nextMsg.typing) updateTyping(true)\n      const totalDelay = nextMsg.delay + nextMsg.typing\n      if (totalDelay)\n        typingTimeout = setTimeout(() => {\n          updateMessage({ ...nextMsg, display: true })\n          updateTyping(false)\n        }, totalDelay * 1000)\n    } catch (e) {}\n    return () => {\n      clearTimeout(delayTimeout)\n      clearTimeout(typingTimeout)\n    }\n  }, [webchatState.messagesJSON, webchatState.typing])\n}\n\nexport function usePrevious(value) {\n  const ref = useRef()\n  useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}\n\nexport function useComponentVisible(initialIsVisible, onClickOutside) {\n  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)\n  const ref = useRef(null)\n  const handleClickOutside = event => {\n    if (ref.current && !ref.current.contains(event.target)) {\n      setIsComponentVisible(false)\n      onClickOutside()\n    }\n  }\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside, false)\n    return () => {\n      document.removeEventListener('click', handleClickOutside, false)\n    }\n  })\n  return { ref, isComponentVisible, setIsComponentVisible }\n}\n\nexport const useComponentWillMount = func => {\n  useMemo(func, [])\n}\n"],"file":"hooks.js"}
+{"version":3,"sources":["../../src/webchat/hooks.js"],"names":["webchatInitialState","width","WEBCHAT","DEFAULTS","WIDTH","height","HEIGHT","messagesJSON","messagesComponents","replies","latestInput","typing","webview","webviewParams","session","user","lastRoutePath","handoff","theme","headerTitle","TITLE","brandColor","COLORS","BOTONIC_BLUE","brandImage","LOGO","triggerButtonImage","undefined","textPlaceholder","PLACEHOLDER","style","fontFamily","FONT_FAMILY","themeUpdates","error","online","devSettings","keepSessionOnReload","isWebchatOpen","isEmojiPickerOpen","isPersistentMenuOpen","isCoverComponentOpen","isCustomComponentRendered","lastMessageUpdate","currentAttachment","jwt","useWebchat","webchatReducer","webchatState","webchatDispatch","addMessage","message","type","ADD_MESSAGE","payload","addMessageComponent","ADD_MESSAGE_COMPONENT","updateMessage","UPDATE_MESSAGE","updateReplies","UPDATE_REPLIES","updateLatestInput","input","UPDATE_LATEST_INPUT","updateTyping","UPDATE_TYPING","updateWebview","params","UPDATE_WEBVIEW","updateSession","UPDATE_SESSION","updateLastRoutePath","path","UPDATE_LAST_ROUTE_PATH","updateHandoff","UPDATE_HANDOFF","updateTheme","UPDATE_THEME","updateDevSettings","settings","UPDATE_DEV_SETTINGS","toggleWebchat","toggle","TOGGLE_WEBCHAT","toggleEmojiPicker","TOGGLE_EMOJI_PICKER","togglePersistentMenu","TOGGLE_PERSISTENT_MENU","toggleCoverComponent","TOGGLE_COVER_COMPONENT","doRenderCustomComponent","DO_RENDER_CUSTOM_COMPONENT","setError","SET_ERROR","setOnline","SET_ONLINE","clearMessages","CLEAR_MESSAGES","updateLastMessageDate","date","UPDATE_LAST_MESSAGE_DATE","setCurrentAttachment","attachment","SET_CURRENT_ATTACHMENT","updateJwt","UPDATE_JWT","useTyping","host","delayTimeout","typingTimeout","nextMsg","filter","m","display","delay","setTimeout","totalDelay","e","clearTimeout","usePrevious","value","ref","current","useComponentVisible","initialIsVisible","onClickOutside","isComponentVisible","setIsComponentVisible","handleClickOutside","event","contains","document","addEventListener","removeEventListener","useComponentWillMount","func"],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from 'react'\n\nimport { COLORS, WEBCHAT } from '../constants'\nimport { scrollToBottom } from '../util/dom'\nimport {\n  ADD_MESSAGE,\n  ADD_MESSAGE_COMPONENT,\n  CLEAR_MESSAGES,\n  DO_RENDER_CUSTOM_COMPONENT,\n  SET_CURRENT_ATTACHMENT,\n  SET_ERROR,\n  SET_ONLINE,\n  TOGGLE_COVER_COMPONENT,\n  TOGGLE_EMOJI_PICKER,\n  TOGGLE_PERSISTENT_MENU,\n  TOGGLE_WEBCHAT,\n  UPDATE_DEV_SETTINGS,\n  UPDATE_HANDOFF,\n  UPDATE_JWT,\n  UPDATE_LAST_MESSAGE_DATE,\n  UPDATE_LAST_ROUTE_PATH,\n  UPDATE_LATEST_INPUT,\n  UPDATE_MESSAGE,\n  UPDATE_REPLIES,\n  UPDATE_SESSION,\n  UPDATE_THEME,\n  UPDATE_TYPING,\n  UPDATE_WEBVIEW,\n} from './actions'\nimport { webchatReducer } from './webchat-reducer'\n\nexport const webchatInitialState = {\n  width: WEBCHAT.DEFAULTS.WIDTH,\n  height: WEBCHAT.DEFAULTS.HEIGHT,\n  messagesJSON: [],\n  messagesComponents: [],\n  replies: [],\n  latestInput: {},\n  typing: false,\n  webview: null,\n  webviewParams: null,\n  session: { user: null },\n  lastRoutePath: null,\n  handoff: false,\n  theme: {\n    headerTitle: WEBCHAT.DEFAULTS.TITLE,\n    brandColor: COLORS.BOTONIC_BLUE,\n    brandImage: WEBCHAT.DEFAULTS.LOGO,\n    triggerButtonImage: undefined,\n    textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,\n    style: {\n      fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,\n    },\n  },\n  themeUpdates: {},\n  error: {},\n  online: true,\n  devSettings: { keepSessionOnReload: false },\n  isWebchatOpen: false,\n  isEmojiPickerOpen: false,\n  isPersistentMenuOpen: false,\n  isCoverComponentOpen: false,\n  isCustomComponentRendered: false,\n  lastMessageUpdate: undefined,\n  currentAttachment: undefined,\n  jwt: null,\n}\n\nexport function useWebchat() {\n  const [webchatState, webchatDispatch] = useReducer(\n    webchatReducer,\n    webchatInitialState\n  )\n\n  const addMessage = message =>\n    webchatDispatch({ type: ADD_MESSAGE, payload: message })\n  const addMessageComponent = message =>\n    webchatDispatch({ type: ADD_MESSAGE_COMPONENT, payload: message })\n  const updateMessage = message =>\n    webchatDispatch({ type: UPDATE_MESSAGE, payload: message })\n  const updateReplies = replies =>\n    webchatDispatch({ type: UPDATE_REPLIES, payload: replies })\n  const updateLatestInput = input =>\n    webchatDispatch({ type: UPDATE_LATEST_INPUT, payload: input })\n  const updateTyping = typing =>\n    webchatDispatch({ type: UPDATE_TYPING, payload: typing })\n  const updateWebview = (webview, params) =>\n    webchatDispatch({\n      type: UPDATE_WEBVIEW,\n      payload: { webview, webviewParams: params },\n    })\n  const updateSession = session => {\n    webchatDispatch({\n      type: UPDATE_SESSION,\n      payload: session,\n    })\n  }\n\n  const updateLastRoutePath = path =>\n    webchatDispatch({\n      type: UPDATE_LAST_ROUTE_PATH,\n      payload: path,\n    })\n  const updateHandoff = handoff =>\n    webchatDispatch({\n      type: UPDATE_HANDOFF,\n      payload: handoff,\n    })\n  const updateTheme = (theme, themeUpdates = undefined) => {\n    const payload =\n      themeUpdates !== undefined ? { theme, themeUpdates } : { theme }\n    webchatDispatch({\n      type: UPDATE_THEME,\n      payload,\n    })\n  }\n  const updateDevSettings = settings =>\n    webchatDispatch({\n      type: UPDATE_DEV_SETTINGS,\n      payload: settings,\n    })\n  const toggleWebchat = toggle =>\n    webchatDispatch({\n      type: TOGGLE_WEBCHAT,\n      payload: toggle,\n    })\n  const toggleEmojiPicker = toggle =>\n    webchatDispatch({\n      type: TOGGLE_EMOJI_PICKER,\n      payload: toggle,\n    })\n  const togglePersistentMenu = toggle =>\n    webchatDispatch({\n      type: TOGGLE_PERSISTENT_MENU,\n      payload: toggle,\n    })\n  const toggleCoverComponent = toggle =>\n    webchatDispatch({\n      type: TOGGLE_COVER_COMPONENT,\n      payload: toggle,\n    })\n  const doRenderCustomComponent = toggle =>\n    webchatDispatch({\n      type: DO_RENDER_CUSTOM_COMPONENT,\n      payload: toggle,\n    })\n  const setError = error =>\n    webchatDispatch({\n      type: SET_ERROR,\n      payload: error,\n    })\n  const setOnline = online =>\n    webchatDispatch({\n      type: SET_ONLINE,\n      payload: online,\n    })\n\n  const clearMessages = () => {\n    webchatDispatch({\n      type: CLEAR_MESSAGES,\n    })\n  }\n  const updateLastMessageDate = date => {\n    webchatDispatch({\n      type: UPDATE_LAST_MESSAGE_DATE,\n      payload: date,\n    })\n  }\n  const setCurrentAttachment = attachment => {\n    webchatDispatch({\n      type: SET_CURRENT_ATTACHMENT,\n      payload: attachment,\n    })\n  }\n\n  const updateJwt = jwt => {\n    webchatDispatch({\n      type: UPDATE_JWT,\n      payload: jwt,\n    })\n  }\n\n  return {\n    webchatState,\n    webchatDispatch,\n    addMessage,\n    addMessageComponent,\n    updateMessage,\n    updateReplies,\n    updateLatestInput,\n    updateTyping,\n    updateWebview,\n    updateSession,\n    updateLastRoutePath,\n    updateHandoff,\n    updateTheme,\n    updateDevSettings,\n    toggleWebchat,\n    toggleEmojiPicker,\n    togglePersistentMenu,\n    toggleCoverComponent,\n    doRenderCustomComponent,\n    setError,\n    setOnline,\n    clearMessages,\n    updateLastMessageDate,\n    setCurrentAttachment,\n    updateJwt,\n  }\n}\n\nexport function useTyping({ webchatState, updateTyping, updateMessage, host }) {\n  useEffect(() => {\n    let delayTimeout, typingTimeout\n    scrollToBottom({ host })\n    try {\n      const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]\n      if (nextMsg.delay && nextMsg.typing) {\n        delayTimeout = setTimeout(\n          () => updateTyping(true),\n          nextMsg.delay * 1000\n        )\n      } else if (nextMsg.typing) updateTyping(true)\n      const totalDelay = nextMsg.delay + nextMsg.typing\n      if (totalDelay)\n        typingTimeout = setTimeout(() => {\n          updateMessage({ ...nextMsg, display: true })\n          updateTyping(false)\n        }, totalDelay * 1000)\n    } catch (e) {}\n    return () => {\n      clearTimeout(delayTimeout)\n      clearTimeout(typingTimeout)\n    }\n  }, [webchatState.messagesJSON, webchatState.typing])\n}\n\nexport function usePrevious(value) {\n  const ref = useRef()\n  useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}\n\nexport function useComponentVisible(initialIsVisible, onClickOutside) {\n  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)\n  const ref = useRef(null)\n  const handleClickOutside = event => {\n    if (ref.current && !ref.current.contains(event.path[0])) {\n      setIsComponentVisible(false)\n      onClickOutside()\n    }\n  }\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside, false)\n    return () => {\n      document.removeEventListener('click', handleClickOutside, false)\n    }\n  })\n  return { ref, isComponentVisible, setIsComponentVisible }\n}\n\nexport const useComponentWillMount = func => {\n  useMemo(func, [])\n}\n"],"file":"hooks.js"}

package/lib/webchat/use-storage-state-hook.js

@@ -9,21 +9,52 @@ exports.useStorageState = useStorageState;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _reactUseStorage = require("react-use-storage");
-
-function useStorageState(storage, storageKey) {
-  var _useLocalStorage = (0, _reactUseStorage.useLocalStorage)(storageKey),
-      _useLocalStorage2 = (0, _slicedToArray2["default"])(_useLocalStorage, 2),
-      botonicLocalState = _useLocalStorage2[0],
-      saveLocalState = _useLocalStorage2[1];
-
-  var _useSessionStorage = (0, _reactUseStorage.useSessionStorage)(storageKey),
-      _useSessionStorage2 = (0, _slicedToArray2["default"])(_useSessionStorage, 2),
-      botonicSessionState = _useSessionStorage2[0],
-      saveSessionState = _useSessionStorage2[1];
-
-  if (storage === null) return [undefined, undefined];
-  if (storage === sessionStorage) return [botonicSessionState, saveSessionState];
-  return [botonicLocalState, saveLocalState];
+var _react = require("react");
+
+//Code taken from https://github.com/leny/react-use-storage
+var evtTarget = new EventTarget();
+
+function useStorageState(storage, key, defaultValue) {
+  var raw = storage === null || storage === void 0 ? void 0 : storage.getItem(key);
+
+  var _useState = (0, _react.useState)(raw ? JSON.parse(raw) : defaultValue),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var updater = (0, _react.useCallback)(function (updatedValue) {
+    var remove = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setValue(updatedValue);
+    storage[remove ? 'removeItem' : 'setItem'](key, JSON.stringify(updatedValue));
+    evtTarget.dispatchEvent(new CustomEvent('storage_change', {
+      detail: {
+        key: key
+      }
+    }));
+  }, [key]);
+  defaultValue != null && !raw && updater(defaultValue);
+  (0, _react.useEffect)(function () {
+    var listener = function listener(_ref) {
+      var detail = _ref.detail;
+
+      if (detail.key === key) {
+        var lraw = storage === null || storage === void 0 ? void 0 : storage.getItem(key);
+        lraw !== raw && setValue(JSON.parse(lraw));
+      }
+    };
+
+    evtTarget.addEventListener('storage_change', listener);
+    return function () {
+      return evtTarget.removeEventListener('storage_change', listener);
+    };
+  });
+
+  if (storage === null) {
+    return [undefined, undefined];
+  }
+
+  return [value, updater, function () {
+    return updater(null, true);
+  }];
 }
 //# sourceMappingURL=use-storage-state-hook.js.map

package/lib/webchat/use-storage-state-hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/webchat/use-storage-state-hook.js"],"names":["useStorageState","storage","storageKey","botonicLocalState","saveLocalState","botonicSessionState","saveSessionState","undefined","sessionStorage"],"mappings":";;;;;;;;;;;AAAA;;AAEO,SAASA,eAAT,CAAyBC,OAAzB,EAAkCC,UAAlC,EAA8C;AACnD,yBAA4C,sCAAgBA,UAAhB,CAA5C;AAAA;AAAA,MAAOC,iBAAP;AAAA,MAA0BC,cAA1B;;AACA,2BAAgD,wCAAkBF,UAAlB,CAAhD;AAAA;AAAA,MAAOG,mBAAP;AAAA,MAA4BC,gBAA5B;;AACA,MAAIL,OAAO,KAAK,IAAhB,EAAsB,OAAO,CAACM,SAAD,EAAYA,SAAZ,CAAP;AACtB,MAAIN,OAAO,KAAKO,cAAhB,EAAgC,OAAO,CAACH,mBAAD,EAAsBC,gBAAtB,CAAP;AAChC,SAAO,CAACH,iBAAD,EAAoBC,cAApB,CAAP;AACD","sourcesContent":["import { useLocalStorage, useSessionStorage } from 'react-use-storage'\n\nexport function useStorageState(storage, storageKey) {\n  const [botonicLocalState, saveLocalState] = useLocalStorage(storageKey)\n  const [botonicSessionState, saveSessionState] = useSessionStorage(storageKey)\n  if (storage === null) return [undefined, undefined]\n  if (storage === sessionStorage) return [botonicSessionState, saveSessionState]\n  return [botonicLocalState, saveLocalState]\n}\n"],"file":"use-storage-state-hook.js"}
+{"version":3,"sources":["../../src/webchat/use-storage-state-hook.js"],"names":["evtTarget","EventTarget","useStorageState","storage","key","defaultValue","raw","getItem","JSON","parse","value","setValue","updater","updatedValue","remove","stringify","dispatchEvent","CustomEvent","detail","listener","lraw","addEventListener","removeEventListener","undefined"],"mappings":";;;;;;;;;;;AAAA;;AAEA;AACA,IAAMA,SAAS,GAAG,IAAIC,WAAJ,EAAlB;;AAEO,SAASC,eAAT,CAAyBC,OAAzB,EAAkCC,GAAlC,EAAuCC,YAAvC,EAAqD;AAC1D,MAAMC,GAAG,GAAGH,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEI,OAAT,CAAiBH,GAAjB,CAAZ;;AAEA,kBAA0B,qBAASE,GAAG,GAAGE,IAAI,CAACC,KAAL,CAAWH,GAAX,CAAH,GAAqBD,YAAjC,CAA1B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,OAAO,GAAG,wBACd,UAACC,YAAD,EAAkC;AAAA,QAAnBC,MAAmB,uEAAV,KAAU;AAChCH,IAAAA,QAAQ,CAACE,YAAD,CAAR;AACAV,IAAAA,OAAO,CAACW,MAAM,GAAG,YAAH,GAAkB,SAAzB,CAAP,CACEV,GADF,EAEEI,IAAI,CAACO,SAAL,CAAeF,YAAf,CAFF;AAIAb,IAAAA,SAAS,CAACgB,aAAV,CACE,IAAIC,WAAJ,CAAgB,gBAAhB,EAAkC;AAAEC,MAAAA,MAAM,EAAE;AAAEd,QAAAA,GAAG,EAAHA;AAAF;AAAV,KAAlC,CADF;AAGD,GAVa,EAWd,CAACA,GAAD,CAXc,CAAhB;AAcAC,EAAAA,YAAY,IAAI,IAAhB,IAAwB,CAACC,GAAzB,IAAgCM,OAAO,CAACP,YAAD,CAAvC;AAEA,wBAAU,YAAM;AACd,QAAMc,QAAQ,GAAG,SAAXA,QAAW,OAAgB;AAAA,UAAbD,MAAa,QAAbA,MAAa;;AAC/B,UAAIA,MAAM,CAACd,GAAP,KAAeA,GAAnB,EAAwB;AACtB,YAAMgB,IAAI,GAAGjB,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEI,OAAT,CAAiBH,GAAjB,CAAb;AAEAgB,QAAAA,IAAI,KAAKd,GAAT,IAAgBK,QAAQ,CAACH,IAAI,CAACC,KAAL,CAAWW,IAAX,CAAD,CAAxB;AACD;AACF,KAND;;AAQApB,IAAAA,SAAS,CAACqB,gBAAV,CAA2B,gBAA3B,EAA6CF,QAA7C;AACA,WAAO;AAAA,aAAMnB,SAAS,CAACsB,mBAAV,CAA8B,gBAA9B,EAAgDH,QAAhD,CAAN;AAAA,KAAP;AACD,GAXD;;AAaA,MAAIhB,OAAO,KAAK,IAAhB,EAAsB;AACpB,WAAO,CAACoB,SAAD,EAAYA,SAAZ,CAAP;AACD;;AACD,SAAO,CAACb,KAAD,EAAQE,OAAR,EAAiB;AAAA,WAAMA,OAAO,CAAC,IAAD,EAAO,IAAP,CAAb;AAAA,GAAjB,CAAP;AACD","sourcesContent":["import { useCallback, useEffect, useState } from 'react'\n\n//Code taken from https://github.com/leny/react-use-storage\nconst evtTarget = new EventTarget()\n\nexport function useStorageState(storage, key, defaultValue) {\n  const raw = storage?.getItem(key)\n\n  const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue)\n\n  const updater = useCallback(\n    (updatedValue, remove = false) => {\n      setValue(updatedValue)\n      storage[remove ? 'removeItem' : 'setItem'](\n        key,\n        JSON.stringify(updatedValue)\n      )\n      evtTarget.dispatchEvent(\n        new CustomEvent('storage_change', { detail: { key } })\n      )\n    },\n    [key]\n  )\n\n  defaultValue != null && !raw && updater(defaultValue)\n\n  useEffect(() => {\n    const listener = ({ detail }) => {\n      if (detail.key === key) {\n        const lraw = storage?.getItem(key)\n\n        lraw !== raw && setValue(JSON.parse(lraw))\n      }\n    }\n\n    evtTarget.addEventListener('storage_change', listener)\n    return () => evtTarget.removeEventListener('storage_change', listener)\n  })\n\n  if (storage === null) {\n    return [undefined, undefined]\n  }\n  return [value, updater, () => updater(null, true)]\n}\n"],"file":"use-storage-state-hook.js"}