@micromag/screen-conversation 0.3.541 → 0.3.562

package/es/index.js

@@ -105,7 +105,6 @@ var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
 };
 ConversationAudioAttachment.propTypes = propTypes$2;
 ConversationAudioAttachment.defaultProps = defaultProps$2;
-var ConversationAudioAttachment$1 = ConversationAudioAttachment;
 
 var propTypes$1 = {
   message: PropTypes.conversationMessage,
@@ -218,7 +217,7 @@ var ConversationMessage = function ConversationMessage(_ref) {
   }, [messageState]);
   var betweenStyle = isNextSpeakerTheSame && nextMessageState;
   var buildAudioAttachment = function buildAudioAttachment() {
-    return /*#__PURE__*/React.createElement(ConversationAudioAttachment$1, {
+    return /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
       audio: audio,
       messageId: messageId,
       nextAudioMessageId: nextAudioMessageId,
@@ -275,7 +274,6 @@ var ConversationMessage = function ConversationMessage(_ref) {
 };
 ConversationMessage.propTypes = propTypes$1;
 ConversationMessage.defaultProps = defaultProps$1;
-var ConversationMessage$1 = ConversationMessage;
 
 var propTypes = {
   // id: PropTypes.string,
@@ -419,7 +417,8 @@ var ConversationScreen = function ConversationScreen(_ref) {
 
     // if the current message has an audio attachment, use the time it takes to record that message
     if (audio) {
-      return audio.metadata.duration;
+      var _audio$metadata;
+      return (_audio$metadata = audio.metadata) === null || _audio$metadata === void 0 ? void 0 : _audio$metadata.duration;
     }
 
     // counting words: only keep whitespaces and alphanumeric characters, then split of whitespaces
@@ -525,7 +524,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
       return c.audio != null;
     });
     var nextAudioMessageId = nextAudioMessage ? "".concat(m.message, "-").concat(messagesUniqueId[filteredMessages.indexOf(nextAudioMessage)]) : null;
-    return /*#__PURE__*/React.createElement(ConversationMessage$1, {
+    return /*#__PURE__*/React.createElement(ConversationMessage, {
       key: messageId,
       message: m,
       messageId: messageId,
@@ -569,7 +568,6 @@ var ConversationScreen = function ConversationScreen(_ref) {
 };
 ConversationScreen.propTypes = propTypes;
 ConversationScreen.defaultProps = defaultProps;
-var ConversationScreen$1 = ConversationScreen;
 
 var definition = {
   id: 'conversation',
@@ -591,7 +589,7 @@ var definition = {
       "value": "Conversation"
     }]
   }),
-  component: ConversationScreen$1,
+  component: ConversationScreen,
   layouts: ['normal'],
   fields: [
   // {
@@ -708,4 +706,4 @@ var definition = {
   }]
 };
 
-export { ConversationScreen$1 as ConversationScreen, definition as default };
+export { ConversationScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-conversation",
-    "version": "0.3.541",
+    "version": "0.3.562",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -61,17 +60,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-heading": "^0.3.541",
-        "@micromag/element-layout": "^0.3.541",
-        "@micromag/element-scroll": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/element-visual": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-background": "^0.3.547",
+        "@micromag/element-container": "^0.3.547",
+        "@micromag/element-footer": "^0.3.547",
+        "@micromag/element-header": "^0.3.547",
+        "@micromag/element-heading": "^0.3.547",
+        "@micromag/element-layout": "^0.3.547",
+        "@micromag/element-scroll": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/element-visual": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -82,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ca2600647087ca7ebd0517686562d6db252845b1"
 }

package/lib/index.js

@@ -1,716 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var uuid = require('uuid');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var Background = require('@micromag/element-background');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Heading = require('@micromag/element-heading');
-var Layout = require('@micromag/element-layout');
-var Scroll = require('@micromag/element-scroll');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var Text = require('@micromag/element-text');
-var Visual = require('@micromag/element-visual');
-var Audio = require('@micromag/element-audio');
-
-var styles = {"container":"micromag-screen-conversation-container","background":"micromag-screen-conversation-background","disabled":"micromag-screen-conversation-disabled","hidden":"micromag-screen-conversation-hidden","placeholder":"micromag-screen-conversation-placeholder","content":"micromag-screen-conversation-content","conversationHeader":"micromag-screen-conversation-conversationHeader","empty":"micromag-screen-conversation-empty","title":"micromag-screen-conversation-title","footer":"micromag-screen-conversation-footer","layout":"micromag-screen-conversation-layout","messageContainer":"micromag-screen-conversation-messageContainer","message":"micromag-screen-conversation-message","normalLeft":"micromag-screen-conversation-normalLeft","inBetweenLeft":"micromag-screen-conversation-inBetweenLeft","normalRight":"micromag-screen-conversation-normalRight","inBetweenRight":"micromag-screen-conversation-inBetweenRight","last":"micromag-screen-conversation-last","speakerDetails":"micromag-screen-conversation-speakerDetails","right":"micromag-screen-conversation-right","avatarContainer":"micromag-screen-conversation-avatarContainer","avatar":"micromag-screen-conversation-avatar","imageContainer":"micromag-screen-conversation-imageContainer","withAnimation":"micromag-screen-conversation-withAnimation","appear":"micromag-screen-conversation-appear","loadingContainer":"micromag-screen-conversation-loadingContainer","loading":"micromag-screen-conversation-loading","dot":"micromag-screen-conversation-dot","bounce":"micromag-screen-conversation-bounce","loadingSpeakerName":"micromag-screen-conversation-loadingSpeakerName","audioMessageContainer":"micromag-screen-conversation-audioMessageContainer","playButtonContainer":"micromag-screen-conversation-playButtonContainer","audioMessage":"micromag-screen-conversation-audioMessage","audioAttachment":"micromag-screen-conversation-audioAttachment","beforeText":"micromag-screen-conversation-beforeText","afterText":"micromag-screen-conversation-afterText"};
-
-var propTypes$2 = {
-  audio: core.PropTypes.audioMedia,
-  audioEventsChannelName: PropTypes.string,
-  messageId: PropTypes.string,
-  nextAudioMessageId: PropTypes.string
-};
-var defaultProps$2 = {
-  audio: null,
-  audioEventsChannelName: null,
-  messageId: null,
-  nextAudioMessageId: null
-};
-var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
-  var audio = _ref.audio,
-    audioEventsChannelName = _ref.audioEventsChannelName,
-    messageId = _ref.messageId,
-    nextAudioMessageId = _ref.nextAudioMessageId;
-  var _useState = React.useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    paused = _useState2[0],
-    setPaused = _useState2[1];
-  var audioEventsChannel = React.useMemo(function () {
-    return new BroadcastChannel(audioEventsChannelName);
-  }, [audioEventsChannelName]);
-  React.useEffect(function () {
-    var onMessage = function onMessage(message) {
-      var _message$data = message.data,
-        type = _message$data.type,
-        id = _message$data.id;
-      switch (type) {
-        case 'play':
-          {
-            setPaused(id !== messageId);
-          }
-      }
-    };
-    audioEventsChannel.addEventListener("message", onMessage);
-    return function () {
-      return audioEventsChannel.removeEventListener("message", onMessage);
-    };
-  }, [audioEventsChannel]);
-  var togglePaused = function togglePaused() {
-    if (paused) {
-      setPaused(false);
-      audioEventsChannel.postMessage({
-        type: 'play',
-        id: messageId
-      });
-    } else {
-      setPaused(true);
-    }
-  };
-  var onAudioEnded = function onAudioEnded() {
-    if (nextAudioMessageId) {
-      audioEventsChannel.postMessage({
-        type: 'play',
-        id: nextAudioMessageId
-      });
-    }
-    setPaused(true);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.audioMessageContainer])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.playButtonContainer
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    onClick: togglePaused,
-    icon: paused ? /*#__PURE__*/React.createElement(components.PlayIcon, null) : /*#__PURE__*/React.createElement(components.PauseIcon, null)
-  })), /*#__PURE__*/React.createElement(Audio, {
-    withWave: true,
-    autoWaveHeight: true,
-    className: styles.audioMessage,
-    media: audio,
-    paused: paused,
-    updateInterval: 100,
-    onEnded: onAudioEnded
-  }));
-};
-ConversationAudioAttachment.propTypes = propTypes$2;
-ConversationAudioAttachment.defaultProps = defaultProps$2;
-var ConversationAudioAttachment$1 = ConversationAudioAttachment;
-
-var propTypes$1 = {
-  message: core.PropTypes.conversationMessage,
-  messageId: PropTypes.string,
-  previousMessage: core.PropTypes.conversationMessage,
-  nextMessage: core.PropTypes.conversationMessage,
-  nextAudioMessageId: PropTypes.string,
-  nextMessageState: PropTypes.bool,
-  currentSpeaker: core.PropTypes.speaker,
-  // state: PropTypes.oneOf(['pause', 'typing', 'send']),
-  conversationTiming: PropTypes.number,
-  typingTiming: PropTypes.number,
-  onChange: PropTypes.func,
-  withAnimation: PropTypes.bool,
-  active: PropTypes.bool,
-  isPlaying: PropTypes.bool,
-  speakerStyle: core.PropTypes.textStyle,
-  messageStyle: core.PropTypes.textStyle,
-  className: PropTypes.string,
-  audioEventsChannelName: PropTypes.string
-};
-var defaultProps$1 = {
-  message: null,
-  messageId: null,
-  previousMessage: null,
-  nextMessage: null,
-  nextAudioMessageId: null,
-  nextMessageState: null,
-  currentSpeaker: null,
-  conversationTiming: null,
-  typingTiming: null,
-  onChange: null,
-  withAnimation: false,
-  active: false,
-  isPlaying: false,
-  messageStyle: null,
-  speakerStyle: null,
-  className: null,
-  audioEventsChannelName: null
-};
-var ConversationMessage = function ConversationMessage(_ref) {
-  var message = _ref.message,
-    messageId = _ref.messageId,
-    previousMessage = _ref.previousMessage,
-    nextMessage = _ref.nextMessage,
-    nextAudioMessageId = _ref.nextAudioMessageId,
-    nextMessageState = _ref.nextMessageState,
-    currentSpeaker = _ref.currentSpeaker,
-    conversationTiming = _ref.conversationTiming,
-    typingTiming = _ref.typingTiming,
-    onChange = _ref.onChange,
-    withAnimation = _ref.withAnimation,
-    active = _ref.active,
-    isPlaying = _ref.isPlaying,
-    messageStyle = _ref.messageStyle,
-    speakerStyle = _ref.speakerStyle,
-    className = _ref.className,
-    audioEventsChannelName = _ref.audioEventsChannelName;
-  var _ref2 = message || {},
-    messageBody = _ref2.message,
-    _ref2$image = _ref2.image,
-    image = _ref2$image === void 0 ? null : _ref2$image,
-    audio = _ref2.audio,
-    putAudioBeforeText = _ref2.putAudioBeforeText;
-  var _ref3 = currentSpeaker || {},
-    _ref3$avatar = _ref3.avatar,
-    _ref3$avatar2 = _ref3$avatar === void 0 ? {} : _ref3$avatar,
-    _ref3$avatar2$url = _ref3$avatar2.url,
-    avatarUrl = _ref3$avatar2$url === void 0 ? null : _ref3$avatar2$url,
-    speakerName = _ref3.name,
-    _ref3$side = _ref3.side,
-    side = _ref3$side === void 0 ? 'left' : _ref3$side,
-    currentSpeakerId = _ref3.id,
-    color = _ref3.color;
-  var right = side === 'right';
-  var isPrevSpeakerTheSame = previousMessage !== null && previousMessage.speaker === currentSpeakerId;
-  var isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
-
-  // Timing
-  var _useState = React.useState(withAnimation ? 'pause' : 'send'),
-    _useState2 = _slicedToArray(_useState, 2),
-    messageState = _useState2[0],
-    setMessageState = _useState2[1];
-  var pauseBeforeTyping = conversationTiming;
-  var typingDuration = typingTiming;
-  React.useEffect(function () {
-    if (!withAnimation || !isPlaying) {
-      return function () {};
-    }
-    var timeout = null;
-    if (messageState === 'pause') {
-      timeout = setTimeout(function () {
-        return setMessageState('typing');
-      }, pauseBeforeTyping);
-    } else if (messageState === 'typing') {
-      timeout = setTimeout(function () {
-        return setMessageState('send');
-      }, typingDuration);
-    }
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [withAnimation, isPlaying, messageState, setMessageState, pauseBeforeTyping, typingDuration]);
-  React.useEffect(function () {
-    if (messageState !== 'pause' && onChange !== null) {
-      onChange(messageState);
-    }
-  }, [messageState]);
-  var betweenStyle = isNextSpeakerTheSame && nextMessageState;
-  var buildAudioAttachment = function buildAudioAttachment() {
-    return /*#__PURE__*/React.createElement(ConversationAudioAttachment$1, {
-      audio: audio,
-      messageId: messageId,
-      nextAudioMessageId: nextAudioMessageId,
-      audioEventsChannelName: audioEventsChannelName
-    });
-  };
-  return messageState !== 'pause' ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.messageContainer, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.withAnimation, withAnimation === true), styles.right, right)])
-  }, messageState === 'typing' ? /*#__PURE__*/React.createElement("div", {
-    className: styles.loadingContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.loading
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.dot
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.dot
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.dot
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.loadingSpeakerName
-  }, speakerName)) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.message, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.normalRight, right), styles.nextTheSame, isNextSpeakerTheSame === true && isPrevSpeakerTheSame), styles.inBetweenRight, betweenStyle && right), styles.normalLeft, !right), styles.inBetweenLeft, betweenStyle && !right), styles.last, isNextSpeakerTheSame === false)]),
-    style: _objectSpread({}, utils.getStyleFromColor(color))
-  }, !isPrevSpeakerTheSame ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.speakerDetails, _defineProperty({}, styles.right, side === 'right')])
-  }, avatarUrl !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.avatarContainer, _defineProperty({}, styles.right, side === 'right')])
-  }, /*#__PURE__*/React.createElement("img", {
-    className: styles.avatar,
-    src: avatarUrl,
-    alt: speakerName,
-    loading: "lazy"
-  })) : null, /*#__PURE__*/React.createElement(Text, {
-    body: speakerName,
-    textStyle: speakerStyle
-  })) : null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
-    className: styles.messageBody
-  }, image !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles.imageContainer
-  }, /*#__PURE__*/React.createElement(Visual, {
-    media: image,
-    width: "100%",
-    playing: isPlaying,
-    active: active
-  })) : null, audio && putAudioBeforeText ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.audioAttachment, styles.beforeText)
-  }, buildAudioAttachment()) : null, /*#__PURE__*/React.createElement(Text, {
-    className: styles.messageBody,
-    body: messageBody,
-    textStyle: messageStyle
-  }), audio && !putAudioBeforeText ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.audioAttachment, styles.afterText)
-  }, buildAudioAttachment()) : null))) : null;
-};
-ConversationMessage.propTypes = propTypes$1;
-ConversationMessage.defaultProps = defaultProps$1;
-var ConversationMessage$1 = ConversationMessage;
-
-var propTypes = {
-  // id: PropTypes.string,
-  // layout: PropTypes.oneOf(['normal']),
-  title: core.PropTypes.headingElement,
-  timing: PropTypes.oneOf(['instant', 'sequence']),
-  readingSpeed: PropTypes.number,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  type: PropTypes.string,
-  conversation: core.PropTypes.conversation,
-  transitions: core.PropTypes.transitions,
-  className: PropTypes.string
-};
-var defaultProps = {
-  // layout: 'normal',
-  title: null,
-  timing: 'sequence',
-  readingSpeed: 255,
-  spacing: 20,
-  background: null,
-  header: null,
-  footer: null,
-  current: true,
-  active: true,
-  type: null,
-  conversation: null,
-  transitions: null,
-  className: null
-};
-var ConversationScreen = function ConversationScreen(_ref) {
-  var title = _ref.title,
-    timingMode = _ref.timing,
-    readingSpeed = _ref.readingSpeed,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    header = _ref.header,
-    footer = _ref.footer,
-    current = _ref.current,
-    active = _ref.active,
-    type = _ref.type,
-    conversation = _ref.conversation,
-    transitions = _ref.transitions,
-    className = _ref.className;
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var audioEventsChannel = new BroadcastChannel("conversation_".concat(uuid.v1(), "_audioEvents"));
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var withAnimation = isView && !isStatic && timingMode === 'sequence';
-  var _ref2 = conversation || {},
-    _ref2$speakers = _ref2.speakers,
-    speakers = _ref2$speakers === void 0 ? null : _ref2$speakers,
-    _ref2$messages = _ref2.messages,
-    messages = _ref2$messages === void 0 ? [] : _ref2$messages,
-    messageStyle = _ref2.messageStyle,
-    speakerStyle = _ref2.speakerStyle;
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    conversationState = _useState2[0],
-    setConversationState = _useState2[1];
-  var chatBottomRef = React.useRef(null);
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var hasTitle = utils.isTextFilled(title);
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    contentRef = _useDimensionObserver.ref,
-    scrollHeight = _useDimensionObserver.height;
-  var scrollRef = React.useRef(null);
-  React.useEffect(function () {
-    if (withAnimation && scrollRef.current !== null) {
-      scrollRef.current.scrollTo({
-        top: scrollHeight,
-        behavior: 'smooth'
-      });
-    }
-  }, [scrollHeight, withAnimation]);
-  var animationFinished = messages.length === conversationState.length;
-  var conversationStateChange = React.useCallback(function (state) {
-    var newConversationState = _toConsumableArray(conversationState);
-    if (state === 'send') {
-      newConversationState.push(true);
-      setConversationState(newConversationState);
-    }
-  }, [conversationState, setConversationState]);
-
-  // sequence timings
-  var defaultHesitationDelay = 1500;
-  var imageReadDelay = 5000; // 5 seconds
-  var millisecondsPerWord = 60 * 1000 / readingSpeed;
-  var filteredMessages = (messages || []).filter(function (m) {
-    return m !== null;
-  });
-  var timings = filteredMessages.map(function (messageParams, messageIndex) {
-    if (messageIndex === 0) {
-      return 0;
-    }
-    var _ref3 = messageParams || {},
-      _ref3$timing = _ref3.timing,
-      timing = _ref3$timing === void 0 ? null : _ref3$timing,
-      _ref3$message = _ref3.message,
-      message = _ref3$message === void 0 ? null : _ref3$message,
-      image = _ref3.image,
-      audio = _ref3.audio,
-      timingOverrides = _ref3.timingOverrides;
-    if (timing !== null) {
-      return timing;
-    }
-    if (timingOverrides !== null && timingOverrides !== void 0 && timingOverrides.enabled && Number.isFinite(timingOverrides === null || timingOverrides === void 0 ? void 0 : timingOverrides.writingDuration)) {
-      return timingOverrides.writingDuration * 1000; // seconds to milliseconds
-    }
-
-    // if the current message has an audio attachment, use the time it takes to record that message
-    if (audio) {
-      return audio.metadata.duration;
-    }
-
-    // counting words: only keep whitespaces and alphanumeric characters, then split of whitespaces
-    var wordCount = message ? message.replace(/[^\w\d\s]/g, '').trim().split(/\s/g).length : 0;
-    var finalTimeMs = wordCount * millisecondsPerWord;
-
-    // if the message includes an image, add some more time to "read" it
-    if (image) {
-      finalTimeMs += imageReadDelay;
-    }
-    return finalTimeMs;
-  });
-  var hesitationTimings = filteredMessages.map(function (messageParams, messageIndex) {
-    var timingOverrides = messageParams.timingOverrides;
-    if (messageIndex !== 0 && timingOverrides !== null && timingOverrides !== void 0 && timingOverrides.enabled && Number.isFinite(timingOverrides === null || timingOverrides === void 0 ? void 0 : timingOverrides.appearDelay)) {
-      return timingOverrides.appearDelay * 1000; // seconds to milliseconds
-    }
-    return defaultHesitationDelay;
-  });
-  var messagesUniqueId = React.useMemo(function () {
-    return (messages || []).map(function () {
-      return uuid.v1();
-    });
-  }, [messages]);
-
-  // scroll
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    scrolledBottom = _useState4[0],
-    setScrolledBottom = _useState4[1];
-  var showFooter = animationFinished && !isPlaceholder && hasFooter || !withAnimation;
-  var onScrolledBottom = React.useCallback(function (_ref4) {
-    var initial = _ref4.initial;
-    if (initial) {
-      trackScreenEvent('scroll', 'Screen');
-    }
-    setScrolledBottom(true);
-  }, [trackScreenEvent]);
-  var onScrolledNotBottom = React.useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    ref: scrollRef,
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: contentRef
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    key: "header",
-    style: {
-      paddingBottom: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "conversation",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "NmCfTO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Conversation"
-      }]
-    }),
-    emptyClassName: styles.empty,
-    isEmpty: messages.length === 0 && title === null
-  }, /*#__PURE__*/React.createElement(components.Transitions, {
-    transitions: transitions,
-    playing: current,
-    disabled: transitionDisabled
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
-    className: styles.title,
-    isEmpty: title === null
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.conversation
-  }, filteredMessages.map(function (m, messageI) {
-    var previousMessage = messageI !== 0 ? messages[messageI - 1] : null;
-    var nextMessage = messageI + 1 < messages.length ? messages[messageI + 1] : null;
-    var speaker = m.speaker;
-    var currentSpeaker = (speakers || []).find(function (s) {
-      return s.id === speaker;
-    }) || null;
-    var shouldPlay = messageI === 0 || conversationState[messageI - 1] === true;
-    var pauseTiming = hesitationTimings[messageI];
-    var typingTiming = timings[messageI];
-    var messageId = "".concat(m.message, "-").concat(messagesUniqueId[messageI]);
-    var nextAudioMessage = filteredMessages.slice(messageI + 1).find(function (c) {
-      return c.audio != null;
-    });
-    var nextAudioMessageId = nextAudioMessage ? "".concat(m.message, "-").concat(messagesUniqueId[filteredMessages.indexOf(nextAudioMessage)]) : null;
-    return /*#__PURE__*/React.createElement(ConversationMessage$1, {
-      key: messageId,
-      message: m,
-      messageId: messageId,
-      previousMessage: previousMessage,
-      nextMessage: nextMessage,
-      nextAudioMessageId: nextAudioMessageId,
-      nextMessageState: conversationState[messageI + 1] || !withAnimation,
-      currentSpeaker: currentSpeaker,
-      conversationTiming: pauseTiming,
-      typingTiming: typingTiming,
-      onChange: conversationStateChange,
-      withAnimation: withAnimation,
-      isPlaying: current && shouldPlay,
-      shouldLoad: mediaShouldLoad,
-      withoutVideo: isPreview,
-      messageStyle: messageStyle,
-      speakerStyle: speakerStyle,
-      audioEventsChannelName: audioEventsChannel.name
-    });
-  })), showFooter ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
-    style: {
-      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingTop: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null, /*#__PURE__*/React.createElement("div", {
-    ref: chatBottomRef
-  }))))))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-};
-ConversationScreen.propTypes = propTypes;
-ConversationScreen.defaultProps = defaultProps;
-var ConversationScreen$1 = ConversationScreen;
-
-var definition = {
-  id: 'conversation',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "fIawTr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    }),
-    order: 3
-  },
-  title: reactIntl.defineMessage({
-    id: "rBPIgw",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Conversation"
-    }]
-  }),
-  component: ConversationScreen$1,
-  layouts: ['normal'],
-  fields: [
-  // {
-  //     name: 'theme',
-  //     type: 'select',
-  //     options: [
-  //         {
-  //             value: 'ios',
-  //             label: 'iOS',
-  //         },
-  //     ],
-  //     label: defineMessage({
-  //         defaultMessage: 'Theme',
-  //         description: 'Theme field label',
-  //     }),
-  // },
-  {
-    name: 'timing',
-    type: 'select',
-    options: [{
-      value: 'instant',
-      label: 'Instant'
-    }, {
-      value: 'sequence',
-      label: 'Sequence'
-    }],
-    label: reactIntl.defineMessage({
-      id: "6DV50M",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Timing"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'conversation',
-    type: 'conversation',
-    label: reactIntl.defineMessage({
-      id: "8tANs8",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Conversation"
-      }]
-    })
-  }, {
-    name: 'readingSpeed',
-    type: 'number',
-    defaultValue: 255,
-    label: reactIntl.defineMessage({
-      id: "QjbLZ9",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Reading speed (in Words Per Minute)"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-};
-
-exports.ConversationScreen = ConversationScreen$1;
-exports.default = definition;