@micromag/screen-conversation 0.3.638 → 0.3.646

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- .micromag-screen-conversation-container .micromag-screen-conversation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-conversation-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-conversation-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.micromag-screen-conversation-container .micromag-screen-conversation-background{z-index:0}.micromag-screen-conversation-container .micromag-screen-conversation-content{z-index:1}.micromag-screen-conversation-container .micromag-screen-conversation-conversationHeader{font-style:italic;padding-bottom:16px;width:100%}.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-footer{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-conversation-container .micromag-screen-conversation-footer a{padding:0}.micromag-screen-conversation-container .micromag-screen-conversation-footer.micromag-screen-conversation-disabled{opacity:0;pointer-events:none}.micromag-screen-conversation-layout{-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-conversation-messageContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;color:#000;justify-content:flex-start}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{background-color:#fff;margin:1px 0;max-width:80%;padding:10px;-webkit-transition:border-radius .2s ease;transition:border-radius .2s ease;word-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{background-color:#58afff;border-radius:15px 1px 15px 15px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenRight{background-color:#58afff;border-radius:15px 1px 1px 15px}.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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-bottom:10px;width:100%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer{height:30px;margin-right:10px;width:30px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer.micromag-screen-conversation-right{margin-left:10px;margin-right:0}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatar{border-radius:50%;display:inline-block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-imageContainer{height:100%;padding-bottom:10px;width:100%}.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)}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message:first-child{-webkit-animation:micromag-screen-conversation-appear 0s ease forwards;animation:micromag-screen-conversation-appear 0s ease forwards}@-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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;color:#fff;justify-content:center}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background:#fff;border-radius:10px;justify-content:center;margin:5px 0 10px;padding:7px 10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot{-webkit-animation:micromag-screen-conversation-bounce .35s linear infinite alternate;animation:micromag-screen-conversation-bounce .35s linear infinite alternate;background:#000;border-radius:50%;height:5px;margin-right:4px;width:5px}.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){-webkit-animation-delay:.16s;animation-delay:.16s;margin-right:0}@-webkit-keyframes micromag-screen-conversation-bounce{0%{opacity:.5;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(2px);transform:translateY(2px)}}@keyframes micromag-screen-conversation-bounce{0%{opacity:.5;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(2px);transform:translateY(2px)}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingSpeakerName{font-size:12px;font-style:italic;margin:0 5px;opacity:.6}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right{-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-audioMessageContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;height:3em;justify-content:center;margin-left:0;margin-right:.5rem;width:3em}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer button{background:transparent;border:0}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-audioMessage{-ms-flex-positive:1;flex-grow:1;height:3em;min-width:7em}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-icon{height:2em;width:2em}.micromag-screen-conversation-audioAttachment.micromag-screen-conversation-beforeText{padding-bottom:.7em}.micromag-screen-conversation-audioAttachment.micromag-screen-conversation-afterText{padding-top:.7em}
1
+ .micromag-screen-conversation-container .micromag-screen-conversation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-conversation-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-conversation-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.micromag-screen-conversation-container .micromag-screen-conversation-background{z-index:0}.micromag-screen-conversation-container .micromag-screen-conversation-content{z-index:1}.micromag-screen-conversation-container .micromag-screen-conversation-conversationHeader{font-style:italic;padding-bottom:16px;width:100%}.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-footer{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-conversation-container .micromag-screen-conversation-footer a{padding:0}.micromag-screen-conversation-container .micromag-screen-conversation-footer.micromag-screen-conversation-disabled{opacity:0;pointer-events:none}.micromag-screen-conversation-layout{-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-conversation-messageContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;color:#000;justify-content:flex-start}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{background-color:#fff;margin:1px 0;max-width:80%;-webkit-transition:border-radius .2s ease;transition:border-radius .2s ease;word-wrap:break-word}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message>:first-child{padding-top:10px}.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{background-color:#58afff;border-radius:15px 1px 15px 15px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenRight{background-color:#58afff;border-radius:15px 1px 1px 15px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-last{margin:1px 0 16px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-messageBody>*{padding-bottom:10px;padding-left:10px;padding-right:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-left:10px;padding-right:10px;width:100%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer{height:30px;margin-right:10px;width:30px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer.micromag-screen-conversation-right{margin-left:10px;margin-right:0}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatar{border-radius:50%;display:inline-block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-imageContainer{height:100%;padding-bottom:10px;width:100%}.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)}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message:first-child{-webkit-animation:micromag-screen-conversation-appear 0s ease forwards;animation:micromag-screen-conversation-appear 0s ease forwards}@-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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;color:#fff;justify-content:center}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background:#fff;border-radius:10px;justify-content:center;margin:5px 0 10px;padding:7px 10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot{-webkit-animation:micromag-screen-conversation-bounce .35s linear infinite alternate;animation:micromag-screen-conversation-bounce .35s linear infinite alternate;background:#000;border-radius:50%;height:5px;margin-right:4px;width:5px}.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){-webkit-animation-delay:.16s;animation-delay:.16s;margin-right:0}@-webkit-keyframes micromag-screen-conversation-bounce{0%{opacity:.5;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(2px);transform:translateY(2px)}}@keyframes micromag-screen-conversation-bounce{0%{opacity:.5;-webkit-transform:translateY(-2px);transform:translateY(-2px)}to{opacity:1;-webkit-transform:translateY(2px);transform:translateY(2px)}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingSpeakerName{font-size:12px;font-style:italic;margin:0 5px;opacity:.6}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right{-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-messageContainer:last-child .micromag-screen-conversation-message.micromag-screen-conversation-last{margin-bottom:0}.micromag-screen-conversation-audioMessageContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;height:3em;justify-content:center;margin-left:0;margin-right:.5rem;width:2em}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-button{background:transparent;border:0;height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-audioMessage{-ms-flex-positive:1;flex-grow:1;height:3em;min-width:7em}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-icon{height:2em;width:2em}
package/es/index.js CHANGED
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
7
7
  import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
8
8
  import { v1 } from 'uuid';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
- import { Button, PlayIcon, PauseIcon, ScreenElement, Transitions } from '@micromag/core/components';
10
+ import { PlayIcon, PauseIcon, Button, ScreenElement, Transitions } from '@micromag/core/components';
11
11
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
12
12
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
13
13
  import { getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
@@ -23,25 +23,28 @@ import Text from '@micromag/element-text';
23
23
  import Visual from '@micromag/element-visual';
24
24
  import Audio from '@micromag/element-audio';
25
25
 
26
- var styles = {"container":"micromag-screen-conversation-container","background":"micromag-screen-conversation-background","disabled":"micromag-screen-conversation-disabled","content":"micromag-screen-conversation-content","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","loadingContainer":"micromag-screen-conversation-loadingContainer","loading":"micromag-screen-conversation-loading","dot":"micromag-screen-conversation-dot","loadingSpeakerName":"micromag-screen-conversation-loadingSpeakerName","audioMessageContainer":"micromag-screen-conversation-audioMessageContainer","playButtonContainer":"micromag-screen-conversation-playButtonContainer","audioMessage":"micromag-screen-conversation-audioMessage","icon":"micromag-screen-conversation-icon","audioAttachment":"micromag-screen-conversation-audioAttachment","beforeText":"micromag-screen-conversation-beforeText","afterText":"micromag-screen-conversation-afterText"};
26
+ var styles = {"container":"micromag-screen-conversation-container","background":"micromag-screen-conversation-background","disabled":"micromag-screen-conversation-disabled","content":"micromag-screen-conversation-content","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","messageBody":"micromag-screen-conversation-messageBody","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","loadingContainer":"micromag-screen-conversation-loadingContainer","loading":"micromag-screen-conversation-loading","dot":"micromag-screen-conversation-dot","loadingSpeakerName":"micromag-screen-conversation-loadingSpeakerName","audioMessageContainer":"micromag-screen-conversation-audioMessageContainer","playButtonContainer":"micromag-screen-conversation-playButtonContainer","button":"micromag-screen-conversation-button","audioMessage":"micromag-screen-conversation-audioMessage","icon":"micromag-screen-conversation-icon"};
27
27
 
28
28
  var propTypes$2 = {
29
29
  audio: PropTypes$1.audioMedia,
30
30
  audioEventsChannelName: PropTypes.string,
31
31
  messageId: PropTypes.string,
32
- nextAudioMessageId: PropTypes.string
32
+ nextAudioMessageId: PropTypes.string,
33
+ className: PropTypes.string
33
34
  };
34
35
  var defaultProps$2 = {
35
36
  audio: null,
36
37
  audioEventsChannelName: null,
37
38
  messageId: null,
38
- nextAudioMessageId: null
39
+ nextAudioMessageId: null,
40
+ className: null
39
41
  };
40
42
  var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
41
43
  var audio = _ref.audio,
42
44
  audioEventsChannelName = _ref.audioEventsChannelName,
43
45
  messageId = _ref.messageId,
44
- nextAudioMessageId = _ref.nextAudioMessageId;
46
+ nextAudioMessageId = _ref.nextAudioMessageId,
47
+ className = _ref.className;
45
48
  var _useState = useState(true),
46
49
  _useState2 = _slicedToArray(_useState, 2),
47
50
  paused = _useState2[0],
@@ -86,16 +89,13 @@ var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
86
89
  setPaused(true);
87
90
  };
88
91
  return /*#__PURE__*/React.createElement("div", {
89
- className: classNames([styles.audioMessageContainer])
92
+ className: classNames([styles.audioMessageContainer, className])
90
93
  }, /*#__PURE__*/React.createElement("div", {
91
94
  className: styles.playButtonContainer
92
- }, /*#__PURE__*/React.createElement(Button, {
93
- onClick: togglePaused,
94
- icon: paused ? /*#__PURE__*/React.createElement(PlayIcon, {
95
- className: styles.icon
96
- }) : /*#__PURE__*/React.createElement(PauseIcon, {
97
- className: styles.icon
98
- })
95
+ }, paused ? /*#__PURE__*/React.createElement(PlayIcon, {
96
+ className: styles.icon
97
+ }) : /*#__PURE__*/React.createElement(PauseIcon, {
98
+ className: styles.icon
99
99
  })), /*#__PURE__*/React.createElement(Audio, {
100
100
  withWave: true,
101
101
  autoWaveHeight: true,
@@ -104,6 +104,9 @@ var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
104
104
  paused: paused,
105
105
  updateInterval: 100,
106
106
  onEnded: onAudioEnded
107
+ }), /*#__PURE__*/React.createElement(Button, {
108
+ onClick: togglePaused,
109
+ className: styles.button
107
110
  }));
108
111
  };
109
112
  ConversationAudioAttachment.propTypes = propTypes$2;
@@ -220,14 +223,6 @@ var ConversationMessage = function ConversationMessage(_ref) {
220
223
  }
221
224
  }, [messageState]);
222
225
  var betweenStyle = isNextSpeakerTheSame && nextMessageState;
223
- var buildAudioAttachment = function buildAudioAttachment() {
224
- return /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
225
- audio: audio,
226
- messageId: messageId,
227
- nextAudioMessageId: nextAudioMessageId,
228
- audioEventsChannelName: audioEventsChannelName
229
- });
230
- };
231
226
  return messageState !== 'pause' ? /*#__PURE__*/React.createElement("div", {
232
227
  className: classNames([styles.messageContainer, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.withAnimation, withAnimation === true), styles.right, right)])
