@micromag/screen-conversation 0.4.70 → 0.4.74

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.
Files changed (3) hide show
  1. package/es/index.d.ts +4 -2
  2. package/es/index.js +551 -403
  3. package/package.json +18 -17
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { HeadingElement, BackgroundElement, Header, Footer, Conversation, Transitions } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { HeadingElement, BackgroundElement, Header, Footer, Conversation, Transitions, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface ConversationScreenProps {
5
6
  title?: HeadingElement | null;
@@ -14,9 +15,10 @@ interface ConversationScreenProps {
14
15
  type?: string | null;
15
16
  conversation?: Conversation | null;
16
17
  transitions?: Transitions | null;
18
+ mediaRef?: ForwardedRef<MediaElement> | null;
17
19
  className?: string | null;
18
20
  }
19
- declare function ConversationScreen({ title, timing: timingMode, readingSpeed, spacing, background, header, footer, current, preload, type, conversation, transitions, className, }: ConversationScreenProps): react_jsx_runtime.JSX.Element;
21
+ declare function ConversationScreen({ title, timing: timingMode, readingSpeed, spacing, background, header, footer, current, preload, type, conversation, transitions, mediaRef: customMediaRef, className, }: ConversationScreenProps): react_jsx_runtime.JSX.Element;
20
22
 
21
23
  declare const _default: {
22
24
  id: string;
package/es/index.js CHANGED
@@ -1,15 +1,11 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
5
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
6
2
  import classNames from 'classnames';
7
- import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
3
+ import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
8
4
  import { v1 } from 'uuid';
9
5
  import { PlayIcon, PauseIcon, Button, ScreenElement, Transitions } from '@micromag/core/components';
10
6
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
11
7
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
12
- import { getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
8
+ import { getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, mergeRefs } from '@micromag/core/utils';
13
9
  import Background from '@micromag/element-background';
14
10
  import Container from '@micromag/element-container';
15
11
  import Footer from '@micromag/element-footer';
@@ -17,77 +13,137 @@ import Header from '@micromag/element-header';
17
13
  import Heading from '@micromag/element-heading';
18
14
  import Layout from '@micromag/element-layout';
19
15
  import Scroll from '@micromag/element-scroll';
16
+ import { c } from 'react/compiler-runtime';
20
17
  import Text from '@micromag/element-text';
21
18
  import Visual from '@micromag/element-visual';
22
19
  import Audio from '@micromag/element-audio';
23
- import { jsxs, jsx } from 'react/jsx-runtime';
20
+ import { jsx, jsxs } from 'react/jsx-runtime';
24
21
 
25
22
  var styles = {"container":"micromag-screen-conversation-container","background":"micromag-screen-conversation-background","content":"micromag-screen-conversation-content","empty":"micromag-screen-conversation-empty","title":"micromag-screen-conversation-title","footer":"micromag-screen-conversation-footer","disabled":"micromag-screen-conversation-disabled","layout":"micromag-screen-conversation-layout","messageContainer":"micromag-screen-conversation-messageContainer","message":"micromag-screen-conversation-message","normalLeft":"micromag-screen-conversation-normalLeft","inBetweenLeft":"micromag-screen-conversation-inBetweenLeft","normalRight":"micromag-screen-conversation-normalRight","inBetweenRight":"micromag-screen-conversation-inBetweenRight","last":"micromag-screen-conversation-last","messageBody":"micromag-screen-conversation-messageBody","speakerDetails":"micromag-screen-conversation-speakerDetails","right":"micromag-screen-conversation-right","avatarContainer":"micromag-screen-conversation-avatarContainer","avatar":"micromag-screen-conversation-avatar","imageContainer":"micromag-screen-conversation-imageContainer","withAnimation":"micromag-screen-conversation-withAnimation","loadingContainer":"micromag-screen-conversation-loadingContainer","loading":"micromag-screen-conversation-loading","dot":"micromag-screen-conversation-dot","loadingSpeakerName":"micromag-screen-conversation-loadingSpeakerName","audioMessageContainer":"micromag-screen-conversation-audioMessageContainer","playButtonContainer":"micromag-screen-conversation-playButtonContainer","button":"micromag-screen-conversation-button","audioMessage":"micromag-screen-conversation-audioMessage","icon":"micromag-screen-conversation-icon"};
26
23
 
27
- function ConversationAudioAttachment(_ref) {
28
- var _ref$audio = _ref.audio,
29
- audio = _ref$audio === void 0 ? null : _ref$audio,
30
- _ref$audioEventsChann = _ref.audioEventsChannelName,
31
- audioEventsChannelName = _ref$audioEventsChann === void 0 ? null : _ref$audioEventsChann,
32
- _ref$messageId = _ref.messageId,
33
- messageId = _ref$messageId === void 0 ? null : _ref$messageId,
34
- _ref$nextAudioMessage = _ref.nextAudioMessageId,
35
- nextAudioMessageId = _ref$nextAudioMessage === void 0 ? null : _ref$nextAudioMessage,
36
- _ref$className = _ref.className,
37
- className = _ref$className === void 0 ? null : _ref$className;
38
- var _useState = useState(true),
39
- _useState2 = _slicedToArray(_useState, 2),
40
- paused = _useState2[0],
41
- setPaused = _useState2[1];
42
- var audioEventsChannel = useMemo(function () {
43
- return new BroadcastChannel(audioEventsChannelName);
44
- }, [audioEventsChannelName]);
45
- useEffect(function () {
46
- var onMessage = function onMessage(message) {
47
- var _message$data = message.data,
48
- type = _message$data.type,
49
- id = _message$data.id;
50
- switch (type) {
51
- case 'play':
52
- setPaused(id !== messageId);
53
- break;
54
- }
24
+ function ConversationAudioAttachment(t0) {
25
+ const $ = c(29);
26
+ const {
27
+ audio: t1,
28
+ audioEventsChannelName: t2,
29
+ messageId: t3,
30
+ nextAudioMessageId: t4,
31
+ className: t5
32
+ } = t0;
33
+ const audio = t1 === undefined ? null : t1;
34
+ const audioEventsChannelName = t2 === undefined ? null : t2;
35
+ const messageId = t3 === undefined ? null : t3;
36
+ const nextAudioMessageId = t4 === undefined ? null : t4;
37
+ const className = t5 === undefined ? null : t5;
38
+ const [paused, setPaused] = useState(true);
39
+ let t6;
40
+ if ($[0] !== audioEventsChannelName) {
41
+ t6 = new BroadcastChannel(audioEventsChannelName);
42
+ $[0] = audioEventsChannelName;
43
+ $[1] = t6;
44
+ } else {
45
+ t6 = $[1];
46
+ }
47
+ const audioEventsChannel = t6;
48
+ let t7;
49
+ if ($[2] !== audioEventsChannel || $[3] !== messageId) {
50
+ t7 = () => {
51
+ const onMessage = message => {
52
+ const {
53
+ type,
54
+ id
55
+ } = message.data;
56
+ bb25: switch (type) {
57
+ case "play":
58
+ {
59
+ setPaused(id !== messageId);
60
+ break bb25;
61
+ }
62
+ }
63
+ };
64
+ audioEventsChannel.addEventListener("message", onMessage);
65
+ return () => audioEventsChannel.removeEventListener("message", onMessage);
55
66
  };
56
- audioEventsChannel.addEventListener('message', onMessage);
57
- return function () {
58
- return audioEventsChannel.removeEventListener('message', onMessage);
67
+ $[2] = audioEventsChannel;
68
+ $[3] = messageId;
69
+ $[4] = t7;
70
+ } else {
71
+ t7 = $[4];
72
+ }
73
+ let t8;
74
+ if ($[5] !== audioEventsChannel) {
75
+ t8 = [audioEventsChannel];
76
+ $[5] = audioEventsChannel;
77
+ $[6] = t8;
78
+ } else {
79
+ t8 = $[6];
80
+ }
81
+ useEffect(t7, t8);
82
+ let t9;
83
+ if ($[7] !== audioEventsChannel || $[8] !== messageId || $[9] !== paused) {
84
+ t9 = () => {
85
+ if (paused) {
86
+ setPaused(false);
87
+ audioEventsChannel.postMessage({
88
+ type: "play",
89
+ id: messageId
90
+ });
91
+ } else {
92
+ setPaused(true);
93
+ }
59
94
  };
60
- }, [audioEventsChannel]);
61
- var togglePaused = function togglePaused() {
62
- if (paused) {
63
- setPaused(false);
64
- audioEventsChannel.postMessage({
65
- type: 'play',
66
- id: messageId
67
- });
68
- } else {
95
+ $[7] = audioEventsChannel;
96
+ $[8] = messageId;
97
+ $[9] = paused;
98
+ $[10] = t9;
99
+ } else {
100
+ t9 = $[10];
101
+ }
102
+ const togglePaused = t9;
103
+ let t10;
104
+ if ($[11] !== audioEventsChannel || $[12] !== nextAudioMessageId) {
105
+ t10 = () => {
106
+ if (nextAudioMessageId) {
107
+ audioEventsChannel.postMessage({
108
+ type: "play",
109
+ id: nextAudioMessageId
110
+ });
111
+ }
69
112
  setPaused(true);
70
- }
71
- };
72
- var onAudioEnded = function onAudioEnded() {
73
- if (nextAudioMessageId) {
74
- audioEventsChannel.postMessage({
75
- type: 'play',
76
- id: nextAudioMessageId
77
- });
78
- }
79
- setPaused(true);
80
- };
81
- return /*#__PURE__*/jsxs("div", {
82
- className: classNames([styles.audioMessageContainer, className]),
83
- children: [/*#__PURE__*/jsx("div", {
113
+ };
114
+ $[11] = audioEventsChannel;
115
+ $[12] = nextAudioMessageId;
116
+ $[13] = t10;
117
+ } else {
118
+ t10 = $[13];
119
+ }
120
+ const onAudioEnded = t10;
121
+ let t11;
122
+ if ($[14] !== className) {
123
+ t11 = classNames([styles.audioMessageContainer, className]);
124
+ $[14] = className;
125
+ $[15] = t11;
126
+ } else {
127
+ t11 = $[15];
128
+ }
129
+ let t12;
130
+ if ($[16] !== paused) {
131
+ t12 = /*#__PURE__*/jsx("div", {
84
132
  className: styles.playButtonContainer,
85
133
  children: paused ? /*#__PURE__*/jsx(PlayIcon, {
86
134
  className: styles.icon
87
135
  }) : /*#__PURE__*/jsx(PauseIcon, {
88
136
  className: styles.icon
89
137
  })
90
- }), /*#__PURE__*/jsx(Audio, {
138
+ });
139
+ $[16] = paused;
140
+ $[17] = t12;
141
+ } else {
142
+ t12 = $[17];
143
+ }
144
+ let t13;
145
+ if ($[18] !== audio || $[19] !== onAudioEnded || $[20] !== paused) {
146
+ t13 = /*#__PURE__*/jsx(Audio, {
91
147
  withWave: true,
92
148
  autoWaveHeight: true,
93
149
  className: styles.audioMessage,
@@ -95,254 +151,375 @@ function ConversationAudioAttachment(_ref) {
95
151
  paused: paused,
96
152
  updateInterval: 100,
97
153
  onEnded: onAudioEnded
98
- }), /*#__PURE__*/jsx(Button, {
154
+ });
155
+ $[18] = audio;
156
+ $[19] = onAudioEnded;
157
+ $[20] = paused;
158
+ $[21] = t13;
159
+ } else {
160
+ t13 = $[21];
161
+ }
162
+ let t14;
163
+ if ($[22] !== togglePaused) {
164
+ t14 = /*#__PURE__*/jsx(Button, {
99
165
  onClick: togglePaused,
100
166
  className: styles.button
101
- })]
102
- });
167
+ });
168
+ $[22] = togglePaused;
169
+ $[23] = t14;
170
+ } else {
171
+ t14 = $[23];
172
+ }
173
+ let t15;
174
+ if ($[24] !== t11 || $[25] !== t12 || $[26] !== t13 || $[27] !== t14) {
175
+ t15 = /*#__PURE__*/jsxs("div", {
176
+ className: t11,
177
+ children: [t12, t13, t14]
178
+ });
179
+ $[24] = t11;
180
+ $[25] = t12;
181
+ $[26] = t13;
182
+ $[27] = t14;
183
+ $[28] = t15;
184
+ } else {
185
+ t15 = $[28];
186
+ }
187
+ return t15;
103
188
  }
104
189
 
105
- function ConversationMessage(_ref) {
106
- var _ref$message = _ref.message,
107
- message = _ref$message === void 0 ? null : _ref$message,
108
- _ref$messageId = _ref.messageId,
109
- messageId = _ref$messageId === void 0 ? null : _ref$messageId,
110
- _ref$previousMessage = _ref.previousMessage,
111
- previousMessage = _ref$previousMessage === void 0 ? null : _ref$previousMessage,
112
- _ref$nextMessage = _ref.nextMessage,
113
- nextMessage = _ref$nextMessage === void 0 ? null : _ref$nextMessage,
114
- _ref$nextAudioMessage = _ref.nextAudioMessageId,
115
- nextAudioMessageId = _ref$nextAudioMessage === void 0 ? null : _ref$nextAudioMessage,
116
- _ref$nextMessageState = _ref.nextMessageState,
117
- nextMessageState = _ref$nextMessageState === void 0 ? null : _ref$nextMessageState,
118
- _ref$currentSpeaker = _ref.currentSpeaker,
119
- currentSpeaker = _ref$currentSpeaker === void 0 ? null : _ref$currentSpeaker,
120
- _ref$conversationTimi = _ref.conversationTiming,
121
- conversationTiming = _ref$conversationTimi === void 0 ? null : _ref$conversationTimi,
122
- _ref$typingTiming = _ref.typingTiming,
123
- typingTiming = _ref$typingTiming === void 0 ? null : _ref$typingTiming,
124
- _ref$onChange = _ref.onChange,
125
- onChange = _ref$onChange === void 0 ? null : _ref$onChange,
126
- _ref$withAnimation = _ref.withAnimation,
127
- withAnimation = _ref$withAnimation === void 0 ? false : _ref$withAnimation,
128
- _ref$active = _ref.active,
129
- active = _ref$active === void 0 ? false : _ref$active,
130
- _ref$isPlaying = _ref.isPlaying,
131
- isPlaying = _ref$isPlaying === void 0 ? false : _ref$isPlaying,
132
- _ref$messageStyle = _ref.messageStyle,
133
- messageStyle = _ref$messageStyle === void 0 ? null : _ref$messageStyle,
134
- _ref$speakerStyle = _ref.speakerStyle,
135
- speakerStyle = _ref$speakerStyle === void 0 ? null : _ref$speakerStyle,
136
- _ref$className = _ref.className,
137
- className = _ref$className === void 0 ? null : _ref$className,
138
- _ref$audioEventsChann = _ref.audioEventsChannelName,
139
- audioEventsChannelName = _ref$audioEventsChann === void 0 ? null : _ref$audioEventsChann;
140
- var _ref2 = message || {},
141
- messageBody = _ref2.message,
142
- _ref2$image = _ref2.image,
143
- image = _ref2$image === void 0 ? null : _ref2$image,
144
- audio = _ref2.audio,
145
- _ref2$putAudioBeforeT = _ref2.putAudioBeforeText,
146
- putAudioBeforeText = _ref2$putAudioBeforeT === void 0 ? false : _ref2$putAudioBeforeT;
147
- var _ref3 = currentSpeaker || {},
148
- _ref3$avatar = _ref3.avatar,
149
- avatar = _ref3$avatar === void 0 ? null : _ref3$avatar,
150
- speakerName = _ref3.name,
151
- _ref3$side = _ref3.side,
152
- side = _ref3$side === void 0 ? 'left' : _ref3$side,
153
- currentSpeakerId = _ref3.id,
154
- color = _ref3.color;
155
- var _ref4 = avatar || {},
156
- _ref4$url = _ref4.url,
157
- avatarUrl = _ref4$url === void 0 ? null : _ref4$url;
158
- var right = side === 'right';
159
- var isPrevSpeakerTheSame = previousMessage !== null && previousMessage.speaker === currentSpeakerId;
160
- var isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
161
-
162
- // Timing
163
- var _useState = useState(withAnimation ? 'pause' : 'send'),
164
- _useState2 = _slicedToArray(_useState, 2),
165
- messageState = _useState2[0],
166
- setMessageState = _useState2[1];
167
- var pauseBeforeTyping = conversationTiming;
168
- var typingDuration = typingTiming;
169
- useEffect(function () {
170
- if (!withAnimation || !isPlaying) {
171
- return function () {};
172
- }
173
- var timeout = null;
174
- if (messageState === 'pause') {
175
- timeout = setTimeout(function () {
176
- return setMessageState('typing');
177
- }, pauseBeforeTyping);
178
- } else if (messageState === 'typing') {
179
- timeout = setTimeout(function () {
180
- return setMessageState('send');
181
- }, typingDuration);
182
- }
183
- return function () {
184
- if (timeout !== null) {
185
- clearTimeout(timeout);
190
+ function ConversationMessage(t0) {
191
+ const $ = c(41);
192
+ const {
193
+ message: t1,
194
+ messageId: t2,
195
+ previousMessage: t3,
196
+ nextMessage: t4,
197
+ nextAudioMessageId: t5,
198
+ nextMessageState: t6,
199
+ currentSpeaker: t7,
200
+ conversationTiming: t8,
201
+ typingTiming: t9,
202
+ onChange: t10,
203
+ withAnimation: t11,
204
+ active: t12,
205
+ isPlaying: t13,
206
+ messageStyle: t14,
207
+ speakerStyle: t15,
208
+ className: t16,
209
+ audioEventsChannelName: t17
210
+ } = t0;
211
+ const message = t1 === undefined ? null : t1;
212
+ const messageId = t2 === undefined ? null : t2;
213
+ const previousMessage = t3 === undefined ? null : t3;
214
+ const nextMessage = t4 === undefined ? null : t4;
215
+ const nextAudioMessageId = t5 === undefined ? null : t5;
216
+ const nextMessageState = t6 === undefined ? null : t6;
217
+ const currentSpeaker = t7 === undefined ? null : t7;
218
+ const conversationTiming = t8 === undefined ? null : t8;
219
+ const typingTiming = t9 === undefined ? null : t9;
220
+ const onChange = t10 === undefined ? null : t10;
221
+ const withAnimation = t11 === undefined ? false : t11;
222
+ const active = t12 === undefined ? false : t12;
223
+ const isPlaying = t13 === undefined ? false : t13;
224
+ const messageStyle = t14 === undefined ? null : t14;
225
+ const speakerStyle = t15 === undefined ? null : t15;
226
+ const className = t16 === undefined ? null : t16;
227
+ const audioEventsChannelName = t17 === undefined ? null : t17;
228
+ let t18;
229
+ if ($[0] !== message) {
230
+ t18 = message || {};
231
+ $[0] = message;
232
+ $[1] = t18;
233
+ } else {
234
+ t18 = $[1];
235
+ }
236
+ const {
237
+ message: messageBody,
238
+ image: t19,
239
+ audio,
240
+ putAudioBeforeText: t20
241
+ } = t18;
242
+ const image = t19 === undefined ? null : t19;
243
+ const putAudioBeforeText = t20 === undefined ? false : t20;
244
+ let t21;
245
+ if ($[2] !== currentSpeaker) {
246
+ t21 = currentSpeaker || {};
247
+ $[2] = currentSpeaker;
248
+ $[3] = t21;
249
+ } else {
250
+ t21 = $[3];
251
+ }
252
+ const {
253
+ avatar: t22,
254
+ name: speakerName,
255
+ side: t23,
256
+ id: currentSpeakerId,
257
+ color
258
+ } = t21;
259
+ const avatar = t22 === undefined ? null : t22;
260
+ const side = t23 === undefined ? "left" : t23;
261
+ let t24;
262
+ if ($[4] !== avatar) {
263
+ t24 = avatar || {};
264
+ $[4] = avatar;
265
+ $[5] = t24;
266
+ } else {
267
+ t24 = $[5];
268
+ }
269
+ const {
270
+ url: t25
271
+ } = t24;
272
+ const avatarUrl = t25 === undefined ? null : t25;
273
+ const right = side === "right";
274
+ const isPrevSpeakerTheSame = previousMessage !== null && previousMessage.speaker === currentSpeakerId;
275
+ const isNextSpeakerTheSame = nextMessage !== null && nextMessage.speaker === currentSpeakerId;
276
+ const [messageState, setMessageState] = useState(withAnimation ? "pause" : "send");
277
+ const pauseBeforeTyping = conversationTiming;
278
+ const typingDuration = typingTiming;
279
+ let t26;
280
+ let t27;
281
+ if ($[6] !== isPlaying || $[7] !== messageState || $[8] !== pauseBeforeTyping || $[9] !== typingDuration || $[10] !== withAnimation) {
282
+ t26 = () => {
283
+ if (!withAnimation || !isPlaying) {
284
+ return _temp;
285
+ }
286
+ let timeout = null;
287
+ if (messageState === "pause") {
288
+ timeout = setTimeout(() => setMessageState("typing"), pauseBeforeTyping);
289
+ } else {
290
+ if (messageState === "typing") {
291
+ timeout = setTimeout(() => setMessageState("send"), typingDuration);
292
+ }
186
293
  }
294
+ return () => {
295
+ if (timeout !== null) {
296
+ clearTimeout(timeout);
297
+ }
298
+ };
187
299
  };
188
- }, [withAnimation, isPlaying, messageState, setMessageState, pauseBeforeTyping, typingDuration]);
189
- useEffect(function () {
190
- if (messageState !== 'pause' && onChange !== null) {
191
- onChange(messageState);
192
- }
193
- }, [messageState]);
194
- var betweenStyle = isNextSpeakerTheSame && nextMessageState;
195
- return messageState !== 'pause' ? /*#__PURE__*/jsx("div", {
196
- className: classNames([styles.messageContainer, className, _defineProperty(_defineProperty({}, styles.withAnimation, withAnimation === true), styles.right, right)]),
197
- children: messageState === 'typing' ? /*#__PURE__*/jsxs("div", {
198
- className: styles.loadingContainer,
199
- children: [/*#__PURE__*/jsxs("div", {
200
- className: styles.loading,
201
- children: [/*#__PURE__*/jsx("div", {
202
- className: styles.dot
203
- }), /*#__PURE__*/jsx("div", {
204
- className: styles.dot
300
+ t27 = [withAnimation, isPlaying, messageState, setMessageState, pauseBeforeTyping, typingDuration];
301
+ $[6] = isPlaying;
302
+ $[7] = messageState;
303
+ $[8] = pauseBeforeTyping;
304
+ $[9] = typingDuration;
305
+ $[10] = withAnimation;
306
+ $[11] = t26;
307
+ $[12] = t27;
308
+ } else {
309
+ t26 = $[11];
310
+ t27 = $[12];
311
+ }
312
+ useEffect(t26, t27);
313
+ let t28;
314
+ if ($[13] !== messageState || $[14] !== onChange) {
315
+ t28 = () => {
316
+ if (messageState !== "pause" && onChange !== null) {
317
+ onChange(messageState);
318
+ }
319
+ };
320
+ $[13] = messageState;
321
+ $[14] = onChange;
322
+ $[15] = t28;
323
+ } else {
324
+ t28 = $[15];
325
+ }
326
+ let t29;
327
+ if ($[16] !== messageState) {
328
+ t29 = [messageState];
329
+ $[16] = messageState;
330
+ $[17] = t29;
331
+ } else {
332
+ t29 = $[17];
333
+ }
334
+ useEffect(t28, t29);
335
+ const betweenStyle = isNextSpeakerTheSame && nextMessageState;
336
+ let t30;
337
+ if ($[18] !== active || $[19] !== audio || $[20] !== audioEventsChannelName || $[21] !== avatarUrl || $[22] !== betweenStyle || $[23] !== className || $[24] !== color || $[25] !== image || $[26] !== isNextSpeakerTheSame || $[27] !== isPlaying || $[28] !== isPrevSpeakerTheSame || $[29] !== messageBody || $[30] !== messageId || $[31] !== messageState || $[32] !== messageStyle || $[33] !== nextAudioMessageId || $[34] !== putAudioBeforeText || $[35] !== right || $[36] !== side || $[37] !== speakerName || $[38] !== speakerStyle || $[39] !== withAnimation) {
338
+ t30 = messageState !== "pause" ? /*#__PURE__*/jsx("div", {
339
+ className: classNames([styles.messageContainer, className, {
340
+ [styles.withAnimation]: withAnimation === true,
341
+ [styles.right]: right
342
+ }]),
343
+ children: messageState === "typing" ? /*#__PURE__*/jsxs("div", {
344
+ className: styles.loadingContainer,
345
+ children: [/*#__PURE__*/jsxs("div", {
346
+ className: styles.loading,
347
+ children: [/*#__PURE__*/jsx("div", {
348
+ className: styles.dot
349
+ }), /*#__PURE__*/jsx("div", {
350
+ className: styles.dot
351
+ }), /*#__PURE__*/jsx("div", {
352
+ className: styles.dot
353
+ })]
205
354
  }), /*#__PURE__*/jsx("div", {
206
- className: styles.dot
355
+ className: styles.loadingSpeakerName,
356
+ children: speakerName
207
357
  })]
208
- }), /*#__PURE__*/jsx("div", {
209
- className: styles.loadingSpeakerName,
210
- children: speakerName
211
- })]
212
- }) : /*#__PURE__*/jsxs("div", {
213
- 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)]),
214
- style: _objectSpread({}, getStyleFromColor(color)),
215
- children: [!isPrevSpeakerTheSame ? /*#__PURE__*/jsxs("div", {
216
- className: classNames([styles.speakerDetails, _defineProperty({}, styles.right, side === 'right')]),
217
- children: [avatarUrl !== null ? /*#__PURE__*/jsx("div", {
218
- className: classNames([styles.avatarContainer, _defineProperty({}, styles.right, side === 'right')]),
219
- children: /*#__PURE__*/jsx("img", {
220
- className: styles.avatar,
221
- src: avatarUrl,
222
- alt: speakerName,
223
- loading: "lazy"
224
- })
225
- }) : null, /*#__PURE__*/jsx(Text, {
226
- body: speakerName,
227
- textStyle: speakerStyle
358
+ }) : /*#__PURE__*/jsxs("div", {
359
+ className: classNames([styles.message, {
360
+ [styles.normalRight]: right,
361
+ [styles.nextTheSame]: isNextSpeakerTheSame === true && isPrevSpeakerTheSame,
362
+ [styles.inBetweenRight]: betweenStyle && right,
363
+ [styles.normalLeft]: !right,
364
+ [styles.inBetweenLeft]: betweenStyle && !right,
365
+ [styles.last]: isNextSpeakerTheSame === false
366
+ }]),
367
+ style: {
368
+ ...getStyleFromColor(color)
369
+ },
370
+ children: [!isPrevSpeakerTheSame ? /*#__PURE__*/jsxs("div", {
371
+ className: classNames([styles.speakerDetails, {
372
+ [styles.right]: side === "right"
373
+ }]),
374
+ children: [avatarUrl !== null ? /*#__PURE__*/jsx("div", {
375
+ className: classNames([styles.avatarContainer, {
376
+ [styles.right]: side === "right"
377
+ }]),
378
+ children: /*#__PURE__*/jsx("img", {
379
+ className: styles.avatar,
380
+ src: avatarUrl,
381
+ alt: speakerName,
382
+ loading: "lazy"
383
+ })
384
+ }) : null, /*#__PURE__*/jsx(Text, {
385
+ body: speakerName,
386
+ textStyle: speakerStyle
387
+ })]
388
+ }) : null, /*#__PURE__*/jsxs("div", {
389
+ className: styles.messageBody,
390
+ children: [image !== null ? /*#__PURE__*/jsx("div", {
391
+ className: styles.imageContainer,
392
+ children: /*#__PURE__*/jsx(Visual, {
393
+ media: image,
394
+ width: "100%",
395
+ playing: isPlaying,
396
+ active: active
397
+ })
398
+ }) : null, audio && putAudioBeforeText ? /*#__PURE__*/jsx(ConversationAudioAttachment, {
399
+ audio: audio,
400
+ messageId: messageId,
401
+ nextAudioMessageId: nextAudioMessageId,
402
+ audioEventsChannelName: audioEventsChannelName,
403
+ className: classNames(styles.audioAttachment, styles.beforeText)
404
+ }) : null, /*#__PURE__*/jsx(Text, {
405
+ className: styles.messageText,
406
+ body: messageBody,
407
+ textStyle: messageStyle
408
+ }), audio && !putAudioBeforeText ? /*#__PURE__*/jsx(ConversationAudioAttachment, {
409
+ audio: audio,
410
+ messageId: messageId,
411
+ nextAudioMessageId: nextAudioMessageId,
412
+ audioEventsChannelName: audioEventsChannelName,
413
+ className: classNames(styles.audioAttachment, styles.afterText)
414
+ }) : null]
228
415
  })]
229
- }) : null, /*#__PURE__*/jsxs("div", {
230
- className: styles.messageBody,
231
- children: [image !== null ? /*#__PURE__*/jsx("div", {
232
- className: styles.imageContainer,
233
- children: /*#__PURE__*/jsx(Visual, {
234
- media: image,
235
- width: "100%",
236
- playing: isPlaying,
237
- active: active
238
- })
239
- }) : null, audio && putAudioBeforeText ? /*#__PURE__*/jsx(ConversationAudioAttachment, {
240
- audio: audio,
241
- messageId: messageId,
242
- nextAudioMessageId: nextAudioMessageId,
243
- audioEventsChannelName: audioEventsChannelName,
244
- className: classNames(styles.audioAttachment, styles.beforeText)
245
- }) : null, /*#__PURE__*/jsx(Text, {
246
- className: styles.messageText,
247
- body: messageBody,
248
- textStyle: messageStyle
249
- }), audio && !putAudioBeforeText ? /*#__PURE__*/jsx(ConversationAudioAttachment, {
250
- audio: audio,
251
- messageId: messageId,
252
- nextAudioMessageId: nextAudioMessageId,
253
- audioEventsChannelName: audioEventsChannelName,
254
- className: classNames(styles.audioAttachment, styles.afterText)
255
- }) : null]
256
- })]
257
- })
258
- }) : null;
416
+ })
417
+ }) : null;
418
+ $[18] = active;
419
+ $[19] = audio;
420
+ $[20] = audioEventsChannelName;
421
+ $[21] = avatarUrl;
422
+ $[22] = betweenStyle;
423
+ $[23] = className;
424
+ $[24] = color;
425
+ $[25] = image;
426
+ $[26] = isNextSpeakerTheSame;
427
+ $[27] = isPlaying;
428
+ $[28] = isPrevSpeakerTheSame;
429
+ $[29] = messageBody;
430
+ $[30] = messageId;
431
+ $[31] = messageState;
432
+ $[32] = messageStyle;
433
+ $[33] = nextAudioMessageId;
434
+ $[34] = putAudioBeforeText;
435
+ $[35] = right;
436
+ $[36] = side;
437
+ $[37] = speakerName;
438
+ $[38] = speakerStyle;
439
+ $[39] = withAnimation;
440
+ $[40] = t30;
441
+ } else {
442
+ t30 = $[40];
443
+ }
444
+ return t30;
259
445
  }
446
+ function _temp() {}
260
447
 
261
- function ConversationScreen(_ref) {
262
- var _ref$title = _ref.title,
263
- title = _ref$title === void 0 ? null : _ref$title,
264
- _ref$timing = _ref.timing,
265
- timingMode = _ref$timing === void 0 ? 'sequence' : _ref$timing,
266
- _ref$readingSpeed = _ref.readingSpeed,
267
- readingSpeed = _ref$readingSpeed === void 0 ? 255 : _ref$readingSpeed,
268
- _ref$spacing = _ref.spacing,
269
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
270
- _ref$background = _ref.background,
271
- background = _ref$background === void 0 ? null : _ref$background,
272
- _ref$header = _ref.header,
273
- header = _ref$header === void 0 ? null : _ref$header,
274
- _ref$footer = _ref.footer,
275
- footer = _ref$footer === void 0 ? null : _ref$footer,
276
- _ref$current = _ref.current,
277
- current = _ref$current === void 0 ? true : _ref$current,
278
- _ref$preload = _ref.preload,
279
- preload = _ref$preload === void 0 ? true : _ref$preload,
280
- _ref$type = _ref.type,
281
- type = _ref$type === void 0 ? null : _ref$type,
282
- _ref$conversation = _ref.conversation,
283
- conversation = _ref$conversation === void 0 ? null : _ref$conversation,
284
- _ref$transitions = _ref.transitions,
285
- transitions = _ref$transitions === void 0 ? null : _ref$transitions,
286
- _ref$className = _ref.className,
287
- className = _ref$className === void 0 ? null : _ref$className;
288
- var _useScreenSize = useScreenSize(),
289
- width = _useScreenSize.width,
290
- height = _useScreenSize.height,
291
- resolution = _useScreenSize.resolution;
292
- var _useViewerContext = useViewerContext(),
293
- viewerTopHeight = _useViewerContext.topHeight,
294
- viewerBottomHeight = _useViewerContext.bottomHeight,
295
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
296
- var _useViewerWebView = useViewerWebView(),
297
- openWebView = _useViewerWebView.open;
298
- var trackScreenEvent = useTrackScreenEvent(type);
299
- var _usePlaybackContext = usePlaybackContext(),
300
- muted = _usePlaybackContext.muted;
301
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
302
- mediaRef = _usePlaybackMediaRef.ref,
303
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
304
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
305
- var audioEventsChannel = new BroadcastChannel("conversation_".concat(v1(), "_audioEvents"));
306
- var _useScreenRenderConte = useScreenRenderContext(),
307
- isView = _useScreenRenderConte.isView,
308
- isPreview = _useScreenRenderConte.isPreview,
309
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
310
- isEdit = _useScreenRenderConte.isEdit,
311
- isStatic = _useScreenRenderConte.isStatic,
312
- isCapture = _useScreenRenderConte.isCapture;
313
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
314
- var mediaShouldLoad = current || preload;
315
- var withAnimation = isView && !isStatic && timingMode === 'sequence';
316
- var _ref2 = conversation || {},
317
- _ref2$speakers = _ref2.speakers,
318
- speakers = _ref2$speakers === void 0 ? null : _ref2$speakers,
319
- _ref2$messages = _ref2.messages,
320
- messages = _ref2$messages === void 0 ? [] : _ref2$messages,
321
- messageStyle = _ref2.messageStyle,
322
- speakerStyle = _ref2.speakerStyle;
323
- var _useState = useState([]),
324
- _useState2 = _slicedToArray(_useState, 2),
325
- conversationState = _useState2[0],
326
- setConversationState = _useState2[1];
327
- var chatBottomRef = useRef(null);
328
- var hasHeader = isHeaderFilled(header);
329
- var hasFooter = isFooterFilled(footer);
330
- var footerProps = getFooterProps(footer, {
331
- isView: isView,
332
- current: current,
333
- openWebView: openWebView,
334
- isPreview: isPreview
448
+ /* eslint-disable react/jsx-props-no-spreading */
449
+ function ConversationScreen({
450
+ // layout,
451
+ title = null,
452
+ timing: timingMode = 'sequence',
453
+ readingSpeed = 255,
454
+ spacing = 20,
455
+ background = null,
456
+ header = null,
457
+ footer = null,
458
+ current = true,
459
+ preload = true,
460
+ type = null,
461
+ conversation = null,
462
+ transitions = null,
463
+ mediaRef: customMediaRef = null,
464
+ className = null
465
+ }) {
466
+ const {
467
+ width,
468
+ height,
469
+ resolution
470
+ } = useScreenSize();
471
+ const {
472
+ topHeight: viewerTopHeight,
473
+ bottomHeight: viewerBottomHeight,
474
+ bottomSidesWidth: viewerBottomSidesWidth
475
+ } = useViewerContext();
476
+ const {
477
+ open: openWebView
478
+ } = useViewerWebView();
479
+ const trackScreenEvent = useTrackScreenEvent(type);
480
+ const {
481
+ muted
482
+ } = usePlaybackContext();
483
+ const {
484
+ ref: mediaRef,
485
+ isCurrent: isCurrentMedia = false
486
+ } = usePlaybackMediaRef(current, true);
487
+ const audioEventsChannel = new BroadcastChannel(`conversation_${v1()}_audioEvents`);
488
+ const {
489
+ isView,
490
+ isPreview,
491
+ isPlaceholder,
492
+ isEdit,
493
+ isStatic,
494
+ isCapture
495
+ } = useScreenRenderContext();
496
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
497
+ const mediaShouldLoad = current || preload;
498
+ const withAnimation = isView && !isStatic && timingMode === 'sequence';
499
+ const {
500
+ speakers = null,
501
+ messages = [],
502
+ messageStyle,
503
+ speakerStyle
504
+ } = conversation || {};
505
+ const [conversationState, setConversationState] = useState([]);
506
+ const chatBottomRef = useRef(null);
507
+ const hasHeader = isHeaderFilled(header);
508
+ const hasFooter = isFooterFilled(footer);
509
+ const footerProps = getFooterProps(footer, {
510
+ isView,
511
+ current,
512
+ openWebView,
513
+ isPreview
335
514
  });
336
- var hasTitle = isTextFilled(title);
337
- var _useDimensionObserver = useDimensionObserver(),
338
- contentRef = _useDimensionObserver.ref,
339
- scrollHeight = _useDimensionObserver.height;
340
- var scrollRef = useRef(null);
341
- var _useState3 = useState(false),
342
- _useState4 = _slicedToArray(_useState3, 2),
343
- scrolledBottom = _useState4[0],
344
- setScrolledBottom = _useState4[1];
345
- useEffect(function () {
515
+ const hasTitle = isTextFilled(title);
516
+ const {
517
+ ref: contentRef,
518
+ height: scrollHeight
519
+ } = useDimensionObserver();
520
+ const scrollRef = useRef(null);
521
+ const [scrolledBottom, setScrolledBottom] = useState(false);
522
+ useEffect(() => {
346
523
  if (withAnimation && scrollRef.current !== null && scrolledBottom) {
347
524
  scrollRef.current.scrollTo({
348
525
  top: scrollHeight,
@@ -350,9 +527,9 @@ function ConversationScreen(_ref) {
350
527
  });
351
528
  }
352
529
  }, [scrollHeight, withAnimation]);
353
- var animationFinished = messages.length === conversationState.length;
354
- var conversationStateChange = useCallback(function (state) {
355
- var newConversationState = _toConsumableArray(conversationState);
530
+ const animationFinished = messages.length === conversationState.length;
531
+ const conversationStateChange = useCallback(state => {
532
+ const newConversationState = [...conversationState];
356
533
  if (state === 'send') {
357
534
  newConversationState.push(true);
358
535
  setConversationState(newConversationState);
@@ -360,40 +537,36 @@ function ConversationScreen(_ref) {
360
537
  }, [conversationState, setConversationState]);
361
538
 
362
539
  // sequence timings
363
- var defaultHesitationDelay = 1500;
364
- var imageReadDelay = 5000; // 5 seconds
365
- var millisecondsPerWord = 60 * 1000 / readingSpeed;
366
- var filteredMessages = (messages || []).filter(function (m) {
367
- return m !== null;
368
- });
369
- var timings = filteredMessages.map(function (messageParams, messageIndex) {
540
+ const defaultHesitationDelay = 1500;
541
+ const imageReadDelay = 5000; // 5 seconds
542
+ const millisecondsPerWord = 60 * 1000 / readingSpeed;
543
+ const filteredMessages = (messages || []).filter(m => m !== null);
544
+ const timings = filteredMessages.map((messageParams, messageIndex) => {
370
545
  if (messageIndex === 0) {
371
546
  return 0;
372
547
  }
373
- var _ref3 = messageParams || {},
374
- _ref3$timing = _ref3.timing,
375
- timing = _ref3$timing === void 0 ? null : _ref3$timing,
376
- _ref3$message = _ref3.message,
377
- message = _ref3$message === void 0 ? null : _ref3$message,
378
- image = _ref3.image,
379
- audio = _ref3.audio,
380
- timingOverrides = _ref3.timingOverrides;
548
+ const {
549
+ timing = null,
550
+ message = null,
551
+ image,
552
+ audio,
553
+ timingOverrides
554
+ } = messageParams || {};
381
555
  if (timing !== null) {
382
556
  return timing;
383
557
  }
384
- if (timingOverrides !== null && timingOverrides !== void 0 && timingOverrides.enabled && Number.isFinite(timingOverrides === null || timingOverrides === void 0 ? void 0 : timingOverrides.writingDuration)) {
558
+ if (timingOverrides?.enabled && Number.isFinite(timingOverrides?.writingDuration)) {
385
559
  return timingOverrides.writingDuration * 1000; // seconds to milliseconds
386
560
  }
387
561
 
388
562
  // if the current message has an audio attachment, use the time it takes to record that message
389
563
  if (audio) {
390
- var _audio$metadata;
391
- return (_audio$metadata = audio.metadata) === null || _audio$metadata === void 0 ? void 0 : _audio$metadata.duration;
564
+ return audio.metadata?.duration;
392
565
  }
393
566
 
394
567
  // counting words: only keep whitespaces and alphanumeric characters, then split of whitespaces
395
- var wordCount = message ? message.replace(/[^\w\d\s]/g, '').trim().split(/\s/g).length : 0;
396
- var finalTimeMs = wordCount * millisecondsPerWord;
568
+ const wordCount = message ? message.replace(/[^\w\d\s]/g, '').trim().split(/\s/g).length : 0;
569
+ let finalTimeMs = wordCount * millisecondsPerWord;
397
570
 
398
571
  // if the message includes an image, add some more time to "read" it
399
572
  if (image) {
@@ -401,44 +574,44 @@ function ConversationScreen(_ref) {
401
574
  }
402
575
  return finalTimeMs;
403
576
  });
404
- var hesitationTimings = filteredMessages.map(function (messageParams, messageIndex) {
405
- var timingOverrides = messageParams.timingOverrides;
406
- if (messageIndex !== 0 && timingOverrides !== null && timingOverrides !== void 0 && timingOverrides.enabled && Number.isFinite(timingOverrides === null || timingOverrides === void 0 ? void 0 : timingOverrides.appearDelay)) {
407
- return timingOverrides.appearDelay * 1000; // seconds to milliseconds
577
+ const hesitationTimings = filteredMessages.map((messageParams_0, messageIndex_0) => {
578
+ const {
579
+ timingOverrides: timingOverrides_0
580
+ } = messageParams_0;
581
+ if (messageIndex_0 !== 0 && timingOverrides_0?.enabled && Number.isFinite(timingOverrides_0?.appearDelay)) {
582
+ return timingOverrides_0.appearDelay * 1000; // seconds to milliseconds
408
583
  }
409
584
  return defaultHesitationDelay;
410
585
  });
411
- var messagesUniqueId = useMemo(function () {
412
- return (messages || []).map(function () {
413
- return v1();
414
- });
415
- }, [messages]);
586
+ const messagesUniqueId = useMemo(() => (messages || []).map(() => v1()), [messages]);
416
587
 
417
588
  // scroll
418
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
419
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
420
- var showFooter = animationFinished && !isPlaceholder && hasFooter || !withAnimation;
421
- var onScrolledBottom = useCallback(function (_ref4) {
422
- var initial = _ref4.initial;
589
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
590
+ const scrollingDisabled = !isEdit && transitionDisabled || !current;
591
+ const showFooter = animationFinished && !isPlaceholder && hasFooter || !withAnimation;
592
+ const onScrolledBottom = useCallback(({
593
+ initial
594
+ }) => {
423
595
  if (initial) {
424
596
  trackScreenEvent('scroll', 'Screen');
425
597
  }
426
598
  setScrolledBottom(true);
427
599
  }, [trackScreenEvent]);
428
- var onScrolledNotBottom = useCallback(function () {
600
+ const onScrolledNotBottom = useCallback(() => {
429
601
  setScrolledBottom(false);
430
602
  }, [setScrolledBottom]);
431
- var onScrolledTrigger = useCallback(function () {
432
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
603
+ const onScrolledTrigger = useCallback((trigger = null) => {
433
604
  if (trigger !== null) {
434
- var scrollPercent = Math.round(trigger * 100);
605
+ const scrollPercent = Math.round(trigger * 100);
435
606
  trackScreenEvent('scroll', scrollPercent, {
436
- scrollPercent: scrollPercent
607
+ scrollPercent
437
608
  });
438
609
  }
439
610
  }, [trackScreenEvent]);
440
611
  return /*#__PURE__*/jsxs("div", {
441
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
612
+ className: classNames([styles.container, className, {
613
+ [styles.isPlaceholder]: isPlaceholder
614
+ }]),
442
615
  "data-screen-ready": true,
443
616
  children: [/*#__PURE__*/jsx(Container, {
444
617
  width: width,
@@ -465,15 +638,14 @@ function ConversationScreen(_ref) {
465
638
  style: {
466
639
  paddingBottom: spacing
467
640
  },
468
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
641
+ children: /*#__PURE__*/jsx(Header, {
642
+ ...header
643
+ })
469
644
  }, "header") : null, /*#__PURE__*/jsx(ScreenElement, {
470
645
  placeholder: "conversation",
471
646
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
472
647
  id: "NmCfTO",
473
- defaultMessage: [{
474
- "type": 0,
475
- "value": "Conversation"
476
- }]
648
+ defaultMessage: "Conversation"
477
649
  }),
478
650
  emptyClassName: styles.empty,
479
651
  isEmpty: messages.length === 0 && title === null,
@@ -483,28 +655,27 @@ function ConversationScreen(_ref) {
483
655
  disabled: transitionDisabled
484
656
  // delay={0}
485
657
  ,
486
- children: [hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, title), {}, {
658
+ children: [hasTitle ? /*#__PURE__*/jsx(Heading, {
659
+ ...title,
487
660
  className: styles.title,
488
661
  isEmpty: title === null
489
- })) : null, /*#__PURE__*/jsx("div", {
662
+ }) : null, /*#__PURE__*/jsx("div", {
490
663
  className: styles.conversation,
491
- children: filteredMessages.map(function (m, messageI) {
492
- var previousMessage = messageI !== 0 ? messages[messageI - 1] : null;
493
- var nextMessage = messageI + 1 < messages.length ? messages[messageI + 1] : null;
494
- var speaker = m.speaker;
495
- var currentSpeaker = (speakers || []).find(function (s) {
496
- return s.id === speaker;
497
- }) || null;
498
- var shouldPlay = messageI === 0 || conversationState[messageI - 1] === true;
499
- var pauseTiming = hesitationTimings[messageI];
500
- var typingTiming = timings[messageI];
501
- var messageId = "".concat(m.message, "-").concat(messagesUniqueId[messageI]);
502
- var nextAudioMessage = filteredMessages.slice(messageI + 1).find(function (c) {
503
- return c.audio != null;
504
- });
505
- var nextAudioMessageId = nextAudioMessage ? "".concat(m.message, "-").concat(messagesUniqueId[filteredMessages.indexOf(nextAudioMessage)]) : null;
664
+ children: filteredMessages.map((m_0, messageI) => {
665
+ const previousMessage = messageI !== 0 ? messages[messageI - 1] : null;
666
+ const nextMessage = messageI + 1 < messages.length ? messages[messageI + 1] : null;
667
+ const {
668
+ speaker
669
+ } = m_0;
670
+ const currentSpeaker = (speakers || []).find(s => s.id === speaker) || null;
671
+ const shouldPlay = messageI === 0 || conversationState[messageI - 1] === true;
672
+ const pauseTiming = hesitationTimings[messageI];
673
+ const typingTiming = timings[messageI];
674
+ const messageId = `${m_0.message}-${messagesUniqueId[messageI]}`;
675
+ const nextAudioMessage = filteredMessages.slice(messageI + 1).find(c => c.audio != null);
676
+ const nextAudioMessageId = nextAudioMessage ? `${m_0.message}-${messagesUniqueId[filteredMessages.indexOf(nextAudioMessage)]}` : null;
506
677
  return /*#__PURE__*/jsx(ConversationMessage, {
507
- message: m,
678
+ message: m_0,
508
679
  messageId: messageId,
509
680
  previousMessage: previousMessage,
510
681
  nextMessage: nextMessage,
@@ -524,13 +695,17 @@ function ConversationScreen(_ref) {
524
695
  }, messageId);
525
696
  })
526
697
  }), showFooter ? /*#__PURE__*/jsx("div", {
527
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
698
+ className: classNames([styles.footer, {
699
+ [styles.disabled]: !scrolledBottom
700
+ }]),
528
701
  style: {
529
702
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
530
703
  paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
531
704
  paddingTop: spacing
532
705
  },
533
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
706
+ children: /*#__PURE__*/jsx(Footer, {
707
+ ...footerProps
708
+ })
534
709
  }) : null, /*#__PURE__*/jsx("div", {
535
710
  ref: chatBottomRef
536
711
  })]
@@ -547,7 +722,7 @@ function ConversationScreen(_ref) {
547
722
  playing: backgroundPlaying,
548
723
  muted: muted,
549
724
  shouldLoad: mediaShouldLoad,
550
- mediaRef: mediaRef,
725
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
551
726
  withoutVideo: isPreview,
552
727
  className: styles.background
553
728
  }) : null]
@@ -560,19 +735,13 @@ var definition = {
560
735
  group: {
561
736
  label: defineMessage({
562
737
  id: "fIawTr",
563
- defaultMessage: [{
564
- "type": 0,
565
- "value": "Text"
566
- }]
738
+ defaultMessage: "Text"
567
739
  }),
568
740
  order: 3
569
741
  },
570
742
  title: defineMessage({
571
743
  id: "rBPIgw",
572
- defaultMessage: [{
573
- "type": 0,
574
- "value": "Conversation"
575
- }]
744
+ defaultMessage: "Conversation"
576
745
  }),
577
746
  component: ConversationScreen,
578
747
  layouts: ['normal'],
@@ -603,10 +772,7 @@ var definition = {
603
772
  }],
604
773
  label: defineMessage({
605
774
  id: "6DV50M",
606
- defaultMessage: [{
607
- "type": 0,
608
- "value": "Timing"
609
- }]
775
+ defaultMessage: "Timing"
610
776
  })
611
777
  }, {
612
778
  name: 'title',
@@ -616,20 +782,14 @@ var definition = {
616
782
  },
617
783
  label: defineMessage({
618
784
  id: "N25iDO",
619
- defaultMessage: [{
620
- "type": 0,
621
- "value": "Title"
622
- }]
785
+ defaultMessage: "Title"
623
786
  })
624
787
  }, {
625
788
  name: 'conversation',
626
789
  type: 'conversation',
627
790
  label: defineMessage({
628
791
  id: "8tANs8",
629
- defaultMessage: [{
630
- "type": 0,
631
- "value": "Conversation"
632
- }]
792
+ defaultMessage: "Conversation"
633
793
  })
634
794
  }, {
635
795
  name: 'readingSpeed',
@@ -637,30 +797,21 @@ var definition = {
637
797
  defaultValue: 255,
638
798
  label: defineMessage({
639
799
  id: "QjbLZ9",
640
- defaultMessage: [{
641
- "type": 0,
642
- "value": "Reading speed (in Words Per Minute)"
643
- }]
800
+ defaultMessage: "Reading speed (in Words Per Minute)"
644
801
  })
645
802
  }, {
646
803
  name: 'background',
647
804
  type: 'background',
648
805
  label: defineMessage({
649
806
  id: "+MPZRu",
650
- defaultMessage: [{
651
- "type": 0,
652
- "value": "Background"
653
- }]
807
+ defaultMessage: "Background"
654
808
  })
655
809
  }, {
656
810
  name: 'header',
657
811
  type: 'header',
658
812
  label: defineMessage({
659
813
  id: "rhuDxI",
660
- defaultMessage: [{
661
- "type": 0,
662
- "value": "Header"
663
- }]
814
+ defaultMessage: "Header"
664
815
  }),
665
816
  theme: {
666
817
  badge: {
@@ -675,10 +826,7 @@ var definition = {
675
826
  type: 'footer',
676
827
  label: defineMessage({
677
828
  id: "g4nybp",
678
- defaultMessage: [{
679
- "type": 0,
680
- "value": "Footer"
681
- }]
829
+ defaultMessage: "Footer"
682
830
  }),
683
831
  theme: {
684
832
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-conversation",
3
- "version": "0.4.70",
3
+ "version": "0.4.74",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,7 @@
36
36
  "exports": {
37
37
  ".": {
38
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
39
40
  "import": "./es/index.js"
40
41
  },
41
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,26 +53,26 @@
52
53
  "build": "../../scripts/prepare-package.sh --types"
53
54
  },
54
55
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0",
56
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "react": "^18.3.0 || ^19.0.0",
60
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
61
62
  },
62
63
  "dependencies": {
63
64
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.69",
65
- "@micromag/element-background": "^0.4.70",
66
- "@micromag/element-container": "^0.4.69",
67
- "@micromag/element-footer": "^0.4.70",
68
- "@micromag/element-header": "^0.4.69",
69
- "@micromag/element-heading": "^0.4.69",
70
- "@micromag/element-layout": "^0.4.69",
71
- "@micromag/element-scroll": "^0.4.69",
72
- "@micromag/element-text": "^0.4.69",
73
- "@micromag/element-visual": "^0.4.70",
74
- "@micromag/transforms": "^0.4.69",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/element-background": "^0.4.74",
67
+ "@micromag/element-container": "^0.4.74",
68
+ "@micromag/element-footer": "^0.4.74",
69
+ "@micromag/element-header": "^0.4.74",
70
+ "@micromag/element-heading": "^0.4.74",
71
+ "@micromag/element-layout": "^0.4.74",
72
+ "@micromag/element-scroll": "^0.4.74",
73
+ "@micromag/element-text": "^0.4.74",
74
+ "@micromag/element-visual": "^0.4.74",
75
+ "@micromag/transforms": "^0.4.74",
75
76
  "classnames": "^2.2.6",
76
77
  "lodash": "^4.17.23",
77
78
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
81
82
  "access": "public",
82
83
  "registry": "https://registry.npmjs.org/"
83
84
  },
84
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
85
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
85
86
  "types": "es/index.d.ts"
86
87
  }