@micromag/screen-conversation 0.3.150 → 0.3.156

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-conversation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-conversation-disabled.micromag-screen-conversation-container{overflow:hidden;pointer-events:none}.micromag-screen-conversation-hidden.micromag-screen-conversation-container{display:none;visibility:hidden}.micromag-screen-conversation-placeholder.micromag-screen-conversation-container .micromag-screen-conversation-content{position:relative;padding:6px}.micromag-screen-conversation-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.micromag-screen-conversation-container .micromag-screen-conversation-conversationHeader{width:100%;padding-bottom:16px;font-style:italic}.micromag-screen-conversation-container .micromag-screen-conversation-empty{height:200px}.micromag-screen-conversation-container .micromag-screen-conversation-title{padding-bottom:16px}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction a{padding:0}.micromag-screen-conversation-messageContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:#000}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{max-width:80%;margin:1px 0;padding:10px;-webkit-transition:border-radius .2s ease;-o-transition:border-radius .2s ease;transition:border-radius .2s ease;background-color:#fff;overflow-wrap:break-word}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-normalLeft{border-radius:1px 15px 15px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenLeft{border-radius:1px 15px 15px 1px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-normalRight{border-radius:15px 1px 15px 15px;background-color:#58afff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenRight{border-radius:15px 1px 1px 15px;background-color:#58afff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-last{margin:1px 0 16px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:100%;padding-bottom:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer{width:30px;height:30px;margin-right:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer.micromag-screen-conversation-right{margin-right:0;margin-left:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatar{display:inline-block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-imageContainer{width:100%;height:100%;padding-bottom:10px}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message{-webkit-animation:micromag-screen-conversation-appear .18s ease forwards;animation:micromag-screen-conversation-appear .18s ease forwards}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-normalLeft{-webkit-transform:translate(-300px) scale(.5);-ms-transform:translate(-300px) scale(.5);transform:translate(-300px) scale(.5)}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenLeft{border-radius:1px 15px 15px 1px}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-normalRight{-webkit-transform:translate(300px) scale(.5);-ms-transform:translate(300px) scale(.5);transform:translate(300px) scale(.5)}@-webkit-keyframes micromag-screen-conversation-appear{to{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}@keyframes micromag-screen-conversation-appear{to{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#fff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:5px 0 10px;padding:7px 10px;border-radius:10px;background:#fff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot{width:5px;height:5px;margin-right:4px;-webkit-animation:micromag-screen-conversation-bounce .35s linear infinite alternate;animation:micromag-screen-conversation-bounce .35s linear infinite alternate;border-radius:50%;background:#000}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot:nth-child(2){-webkit-animation-delay:.08s;animation-delay:.08s}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot:nth-child(3){margin-right:0;-webkit-animation-delay:.16s;animation-delay:.16s}@-webkit-keyframes micromag-screen-conversation-bounce{0%{-webkit-transform:translateY(-2px);transform:translateY(-2px);opacity:.5}to{-webkit-transform:translateY(2px);transform:translateY(2px);opacity:1}}@keyframes micromag-screen-conversation-bounce{0%{-webkit-transform:translateY(-2px);transform:translateY(-2px);opacity:.5}to{-webkit-transform:translateY(2px);transform:translateY(2px);opacity:1}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingSpeakerName{margin:0 5px;opacity:.6;font-size:12px;font-style:italic}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right{-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
+.micromag-screen-conversation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-conversation-disabled.micromag-screen-conversation-container{overflow:hidden;pointer-events:none}.micromag-screen-conversation-hidden.micromag-screen-conversation-container{display:none;visibility:hidden}.micromag-screen-conversation-placeholder.micromag-screen-conversation-container .micromag-screen-conversation-content{position:relative;padding:6px}.micromag-screen-conversation-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.micromag-screen-conversation-container .micromag-screen-conversation-conversationHeader{width:100%;padding-bottom:16px;font-style:italic}.micromag-screen-conversation-container .micromag-screen-conversation-empty{height:200px}.micromag-screen-conversation-container .micromag-screen-conversation-title{padding-bottom:16px}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction a{padding:0}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction.micromag-screen-conversation-disabled{opacity:0;pointer-events:none}.micromag-screen-conversation-layout{-webkit-transition:padding .2s ease-out;-o-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-conversation-messageContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:#000}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{max-width:80%;margin:1px 0;padding:10px;-webkit-transition:border-radius .2s ease;-o-transition:border-radius .2s ease;transition:border-radius .2s ease;background-color:#fff;overflow-wrap:break-word}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-normalLeft{border-radius:1px 15px 15px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenLeft{border-radius:1px 15px 15px 1px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-normalRight{border-radius:15px 1px 15px 15px;background-color:#58afff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenRight{border-radius:15px 1px 1px 15px;background-color:#58afff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-last{margin:1px 0 16px}.micromag-screen-conversation-messageContainer:last-child .micromag-screen-conversation-message.micromag-screen-conversation-last{margin-bottom:0}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:100%;padding-bottom:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer{width:30px;height:30px;margin-right:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer.micromag-screen-conversation-right{margin-right:0;margin-left:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatar{display:inline-block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-imageContainer{width:100%;height:100%;padding-bottom:10px}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message{-webkit-animation:micromag-screen-conversation-appear .18s ease forwards;animation:micromag-screen-conversation-appear .18s ease forwards}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-normalLeft{-webkit-transform:translate(-300px) scale(.5);-ms-transform:translate(-300px) scale(.5);transform:translate(-300px) scale(.5)}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenLeft{border-radius:1px 15px 15px 1px}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-normalRight{-webkit-transform:translate(300px) scale(.5);-ms-transform:translate(300px) scale(.5);transform:translate(300px) scale(.5)}@-webkit-keyframes micromag-screen-conversation-appear{to{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}@keyframes micromag-screen-conversation-appear{to{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#fff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:5px 0 10px;padding:7px 10px;border-radius:10px;background:#fff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot{width:5px;height:5px;margin-right:4px;-webkit-animation:micromag-screen-conversation-bounce .35s linear infinite alternate;animation:micromag-screen-conversation-bounce .35s linear infinite alternate;border-radius:50%;background:#000}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot:nth-child(2){-webkit-animation-delay:.08s;animation-delay:.08s}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot:nth-child(3){margin-right:0;-webkit-animation-delay:.16s;animation-delay:.16s}@-webkit-keyframes micromag-screen-conversation-bounce{0%{-webkit-transform:translateY(-2px);transform:translateY(-2px);opacity:.5}to{-webkit-transform:translateY(2px);transform:translateY(2px);opacity:1}}@keyframes micromag-screen-conversation-bounce{0%{-webkit-transform:translateY(-2px);transform:translateY(-2px);opacity:.5}to{-webkit-transform:translateY(2px);transform:translateY(2px);opacity:1}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingSpeakerName{margin:0 5px;opacity:.6;font-size:12px;font-style:italic}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right{-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}

package/es/index.js

@@ -8,8 +8,8 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { v1 } from 'uuid';
 import { PropTypes } from '@micromag/core';
 import { ScreenElement, Transitions } from '@micromag/core/components';
-import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
+import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
 import { getStyleFromColor, isTextFilled } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
@@ -21,7 +21,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-screen-conversation-container","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","callToAction":"micromag-screen-conversation-callToAction","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"};
+var styles = {"container":"micromag-screen-conversation-container","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","callToAction":"micromag-screen-conversation-callToAction","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"};
 
 var propTypes$1 = {
   message: PropTypes.conversationMessage,
@@ -192,8 +192,6 @@ var propTypes = {
   type: PropTypes$1.string,
   conversation: PropTypes.conversation,
   transitions: PropTypes.transitions,
-  enableInteraction: PropTypes$1.func,
-  disableInteraction: PropTypes$1.func,
   className: PropTypes$1.string
 };
 var defaultProps = {
@@ -208,13 +206,11 @@ var defaultProps = {
   type: null,
   conversation: null,
   transitions: null,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
 var ConversationScreen = function ConversationScreen(_ref) {
-  var _ref8;
+  var _ref7;
 
   var title = _ref.title,
       timingMode = _ref.timing,
@@ -226,21 +222,28 @@ var ConversationScreen = function ConversationScreen(_ref) {
       type = _ref.type,
       conversation = _ref.conversation,
       transitions = _ref.transitions,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = useViewer(),
-      menuSize = _useViewer.menuSize;
+  var _useViewerContext = useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
 
   var trackScreenEvent = useTrackScreenEvent(type);
 
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
+
   var _useScreenRenderConte = useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
       isPreview = _useScreenRenderConte.isPreview,
@@ -269,12 +272,9 @@ var ConversationScreen = function ConversationScreen(_ref) {
   var chatBottomRef = useRef(null);
   var hasTitle = isTextFilled(title);
 
-  var _useResizeObserver = useResizeObserver(),
-      contentRef = _useResizeObserver.ref,
-      scrollContentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = scrollContentRect || {},
-      scrollHeight = _ref3.height;
+  var _useDimensionObserver = useDimensionObserver(),
+      contentRef = _useDimensionObserver.ref,
+      scrollHeight = _useDimensionObserver.height;
 
   var scrollRef = useRef(null);
   useEffect(function () {
@@ -301,11 +301,11 @@ var ConversationScreen = function ConversationScreen(_ref) {
     return m !== null;
   });
   var timings = filteredMessages.map(function (messageParams, messageI) {
-    var _ref4 = messageParams || {},
-        _ref4$timing = _ref4.timing,
-        timing = _ref4$timing === void 0 ? null : _ref4$timing,
-        _ref4$message = _ref4.message,
-        message = _ref4$message === void 0 ? null : _ref4$message;
+    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;
 
     if (timing !== null) {
       return timing;
@@ -319,9 +319,9 @@ var ConversationScreen = function ConversationScreen(_ref) {
     return finalTime < 2000 ? finalTime : 2000;
   });
   var hesitationTimings = filteredMessages.map(function () {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref5$hesitation = _ref5.hesitation,
-        hesitation = _ref5$hesitation === void 0 ? null : _ref5$hesitation;
+    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref4$hesitation = _ref4.hesitation,
+        hesitation = _ref4$hesitation === void 0 ? null : _ref4$hesitation;
 
     return hesitation !== null ? hesitation : defaultHesitationDelay;
   });
@@ -334,24 +334,18 @@ var ConversationScreen = function ConversationScreen(_ref) {
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current; // CTA
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var _ref5 = callToAction || {},
+      _ref5$active = _ref5.active,
+      hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       scrolledBottom = _useState4[0],
       setScrolledBottom = _useState4[1];
 
-  var _useResizeObserver2 = useResizeObserver(),
-      callToActionRef = _useResizeObserver2.ref,
-      callToActionRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref6 = callToActionRect || {},
-      _ref6$height = _ref6.height,
-      callToActionHeight = _ref6$height === void 0 ? 0 : _ref6$height;
-
-  var viewCTA = animationFinished && !isPlaceholder && hasCallToAction || !withAnimation;
-  var onScrolledBottom = useCallback(function (_ref7) {
-    var initial = _ref7.initial;
+  var showCallToAction = animationFinished && !isPlaceholder && hasCallToAction || !withAnimation;
+  var onScrolledBottom = useCallback(function (_ref6) {
+    var initial = _ref6.initial;
 
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
@@ -363,7 +357,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
+    className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
     "data-screen-ready": true
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
@@ -371,7 +365,9 @@ var ConversationScreen = function ConversationScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
@@ -386,7 +382,8 @@ var ConversationScreen = function ConversationScreen(_ref) {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "conversation",
@@ -434,24 +431,18 @@ var ConversationScreen = function ConversationScreen(_ref) {
       messageStyle: messageStyle,
       speakerStyle: speakerStyle
     });
-  })), viewCTA ? /*#__PURE__*/React.createElement("div", {
+  })), showCallToAction ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
-      minHeight: callToActionHeight
+      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
+      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
+      paddingTop: spacing
     }
-  }, /*#__PURE__*/React.createElement(CallToAction, {
-    ref: callToActionRef,
-    className: styles.callToAction,
-    disabled: !scrolledBottom,
+  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
     animationDisabled: isPreview,
-    callToAction: callToAction,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null, /*#__PURE__*/React.createElement("div", {
+    openWebView: openWebView
+  }))) : null, /*#__PURE__*/React.createElement("div", {
     ref: chatBottomRef
   }))))))));
 };

package/lib/index.js

@@ -43,7 +43,7 @@ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 
-var styles = {"container":"micromag-screen-conversation-container","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","callToAction":"micromag-screen-conversation-callToAction","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"};
+var styles = {"container":"micromag-screen-conversation-container","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","callToAction":"micromag-screen-conversation-callToAction","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"};
 
 var propTypes$1 = {
   message: core.PropTypes.conversationMessage,
@@ -214,8 +214,6 @@ var propTypes = {
   type: PropTypes__default["default"].string,
   conversation: core.PropTypes.conversation,
   transitions: core.PropTypes.transitions,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -230,13 +228,11 @@ var defaultProps = {
   type: null,
   conversation: null,
   transitions: null,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
 var ConversationScreen = function ConversationScreen(_ref) {
-  var _ref8;
+  var _ref7;
 
   var title = _ref.title,
       timingMode = _ref.timing,
@@ -248,21 +244,28 @@ var ConversationScreen = function ConversationScreen(_ref) {
       type = _ref.type,
       conversation = _ref.conversation,
       transitions = _ref.transitions,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = contexts.useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = contexts.useViewer(),
-      menuSize = _useViewer.menuSize;
+  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 _useScreenRenderConte = contexts.useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
       isPreview = _useScreenRenderConte.isPreview,
@@ -291,12 +294,9 @@ var ConversationScreen = function ConversationScreen(_ref) {
   var chatBottomRef = React.useRef(null);
   var hasTitle = utils.isTextFilled(title);
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      contentRef = _useResizeObserver.ref,
-      scrollContentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = scrollContentRect || {},
-      scrollHeight = _ref3.height;
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      contentRef = _useDimensionObserver.ref,
+      scrollHeight = _useDimensionObserver.height;
 
   var scrollRef = React.useRef(null);
   React.useEffect(function () {
@@ -323,11 +323,11 @@ var ConversationScreen = function ConversationScreen(_ref) {
     return m !== null;
   });
   var timings = filteredMessages.map(function (messageParams, messageI) {
-    var _ref4 = messageParams || {},
-        _ref4$timing = _ref4.timing,
-        timing = _ref4$timing === void 0 ? null : _ref4$timing,
-        _ref4$message = _ref4.message,
-        message = _ref4$message === void 0 ? null : _ref4$message;
+    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;
 
     if (timing !== null) {
       return timing;
@@ -341,9 +341,9 @@ var ConversationScreen = function ConversationScreen(_ref) {
     return finalTime < 2000 ? finalTime : 2000;
   });
   var hesitationTimings = filteredMessages.map(function () {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref5$hesitation = _ref5.hesitation,
-        hesitation = _ref5$hesitation === void 0 ? null : _ref5$hesitation;
+    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref4$hesitation = _ref4.hesitation,
+        hesitation = _ref4$hesitation === void 0 ? null : _ref4$hesitation;
 
     return hesitation !== null ? hesitation : defaultHesitationDelay;
   });
@@ -356,24 +356,18 @@ var ConversationScreen = function ConversationScreen(_ref) {
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var scrollingDisabled = !isEdit && transitionDisabled || !current; // CTA
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var _ref5 = callToAction || {},
+      _ref5$active = _ref5.active,
+      hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
 
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
       scrolledBottom = _useState4[0],
       setScrolledBottom = _useState4[1];
 
-  var _useResizeObserver2 = hooks.useResizeObserver(),
-      callToActionRef = _useResizeObserver2.ref,
-      callToActionRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref6 = callToActionRect || {},
-      _ref6$height = _ref6.height,
-      callToActionHeight = _ref6$height === void 0 ? 0 : _ref6$height;
-
-  var viewCTA = animationFinished && !isPlaceholder && hasCallToAction || !withAnimation;
-  var onScrolledBottom = React.useCallback(function (_ref7) {
-    var initial = _ref7.initial;
+  var showCallToAction = animationFinished && !isPlaceholder && hasCallToAction || !withAnimation;
+  var onScrolledBottom = React.useCallback(function (_ref6) {
+    var initial = _ref6.initial;
 
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
@@ -385,7 +379,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
+    className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
     "data-screen-ready": true
   }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
@@ -393,7 +387,9 @@ var ConversationScreen = function ConversationScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
     height: height
@@ -408,7 +404,8 @@ var ConversationScreen = function ConversationScreen(_ref) {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing
     } : null
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     placeholder: "conversation",
@@ -456,24 +453,18 @@ var ConversationScreen = function ConversationScreen(_ref) {
       messageStyle: messageStyle,
       speakerStyle: speakerStyle
     });
-  })), viewCTA ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })), showCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
     style: {
-      minHeight: callToActionHeight
+      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
+      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
+      paddingTop: spacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
-    ref: callToActionRef,
-    className: styles.callToAction,
-    disabled: !scrolledBottom,
+  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
     animationDisabled: isPreview,
-    callToAction: callToAction,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    openWebView: openWebView
+  }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: chatBottomRef
   }))))))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-conversation",
-    "version": "0.3.150",
+    "version": "0.3.156",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,16 +49,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.150",
-        "@micromag/element-background": "^0.3.150",
-        "@micromag/element-call-to-action": "^0.3.150",
-        "@micromag/element-container": "^0.3.150",
-        "@micromag/element-heading": "^0.3.150",
-        "@micromag/element-layout": "^0.3.150",
-        "@micromag/element-scroll": "^0.3.150",
-        "@micromag/element-text": "^0.3.150",
-        "@micromag/element-visual": "^0.3.150",
-        "@micromag/transforms": "^0.3.150",
+        "@micromag/core": "^0.3.156",
+        "@micromag/element-background": "^0.3.156",
+        "@micromag/element-call-to-action": "^0.3.156",
+        "@micromag/element-container": "^0.3.156",
+        "@micromag/element-heading": "^0.3.156",
+        "@micromag/element-layout": "^0.3.156",
+        "@micromag/element-scroll": "^0.3.156",
+        "@micromag/element-text": "^0.3.156",
+        "@micromag/element-visual": "^0.3.156",
+        "@micromag/transforms": "^0.3.156",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c9441be7a115a52416883e404feeca422af4f2da"
+    "gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
 }