233
228
  }, messageState === 'typing' ? /*#__PURE__*/React.createElement("div", {
@@ -257,7 +252,7 @@ var ConversationMessage = function ConversationMessage(_ref) {
257
252
  })) : null, /*#__PURE__*/React.createElement(Text, {
258
253
  body: speakerName,
259
254
  textStyle: speakerStyle
260
- })) : null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
255
+ })) : null, /*#__PURE__*/React.createElement("div", {
261
256
  className: styles.messageBody
262
257
  }, image !== null ? /*#__PURE__*/React.createElement("div", {
263
258
  className: styles.imageContainer
@@ -266,15 +261,23 @@ var ConversationMessage = function ConversationMessage(_ref) {
266
261
  width: "100%",
267
262
  playing: isPlaying,
268
263
  active: active
269
- })) : null, audio && putAudioBeforeText ? /*#__PURE__*/React.createElement("div", {
264
+ })) : null, audio && putAudioBeforeText ? /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
265
+ audio: audio,
266
+ messageId: messageId,
267
+ nextAudioMessageId: nextAudioMessageId,
268
+ audioEventsChannelName: audioEventsChannelName,
270
269
  className: classNames(styles.audioAttachment, styles.beforeText)
271
- }, buildAudioAttachment()) : null, /*#__PURE__*/React.createElement(Text, {
272
- className: styles.messageBody,
270
+ }) : null, /*#__PURE__*/React.createElement(Text, {
271
+ className: styles.messageText,
273
272
  body: messageBody,
274
273
  textStyle: messageStyle
275
- }), audio && !putAudioBeforeText ? /*#__PURE__*/React.createElement("div", {
274
+ }), audio && !putAudioBeforeText ? /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
275
+ audio: audio,
276
+ messageId: messageId,
277
+ nextAudioMessageId: nextAudioMessageId,
278
+ audioEventsChannelName: audioEventsChannelName,
276
279
  className: classNames(styles.audioAttachment, styles.afterText)
