@micromag/screen-conversation 0.3.425 → 0.3.429
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.
- package/assets/css/styles.css +1 -1
- package/es/index.js +3 -5
- package/lib/index.js +73 -95
- package/package.json +21 -13
package/assets/css/styles.css
CHANGED
|
@@ -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{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;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
|
|
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}
|
package/es/index.js
CHANGED
|
@@ -147,7 +147,6 @@ var defaultProps$1 = {
|
|
|
147
147
|
audioEventsChannelName: null
|
|
148
148
|
};
|
|
149
149
|
var ConversationMessage = function ConversationMessage(_ref) {
|
|
150
|
-
var _ref4, _ref5;
|
|
151
150
|
var message = _ref.message,
|
|
152
151
|
messageId = _ref.messageId,
|
|
153
152
|
previousMessage = _ref.previousMessage,
|
|
@@ -218,7 +217,7 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
218
217
|
}, [messageState]);
|
|
219
218
|
var betweenStyle = isNextSpeakerTheSame && nextMessageState;
|
|
220
219
|
return messageState !== 'pause' ? /*#__PURE__*/React.createElement("div", {
|
|
221
|
-
className: classNames([styles.messageContainer, (
|
|
220
|
+
className: classNames([styles.messageContainer, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.withAnimation, withAnimation === true), styles.right, right)])
|
|
222
221
|
}, messageState === 'typing' ? /*#__PURE__*/React.createElement("div", {
|
|
223
222
|
className: styles.loadingContainer
|
|
224
223
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -232,7 +231,7 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
232
231
|
})), /*#__PURE__*/React.createElement("div", {
|
|
233
232
|
className: styles.loadingSpeakerName
|
|
234
233
|
}, speakerName)) : /*#__PURE__*/React.createElement("div", {
|
|
235
|
-
className: classNames([styles.message, (
|
|
234
|
+
className: classNames([styles.message, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.normalRight, right), styles.nextTheSame, isNextSpeakerTheSame === true && isPrevSpeakerTheSame), styles.inBetweenRight, betweenStyle && right), styles.normalLeft, !right), styles.inBetweenLeft, betweenStyle && !right), styles.last, isNextSpeakerTheSame === false)]),
|
|
236
235
|
style: _objectSpread({}, getStyleFromColor(color))
|
|
237
236
|
}, !isPrevSpeakerTheSame ? /*#__PURE__*/React.createElement("div", {
|
|
238
237
|
className: classNames([styles.speakerDetails, _defineProperty({}, styles.right, side === 'right')])
|
|
@@ -303,7 +302,6 @@ var defaultProps = {
|
|
|
303
302
|
className: null
|
|
304
303
|
};
|
|
305
304
|
var ConversationScreen = function ConversationScreen(_ref) {
|
|
306
|
-
var _ref6;
|
|
307
305
|
var title = _ref.title,
|
|
308
306
|
timingMode = _ref.timing,
|
|
309
307
|
readingSpeed = _ref.readingSpeed,
|
|
@@ -452,7 +450,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
452
450
|
setScrolledBottom(false);
|
|
453
451
|
}, [setScrolledBottom]);
|
|
454
452
|
return /*#__PURE__*/React.createElement("div", {
|
|
455
|
-
className: classNames([styles.container, (
|
|
453
|
+
className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
|
|
456
454
|
"data-screen-ready": true
|
|
457
455
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
458
456
|
width: width,
|
package/lib/index.js
CHANGED
|
@@ -28,33 +28,13 @@ var Visual = require('@micromag/element-visual');
|
|
|
28
28
|
var Audio = require('@micromag/element-audio');
|
|
29
29
|
require('wolfy87-eventemitter');
|
|
30
30
|
|
|
31
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
32
|
-
|
|
33
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
34
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
35
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
36
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
37
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
38
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
39
|
-
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
40
|
-
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
41
|
-
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
42
|
-
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
43
|
-
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
44
|
-
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
45
|
-
var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
46
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
47
|
-
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
48
|
-
var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
49
|
-
var Audio__default = /*#__PURE__*/_interopDefaultLegacy(Audio);
|
|
50
|
-
|
|
51
31
|
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"};
|
|
52
32
|
|
|
53
33
|
var propTypes$2 = {
|
|
54
34
|
audio: core.PropTypes.audioMedia,
|
|
55
|
-
audioEventsChannelName:
|
|
56
|
-
messageId:
|
|
57
|
-
nextAudioMessageId:
|
|
35
|
+
audioEventsChannelName: PropTypes.string,
|
|
36
|
+
messageId: PropTypes.string,
|
|
37
|
+
nextAudioMessageId: PropTypes.string
|
|
58
38
|
};
|
|
59
39
|
var defaultProps$2 = {
|
|
60
40
|
audio: null,
|
|
@@ -68,7 +48,7 @@ var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
|
|
|
68
48
|
messageId = _ref.messageId,
|
|
69
49
|
nextAudioMessageId = _ref.nextAudioMessageId;
|
|
70
50
|
var _useState = React.useState(true),
|
|
71
|
-
_useState2 =
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
72
52
|
paused = _useState2[0],
|
|
73
53
|
setPaused = _useState2[1];
|
|
74
54
|
var audioEventsChannel = React.useMemo(function () {
|
|
@@ -111,14 +91,14 @@ var ConversationAudioAttachment = function ConversationAudioAttachment(_ref) {
|
|
|
111
91
|
}
|
|
112
92
|
setPaused(true);
|
|
113
93
|
};
|
|
114
|
-
return /*#__PURE__*/
|
|
115
|
-
className:
|
|
116
|
-
}, /*#__PURE__*/
|
|
94
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: classNames([styles.audioMessageContainer])
|
|
96
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
117
97
|
className: styles.playButtonContainer
|
|
118
|
-
}, /*#__PURE__*/
|
|
98
|
+
}, /*#__PURE__*/React.createElement(components.Button, {
|
|
119
99
|
onClick: togglePaused,
|
|
120
|
-
icon: paused ? /*#__PURE__*/
|
|
121
|
-
})), /*#__PURE__*/
|
|
100
|
+
icon: paused ? /*#__PURE__*/React.createElement(components.PlayIcon, null) : /*#__PURE__*/React.createElement(components.PauseIcon, null)
|
|
101
|
+
})), /*#__PURE__*/React.createElement(Audio, {
|
|
122
102
|
withWave: true,
|
|
123
103
|
autoWaveHeight: true,
|
|
124
104
|
className: styles.audioMessage,
|
|
@@ -133,23 +113,23 @@ ConversationAudioAttachment.defaultProps = defaultProps$2;
|
|
|
133
113
|
|
|
134
114
|
var propTypes$1 = {
|
|
135
115
|
message: core.PropTypes.conversationMessage,
|
|
136
|
-
messageId:
|
|
116
|
+
messageId: PropTypes.string,
|
|
137
117
|
previousMessage: core.PropTypes.conversationMessage,
|
|
138
118
|
nextMessage: core.PropTypes.conversationMessage,
|
|
139
|
-
nextAudioMessageId:
|
|
140
|
-
nextMessageState:
|
|
119
|
+
nextAudioMessageId: PropTypes.string,
|
|
120
|
+
nextMessageState: PropTypes.bool,
|
|
141
121
|
currentSpeaker: core.PropTypes.speaker,
|
|
142
122
|
// state: PropTypes.oneOf(['pause', 'typing', 'send']),
|
|
143
|
-
conversationTiming:
|
|
144
|
-
typingTiming:
|
|
145
|
-
onChange:
|
|
146
|
-
withAnimation:
|
|
147
|
-
active:
|
|
148
|
-
isPlaying:
|
|
123
|
+
conversationTiming: PropTypes.number,
|
|
124
|
+
typingTiming: PropTypes.number,
|
|
125
|
+
onChange: PropTypes.func,
|
|
126
|
+
withAnimation: PropTypes.bool,
|
|
127
|
+
active: PropTypes.bool,
|
|
128
|
+
isPlaying: PropTypes.bool,
|
|
149
129
|
speakerStyle: core.PropTypes.textStyle,
|
|
150
130
|
messageStyle: core.PropTypes.textStyle,
|
|
151
|
-
className:
|
|
152
|
-
audioEventsChannelName:
|
|
131
|
+
className: PropTypes.string,
|
|
132
|
+
audioEventsChannelName: PropTypes.string
|
|
153
133
|
};
|
|
154
134
|
var defaultProps$1 = {
|
|
155
135
|
message: null,
|
|
@@ -171,7 +151,6 @@ var defaultProps$1 = {
|
|
|
171
151
|
audioEventsChannelName: null
|
|
172
152
|
};
|
|
173
153
|
var ConversationMessage = function ConversationMessage(_ref) {
|
|
174
|
-
var _ref4, _ref5;
|
|
175
154
|
var message = _ref.message,
|
|
176
155
|
messageId = _ref.messageId,
|
|
177
156
|
previousMessage = _ref.previousMessage,
|
|
@@ -210,7 +189,7 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
210
189
|
|
|
211
190
|
// Timing
|
|
212
191
|
var _useState = React.useState(withAnimation ? 'pause' : 'send'),
|
|
213
|
-
_useState2 =
|
|
192
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
214
193
|
messageState = _useState2[0],
|
|
215
194
|
setMessageState = _useState2[1];
|
|
216
195
|
var pauseBeforeTyping = conversationTiming;
|
|
@@ -241,49 +220,49 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
241
220
|
}
|
|
242
221
|
}, [messageState]);
|
|
243
222
|
var betweenStyle = isNextSpeakerTheSame && nextMessageState;
|
|
244
|
-
return messageState !== 'pause' ? /*#__PURE__*/
|
|
245
|
-
className:
|
|
246
|
-
}, messageState === 'typing' ? /*#__PURE__*/
|
|
223
|
+
return messageState !== 'pause' ? /*#__PURE__*/React.createElement("div", {
|
|
224
|
+
className: classNames([styles.messageContainer, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.withAnimation, withAnimation === true), styles.right, right)])
|
|
225
|
+
}, messageState === 'typing' ? /*#__PURE__*/React.createElement("div", {
|
|
247
226
|
className: styles.loadingContainer
|
|
248
|
-
}, /*#__PURE__*/
|
|
227
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
249
228
|
className: styles.loading
|
|
250
|
-
}, /*#__PURE__*/
|
|
229
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
251
230
|
className: styles.dot
|
|
252
|
-
}), /*#__PURE__*/
|
|
231
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
253
232
|
className: styles.dot
|
|
254
|
-
}), /*#__PURE__*/
|
|
233
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
255
234
|
className: styles.dot
|
|
256
|
-
})), /*#__PURE__*/
|
|
235
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
257
236
|
className: styles.loadingSpeakerName
|
|
258
|
-
}, speakerName)) : /*#__PURE__*/
|
|
259
|
-
className:
|
|
260
|
-
style:
|
|
261
|
-
}, !isPrevSpeakerTheSame ? /*#__PURE__*/
|
|
262
|
-
className:
|
|
263
|
-
}, avatarUrl !== null ? /*#__PURE__*/
|
|
264
|
-
className:
|
|
265
|
-
}, /*#__PURE__*/
|
|
237
|
+
}, speakerName)) : /*#__PURE__*/React.createElement("div", {
|
|
238
|
+
className: classNames([styles.message, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.normalRight, right), styles.nextTheSame, isNextSpeakerTheSame === true && isPrevSpeakerTheSame), styles.inBetweenRight, betweenStyle && right), styles.normalLeft, !right), styles.inBetweenLeft, betweenStyle && !right), styles.last, isNextSpeakerTheSame === false)]),
|
|
239
|
+
style: _objectSpread({}, utils.getStyleFromColor(color))
|
|
240
|
+
}, !isPrevSpeakerTheSame ? /*#__PURE__*/React.createElement("div", {
|
|
241
|
+
className: classNames([styles.speakerDetails, _defineProperty({}, styles.right, side === 'right')])
|
|
242
|
+
}, avatarUrl !== null ? /*#__PURE__*/React.createElement("div", {
|
|
243
|
+
className: classNames([styles.avatarContainer, _defineProperty({}, styles.right, side === 'right')])
|
|
244
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
266
245
|
className: styles.avatar,
|
|
267
246
|
src: avatarUrl,
|
|
268
247
|
alt: speakerName,
|
|
269
248
|
loading: "lazy"
|
|
270
|
-
})) : null, /*#__PURE__*/
|
|
249
|
+
})) : null, /*#__PURE__*/React.createElement(Text, {
|
|
271
250
|
body: speakerName,
|
|
272
251
|
textStyle: speakerStyle
|
|
273
|
-
})) : null, /*#__PURE__*/
|
|
252
|
+
})) : null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
|
|
274
253
|
className: styles.messageBody
|
|
275
|
-
}, image !== null ? /*#__PURE__*/
|
|
254
|
+
}, image !== null ? /*#__PURE__*/React.createElement("div", {
|
|
276
255
|
className: styles.imageContainer
|
|
277
|
-
}, /*#__PURE__*/
|
|
256
|
+
}, /*#__PURE__*/React.createElement(Visual, {
|
|
278
257
|
media: image,
|
|
279
258
|
width: "100%",
|
|
280
259
|
playing: isPlaying,
|
|
281
260
|
active: active
|
|
282
|
-
})) : null, /*#__PURE__*/
|
|
261
|
+
})) : null, /*#__PURE__*/React.createElement(Text, {
|
|
283
262
|
className: styles.messageBody,
|
|
284
263
|
body: messageBody,
|
|
285
264
|
textStyle: messageStyle
|
|
286
|
-
}), audio ? /*#__PURE__*/
|
|
265
|
+
}), audio ? /*#__PURE__*/React.createElement(ConversationAudioAttachment, {
|
|
287
266
|
audio: audio,
|
|
288
267
|
messageId: messageId,
|
|
289
268
|
nextAudioMessageId: nextAudioMessageId,
|
|
@@ -297,18 +276,18 @@ var propTypes = {
|
|
|
297
276
|
// id: PropTypes.string,
|
|
298
277
|
// layout: PropTypes.oneOf(['normal']),
|
|
299
278
|
title: core.PropTypes.headingElement,
|
|
300
|
-
timing:
|
|
301
|
-
readingSpeed:
|
|
302
|
-
spacing:
|
|
279
|
+
timing: PropTypes.oneOf(['instant', 'sequence']),
|
|
280
|
+
readingSpeed: PropTypes.number,
|
|
281
|
+
spacing: PropTypes.number,
|
|
303
282
|
background: core.PropTypes.backgroundElement,
|
|
304
283
|
header: core.PropTypes.header,
|
|
305
284
|
footer: core.PropTypes.footer,
|
|
306
|
-
current:
|
|
307
|
-
active:
|
|
308
|
-
type:
|
|
285
|
+
current: PropTypes.bool,
|
|
286
|
+
active: PropTypes.bool,
|
|
287
|
+
type: PropTypes.string,
|
|
309
288
|
conversation: core.PropTypes.conversation,
|
|
310
289
|
transitions: core.PropTypes.transitions,
|
|
311
|
-
className:
|
|
290
|
+
className: PropTypes.string
|
|
312
291
|
};
|
|
313
292
|
var defaultProps = {
|
|
314
293
|
// layout: 'normal',
|
|
@@ -327,7 +306,6 @@ var defaultProps = {
|
|
|
327
306
|
className: null
|
|
328
307
|
};
|
|
329
308
|
var ConversationScreen = function ConversationScreen(_ref) {
|
|
330
|
-
var _ref6;
|
|
331
309
|
var title = _ref.title,
|
|
332
310
|
timingMode = _ref.timing,
|
|
333
311
|
readingSpeed = _ref.readingSpeed,
|
|
@@ -374,7 +352,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
374
352
|
messageStyle = _ref2.messageStyle,
|
|
375
353
|
speakerStyle = _ref2.speakerStyle;
|
|
376
354
|
var _useState = React.useState([]),
|
|
377
|
-
_useState2 =
|
|
355
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
378
356
|
conversationState = _useState2[0],
|
|
379
357
|
setConversationState = _useState2[1];
|
|
380
358
|
var chatBottomRef = React.useRef(null);
|
|
@@ -401,7 +379,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
401
379
|
}, [scrollHeight, withAnimation]);
|
|
402
380
|
var animationFinished = messages.length === conversationState.length;
|
|
403
381
|
var conversationStateChange = React.useCallback(function (state) {
|
|
404
|
-
var newConversationState =
|
|
382
|
+
var newConversationState = _toConsumableArray(conversationState);
|
|
405
383
|
if (state === 'send') {
|
|
406
384
|
newConversationState.push(true);
|
|
407
385
|
setConversationState(newConversationState);
|
|
@@ -461,7 +439,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
461
439
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
462
440
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
463
441
|
var _useState3 = React.useState(false),
|
|
464
|
-
_useState4 =
|
|
442
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
465
443
|
scrolledBottom = _useState4[0],
|
|
466
444
|
setScrolledBottom = _useState4[1];
|
|
467
445
|
var showFooter = animationFinished && !isPlaceholder && hasFooter || !withAnimation;
|
|
@@ -475,35 +453,35 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
475
453
|
var onScrolledNotBottom = React.useCallback(function () {
|
|
476
454
|
setScrolledBottom(false);
|
|
477
455
|
}, [setScrolledBottom]);
|
|
478
|
-
return /*#__PURE__*/
|
|
479
|
-
className:
|
|
456
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
457
|
+
className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
|
|
480
458
|
"data-screen-ready": true
|
|
481
|
-
}, /*#__PURE__*/
|
|
459
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
482
460
|
width: width,
|
|
483
461
|
height: height,
|
|
484
462
|
className: styles.content
|
|
485
|
-
}, /*#__PURE__*/
|
|
463
|
+
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
486
464
|
ref: scrollRef,
|
|
487
465
|
disabled: scrollingDisabled,
|
|
488
466
|
onScrolledBottom: onScrolledBottom,
|
|
489
467
|
onScrolledNotBottom: onScrolledNotBottom
|
|
490
|
-
}, /*#__PURE__*/
|
|
468
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
491
469
|
ref: contentRef
|
|
492
|
-
}, /*#__PURE__*/
|
|
470
|
+
}, /*#__PURE__*/React.createElement(Layout, {
|
|
493
471
|
className: styles.layout,
|
|
494
472
|
style: !isPlaceholder ? {
|
|
495
473
|
padding: spacing,
|
|
496
474
|
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
|
|
497
475
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
|
|
498
476
|
} : null
|
|
499
|
-
}, !isPlaceholder && hasHeader ? /*#__PURE__*/
|
|
477
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
500
478
|
key: "header",
|
|
501
479
|
style: {
|
|
502
480
|
paddingBottom: spacing
|
|
503
481
|
}
|
|
504
|
-
}, /*#__PURE__*/
|
|
482
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
505
483
|
placeholder: "conversation",
|
|
506
|
-
emptyLabel: /*#__PURE__*/
|
|
484
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
507
485
|
id: "NmCfTO",
|
|
508
486
|
defaultMessage: [{
|
|
509
487
|
"type": 0,
|
|
@@ -512,14 +490,14 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
512
490
|
}),
|
|
513
491
|
emptyClassName: styles.empty,
|
|
514
492
|
isEmpty: messages.length === 0 && title === null
|
|
515
|
-
}, /*#__PURE__*/
|
|
493
|
+
}, /*#__PURE__*/React.createElement(components.Transitions, {
|
|
516
494
|
transitions: transitions,
|
|
517
495
|
playing: current,
|
|
518
496
|
disabled: transitionDisabled
|
|
519
|
-
}, hasTitle ? /*#__PURE__*/
|
|
497
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
|
|
520
498
|
className: styles.title,
|
|
521
499
|
isEmpty: title === null
|
|
522
|
-
})) : null, /*#__PURE__*/
|
|
500
|
+
})) : null, /*#__PURE__*/React.createElement("div", {
|
|
523
501
|
className: styles.conversation
|
|
524
502
|
}, filteredMessages.map(function (m, messageI) {
|
|
525
503
|
var previousMessage = messageI !== 0 ? messages[messageI - 1] : null;
|
|
@@ -536,7 +514,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
536
514
|
return c.audio != null;
|
|
537
515
|
});
|
|
538
516
|
var nextAudioMessageId = nextAudioMessage ? "".concat(m.message, "-").concat(messagesUniqueId[filteredMessages.indexOf(nextAudioMessage)]) : null;
|
|
539
|
-
return /*#__PURE__*/
|
|
517
|
+
return /*#__PURE__*/React.createElement(ConversationMessage, {
|
|
540
518
|
key: messageId,
|
|
541
519
|
message: m,
|
|
542
520
|
messageId: messageId,
|
|
@@ -556,16 +534,16 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
556
534
|
speakerStyle: speakerStyle,
|
|
557
535
|
audioEventsChannelName: audioEventsChannel.name
|
|
558
536
|
});
|
|
559
|
-
})), showFooter ? /*#__PURE__*/
|
|
560
|
-
className:
|
|
537
|
+
})), showFooter ? /*#__PURE__*/React.createElement("div", {
|
|
538
|
+
className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
|
|
561
539
|
style: {
|
|
562
540
|
paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
|
|
563
541
|
paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
|
|
564
542
|
paddingTop: spacing
|
|
565
543
|
}
|
|
566
|
-
}, /*#__PURE__*/
|
|
544
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null, /*#__PURE__*/React.createElement("div", {
|
|
567
545
|
ref: chatBottomRef
|
|
568
|
-
}))))))), !isPlaceholder ? /*#__PURE__*/
|
|
546
|
+
}))))))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
569
547
|
background: background,
|
|
570
548
|
width: width,
|
|
571
549
|
height: height,
|
|
@@ -580,7 +558,7 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
580
558
|
};
|
|
581
559
|
ConversationScreen.propTypes = propTypes;
|
|
582
560
|
ConversationScreen.defaultProps = defaultProps;
|
|
583
|
-
var ConversationScreen$1 = /*#__PURE__*/
|
|
561
|
+
var ConversationScreen$1 = /*#__PURE__*/React.memo(ConversationScreen);
|
|
584
562
|
|
|
585
563
|
var definition = {
|
|
586
564
|
id: 'conversation',
|
|
@@ -720,4 +698,4 @@ var definition = {
|
|
|
720
698
|
};
|
|
721
699
|
|
|
722
700
|
exports.ConversationScreen = ConversationScreen$1;
|
|
723
|
-
exports
|
|
701
|
+
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-conversation",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "assets/css/styles.css",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"require": "./lib/index.js",
|
|
39
|
+
"import": "./es/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./assets/css/*.css": "./assets/css/*.css"
|
|
42
|
+
},
|
|
35
43
|
"files": [
|
|
36
44
|
"lib",
|
|
37
45
|
"es",
|
|
@@ -50,17 +58,17 @@
|
|
|
50
58
|
},
|
|
51
59
|
"dependencies": {
|
|
52
60
|
"@babel/runtime": "^7.13.10",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-footer": "^0.3.
|
|
57
|
-
"@micromag/element-header": "^0.3.
|
|
58
|
-
"@micromag/element-heading": "^0.3.
|
|
59
|
-
"@micromag/element-layout": "^0.3.
|
|
60
|
-
"@micromag/element-scroll": "^0.3.
|
|
61
|
-
"@micromag/element-text": "^0.3.
|
|
62
|
-
"@micromag/element-visual": "^0.3.
|
|
63
|
-
"@micromag/transforms": "^0.3.
|
|
61
|
+
"@micromag/core": "^0.3.429",
|
|
62
|
+
"@micromag/element-background": "^0.3.429",
|
|
63
|
+
"@micromag/element-container": "^0.3.429",
|
|
64
|
+
"@micromag/element-footer": "^0.3.429",
|
|
65
|
+
"@micromag/element-header": "^0.3.429",
|
|
66
|
+
"@micromag/element-heading": "^0.3.429",
|
|
67
|
+
"@micromag/element-layout": "^0.3.429",
|
|
68
|
+
"@micromag/element-scroll": "^0.3.429",
|
|
69
|
+
"@micromag/element-text": "^0.3.429",
|
|
70
|
+
"@micromag/element-visual": "^0.3.429",
|
|
71
|
+
"@micromag/transforms": "^0.3.429",
|
|
64
72
|
"classnames": "^2.2.6",
|
|
65
73
|
"lodash": "^4.17.21",
|
|
66
74
|
"prop-types": "^15.7.2",
|
|
@@ -71,5 +79,5 @@
|
|
|
71
79
|
"access": "public",
|
|
72
80
|
"registry": "https://registry.npmjs.org/"
|
|
73
81
|
},
|
|
74
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
75
83
|
}
|