@micromag/screen-conversation 0.3.311 → 0.3.322
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 +84 -114
- package/lib/index.js +84 -114
- package/package.json +13 -13
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-conversation-container .micromag-screen-conversation-background{position:absolute;top:0;
|
|
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-callToAction{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction a{padding:0}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction.micromag-screen-conversation-disabled{opacity:0;pointer-events:none}.micromag-screen-conversation-layout{-webkit-transition:padding .2s ease-out;-o-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-conversation-messageContainer{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;color:#000;display:-ms-flexbox;display:flex;justify-content:flex-start}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{background-color:#fff;margin:1px 0;max-width:80%;overflow-wrap:break-word;padding:10px;-webkit-transition:border-radius .2s ease;-o-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{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;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{-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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background:#fff;border-radius:10px;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{-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}
|
package/es/index.js
CHANGED
|
@@ -56,59 +56,52 @@ var defaultProps$1 = {
|
|
|
56
56
|
speakerStyle: null,
|
|
57
57
|
className: null
|
|
58
58
|
};
|
|
59
|
-
|
|
60
59
|
var ConversationMessage = function ConversationMessage(_ref) {
|
|
61
60
|
var _ref4, _ref5;
|
|
62
|
-
|
|
63
61
|
var message = _ref.message,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
62
|
+
previousMessage = _ref.previousMessage,
|
|
63
|
+
nextMessage = _ref.nextMessage,
|
|
64
|
+
nextMessageState = _ref.nextMessageState,
|
|
65
|
+
currentSpeaker = _ref.currentSpeaker,
|
|
66
|
+
conversationTiming = _ref.conversationTiming,
|
|
67
|
+
typingTiming = _ref.typingTiming,
|
|
68
|
+
onChange = _ref.onChange,
|
|
69
|
+
withAnimation = _ref.withAnimation,
|
|
70
|
+
active = _ref.active,
|
|
71
|
+
isPlaying = _ref.isPlaying,
|
|
72
|
+
messageStyle = _ref.messageStyle,
|
|
73
|
+
speakerStyle = _ref.speakerStyle,
|
|
74
|
+
className = _ref.className;
|
|
78
75
|
var _ref2 = message || {},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
messageBody = _ref2.message,
|
|
77
|
+
_ref2$image = _ref2.image,
|
|
78
|
+
image = _ref2$image === void 0 ? null : _ref2$image;
|
|
83
79
|
var _ref3 = currentSpeaker || {},
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
color = _ref3.color;
|
|
80
|
+
_ref3$avatar = _ref3.avatar,
|
|
81
|
+
_ref3$avatar2 = _ref3$avatar === void 0 ? {} : _ref3$avatar,
|
|
82
|
+
_ref3$avatar2$url = _ref3$avatar2.url,
|
|
83
|
+
avatarUrl = _ref3$avatar2$url === void 0 ? null : _ref3$avatar2$url,
|
|
84
|
+
speakerName = _ref3.name,
|
|
85
|
+
_ref3$side = _ref3.side,
|
|
86
|
+
side = _ref3$side === void 0 ? 'left' : _ref3$side,
|
|
87
|
+
currentSpeakerId = _ref3.id,
|
|
88
|
+
color = _ref3.color;
|
|
94
89
|
var right = side === 'right';
|
|
95
90
|
var isPrevSpeakerTheSame = previousMessage !== null && previousMessage.speaker === currentSpeakerId;
|
|
96
|
-
var isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
|
|
91
|
+
var isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
|
|
97
92
|
|
|
93
|
+
// Timing
|
|
98
94
|
var _useState = useState(withAnimation ? 'pause' : 'send'),
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
95
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
96
|
+
messageState = _useState2[0],
|
|
97
|
+
setMessageState = _useState2[1];
|
|
103
98
|
var pauseBeforeTyping = conversationTiming;
|
|
104
99
|
var typingDuration = typingTiming;
|
|
105
100
|
useEffect(function () {
|
|
106
101
|
if (!withAnimation || !isPlaying) {
|
|
107
102
|
return function () {};
|
|
108
103
|
}
|
|
109
|
-
|
|
110
104
|
var timeout = null;
|
|
111
|
-
|
|
112
105
|
if (messageState === 'pause') {
|
|
113
106
|
timeout = setTimeout(function () {
|
|
114
107
|
return setMessageState('typing');
|
|
@@ -118,7 +111,6 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
118
111
|
return setMessageState('send');
|
|
119
112
|
}, typingDuration);
|
|
120
113
|
}
|
|
121
|
-
|
|
122
114
|
return function () {
|
|
123
115
|
if (timeout !== null) {
|
|
124
116
|
clearTimeout(timeout);
|
|
@@ -175,7 +167,6 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
175
167
|
textStyle: messageStyle
|
|
176
168
|
})))) : null;
|
|
177
169
|
};
|
|
178
|
-
|
|
179
170
|
ConversationMessage.propTypes = propTypes$1;
|
|
180
171
|
ConversationMessage.defaultProps = defaultProps$1;
|
|
181
172
|
|
|
@@ -208,74 +199,59 @@ var defaultProps = {
|
|
|
208
199
|
transitions: null,
|
|
209
200
|
className: null
|
|
210
201
|
};
|
|
211
|
-
|
|
212
202
|
var ConversationScreen = function ConversationScreen(_ref) {
|
|
213
203
|
var _ref7;
|
|
214
|
-
|
|
215
204
|
var title = _ref.title,
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
205
|
+
timingMode = _ref.timing,
|
|
206
|
+
spacing = _ref.spacing,
|
|
207
|
+
background = _ref.background,
|
|
208
|
+
callToAction = _ref.callToAction,
|
|
209
|
+
current = _ref.current,
|
|
210
|
+
active = _ref.active,
|
|
211
|
+
type = _ref.type,
|
|
212
|
+
conversation = _ref.conversation,
|
|
213
|
+
transitions = _ref.transitions,
|
|
214
|
+
className = _ref.className;
|
|
227
215
|
var _useScreenSize = useScreenSize(),
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
216
|
+
width = _useScreenSize.width,
|
|
217
|
+
height = _useScreenSize.height,
|
|
218
|
+
resolution = _useScreenSize.resolution;
|
|
232
219
|
var _useViewerContext = useViewerContext(),
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
220
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
221
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
222
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
237
223
|
var _useViewerWebView = useViewerWebView(),
|
|
238
|
-
|
|
239
|
-
|
|
224
|
+
openWebView = _useViewerWebView.open;
|
|
240
225
|
var trackScreenEvent = useTrackScreenEvent(type);
|
|
241
|
-
|
|
242
226
|
var _usePlaybackContext = usePlaybackContext(),
|
|
243
|
-
|
|
244
|
-
|
|
227
|
+
muted = _usePlaybackContext.muted;
|
|
245
228
|
var mediaRef = usePlaybackMediaRef(current);
|
|
246
|
-
|
|
247
229
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
230
|
+
isView = _useScreenRenderConte.isView,
|
|
231
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
232
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
233
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
234
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
235
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
255
236
|
var backgroundPlaying = current && (isView || isEdit);
|
|
256
237
|
var mediaShouldLoad = current || active;
|
|
257
238
|
var withAnimation = isView && !isStatic && timingMode === 'sequence';
|
|
258
|
-
|
|
259
239
|
var _ref2 = conversation || {},
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
240
|
+
_ref2$speakers = _ref2.speakers,
|
|
241
|
+
speakers = _ref2$speakers === void 0 ? null : _ref2$speakers,
|
|
242
|
+
_ref2$messages = _ref2.messages,
|
|
243
|
+
messages = _ref2$messages === void 0 ? [] : _ref2$messages,
|
|
244
|
+
messageStyle = _ref2.messageStyle,
|
|
245
|
+
speakerStyle = _ref2.speakerStyle;
|
|
267
246
|
var _useState = useState([]),
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
247
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
248
|
+
conversationState = _useState2[0],
|
|
249
|
+
setConversationState = _useState2[1];
|
|
272
250
|
var chatBottomRef = useRef(null);
|
|
273
251
|
var hasTitle = isTextFilled(title);
|
|
274
|
-
|
|
275
252
|
var _useDimensionObserver = useDimensionObserver(),
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
253
|
+
contentRef = _useDimensionObserver.ref,
|
|
254
|
+
scrollHeight = _useDimensionObserver.height;
|
|
279
255
|
var scrollRef = useRef(null);
|
|
280
256
|
useEffect(function () {
|
|
281
257
|
if (withAnimation && scrollRef.current !== null) {
|
|
@@ -288,13 +264,13 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
288
264
|
var animationFinished = messages.length === conversationState.length;
|
|
289
265
|
var conversationStateChange = useCallback(function (state) {
|
|
290
266
|
var newConversationState = _toConsumableArray(conversationState);
|
|
291
|
-
|
|
292
267
|
if (state === 'send') {
|
|
293
268
|
newConversationState.push(true);
|
|
294
269
|
setConversationState(newConversationState);
|
|
295
270
|
}
|
|
296
|
-
}, [conversationState, setConversationState]);
|
|
271
|
+
}, [conversationState, setConversationState]);
|
|
297
272
|
|
|
273
|
+
// sequence timings
|
|
298
274
|
var defaultTimingFactor = 40;
|
|
299
275
|
var defaultHesitationDelay = 1000;
|
|
300
276
|
var filteredMessages = (messages || []).filter(function (m) {
|
|
@@ -302,55 +278,49 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
302
278
|
});
|
|
303
279
|
var timings = filteredMessages.map(function (messageParams, messageI) {
|
|
304
280
|
var _ref3 = messageParams || {},
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
281
|
+
_ref3$timing = _ref3.timing,
|
|
282
|
+
timing = _ref3$timing === void 0 ? null : _ref3$timing,
|
|
283
|
+
_ref3$message = _ref3.message,
|
|
284
|
+
message = _ref3$message === void 0 ? null : _ref3$message;
|
|
310
285
|
if (timing !== null) {
|
|
311
286
|
return timing;
|
|
312
287
|
}
|
|
313
|
-
|
|
314
288
|
if (messageI === 0) {
|
|
315
289
|
return 0;
|
|
316
290
|
}
|
|
317
|
-
|
|
318
291
|
var finalTime = defaultTimingFactor * ((message || '').length || 10);
|
|
319
292
|
return finalTime < 2000 ? finalTime : 2000;
|
|
320
293
|
});
|
|
321
294
|
var hesitationTimings = filteredMessages.map(function () {
|
|
322
295
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
296
|
+
_ref4$hesitation = _ref4.hesitation,
|
|
297
|
+
hesitation = _ref4$hesitation === void 0 ? null : _ref4$hesitation;
|
|
326
298
|
return hesitation !== null ? hesitation : defaultHesitationDelay;
|
|
327
299
|
});
|
|
328
300
|
var messagesUniqueId = useMemo(function () {
|
|
329
301
|
return (messages || []).map(function () {
|
|
330
302
|
return v1();
|
|
331
303
|
});
|
|
332
|
-
}, [messages]);
|
|
304
|
+
}, [messages]);
|
|
333
305
|
|
|
306
|
+
// scroll
|
|
334
307
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
335
|
-
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
308
|
+
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
336
309
|
|
|
310
|
+
// CTA
|
|
337
311
|
var _ref5 = callToAction || {},
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
312
|
+
_ref5$active = _ref5.active,
|
|
313
|
+
hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
|
|
341
314
|
var _useState3 = useState(false),
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
315
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
316
|
+
scrolledBottom = _useState4[0],
|
|
317
|
+
setScrolledBottom = _useState4[1];
|
|
346
318
|
var showCallToAction = animationFinished && !isPlaceholder && hasCallToAction || !withAnimation;
|
|
347
319
|
var onScrolledBottom = useCallback(function (_ref6) {
|
|
348
320
|
var initial = _ref6.initial;
|
|
349
|
-
|
|
350
321
|
if (initial) {
|
|
351
322
|
trackScreenEvent('scroll', 'Screen');
|
|
352
323
|
}
|
|
353
|
-
|
|
354
324
|
setScrolledBottom(true);
|
|
355
325
|
}, [trackScreenEvent]);
|
|
356
326
|
var onScrolledNotBottom = useCallback(function () {
|
|
@@ -450,7 +420,6 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
450
420
|
className: styles.background
|
|
451
421
|
}) : null);
|
|
452
422
|
};
|
|
453
|
-
|
|
454
423
|
ConversationScreen.propTypes = propTypes;
|
|
455
424
|
ConversationScreen.defaultProps = defaultProps;
|
|
456
425
|
var ConversationScreen$1 = /*#__PURE__*/React.memo(ConversationScreen);
|
|
@@ -477,7 +446,8 @@ var definition = {
|
|
|
477
446
|
}),
|
|
478
447
|
component: ConversationScreen$1,
|
|
479
448
|
layouts: ['normal'],
|
|
480
|
-
fields: [
|
|
449
|
+
fields: [
|
|
450
|
+
// {
|
|
481
451
|
// name: 'theme',
|
|
482
452
|
// type: 'select',
|
|
483
453
|
// options: [
|
package/lib/index.js
CHANGED
|
@@ -78,59 +78,52 @@ var defaultProps$1 = {
|
|
|
78
78
|
speakerStyle: null,
|
|
79
79
|
className: null
|
|
80
80
|
};
|
|
81
|
-
|
|
82
81
|
var ConversationMessage = function ConversationMessage(_ref) {
|
|
83
82
|
var _ref4, _ref5;
|
|
84
|
-
|
|
85
83
|
var message = _ref.message,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
84
|
+
previousMessage = _ref.previousMessage,
|
|
85
|
+
nextMessage = _ref.nextMessage,
|
|
86
|
+
nextMessageState = _ref.nextMessageState,
|
|
87
|
+
currentSpeaker = _ref.currentSpeaker,
|
|
88
|
+
conversationTiming = _ref.conversationTiming,
|
|
89
|
+
typingTiming = _ref.typingTiming,
|
|
90
|
+
onChange = _ref.onChange,
|
|
91
|
+
withAnimation = _ref.withAnimation,
|
|
92
|
+
active = _ref.active,
|
|
93
|
+
isPlaying = _ref.isPlaying,
|
|
94
|
+
messageStyle = _ref.messageStyle,
|
|
95
|
+
speakerStyle = _ref.speakerStyle,
|
|
96
|
+
className = _ref.className;
|
|
100
97
|
var _ref2 = message || {},
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
messageBody = _ref2.message,
|
|
99
|
+
_ref2$image = _ref2.image,
|
|
100
|
+
image = _ref2$image === void 0 ? null : _ref2$image;
|
|
105
101
|
var _ref3 = currentSpeaker || {},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
color = _ref3.color;
|
|
102
|
+
_ref3$avatar = _ref3.avatar,
|
|
103
|
+
_ref3$avatar2 = _ref3$avatar === void 0 ? {} : _ref3$avatar,
|
|
104
|
+
_ref3$avatar2$url = _ref3$avatar2.url,
|
|
105
|
+
avatarUrl = _ref3$avatar2$url === void 0 ? null : _ref3$avatar2$url,
|
|
106
|
+
speakerName = _ref3.name,
|
|
107
|
+
_ref3$side = _ref3.side,
|
|
108
|
+
side = _ref3$side === void 0 ? 'left' : _ref3$side,
|
|
109
|
+
currentSpeakerId = _ref3.id,
|
|
110
|
+
color = _ref3.color;
|
|
116
111
|
var right = side === 'right';
|
|
117
112
|
var isPrevSpeakerTheSame = previousMessage !== null && previousMessage.speaker === currentSpeakerId;
|
|
118
|
-
var isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
|
|
113
|
+
var isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
|
|
119
114
|
|
|
115
|
+
// Timing
|
|
120
116
|
var _useState = React.useState(withAnimation ? 'pause' : 'send'),
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
117
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
118
|
+
messageState = _useState2[0],
|
|
119
|
+
setMessageState = _useState2[1];
|
|
125
120
|
var pauseBeforeTyping = conversationTiming;
|
|
126
121
|
var typingDuration = typingTiming;
|
|
127
122
|
React.useEffect(function () {
|
|
128
123
|
if (!withAnimation || !isPlaying) {
|
|
129
124
|
return function () {};
|
|
130
125
|
}
|
|
131
|
-
|
|
132
126
|
var timeout = null;
|
|
133
|
-
|
|
134
127
|
if (messageState === 'pause') {
|
|
135
128
|
timeout = setTimeout(function () {
|
|
136
129
|
return setMessageState('typing');
|
|
@@ -140,7 +133,6 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
140
133
|
return setMessageState('send');
|
|
141
134
|
}, typingDuration);
|
|
142
135
|
}
|
|
143
|
-
|
|
144
136
|
return function () {
|
|
145
137
|
if (timeout !== null) {
|
|
146
138
|
clearTimeout(timeout);
|
|
@@ -197,7 +189,6 @@ var ConversationMessage = function ConversationMessage(_ref) {
|
|
|
197
189
|
textStyle: messageStyle
|
|
198
190
|
})))) : null;
|
|
199
191
|
};
|
|
200
|
-
|
|
201
192
|
ConversationMessage.propTypes = propTypes$1;
|
|
202
193
|
ConversationMessage.defaultProps = defaultProps$1;
|
|
203
194
|
|
|
@@ -230,74 +221,59 @@ var defaultProps = {
|
|
|
230
221
|
transitions: null,
|
|
231
222
|
className: null
|
|
232
223
|
};
|
|
233
|
-
|
|
234
224
|
var ConversationScreen = function ConversationScreen(_ref) {
|
|
235
225
|
var _ref7;
|
|
236
|
-
|
|
237
226
|
var title = _ref.title,
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
227
|
+
timingMode = _ref.timing,
|
|
228
|
+
spacing = _ref.spacing,
|
|
229
|
+
background = _ref.background,
|
|
230
|
+
callToAction = _ref.callToAction,
|
|
231
|
+
current = _ref.current,
|
|
232
|
+
active = _ref.active,
|
|
233
|
+
type = _ref.type,
|
|
234
|
+
conversation = _ref.conversation,
|
|
235
|
+
transitions = _ref.transitions,
|
|
236
|
+
className = _ref.className;
|
|
249
237
|
var _useScreenSize = contexts.useScreenSize(),
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
238
|
+
width = _useScreenSize.width,
|
|
239
|
+
height = _useScreenSize.height,
|
|
240
|
+
resolution = _useScreenSize.resolution;
|
|
254
241
|
var _useViewerContext = contexts.useViewerContext(),
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
242
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
243
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
244
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
259
245
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
260
|
-
|
|
261
|
-
|
|
246
|
+
openWebView = _useViewerWebView.open;
|
|
262
247
|
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
263
|
-
|
|
264
248
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
265
|
-
|
|
266
|
-
|
|
249
|
+
muted = _usePlaybackContext.muted;
|
|
267
250
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
268
|
-
|
|
269
251
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
252
|
+
isView = _useScreenRenderConte.isView,
|
|
253
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
254
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
255
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
256
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
257
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
277
258
|
var backgroundPlaying = current && (isView || isEdit);
|
|
278
259
|
var mediaShouldLoad = current || active;
|
|
279
260
|
var withAnimation = isView && !isStatic && timingMode === 'sequence';
|
|
280
|
-
|
|
281
261
|
var _ref2 = conversation || {},
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
262
|
+
_ref2$speakers = _ref2.speakers,
|
|
263
|
+
speakers = _ref2$speakers === void 0 ? null : _ref2$speakers,
|
|
264
|
+
_ref2$messages = _ref2.messages,
|
|
265
|
+
messages = _ref2$messages === void 0 ? [] : _ref2$messages,
|
|
266
|
+
messageStyle = _ref2.messageStyle,
|
|
267
|
+
speakerStyle = _ref2.speakerStyle;
|
|
289
268
|
var _useState = React.useState([]),
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
269
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
270
|
+
conversationState = _useState2[0],
|
|
271
|
+
setConversationState = _useState2[1];
|
|
294
272
|
var chatBottomRef = React.useRef(null);
|
|
295
273
|
var hasTitle = utils.isTextFilled(title);
|
|
296
|
-
|
|
297
274
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
275
|
+
contentRef = _useDimensionObserver.ref,
|
|
276
|
+
scrollHeight = _useDimensionObserver.height;
|
|
301
277
|
var scrollRef = React.useRef(null);
|
|
302
278
|
React.useEffect(function () {
|
|
303
279
|
if (withAnimation && scrollRef.current !== null) {
|
|
@@ -310,13 +286,13 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
310
286
|
var animationFinished = messages.length === conversationState.length;
|
|
311
287
|
var conversationStateChange = React.useCallback(function (state) {
|
|
312
288
|
var newConversationState = _toConsumableArray__default["default"](conversationState);
|
|
313
|
-
|
|
314
289
|
if (state === 'send') {
|
|
315
290
|
newConversationState.push(true);
|
|
316
291
|
setConversationState(newConversationState);
|
|
317
292
|
}
|
|
318
|
-
}, [conversationState, setConversationState]);
|
|
293
|
+
}, [conversationState, setConversationState]);
|
|
319
294
|
|
|
295
|
+
// sequence timings
|
|
320
296
|
var defaultTimingFactor = 40;
|
|
321
297
|
var defaultHesitationDelay = 1000;
|
|
322
298
|
var filteredMessages = (messages || []).filter(function (m) {
|
|
@@ -324,55 +300,49 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
324
300
|
});
|
|
325
301
|
var timings = filteredMessages.map(function (messageParams, messageI) {
|
|
326
302
|
var _ref3 = messageParams || {},
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
303
|
+
_ref3$timing = _ref3.timing,
|
|
304
|
+
timing = _ref3$timing === void 0 ? null : _ref3$timing,
|
|
305
|
+
_ref3$message = _ref3.message,
|
|
306
|
+
message = _ref3$message === void 0 ? null : _ref3$message;
|
|
332
307
|
if (timing !== null) {
|
|
333
308
|
return timing;
|
|
334
309
|
}
|
|
335
|
-
|
|
336
310
|
if (messageI === 0) {
|
|
337
311
|
return 0;
|
|
338
312
|
}
|
|
339
|
-
|
|
340
313
|
var finalTime = defaultTimingFactor * ((message || '').length || 10);
|
|
341
314
|
return finalTime < 2000 ? finalTime : 2000;
|
|
342
315
|
});
|
|
343
316
|
var hesitationTimings = filteredMessages.map(function () {
|
|
344
317
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
318
|
+
_ref4$hesitation = _ref4.hesitation,
|
|
319
|
+
hesitation = _ref4$hesitation === void 0 ? null : _ref4$hesitation;
|
|
348
320
|
return hesitation !== null ? hesitation : defaultHesitationDelay;
|
|
349
321
|
});
|
|
350
322
|
var messagesUniqueId = React.useMemo(function () {
|
|
351
323
|
return (messages || []).map(function () {
|
|
352
324
|
return uuid.v1();
|
|
353
325
|
});
|
|
354
|
-
}, [messages]);
|
|
326
|
+
}, [messages]);
|
|
355
327
|
|
|
328
|
+
// scroll
|
|
356
329
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
357
|
-
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
330
|
+
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
358
331
|
|
|
332
|
+
// CTA
|
|
359
333
|
var _ref5 = callToAction || {},
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
334
|
+
_ref5$active = _ref5.active,
|
|
335
|
+
hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
|
|
363
336
|
var _useState3 = React.useState(false),
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
337
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
338
|
+
scrolledBottom = _useState4[0],
|
|
339
|
+
setScrolledBottom = _useState4[1];
|
|
368
340
|
var showCallToAction = animationFinished && !isPlaceholder && hasCallToAction || !withAnimation;
|
|
369
341
|
var onScrolledBottom = React.useCallback(function (_ref6) {
|
|
370
342
|
var initial = _ref6.initial;
|
|
371
|
-
|
|
372
343
|
if (initial) {
|
|
373
344
|
trackScreenEvent('scroll', 'Screen');
|
|
374
345
|
}
|
|
375
|
-
|
|
376
346
|
setScrolledBottom(true);
|
|
377
347
|
}, [trackScreenEvent]);
|
|
378
348
|
var onScrolledNotBottom = React.useCallback(function () {
|
|
@@ -472,7 +442,6 @@ var ConversationScreen = function ConversationScreen(_ref) {
|
|
|
472
442
|
className: styles.background
|
|
473
443
|
}) : null);
|
|
474
444
|
};
|
|
475
|
-
|
|
476
445
|
ConversationScreen.propTypes = propTypes;
|
|
477
446
|
ConversationScreen.defaultProps = defaultProps;
|
|
478
447
|
var ConversationScreen$1 = /*#__PURE__*/React__default["default"].memo(ConversationScreen);
|
|
@@ -499,7 +468,8 @@ var definition = {
|
|
|
499
468
|
}),
|
|
500
469
|
component: ConversationScreen$1,
|
|
501
470
|
layouts: ['normal'],
|
|
502
|
-
fields: [
|
|
471
|
+
fields: [
|
|
472
|
+
// {
|
|
503
473
|
// name: 'theme',
|
|
504
474
|
// type: 'select',
|
|
505
475
|
// options: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-conversation",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.322",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,24 +49,24 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-heading": "^0.3.
|
|
57
|
-
"@micromag/element-layout": "^0.3.
|
|
58
|
-
"@micromag/element-scroll": "^0.3.
|
|
59
|
-
"@micromag/element-text": "^0.3.
|
|
60
|
-
"@micromag/element-visual": "^0.3.
|
|
61
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.322",
|
|
53
|
+
"@micromag/element-background": "^0.3.322",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.3.322",
|
|
55
|
+
"@micromag/element-container": "^0.3.322",
|
|
56
|
+
"@micromag/element-heading": "^0.3.322",
|
|
57
|
+
"@micromag/element-layout": "^0.3.322",
|
|
58
|
+
"@micromag/element-scroll": "^0.3.322",
|
|
59
|
+
"@micromag/element-text": "^0.3.322",
|
|
60
|
+
"@micromag/element-visual": "^0.3.322",
|
|
61
|
+
"@micromag/transforms": "^0.3.322",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
63
|
"lodash": "^4.17.21",
|
|
64
64
|
"prop-types": "^15.7.2",
|
|
65
65
|
"react-intl": "^5.12.1",
|
|
66
|
-
"uuid": "^
|
|
66
|
+
"uuid": "^9.0.0"
|
|
67
67
|
},
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
|
|
72
72
|
}
|