277
- }, buildAudioAttachment()) : null))) : null;
280
+ }) : null))) : null;
278
281
  };
279
282
  ConversationMessage.propTypes = propTypes$1;
280
283
  ConversationMessage.defaultProps = defaultProps$1;
@@ -376,8 +379,12 @@ var ConversationScreen = function ConversationScreen(_ref) {
376
379
  contentRef = _useDimensionObserver.ref,
377
380
  scrollHeight = _useDimensionObserver.height;
378
381
  var scrollRef = useRef(null);
382
+ var _useState3 = useState(false),
383
+ _useState4 = _slicedToArray(_useState3, 2),
384
+ scrolledBottom = _useState4[0],
385
+ setScrolledBottom = _useState4[1];
379
386
  useEffect(function () {
380
- if (withAnimation && scrollRef.current !== null) {
387
+ if (withAnimation && scrollRef.current !== null && scrolledBottom) {
381
388
  scrollRef.current.scrollTo({
382
389
  top: scrollHeight,
383
390
  behavior: 'smooth'
@@ -451,10 +458,6 @@ var ConversationScreen = function ConversationScreen(_ref) {
451
458
  // scroll
452
459
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
453
460
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
454
- var _useState3 = useState(false),
455
- _useState4 = _slicedToArray(_useState3, 2),
456
- scrolledBottom = _useState4[0],
457
- setScrolledBottom = _useState4[1];
458
461
  var showFooter = animationFinished && !isPlaceholder && hasFooter || !withAnimation;
459
462
  var onScrolledBottom = useCallback(function (_ref4) {
460
463
  var initial = _ref4.initial;
@@ -466,7 +469,6 @@ var ConversationScreen = function ConversationScreen(_ref) {
466
469
  var onScrolledNotBottom = useCallback(function () {
467
470
  setScrolledBottom(false);
468
471
  }, [setScrolledBottom]);
469
- console.log('preload', preload);
470
472
  return /*#__PURE__*/React.createElement("div", {
471
473
  className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
472
474
  "data-screen-ready": true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-conversation",
3
- "version": "0.3.638",
3
+ "version": "0.3.646",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -67,7 +67,7 @@
67
67
  "@micromag/element-header": "^0.3.637",
68
68
  "@micromag/element-heading": "^0.3.637",
69
69
  "@micromag/element-layout": "^0.3.637",
70
- "@micromag/element-scroll": "^0.3.637",
70
+ "@micromag/element-scroll": "^0.3.646",
71
71
  "@micromag/element-text": "^0.3.637",
72
72
  "@micromag/element-visual": "^0.3.637",
73
73
  "@micromag/transforms": "^0.3.637",
@@ -81,5 +81,5 @@
81
81
  "access": "public",
82
82
  "registry": "https://registry.npmjs.org/"
83
83
  },
84
- "gitHead": "3da246905201a39de1a4a723d3680959da9c63eb"
84
+ "gitHead": "65b02adf2537ee701442a62f8294f09f60b2f3b6"
85
85
  }