@botonic/webchat-react 2.25.0 โ†’ 2.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2408 +0,0 @@
1
- import { jsx as s, jsxs as g, Fragment as ve } from "react/jsx-runtime";
2
- import pe, { useState as N, useMemo as ne, useEffect as T, forwardRef as P, useContext as Ce, createContext as ye, useRef as I, useCallback as h } from "react";
3
- import { cx as $, cva as L } from "class-variance-authority";
4
- import { WebchatController as Be, setupGlobalWebchatAPI as Te, isCloseWebviewMessage as Pe, isWebviewPostMessage as Se, WEBVIEW_MESSAGE_TYPES as J } from "@botonic/webchat-core";
5
- import { useSelector as k } from "@xstate/react";
6
- import { WebchatMessageFactory as ke, MessageSentBy as oe } from "@botonic/shared";
7
- function $e(e) {
8
- const [t, n] = N(""), a = ne(() => {
9
- console.log("๐Ÿ—๏ธ Creating WebchatController with config:", e);
10
- const r = new Be(e);
11
- return r.initialize().catch((f) => {
12
- console.error("โŒ Failed to initialize webchat:", f);
13
- }), r;
14
- }, [e.appId]), l = k(
15
- a.machine,
16
- (r) => {
17
- const f = r.context.messageActors;
18
- return f ? Array.from(f.values()) : [];
19
- }
20
- ), d = k(
21
- a.machine,
22
- (r) => r.context.isOpen || !1
23
- ), o = k(
24
- a.machine,
25
- (r) => r.matches("operational")
26
- ), i = k(
27
- a.machine,
28
- (r) => r.matches("connectionFailed")
29
- ), c = k(
30
- a.machine,
31
- (r) => r.context.connectionStatus || "disconnected"
32
- ), m = k(
33
- a.machine,
34
- (r) => r.context.overlayActor
35
- ), u = k(
36
- m,
37
- (r) => r.context.overlayState
38
- );
39
- return T(() => (Te(a), () => {
40
- console.log("๐Ÿงน Cleaning up webchat controller"), a.destroy();
41
- }), [a]), {
42
- // Framework-agnostic controller - all webchat functionality
43
- controller: a,
44
- // React-specific UI state (minimal)
45
- inputValue: t,
46
- setInputValue: n,
47
- // XState machine state (direct from machine via useSelector)
48
- isOpen: d,
49
- isInitialized: o,
50
- initializationError: i,
51
- messageActors: l,
52
- connectionStatus: c,
53
- // Overlay state (webview or cover component)
54
- overlayState: u,
55
- // Configuration
56
- avatarConfig: e.avatarConfig,
57
- // Custom messages
58
- customMessages: e.customMessages
59
- };
60
- }
61
- const we = ye(null), Le = P(({ children: e, ...t }, n) => {
62
- const a = $e(t);
63
- pe.useImperativeHandle(n, () => a.controller, [a.controller]);
64
- const l = {
65
- state: a,
66
- controller: a.controller
67
- // Direct access to controller
68
- };
69
- return /* @__PURE__ */ s(we.Provider, { value: l, children: e });
70
- });
71
- function ee() {
72
- const e = Ce(we);
73
- if (!e)
74
- throw new Error("useWebchatContext must be used within a WebchatProvider");
75
- return e;
76
- }
77
- const Ee = "button-component-module__buttonComponent___KMwSR", De = "button-component-module__secondary___TTpBp", Oe = "button-component-module__primary___bD2jQ", ue = {
78
- buttonComponent: Ee,
79
- secondary: De,
80
- primary: Oe
81
- }, le = P(
82
- ({
83
- text: e,
84
- disabled: t = !1,
85
- onClick: n,
86
- button: a,
87
- className: l,
88
- variant: d = "secondary"
89
- }, o) => /* @__PURE__ */ s(
90
- "button",
91
- {
92
- ref: o,
93
- disabled: t,
94
- onClick: (c) => {
95
- c.preventDefault(), c.stopPropagation(), n?.(a);
96
- },
97
- className: $(
98
- ue.buttonComponent,
99
- d === "primary" && ue.primary,
100
- d === "secondary" && ue.secondary,
101
- l
102
- ),
103
- type: "button",
104
- children: e
105
- }
106
- )
107
- ), Re = "confirm-modal-module__overlay___rRE3G", Ae = "confirm-modal-module__modal___AliW3", Ve = "confirm-modal-module__title___nOVLU", ze = "confirm-modal-module__message___NiTmg", We = "confirm-modal-module__buttons___T9sSa", te = {
108
- overlay: Re,
109
- modal: Ae,
110
- title: Ve,
111
- message: ze,
112
- buttons: We
113
- };
114
- function He(e) {
115
- return e === !1 || e === void 0 ? null : e === !0 ? {
116
- message: "Are you sure you want to close?"
117
- } : typeof e == "string" ? {
118
- message: e
119
- } : e;
120
- }
121
- const Fe = ({
122
- config: e,
123
- onConfirm: t,
124
- onCancel: n
125
- }) => {
126
- const a = I(null), l = I(null), d = He(e);
127
- T(() => {
128
- a.current?.focus();
129
- }, []), T(() => {
130
- const u = (r) => {
131
- r.key === "Escape" && (r.stopPropagation(), n());
132
- };
133
- return window.addEventListener("keydown", u, !0), () => {
134
- window.removeEventListener("keydown", u, !0);
135
- };
136
- }, [n]);
137
- const o = h((u) => {
138
- if (u.key === "Tab") {
139
- const r = l.current?.querySelectorAll(
140
- "button:not([disabled])"
141
- );
142
- if (!r?.length) return;
143
- const f = r[0], C = r[r.length - 1];
144
- u.shiftKey ? document.activeElement === f && (u.preventDefault(), C.focus()) : document.activeElement === C && (u.preventDefault(), f.focus());
145
- }
146
- }, []);
147
- if (!d)
148
- return null;
149
- const i = d.title || "Close?", c = d.confirmText || "Close", m = d.cancelText || "Cancel";
150
- return /* @__PURE__ */ s(
151
- "div",
152
- {
153
- className: te.overlay,
154
- role: "alertdialog",
155
- "aria-modal": "true",
156
- "aria-labelledby": "confirm-close-title",
157
- "aria-describedby": "confirm-close-message",
158
- onClick: n,
159
- children: /* @__PURE__ */ g(
160
- "div",
161
- {
162
- ref: l,
163
- className: te.modal,
164
- onClick: (u) => u.stopPropagation(),
165
- onKeyDown: o,
166
- children: [
167
- /* @__PURE__ */ s("h3", { id: "confirm-close-title", className: te.title, children: i }),
168
- /* @__PURE__ */ s("p", { id: "confirm-close-message", className: te.message, children: d.message }),
169
- /* @__PURE__ */ g("div", { className: te.buttons, children: [
170
- /* @__PURE__ */ s(
171
- le,
172
- {
173
- text: m,
174
- button: { text: "cancel", value: "cancel" },
175
- onClick: n,
176
- variant: "secondary"
177
- }
178
- ),
179
- /* @__PURE__ */ s(
180
- le,
181
- {
182
- ref: a,
183
- text: c,
184
- button: { text: "confirm", value: "confirm" },
185
- onClick: t,
186
- variant: "primary"
187
- }
188
- )
189
- ] })
190
- ]
191
- }
192
- )
193
- }
194
- );
195
- }, Ne = ye(null);
196
- function ie() {
197
- const e = Ce(Ne);
198
- if (!e)
199
- throw new Error("useOverlayContext must be used within an Overlay");
200
- return e;
201
- }
202
- const Ye = "cover-frame-module__base___e38vU", Ue = "cover-frame-module__errorContainer___o19mQ", je = "cover-frame-module__errorText___ltF9m", de = {
203
- base: Ye,
204
- errorContainer: Ue,
205
- errorText: je
206
- }, ge = L(de.base);
207
- function Ke({ className: e }) {
208
- const { overlayState: t, coverRegistry: n, setIsLoading: a } = ie();
209
- if (T(() => {
210
- t?.type === "cover" && a(!1);
211
- }, [t?.type, a]), !t || t.type !== "cover")
212
- return null;
213
- const l = t, d = n?.[l.componentId];
214
- return d ? /* @__PURE__ */ s("div", { className: ge({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ s(d, { ...l.props || {} }) }) : (console.warn(
215
- `[OverlayCoverFrame] Component "${l.componentId}" not found in registry. Available components: ${Object.keys(n || {}).join(", ") || "none"}`
216
- ), /* @__PURE__ */ s("div", { className: ge({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ s("div", { className: de.errorContainer, children: /* @__PURE__ */ g("p", { className: de.errorText, children: [
217
- 'Component "',
218
- l.componentId,
219
- '" not found'
220
- ] }) }) }));
221
- }
222
- const Ge = "webview-frame-module__base___u5SZG", Xe = "webview-frame-module__loadingContainer___eqQ-L", qe = "webview-frame-module__spinner___5gsaP", Qe = "webview-frame-module__iframe___XewWc", re = {
223
- base: Ge,
224
- loadingContainer: Xe,
225
- spinner: qe,
226
- iframe: Qe
227
- }, Ze = L(re.base);
228
- function Je({ className: e }) {
229
- const { overlayState: t, sandboxPermissions: n, isLoading: a, setIsLoading: l } = ie(), d = h(() => {
230
- l(!1);
231
- }, [l]);
232
- if (!t || t.type !== "webview")
233
- return null;
234
- const o = t;
235
- return /* @__PURE__ */ g("div", { className: Ze({ className: e }), "data-overlay-webview-frame": !0, children: [
236
- a && /* @__PURE__ */ s("div", { className: re.loadingContainer, children: /* @__PURE__ */ s("div", { className: re.spinner, "aria-label": "Loading webview" }) }),
237
- /* @__PURE__ */ s(
238
- "iframe",
239
- {
240
- src: o.url,
241
- className: re.iframe,
242
- sandbox: n,
243
- title: o.title || "Webview",
244
- onLoad: d,
245
- style: { opacity: a ? 0 : 1 }
246
- }
247
- )
248
- ] });
249
- }
250
- function et({ className: e }) {
251
- const { overlayState: t } = ie();
252
- if (!t)
253
- return null;
254
- switch (t.type) {
255
- case "webview":
256
- return /* @__PURE__ */ s(Je, { className: e });
257
- case "cover":
258
- return /* @__PURE__ */ s(Ke, { className: e });
259
- default:
260
- return null;
261
- }
262
- }
263
- const tt = "header-module__base___WYM0o", st = "header-module__minimal___6nq5w", nt = "header-module__titleContainer___56hi4", at = "header-module__icon___BCSbe", ot = "header-module__title___0c-LL", rt = "header-module__closeButton___wOwC8", Q = {
264
- base: tt,
265
- default: "header-module__default___z7D3c",
266
- minimal: st,
267
- titleContainer: nt,
268
- icon: at,
269
- title: ot,
270
- closeButton: rt
271
- };
272
- function lt(e, t) {
273
- const n = t?.title || "Overlay", a = t?.icon, l = t?.allowClose !== !1;
274
- return {
275
- title: n,
276
- icon: a,
277
- showClose: l,
278
- variants: {
279
- variant: e.variant || "default"
280
- }
281
- };
282
- }
283
- const it = L(Q.base, {
284
- variants: {
285
- variant: {
286
- default: Q.default,
287
- minimal: Q.minimal
288
- }
289
- },
290
- defaultVariants: {
291
- variant: "default"
292
- }
293
- });
294
- function ct(e) {
295
- const { overlayState: t, attemptClose: n } = ie(), { showClose: a, title: l, icon: d, variants: o } = lt(
296
- e,
297
- t
298
- );
299
- return /* @__PURE__ */ g("header", { className: it(o), "data-overlay-header": !0, children: [
300
- /* @__PURE__ */ g("div", { className: Q.titleContainer, children: [
301
- d && /* @__PURE__ */ s("span", { className: Q.icon, children: d }),
302
- /* @__PURE__ */ s("h4", { className: Q.title, children: l })
303
- ] }),
304
- a && /* @__PURE__ */ s(
305
- "button",
306
- {
307
- type: "button",
308
- className: Q.closeButton,
309
- onClick: n,
310
- "aria-label": "Close overlay",
311
- children: "ร—"
312
- }
313
- )
314
- ] });
315
- }
316
- const ut = "overlay-module__base___qm4j7", dt = "overlay-module__loading___8U4v9", he = {
317
- base: ut,
318
- loading: dt
319
- };
320
- function mt(e, t) {
321
- const [n, a] = N(!0), [l, d] = N(!1), o = h(() => {
322
- e?.confirmClose ? d(!0) : t.onClose();
323
- }, [t, e?.confirmClose]), i = h(() => {
324
- d(!1), t.onClose();
325
- }, [t]), c = h(() => {
326
- d(!1);
327
- }, []);
328
- return T(() => {
329
- e?.isOpen && e?.type === "webview" && a(!0);
330
- }, [e?.isOpen, e?.type]), T(() => {
331
- e?.type === "webview" && a(!0);
332
- }, [e?.type === "webview" ? e.url : null]), T(() => {
333
- if (e?.type !== "webview")
334
- return;
335
- const m = (u) => {
336
- if (Pe(u.data)) {
337
- o();
338
- return;
339
- }
340
- if (Se(u.data)) {
341
- const r = u.data;
342
- switch (r.type) {
343
- case J.SET_TITLE:
344
- t.onSetTitle(r.title);
345
- break;
346
- case J.SET_ICON:
347
- t.onSetIcon(r.icon);
348
- break;
349
- case J.SET_ALLOW_CLOSE:
350
- t.onSetAllowClose(r.allow);
351
- break;
352
- case J.SET_CONFIRM_CLOSE:
353
- t.onSetConfirmClose(r.config);
354
- break;
355
- case J.SEND_PAYLOAD:
356
- t.onSendPayload(r.payload);
357
- break;
358
- case J.NAVIGATE:
359
- t.onNavigate(r.url);
360
- break;
361
- }
362
- }
363
- };
364
- return window.addEventListener("message", m), () => {
365
- window.removeEventListener("message", m);
366
- };
367
- }, [t, o, e?.type]), T(() => {
368
- if (l) return;
369
- const m = (u) => {
370
- u.key === "Escape" && e?.isOpen && e?.allowClose !== !1 && o();
371
- };
372
- return window.addEventListener("keydown", m), () => {
373
- window.removeEventListener("keydown", m);
374
- };
375
- }, [
376
- o,
377
- l,
378
- e?.isOpen,
379
- e?.allowClose
380
- ]), {
381
- isLoading: n,
382
- setIsLoading: a,
383
- showConfirmModal: l,
384
- setShowConfirmModal: d,
385
- attemptClose: o,
386
- handleConfirmClose: i,
387
- handleCancelClose: c,
388
- variants: { isLoading: n }
389
- };
390
- }
391
- const _t = "allow-scripts allow-forms allow-same-origin allow-popups", gt = L(he.base, {
392
- variants: {
393
- isLoading: {
394
- true: he.loading
395
- }
396
- }
397
- });
398
- function ht({
399
- overlayState: e,
400
- onClose: t,
401
- onSetTitle: n,
402
- onSetIcon: a,
403
- onSetAllowClose: l,
404
- onSetConfirmClose: d,
405
- onSendPayload: o,
406
- onNavigate: i,
407
- coverRegistry: c,
408
- children: m
409
- }) {
410
- const u = {
411
- onClose: t,
412
- onSetTitle: n,
413
- onSetIcon: a,
414
- onSetAllowClose: l,
415
- onSetConfirmClose: d,
416
- onSendPayload: o,
417
- onNavigate: i
418
- }, {
419
- isLoading: r,
420
- setIsLoading: f,
421
- showConfirmModal: C,
422
- setShowConfirmModal: _,
423
- attemptClose: b,
424
- handleConfirmClose: v,
425
- handleCancelClose: p,
426
- variants: M
427
- } = mt(e, u);
428
- if (!e?.isOpen)
429
- return null;
430
- const x = {
431
- overlayState: e,
432
- ...u,
433
- sandboxPermissions: _t,
434
- isLoading: r,
435
- setIsLoading: f,
436
- attemptClose: b,
437
- showConfirmModal: C,
438
- setShowConfirmModal: _,
439
- coverRegistry: c
440
- };
441
- return /* @__PURE__ */ s(Ne.Provider, { value: x, children: /* @__PURE__ */ g("div", { className: gt(M), "data-overlay": !0, children: [
442
- m || /* @__PURE__ */ g(ve, { children: [
443
- /* @__PURE__ */ s(ct, {}),
444
- /* @__PURE__ */ s(et, {})
445
- ] }),
446
- C && e.confirmClose && /* @__PURE__ */ s(
447
- Fe,
448
- {
449
- config: e.confirmClose,
450
- onConfirm: v,
451
- onCancel: p
452
- }
453
- )
454
- ] }) });
455
- }
456
- function bt(e, t, n) {
457
- const {
458
- layout: a = "default",
459
- size: l = "normal",
460
- position: d = "bottom-right",
461
- "aria-label": o = "Webchat interface",
462
- className: i,
463
- coverRegistry: c,
464
- // Exclude from DOM props
465
- ...m
466
- } = e, u = k(t.controller.machine, (p) => p.context.isOpen || !1), [r, f] = N(null), [C, _] = N(!1), b = I(!1), v = h(
467
- (p) => {
468
- p.target === p.currentTarget && r !== null && (r === "closing" && _(!1), f(null));
469
- },
470
- [r]
471
- );
472
- return T(() => {
473
- const p = b.current;
474
- b.current = u, p === !1 && u ? (_(!0), f("opening")) : p === !0 && !u && f("closing");
475
- }, [u]), {
476
- // Component visibility - stays true during close animation
477
- shouldRender: C,
478
- // Container element props
479
- containerProps: {
480
- ref: n,
481
- role: "dialog",
482
- "aria-label": o,
483
- "aria-live": "polite",
484
- "data-testid": "webchat-container",
485
- "data-layout": a,
486
- "data-size": l,
487
- tabIndex: -1,
488
- onAnimationEnd: v,
489
- ...m
490
- },
491
- // CSS class variants
492
- variants: {
493
- layout: a,
494
- size: l,
495
- position: d,
496
- isOpen: u,
497
- isOpening: r === "opening",
498
- isClosing: r === "closing",
499
- className: i
500
- }
501
- };
502
- }
503
- const ft = "webchat-container-module__base___-nEHI", O = {
504
- base: ft,
505
- "is-open": "webchat-container-module__is-open___y7UjX",
506
- default: "webchat-container-module__default___Zl33C",
507
- "position-bottom-right": "webchat-container-module__position-bottom-right___NIW0p",
508
- "position-bottom-left": "webchat-container-module__position-bottom-left___gatKC",
509
- "position-top-right": "webchat-container-module__position-top-right___DKI8J",
510
- "position-top-left": "webchat-container-module__position-top-left___ehR4d",
511
- "is-opening": "webchat-container-module__is-opening___5Ot9W",
512
- "is-closing": "webchat-container-module__is-closing___o0hqs"
513
- }, vt = L(O.base, {
514
- variants: {
515
- layout: {
516
- default: O.default
517
- },
518
- position: {
519
- "bottom-right": O["position-bottom-right"],
520
- "bottom-left": O["position-bottom-left"],
521
- "top-right": O["position-top-right"],
522
- "top-left": O["position-top-left"]
523
- },
524
- isOpen: {
525
- true: O["is-open"]
526
- },
527
- isOpening: {
528
- true: O["is-opening"]
529
- },
530
- isClosing: {
531
- true: O["is-closing"]
532
- }
533
- },
534
- defaultVariants: {
535
- layout: "default",
536
- position: "bottom-right"
537
- }
538
- });
539
- function pt(e) {
540
- const { state: t, controller: n } = ee(), a = I(null), { shouldRender: l, containerProps: d, variants: o } = bt(
541
- e,
542
- t,
543
- a
544
- ), {
545
- children: i,
546
- coverRegistry: c,
547
- layout: m,
548
- size: u,
549
- position: r,
550
- ...f
551
- } = e, C = h(
552
- () => n.overlay.close(),
553
- [n]
554
- ), _ = h(
555
- (y) => n.overlay.setTitle(y),
556
- [n]
557
- ), b = h(
558
- (y) => n.overlay.setIcon(y),
559
- [n]
560
- ), v = h(
561
- (y) => n.overlay.setAllowClose(y),
562
- [n]
563
- ), p = h(
564
- (y) => n.overlay.setConfirmClose(y),
565
- [n]
566
- ), M = h(
567
- (y) => n.overlay.sendPayload(y),
568
- [n]
569
- ), x = h(
570
- (y) => n.overlay.navigate(y),
571
- [n]
572
- );
573
- return l ? /* @__PURE__ */ g(
574
- "div",
575
- {
576
- ...d,
577
- ...f,
578
- className: vt(o),
579
- "data-testid": "webchat-container",
580
- children: [
581
- i,
582
- /* @__PURE__ */ s(
583
- ht,
584
- {
585
- overlayState: t.overlayState,
586
- onClose: C,
587
- onSetTitle: _,
588
- onSetIcon: b,
589
- onSetAllowClose: v,
590
- onSetConfirmClose: p,
591
- onSendPayload: M,
592
- onNavigate: x,
593
- coverRegistry: c
594
- }
595
- )
596
- ]
597
- }
598
- ) : null;
599
- }
600
- function Ct(e, t, n) {
601
- const {
602
- title: a = "Chat",
603
- showStatus: l = !0,
604
- showClose: d = !0,
605
- onClose: o,
606
- variant: i = "default",
607
- "aria-label": c,
608
- className: m,
609
- ...u
610
- } = e, r = k(
611
- t.controller.machine,
612
- (b) => b.context.connectionStatus || "disconnected"
613
- ), f = h(() => {
614
- o ? o() : t.controller.close();
615
- }, [o, t.controller]), C = h((b) => {
616
- switch (b) {
617
- case "connected":
618
- return "Online";
619
- case "connecting":
620
- return "Connecting...";
621
- case "disconnected":
622
- return "Offline";
623
- case "unavailable":
624
- return "Connection unstable";
625
- case "error":
626
- return "Connection error";
627
- default:
628
- return "Offline";
629
- }
630
- }, []), _ = l ? C(r) : void 0;
631
- return {
632
- // Header element props
633
- headerProps: {
634
- ...u,
635
- ref: n,
636
- "aria-label": c || `${a} header`
637
- },
638
- // Header content
639
- title: a,
640
- showStatus: l,
641
- statusText: _,
642
- showClose: d,
643
- onClose: f,
644
- connectionStatus: r,
645
- // CSS class variants
646
- variants: {
647
- variant: i,
648
- className: m
649
- }
650
- };
651
- }
652
- const yt = "webchat-header-module__base___VbIWd", wt = "webchat-header-module__minimal___rloXK", D = {
653
- base: yt,
654
- "header-content": "webchat-header-module__header-content___bPP9l",
655
- "header-text": "webchat-header-module__header-text___64Yj9",
656
- "header-title": "webchat-header-module__header-title___QHcHi",
657
- "status-section": "webchat-header-module__status-section___TlGf-",
658
- "status-text": "webchat-header-module__status-text___fTZvQ",
659
- "status-dot": "webchat-header-module__status-dot___rjbA2",
660
- "close-button": "webchat-header-module__close-button___ggJh9",
661
- minimal: wt
662
- }, Nt = L(D.base, {
663
- variants: {
664
- variant: {
665
- default: D.default,
666
- minimal: D.minimal
667
- }
668
- },
669
- defaultVariants: {
670
- variant: "default"
671
- }
672
- });
673
- function Mt(e) {
674
- const { state: t } = ee(), n = I(null), {
675
- headerProps: a,
676
- title: l,
677
- showStatus: d,
678
- statusText: o,
679
- showClose: i,
680
- onClose: c,
681
- connectionStatus: m,
682
- variants: u
683
- } = Ct(e, t, n), { ...r } = e;
684
- return /* @__PURE__ */ s(
685
- "header",
686
- {
687
- ...a,
688
- ...r,
689
- className: Nt(u),
690
- "data-webchat-header": !0,
691
- children: /* @__PURE__ */ g("div", { className: D["header-content"], children: [
692
- /* @__PURE__ */ g("div", { className: D["header-text"], children: [
693
- /* @__PURE__ */ s("h3", { className: D["header-title"], children: l }),
694
- d && /* @__PURE__ */ g("div", { className: D["status-section"], children: [
695
- /* @__PURE__ */ s(
696
- "div",
697
- {
698
- className: D["status-dot"],
699
- "data-status": m,
700
- "aria-hidden": "true"
701
- }
702
- ),
703
- /* @__PURE__ */ s("span", { className: D["status-text"], children: o })
704
- ] })
705
- ] }),
706
- i && /* @__PURE__ */ s(
707
- "button",
708
- {
709
- type: "button",
710
- onClick: c,
711
- className: D["close-button"],
712
- "aria-label": "Close chat",
713
- children: "ร—"
714
- }
715
- )
716
- ] })
717
- }
718
- );
719
- }
720
- function xt(e, t, n) {
721
- const { controller: a } = ee(), {
722
- placeholder: l = "Message...",
723
- disabled: d,
724
- variant: o = "default",
725
- showBranding: i = !0,
726
- "aria-label": c,
727
- className: m,
728
- ...u
729
- } = e, [r, f] = N(""), C = h(
730
- (v) => {
731
- v.preventDefault();
732
- const p = r.trim();
733
- if (p) {
734
- const M = ke.createText({
735
- text: p,
736
- metadata: {
737
- sent_by: oe.User
738
- }
739
- });
740
- a.sendMessage(M), f("");
741
- }
742
- },
743
- [r, a]
744
- ), _ = h(
745
- (v) => {
746
- f(v.target.value);
747
- },
748
- []
749
- ), b = h(
750
- (v) => {
751
- v.key === "Enter" && !v.shiftKey && (v.preventDefault(), C(v));
752
- },
753
- [C]
754
- );
755
- return {
756
- // Input wrapper props
757
- inputProps: {
758
- ...u,
759
- ref: n,
760
- "aria-label": c || l,
761
- "data-webchat-input": ""
762
- },
763
- // Form state and handlers
764
- inputValue: r,
765
- handleSubmit: C,
766
- handleInputChange: _,
767
- handleKeyDown: b,
768
- // Input field props
769
- fieldProps: {
770
- value: r,
771
- onChange: _,
772
- onKeyDown: b,
773
- placeholder: l,
774
- disabled: d,
775
- rows: 1
776
- },
777
- // Submit button props
778
- submitProps: {
779
- type: "submit",
780
- disabled: !r.trim() || d,
781
- "aria-label": "Send message"
782
- },
783
- // CSS class variants
784
- variants: {
785
- variant: o,
786
- className: m
787
- },
788
- showBranding: i
789
- };
790
- }
791
- const It = "webchat-input-module__base___TZXU7", Bt = "webchat-input-module__branding___ReLzJ", q = {
792
- base: It,
793
- "input-form": "webchat-input-module__input-form___GnKc7",
794
- branding: Bt,
795
- "input-field": "webchat-input-module__input-field___c4r26",
796
- "send-button": "webchat-input-module__send-button___iOZ7C"
797
- }, Tt = L(q.base, {
798
- variants: {
799
- variant: {
800
- default: q.default
801
- }
802
- },
803
- defaultVariants: {
804
- variant: "default"
805
- }
806
- });
807
- function Pt(e) {
808
- const { state: t } = ee(), n = I(null), {
809
- inputProps: a,
810
- handleSubmit: l,
811
- fieldProps: d,
812
- submitProps: o,
813
- variants: i,
814
- showBranding: c
815
- } = xt(e, t, n);
816
- return /* @__PURE__ */ g(
817
- "div",
818
- {
819
- ...a,
820
- className: Tt(i),
821
- "data-webchat-input": !0,
822
- children: [
823
- /* @__PURE__ */ s("div", { className: q["input-container"], children: /* @__PURE__ */ g("form", { onSubmit: l, className: q["input-form"], children: [
824
- /* @__PURE__ */ s(
825
- "textarea",
826
- {
827
- ...d,
828
- className: q["input-field"],
829
- "data-testid": "webchat-input-field"
830
- }
831
- ),
832
- /* @__PURE__ */ s(
833
- "button",
834
- {
835
- ...o,
836
- className: q["send-button"],
837
- "data-testid": "webchat-send-button",
838
- children: /* @__PURE__ */ s("span", { children: "โ†’" })
839
- }
840
- )
841
- ] }) }),
842
- c ? /* @__PURE__ */ s("p", { className: q.branding, "data-testid": "webchat-branding", children: "Powered by Hubtype" }) : void 0
843
- ]
844
- }
845
- );
846
- }
847
- const St = "message-avatar-module__container___-EX1c", kt = "message-avatar-module__base___RPKhe", $t = "message-avatar-module__image___rxwYA", Lt = "message-avatar-module__svg___eMikf", Et = "message-avatar-module__fallback___2Xa-W", Dt = "message-avatar-module__name___L20Ht", Ot = "message-avatar-module__small___gBALc", Rt = "message-avatar-module__medium___WSeE1", At = "message-avatar-module__large___a-hNp", Vt = "message-avatar-module__bot___2Bh0Y", zt = "message-avatar-module__agent___MemVD", S = {
848
- container: St,
849
- base: kt,
850
- image: $t,
851
- svg: Lt,
852
- fallback: Et,
853
- name: Dt,
854
- small: Ot,
855
- medium: Rt,
856
- large: At,
857
- bot: Vt,
858
- agent: zt
859
- }, Wt = L(S.base, {
860
- variants: {
861
- variant: {
862
- user: S.user,
863
- bot: S.bot,
864
- system: S.system,
865
- agent: S.agent
866
- },
867
- size: {
868
- small: S.small,
869
- medium: S.medium,
870
- large: S.large
871
- }
872
- },
873
- defaultVariants: { variant: "bot", size: "medium" }
874
- }), me = P(
875
- ({
876
- variant: e = "bot",
877
- size: t = "medium",
878
- src: n,
879
- alt: a,
880
- svg: l,
881
- showName: d = !1,
882
- name: o,
883
- fallback: i,
884
- className: c
885
- }, m) => /* @__PURE__ */ g(
886
- "div",
887
- {
888
- ref: m,
889
- className: S.container,
890
- "data-webchat-message-avatar": !0,
891
- children: [
892
- /* @__PURE__ */ s(
893
- "div",
894
- {
895
- className: Wt({
896
- variant: e,
897
- size: t,
898
- className: c
899
- }),
900
- children: l ? /* @__PURE__ */ s(
901
- "div",
902
- {
903
- className: S.svg,
904
- dangerouslySetInnerHTML: { __html: l },
905
- role: "img",
906
- "aria-label": a || `${e} avatar`
907
- }
908
- ) : n ? /* @__PURE__ */ s(
909
- "img",
910
- {
911
- src: n,
912
- alt: a || `${e} avatar`,
913
- className: S.image
914
- }
915
- ) : /* @__PURE__ */ s("div", { className: S.fallback, children: i || (e === "bot" ? "๐Ÿค–" : e === "agent" ? "๐Ÿ‘จโ€๐Ÿ’ผ" : "๐Ÿ‘ค") })
916
- }
917
- ),
918
- d && o && /* @__PURE__ */ s("div", { className: S.name, children: o })
919
- ]
920
- }
921
- )
922
- ), Ht = "message-bubble-module__base___WzTAP", Ft = "message-bubble-module__bot___PcXmL", Yt = "message-bubble-module__agent___WGfzX", Ut = "message-bubble-module__user___lFMMm", jt = "message-bubble-module__system___e8-FD", Kt = "message-bubble-module__sending___P9nK-", Gt = "message-bubble-module__error___mine7", Y = {
923
- base: Ht,
924
- bot: Ft,
925
- agent: Yt,
926
- user: Ut,
927
- system: jt,
928
- sending: Kt,
929
- error: Gt
930
- }, Xt = L(Y.base, {
931
- variants: {
932
- variant: {
933
- user: Y.user,
934
- bot: Y.bot,
935
- system: Y.system,
936
- agent: Y.agent
937
- },
938
- status: {
939
- sending: Y.sending,
940
- sent: Y.sent,
941
- error: Y.error
942
- }
943
- },
944
- defaultVariants: { variant: "bot", status: "sent" }
945
- }), qt = P(
946
- ({ variant: e = "bot", status: t = "sent", avatarProps: n, children: a, className: l }, d) => /* @__PURE__ */ g(
947
- "div",
948
- {
949
- ref: d,
950
- className: Xt({
951
- variant: e,
952
- status: t,
953
- className: l
954
- }),
955
- "data-webchat-message-bubble": !0,
956
- children: [
957
- n && /* @__PURE__ */ s(me, { ...n }),
958
- a
959
- ]
960
- }
961
- )
962
- ), Qt = "message-info-module__base___yO0Cd", Zt = "message-info-module__timestamp___xwDsF", Jt = "message-info-module__status___jPwtz", es = "message-info-module__top___NK5CY", ts = "message-info-module__bottom___NE4Rs", ss = "message-info-module__bot___xlQbg", ns = "message-info-module__agent___ckeYQ", as = "message-info-module__user___bgEi-", os = "message-info-module__system___MF1CS", A = {
963
- base: Qt,
964
- timestamp: Zt,
965
- status: Jt,
966
- top: es,
967
- bottom: ts,
968
- bot: ss,
969
- agent: ns,
970
- user: as,
971
- system: os
972
- }, rs = L(A.base, {
973
- variants: {
974
- variant: {
975
- user: A.user,
976
- bot: A.bot,
977
- system: A.system,
978
- agent: A.agent
979
- },
980
- position: {
981
- top: A.top,
982
- bottom: A.bottom
983
- }
984
- },
985
- defaultVariants: { variant: "bot", position: "bottom" }
986
- }), ls = P(
987
- ({
988
- variant: e = "bot",
989
- position: t = "bottom",
990
- showTimestamp: n = !0,
991
- timestamp: a,
992
- showStatus: l = !1,
993
- status: d,
994
- avatarProps: o,
995
- className: i,
996
- children: c
997
- }, m) => {
998
- const u = (C) => C ? typeof C == "string" ? C : C.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
999
- hour: "2-digit",
1000
- minute: "2-digit"
1001
- }), r = (C) => {
1002
- switch (C) {
1003
- case "sending":
1004
- return "Sending...";
1005
- case "sent":
1006
- return "Sent";
1007
- case "error":
1008
- return "Failed to send";
1009
- default:
1010
- return "";
1011
- }
1012
- };
1013
- return n || l || c || o ? /* @__PURE__ */ g(
1014
- "div",
1015
- {
1016
- ref: m,
1017
- className: rs({
1018
- variant: e,
1019
- position: t,
1020
- className: i
1021
- }),
1022
- "data-webchat-message-info": !0,
1023
- children: [
1024
- o && /* @__PURE__ */ s(me, { ...o }),
1025
- n && /* @__PURE__ */ s("span", { className: A.timestamp, children: u(a) }),
1026
- l && d && /* @__PURE__ */ s("span", { className: A.status, "data-status": d, children: r(d) })
1027
- ]
1028
- }
1029
- ) : null;
1030
- }
1031
- ), is = "message-module__base___Ki7QB", cs = "message-module__bot___vw-E6", us = "message-module__agent___2wXra", ds = "message-module__user___BSpcY", ms = "message-module__system___-jvsr", U = {
1032
- base: is,
1033
- bot: cs,
1034
- agent: us,
1035
- user: ds,
1036
- system: ms
1037
- }, _s = L(U.base, {
1038
- variants: {
1039
- variant: {
1040
- user: U.user,
1041
- bot: U.bot,
1042
- system: U.system,
1043
- agent: U.agent
1044
- },
1045
- status: {
1046
- sending: U.sending,
1047
- sent: U.sent,
1048
- error: U.error
1049
- }
1050
- },
1051
- defaultVariants: { variant: "bot", status: "sent" }
1052
- });
1053
- function gs(e) {
1054
- const {
1055
- variant: t = "bot",
1056
- status: n = "sent",
1057
- showTimestamp: a = !0,
1058
- showStatus: l = !1,
1059
- avatarConfig: d,
1060
- className: o,
1061
- ...i
1062
- } = e;
1063
- return ne(() => {
1064
- const c = _s({
1065
- variant: t,
1066
- status: n,
1067
- className: o
1068
- });
1069
- if (!d)
1070
- return {
1071
- messageClasses: c,
1072
- bubbleProps: {
1073
- variant: t,
1074
- status: n,
1075
- ...i
1076
- },
1077
- infoProps: {
1078
- variant: t,
1079
- showTimestamp: a,
1080
- showStatus: l,
1081
- ...i
1082
- },
1083
- standaloneAvatarProps: null
1084
- };
1085
- const { placement: m, avatarProps: u } = d;
1086
- switch (m) {
1087
- case "bubble":
1088
- return {
1089
- messageClasses: c,
1090
- bubbleProps: {
1091
- variant: t,
1092
- status: n,
1093
- avatarProps: u,
1094
- ...i
1095
- },
1096
- infoProps: {
1097
- variant: t,
1098
- showTimestamp: a,
1099
- showStatus: l,
1100
- ...i
1101
- },
1102
- standaloneAvatarProps: null
1103
- };
1104
- case "info":
1105
- return {
1106
- messageClasses: c,
1107
- bubbleProps: {
1108
- variant: t,
1109
- status: n,
1110
- ...i
1111
- },
1112
- infoProps: {
1113
- variant: t,
1114
- showTimestamp: a,
1115
- showStatus: l,
1116
- avatarProps: u,
1117
- ...i
1118
- },
1119
- standaloneAvatarProps: null
1120
- };
1121
- case "standalone":
1122
- return {
1123
- messageClasses: c,
1124
- bubbleProps: {
1125
- variant: t,
1126
- status: n,
1127
- ...i
1128
- },
1129
- infoProps: {
1130
- variant: t,
1131
- showTimestamp: a,
1132
- showStatus: l,
1133
- ...i
1134
- },
1135
- standaloneAvatarProps: u
1136
- };
1137
- default:
1138
- return {
1139
- messageClasses: c,
1140
- bubbleProps: {
1141
- variant: t,
1142
- status: n,
1143
- ...i
1144
- },
1145
- infoProps: {
1146
- variant: t,
1147
- showTimestamp: a,
1148
- showStatus: l,
1149
- ...i
1150
- },
1151
- standaloneAvatarProps: null
1152
- };
1153
- }
1154
- }, [
1155
- t,
1156
- n,
1157
- a,
1158
- l,
1159
- d,
1160
- o,
1161
- i
1162
- ]);
1163
- }
1164
- const K = P(
1165
- (e, t) => {
1166
- const { messageClasses: n, bubbleProps: a, infoProps: l, standaloneAvatarProps: d } = gs(e);
1167
- return /* @__PURE__ */ g(
1168
- "div",
1169
- {
1170
- ref: t,
1171
- className: n,
1172
- "data-testid": `webchat-message-${e.variant || "bot"}`,
1173
- children: [
1174
- d && /* @__PURE__ */ s(me, { ...d }),
1175
- /* @__PURE__ */ s(qt, { ...a, children: e.children }),
1176
- /* @__PURE__ */ s(ls, { ...l })
1177
- ]
1178
- }
1179
- );
1180
- }
1181
- ), hs = "audio-message-module__audioMessageBase___Xye8T", bs = "audio-message-module__audioContainer___7ehUa", fs = "audio-message-module__audioControls___bPgRS", vs = "audio-message-module__playButton___zFi0C", ps = "audio-message-module__isPlaying___WQu2R", Cs = "audio-message-module__playIcon___X2gd4", ys = "audio-message-module__audioInfo___YeYsJ", ws = "audio-message-module__timeDisplay___zhXjk", Ns = "audio-message-module__progressContainer___4gzGk", Ms = "audio-message-module__progressBar___TwMvE", E = {
1182
- audioMessageBase: hs,
1183
- audioContainer: bs,
1184
- audioControls: fs,
1185
- playButton: vs,
1186
- isPlaying: ps,
1187
- playIcon: Cs,
1188
- audioInfo: ys,
1189
- timeDisplay: ws,
1190
- progressContainer: Ns,
1191
- progressBar: Ms
1192
- }, xs = P(
1193
- ({
1194
- src: e,
1195
- alt: t = "Audio message",
1196
- onAudioLoad: n,
1197
- onPlay: a,
1198
- onPause: l,
1199
- onEnded: d,
1200
- className: o,
1201
- ...i
1202
- }, c) => {
1203
- const m = I(null), [u, r] = N(!1), [f, C] = N(null), [_, b] = N(0), v = h(() => {
1204
- m.current && (C(m.current.duration), n?.());
1205
- }, [n]), p = h(() => {
1206
- m.current && b(m.current.currentTime);
1207
- }, []), M = h(() => {
1208
- r(!0), a?.();
1209
- }, [a]), x = h(() => {
1210
- r(!1), l?.();
1211
- }, [l]), y = h(() => {
1212
- r(!1), b(0), d?.();
1213
- }, [d]), z = h(() => {
1214
- m.current && (u ? m.current.pause() : m.current.play());
1215
- }, [u]), W = h(
1216
- (H) => {
1217
- const Z = parseFloat(H.target.value);
1218
- m.current && (m.current.currentTime = Z, b(Z));
1219
- },
1220
- []
1221
- ), G = h((H) => {
1222
- const Z = Math.floor(H / 60), ce = Math.floor(H % 60);
1223
- return `${Z}:${ce.toString().padStart(2, "0")}`;
1224
- }, []);
1225
- return /* @__PURE__ */ s(
1226
- K,
1227
- {
1228
- ref: c,
1229
- className: $(E.audioMessageBase, o),
1230
- ...i,
1231
- children: /* @__PURE__ */ g("div", { className: E.audioContainer, children: [
1232
- /* @__PURE__ */ s(
1233
- "audio",
1234
- {
1235
- ref: m,
1236
- src: e,
1237
- onLoadedMetadata: v,
1238
- onTimeUpdate: p,
1239
- onPlay: M,
1240
- onPause: x,
1241
- onEnded: y,
1242
- preload: "metadata"
1243
- }
1244
- ),
1245
- /* @__PURE__ */ g("div", { className: E.audioControls, children: [
1246
- /* @__PURE__ */ s(
1247
- "button",
1248
- {
1249
- type: "button",
1250
- className: $(E.playButton, u && E.isPlaying),
1251
- onClick: z,
1252
- "aria-label": u ? "Pause audio" : "Play audio",
1253
- children: u ? /* @__PURE__ */ g(
1254
- "svg",
1255
- {
1256
- className: E.playIcon,
1257
- viewBox: "0 0 24 24",
1258
- fill: "currentColor",
1259
- children: [
1260
- /* @__PURE__ */ s("rect", { x: "6", y: "4", width: "4", height: "16" }),
1261
- /* @__PURE__ */ s("rect", { x: "14", y: "4", width: "4", height: "16" })
1262
- ]
1263
- }
1264
- ) : /* @__PURE__ */ s(
1265
- "svg",
1266
- {
1267
- className: E.playIcon,
1268
- viewBox: "0 0 24 24",
1269
- fill: "currentColor",
1270
- children: /* @__PURE__ */ s("polygon", { points: "5,3 19,12 5,21" })
1271
- }
1272
- )
1273
- }
1274
- ),
1275
- /* @__PURE__ */ g("div", { className: E.audioInfo, children: [
1276
- /* @__PURE__ */ g("div", { className: E.timeDisplay, children: [
1277
- G(_),
1278
- " /",
1279
- " ",
1280
- f ? G(f) : "--:--"
1281
- ] }),
1282
- /* @__PURE__ */ s("div", { className: E.progressContainer, children: /* @__PURE__ */ s(
1283
- "input",
1284
- {
1285
- type: "range",
1286
- min: "0",
1287
- max: f || 0,
1288
- value: _,
1289
- onChange: W,
1290
- className: E.progressBar,
1291
- disabled: !f
1292
- }
1293
- ) })
1294
- ] })
1295
- ] })
1296
- ] })
1297
- }
1298
- );
1299
- }
1300
- ), Is = "button-message-module__buttonMessageBase___ZYxyt", Bs = "button-message-module__buttonMessageContainer___HZsQh", Ts = "button-message-module__buttonGrid___KQjrj", Ps = "button-message-module__buttonText___8-9nw", ae = {
1301
- buttonMessageBase: Is,
1302
- buttonMessageContainer: Bs,
1303
- buttonGrid: Ts,
1304
- buttonText: Ps
1305
- }, Ss = P(
1306
- ({ text: e, buttons: t, buttonsPerRow: n = 2, className: a, ...l }, d) => {
1307
- const o = Math.min(n, t.length), i = (c) => {
1308
- "value" in c && t.find(
1309
- (u) => u.text === c.text && u.value === c.value
1310
- )?.onClick?.(c.value);
1311
- };
1312
- return /* @__PURE__ */ s(
1313
- K,
1314
- {
1315
- ref: d,
1316
- className: $(ae.buttonMessageBase, a),
1317
- ...l,
1318
- children: /* @__PURE__ */ g("div", { className: ae.buttonMessageContainer, children: [
1319
- e && /* @__PURE__ */ s("div", { className: ae.buttonText, children: e }),
1320
- /* @__PURE__ */ s(
1321
- "div",
1322
- {
1323
- className: ae.buttonGrid,
1324
- style: {
1325
- gridTemplateColumns: `repeat(${o}, 1fr)`
1326
- },
1327
- children: t.map((c, m) => /* @__PURE__ */ s(
1328
- le,
1329
- {
1330
- text: c.text,
1331
- disabled: c.disabled,
1332
- button: { text: c.text, value: c.value },
1333
- onClick: i,
1334
- variant: "secondary"
1335
- },
1336
- m
1337
- ))
1338
- }
1339
- )
1340
- ] })
1341
- }
1342
- );
1343
- }
1344
- ), ks = "carousel-message-module__carouselMessageBase___yV-Nd", $s = "carousel-message-module__carouselContainer___32NGN", Ls = "carousel-message-module__carouselElement___6Cucf", Es = "carousel-message-module__imageContainer___-NYcV", Ds = "carousel-message-module__elementImage___TEjVf", Os = "carousel-message-module__elementContent___fQqqZ", Rs = "carousel-message-module__elementTitle___sUPzb", As = "carousel-message-module__elementSubtitle___7yW9w", Vs = "carousel-message-module__buttonContainer___lPydV", R = {
1345
- carouselMessageBase: ks,
1346
- carouselContainer: $s,
1347
- carouselElement: Ls,
1348
- imageContainer: Es,
1349
- elementImage: Ds,
1350
- elementContent: Os,
1351
- elementTitle: Rs,
1352
- elementSubtitle: As,
1353
- buttonContainer: Vs
1354
- }, zs = P(
1355
- ({ elements: e, onButtonClick: t, onElementImageLoad: n, className: a, ...l }, d) => {
1356
- const o = h(
1357
- (c) => {
1358
- "type" in c && t?.(c);
1359
- },
1360
- [t]
1361
- ), i = h(
1362
- (c) => {
1363
- n?.(c);
1364
- },
1365
- [n]
1366
- );
1367
- return /* @__PURE__ */ s(
1368
- K,
1369
- {
1370
- ref: d,
1371
- className: $(R.carouselMessageBase, a),
1372
- ...l,
1373
- children: /* @__PURE__ */ s("div", { className: R.carouselContainer, children: e.map((c, m) => /* @__PURE__ */ g(
1374
- "div",
1375
- {
1376
- className: R.carouselElement,
1377
- children: [
1378
- /* @__PURE__ */ s("div", { className: R.imageContainer, children: /* @__PURE__ */ s(
1379
- "img",
1380
- {
1381
- src: c.image,
1382
- alt: c.title,
1383
- className: R.elementImage,
1384
- onLoad: () => i(m)
1385
- }
1386
- ) }),
1387
- /* @__PURE__ */ g("div", { className: R.elementContent, children: [
1388
- /* @__PURE__ */ s("h3", { className: R.elementTitle, children: c.title }),
1389
- c.subtitle && /* @__PURE__ */ s("p", { className: R.elementSubtitle, children: c.subtitle }),
1390
- c.buttons.map((u, r) => /* @__PURE__ */ s(
1391
- "div",
1392
- {
1393
- className: R.buttonContainer,
1394
- children: /* @__PURE__ */ s(
1395
- le,
1396
- {
1397
- text: u.title,
1398
- button: u,
1399
- onClick: o,
1400
- variant: "secondary"
1401
- }
1402
- )
1403
- },
1404
- `${c.title}-${c.subtitle || ""}-${u.title}-${r}`
1405
- ))
1406
- ] })
1407
- ]
1408
- },
1409
- `${c.title}-${c.subtitle || ""}-${m}`
1410
- )) })
1411
- }
1412
- );
1413
- }
1414
- ), Ws = "document-message-module__documentMessageBase___hqh5-", Hs = "document-message-module__documentContainer___AYtOi", Fs = "document-message-module__documentInfo___UiSqy", Ys = "document-message-module__documentIcon___Ti2QJ", Us = "document-message-module__documentDetails___XDlt9", js = "document-message-module__documentName___UsAgR", Ks = "document-message-module__documentMeta___5QVnf", Gs = "document-message-module__fileSize___qOdcA", Xs = "document-message-module__fileType___7EdaH", qs = "document-message-module__documentActions___7m0QP", Qs = "document-message-module__previewButton___gluoY", Zs = "document-message-module__downloadButton___J6HuC", Js = "document-message-module__previewIcon___7HMaf", en = "document-message-module__downloadIcon___Hg4tV", B = {
1415
- documentMessageBase: Ws,
1416
- documentContainer: Hs,
1417
- documentInfo: Fs,
1418
- documentIcon: Ys,
1419
- documentDetails: Us,
1420
- documentName: js,
1421
- documentMeta: Ks,
1422
- fileSize: Gs,
1423
- fileType: Xs,
1424
- documentActions: qs,
1425
- previewButton: Qs,
1426
- downloadButton: Zs,
1427
- previewIcon: Js,
1428
- downloadIcon: en
1429
- }, tn = P(
1430
- ({
1431
- src: e,
1432
- filename: t,
1433
- mimeType: n,
1434
- size: a,
1435
- alt: l = "Document",
1436
- onDocumentLoad: d,
1437
- onDownload: o,
1438
- className: i,
1439
- ...c
1440
- }, m) => {
1441
- const u = h(() => {
1442
- d?.();
1443
- }, [d]), r = h(() => {
1444
- const _ = document.createElement("a");
1445
- _.href = e, _.download = t || "document", _.target = "_blank", _.rel = "noopener noreferrer", document.body.appendChild(_), _.click(), document.body.removeChild(_), o?.();
1446
- }, [e, t, o]), f = h((_) => {
1447
- if (!_) return "Unknown size";
1448
- const b = ["B", "KB", "MB", "GB"];
1449
- let v = _, p = 0;
1450
- for (; v >= 1024 && p < b.length - 1; )
1451
- v /= 1024, p++;
1452
- return `${v.toFixed(1)} ${b[p]}`;
1453
- }, []), C = h((_) => _ ? _.startsWith("image/") ? "๐Ÿ–ผ๏ธ" : _.startsWith("video/") ? "๐ŸŽฅ" : _.startsWith("audio/") ? "๐ŸŽต" : _.includes("pdf") ? "๐Ÿ“•" : _.includes("word") || _.includes("document") ? "๐Ÿ“" : _.includes("excel") || _.includes("spreadsheet") ? "๐Ÿ“Š" : _.includes("powerpoint") || _.includes("presentation") ? "๐Ÿ“ˆ" : _.includes("zip") || _.includes("archive") ? "๐Ÿ“ฆ" : (_.includes("text/"), "๐Ÿ“„") : "๐Ÿ“„", []);
1454
- return /* @__PURE__ */ s(
1455
- K,
1456
- {
1457
- ref: m,
1458
- className: $(B.documentMessageBase, i),
1459
- ...c,
1460
- children: /* @__PURE__ */ g("div", { className: B.documentContainer, children: [
1461
- /* @__PURE__ */ g("div", { className: B.documentInfo, children: [
1462
- /* @__PURE__ */ s("div", { className: B.documentIcon, children: C(n) }),
1463
- /* @__PURE__ */ g("div", { className: B.documentDetails, children: [
1464
- /* @__PURE__ */ s("div", { className: B.documentName, children: t || "Document" }),
1465
- /* @__PURE__ */ g("div", { className: B.documentMeta, children: [
1466
- /* @__PURE__ */ s("span", { className: B.fileSize, children: f(a) }),
1467
- n && /* @__PURE__ */ s("span", { className: B.fileType, children: n.split("/")[1]?.toUpperCase() || n })
1468
- ] })
1469
- ] })
1470
- ] }),
1471
- /* @__PURE__ */ g("div", { className: B.documentActions, children: [
1472
- /* @__PURE__ */ g(
1473
- "button",
1474
- {
1475
- type: "button",
1476
- className: B.previewButton,
1477
- onClick: u,
1478
- "aria-label": "Preview document",
1479
- children: [
1480
- /* @__PURE__ */ s(
1481
- "svg",
1482
- {
1483
- className: B.previewIcon,
1484
- viewBox: "0 0 24 24",
1485
- fill: "currentColor",
1486
- children: /* @__PURE__ */ s("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" })
1487
- }
1488
- ),
1489
- "Preview"
1490
- ]
1491
- }
1492
- ),
1493
- /* @__PURE__ */ g(
1494
- "button",
1495
- {
1496
- type: "button",
1497
- className: B.downloadButton,
1498
- onClick: r,
1499
- "aria-label": "Download document",
1500
- children: [
1501
- /* @__PURE__ */ s(
1502
- "svg",
1503
- {
1504
- className: B.downloadIcon,
1505
- viewBox: "0 0 24 24",
1506
- fill: "currentColor",
1507
- children: /* @__PURE__ */ s("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
1508
- }
1509
- ),
1510
- "Download"
1511
- ]
1512
- }
1513
- )
1514
- ] })
1515
- ] })
1516
- }
1517
- );
1518
- }
1519
- ), sn = "image-message-module__imageMessageBase___FDwNN", nn = "image-message-module__messageImage___JnXFb", be = {
1520
- imageMessageBase: sn,
1521
- messageImage: nn
1522
- }, an = P(
1523
- ({ src: e, alt: t = "Attached image", onImageLoad: n, className: a, ...l }, d) => {
1524
- const o = h(() => {
1525
- n?.();
1526
- }, [n]), i = h(() => {
1527
- n?.();
1528
- }, [n]);
1529
- return /* @__PURE__ */ s(
1530
- K,
1531
- {
1532
- ref: d,
1533
- className: $(be.imageMessageBase, a),
1534
- ...l,
1535
- children: /* @__PURE__ */ s(
1536
- "img",
1537
- {
1538
- src: e,
1539
- alt: t,
1540
- className: be.messageImage,
1541
- onLoad: o,
1542
- onError: i
1543
- }
1544
- )
1545
- }
1546
- );
1547
- }
1548
- ), on = "location-message-module__locationMessageBase___rY3d-", rn = "location-message-module__locationContainer___9Rukw", ln = "location-message-module__locationContent___2BRdV", cn = "location-message-module__locationIcon___rjObu", un = "location-message-module__locationInfo___NqVsR", dn = "location-message-module__locationTitle___RpUjH", mn = "location-message-module__locationCoordinates___lLfuf", _n = "location-message-module__locationLink___Zq2I2", j = {
1549
- locationMessageBase: on,
1550
- locationContainer: rn,
1551
- locationContent: ln,
1552
- locationIcon: cn,
1553
- locationInfo: un,
1554
- locationTitle: dn,
1555
- locationCoordinates: mn,
1556
- locationLink: _n
1557
- }, gn = P(
1558
- ({
1559
- latitude: e,
1560
- longitude: t,
1561
- alt: n = "Location coordinates",
1562
- onLocationLoad: a,
1563
- className: l,
1564
- ...d
1565
- }, o) => {
1566
- const i = h(() => {
1567
- a?.();
1568
- }, [a]), c = `https://www.google.com/maps?q=${e},${t}`;
1569
- return /* @__PURE__ */ s(
1570
- K,
1571
- {
1572
- ref: o,
1573
- className: $(j.locationMessageBase, l),
1574
- ...d,
1575
- children: /* @__PURE__ */ g("div", { className: j.locationContainer, children: [
1576
- /* @__PURE__ */ g("div", { className: j.locationContent, children: [
1577
- /* @__PURE__ */ s("div", { className: j.locationIcon, children: /* @__PURE__ */ s(
1578
- "svg",
1579
- {
1580
- width: "24",
1581
- height: "24",
1582
- viewBox: "0 0 24 24",
1583
- fill: "none",
1584
- xmlns: "http://www.w3.org/2000/svg",
1585
- "aria-hidden": "true",
1586
- children: /* @__PURE__ */ s(
1587
- "path",
1588
- {
1589
- d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
1590
- fill: "currentColor"
1591
- }
1592
- )
1593
- }
1594
- ) }),
1595
- /* @__PURE__ */ g("div", { className: j.locationInfo, children: [
1596
- /* @__PURE__ */ s("div", { className: j.locationTitle, children: "Location" }),
1597
- /* @__PURE__ */ g("div", { className: j.locationCoordinates, children: [
1598
- e.toFixed(6),
1599
- ", ",
1600
- t.toFixed(6)
1601
- ] })
1602
- ] })
1603
- ] }),
1604
- /* @__PURE__ */ g(
1605
- "a",
1606
- {
1607
- href: c,
1608
- target: "_blank",
1609
- rel: "noopener noreferrer",
1610
- className: j.locationLink,
1611
- onClick: i,
1612
- "aria-label": `Open location in Google Maps: ${e}, ${t}`,
1613
- children: [
1614
- /* @__PURE__ */ s("span", { children: "View on Map" }),
1615
- /* @__PURE__ */ s(
1616
- "svg",
1617
- {
1618
- width: "16",
1619
- height: "16",
1620
- viewBox: "0 0 24 24",
1621
- fill: "none",
1622
- xmlns: "http://www.w3.org/2000/svg",
1623
- "aria-hidden": "true",
1624
- children: /* @__PURE__ */ s(
1625
- "path",
1626
- {
1627
- d: "M7 17L17 7M17 7H7M17 7V17",
1628
- stroke: "currentColor",
1629
- strokeWidth: "2",
1630
- strokeLinecap: "round",
1631
- strokeLinejoin: "round"
1632
- }
1633
- )
1634
- }
1635
- )
1636
- ]
1637
- }
1638
- )
1639
- ] })
1640
- }
1641
- );
1642
- }
1643
- ), hn = "text-message-module__textMessageBase___p4r-t", bn = "text-message-module__textContent___yRb8d", fe = {
1644
- textMessageBase: hn,
1645
- textContent: bn
1646
- }, fn = P(
1647
- ({ text: e, className: t, ...n }, a) => /* @__PURE__ */ s(
1648
- K,
1649
- {
1650
- ref: a,
1651
- className: $(fe.textMessageBase, t),
1652
- ...n,
1653
- children: /* @__PURE__ */ s("div", { className: fe.textContent, children: e })
1654
- }
1655
- )
1656
- ), vn = "video-message-module__videoMessageBase___RX3Qk", pn = "video-message-module__videoContainer___ctZrR", Cn = "video-message-module__videoElement___dYbDh", yn = "video-message-module__videoControls___K4Xdt", wn = "video-message-module__controlsTop___6NCn9", Nn = "video-message-module__controlsBottom___E3II8", Mn = "video-message-module__controlsLeft___feB6m", xn = "video-message-module__controlsRight___9Wtf-", In = "video-message-module__playButton___8LVrt", Bn = "video-message-module__isPlaying___z4Tf5", Tn = "video-message-module__playIcon___ert2Q", Pn = "video-message-module__timeDisplay___Rzmtn", Sn = "video-message-module__progressContainer___U81jI", kn = "video-message-module__progressBar___vX-3m", $n = "video-message-module__volumeContainer___-mIlN", Ln = "video-message-module__volumeIcon___x18vs", En = "video-message-module__volumeSlider___jAwcn", w = {
1657
- videoMessageBase: vn,
1658
- videoContainer: pn,
1659
- videoElement: Cn,
1660
- videoControls: yn,
1661
- controlsTop: wn,
1662
- controlsBottom: Nn,
1663
- controlsLeft: Mn,
1664
- controlsRight: xn,
1665
- playButton: In,
1666
- isPlaying: Bn,
1667
- playIcon: Tn,
1668
- timeDisplay: Pn,
1669
- progressContainer: Sn,
1670
- progressBar: kn,
1671
- volumeContainer: $n,
1672
- volumeIcon: Ln,
1673
- volumeSlider: En
1674
- }, Dn = P(
1675
- ({
1676
- src: e,
1677
- alt: t = "Video message",
1678
- onVideoLoad: n,
1679
- onPlay: a,
1680
- onPause: l,
1681
- onEnded: d,
1682
- className: o,
1683
- ...i
1684
- }, c) => {
1685
- const m = I(null), [u, r] = N(!1), [f, C] = N(null), [_, b] = N(0), [v, p] = N(1), [M, x] = N(!1), y = h(() => {
1686
- m.current && (C(m.current.duration), n?.());
1687
- }, [n]), z = h(() => {
1688
- m.current && b(m.current.currentTime);
1689
- }, []), W = h(() => {
1690
- r(!0), a?.();
1691
- }, [a]), G = h(() => {
1692
- r(!1), l?.();
1693
- }, [l]), H = h(() => {
1694
- r(!1), b(0), d?.();
1695
- }, [d]), Z = h(() => {
1696
- m.current && (u ? m.current.pause() : m.current.play());
1697
- }, [u]), ce = h(
1698
- (F) => {
1699
- const X = parseFloat(F.target.value);
1700
- m.current && (m.current.currentTime = X, b(X));
1701
- },
1702
- []
1703
- ), Me = h(
1704
- (F) => {
1705
- const X = parseFloat(F.target.value);
1706
- m.current && (m.current.volume = X, p(X));
1707
- },
1708
- []
1709
- ), xe = h(() => {
1710
- x((F) => !F);
1711
- }, []), _e = h((F) => {
1712
- const X = Math.floor(F / 60), Ie = Math.floor(F % 60);
1713
- return `${X}:${Ie.toString().padStart(2, "0")}`;
1714
- }, []);
1715
- return /* @__PURE__ */ s(
1716
- K,
1717
- {
1718
- ref: c,
1719
- className: $(w.videoMessageBase, o),
1720
- ...i,
1721
- children: /* @__PURE__ */ g("div", { className: w.videoContainer, children: [
1722
- /* @__PURE__ */ s(
1723
- "video",
1724
- {
1725
- ref: m,
1726
- src: e,
1727
- onLoadedMetadata: y,
1728
- onTimeUpdate: z,
1729
- onPlay: W,
1730
- onPause: G,
1731
- onEnded: H,
1732
- onClick: xe,
1733
- className: w.videoElement,
1734
- preload: "metadata",
1735
- poster: ""
1736
- }
1737
- ),
1738
- M && /* @__PURE__ */ g("div", { className: w.videoControls, children: [
1739
- /* @__PURE__ */ s("div", { className: w.controlsTop, children: /* @__PURE__ */ s("div", { className: w.progressContainer, children: /* @__PURE__ */ s(
1740
- "input",
1741
- {
1742
- type: "range",
1743
- min: "0",
1744
- max: f || 0,
1745
- value: _,
1746
- onChange: ce,
1747
- className: w.progressBar,
1748
- disabled: !f
1749
- }
1750
- ) }) }),
1751
- /* @__PURE__ */ g("div", { className: w.controlsBottom, children: [
1752
- /* @__PURE__ */ g("div", { className: w.controlsLeft, children: [
1753
- /* @__PURE__ */ s(
1754
- "button",
1755
- {
1756
- type: "button",
1757
- className: $(
1758
- w.playButton,
1759
- u && w.isPlaying
1760
- ),
1761
- onClick: Z,
1762
- "aria-label": u ? "Pause video" : "Play video",
1763
- children: u ? /* @__PURE__ */ g(
1764
- "svg",
1765
- {
1766
- className: w.playIcon,
1767
- viewBox: "0 0 24 24",
1768
- fill: "currentColor",
1769
- children: [
1770
- /* @__PURE__ */ s("rect", { x: "6", y: "4", width: "4", height: "16" }),
1771
- /* @__PURE__ */ s("rect", { x: "14", y: "4", width: "4", height: "16" })
1772
- ]
1773
- }
1774
- ) : /* @__PURE__ */ s(
1775
- "svg",
1776
- {
1777
- className: w.playIcon,
1778
- viewBox: "0 0 24 24",
1779
- fill: "currentColor",
1780
- children: /* @__PURE__ */ s("polygon", { points: "5,3 19,12 5,21" })
1781
- }
1782
- )
1783
- }
1784
- ),
1785
- /* @__PURE__ */ g("div", { className: w.timeDisplay, children: [
1786
- _e(_),
1787
- " /",
1788
- " ",
1789
- f ? _e(f) : "--:--"
1790
- ] })
1791
- ] }),
1792
- /* @__PURE__ */ s("div", { className: w.controlsRight, children: /* @__PURE__ */ g("div", { className: w.volumeContainer, children: [
1793
- /* @__PURE__ */ s(
1794
- "svg",
1795
- {
1796
- className: w.volumeIcon,
1797
- viewBox: "0 0 24 24",
1798
- fill: "currentColor",
1799
- children: v === 0 ? /* @__PURE__ */ s("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) : v < 0.5 ? /* @__PURE__ */ s("path", { d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" }) : /* @__PURE__ */ s("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" })
1800
- }
1801
- ),
1802
- /* @__PURE__ */ s(
1803
- "input",
1804
- {
1805
- type: "range",
1806
- min: "0",
1807
- max: "1",
1808
- step: "0.1",
1809
- value: v,
1810
- onChange: Me,
1811
- className: w.volumeSlider
1812
- }
1813
- )
1814
- ] }) })
1815
- ] })
1816
- ] })
1817
- ] })
1818
- }
1819
- );
1820
- }
1821
- );
1822
- function On({
1823
- messageActor: e,
1824
- baseProps: t = {}
1825
- }) {
1826
- const { message: n, status: a } = k(e, (i) => ({
1827
- message: i.context?.message,
1828
- status: i.context?.status
1829
- })), l = k(
1830
- e,
1831
- (i) => i.can?.({ type: "RETRY" }) ?? !1
1832
- ), d = ne(() => {
1833
- if (!n)
1834
- return {
1835
- ...t,
1836
- variant: "bot",
1837
- status: "sent",
1838
- showTimestamp: !0,
1839
- isClickable: !1
1840
- };
1841
- const i = (() => {
1842
- switch (a) {
1843
- case "unsent":
1844
- return "sending";
1845
- case "sent":
1846
- return "sent";
1847
- case "failed":
1848
- return "error";
1849
- default:
1850
- return "sent";
1851
- }
1852
- })(), c = (() => {
1853
- switch (n.sent_by) {
1854
- case oe.User:
1855
- return "user";
1856
- case oe.Bot:
1857
- return "bot";
1858
- case oe.Agent:
1859
- return "agent";
1860
- default:
1861
- return "user";
1862
- }
1863
- })(), m = l ? () => e.send({ type: "RETRY" }) : void 0, u = c === "bot" ? t.botAvatarConfig ?? void 0 : c === "agent" ? t.agentAvatarConfig ?? void 0 : void 0;
1864
- return {
1865
- ...t,
1866
- variant: c,
1867
- status: i,
1868
- // timestamp: message.timestamp ? new Date(message.timestamp) : undefined,
1869
- showTimestamp: !0,
1870
- isClickable: l,
1871
- onPress: m,
1872
- avatarConfig: u
1873
- // Pre-computed, just pass it through
1874
- };
1875
- }, [n, a, l, e, t]), o = ne(
1876
- () => (i) => {
1877
- e.send({
1878
- type: "BUTTON_CLICKED",
1879
- button: i
1880
- });
1881
- },
1882
- [e]
1883
- );
1884
- return {
1885
- message: n,
1886
- status: a,
1887
- canRetry: l,
1888
- messageProps: d,
1889
- handleButtonClick: o
1890
- };
1891
- }
1892
- const Rn = ({
1893
- messageActor: e,
1894
- customMessageRenderer: t,
1895
- baseProps: n = {
1896
- customMessages: {}
1897
- },
1898
- onContentLoad: a,
1899
- onImageLoadStart: l,
1900
- onImageLoadComplete: d
1901
- }) => {
1902
- const { message: o, messageProps: i, handleButtonClick: c } = On({
1903
- messageActor: e,
1904
- baseProps: n
1905
- });
1906
- return T(() => {
1907
- if (o && o.type === "image") {
1908
- const u = `img-${o.id}-${o.data}`;
1909
- l?.(u);
1910
- }
1911
- }, [o, l]), o ? /* @__PURE__ */ s(ve, { children: (() => {
1912
- const { id: u } = o;
1913
- if (o.isText())
1914
- return /* @__PURE__ */ s(fn, { ...i, text: o.data.text }, u);
1915
- if (o.isAudio())
1916
- return /* @__PURE__ */ s(
1917
- xs,
1918
- {
1919
- ...i,
1920
- src: o.data.attachment_url ?? ""
1921
- },
1922
- u
1923
- );
1924
- if (o.isVideo())
1925
- return /* @__PURE__ */ s(
1926
- Dn,
1927
- {
1928
- ...i,
1929
- src: o.data.attachment_url ?? "",
1930
- alt: "Video",
1931
- onVideoLoad: () => {
1932
- a?.();
1933
- }
1934
- },
1935
- u
1936
- );
1937
- if (o.isDocument())
1938
- return /* @__PURE__ */ s(
1939
- tn,
1940
- {
1941
- ...i,
1942
- src: o.data.attachment_url ?? "",
1943
- alt: "Document",
1944
- onDocumentLoad: () => {
1945
- a?.();
1946
- }
1947
- },
1948
- u
1949
- );
1950
- if (o.isLocation())
1951
- return /* @__PURE__ */ s(
1952
- gn,
1953
- {
1954
- ...i,
1955
- latitude: o.data.latitude,
1956
- longitude: o.data.longitude,
1957
- alt: "Location coordinates",
1958
- onLocationLoad: () => {
1959
- a?.();
1960
- }
1961
- },
1962
- u
1963
- );
1964
- if (o.isImage()) {
1965
- const r = `img-${u}-${o.data.attachment_url ?? ""}`;
1966
- return /* @__PURE__ */ s(
1967
- an,
1968
- {
1969
- ...i,
1970
- src: o.data.attachment_url ?? "",
1971
- alt: "Image",
1972
- onImageLoad: () => {
1973
- a?.(), d?.(r);
1974
- }
1975
- },
1976
- u
1977
- );
1978
- }
1979
- return o.isButtonMessage() ? /* @__PURE__ */ s(
1980
- Ss,
1981
- {
1982
- ...i,
1983
- text: o.data.text,
1984
- buttons: o.data.buttons?.map(
1985
- (r) => ({
1986
- text: r.title,
1987
- value: r.payload || r.title,
1988
- disabled: !1,
1989
- onClick: () => {
1990
- c(r);
1991
- }
1992
- })
1993
- )
1994
- },
1995
- u
1996
- ) : o.isCarousel() ? /* @__PURE__ */ s(
1997
- zs,
1998
- {
1999
- ...i,
2000
- elements: o.data.elements.map((r, f) => ({
2001
- id: `${u}-${f}`,
2002
- title: r.title,
2003
- subtitle: r.subtitle,
2004
- image: r.image,
2005
- buttons: r.buttons
2006
- })),
2007
- onButtonClick: (r) => {
2008
- c(r);
2009
- },
2010
- onElementImageLoad: () => {
2011
- a?.();
2012
- }
2013
- },
2014
- u
2015
- ) : o.isCustom() ? t ? t(o, o.data, c) : (console.warn(
2016
- `Custom message renderer not provided for message type: ${o.type}`
2017
- ), null) : (console.warn(`Unknown message type: ${o.type}`), null);
2018
- })() }) : null;
2019
- }, An = "typing-indicator-module__typingIndicator___2hMSH", Vn = "typing-indicator-module__typingDots___Sy7xC", zn = "typing-indicator-module__typingDot___SdRIv", se = {
2020
- typingIndicator: An,
2021
- typingDots: Vn,
2022
- typingDot: zn
2023
- }, Wn = ({
2024
- isVisible: e = !1,
2025
- className: t
2026
- }) => e ? /* @__PURE__ */ s(
2027
- "div",
2028
- {
2029
- "data-testid": "typing-indicator",
2030
- className: `${se.typingIndicator} ${t || ""}`,
2031
- children: /* @__PURE__ */ g("div", { className: se.typingDots, children: [
2032
- /* @__PURE__ */ s("div", { className: se.typingDot }),
2033
- /* @__PURE__ */ s("div", { className: se.typingDot }),
2034
- /* @__PURE__ */ s("div", { className: se.typingDot })
2035
- ] })
2036
- }
2037
- ) : null, Hn = 24;
2038
- function Fn(e) {
2039
- const t = I(null), n = I(null), [a, l] = N(0), [d, o] = N(0), [i, c] = N(!1), m = I(), u = I(), r = h(() => {
2040
- const _ = e.current, b = t.current;
2041
- if (!_ || !b) return;
2042
- const { scrollHeight: v, clientHeight: p, scrollTop: M } = _;
2043
- if (v <= p) {
2044
- c(!1);
2045
- return;
2046
- }
2047
- const x = b.clientHeight, y = p / v, z = Math.max(y * x, Hn), W = v - p, G = W > 0 ? M / W * (x - z) : 0;
2048
- l(z), o(G), c(!0), clearTimeout(m.current), m.current = setTimeout(() => c(!1), 1200);
2049
- }, [e]);
2050
- T(() => {
2051
- const _ = e.current;
2052
- if (!_) return;
2053
- const b = () => r();
2054
- _.addEventListener("scroll", b, { passive: !0 });
2055
- const v = new ResizeObserver(() => r());
2056
- v.observe(_);
2057
- const p = new MutationObserver(() => r());
2058
- return p.observe(_, { childList: !0, subtree: !0 }), r(), () => {
2059
- _.removeEventListener("scroll", b), v.disconnect(), p.disconnect(), clearTimeout(m.current);
2060
- };
2061
- }, [e, r]);
2062
- const f = h(
2063
- (_) => {
2064
- _.preventDefault(), _.stopPropagation();
2065
- const b = e.current;
2066
- if (!b) return;
2067
- u.current = { startY: _.clientY, startScrollTop: b.scrollTop };
2068
- const v = (M) => {
2069
- const x = u.current, y = t.current;
2070
- if (!x || !b || !y) return;
2071
- const z = M.clientY - x.startY, W = y.clientHeight, H = (b.scrollHeight - b.clientHeight) / (W - a);
2072
- b.scrollTop = x.startScrollTop + z * H;
2073
- }, p = () => {
2074
- u.current = void 0, document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", p);
2075
- };
2076
- document.addEventListener("mousemove", v), document.addEventListener("mouseup", p);
2077
- },
2078
- [e, a]
2079
- ), C = h(
2080
- (_) => {
2081
- _.preventDefault();
2082
- const b = e.current, v = t.current;
2083
- if (!b || !v) return;
2084
- const p = v.getBoundingClientRect(), M = _.clientY - p.top, x = v.clientHeight, y = M / x;
2085
- b.scrollTop = y * (b.scrollHeight - b.clientHeight);
2086
- },
2087
- [e]
2088
- );
2089
- return {
2090
- thumbHeight: a,
2091
- thumbTop: d,
2092
- isVisible: i,
2093
- trackRef: t,
2094
- thumbRef: n,
2095
- onTrackMouseDown: C,
2096
- onThumbMouseDown: f
2097
- };
2098
- }
2099
- function Yn(e) {
2100
- return ne(() => {
2101
- if (!e)
2102
- return { bot: null, agent: null };
2103
- const t = (n, a) => {
2104
- if (!n) return null;
2105
- const l = {
2106
- variant: a,
2107
- src: n.src,
2108
- alt: n.alt,
2109
- svg: n.svg,
2110
- showName: n.showName,
2111
- name: n.name
2112
- };
2113
- return {
2114
- placement: n.placement,
2115
- avatarProps: l
2116
- };
2117
- };
2118
- return {
2119
- bot: t(e.bot, "bot"),
2120
- agent: t(e.agent, "agent")
2121
- };
2122
- }, [e]);
2123
- }
2124
- function Un(e, t, n) {
2125
- const {
2126
- variant: a = "default",
2127
- "aria-label": l,
2128
- className: d,
2129
- ...o
2130
- } = e, i = k(
2131
- t.controller.machine,
2132
- (u) => {
2133
- const r = u.context.messageActors;
2134
- return r ? Array.from(r.values()) : [];
2135
- },
2136
- (u, r) => u.length === r.length
2137
- ), c = Yn(t.avatarConfig), m = k(
2138
- t.controller.machine,
2139
- (u) => u.context.isTypingOn,
2140
- (u, r) => u === r
2141
- );
2142
- return {
2143
- // Props to spread on wrapper element
2144
- messagesProps: {
2145
- ...o,
2146
- ref: n,
2147
- "aria-label": l || `Chat messages, ${i.length} messages`,
2148
- "aria-live": "polite",
2149
- "data-webchat-messages": ""
2150
- },
2151
- // Props for MessagesList component (using XState message actors)
2152
- messageListProps: {
2153
- messageActors: i,
2154
- // From XState selector
2155
- isTyping: m,
2156
- // From XState selector
2157
- customMessageRenderer: void 0,
2158
- // TODO: Add custom message renderer support
2159
- // Pre-computed avatar configs (performance optimization)
2160
- botAvatarConfig: c.bot,
2161
- agentAvatarConfig: c.agent
2162
- },
2163
- // CSS class variants
2164
- variants: {
2165
- variant: a,
2166
- className: d
2167
- }
2168
- };
2169
- }
2170
- const jn = "webchat-messages-module__base___V7acY", V = {
2171
- base: jn,
2172
- "scroll-fade-bottom": "webchat-messages-module__scroll-fade-bottom___WoP9u",
2173
- "messages-container": "webchat-messages-module__messages-container___Ew2gS",
2174
- "typing-indicator-container": "webchat-messages-module__typing-indicator-container___v3bpq",
2175
- "scrollbar-track": "webchat-messages-module__scrollbar-track___WLz0l",
2176
- "scrollbar-track-visible": "webchat-messages-module__scrollbar-track-visible___LyCn8",
2177
- "scrollbar-thumb": "webchat-messages-module__scrollbar-thumb___AVatG",
2178
- default: "webchat-messages-module__default___3C2qm"
2179
- }, Kn = L(V.base, {
2180
- variants: {
2181
- variant: {
2182
- default: V.default
2183
- }
2184
- },
2185
- defaultVariants: {
2186
- variant: "default"
2187
- }
2188
- });
2189
- function Gn({
2190
- messageActors: e,
2191
- isTyping: t,
2192
- customMessages: n,
2193
- botAvatarConfig: a,
2194
- agentAvatarConfig: l,
2195
- scrollRef: d
2196
- }) {
2197
- const o = d;
2198
- T(() => {
2199
- if (o.current) {
2200
- const c = o.current;
2201
- requestAnimationFrame(() => {
2202
- c.scrollTo({
2203
- top: c.scrollHeight,
2204
- behavior: "smooth"
2205
- });
2206
- });
2207
- }
2208
- }, [e.length, t]);
2209
- const i = pe.useCallback(
2210
- (c, m, u) => {
2211
- const r = c;
2212
- if (r.type === "custom" && r.data && n) {
2213
- const f = n[r.data.name];
2214
- if (f && typeof f == "function")
2215
- return f({
2216
- ...r.data.props,
2217
- onButtonClick: u
2218
- });
2219
- }
2220
- return null;
2221
- },
2222
- [n]
2223
- );
2224
- return /* @__PURE__ */ g(
2225
- "div",
2226
- {
2227
- ref: o,
2228
- className: V["messages-container"],
2229
- "data-testid": "webchat-messages-list",
2230
- children: [
2231
- e && e.length > 0 && e.map((c) => /* @__PURE__ */ s(
2232
- Rn,
2233
- {
2234
- messageActor: c,
2235
- customMessageRenderer: i,
2236
- baseProps: {
2237
- className: V.message,
2238
- // Pre-computed avatar configs (performance optimization)
2239
- botAvatarConfig: a,
2240
- agentAvatarConfig: l
2241
- }
2242
- },
2243
- c.id
2244
- )),
2245
- t && /* @__PURE__ */ s("div", { className: V["typing-indicator-container"], children: /* @__PURE__ */ s(Wn, { isVisible: t }) })
2246
- ]
2247
- }
2248
- );
2249
- }
2250
- function Xn(e) {
2251
- const { state: t } = ee(), n = I(null), a = I(null), { messagesProps: l, messageListProps: d, variants: o } = Un(
2252
- e,
2253
- t,
2254
- n
2255
- ), i = Fn(a);
2256
- return /* @__PURE__ */ g(
2257
- "div",
2258
- {
2259
- ...l,
2260
- className: Kn(o),
2261
- "data-webchat-messages": !0,
2262
- children: [
2263
- /* @__PURE__ */ s(
2264
- Gn,
2265
- {
2266
- ...d,
2267
- customMessages: t.customMessages,
2268
- scrollRef: a
2269
- }
2270
- ),
2271
- /* @__PURE__ */ s(
2272
- "div",
2273
- {
2274
- className: V["scroll-fade-bottom"],
2275
- "aria-hidden": !0,
2276
- "data-testid": "webchat-messages-bottom-fade"
2277
- }
2278
- ),
2279
- /* @__PURE__ */ s(
2280
- "div",
2281
- {
2282
- ref: i.trackRef,
2283
- className: $(
2284
- V["scrollbar-track"],
2285
- i.isVisible && V["scrollbar-track-visible"]
2286
- ),
2287
- onMouseDown: i.onTrackMouseDown,
2288
- "aria-hidden": !0,
2289
- "data-testid": "webchat-custom-scrollbar",
2290
- children: /* @__PURE__ */ s(
2291
- "div",
2292
- {
2293
- ref: i.thumbRef,
2294
- className: V["scrollbar-thumb"],
2295
- style: {
2296
- height: i.thumbHeight,
2297
- top: i.thumbTop
2298
- },
2299
- onMouseDown: i.onThumbMouseDown
2300
- }
2301
- )
2302
- }
2303
- )
2304
- ]
2305
- }
2306
- );
2307
- }
2308
- function qn({
2309
- isOpen: e,
2310
- onClose: t,
2311
- onControllerReady: n,
2312
- title: a = "Chat",
2313
- placeholder: l = "Type a message...",
2314
- showBranding: d = !0,
2315
- coverRegistry: o
2316
- }) {
2317
- const { controller: i } = ee(), c = I(!1);
2318
- return T(() => {
2319
- i && !c.current && (c.current = !0, n?.(i));
2320
- }, [i, n]), T(() => {
2321
- if (!i) return;
2322
- const r = i.machine.getSnapshot().context.isOpen ?? !1;
2323
- e && !r ? i.open() : !e && r && i.close();
2324
- }, [e, i]), /* @__PURE__ */ g(pt, { layout: "default", coverRegistry: o, children: [
2325
- /* @__PURE__ */ s(Mt, { title: a, onClose: () => {
2326
- i?.close(), t?.();
2327
- } }),
2328
- /* @__PURE__ */ s(Xn, { variant: "default" }),
2329
- /* @__PURE__ */ s(
2330
- Pt,
2331
- {
2332
- placeholder: l,
2333
- showBranding: d,
2334
- variant: "default"
2335
- }
2336
- )
2337
- ] });
2338
- }
2339
- function Qn({
2340
- appId: e,
2341
- isOpen: t,
2342
- onClose: n,
2343
- onControllerReady: a,
2344
- title: l,
2345
- placeholder: d,
2346
- showBranding: o = !0,
2347
- customMessages: i = {},
2348
- avatarConfig: c,
2349
- coverRegistry: m,
2350
- // Note: showTrigger is accepted but not implemented yet (reserved for future use)
2351
- ...u
2352
- }) {
2353
- return /* @__PURE__ */ s(
2354
- Le,
2355
- {
2356
- appId: e,
2357
- customMessages: i,
2358
- avatarConfig: c,
2359
- ...u,
2360
- children: /* @__PURE__ */ s(
2361
- qn,
2362
- {
2363
- isOpen: t,
2364
- onClose: n,
2365
- onControllerReady: a,
2366
- title: l,
2367
- placeholder: d,
2368
- showBranding: o,
2369
- coverRegistry: m
2370
- }
2371
- )
2372
- }
2373
- );
2374
- }
2375
- const aa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2376
- __proto__: null,
2377
- WebchatApp: Qn
2378
- }, Symbol.toStringTag, { value: "Module" }));
2379
- export {
2380
- le as B,
2381
- K as M,
2382
- ht as O,
2383
- Wn as T,
2384
- Qn as W,
2385
- qt as a,
2386
- Rn as b,
2387
- Fe as c,
2388
- et as d,
2389
- Ne as e,
2390
- Ke as f,
2391
- ct as g,
2392
- Je as h,
2393
- pt as i,
2394
- Mt as j,
2395
- Pt as k,
2396
- Xn as l,
2397
- Le as m,
2398
- ie as n,
2399
- lt as o,
2400
- bt as p,
2401
- ee as q,
2402
- Ct as r,
2403
- xt as s,
2404
- Un as t,
2405
- mt as u,
2406
- $e as v,
2407
- aa as w
2408
- };