@micromag/screen-conversation 0.3.456 → 0.3.457

package/assets/css/styles.css

@@ -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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{word-wrap:break-word;background-color:#fff;margin:1px 0;max-width:80%;padding:10px;-webkit-transition:border-radius .2s ease;transition:border-radius .2s ease}.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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start;padding-bottom:10px;width:100%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-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)}@-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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:#fff;border-radius:10px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-audioMessageContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;margin-right:.5rem;width:3em}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer button{border:0}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-audioMessage{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:3em;min-width:7em}
+.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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{word-wrap:break-word;background-color:#fff;margin:1px 0;max-width:80%;padding:10px;-webkit-transition:border-radius .2s ease;transition:border-radius .2s ease}.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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start;padding-bottom:10px;width:100%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-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)}@-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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:#fff;border-radius:10px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-audioMessageContainer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;margin-right:.5rem;width:3em}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-playButtonContainer button{border:0}.micromag-screen-conversation-audioMessageContainer .micromag-screen-conversation-audioMessage{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:3em;min-width:7em}.micromag-screen-conversation-audioAttachment.micromag-screen-conversation-beforeText{padding-bottom:.7em}.micromag-screen-conversation-audioAttachment.micromag-screen-conversation-afterText{padding-top:.7em}

package/es/index.js

@@ -23,7 +23,7 @@ import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 import Audio from '@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"};
+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: PropTypes.audioMedia,
@@ -167,7 +167,8 @@ var ConversationMessage = function ConversationMessage(_ref) {
     messageBody = _ref2.message,
     _ref2$image = _ref2.image,
     image = _ref2$image === void 0 ? null : _ref2$image,
-    audio = _ref2.audio;
+    audio = _ref2.audio,
+    putAudioBeforeText = _ref2.putAudioBeforeText;
   var _ref3 = currentSpeaker || {},
     _ref3$avatar = _ref3.avatar,
     _ref3$avatar2 = _ref3$avatar === void 0 ? {} : _ref3$avatar,
@@ -215,6 +216,14 @@ var ConversationMessage = function ConversationMessage(_ref) {
     }
   }, [messageState]);
   var betweenStyle = isNextSpeakerTheSame && nextMessageState;
+  var buildAudioAttachment = function buildAudioAttachment() {
+    return /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
+      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", {
@@ -253,16 +262,15 @@ var ConversationMessage = function ConversationMessage(_ref) {
     width: "100%",
     playing: isPlaying,
     active: active
-  })) : null, /*#__PURE__*/React.createElement(Text, {
+  })) : 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 ? /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
-    audio: audio,
-    messageId: messageId,
-    nextAudioMessageId: nextAudioMessageId,
-    audioEventsChannelName: audioEventsChannelName
-  }) : null))) : null;
+  }), audio && !putAudioBeforeText ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.audioAttachment, styles.afterText)
+  }, buildAudioAttachment()) : null))) : null;
 };
 ConversationMessage.propTypes = propTypes$1;
 ConversationMessage.defaultProps = defaultProps$1;

package/lib/index.js

@@ -27,7 +27,7 @@ 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"};
+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,
@@ -171,7 +171,8 @@ var ConversationMessage = function ConversationMessage(_ref) {
     messageBody = _ref2.message,
     _ref2$image = _ref2.image,
     image = _ref2$image === void 0 ? null : _ref2$image,
-    audio = _ref2.audio;
+    audio = _ref2.audio,
+    putAudioBeforeText = _ref2.putAudioBeforeText;
   var _ref3 = currentSpeaker || {},
     _ref3$avatar = _ref3.avatar,
     _ref3$avatar2 = _ref3$avatar === void 0 ? {} : _ref3$avatar,
@@ -219,6 +220,14 @@ var ConversationMessage = function ConversationMessage(_ref) {
     }
   }, [messageState]);
   var betweenStyle = isNextSpeakerTheSame && nextMessageState;
+  var buildAudioAttachment = function buildAudioAttachment() {
+    return /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
+      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", {
@@ -257,16 +266,15 @@ var ConversationMessage = function ConversationMessage(_ref) {
     width: "100%",
     playing: isPlaying,
     active: active
-  })) : null, /*#__PURE__*/React.createElement(Text, {
+  })) : 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 ? /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
-    audio: audio,
-    messageId: messageId,
-    nextAudioMessageId: nextAudioMessageId,
-    audioEventsChannelName: audioEventsChannelName
-  }) : null))) : null;
+  }), audio && !putAudioBeforeText ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.audioAttachment, styles.afterText)
+  }, buildAudioAttachment()) : null))) : null;
 };
 ConversationMessage.propTypes = propTypes$1;
 ConversationMessage.defaultProps = defaultProps$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-conversation",
-    "version": "0.3.456",
+    "version": "0.3.457",
     "private": false,
     "description": "",
     "keywords": [
@@ -80,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "d834231cf9fc7feb8ba37476c4a44f9a79beaca2"
+    "gitHead": "260b51e232a7be8655e03ebb53fa1c31cf74db78"
 }