@botonic/webchat-react 2.27.0 → 2.29.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.
Files changed (42) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/CLAUDE.md +9 -5
  3. package/index.d.ts +6 -3
  4. package/index.js +51 -49
  5. package/lib/components/message/index.d.ts +1 -0
  6. package/lib/components/message/message/message-bubble/message-bubble.d.ts +4 -0
  7. package/lib/components/message/message/message.d.ts +10 -0
  8. package/lib/components/message/message/use-message.d.ts +10 -0
  9. package/lib/components/message/rating-message/icons/face-angry.d.ts +2 -0
  10. package/lib/components/message/rating-message/icons/face-frown.d.ts +2 -0
  11. package/lib/components/message/rating-message/icons/face-grin-beam.d.ts +2 -0
  12. package/lib/components/message/rating-message/icons/face-meh.d.ts +2 -0
  13. package/lib/components/message/rating-message/icons/face-smile.d.ts +2 -0
  14. package/lib/components/message/rating-message/icons/index.d.ts +7 -0
  15. package/lib/components/message/rating-message/icons/rating-icon-types.d.ts +5 -0
  16. package/lib/components/message/rating-message/icons/star.d.ts +2 -0
  17. package/lib/components/message/rating-message/index.d.ts +1 -0
  18. package/lib/components/message/rating-message/rating-message.d.ts +4 -0
  19. package/lib/components/message/rating-message/use-rating-message.d.ts +31 -0
  20. package/lib/components/message-machine-renderer/message-machine-renderer.d.ts +1 -1
  21. package/lib/components/message-machine-renderer/use-message-machine-renderer.d.ts +2 -2
  22. package/lib/components/shared/index.d.ts +2 -2
  23. package/lib/components/shared/quick-reply/index.d.ts +2 -0
  24. package/lib/components/shared/{button-component/button-component.d.ts → quick-reply/quick-reply.d.ts} +4 -4
  25. package/lib/components/webchat-app/webchat-app.d.ts +1 -4
  26. package/lib/components/webchat-messages/use-webchat-messages.d.ts +8 -2
  27. package/lib/components/webchat-overlay/base/index.d.ts +0 -1
  28. package/lib/components/webchat-overlay/base/overlay/use-overlay.d.ts +0 -4
  29. package/lib/components/webchat-overlay/base/overlay-context.d.ts +0 -2
  30. package/lib/components/webchat-overlay/index.d.ts +1 -1
  31. package/lib/hooks/use-update-custom-message-props.d.ts +1 -0
  32. package/lib/hooks/use-webchat-state.d.ts +10 -2
  33. package/lib/hooks/webchat-output-renderers.d.ts +6 -0
  34. package/package.json +4 -4
  35. package/styles.css +105 -55
  36. package/trigger.js +1 -1
  37. package/webchat-app-C3YH_yqx.js +4293 -0
  38. package/lib/components/shared/button-component/index.d.ts +0 -2
  39. package/lib/components/webchat-overlay/base/confirm-modal/confirm-modal.d.ts +0 -8
  40. package/lib/components/webchat-overlay/base/confirm-modal/index.d.ts +0 -2
  41. package/webchat-app-DSDMjE-m.js +0 -4051
  42. /package/lib/components/shared/{button-component → quick-reply}/external-link-icon.d.ts +0 -0
@@ -1,4051 +0,0 @@
1
- import { jsx as n, jsxs as w, Fragment as Ee } from "react/jsx-runtime";
2
- import { Button as Wt, DropdownMenuItem as Xe, DropdownMenuItemCheckbox as Vt, PopoverTrigger as $t, DropdownMenu as Ht } from "@lilara/ui-web-react";
3
- import ft, { createContext as Re, useContext as xe, useState as N, useRef as C, useCallback as v, useMemo as _e, useEffect as S, forwardRef as O, useLayoutEffect as Ft } from "react";
4
- import { cva as F, cx as E } from "class-variance-authority";
5
- import { WebchatController as Ut, setupGlobalWebchatAPI as zt, publicWebchatController as nt, isCloseWebviewMessage as jt, isWebviewPostMessage as qt, WEBVIEW_MESSAGE_TYPES as le } from "@botonic/webchat-core";
6
- import { useDialog as Gt, FocusScope as Kt, useButton as pt, useFocusRing as Ze, mergeProps as gt, useObjectRef as Xt } from "react-aria";
7
- import { useSelector as L } from "@xstate/react";
8
- import { DEFAULT_WEBCHAT_CLIENT_SETTINGS as Zt, BotonicButtonType as Qt, WebchatMessageFactory as Qe, MessageSentBy as me } from "@botonic/shared";
9
- const vt = Re(null);
10
- function U() {
11
- const e = xe(vt);
12
- if (!e)
13
- throw new Error("useWebchatContext must be used within a WebchatProvider");
14
- return e;
15
- }
16
- const bt = Re(
17
- null
18
- );
19
- function Yt({
20
- children: e
21
- }) {
22
- const [t, a] = N(), o = C(t);
23
- o.current = t;
24
- const s = v((c) => {
25
- a(c);
26
- }, []), i = v((c) => {
27
- o.current === c && a(void 0);
28
- }, []), r = v(() => {
29
- o.current !== void 0 && a(void 0);
30
- }, []);
31
- return /* @__PURE__ */ n(
32
- bt.Provider,
33
- {
34
- value: { activeId: t, setActive: s, clearActive: i, pauseAll: r },
35
- children: e
36
- }
37
- );
38
- }
39
- function Le() {
40
- const e = xe(bt);
41
- if (!e)
42
- throw new Error(
43
- "useMediaPlayback must be used within a MediaPlaybackProvider"
44
- );
45
- return e;
46
- }
47
- function Jt(e, t, a = !1) {
48
- const o = e.custom?.[t];
49
- return typeof o == "boolean" ? o : a;
50
- }
51
- function en(e) {
52
- return {
53
- input: {
54
- isComposerVisible: e.user_input_enabled,
55
- isTextInputEnabled: e.user_input_enabled,
56
- areAttachmentsVisible: e.attachments_enabled,
57
- isEmojiPickerVisible: e.emoji_picker_enabled,
58
- isAudioRecordingVisible: Jt(
59
- e,
60
- "audio_recording_enabled"
61
- ),
62
- blockInputs: e.block_inputs
63
- }
64
- };
65
- }
66
- function tn(e) {
67
- const [t, a] = N(""), o = _e(() => {
68
- console.log("🏗️ Creating WebchatController with config:", e);
69
- const h = new Ut(e);
70
- return h.initialize().catch((p) => {
71
- console.error("❌ Failed to initialize webchat:", p);
72
- }), h;
73
- }, [e.appId]), s = L(
74
- o.machine,
75
- (h) => {
76
- const p = h.context.messageActors;
77
- return p ? Array.from(p.values()) : [];
78
- }
79
- ), i = L(
80
- o.machine,
81
- (h) => h.context.isOpen || !1
82
- ), r = L(
83
- o.machine,
84
- (h) => h.matches("operational")
85
- ), c = L(
86
- o.machine,
87
- (h) => h.matches("connectionFailed")
88
- ), f = L(
89
- o.machine,
90
- (h) => h.context.connectionStatus || "disconnected"
91
- ), _ = L(
92
- o.machine,
93
- (h) => h.context.effectiveWebchatClientSettings ?? Zt
94
- ), m = _e(
95
- () => en(_),
96
- [_]
97
- ), l = L(
98
- o.machine,
99
- (h) => h.context.soundsEnabled ?? !0
100
- ), d = L(
101
- o.machine,
102
- (h) => h.context.overlayActor
103
- ), u = L(
104
- d,
105
- (h) => h.context.overlayState
106
- );
107
- return S(() => (zt(o), () => {
108
- console.log("🧹 Cleaning up webchat controller"), o.destroy();
109
- }), [o]), {
110
- // Framework-agnostic controller - all webchat functionality
111
- controller: o,
112
- // React-specific UI state (minimal)
113
- inputValue: t,
114
- setInputValue: a,
115
- // XState machine state (direct from machine via useSelector)
116
- isOpen: i,
117
- isInitialized: r,
118
- initializationError: c,
119
- messageActors: s,
120
- connectionStatus: f,
121
- webchatClientSettings: _,
122
- webchatClientSettingsBehaviors: m,
123
- // Overlay state (webview or cover component)
124
- overlayState: u,
125
- // Sound notification state
126
- soundsEnabled: l,
127
- // Configuration
128
- avatarConfig: e.avatarConfig,
129
- enableResponsiveHeroHeader: e.enableResponsiveHeroHeader ?? !0,
130
- // Custom messages
131
- customMessages: e.customMessages
132
- };
133
- }
134
- const nn = O(({ children: e, ...t }, a) => {
135
- const o = tn(t);
136
- ft.useImperativeHandle(a, () => o.controller, [o.controller]);
137
- const s = {
138
- state: o,
139
- controller: o.controller
140
- // Direct access to controller
141
- };
142
- return /* @__PURE__ */ n(vt.Provider, { value: s, children: /* @__PURE__ */ n(Yt, { children: e }) });
143
- }), on = {
144
- collapsedByDefaultWhenConversationHasMessages: !0,
145
- collapseOnUserEngagement: !0,
146
- expandHeroWhenReturningToScrollTop: !0
147
- };
148
- function an(e) {
149
- return {
150
- ...on,
151
- ...e
152
- };
153
- }
154
- function qe(e) {
155
- return e.context.messageActors?.size ?? 0;
156
- }
157
- function Me() {
158
- }
159
- const sn = {
160
- header: {
161
- variant: "collapsed",
162
- collapseProgress: 1,
163
- hasShadow: !1
164
- },
165
- messages: {
166
- hasUserInteracted: !1,
167
- onScrollDepthChange: Me,
168
- onMessagesScrollAtTopChange: Me,
169
- onUserInteraction: Me
170
- },
171
- onUserEngagement: Me
172
- };
173
- function rn({
174
- controller: e,
175
- isOpen: t,
176
- layout: a,
177
- enableResponsiveHeroHeader: o = !0
178
- }) {
179
- const s = an(a), i = qe(
180
- e.machine.getSnapshot()
181
- ), r = s.collapsedByDefaultWhenConversationHasMessages && i > 0, c = C(null), f = C(
182
- o ? r : !1
183
- ), _ = C(!1), [m, l] = N(
184
- () => o ? r : !1
185
- ), [d, u] = N(
186
- () => o ? r : !0
187
- ), [h, p] = N(!1), g = L(
188
- e.machine,
189
- (P) => qe(P),
190
- (P, A) => P === A
191
- );
192
- S(() => {
193
- if (!o) return;
194
- if (g === 0) {
195
- u(!1), l(!1), f.current = !1, _.current = !1, c.current = 0;
196
- return;
197
- }
198
- const P = c.current;
199
- c.current = g, s.collapsedByDefaultWhenConversationHasMessages && (P === null || P === 0) && (u(!0), l(!0), f.current = !0);
200
- }, [
201
- o,
202
- g,
203
- s.collapsedByDefaultWhenConversationHasMessages
204
- ]), S(() => {
205
- if (!o || !t || !s.collapsedByDefaultWhenConversationHasMessages) return;
206
- qe(e.machine.getSnapshot()) > 0 && (u(!0), l(!0), f.current = !0);
207
- }, [
208
- o,
209
- t,
210
- e,
211
- s.collapsedByDefaultWhenConversationHasMessages
212
- ]);
213
- const b = v(() => {
214
- o && (f.current = !0, l(!0), s.collapseOnUserEngagement && u(!0));
215
- }, [o, s.collapseOnUserEngagement]), M = v(
216
- (P) => {
217
- if (o && f.current) {
218
- if (!P) {
219
- _.current = !0, u(!0);
220
- return;
221
- }
222
- s.expandHeroWhenReturningToScrollTop && _.current && u(!1);
223
- }
224
- },
225
- [o, s.expandHeroWhenReturningToScrollTop]
226
- ), T = v(
227
- (P) => {
228
- o && p(P);
229
- },
230
- [o]
231
- ), y = d ? "collapsed" : "expanded";
232
- return o ? {
233
- header: {
234
- variant: y,
235
- collapseProgress: d ? 1 : 0,
236
- hasShadow: h
237
- },
238
- messages: {
239
- hasUserInteracted: m,
240
- onScrollDepthChange: T,
241
- onMessagesScrollAtTopChange: M,
242
- onUserInteraction: b
243
- },
244
- onUserEngagement: b
245
- } : sn;
246
- }
247
- const cn = "backdrop-module__base___2047X", ln = {
248
- base: cn
249
- };
250
- function dn({ isClosing: e = !1 }) {
251
- return /* @__PURE__ */ n(
252
- "div",
253
- {
254
- className: ln.base,
255
- "aria-hidden": !0,
256
- "data-closing": e || void 0
257
- }
258
- );
259
- }
260
- function un() {
261
- return /* @__PURE__ */ n(
262
- "svg",
263
- {
264
- xmlns: "http://www.w3.org/2000/svg",
265
- viewBox: "0 0 448 512",
266
- fill: "currentColor",
267
- role: "img",
268
- "aria-hidden": !0,
269
- children: /* @__PURE__ */ n("path", { d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" })
270
- }
271
- );
272
- }
273
- function mn() {
274
- return /* @__PURE__ */ n(
275
- "svg",
276
- {
277
- xmlns: "http://www.w3.org/2000/svg",
278
- viewBox: "0 0 384 512",
279
- fill: "currentColor",
280
- role: "img",
281
- "aria-hidden": !0,
282
- children: /* @__PURE__ */ n("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
283
- }
284
- );
285
- }
286
- const _n = "dialog-module__base___K18e8", hn = "dialog-module__success___z5NAQ", fn = "dialog-module__error___Q46VR", pn = "dialog-module__loading___21312", gn = "dialog-module__actions___xFizf", vn = "dialog-module__closing___qgRFX", bn = "dialog-module__iconContainer___8lOJ3", wn = "dialog-module__spinner___jL0bN", Cn = "dialog-module__textContent___t6Tqt", yn = "dialog-module__title___jr3if", Mn = "dialog-module__subtitle___K1uUB", z = {
287
- base: _n,
288
- success: hn,
289
- error: fn,
290
- loading: pn,
291
- actions: gn,
292
- closing: vn,
293
- iconContainer: bn,
294
- spinner: wn,
295
- textContent: Cn,
296
- title: yn,
297
- subtitle: Mn
298
- }, Pn = F(z.base, {
299
- variants: {
300
- variant: {
301
- default: "",
302
- loading: z.loading,
303
- success: z.success,
304
- error: z.error
305
- },
306
- isClosing: { true: z.closing }
307
- },
308
- defaultVariants: { variant: "default" }
309
- });
310
- function Nn({
311
- variant: e,
312
- title: t,
313
- subtitle: a,
314
- actions: o,
315
- isClosing: s = !1,
316
- onExited: i
317
- }) {
318
- const r = o?.slice(0, 3);
319
- process.env.NODE_ENV !== "production" && o && o.length > 3 && console.warn(
320
- `[Dialog] actions array has ${o.length} items; only the first 3 are rendered.`
321
- );
322
- const c = r?.slice().sort((l, d) => {
323
- const u = (h) => (h ?? "solid") === "solid";
324
- return Number(u(l.appearance)) - Number(u(d.appearance));
325
- }), f = C(null), { dialogProps: _, titleProps: m } = Gt({ role: "dialog" }, f);
326
- return S(() => {
327
- f.current && f.current.focus();
328
- }, [e]), /* @__PURE__ */ n(Kt, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ w(
329
- "div",
330
- {
331
- ..._,
332
- "aria-modal": !0,
333
- ref: f,
334
- className: Pn({ variant: e, isClosing: s }),
335
- onAnimationEnd: s ? i : void 0,
336
- children: [
337
- (e === "loading" || e === "success" || e === "error") && /* @__PURE__ */ w(
338
- "div",
339
- {
340
- className: z.iconContainer,
341
- "data-variant": e,
342
- "aria-hidden": !0,
343
- children: [
344
- e === "loading" && /* @__PURE__ */ n("div", { className: z.spinner }, "loading"),
345
- e === "success" && /* @__PURE__ */ n(un, {}, "success"),
346
- e === "error" && /* @__PURE__ */ n(mn, {}, "error")
347
- ]
348
- }
349
- ),
350
- /* @__PURE__ */ w("div", { className: z.textContent, children: [
351
- /* @__PURE__ */ n("h2", { ...m, className: z.title, children: t }),
352
- a && /* @__PURE__ */ n("p", { className: z.subtitle, children: a })
353
- ] }),
354
- c && c.length > 0 && /* @__PURE__ */ n("div", { className: z.actions, "data-variant": e, children: c.map(({ label: l, ...d }, u) => /* @__PURE__ */ n(Wt, { ...d, children: l }, u)) })
355
- ]
356
- }
357
- ) });
358
- }
359
- const wt = Re(null);
360
- function Sn() {
361
- const e = xe(wt);
362
- if (!e)
363
- throw new Error("useDialog must be used within a DialogProvider");
364
- return e;
365
- }
366
- const Tn = {
367
- isOpen: !1,
368
- variant: "default",
369
- title: "",
370
- subtitle: void 0,
371
- actions: void 0
372
- };
373
- function An({
374
- children: e,
375
- onOpen: t,
376
- controlsRef: a
377
- }) {
378
- const [o, s] = N(Tn), [i, r] = N(!1), c = C(t);
379
- c.current = t;
380
- const f = v(() => {
381
- s((p) => ({ ...p, isOpen: !1 })), r(!1);
382
- }, []), _ = C(f);
383
- _.current = f;
384
- const m = v((p) => {
385
- r(!1), c.current?.(), s({
386
- isOpen: !0,
387
- variant: p.variant ?? "default",
388
- title: p.title,
389
- subtitle: p.subtitle,
390
- actions: p.actions
391
- });
392
- }, []), l = v((p) => {
393
- s((g) => ({
394
- ...g,
395
- ...p.variant !== void 0 && { variant: p.variant },
396
- ...p.title !== void 0 && { title: p.title },
397
- subtitle: "subtitle" in p ? p.subtitle : g.subtitle,
398
- actions: "actions" in p ? p.actions : g.actions
399
- }));
400
- }, []), d = v(() => {
401
- if (typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
402
- _.current();
403
- return;
404
- }
405
- r(!0);
406
- }, []);
407
- a && (a.current = { open: m, update: l, close: d }), S(() => {
408
- if (process.env.NODE_ENV !== "production") {
409
- const p = document.querySelector(
410
- "[data-webchat-container], [data-webview-frame]"
411
- );
412
- p && (getComputedStyle(p).gridTemplateRows.includes("backdrop") || console.warn(
413
- `[DialogProvider] Parent grid does not declare "backdrop-start"/"backdrop-end" named lines. Backdrop and Dialog will not be positioned correctly. Add the named lines to the container's grid-template-rows and grid-template-columns.`
414
- ));
415
- }
416
- }, []);
417
- const u = o.isOpen || i, h = { open: m, update: l, close: d, dialogState: o };
418
- return /* @__PURE__ */ w(wt.Provider, { value: h, children: [
419
- e,
420
- u && /* @__PURE__ */ n(dn, { isClosing: i }),
421
- u && /* @__PURE__ */ n(
422
- Nn,
423
- {
424
- variant: o.variant,
425
- title: o.title,
426
- subtitle: o.subtitle,
427
- actions: o.actions,
428
- isClosing: i,
429
- onExited: f
430
- }
431
- )
432
- ] });
433
- }
434
- function In({
435
- children: e
436
- }) {
437
- const { pauseAll: t } = Le(), a = C(t);
438
- a.current = t;
439
- const o = C(null), s = () => {
440
- a.current();
441
- };
442
- return S(() => (nt.setDialogController({
443
- open: (i) => o.current?.open(i),
444
- update: (i) => o.current?.update(i),
445
- close: () => o.current?.close()
446
- }), () => {
447
- nt.setDialogController(void 0);
448
- }), []), /* @__PURE__ */ n(An, { onOpen: s, controlsRef: o, children: e });
449
- }
450
- const En = "button-component-module__buttonComponent___KMwSR", Rn = "button-component-module__secondary___TTpBp", xn = "button-component-module__primary___bD2jQ", Ln = "button-component-module__iconWrapper___70XMO", ge = {
451
- buttonComponent: En,
452
- secondary: Rn,
453
- primary: xn,
454
- iconWrapper: Ln
455
- };
456
- function Bn() {
457
- return /* @__PURE__ */ w(
458
- "svg",
459
- {
460
- viewBox: "0 0 16 16",
461
- fill: "none",
462
- xmlns: "http://www.w3.org/2000/svg",
463
- width: "14",
464
- height: "14",
465
- role: "img",
466
- "aria-hidden": !0,
467
- children: [
468
- /* @__PURE__ */ n(
469
- "path",
470
- {
471
- d: "M6.667 3.333H3.333A1.333 1.333 0 0 0 2 4.667v8A1.333 1.333 0 0 0 3.333 14h8A1.333 1.333 0 0 0 12.667 12.667V9.333",
472
- stroke: "currentColor",
473
- strokeWidth: "1.333",
474
- strokeLinecap: "round",
475
- strokeLinejoin: "round"
476
- }
477
- ),
478
- /* @__PURE__ */ n(
479
- "path",
480
- {
481
- d: "M9.333 2h4.667v4.667",
482
- stroke: "currentColor",
483
- strokeWidth: "1.333",
484
- strokeLinecap: "round",
485
- strokeLinejoin: "round"
486
- }
487
- ),
488
- /* @__PURE__ */ n(
489
- "path",
490
- {
491
- d: "M6.667 9.333 14 2",
492
- stroke: "currentColor",
493
- strokeWidth: "1.333",
494
- strokeLinecap: "round",
495
- strokeLinejoin: "round"
496
- }
497
- )
498
- ]
499
- }
500
- );
501
- }
502
- function kn(e) {
503
- return "type" in e ? e.type === Qt.WebUrl || !!e.webview : !1;
504
- }
505
- const Ae = O(
506
- ({
507
- text: e,
508
- disabled: t = !1,
509
- onClick: a,
510
- button: o,
511
- className: s,
512
- variant: i = "secondary"
513
- }, r) => {
514
- const c = kn(o);
515
- return /* @__PURE__ */ w(
516
- "button",
517
- {
518
- ref: r,
519
- disabled: t,
520
- onClick: (_) => {
521
- _.preventDefault(), _.stopPropagation(), a?.(o);
522
- },
523
- className: E(
524
- ge.buttonComponent,
525
- i === "primary" && ge.primary,
526
- i === "secondary" && ge.secondary,
527
- c && ge.withIcon,
528
- s
529
- ),
530
- type: "button",
531
- children: [
532
- c && /* @__PURE__ */ n("span", { className: ge.iconWrapper, children: /* @__PURE__ */ n(Bn, {}) }),
533
- e
534
- ]
535
- }
536
- );
537
- }
538
- ), Dn = "confirm-modal-module__overlay___rRE3G", On = "confirm-modal-module__modal___AliW3", Wn = "confirm-modal-module__title___nOVLU", Vn = "confirm-modal-module__message___NiTmg", $n = "confirm-modal-module__buttons___T9sSa", ve = {
539
- overlay: Dn,
540
- modal: On,
541
- title: Wn,
542
- message: Vn,
543
- buttons: $n
544
- };
545
- function Hn(e) {
546
- return e === !1 || e === void 0 ? null : e === !0 ? {
547
- message: "Are you sure you want to close?"
548
- } : typeof e == "string" ? {
549
- message: e
550
- } : e;
551
- }
552
- const Fn = ({
553
- config: e,
554
- onConfirm: t,
555
- onCancel: a
556
- }) => {
557
- const o = C(null), s = C(null), i = Hn(e);
558
- S(() => {
559
- o.current?.focus();
560
- }, []), S(() => {
561
- const m = (l) => {
562
- l.key === "Escape" && (l.stopPropagation(), a());
563
- };
564
- return window.addEventListener("keydown", m, !0), () => {
565
- window.removeEventListener("keydown", m, !0);
566
- };
567
- }, [a]);
568
- const r = v((m) => {
569
- if (m.key === "Tab") {
570
- const l = s.current?.querySelectorAll(
571
- "button:not([disabled])"
572
- );
573
- if (!l?.length) return;
574
- const d = l[0], u = l[l.length - 1];
575
- m.shiftKey ? document.activeElement === d && (m.preventDefault(), u.focus()) : document.activeElement === u && (m.preventDefault(), d.focus());
576
- }
577
- }, []);
578
- if (!i)
579
- return null;
580
- const c = i.title || "Close?", f = i.confirmText || "Close", _ = i.cancelText || "Cancel";
581
- return /* @__PURE__ */ n(
582
- "div",
583
- {
584
- className: ve.overlay,
585
- role: "alertdialog",
586
- "aria-modal": "true",
587
- "aria-labelledby": "confirm-close-title",
588
- "aria-describedby": "confirm-close-message",
589
- onClick: a,
590
- children: /* @__PURE__ */ w(
591
- "div",
592
- {
593
- ref: s,
594
- className: ve.modal,
595
- onClick: (m) => m.stopPropagation(),
596
- onKeyDown: r,
597
- children: [
598
- /* @__PURE__ */ n("h3", { id: "confirm-close-title", className: ve.title, children: c }),
599
- /* @__PURE__ */ n("p", { id: "confirm-close-message", className: ve.message, children: i.message }),
600
- /* @__PURE__ */ w("div", { className: ve.buttons, children: [
601
- /* @__PURE__ */ n(
602
- Ae,
603
- {
604
- text: _,
605
- button: { text: "cancel", value: "cancel" },
606
- onClick: a,
607
- variant: "secondary"
608
- }
609
- ),
610
- /* @__PURE__ */ n(
611
- Ae,
612
- {
613
- ref: o,
614
- text: f,
615
- button: { text: "confirm", value: "confirm" },
616
- onClick: t,
617
- variant: "primary"
618
- }
619
- )
620
- ] })
621
- ]
622
- }
623
- )
624
- }
625
- );
626
- }, Ct = Re(null);
627
- function Be() {
628
- const e = xe(Ct);
629
- if (!e)
630
- throw new Error("useOverlayContext must be used within an Overlay");
631
- return e;
632
- }
633
- const Un = "cover-frame-module__base___e38vU", zn = "cover-frame-module__errorContainer___o19mQ", jn = "cover-frame-module__errorText___ltF9m", Ke = {
634
- base: Un,
635
- errorContainer: zn,
636
- errorText: jn
637
- }, ot = F(Ke.base);
638
- function qn({ className: e }) {
639
- const { overlayState: t, coverRegistry: a, setIsLoading: o } = Be();
640
- if (S(() => {
641
- t?.type === "cover" && o(!1);
642
- }, [t?.type, o]), !t || t.type !== "cover")
643
- return null;
644
- const s = t, i = a?.[s.componentId];
645
- return i ? /* @__PURE__ */ n("div", { className: ot({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ n(i, { ...s.props || {} }) }) : (console.warn(
646
- `[OverlayCoverFrame] Component "${s.componentId}" not found in registry. Available components: ${Object.keys(a || {}).join(", ") || "none"}`
647
- ), /* @__PURE__ */ n("div", { className: ot({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ n("div", { className: Ke.errorContainer, children: /* @__PURE__ */ w("p", { className: Ke.errorText, children: [
648
- 'Component "',
649
- s.componentId,
650
- '" not found'
651
- ] }) }) }));
652
- }
653
- const Gn = "webview-frame-module__base___u5SZG", Kn = "webview-frame-module__loadingContainer___eqQ-L", Xn = "webview-frame-module__spinner___5gsaP", Zn = "webview-frame-module__iframe___XewWc", Te = {
654
- base: Gn,
655
- loadingContainer: Kn,
656
- spinner: Xn,
657
- iframe: Zn
658
- }, Qn = F(Te.base);
659
- function Yn({ className: e }) {
660
- const { overlayState: t, sandboxPermissions: a, isLoading: o, setIsLoading: s } = Be(), i = v(() => {
661
- s(!1);
662
- }, [s]);
663
- if (!t || t.type !== "webview")
664
- return null;
665
- const r = t;
666
- return /* @__PURE__ */ w("div", { className: Qn({ className: e }), "data-overlay-webview-frame": !0, children: [
667
- o && /* @__PURE__ */ n("div", { className: Te.loadingContainer, children: /* @__PURE__ */ n("div", { className: Te.spinner, "aria-label": "Loading webview" }) }),
668
- /* @__PURE__ */ n(
669
- "iframe",
670
- {
671
- src: r.url,
672
- className: Te.iframe,
673
- sandbox: a,
674
- title: r.title || "Webview",
675
- onLoad: i,
676
- style: { opacity: o ? 0 : 1 }
677
- }
678
- )
679
- ] });
680
- }
681
- function Jn({ className: e }) {
682
- const { overlayState: t } = Be();
683
- if (!t)
684
- return null;
685
- switch (t.type) {
686
- case "webview":
687
- return /* @__PURE__ */ n(Yn, { className: e });
688
- case "cover":
689
- return /* @__PURE__ */ n(qn, { className: e });
690
- default:
691
- return null;
692
- }
693
- }
694
- const eo = "header-module__base___WYM0o", to = "header-module__minimal___6nq5w", no = "header-module__titleContainer___56hi4", oo = "header-module__icon___BCSbe", ao = "header-module__title___0c-LL", so = "header-module__closeButton___wOwC8", se = {
695
- base: eo,
696
- default: "header-module__default___z7D3c",
697
- minimal: to,
698
- titleContainer: no,
699
- icon: oo,
700
- title: ao,
701
- closeButton: so
702
- };
703
- function ro(e, t) {
704
- const a = t?.title || "Overlay", o = t?.icon, s = t?.allowClose !== !1;
705
- return {
706
- title: a,
707
- icon: o,
708
- showClose: s,
709
- variants: {
710
- variant: e.variant || "default"
711
- }
712
- };
713
- }
714
- const io = F(se.base, {
715
- variants: {
716
- variant: {
717
- default: se.default,
718
- minimal: se.minimal
719
- }
720
- },
721
- defaultVariants: {
722
- variant: "default"
723
- }
724
- });
725
- function co(e) {
726
- const { overlayState: t, attemptClose: a } = Be(), { showClose: o, title: s, icon: i, variants: r } = ro(
727
- e,
728
- t
729
- );
730
- return /* @__PURE__ */ w("header", { className: io(r), "data-overlay-header": !0, children: [
731
- /* @__PURE__ */ w("div", { className: se.titleContainer, children: [
732
- i && /* @__PURE__ */ n("span", { className: se.icon, children: i }),
733
- /* @__PURE__ */ n("h4", { className: se.title, children: s })
734
- ] }),
735
- o && /* @__PURE__ */ n(
736
- "button",
737
- {
738
- type: "button",
739
- className: se.closeButton,
740
- onClick: a,
741
- "aria-label": "Close overlay",
742
- children: "×"
743
- }
744
- )
745
- ] });
746
- }
747
- const lo = "overlay-module__base___qm4j7", uo = "overlay-module__loading___8U4v9", at = {
748
- base: lo,
749
- loading: uo
750
- };
751
- function mo(e, t) {
752
- const [a, o] = N(!0), [s, i] = N(!1), r = v(() => {
753
- e?.confirmClose ? i(!0) : t.onClose();
754
- }, [t, e?.confirmClose]), c = v(() => {
755
- i(!1), t.onClose();
756
- }, [t]), f = v(() => {
757
- i(!1);
758
- }, []);
759
- return S(() => {
760
- e?.isOpen && e?.type === "webview" && o(!0);
761
- }, [e?.isOpen, e?.type]), S(() => {
762
- e?.type === "webview" && o(!0);
763
- }, [e?.type === "webview" ? e.url : null]), S(() => {
764
- if (e?.type !== "webview")
765
- return;
766
- const _ = (m) => {
767
- if (jt(m.data)) {
768
- r();
769
- return;
770
- }
771
- if (qt(m.data)) {
772
- const l = m.data;
773
- switch (l.type) {
774
- case le.SET_TITLE:
775
- t.onSetTitle(l.title);
776
- break;
777
- case le.SET_ICON:
778
- t.onSetIcon(l.icon);
779
- break;
780
- case le.SET_ALLOW_CLOSE:
781
- t.onSetAllowClose(l.allow);
782
- break;
783
- case le.SET_CONFIRM_CLOSE:
784
- t.onSetConfirmClose(l.config);
785
- break;
786
- case le.SEND_PAYLOAD:
787
- t.onSendPayload(l.payload);
788
- break;
789
- case le.NAVIGATE:
790
- t.onNavigate(l.url);
791
- break;
792
- }
793
- }
794
- };
795
- return window.addEventListener("message", _), () => {
796
- window.removeEventListener("message", _);
797
- };
798
- }, [t, r, e?.type]), S(() => {
799
- if (s) return;
800
- const _ = (m) => {
801
- m.key === "Escape" && e?.isOpen && e?.allowClose !== !1 && r();
802
- };
803
- return window.addEventListener("keydown", _), () => {
804
- window.removeEventListener("keydown", _);
805
- };
806
- }, [
807
- r,
808
- s,
809
- e?.isOpen,
810
- e?.allowClose
811
- ]), {
812
- isLoading: a,
813
- setIsLoading: o,
814
- showConfirmModal: s,
815
- setShowConfirmModal: i,
816
- attemptClose: r,
817
- handleConfirmClose: c,
818
- handleCancelClose: f,
819
- variants: { isLoading: a }
820
- };
821
- }
822
- const _o = "allow-scripts allow-forms allow-same-origin allow-popups", ho = F(at.base, {
823
- variants: {
824
- isLoading: {
825
- true: at.loading
826
- }
827
- }
828
- });
829
- function fo({
830
- overlayState: e,
831
- onClose: t,
832
- onSetTitle: a,
833
- onSetIcon: o,
834
- onSetAllowClose: s,
835
- onSetConfirmClose: i,
836
- onSendPayload: r,
837
- onNavigate: c,
838
- coverRegistry: f,
839
- children: _
840
- }) {
841
- const m = {
842
- onClose: t,
843
- onSetTitle: a,
844
- onSetIcon: o,
845
- onSetAllowClose: s,
846
- onSetConfirmClose: i,
847
- onSendPayload: r,
848
- onNavigate: c
849
- }, {
850
- isLoading: l,
851
- setIsLoading: d,
852
- showConfirmModal: u,
853
- setShowConfirmModal: h,
854
- attemptClose: p,
855
- handleConfirmClose: g,
856
- handleCancelClose: b,
857
- variants: M
858
- } = mo(e, m);
859
- if (!e?.isOpen)
860
- return null;
861
- const T = {
862
- overlayState: e,
863
- ...m,
864
- sandboxPermissions: _o,
865
- isLoading: l,
866
- setIsLoading: d,
867
- attemptClose: p,
868
- showConfirmModal: u,
869
- setShowConfirmModal: h,
870
- coverRegistry: f
871
- };
872
- return /* @__PURE__ */ n(Ct.Provider, { value: T, children: /* @__PURE__ */ w("div", { className: ho(M), "data-overlay": !0, children: [
873
- _ || /* @__PURE__ */ w(Ee, { children: [
874
- /* @__PURE__ */ n(co, {}),
875
- /* @__PURE__ */ n(Jn, {})
876
- ] }),
877
- u && e.confirmClose && /* @__PURE__ */ n(
878
- Fn,
879
- {
880
- config: e.confirmClose,
881
- onConfirm: g,
882
- onCancel: b
883
- }
884
- )
885
- ] }) });
886
- }
887
- function po(e, t, a) {
888
- const {
889
- layout: o = "default",
890
- size: s = "normal",
891
- position: i = "bottom-right",
892
- "aria-label": r = "Webchat interface",
893
- className: c,
894
- coverRegistry: f,
895
- // Exclude from DOM props
896
- ..._
897
- } = e, m = L(t.controller.machine, (b) => b.context.isOpen || !1), [l, d] = N(null), [u, h] = N(!1), p = C(!1), g = v(
898
- (b) => {
899
- b.target === b.currentTarget && l !== null && (l === "closing" && h(!1), d(null));
900
- },
901
- [l]
902
- );
903
- return S(() => {
904
- const b = p.current;
905
- p.current = m, b === !1 && m ? (h(!0), d("opening")) : b === !0 && !m && d("closing");
906
- }, [m]), {
907
- // Component visibility - stays true during close animation
908
- shouldRender: u,
909
- // Container element props
910
- containerProps: {
911
- ref: a,
912
- role: "dialog",
913
- "aria-label": r,
914
- "aria-live": "polite",
915
- "data-testid": "webchat-container",
916
- "data-layout": o,
917
- "data-size": s,
918
- tabIndex: -1,
919
- onAnimationEnd: g,
920
- ..._
921
- },
922
- // CSS class variants
923
- variants: {
924
- layout: o,
925
- size: s,
926
- position: i,
927
- isOpen: m,
928
- isOpening: l === "opening",
929
- isClosing: l === "closing",
930
- className: c
931
- }
932
- };
933
- }
934
- const go = "webchat-container-module__base___-nEHI", Y = {
935
- base: go,
936
- "is-open": "webchat-container-module__is-open___y7UjX",
937
- default: "webchat-container-module__default___Zl33C",
938
- "position-bottom-right": "webchat-container-module__position-bottom-right___NIW0p",
939
- "position-bottom-left": "webchat-container-module__position-bottom-left___gatKC",
940
- "position-top-right": "webchat-container-module__position-top-right___DKI8J",
941
- "position-top-left": "webchat-container-module__position-top-left___ehR4d",
942
- "is-opening": "webchat-container-module__is-opening___5Ot9W",
943
- "is-closing": "webchat-container-module__is-closing___o0hqs"
944
- }, vo = F(Y.base, {
945
- variants: {
946
- layout: {
947
- default: Y.default
948
- },
949
- position: {
950
- "bottom-right": Y["position-bottom-right"],
951
- "bottom-left": Y["position-bottom-left"],
952
- "top-right": Y["position-top-right"],
953
- "top-left": Y["position-top-left"]
954
- },
955
- isOpen: {
956
- true: Y["is-open"]
957
- },
958
- isOpening: {
959
- true: Y["is-opening"]
960
- },
961
- isClosing: {
962
- true: Y["is-closing"]
963
- }
964
- },
965
- defaultVariants: {
966
- layout: "default",
967
- position: "bottom-right"
968
- }
969
- });
970
- function bo(e) {
971
- const { state: t, controller: a } = U(), o = C(null), { shouldRender: s, containerProps: i, variants: r } = po(
972
- e,
973
- t,
974
- o
975
- ), {
976
- children: c,
977
- coverRegistry: f,
978
- layout: _,
979
- size: m,
980
- position: l,
981
- ...d
982
- } = e, u = v(
983
- () => a.overlay.close(),
984
- [a]
985
- ), h = v(
986
- (y) => a.overlay.setTitle(y),
987
- [a]
988
- ), p = v(
989
- (y) => a.overlay.setIcon(y),
990
- [a]
991
- ), g = v(
992
- (y) => a.overlay.setAllowClose(y),
993
- [a]
994
- ), b = v(
995
- (y) => a.overlay.setConfirmClose(y),
996
- [a]
997
- ), M = v(
998
- (y) => a.overlay.sendPayload(y),
999
- [a]
1000
- ), T = v(
1001
- (y) => a.overlay.navigate(y),
1002
- [a]
1003
- );
1004
- return s ? /* @__PURE__ */ w(
1005
- "div",
1006
- {
1007
- ...i,
1008
- ...d,
1009
- className: vo(r),
1010
- "data-testid": "webchat-container",
1011
- "data-webchat-container": !0,
1012
- children: [
1013
- /* @__PURE__ */ n(In, { children: c }),
1014
- /* @__PURE__ */ n(
1015
- fo,
1016
- {
1017
- overlayState: t.overlayState,
1018
- onClose: u,
1019
- onSetTitle: h,
1020
- onSetIcon: p,
1021
- onSetAllowClose: g,
1022
- onSetConfirmClose: b,
1023
- onSendPayload: M,
1024
- onNavigate: T,
1025
- coverRegistry: f
1026
- }
1027
- )
1028
- ]
1029
- }
1030
- ) : null;
1031
- }
1032
- function wo() {
1033
- return /* @__PURE__ */ w(
1034
- "svg",
1035
- {
1036
- xmlns: "http://www.w3.org/2000/svg",
1037
- viewBox: "0 0 10 10",
1038
- fill: "none",
1039
- stroke: "currentColor",
1040
- strokeWidth: "1.5",
1041
- strokeLinecap: "round",
1042
- role: "img",
1043
- "aria-hidden": !0,
1044
- width: "10",
1045
- height: "10",
1046
- children: [
1047
- /* @__PURE__ */ n("line", { x1: "1", y1: "1", x2: "9", y2: "9" }),
1048
- /* @__PURE__ */ n("line", { x1: "9", y1: "1", x2: "1", y2: "9" })
1049
- ]
1050
- }
1051
- );
1052
- }
1053
- function Co() {
1054
- return /* @__PURE__ */ n(
1055
- "svg",
1056
- {
1057
- xmlns: "http://www.w3.org/2000/svg",
1058
- viewBox: "0 0 192 512",
1059
- fill: "currentColor",
1060
- role: "img",
1061
- "aria-hidden": !0,
1062
- width: "5",
1063
- height: "14",
1064
- children: /* @__PURE__ */ n("path", { d: "M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" })
1065
- }
1066
- );
1067
- }
1068
- function yo(e) {
1069
- return Math.min(1, Math.max(0, e));
1070
- }
1071
- function Mo(e, t, a) {
1072
- const {
1073
- title: o = "Chat",
1074
- avatarSrc: s,
1075
- avatarAlt: i,
1076
- showStatus: r = !0,
1077
- showClose: c = !0,
1078
- onClose: f,
1079
- variant: _ = "collapsed",
1080
- collapseProgress: m,
1081
- hasShadow: l = !1,
1082
- enableResponsiveHeroHeader: d,
1083
- "aria-label": u,
1084
- className: h,
1085
- style: p,
1086
- ...g
1087
- } = e, b = s ?? t.avatarConfig?.bot?.src, M = t.avatarConfig?.bot?.svg, T = i ?? t.avatarConfig?.bot?.alt, y = L(
1088
- t.controller.machine,
1089
- (B) => B.context.connectionStatus || "disconnected"
1090
- ), P = v(() => {
1091
- f ? f() : t.controller.close();
1092
- }, [f, t.controller]), A = v((B) => {
1093
- switch (B) {
1094
- case "connected":
1095
- return "Online";
1096
- case "connecting":
1097
- return "Connecting...";
1098
- case "disconnected":
1099
- return "Offline";
1100
- case "unavailable":
1101
- return "Connection unstable";
1102
- case "error":
1103
- return "Connection error";
1104
- default:
1105
- return "Offline";
1106
- }
1107
- }, []), W = r ? A(y) : void 0, V = _ !== "expanded", $ = d ?? t.enableResponsiveHeroHeader ?? !0, j = yo(
1108
- m ?? Number(V)
1109
- ), q = {
1110
- ...p,
1111
- "--webchat-header-collapse-progress": String(j)
1112
- };
1113
- return {
1114
- // Header element props
1115
- headerProps: {
1116
- ...g,
1117
- ref: a,
1118
- "aria-label": u || `${o} header`,
1119
- style: q,
1120
- "data-webchat-responsive-hero": $ ? "on" : "off"
1121
- },
1122
- // Header content
1123
- title: o,
1124
- avatarSrc: b,
1125
- avatarSvg: M,
1126
- avatarAlt: T,
1127
- showStatus: r,
1128
- statusText: W,
1129
- showClose: c,
1130
- onClose: P,
1131
- connectionStatus: y,
1132
- // CSS class variants
1133
- variants: {
1134
- variant: _,
1135
- hasShadow: l,
1136
- className: h
1137
- }
1138
- };
1139
- }
1140
- const Po = "webchat-header-module__base___VbIWd", No = "webchat-header-module__profile___NsohW", So = "webchat-header-module__avatar___klWPr", To = "webchat-header-module__collapsed___Xwj3m", Ao = "webchat-header-module__expanded___9RKFH", x = {
1141
- base: Po,
1142
- "header-content": "webchat-header-module__header-content___bPP9l",
1143
- profile: No,
1144
- avatar: So,
1145
- "header-text": "webchat-header-module__header-text___64Yj9",
1146
- "header-title": "webchat-header-module__header-title___QHcHi",
1147
- "status-text": "webchat-header-module__status-text___fTZvQ",
1148
- "status-section": "webchat-header-module__status-section___TlGf-",
1149
- "header-actions": "webchat-header-module__header-actions___hVl-F",
1150
- "header-button": "webchat-header-module__header-button___8knmx",
1151
- "avatar-img": "webchat-header-module__avatar-img___5e2rl",
1152
- "avatar-svg": "webchat-header-module__avatar-svg___dKAm6",
1153
- "status-dot": "webchat-header-module__status-dot___rjbA2",
1154
- "has-shadow": "webchat-header-module__has-shadow___uQ7mG",
1155
- collapsed: To,
1156
- expanded: Ao
1157
- }, yt = O((e, t) => {
1158
- const a = Xt(t), { buttonProps: o } = pt(e, a), { focusProps: s, isFocusVisible: i } = Ze();
1159
- return /* @__PURE__ */ n(
1160
- "button",
1161
- {
1162
- ...gt(o, s),
1163
- ref: a,
1164
- className: x["header-button"],
1165
- "aria-label": e["aria-label"] ?? "Open menu",
1166
- "data-focus-visible": i || void 0,
1167
- children: /* @__PURE__ */ n(Co, {})
1168
- }
1169
- );
1170
- });
1171
- function Io(e) {
1172
- const t = C(null), { buttonProps: a } = pt(e, t), { focusProps: o, isFocusVisible: s } = Ze();
1173
- return /* @__PURE__ */ n(
1174
- "button",
1175
- {
1176
- ...gt(a, o),
1177
- ref: t,
1178
- className: x["header-button"],
1179
- "aria-label": e["aria-label"] ?? "Close chat",
1180
- "data-focus-visible": s || void 0,
1181
- children: /* @__PURE__ */ n(wo, {})
1182
- }
1183
- );
1184
- }
1185
- yt.displayName = "MenuTriggerButton";
1186
- const Eo = F(x.base, {
1187
- variants: {
1188
- variant: {
1189
- default: x.collapsed,
1190
- collapsed: x.collapsed,
1191
- expanded: x.expanded
1192
- },
1193
- hasShadow: {
1194
- true: x["has-shadow"]
1195
- }
1196
- },
1197
- defaultVariants: {
1198
- variant: "collapsed"
1199
- }
1200
- });
1201
- function Ro({
1202
- children: e,
1203
- ...t
1204
- }) {
1205
- const { state: a } = U(), o = C(null), {
1206
- headerProps: s,
1207
- title: i,
1208
- avatarSrc: r,
1209
- avatarSvg: c,
1210
- avatarAlt: f,
1211
- showStatus: _,
1212
- statusText: m,
1213
- showClose: l,
1214
- onClose: d,
1215
- connectionStatus: u,
1216
- variants: h
1217
- } = Mo(t, a, o);
1218
- return /* @__PURE__ */ n(
1219
- "header",
1220
- {
1221
- ...s,
1222
- className: Eo(h),
1223
- "data-webchat-header": !0,
1224
- children: /* @__PURE__ */ w("div", { className: x["header-content"], children: [
1225
- /* @__PURE__ */ w("div", { className: x.profile, children: [
1226
- /* @__PURE__ */ n("div", { className: x.avatar, "aria-hidden": "true", children: c ? /* @__PURE__ */ n(
1227
- "div",
1228
- {
1229
- className: x["avatar-svg"],
1230
- dangerouslySetInnerHTML: { __html: c },
1231
- role: "img",
1232
- "aria-label": f ?? i
1233
- }
1234
- ) : r ? /* @__PURE__ */ n(
1235
- "img",
1236
- {
1237
- src: r,
1238
- alt: f ?? i,
1239
- className: x["avatar-img"]
1240
- }
1241
- ) : null }),
1242
- /* @__PURE__ */ w("div", { className: x["header-text"], children: [
1243
- /* @__PURE__ */ n("h3", { className: x["header-title"], children: i }),
1244
- _ && /* @__PURE__ */ w("div", { className: x["status-section"], children: [
1245
- /* @__PURE__ */ n(
1246
- "div",
1247
- {
1248
- className: x["status-dot"],
1249
- "data-status": u,
1250
- "aria-hidden": "true"
1251
- }
1252
- ),
1253
- /* @__PURE__ */ n("span", { className: x["status-text"], children: m })
1254
- ] })
1255
- ] })
1256
- ] }),
1257
- /* @__PURE__ */ w("div", { className: x["header-actions"], children: [
1258
- e,
1259
- l && /* @__PURE__ */ n(Io, { onPress: d })
1260
- ] })
1261
- ] })
1262
- }
1263
- );
1264
- }
1265
- const re = {
1266
- xmlns: "http://www.w3.org/2000/svg",
1267
- viewBox: "0 0 512 512",
1268
- fill: "currentColor",
1269
- role: "img",
1270
- "aria-hidden": !0
1271
- };
1272
- function xo() {
1273
- return /* @__PURE__ */ n("svg", { ...re, children: /* @__PURE__ */ n("path", { d: "M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1C77.5 213.5 86.3 192 104.2 192H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm-64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" }) });
1274
- }
1275
- function Lo({
1276
- onClose: e,
1277
- children: t
1278
- }) {
1279
- const { controller: a } = U();
1280
- return /* @__PURE__ */ n(
1281
- Xe,
1282
- {
1283
- icon: /* @__PURE__ */ n(xo, {}),
1284
- onPress: () => {
1285
- a.downloadTranscript(), e?.();
1286
- },
1287
- children: t ?? "Download transcript"
1288
- }
1289
- );
1290
- }
1291
- function Bo() {
1292
- return /* @__PURE__ */ n("svg", { ...re, children: /* @__PURE__ */ n("path", { d: "M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z" }) });
1293
- }
1294
- function ko({
1295
- onClose: e,
1296
- children: t
1297
- }) {
1298
- const { controller: a } = U();
1299
- return /* @__PURE__ */ n(
1300
- Xe,
1301
- {
1302
- icon: /* @__PURE__ */ n(Bo, {}),
1303
- onPress: () => {
1304
- a.resetConversation(), e?.();
1305
- },
1306
- children: t ?? "Reset conversation"
1307
- }
1308
- );
1309
- }
1310
- function Do() {
1311
- return /* @__PURE__ */ n("svg", { ...re, children: /* @__PURE__ */ n("path", { d: "M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96C42.1 64 0 106.1 0 160v192c0 53.9 42.1 96 96 96h84c6.6 0 12-5.4 12-12z" }) });
1312
- }
1313
- const Oo = "Reset session?", Wo = "You will end this conversation and lose your chat history.", Vo = "Cancel", $o = "Reset session";
1314
- function Ho({
1315
- onClose: e
1316
- }) {
1317
- const { controller: t } = U(), { open: a, close: o } = Sn(), s = v(() => {
1318
- o();
1319
- }, [o]), i = v(() => {
1320
- t.resetSession(), o();
1321
- }, [o, t]);
1322
- return {
1323
- menuItemProps: {
1324
- onPress: v(() => {
1325
- a({
1326
- title: Oo,
1327
- subtitle: Wo,
1328
- actions: [
1329
- {
1330
- label: Vo,
1331
- intent: "secondary",
1332
- appearance: "outline",
1333
- onPress: s
1334
- },
1335
- {
1336
- label: $o,
1337
- intent: "danger",
1338
- onPress: i
1339
- }
1340
- ]
1341
- }), e?.();
1342
- }, [s, i, e, a])
1343
- }
1344
- };
1345
- }
1346
- function Fo({
1347
- onClose: e,
1348
- children: t
1349
- }) {
1350
- const { menuItemProps: a } = Ho({ onClose: e });
1351
- return /* @__PURE__ */ n(Xe, { icon: /* @__PURE__ */ n(Do, {}), onPress: a.onPress, children: t ?? "Reset session" });
1352
- }
1353
- function Uo() {
1354
- return /* @__PURE__ */ n(
1355
- "svg",
1356
- {
1357
- xmlns: "http://www.w3.org/2000/svg",
1358
- viewBox: "0 0 448 512",
1359
- fill: "currentColor",
1360
- role: "img",
1361
- "aria-hidden": !0,
1362
- children: /* @__PURE__ */ n("path", { d: "M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z" })
1363
- }
1364
- );
1365
- }
1366
- function zo({
1367
- onClose: e,
1368
- children: t
1369
- }) {
1370
- const { state: a, controller: o } = U(), { soundsEnabled: s } = a;
1371
- return /* @__PURE__ */ n(
1372
- Vt,
1373
- {
1374
- icon: /* @__PURE__ */ n(Uo, {}),
1375
- isSelected: s,
1376
- onChange: (i) => o.toggleSounds(i),
1377
- children: t ?? "Sounds"
1378
- }
1379
- );
1380
- }
1381
- function Mt() {
1382
- return /* @__PURE__ */ n("svg", { ...re, viewBox: "0 0 384 512", children: /* @__PURE__ */ n("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }) });
1383
- }
1384
- function Pt() {
1385
- return /* @__PURE__ */ n(
1386
- "svg",
1387
- {
1388
- width: "16",
1389
- height: "16",
1390
- viewBox: "0 0 16 16",
1391
- fill: "none",
1392
- xmlns: "http://www.w3.org/2000/svg",
1393
- role: "img",
1394
- "aria-hidden": !0,
1395
- children: /* @__PURE__ */ n(
1396
- "path",
1397
- {
1398
- d: "M12 14.5C12.25 14.5 12.5 14.2812 12.5 14V5H10C9.4375 5 9 4.5625 9 4V1.5H4C3.71875 1.5 3.5 1.75 3.5 2V14C3.5 14.2812 3.71875 14.5 4 14.5H12ZM2 2C2 0.90625 2.875 0 4 0H9.15625C9.6875 0 10.1875 0.21875 10.5625 0.59375L13.4062 3.4375C13.7812 3.8125 14 4.3125 14 4.84375V14C14 15.125 13.0938 16 12 16H4C2.875 16 2 15.125 2 14V2Z",
1399
- fill: "currentColor"
1400
- }
1401
- )
1402
- }
1403
- );
1404
- }
1405
- function Nt() {
1406
- return /* @__PURE__ */ n(
1407
- "svg",
1408
- {
1409
- width: "16",
1410
- height: "16",
1411
- viewBox: "0 0 16 16",
1412
- fill: "none",
1413
- xmlns: "http://www.w3.org/2000/svg",
1414
- role: "img",
1415
- "aria-hidden": !0,
1416
- children: /* @__PURE__ */ n(
1417
- "path",
1418
- {
1419
- d: "M2 14.5H3.5V16H2C0.875 16 0 15.125 0 14V2C0 0.90625 0.875 0 2 0H7.15625C7.6875 0 8.1875 0.21875 8.5625 0.59375L11.4062 3.4375C11.7812 3.8125 12 4.3125 12 4.84375V9.5H10.5V5H8C7.4375 5 7 4.5625 7 4V1.5H2C1.71875 1.5 1.5 1.75 1.5 2V14C1.5 14.2812 1.71875 14.5 2 14.5ZM5.5 11H6.5C7.4375 11 8.25 11.8125 8.25 12.75C8.25 13.7188 7.4375 14.5 6.5 14.5H6V15.5C6 15.7812 5.75 16 5.5 16C5.21875 16 5 15.7812 5 15.5V14V11.5C5 11.25 5.21875 11 5.5 11ZM6.5 13.5C6.90625 13.5 7.25 13.1875 7.25 12.75C7.25 12.3438 6.90625 12 6.5 12H6V13.5H6.5ZM9.5 11H10.5C11.3125 11 12 11.6875 12 12.5V14.5C12 15.3438 11.3125 16 10.5 16H9.5C9.21875 16 9 15.7812 9 15.5V11.5C9 11.25 9.21875 11 9.5 11ZM10.5 15C10.75 15 11 14.7812 11 14.5V12.5C11 12.25 10.75 12 10.5 12H10V15H10.5ZM13 11.5C13 11.25 13.2188 11 13.5 11H15C15.25 11 15.5 11.25 15.5 11.5C15.5 11.7812 15.25 12 15 12H14V13H15C15.25 13 15.5 13.25 15.5 13.5C15.5 13.7812 15.25 14 15 14H14V15.5C14 15.7812 13.75 16 13.5 16C13.2188 16 13 15.7812 13 15.5V13.5V11.5Z",
1420
- fill: "currentColor"
1421
- }
1422
- )
1423
- }
1424
- );
1425
- }
1426
- const jo = "attachment-preview-module__container___VIJkZ", qo = "attachment-preview-module__thumbnailList___by6c8", Go = "attachment-preview-module__thumbnailItem___GNFlf", Ko = "attachment-preview-module__thumbnail___Ckp9-", Xo = "attachment-preview-module__videoWrapper___lmpFI", Zo = "attachment-preview-module__videoPlayBadge___ky5sB", Qo = "attachment-preview-module__fileList___HO6cw", Yo = "attachment-preview-module__fileRow___F61bW", Jo = "attachment-preview-module__fileIcon___azbPW", ea = "attachment-preview-module__fileName___Ye6Av", ta = "attachment-preview-module__removeBtn___TWvdF", H = {
1427
- container: jo,
1428
- thumbnailList: qo,
1429
- thumbnailItem: Go,
1430
- thumbnail: Ko,
1431
- videoWrapper: Xo,
1432
- videoPlayBadge: Zo,
1433
- fileList: Qo,
1434
- fileRow: Yo,
1435
- fileIcon: Jo,
1436
- fileName: ea,
1437
- removeBtn: ta
1438
- };
1439
- function na(e) {
1440
- return e === "application/pdf" ? /* @__PURE__ */ n(Nt, {}) : /* @__PURE__ */ n(Pt, {});
1441
- }
1442
- function oa({ attachment: e, onRemove: t }) {
1443
- return /* @__PURE__ */ w("div", { role: "listitem", className: H.thumbnailItem, children: [
1444
- e.fileType === "video" ? /* @__PURE__ */ w("div", { className: H.videoWrapper, children: [
1445
- /* @__PURE__ */ n(
1446
- "video",
1447
- {
1448
- src: e.previewUrl,
1449
- className: H.thumbnail,
1450
- preload: "metadata",
1451
- muted: !0,
1452
- playsInline: !0,
1453
- "aria-label": e.file.name
1454
- }
1455
- ),
1456
- /* @__PURE__ */ n("span", { className: H.videoPlayBadge, "aria-hidden": !0, children: "▶" })
1457
- ] }) : /* @__PURE__ */ n(
1458
- "img",
1459
- {
1460
- src: e.previewUrl,
1461
- alt: e.file.name,
1462
- className: H.thumbnail
1463
- }
1464
- ),
1465
- /* @__PURE__ */ n(
1466
- "button",
1467
- {
1468
- type: "button",
1469
- className: H.removeBtn,
1470
- "aria-label": `Remove ${e.file.name}`,
1471
- onClick: () => t(e.id),
1472
- children: /* @__PURE__ */ n(Mt, {})
1473
- }
1474
- )
1475
- ] });
1476
- }
1477
- function aa({ attachment: e, onRemove: t }) {
1478
- return /* @__PURE__ */ w("div", { role: "listitem", className: H.fileRow, children: [
1479
- /* @__PURE__ */ n("span", { className: H.fileIcon, "aria-hidden": !0, children: na(e.file.type) }),
1480
- /* @__PURE__ */ n("span", { className: H.fileName, children: e.file.name }),
1481
- /* @__PURE__ */ n(
1482
- "button",
1483
- {
1484
- type: "button",
1485
- className: H.removeBtn,
1486
- "aria-label": `Remove ${e.file.name}`,
1487
- onClick: () => t(e.id),
1488
- children: /* @__PURE__ */ n(Mt, {})
1489
- }
1490
- )
1491
- ] });
1492
- }
1493
- function sa({
1494
- attachments: e,
1495
- onRemove: t
1496
- }) {
1497
- if (!e.length) return null;
1498
- const a = e.filter((s) => s.fileType !== "document"), o = e.filter((s) => s.fileType === "document");
1499
- return /* @__PURE__ */ w("div", { className: H.container, children: [
1500
- a.length > 0 && /* @__PURE__ */ n(
1501
- "div",
1502
- {
1503
- className: H.thumbnailList,
1504
- role: "list",
1505
- "aria-label": "Image and video attachments",
1506
- children: a.map((s) => /* @__PURE__ */ n(
1507
- oa,
1508
- {
1509
- attachment: s,
1510
- onRemove: t
1511
- },
1512
- s.id
1513
- ))
1514
- }
1515
- ),
1516
- o.length > 0 && /* @__PURE__ */ n(
1517
- "div",
1518
- {
1519
- className: H.fileList,
1520
- role: "list",
1521
- "aria-label": "File attachments",
1522
- children: o.map((s) => /* @__PURE__ */ n(
1523
- aa,
1524
- {
1525
- attachment: s,
1526
- onRemove: t
1527
- },
1528
- s.id
1529
- ))
1530
- }
1531
- )
1532
- ] });
1533
- }
1534
- const ra = 25 * 1024 * 1024, ia = ["image/*", "video/*"], St = [
1535
- ".pdf",
1536
- ".doc",
1537
- ".docx",
1538
- ".xls",
1539
- ".xlsx",
1540
- ".ppt",
1541
- ".pptx",
1542
- ".txt",
1543
- ".zip"
1544
- ], ca = new Set(
1545
- St.map((e) => e.slice(1))
1546
- // strip leading '.'
1547
- ), la = [
1548
- ...ia,
1549
- "application/pdf",
1550
- ...St
1551
- ].join(",");
1552
- function da(e) {
1553
- return e.type.startsWith("image/") ? "image" : e.type.startsWith("video/") ? "video" : "document";
1554
- }
1555
- function ua(e) {
1556
- if (e.type.startsWith("image/") || e.type.startsWith("video/"))
1557
- return !0;
1558
- const t = e.name.split(".").pop()?.toLowerCase() ?? "";
1559
- return !!ca.has(t);
1560
- }
1561
- function ma() {
1562
- const { controller: e } = U(), [t, a] = N([]), [o, s] = N(), i = C(null), r = C(/* @__PURE__ */ new Map());
1563
- S(() => {
1564
- const d = r.current;
1565
- return () => {
1566
- d.forEach((u) => URL.revokeObjectURL(u));
1567
- };
1568
- }, []);
1569
- const c = v(
1570
- (d) => {
1571
- const u = d.target.files?.[0];
1572
- if (!u) return;
1573
- if (d.target.value = "", !ua(u)) {
1574
- s("File type not supported.");
1575
- return;
1576
- }
1577
- if (u.size > ra) {
1578
- s("File is too large. Maximum size is 25 MB.");
1579
- return;
1580
- }
1581
- s(void 0), r.current.forEach((g) => URL.revokeObjectURL(g)), r.current.clear();
1582
- const h = `${u.name}-${u.size}-${Date.now()}-${Math.random()}`, p = URL.createObjectURL(u);
1583
- r.current.set(h, p), a([{ id: h, file: u, previewUrl: p, fileType: da(u) }]);
1584
- },
1585
- []
1586
- ), f = v((d) => {
1587
- const u = r.current.get(d);
1588
- u && (URL.revokeObjectURL(u), r.current.delete(d)), a((h) => h.filter((p) => p.id !== d));
1589
- }, []), _ = v(() => {
1590
- r.current.forEach((d) => URL.revokeObjectURL(d)), r.current.clear(), a([]);
1591
- }, []), m = v(() => {
1592
- i.current?.click();
1593
- }, []), l = v(() => {
1594
- if (t.length) {
1595
- for (const d of t) {
1596
- const u = Qe.createMedia({
1597
- file: d.file,
1598
- attachmentUrl: d.previewUrl,
1599
- metadata: { sent_by: me.User }
1600
- });
1601
- e.sendMessage(u, d.file);
1602
- }
1603
- r.current.clear(), a([]);
1604
- }
1605
- }, [t, e]);
1606
- return {
1607
- attachments: t,
1608
- hasAttachments: t.length > 0,
1609
- attachmentError: o,
1610
- fileInputRef: i,
1611
- handleFileInputChange: c,
1612
- handleRemoveAttachment: f,
1613
- clearAttachments: _,
1614
- handleOpenFilePicker: m,
1615
- sendAttachments: l,
1616
- attachmentListProps: {
1617
- attachments: t,
1618
- onRemove: f
1619
- }
1620
- };
1621
- }
1622
- const _a = "audio-waveform-module__waveform___xs7iO", Tt = {
1623
- waveform: _a
1624
- }, ha = 30, fa = 1e3 / ha, pa = 24, st = 2, rt = 3;
1625
- function ga({ analyserNode: e }) {
1626
- const t = C(null), a = C(void 0), o = C(0);
1627
- return S(() => {
1628
- const s = t.current;
1629
- if (!s) return;
1630
- const i = () => {
1631
- const d = window.devicePixelRatio ?? 1, u = Math.max(s.clientWidth, 60);
1632
- s.width = Math.round(u * d), s.height = pa * d;
1633
- };
1634
- i();
1635
- const r = new ResizeObserver(i);
1636
- r.observe(s);
1637
- const c = s.getContext("2d");
1638
- if (!c) return;
1639
- const f = e.frequencyBinCount, _ = new Uint8Array(f);
1640
- function m(d, u, h, p) {
1641
- const g = h / 2;
1642
- if (p <= h) {
1643
- c.beginPath(), c.arc(d + g, u + g, g, 0, Math.PI * 2), c.fill();
1644
- return;
1645
- }
1646
- c.beginPath(), c.moveTo(d + g, u), c.arcTo(d + h, u, d + h, u + g, g), c.lineTo(d + h, u + p - g), c.arcTo(d + h, u + p, d + g, u + p, g), c.lineTo(d + g, u + p), c.arcTo(d, u + p, d, u + p - g, g), c.lineTo(d, u + g), c.arcTo(d, u, d + g, u, g), c.closePath(), c.fill();
1647
- }
1648
- function l(d) {
1649
- if (d - o.current < fa) {
1650
- a.current = requestAnimationFrame(l);
1651
- return;
1652
- }
1653
- o.current = d, e.getByteFrequencyData(_);
1654
- const u = window.devicePixelRatio ?? 1, h = s.width, p = s.height, g = st * u, b = Math.max(
1655
- 1,
1656
- Math.floor(h / u / (st + rt))
1657
- ), M = rt * u;
1658
- c.clearRect(0, 0, h, p), c.fillStyle = "currentColor";
1659
- const T = Math.floor(f * 0.5);
1660
- for (let y = 0; y < b; y++) {
1661
- const P = Math.floor(y / b * T), A = _[P], W = Math.max(g, A / 255 * p * 1.1), V = y * (g + M), $ = (p - W) / 2;
1662
- m(V, $, g, W);
1663
- }
1664
- a.current = requestAnimationFrame(l);
1665
- }
1666
- return a.current = requestAnimationFrame(l), () => {
1667
- a.current !== void 0 && cancelAnimationFrame(a.current), r.disconnect();
1668
- };
1669
- }, [e]), /* @__PURE__ */ n("canvas", { ref: t, className: Tt.waveform, "aria-hidden": !0 });
1670
- }
1671
- const va = 24, it = 2, ct = 3;
1672
- function ba(e, t, a, o, s) {
1673
- const i = o / 2;
1674
- if (s <= o) {
1675
- e.beginPath(), e.arc(t + i, a + i, i, 0, Math.PI * 2), e.fill();
1676
- return;
1677
- }
1678
- e.beginPath(), e.moveTo(t + i, a), e.arcTo(t + o, a, t + o, a + i, i), e.lineTo(t + o, a + s - i), e.arcTo(t + o, a + s, t + i, a + s, i), e.lineTo(t + i, a + s), e.arcTo(t, a + s, t, a + s - i, i), e.lineTo(t, a + i), e.arcTo(t, a, t + i, a, i), e.closePath(), e.fill();
1679
- }
1680
- function wa(e, t, a, o, s) {
1681
- const i = window.devicePixelRatio ?? 1;
1682
- e.clearRect(0, 0, t, a), e.fillStyle = "currentColor";
1683
- const r = it * i, c = ct * i, f = Math.max(
1684
- 1,
1685
- Math.floor(t / i / (it + ct))
1686
- ), _ = r, m = Math.round(s * f), l = new Float32Array(f);
1687
- for (let h = 0; h < f; h++)
1688
- if (o) {
1689
- const p = Math.floor(h / f * o.length), g = Math.max(
1690
- p + 1,
1691
- Math.floor((h + 1) / f * o.length)
1692
- );
1693
- let b = 0;
1694
- for (let M = p; M < g; M++) b += Math.abs(o[M]);
1695
- l[h] = b / (g - p);
1696
- } else
1697
- l[h] = 0.1 + 0.1 * Math.abs(Math.sin(h * 0.9)) + 0.07 * Math.abs(Math.sin(h * 1.7));
1698
- let d = 0;
1699
- for (let h = 0; h < f; h++)
1700
- l[h] > d && (d = l[h]);
1701
- const u = d > 0 ? a * 0.85 / d : 1;
1702
- for (let h = 0; h < f; h++) {
1703
- const p = Math.max(_, l[h] * u), g = h * (r + c), b = (a - p) / 2;
1704
- e.globalAlpha = h < m ? 1 : 0.35, ba(e, g, b, r, p);
1705
- }
1706
- e.globalAlpha = 1;
1707
- }
1708
- function Pe(e, t, a) {
1709
- const o = window.devicePixelRatio ?? 1, s = Math.max(e.clientWidth, 60), i = Math.round(s * o), r = va * o;
1710
- e.width !== i && (e.width = i), e.height !== r && (e.height = r);
1711
- const c = e.getContext("2d");
1712
- c && wa(c, e.width, e.height, t, a);
1713
- }
1714
- function Ca(e) {
1715
- return Math.min(1, Math.max(0, e));
1716
- }
1717
- function lt(e, t) {
1718
- const a = e.getBoundingClientRect();
1719
- return Ca((t - a.left) / a.width);
1720
- }
1721
- function At({
1722
- audioBlob: e,
1723
- progress: t,
1724
- onSeek: a
1725
- }) {
1726
- const o = C(null), s = C(null), i = C(t), r = C(a);
1727
- i.current = t, r.current = a, S(() => {
1728
- const _ = o.current;
1729
- if (!_) return;
1730
- let m = !1;
1731
- s.current = null, Pe(_, null, i.current);
1732
- const l = new ResizeObserver(() => {
1733
- m || Pe(_, s.current, i.current);
1734
- });
1735
- l.observe(_);
1736
- const d = new AudioContext();
1737
- return e.arrayBuffer().then((u) => d.decodeAudioData(u)).then((u) => {
1738
- m || (s.current = u.getChannelData(0), Pe(_, s.current, i.current));
1739
- }).catch(() => {
1740
- }).finally(() => d.close()), () => {
1741
- m = !0, l.disconnect();
1742
- };
1743
- }, [e]), S(() => {
1744
- const _ = o.current;
1745
- _ && Pe(_, s.current, t);
1746
- }, [t]);
1747
- const c = v(
1748
- (_) => {
1749
- if (!r.current) return;
1750
- const m = o.current;
1751
- m && (_.preventDefault(), m.setPointerCapture(_.pointerId), r.current(lt(m, _.clientX)));
1752
- },
1753
- []
1754
- ), f = v(
1755
- (_) => {
1756
- if (!r.current || _.buttons === 0) return;
1757
- const m = o.current;
1758
- m && r.current(lt(m, _.clientX));
1759
- },
1760
- []
1761
- );
1762
- return /* @__PURE__ */ n(
1763
- "canvas",
1764
- {
1765
- ref: o,
1766
- className: Tt.waveform,
1767
- "data-seekable": !!a,
1768
- "aria-hidden": !0,
1769
- onPointerDown: a ? c : void 0,
1770
- onPointerMove: a ? f : void 0
1771
- }
1772
- );
1773
- }
1774
- function ya() {
1775
- return /* @__PURE__ */ n(
1776
- "svg",
1777
- {
1778
- xmlns: "http://www.w3.org/2000/svg",
1779
- viewBox: "0 0 24 24",
1780
- fill: "none",
1781
- stroke: "currentColor",
1782
- strokeWidth: 2.5,
1783
- strokeLinecap: "round",
1784
- role: "img",
1785
- "aria-hidden": !0,
1786
- children: /* @__PURE__ */ n("path", { d: "M18 6L6 18M6 6l12 12" })
1787
- }
1788
- );
1789
- }
1790
- function It() {
1791
- return /* @__PURE__ */ w(
1792
- "svg",
1793
- {
1794
- xmlns: "http://www.w3.org/2000/svg",
1795
- viewBox: "0 0 24 24",
1796
- fill: "currentColor",
1797
- role: "img",
1798
- "aria-hidden": !0,
1799
- children: [
1800
- /* @__PURE__ */ n("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
1801
- /* @__PURE__ */ n("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
1802
- ]
1803
- }
1804
- );
1805
- }
1806
- function Ye() {
1807
- return /* @__PURE__ */ n(
1808
- "svg",
1809
- {
1810
- xmlns: "http://www.w3.org/2000/svg",
1811
- viewBox: "0 0 24 24",
1812
- fill: "currentColor",
1813
- role: "img",
1814
- "aria-hidden": !0,
1815
- children: /* @__PURE__ */ n("polygon", { points: "5,3 19,12 5,21" })
1816
- }
1817
- );
1818
- }
1819
- const J = {
1820
- "recording-controls": "audio-input-module__recording-controls___Hj6Qf",
1821
- "recording-controls-enter": "audio-input-module__recording-controls-enter___0w-HZ",
1822
- "recording-controls-exit": "audio-input-module__recording-controls-exit___Bp3tQ",
1823
- "recording-side-btn": "audio-input-module__recording-side-btn___tKWQ6",
1824
- "recording-pill": "audio-input-module__recording-pill___mn3nx",
1825
- "recording-pill--recording": "audio-input-module__recording-pill--recording___piWoa",
1826
- "recording-pill--preview": "audio-input-module__recording-pill--preview___Tnk1m",
1827
- "recording-timer": "audio-input-module__recording-timer___kyV0m",
1828
- "preview-play-btn": "audio-input-module__preview-play-btn___WJatV"
1829
- };
1830
- function Ma({
1831
- showControls: e,
1832
- recordingControlsClassName: t,
1833
- frozenIsRecording: a,
1834
- frozenIsPreview: o,
1835
- analyserNode: s,
1836
- audioBlob: i,
1837
- audioProgress: r,
1838
- isPlaying: c,
1839
- isPreview: f,
1840
- handlePlayPause: _,
1841
- handleSeekPreview: m,
1842
- handleCancelRecording: l,
1843
- timerDisplay: d,
1844
- objectUrl: u,
1845
- audioRef: h,
1846
- handleAudioPlay: p,
1847
- handleAudioPause: g,
1848
- handleAudioEnded: b,
1849
- handleAudioLoadedMetadata: M,
1850
- handleAudioTimeUpdate: T
1851
- }) {
1852
- return /* @__PURE__ */ w(Ee, { children: [
1853
- e && /* @__PURE__ */ w(
1854
- "div",
1855
- {
1856
- className: E(
1857
- J["recording-controls"],
1858
- t
1859
- ),
1860
- children: [
1861
- /* @__PURE__ */ n(
1862
- "button",
1863
- {
1864
- type: "button",
1865
- className: J["recording-side-btn"],
1866
- "aria-label": f ? "Discard recording" : "Cancel recording",
1867
- onClick: l,
1868
- children: /* @__PURE__ */ n(ya, {})
1869
- }
1870
- ),
1871
- /* @__PURE__ */ w(
1872
- "div",
1873
- {
1874
- className: E(
1875
- J["recording-pill"],
1876
- a ? J["recording-pill--recording"] : J["recording-pill--preview"]
1877
- ),
1878
- children: [
1879
- o && /* @__PURE__ */ n(
1880
- "button",
1881
- {
1882
- type: "button",
1883
- className: J["preview-play-btn"],
1884
- "aria-label": c ? "Pause" : "Play recording",
1885
- onClick: _,
1886
- children: c ? /* @__PURE__ */ n(It, {}) : /* @__PURE__ */ n(Ye, {})
1887
- }
1888
- ),
1889
- a && s ? /* @__PURE__ */ n(ga, { analyserNode: s }) : o && i ? /* @__PURE__ */ n(
1890
- At,
1891
- {
1892
- audioBlob: i,
1893
- progress: r,
1894
- onSeek: m
1895
- }
1896
- ) : null,
1897
- /* @__PURE__ */ n("span", { className: J["recording-timer"], children: d })
1898
- ]
1899
- }
1900
- )
1901
- ]
1902
- }
1903
- ),
1904
- u && /* @__PURE__ */ n(
1905
- "audio",
1906
- {
1907
- ref: h,
1908
- src: u,
1909
- onPlay: p,
1910
- onPause: g,
1911
- onEnded: b,
1912
- onLoadedMetadata: M,
1913
- onTimeUpdate: T,
1914
- style: { display: "none" }
1915
- }
1916
- )
1917
- ] });
1918
- }
1919
- function Pa() {
1920
- return typeof window < "u" && typeof navigator.mediaDevices?.getUserMedia == "function" && typeof MediaRecorder < "u";
1921
- }
1922
- function Na() {
1923
- const [e, t] = N("idle"), [a, o] = N(void 0), [s, i] = N(
1924
- void 0
1925
- ), [r, c] = N(!1), f = Pa(), _ = C(void 0), m = C(void 0), l = C(void 0), d = C([]), u = v(() => {
1926
- m.current?.getTracks().forEach((b) => b.stop()), m.current = void 0, l.current?.close(), l.current = void 0, i(void 0);
1927
- }, []), h = v(async () => {
1928
- if (!f || e !== "idle") return;
1929
- c(!1);
1930
- let b;
1931
- try {
1932
- b = await navigator.mediaDevices.getUserMedia({ audio: !0 });
1933
- } catch (A) {
1934
- A instanceof Error && A.name === "NotAllowedError" && c(!0);
1935
- return;
1936
- }
1937
- m.current = b;
1938
- const M = new AudioContext();
1939
- l.current = M;
1940
- const T = M.createMediaStreamSource(b), y = M.createAnalyser();
1941
- y.fftSize = 256, T.connect(y), i(y), d.current = [];
1942
- const P = new MediaRecorder(b);
1943
- _.current = P, P.ondataavailable = (A) => {
1944
- A.data.size > 0 && d.current.push(A.data);
1945
- }, P.start(), t("recording");
1946
- }, [f, e]), p = v(() => {
1947
- const b = _.current;
1948
- !b || e !== "recording" || (b.onstop = () => {
1949
- const M = new Blob(d.current, {
1950
- type: b.mimeType || "audio/webm"
1951
- });
1952
- o(M), t("preview");
1953
- }, b.stop(), u());
1954
- }, [e, u]), g = v(() => {
1955
- const b = _.current;
1956
- b && b.state !== "inactive" && (b.onstop = null, b.stop()), u(), d.current = [], o(void 0), t("idle");
1957
- }, [u]);
1958
- return S(() => () => {
1959
- const b = _.current;
1960
- b && b.state !== "inactive" && (b.onstop = null, b.stop()), u();
1961
- }, [u]), {
1962
- recorderState: e,
1963
- audioBlob: a,
1964
- analyserNode: s,
1965
- isSupported: f,
1966
- permissionError: r,
1967
- startRecording: h,
1968
- confirmRecording: p,
1969
- cancelRecording: g
1970
- };
1971
- }
1972
- function Ie(e) {
1973
- const t = String(Math.floor(e / 60)).padStart(2, "0"), a = String(Math.floor(e % 60)).padStart(2, "0");
1974
- return `${t}:${a}`;
1975
- }
1976
- const Ge = "audio-recording", de = "audio-preview", Sa = 120;
1977
- function Ta(e) {
1978
- return new Promise((t, a) => {
1979
- const o = new FileReader();
1980
- o.onloadend = () => t(o.result), o.onerror = a, o.readAsDataURL(e);
1981
- });
1982
- }
1983
- function Aa(e) {
1984
- const [t, a] = N(e), [o, s] = N(!1), i = C();
1985
- return S(() => (e ? (clearTimeout(i.current), a(!0), s(!1)) : (s(!0), i.current = setTimeout(() => {
1986
- a(!1), s(!1);
1987
- }, Sa)), () => {
1988
- clearTimeout(i.current);
1989
- }), [e]), { showControls: t, isExiting: o };
1990
- }
1991
- function Ia(e, t) {
1992
- const { controller: a } = U(), { activeId: o, setActive: s, clearActive: i } = Le(), {
1993
- recorderState: r,
1994
- audioBlob: c,
1995
- analyserNode: f,
1996
- isSupported: _,
1997
- startRecording: m,
1998
- confirmRecording: l,
1999
- cancelRecording: d
2000
- } = Na(), u = e.webchatClientSettingsBehaviors.input.isAudioRecordingVisible && _, [h, p] = N(0), g = C(
2001
- void 0
2002
- ), b = C(null), [M, T] = N(""), [y, P] = N(!1), [A, W] = N(0), [V, $] = N(0);
2003
- S(() => (r === "recording" ? (p(0), g.current = setInterval(() => {
2004
- p((R) => R + 1);
2005
- }, 1e3)) : (clearInterval(g.current), r === "idle" && (p(0), W(0), $(0), P(!1))), () => clearInterval(g.current)), [r]), S(() => {
2006
- if (!c) {
2007
- T("");
2008
- return;
2009
- }
2010
- const R = URL.createObjectURL(c);
2011
- return T(R), () => URL.revokeObjectURL(R);
2012
- }, [c]);
2013
- const j = Ie(r === "recording" ? h : y ? V : A), q = A > 0 ? V / A : 0;
2014
- S(() => {
2015
- o !== de && y && b.current?.pause();
2016
- }, [o, y]);
2017
- const B = v(() => {
2018
- P(!0), s(de);
2019
- }, [s]), G = v(() => {
2020
- P(!1), i(de);
2021
- }, [i]), ee = v(() => {
2022
- P(!1), i(de);
2023
- }, [i]), Q = v(
2024
- (R) => {
2025
- W(Math.round(R.currentTarget.duration));
2026
- },
2027
- []
2028
- ), Ce = v(
2029
- (R) => {
2030
- $(Math.round(R.currentTarget.currentTime));
2031
- },
2032
- []
2033
- ), ke = v(() => {
2034
- const R = b.current;
2035
- R && (y ? R.pause() : R.play().catch(() => P(!1)));
2036
- }, [y]), De = v(() => {
2037
- u && (s(Ge), m());
2038
- }, [u, s, m]), Oe = v(() => {
2039
- i(Ge), l();
2040
- }, [i, l]), We = v(() => {
2041
- i(Ge), i(de), d();
2042
- }, [i, d]), ce = v(
2043
- (R) => {
2044
- !b.current || A === 0 || (b.current.currentTime = R * A, $(Math.round(b.current.currentTime)));
2045
- },
2046
- [A]
2047
- ), Ve = v(() => {
2048
- b.current?.pause(), i(de), c && Ta(c).then((R) => {
2049
- const je = Qe.createAudio({
2050
- attachmentContent: R,
2051
- metadata: { sent_by: me.User }
2052
- });
2053
- a.sendMessage(je);
2054
- }).catch(() => {
2055
- }).finally(() => {
2056
- d();
2057
- });
2058
- }, [c, a, d, i]), he = r !== "idle", { showControls: $e, isExiting: fe } = Aa(he), pe = C(r);
2059
- he && (pe.current = r);
2060
- const He = pe.current === "recording", ae = pe.current === "preview", K = r === "preview", Fe = r === "recording", Ue = he, ze = fe ? J["recording-controls-exit"] : J["recording-controls-enter"];
2061
- return {
2062
- audioRecordingAvailable: u,
2063
- hideBaseContent: Ue,
2064
- isPreview: K,
2065
- isRecording: Fe,
2066
- handleMicrophoneClick: De,
2067
- handleConfirmRecording: Oe,
2068
- handleSendRecording: Ve,
2069
- overlayProps: {
2070
- showControls: $e,
2071
- recordingControlsClassName: ze,
2072
- frozenIsRecording: He,
2073
- frozenIsPreview: ae,
2074
- analyserNode: f,
2075
- audioBlob: c,
2076
- audioProgress: q,
2077
- isPlaying: y,
2078
- isPreview: K,
2079
- handlePlayPause: ke,
2080
- handleSeekPreview: ce,
2081
- handleCancelRecording: We,
2082
- timerDisplay: j,
2083
- objectUrl: M,
2084
- audioRef: b,
2085
- handleAudioPlay: B,
2086
- handleAudioPause: G,
2087
- handleAudioEnded: ee,
2088
- handleAudioLoadedMetadata: Q,
2089
- handleAudioTimeUpdate: Ce
2090
- }
2091
- };
2092
- }
2093
- function Ea() {
2094
- return /* @__PURE__ */ n("svg", { ...re, viewBox: "0 0 448 512", children: /* @__PURE__ */ n("path", { d: "M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z" }) });
2095
- }
2096
- function Ra() {
2097
- return /* @__PURE__ */ n(
2098
- "svg",
2099
- {
2100
- xmlns: "http://www.w3.org/2000/svg",
2101
- viewBox: "0 0 24 24",
2102
- fill: "none",
2103
- stroke: "currentColor",
2104
- strokeWidth: 2.5,
2105
- strokeLinecap: "round",
2106
- strokeLinejoin: "round",
2107
- role: "img",
2108
- "aria-hidden": !0,
2109
- children: /* @__PURE__ */ n("path", { d: "M20 6L9 17l-5-5" })
2110
- }
2111
- );
2112
- }
2113
- function xa() {
2114
- return /* @__PURE__ */ n("svg", { ...re, children: /* @__PURE__ */ n("path", { d: "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }) });
2115
- }
2116
- function La() {
2117
- return /* @__PURE__ */ n(
2118
- "svg",
2119
- {
2120
- xmlns: "http://www.w3.org/2000/svg",
2121
- viewBox: "0 0 24 24",
2122
- fill: "none",
2123
- stroke: "currentColor",
2124
- strokeWidth: 2,
2125
- strokeLinecap: "round",
2126
- strokeLinejoin: "round",
2127
- role: "img",
2128
- "aria-hidden": !0,
2129
- children: /* @__PURE__ */ n("path", { d: "M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" })
2130
- }
2131
- );
2132
- }
2133
- function dt() {
2134
- return /* @__PURE__ */ n("svg", { ...re, children: /* @__PURE__ */ n("path", { d: "M57.6 35.8C23.1 20.6-11.3 57.4 6.1 90.9l63 121.2c4.4 8.4 12.6 14.1 22 15.3L266 249.3c3.4 .4 6 3.3 6 6.7s-2.6 6.3-6 6.7L91.1 284.6c-9.4 1.2-17.6 6.9-22 15.3L6.1 421.1c-17.4 33.5 17 70.2 51.6 55.1L492.9 285.3c25.5-11.2 25.5-47.4 0-58.6L57.6 35.8z" }) });
2135
- }
2136
- const Ba = "webchat-input-module__base___TZXU7", ka = "webchat-input-module__branding___ReLzJ", I = {
2137
- default: "webchat-input-module__default___tHS5e",
2138
- base: Ba,
2139
- "input-form": "webchat-input-module__input-form___GnKc7",
2140
- "input-row": "webchat-input-module__input-row___uqTs6",
2141
- branding: ka,
2142
- "input-form--active": "webchat-input-module__input-form--active___ZioHn",
2143
- "input-field": "webchat-input-module__input-field___c4r26",
2144
- "primary-action-base": "webchat-input-module__primary-action-base___UfC2U",
2145
- "primary-action-send": "webchat-input-module__primary-action-send___3ZCtv",
2146
- "primary-action-mic": "webchat-input-module__primary-action-mic___cB0BZ",
2147
- "icon-slot": "webchat-input-module__icon-slot___VBqqX",
2148
- "icon-face": "webchat-input-module__icon-face___9gNV-",
2149
- "icon-send": "webchat-input-module__icon-send___iTZQ1",
2150
- "action-button": "webchat-input-module__action-button___QnDXK",
2151
- "icon-mic": "webchat-input-module__icon-mic___m8zbn",
2152
- "input-container": "webchat-input-module__input-container___N2B7J",
2153
- "attachment-error": "webchat-input-module__attachment-error___JuZwS",
2154
- "primary-action-confirm": "webchat-input-module__primary-action-confirm___-iVtj",
2155
- "icon-confirm": "webchat-input-module__icon-confirm___0cjMa",
2156
- "action-bar": "webchat-input-module__action-bar___gEuJH",
2157
- "content-hidden": "webchat-input-module__content-hidden___9pFoD"
2158
- };
2159
- function Da(e, t) {
2160
- const a = e.trim();
2161
- return a ? t.some((o) => {
2162
- if (o.message && a === o.message)
2163
- return !0;
2164
- if (!o.regex) return !1;
2165
- try {
2166
- return new RegExp(o.regex).test(a);
2167
- } catch {
2168
- return !1;
2169
- }
2170
- }) : !1;
2171
- }
2172
- function Oa(e, t, a) {
2173
- const { controller: o } = U(), {
2174
- placeholder: s = "Message...",
2175
- disabled: i,
2176
- variant: r = "default",
2177
- showBranding: c = !0,
2178
- "aria-label": f,
2179
- className: _,
2180
- onEmojiClick: m,
2181
- onAttachmentClick: l,
2182
- onMicrophoneClick: d,
2183
- onUserMessageSent: u,
2184
- ...h
2185
- } = e, [p, g] = N(""), b = C(""), M = t.webchatClientSettingsBehaviors.input, T = M.isTextInputEnabled && !i, y = Da(
2186
- p,
2187
- M.blockInputs
2188
- ), P = p.trim().length > 0, {
2189
- hasAttachments: A,
2190
- attachmentError: W,
2191
- fileInputRef: V,
2192
- handleFileInputChange: $,
2193
- handleOpenFilePicker: j,
2194
- sendAttachments: q,
2195
- attachmentListProps: B
2196
- } = ma(), {
2197
- audioRecordingAvailable: G,
2198
- hideBaseContent: ee,
2199
- isPreview: Q,
2200
- isRecording: Ce,
2201
- handleMicrophoneClick: ke,
2202
- handleConfirmRecording: De,
2203
- handleSendRecording: Oe,
2204
- overlayProps: We
2205
- } = Ia(t), ce = v(() => {
2206
- if (!T || y) return;
2207
- const X = b.current.trim();
2208
- if (X) {
2209
- const ye = Qe.createText({
2210
- text: X,
2211
- metadata: {
2212
- sent_by: me.User
2213
- }
2214
- });
2215
- u?.(), o.sendMessage(ye), b.current = "", g("");
2216
- }
2217
- }, [o, T, y, u]), Ve = v(
2218
- (X) => {
2219
- X.preventDefault(), A && q(), ce();
2220
- },
2221
- [A, q, ce]
2222
- ), he = v(
2223
- (X) => {
2224
- const ye = X.target.value;
2225
- b.current = ye, g(ye);
2226
- },
2227
- []
2228
- ), $e = v(
2229
- (X) => {
2230
- X.key === "Enter" && !X.shiftKey && (X.preventDefault(), ce());
2231
- },
2232
- [ce]
2233
- ), fe = P || A, pe = G ? !!i || !T || P && y : !!i || !T || !fe || P && y, He = G ? fe ? "submit" : "button" : "submit", ae = !Ce && !Q && G && !fe, K = Ce, Fe = !ae && !K, Ue = ae ? I["primary-action-mic"] : K ? I["primary-action-confirm"] : I["primary-action-send"], ze = K || Q ? "button" : He, tt = K ? !1 : pe, R = K ? De : Q ? Oe : ae ? ke : void 0, je = ae ? "Record voice message" : K ? "Confirm recording" : "Send message", Ot = v(() => {
2234
- j(), l?.();
2235
- }, [j, l]);
2236
- return {
2237
- // Input wrapper props
2238
- inputProps: {
2239
- ...h,
2240
- ref: a,
2241
- "aria-label": f || s,
2242
- "data-webchat-input": ""
2243
- },
2244
- // Form state and handlers
2245
- inputValue: p,
2246
- hasText: P,
2247
- handleSubmit: Ve,
2248
- onEmojiClick: m,
2249
- onAttachmentClick: Ot,
2250
- // Attachment preview
2251
- hasAttachments: A,
2252
- attachmentError: W,
2253
- fileInputRef: V,
2254
- handleFileInputChange: $,
2255
- attachmentListProps: B,
2256
- // Input field props
2257
- fieldProps: {
2258
- value: p,
2259
- onChange: he,
2260
- onKeyDown: $e,
2261
- placeholder: s,
2262
- disabled: !T,
2263
- rows: 1
2264
- // minimum rows; CSS field-sizing: content allows growth up to --webchat-input-max-rows
2265
- },
2266
- // CSS class variants
2267
- variants: {
2268
- variant: r,
2269
- className: _
2270
- },
2271
- isInputEnabled: T,
2272
- isInputDisabled: i,
2273
- inputBehavior: M,
2274
- showBranding: c,
2275
- // Audio overlay (passed to AudioInput)
2276
- overlayProps: We,
2277
- hideBaseContent: ee,
2278
- audioRecordingAvailable: G,
2279
- // Primary action button
2280
- primaryBgClass: Ue,
2281
- primaryType: ze,
2282
- isPrimaryDisabled: tt,
2283
- primaryHandler: R,
2284
- primaryLabel: je,
2285
- // Action bar
2286
- showMic: ae,
2287
- showConfirm: K,
2288
- showSend: Fe
2289
- };
2290
- }
2291
- const Wa = F(I.base, {
2292
- variants: {
2293
- variant: {
2294
- default: I.default
2295
- }
2296
- },
2297
- defaultVariants: {
2298
- variant: "default"
2299
- }
2300
- });
2301
- function Va(e) {
2302
- const { state: t } = U(), a = C(null), {
2303
- inputProps: o,
2304
- handleSubmit: s,
2305
- fieldProps: i,
2306
- variants: r,
2307
- showBranding: c,
2308
- onEmojiClick: f,
2309
- onAttachmentClick: _,
2310
- isInputDisabled: m,
2311
- inputBehavior: l,
2312
- overlayProps: d,
2313
- hideBaseContent: u,
2314
- audioRecordingAvailable: h,
2315
- primaryBgClass: p,
2316
- primaryType: g,
2317
- isPrimaryDisabled: b,
2318
- primaryHandler: M,
2319
- primaryLabel: T,
2320
- showMic: y,
2321
- showConfirm: P,
2322
- showSend: A,
2323
- hasAttachments: W,
2324
- attachmentError: V,
2325
- fileInputRef: $,
2326
- handleFileInputChange: j,
2327
- attachmentListProps: q
2328
- } = Oa(e, t, a), { icons: B } = e;
2329
- if (!l.isComposerVisible)
2330
- return null;
2331
- const G = c ? /* @__PURE__ */ n("p", { className: I.branding, children: "Powered by Hubtype" }) : void 0;
2332
- return /* @__PURE__ */ w(
2333
- "div",
2334
- {
2335
- ...o,
2336
- className: Wa(r),
2337
- "data-webchat-input": !0,
2338
- "data-attachments-enabled": String(l.areAttachmentsVisible),
2339
- "data-emoji-picker-enabled": String(l.isEmojiPickerVisible),
2340
- children: [
2341
- /* @__PURE__ */ n("div", { className: I["input-container"], children: /* @__PURE__ */ w(
2342
- "form",
2343
- {
2344
- onSubmit: s,
2345
- className: E(
2346
- I["input-form"],
2347
- u && I["input-form--active"]
2348
- ),
2349
- children: [
2350
- W && /* @__PURE__ */ n(sa, { ...q }),
2351
- V && /* @__PURE__ */ n("p", { className: I["attachment-error"], role: "alert", children: V }),
2352
- /* @__PURE__ */ w("div", { className: I["input-row"], children: [
2353
- h && /* @__PURE__ */ n(Ma, { ...d }),
2354
- /* @__PURE__ */ n(
2355
- "textarea",
2356
- {
2357
- ...i,
2358
- className: E(
2359
- I["input-field"],
2360
- u && I["content-hidden"]
2361
- ),
2362
- inert: u ? "" : void 0
2363
- }
2364
- ),
2365
- /* @__PURE__ */ w(
2366
- "div",
2367
- {
2368
- className: E(
2369
- I["action-bar"],
2370
- u && I["content-hidden"]
2371
- ),
2372
- role: "group",
2373
- "aria-label": "Message actions",
2374
- inert: u ? "" : void 0,
2375
- children: [
2376
- l.isEmojiPickerVisible && /* @__PURE__ */ n(
2377
- "button",
2378
- {
2379
- type: "button",
2380
- className: I["action-button"],
2381
- "aria-label": "Emoji",
2382
- disabled: m,
2383
- onClick: f,
2384
- children: B?.emoji ?? /* @__PURE__ */ n(xa, {})
2385
- }
2386
- ),
2387
- l.areAttachmentsVisible && /* @__PURE__ */ n(
2388
- "button",
2389
- {
2390
- type: "button",
2391
- className: I["action-button"],
2392
- "aria-label": "Attach file",
2393
- disabled: m,
2394
- onClick: _,
2395
- children: B?.attachment ?? /* @__PURE__ */ n(Ea, {})
2396
- }
2397
- )
2398
- ]
2399
- }
2400
- ),
2401
- /* @__PURE__ */ n(
2402
- "button",
2403
- {
2404
- type: g,
2405
- className: E(I["primary-action-base"], p),
2406
- disabled: b,
2407
- "aria-label": T,
2408
- onClick: M,
2409
- children: /* @__PURE__ */ n("span", { className: I["icon-slot"], children: h ? /* @__PURE__ */ w(Ee, { children: [
2410
- /* @__PURE__ */ n(
2411
- "span",
2412
- {
2413
- "aria-hidden": !0,
2414
- className: E(I["icon-face"], I["icon-mic"]),
2415
- "data-visible": y ? "true" : "false",
2416
- children: B?.microphone ?? /* @__PURE__ */ n(La, {})
2417
- }
2418
- ),
2419
- /* @__PURE__ */ n(
2420
- "span",
2421
- {
2422
- "aria-hidden": !0,
2423
- className: E(
2424
- I["icon-face"],
2425
- I["icon-confirm"]
2426
- ),
2427
- "data-visible": P ? "true" : "false",
2428
- children: /* @__PURE__ */ n(Ra, {})
2429
- }
2430
- ),
2431
- /* @__PURE__ */ n(
2432
- "span",
2433
- {
2434
- "aria-hidden": !0,
2435
- className: E(I["icon-face"], I["icon-send"]),
2436
- "data-visible": A ? "true" : "false",
2437
- children: B?.send ?? /* @__PURE__ */ n(dt, {})
2438
- }
2439
- )
2440
- ] }) : /* @__PURE__ */ n(
2441
- "span",
2442
- {
2443
- "aria-hidden": !0,
2444
- className: E(I["icon-face"], I["icon-send"]),
2445
- "data-visible": "true",
2446
- children: B?.send ?? /* @__PURE__ */ n(dt, {})
2447
- }
2448
- ) })
2449
- }
2450
- )
2451
- ] }),
2452
- /* @__PURE__ */ n(
2453
- "input",
2454
- {
2455
- ref: $,
2456
- type: "file",
2457
- accept: la,
2458
- onChange: j,
2459
- style: { display: "none" },
2460
- "aria-hidden": !0,
2461
- tabIndex: -1
2462
- }
2463
- )
2464
- ]
2465
- }
2466
- ) }),
2467
- G
2468
- ]
2469
- }
2470
- );
2471
- }
2472
- const $a = "message-bubble-module__base___WzTAP", Ha = "message-bubble-module__bot___PcXmL", Fa = "message-bubble-module__agent___WGfzX", Ua = "message-bubble-module__user___lFMMm", za = "message-bubble-module__system___e8-FD", ja = "message-bubble-module__sending___P9nK-", qa = "message-bubble-module__error___mine7", te = {
2473
- base: $a,
2474
- bot: Ha,
2475
- agent: Fa,
2476
- user: Ua,
2477
- system: za,
2478
- sending: ja,
2479
- error: qa
2480
- }, Ga = F(te.base, {
2481
- variants: {
2482
- variant: {
2483
- user: te.user,
2484
- bot: te.bot,
2485
- system: te.system,
2486
- agent: te.agent
2487
- },
2488
- status: {
2489
- sending: te.sending,
2490
- sent: te.sent,
2491
- error: te.error
2492
- }
2493
- },
2494
- defaultVariants: { variant: "bot", status: "sent" }
2495
- }), Je = O(
2496
- ({ variant: e = "bot", status: t = "sent", children: a, className: o }, s) => /* @__PURE__ */ n(
2497
- "div",
2498
- {
2499
- ref: s,
2500
- className: Ga({
2501
- variant: e,
2502
- status: t,
2503
- className: o
2504
- }),
2505
- "data-webchat-message-bubble": !0,
2506
- children: a
2507
- }
2508
- )
2509
- ), Ka = "typing-message-module__typingDot___cCobM", Xa = "typing-message-module__typingDots___LwFeC", Ne = {
2510
- typingDot: Ka,
2511
- typingDots: Xa
2512
- }, Za = ({
2513
- isVisible: e = !1,
2514
- className: t
2515
- }) => e ? /* @__PURE__ */ n(Je, { variant: "bot", className: t, children: /* @__PURE__ */ w("div", { "data-testid": "typing-indicator", className: Ne.typingDots, children: [
2516
- /* @__PURE__ */ n("span", { className: Ne.typingDot }),
2517
- /* @__PURE__ */ n("span", { className: Ne.typingDot }),
2518
- /* @__PURE__ */ n("span", { className: Ne.typingDot })
2519
- ] }) }) : null, Qa = "message-avatar-module__container___-EX1c", Ya = "message-avatar-module__base___RPKhe", Ja = "message-avatar-module__circle___M68eH", es = "message-avatar-module__square___PjaDi", ts = "message-avatar-module__image___rxwYA", ns = "message-avatar-module__svg___eMikf", os = "message-avatar-module__fallback___2Xa-W", as = "message-avatar-module__name___L20Ht", ss = "message-avatar-module__small___gBALc", rs = "message-avatar-module__medium___WSeE1", is = "message-avatar-module__large___a-hNp", cs = "message-avatar-module__bot___2Bh0Y", ls = "message-avatar-module__agent___MemVD", D = {
2520
- container: Qa,
2521
- base: Ya,
2522
- circle: Ja,
2523
- square: es,
2524
- image: ts,
2525
- svg: ns,
2526
- fallback: os,
2527
- name: as,
2528
- small: ss,
2529
- medium: rs,
2530
- large: is,
2531
- bot: cs,
2532
- agent: ls
2533
- }, ds = F(D.base, {
2534
- variants: {
2535
- variant: {
2536
- user: D.user,
2537
- bot: D.bot,
2538
- system: D.system,
2539
- agent: D.agent
2540
- },
2541
- size: {
2542
- small: D.small,
2543
- medium: D.medium,
2544
- large: D.large
2545
- },
2546
- shape: {
2547
- circle: D.circle,
2548
- square: D.square
2549
- }
2550
- },
2551
- defaultVariants: { variant: "bot", size: "medium", shape: "circle" }
2552
- }), et = O(
2553
- ({
2554
- variant: e = "bot",
2555
- size: t = "medium",
2556
- shape: a = "circle",
2557
- src: o,
2558
- alt: s,
2559
- svg: i,
2560
- showName: r = !1,
2561
- name: c,
2562
- fallback: f,
2563
- className: _
2564
- }, m) => /* @__PURE__ */ w(
2565
- "div",
2566
- {
2567
- ref: m,
2568
- className: D.container,
2569
- "data-webchat-message-avatar": !0,
2570
- children: [
2571
- /* @__PURE__ */ n(
2572
- "div",
2573
- {
2574
- className: ds({
2575
- variant: e,
2576
- size: t,
2577
- shape: a,
2578
- className: _
2579
- }),
2580
- children: i ? /* @__PURE__ */ n(
2581
- "div",
2582
- {
2583
- className: D.svg,
2584
- dangerouslySetInnerHTML: { __html: i },
2585
- role: "img",
2586
- "aria-label": s || `${e} avatar`
2587
- }
2588
- ) : o ? /* @__PURE__ */ n(
2589
- "img",
2590
- {
2591
- src: o,
2592
- alt: s || `${e} avatar`,
2593
- className: D.image
2594
- }
2595
- ) : /* @__PURE__ */ n("div", { className: D.fallback, children: f || (e === "bot" ? "🤖" : e === "agent" ? "👨‍💼" : "👤") })
2596
- }
2597
- ),
2598
- r && c && /* @__PURE__ */ n("div", { className: D.name, children: c })
2599
- ]
2600
- }
2601
- )
2602
- ), us = "message-info-module__base___yO0Cd", ms = "message-info-module__senderName___fP58-", _s = "message-info-module__timestamp___xwDsF", hs = "message-info-module__status___jPwtz", fs = "message-info-module__top___NK5CY", ps = "message-info-module__bottom___NE4Rs", gs = "message-info-module__bot___xlQbg", vs = "message-info-module__agent___ckeYQ", bs = "message-info-module__user___bgEi-", ws = "message-info-module__system___MF1CS", Z = {
2603
- base: us,
2604
- senderName: ms,
2605
- timestamp: _s,
2606
- status: hs,
2607
- top: fs,
2608
- bottom: ps,
2609
- bot: gs,
2610
- agent: vs,
2611
- user: bs,
2612
- system: ws
2613
- }, Cs = F(Z.base, {
2614
- variants: {
2615
- variant: {
2616
- user: Z.user,
2617
- bot: Z.bot,
2618
- system: Z.system,
2619
- agent: Z.agent
2620
- },
2621
- position: {
2622
- top: Z.top,
2623
- bottom: Z.bottom
2624
- }
2625
- },
2626
- defaultVariants: { variant: "bot", position: "bottom" }
2627
- }), ys = (e) => {
2628
- if (e)
2629
- return typeof e == "string" ? e : e.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
2630
- }, Et = O(
2631
- ({
2632
- variant: e = "bot",
2633
- position: t = "bottom",
2634
- showTimestamp: a = !0,
2635
- timestamp: o,
2636
- showStatus: s = !1,
2637
- status: i,
2638
- avatarProps: r,
2639
- senderName: c,
2640
- className: f,
2641
- children: _
2642
- }, m) => {
2643
- const l = (h) => {
2644
- switch (h) {
2645
- case "sending":
2646
- return "Sending...";
2647
- case "sent":
2648
- return "Sent";
2649
- case "error":
2650
- return "Failed to send";
2651
- default:
2652
- return "";
2653
- }
2654
- }, d = ys(o);
2655
- return a && d || s || _ || r || c ? /* @__PURE__ */ w(
2656
- "div",
2657
- {
2658
- ref: m,
2659
- className: Cs({
2660
- variant: e,
2661
- position: t,
2662
- className: f
2663
- }),
2664
- "data-webchat-message-info": !0,
2665
- children: [
2666
- r && /* @__PURE__ */ n(et, { ...r }),
2667
- c && /* @__PURE__ */ n("span", { className: Z.senderName, children: c }),
2668
- a && d && /* @__PURE__ */ n("span", { className: Z.timestamp, children: d }),
2669
- s && i && /* @__PURE__ */ n("span", { className: Z.status, "data-status": i, children: l(i) }),
2670
- _
2671
- ]
2672
- }
2673
- ) : null;
2674
- }
2675
- ), Ms = "message-module__base___Ki7QB", Ps = "message-module__bot___vw-E6", Ns = "message-module__agent___2wXra", Ss = "message-module__user___BSpcY", Ts = "message-module__system___-jvsr", ne = {
2676
- base: Ms,
2677
- bot: Ps,
2678
- agent: Ns,
2679
- user: Ss,
2680
- system: Ts
2681
- }, As = F(ne.base, {
2682
- variants: {
2683
- variant: {
2684
- user: ne.user,
2685
- bot: ne.bot,
2686
- system: ne.system,
2687
- agent: ne.agent
2688
- },
2689
- status: {
2690
- sending: ne.sending,
2691
- sent: ne.sent,
2692
- error: ne.error
2693
- }
2694
- },
2695
- defaultVariants: { variant: "bot", status: "sent" }
2696
- });
2697
- function Rt(e) {
2698
- const {
2699
- variant: t = "bot",
2700
- status: a = "sent",
2701
- showTimestamp: o = !0,
2702
- showStatus: s = !1,
2703
- timestamp: i,
2704
- avatarConfig: r,
2705
- senderName: c,
2706
- className: f,
2707
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2708
- children: _,
2709
- // Consume unknown props without forwarding them to child components
2710
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2711
- ...m
2712
- } = e;
2713
- return _e(() => {
2714
- const l = As({ variant: t, status: a, className: f }), d = {
2715
- variant: t,
2716
- showTimestamp: o,
2717
- showStatus: s,
2718
- timestamp: i,
2719
- status: a,
2720
- senderName: c
2721
- }, u = {
2722
- variant: t,
2723
- status: a
2724
- };
2725
- if (!r)
2726
- return {
2727
- messageClasses: l,
2728
- bubbleProps: u,
2729
- infoProps: d,
2730
- standaloneAvatarProps: null
2731
- };
2732
- const { placement: h, avatarProps: p } = r;
2733
- switch (h) {
2734
- case "bubble":
2735
- case "info":
2736
- return {
2737
- messageClasses: l,
2738
- bubbleProps: u,
2739
- infoProps: { ...d, avatarProps: p },
2740
- standaloneAvatarProps: null
2741
- };
2742
- case "standalone":
2743
- return {
2744
- messageClasses: l,
2745
- bubbleProps: u,
2746
- infoProps: d,
2747
- standaloneAvatarProps: p
2748
- };
2749
- default:
2750
- return {
2751
- messageClasses: l,
2752
- bubbleProps: u,
2753
- infoProps: d,
2754
- standaloneAvatarProps: null
2755
- };
2756
- }
2757
- }, [
2758
- t,
2759
- a,
2760
- o,
2761
- s,
2762
- i,
2763
- r,
2764
- c,
2765
- f
2766
- ]);
2767
- }
2768
- const ie = O(
2769
- (e, t) => {
2770
- const { messageClasses: a, bubbleProps: o, infoProps: s, standaloneAvatarProps: i } = Rt(e);
2771
- return /* @__PURE__ */ w(
2772
- "div",
2773
- {
2774
- ref: t,
2775
- className: a,
2776
- "data-testid": `webchat-message-${e.variant || "bot"}`,
2777
- children: [
2778
- i && /* @__PURE__ */ n(et, { ...i }),
2779
- /* @__PURE__ */ n(Je, { ...o, children: e.children }),
2780
- /* @__PURE__ */ n(Et, { ...s })
2781
- ]
2782
- }
2783
- );
2784
- }
2785
- ), Is = "audio-message-module__audioMessageBase___Xye8T", Es = "audio-message-module__audioControls___bPgRS", Rs = "audio-message-module__playButton___zFi0C", xs = "audio-message-module__waveformPlaceholder___I9e-v", Ls = "audio-message-module__timer___6vQtQ", be = {
2786
- audioMessageBase: Is,
2787
- audioControls: Es,
2788
- playButton: Rs,
2789
- waveformPlaceholder: xs,
2790
- timer: Ls
2791
- };
2792
- function Bs({
2793
- src: e,
2794
- messageId: t,
2795
- onAudioLoad: a,
2796
- onPlay: o,
2797
- onPause: s,
2798
- onEnded: i
2799
- }) {
2800
- const r = C(null), [c, f] = N(!1), [_, m] = N(), [l, d] = N(0), [u, h] = N(), p = C(!1), { activeId: g, setActive: b, clearActive: M } = Le(), { isFocusVisible: T, focusProps: y } = Ze();
2801
- S(() => {
2802
- t && g !== t && c && r.current?.pause();
2803
- }, [g, t, c]), S(() => {
2804
- if (p.current) return;
2805
- let ee = !1;
2806
- return fetch(e).then((Q) => Q.blob()).then((Q) => {
2807
- ee || (p.current = !0, h(Q));
2808
- }).catch(() => {
2809
- }), () => {
2810
- ee = !0;
2811
- };
2812
- }, [e]);
2813
- const P = v(() => {
2814
- r.current && (m(r.current.duration), a?.());
2815
- }, [a]), A = v(() => {
2816
- r.current && d(r.current.currentTime);
2817
- }, []), W = v(() => {
2818
- f(!0), t && b(t), o?.();
2819
- }, [t, o, b]), V = v(() => {
2820
- f(!1), t && M(t), s?.();
2821
- }, [t, s, M]), $ = v(() => {
2822
- f(!1), d(0), t && M(t), i?.();
2823
- }, [t, i, M]), j = v(() => {
2824
- r.current && (c ? r.current.pause() : r.current.play());
2825
- }, [c]), q = v(
2826
- (ee) => {
2827
- !r.current || _ === void 0 || (r.current.currentTime = ee * _, d(r.current.currentTime));
2828
- },
2829
- [_]
2830
- ), B = _ ? l / _ : 0, G = c ? Ie(l) : _ !== void 0 ? Ie(_) : "--:--";
2831
- return {
2832
- audioRef: r,
2833
- audioBlob: u,
2834
- isPlaying: c,
2835
- audioProgress: B,
2836
- timerLabel: G,
2837
- handlePlayPause: j,
2838
- handleSeek: q,
2839
- audioProps: {
2840
- onLoadedMetadata: P,
2841
- onTimeUpdate: A,
2842
- onPlay: W,
2843
- onPause: V,
2844
- onEnded: $
2845
- },
2846
- playButtonProps: {
2847
- ...y,
2848
- "data-focus-visible": T
2849
- }
2850
- };
2851
- }
2852
- const xt = O(
2853
- ({
2854
- src: e,
2855
- messageId: t,
2856
- alt: a = "Audio message",
2857
- onAudioLoad: o,
2858
- onPlay: s,
2859
- onPause: i,
2860
- onEnded: r,
2861
- className: c,
2862
- ...f
2863
- }, _) => {
2864
- const {
2865
- audioRef: m,
2866
- audioBlob: l,
2867
- isPlaying: d,
2868
- audioProgress: u,
2869
- timerLabel: h,
2870
- handlePlayPause: p,
2871
- handleSeek: g,
2872
- audioProps: b,
2873
- playButtonProps: M
2874
- } = Bs({
2875
- src: e,
2876
- messageId: t,
2877
- onAudioLoad: o,
2878
- onPlay: s,
2879
- onPause: i,
2880
- onEnded: r
2881
- });
2882
- return /* @__PURE__ */ w(
2883
- ie,
2884
- {
2885
- ref: _,
2886
- className: E(be.audioMessageBase, c),
2887
- ...f,
2888
- children: [
2889
- /* @__PURE__ */ n(
2890
- "audio",
2891
- {
2892
- ref: m,
2893
- src: e,
2894
- "aria-label": a,
2895
- ...b,
2896
- preload: "metadata"
2897
- }
2898
- ),
2899
- /* @__PURE__ */ w("div", { className: be.audioControls, children: [
2900
- /* @__PURE__ */ n(
2901
- "button",
2902
- {
2903
- type: "button",
2904
- className: be.playButton,
2905
- onClick: p,
2906
- "aria-label": d ? "Pause audio" : "Play audio",
2907
- ...M,
2908
- children: d ? /* @__PURE__ */ n(It, {}) : /* @__PURE__ */ n(Ye, {})
2909
- }
2910
- ),
2911
- l ? /* @__PURE__ */ n(
2912
- At,
2913
- {
2914
- audioBlob: l,
2915
- progress: u,
2916
- onSeek: g
2917
- }
2918
- ) : /* @__PURE__ */ n("div", { className: be.waveformPlaceholder, "aria-hidden": !0 }),
2919
- /* @__PURE__ */ n("span", { className: be.timer, children: h })
2920
- ] })
2921
- ]
2922
- }
2923
- );
2924
- }
2925
- );
2926
- xt.displayName = "AudioMessage";
2927
- const ks = "button-message-module__actions___3CAVo", Ds = "button-message-module__floatingButton___OK9AF", ut = {
2928
- actions: ks,
2929
- floatingButton: Ds
2930
- }, Os = O(
2931
- ({ text: e, buttons: t, buttonsPerRow: a = 1, className: o, ...s }, i) => {
2932
- const r = Math.min(a, t.length), { messageClasses: c, bubbleProps: f, infoProps: _, standaloneAvatarProps: m } = Rt({ ...s, children: null });
2933
- return /* @__PURE__ */ w(
2934
- "div",
2935
- {
2936
- ref: i,
2937
- className: E(c, o),
2938
- "data-testid": `webchat-message-${s.variant || "bot"}`,
2939
- children: [
2940
- m && /* @__PURE__ */ n(et, { ...m }),
2941
- /* @__PURE__ */ n(Je, { ...f, children: e }),
2942
- /* @__PURE__ */ n(
2943
- "div",
2944
- {
2945
- className: ut.actions,
2946
- "data-webchat-message-actions": !0,
2947
- style: { gridTemplateColumns: `repeat(${r}, 1fr)` },
2948
- children: t.map((l, d) => /* @__PURE__ */ n(
2949
- Ae,
2950
- {
2951
- text: l.text,
2952
- disabled: l.disabled,
2953
- button: l.type ? {
2954
- type: l.type,
2955
- title: l.text,
2956
- payload: l.value,
2957
- webview: l.webview
2958
- } : { text: l.text, value: l.value },
2959
- onClick: () => l.onClick?.(l.value),
2960
- variant: "secondary",
2961
- className: ut.floatingButton
2962
- },
2963
- d
2964
- ))
2965
- }
2966
- ),
2967
- /* @__PURE__ */ n(Et, { ..._ })
2968
- ]
2969
- }
2970
- );
2971
- }
2972
- ), Ws = "carousel-message-module__carouselMessageBase___yV-Nd", Vs = "carousel-message-module__buttonContainer___lPydV", $s = "carousel-message-module__carouselWrapper___OaVVz", Hs = "carousel-message-module__carouselSlider___qtpjn", Fs = "carousel-message-module__carouselCard___5GhQQ", Us = "carousel-message-module__imageContainer___-NYcV", zs = "carousel-message-module__elementImage___TEjVf", js = "carousel-message-module__elementContent___fQqqZ", qs = "carousel-message-module__elementTitle___sUPzb", Gs = "carousel-message-module__elementSubtitle___7yW9w", Ks = "carousel-message-module__arrowLayer___-lMZC", Xs = "carousel-message-module__arrowButton___EkObr", Zs = "carousel-message-module__prevArrow___YcQdm", Qs = "carousel-message-module__nextArrow___ndT0K", k = {
2973
- carouselMessageBase: Ws,
2974
- buttonContainer: Vs,
2975
- carouselWrapper: $s,
2976
- carouselSlider: Hs,
2977
- carouselCard: Fs,
2978
- imageContainer: Us,
2979
- elementImage: zs,
2980
- elementContent: js,
2981
- elementTitle: qs,
2982
- elementSubtitle: Gs,
2983
- arrowLayer: Ks,
2984
- arrowButton: Xs,
2985
- prevArrow: Zs,
2986
- nextArrow: Qs
2987
- };
2988
- function Ys() {
2989
- return /* @__PURE__ */ n(
2990
- "svg",
2991
- {
2992
- viewBox: "0 0 16 16",
2993
- fill: "currentColor",
2994
- width: "16",
2995
- height: "16",
2996
- role: "img",
2997
- "aria-hidden": !0,
2998
- children: /* @__PURE__ */ n("path", { d: "M10.354 3.646a.5.5 0 0 1 0 .708L6.707 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0z" })
2999
- }
3000
- );
3001
- }
3002
- function Js() {
3003
- return /* @__PURE__ */ n(
3004
- "svg",
3005
- {
3006
- viewBox: "0 0 16 16",
3007
- fill: "currentColor",
3008
- width: "16",
3009
- height: "16",
3010
- role: "img",
3011
- "aria-hidden": !0,
3012
- children: /* @__PURE__ */ n("path", { d: "M5.646 3.646a.5.5 0 0 0 0 .708L9.293 8 5.646 11.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0z" })
3013
- }
3014
- );
3015
- }
3016
- const mt = 12;
3017
- function er({
3018
- elements: e,
3019
- onButtonClick: t,
3020
- onElementImageLoad: a
3021
- }) {
3022
- const o = C(null), [s, i] = N(!1), [r, c] = N(e.length > 1), f = v(() => o.current?.firstElementChild?.offsetWidth ?? 200, []), _ = v(() => {
3023
- const g = o.current;
3024
- if (!g) return;
3025
- const b = 2;
3026
- i(g.scrollLeft > b), c(g.scrollLeft < g.scrollWidth - g.clientWidth - b);
3027
- }, []), m = v(() => {
3028
- const g = o.current;
3029
- if (!g) return;
3030
- const b = f();
3031
- g.scrollTo({
3032
- left: g.scrollLeft - (b + mt),
3033
- behavior: "smooth"
3034
- });
3035
- }, [f]), l = v(() => {
3036
- const g = o.current;
3037
- if (!g) return;
3038
- const b = f();
3039
- g.scrollTo({
3040
- left: g.scrollLeft + (b + mt),
3041
- behavior: "smooth"
3042
- });
3043
- }, [f]), d = v(
3044
- (g) => {
3045
- g.key === "ArrowLeft" ? (g.preventDefault(), m()) : g.key === "ArrowRight" && (g.preventDefault(), l());
3046
- },
3047
- [m, l]
3048
- ), u = v(
3049
- (g) => {
3050
- "type" in g && t?.(g);
3051
- },
3052
- [t]
3053
- ), h = v(
3054
- (g) => ({
3055
- onLoad: () => a?.(g),
3056
- onError: () => a?.(g)
3057
- }),
3058
- [a]
3059
- ), p = v(
3060
- (g) => ({
3061
- role: "listitem",
3062
- "aria-label": `Card ${g + 1} of ${e.length}`
3063
- }),
3064
- [e.length]
3065
- );
3066
- return {
3067
- containerProps: {
3068
- role: "region",
3069
- "aria-label": "Carousel",
3070
- onKeyDown: d,
3071
- tabIndex: 0
3072
- },
3073
- sliderProps: {
3074
- ref: o,
3075
- role: "list",
3076
- onScroll: _
3077
- },
3078
- cardProps: p,
3079
- imageProps: h,
3080
- prevArrowProps: {
3081
- onClick: m,
3082
- "aria-label": "Previous card",
3083
- disabled: !s
3084
- },
3085
- nextArrowProps: {
3086
- onClick: l,
3087
- "aria-label": "Next card",
3088
- disabled: !r
3089
- },
3090
- handleButtonClick: u,
3091
- variants: {
3092
- canScrollPrev: s,
3093
- canScrollNext: r
3094
- }
3095
- };
3096
- }
3097
- const Lt = O(
3098
- ({ elements: e, onButtonClick: t, onElementImageLoad: a, className: o, ...s }, i) => {
3099
- const {
3100
- containerProps: r,
3101
- sliderProps: c,
3102
- cardProps: f,
3103
- imageProps: _,
3104
- prevArrowProps: m,
3105
- nextArrowProps: l,
3106
- handleButtonClick: d,
3107
- variants: u
3108
- } = er({ elements: e, onButtonClick: t, onElementImageLoad: a });
3109
- return /* @__PURE__ */ n(
3110
- ie,
3111
- {
3112
- ref: i,
3113
- className: E(k.carouselMessageBase, o),
3114
- ...s,
3115
- children: /* @__PURE__ */ w("div", { ...r, className: k.carouselWrapper, children: [
3116
- /* @__PURE__ */ n("div", { ...c, className: k.carouselSlider, children: e.map((h, p) => /* @__PURE__ */ w(
3117
- "div",
3118
- {
3119
- ...f(p),
3120
- className: k.carouselCard,
3121
- children: [
3122
- /* @__PURE__ */ n("div", { className: k.imageContainer, children: /* @__PURE__ */ n(
3123
- "img",
3124
- {
3125
- src: h.image,
3126
- alt: h.title,
3127
- className: k.elementImage,
3128
- ..._(p)
3129
- }
3130
- ) }),
3131
- /* @__PURE__ */ w("div", { className: k.elementContent, children: [
3132
- /* @__PURE__ */ n("h3", { className: k.elementTitle, children: h.title }),
3133
- h.subtitle && /* @__PURE__ */ n("p", { className: k.elementSubtitle, children: h.subtitle })
3134
- ] }),
3135
- h.buttons.map((g, b) => /* @__PURE__ */ n(
3136
- "div",
3137
- {
3138
- className: k.buttonContainer,
3139
- children: /* @__PURE__ */ n(
3140
- Ae,
3141
- {
3142
- text: g.title,
3143
- button: g,
3144
- onClick: d,
3145
- variant: "secondary"
3146
- }
3147
- )
3148
- },
3149
- `${h.id}-btn-${b}`
3150
- ))
3151
- ]
3152
- },
3153
- h.id
3154
- )) }),
3155
- e.length > 1 && /* @__PURE__ */ w("div", { className: k.arrowLayer, children: [
3156
- u.canScrollPrev && /* @__PURE__ */ n(
3157
- "button",
3158
- {
3159
- ...m,
3160
- type: "button",
3161
- className: E(k.arrowButton, k.prevArrow),
3162
- children: /* @__PURE__ */ n(Ys, {})
3163
- }
3164
- ),
3165
- u.canScrollNext && /* @__PURE__ */ n(
3166
- "button",
3167
- {
3168
- ...l,
3169
- type: "button",
3170
- className: E(k.arrowButton, k.nextArrow),
3171
- children: /* @__PURE__ */ n(Js, {})
3172
- }
3173
- )
3174
- ] })
3175
- ] })
3176
- }
3177
- );
3178
- }
3179
- );
3180
- Lt.displayName = "CarouselMessage";
3181
- const tr = "document-message-module__documentMessageBase___hqh5-", nr = "document-message-module__fileRow___-dzrn", or = "document-message-module__fileIcon___OwdXn", ar = "document-message-module__fileName___2d5yP", Se = {
3182
- documentMessageBase: tr,
3183
- fileRow: nr,
3184
- fileIcon: or,
3185
- fileName: ar
3186
- };
3187
- function sr({
3188
- src: e,
3189
- filename: t,
3190
- onDownload: a
3191
- }) {
3192
- return {
3193
- downloadProps: {
3194
- onClick: v(() => {
3195
- const s = document.createElement("a");
3196
- s.href = e, s.download = t || "document", s.target = "_blank", s.rel = "noopener noreferrer", document.body.appendChild(s), s.click(), document.body.removeChild(s), a?.();
3197
- }, [e, t, a])
3198
- }
3199
- };
3200
- }
3201
- function rr(e) {
3202
- return e?.includes("pdf") ? /* @__PURE__ */ n(Nt, {}) : /* @__PURE__ */ n(Pt, {});
3203
- }
3204
- const Bt = O(
3205
- ({ src: e, filename: t, mimeType: a, onDownload: o, className: s, ...i }, r) => {
3206
- const { downloadProps: c } = sr({ src: e, filename: t, onDownload: o });
3207
- return /* @__PURE__ */ n(
3208
- ie,
3209
- {
3210
- ref: r,
3211
- className: E(Se.documentMessageBase, s),
3212
- ...i,
3213
- children: /* @__PURE__ */ w(
3214
- "button",
3215
- {
3216
- type: "button",
3217
- className: Se.fileRow,
3218
- "aria-label": `Download ${t || "document"}`,
3219
- ...c,
3220
- children: [
3221
- /* @__PURE__ */ n("span", { className: Se.fileIcon, "aria-hidden": !0, children: rr(a) }),
3222
- /* @__PURE__ */ n("span", { className: Se.fileName, children: t || "Document" })
3223
- ]
3224
- }
3225
- )
3226
- }
3227
- );
3228
- }
3229
- );
3230
- Bt.displayName = "DocumentMessage";
3231
- const ir = "image-message-module__imageMessageBase___FDwNN", cr = "image-message-module__mediaImage___xflT1", _t = {
3232
- imageMessageBase: ir,
3233
- mediaImage: cr
3234
- };
3235
- function lr({ onImageLoad: e }) {
3236
- const t = v(() => {
3237
- e?.();
3238
- }, [e]), a = v(() => {
3239
- e?.();
3240
- }, [e]);
3241
- return {
3242
- imageProps: {
3243
- onLoad: t,
3244
- onError: a
3245
- }
3246
- };
3247
- }
3248
- const kt = O(
3249
- ({ src: e, alt: t = "Attached image", onImageLoad: a, className: o, ...s }, i) => {
3250
- const { imageProps: r } = lr({ onImageLoad: a });
3251
- return /* @__PURE__ */ n(
3252
- ie,
3253
- {
3254
- ref: i,
3255
- className: E(_t.imageMessageBase, o),
3256
- ...s,
3257
- children: /* @__PURE__ */ n(
3258
- "img",
3259
- {
3260
- src: e,
3261
- alt: t,
3262
- className: _t.mediaImage,
3263
- ...r
3264
- }
3265
- )
3266
- }
3267
- );
3268
- }
3269
- );
3270
- kt.displayName = "ImageMessage";
3271
- const dr = "location-message-module__locationMessageBase___rY3d-", ur = "location-message-module__locationContainer___9Rukw", mr = "location-message-module__locationContent___2BRdV", _r = "location-message-module__locationIcon___rjObu", hr = "location-message-module__locationInfo___NqVsR", fr = "location-message-module__locationTitle___RpUjH", pr = "location-message-module__locationCoordinates___lLfuf", gr = "location-message-module__locationLink___Zq2I2", oe = {
3272
- locationMessageBase: dr,
3273
- locationContainer: ur,
3274
- locationContent: mr,
3275
- locationIcon: _r,
3276
- locationInfo: hr,
3277
- locationTitle: fr,
3278
- locationCoordinates: pr,
3279
- locationLink: gr
3280
- }, vr = O(
3281
- ({
3282
- latitude: e,
3283
- longitude: t,
3284
- alt: a = "Location coordinates",
3285
- onLocationLoad: o,
3286
- className: s,
3287
- ...i
3288
- }, r) => {
3289
- const c = v(() => {
3290
- o?.();
3291
- }, [o]), f = `https://www.google.com/maps?q=${e},${t}`;
3292
- return /* @__PURE__ */ n(
3293
- ie,
3294
- {
3295
- ref: r,
3296
- className: E(oe.locationMessageBase, s),
3297
- ...i,
3298
- children: /* @__PURE__ */ w("div", { className: oe.locationContainer, children: [
3299
- /* @__PURE__ */ w("div", { className: oe.locationContent, children: [
3300
- /* @__PURE__ */ n("div", { className: oe.locationIcon, children: /* @__PURE__ */ n(
3301
- "svg",
3302
- {
3303
- width: "24",
3304
- height: "24",
3305
- viewBox: "0 0 24 24",
3306
- fill: "none",
3307
- xmlns: "http://www.w3.org/2000/svg",
3308
- "aria-hidden": "true",
3309
- children: /* @__PURE__ */ n(
3310
- "path",
3311
- {
3312
- 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",
3313
- fill: "currentColor"
3314
- }
3315
- )
3316
- }
3317
- ) }),
3318
- /* @__PURE__ */ w("div", { className: oe.locationInfo, children: [
3319
- /* @__PURE__ */ n("div", { className: oe.locationTitle, children: "Location" }),
3320
- /* @__PURE__ */ w("div", { className: oe.locationCoordinates, children: [
3321
- e.toFixed(6),
3322
- ", ",
3323
- t.toFixed(6)
3324
- ] })
3325
- ] })
3326
- ] }),
3327
- /* @__PURE__ */ w(
3328
- "a",
3329
- {
3330
- href: f,
3331
- target: "_blank",
3332
- rel: "noopener noreferrer",
3333
- className: oe.locationLink,
3334
- onClick: c,
3335
- "aria-label": `Open location in Google Maps: ${e}, ${t}`,
3336
- children: [
3337
- /* @__PURE__ */ n("span", { children: "View on Map" }),
3338
- /* @__PURE__ */ n(
3339
- "svg",
3340
- {
3341
- width: "16",
3342
- height: "16",
3343
- viewBox: "0 0 24 24",
3344
- fill: "none",
3345
- xmlns: "http://www.w3.org/2000/svg",
3346
- "aria-hidden": "true",
3347
- children: /* @__PURE__ */ n(
3348
- "path",
3349
- {
3350
- d: "M7 17L17 7M17 7H7M17 7V17",
3351
- stroke: "currentColor",
3352
- strokeWidth: "2",
3353
- strokeLinecap: "round",
3354
- strokeLinejoin: "round"
3355
- }
3356
- )
3357
- }
3358
- )
3359
- ]
3360
- }
3361
- )
3362
- ] })
3363
- }
3364
- );
3365
- }
3366
- ), br = "text-message-module__textMessageBase___p4r-t", wr = "text-message-module__textContent___yRb8d", ht = {
3367
- textMessageBase: br,
3368
- textContent: wr
3369
- }, Cr = O(
3370
- ({ text: e, className: t, ...a }, o) => /* @__PURE__ */ n(
3371
- ie,
3372
- {
3373
- ref: o,
3374
- className: E(ht.textMessageBase, t),
3375
- ...a,
3376
- children: /* @__PURE__ */ n("div", { className: ht.textContent, children: e })
3377
- }
3378
- )
3379
- );
3380
- function yr({
3381
- messageId: e,
3382
- onVideoLoad: t,
3383
- onPlay: a,
3384
- onPause: o,
3385
- onEnded: s
3386
- }) {
3387
- const i = C(null), [r, c] = N(!1), { activeId: f, setActive: _, clearActive: m } = Le();
3388
- S(() => {
3389
- e && f !== e && r && i.current?.pause();
3390
- }, [f, e, r]);
3391
- const l = v(() => {
3392
- t?.();
3393
- }, [t]), d = v(() => {
3394
- c(!0), e && _(e), a?.();
3395
- }, [e, a, _]), u = v(() => {
3396
- c(!1), e && m(e), o?.();
3397
- }, [e, o, m]), h = v(() => {
3398
- c(!1), e && m(e), s?.();
3399
- }, [e, s, m]), p = v(() => {
3400
- i.current?.play();
3401
- }, []);
3402
- return {
3403
- videoRef: i,
3404
- isPlaying: r,
3405
- videoProps: {
3406
- onLoadedMetadata: l,
3407
- onPlay: d,
3408
- onPause: u,
3409
- onEnded: h
3410
- },
3411
- playButtonProps: {
3412
- onClick: p
3413
- }
3414
- };
3415
- }
3416
- const Mr = "video-message-module__videoMessageBase___RX3Qk", Pr = "video-message-module__videoContainer___ctZrR", Nr = "video-message-module__videoElement___dYbDh", Sr = "video-message-module__playOverlay___QrUG8", Tr = "video-message-module__playIconWrapper___z-w6D", we = {
3417
- videoMessageBase: Mr,
3418
- videoContainer: Pr,
3419
- videoElement: Nr,
3420
- playOverlay: Sr,
3421
- playIconWrapper: Tr
3422
- }, Dt = O(
3423
- ({
3424
- src: e,
3425
- messageId: t,
3426
- alt: a = "Video message",
3427
- onVideoLoad: o,
3428
- onPlay: s,
3429
- onPause: i,
3430
- onEnded: r,
3431
- className: c,
3432
- ...f
3433
- }, _) => {
3434
- const { videoRef: m, isPlaying: l, videoProps: d, playButtonProps: u } = yr({
3435
- messageId: t,
3436
- onVideoLoad: o,
3437
- onPlay: s,
3438
- onPause: i,
3439
- onEnded: r
3440
- });
3441
- return /* @__PURE__ */ n(
3442
- ie,
3443
- {
3444
- ref: _,
3445
- className: E(we.videoMessageBase, c),
3446
- ...f,
3447
- children: /* @__PURE__ */ w("div", { className: we.videoContainer, children: [
3448
- /* @__PURE__ */ n(
3449
- "video",
3450
- {
3451
- ref: m,
3452
- src: e,
3453
- "aria-label": a,
3454
- className: we.videoElement,
3455
- preload: "metadata",
3456
- controls: l,
3457
- ...d
3458
- }
3459
- ),
3460
- !l && /* @__PURE__ */ n(
3461
- "button",
3462
- {
3463
- type: "button",
3464
- className: we.playOverlay,
3465
- "aria-label": "Play video",
3466
- ...u,
3467
- children: /* @__PURE__ */ n("span", { className: we.playIconWrapper, "aria-hidden": !0, children: /* @__PURE__ */ n(Ye, {}) })
3468
- }
3469
- )
3470
- ] })
3471
- }
3472
- );
3473
- }
3474
- );
3475
- Dt.displayName = "VideoMessage";
3476
- function Ar(e) {
3477
- if (!e) return;
3478
- const t = e.replace(/-/g, "");
3479
- if (t.length < 16 || parseInt(t[12], 16) !== 7) return;
3480
- const o = parseInt(t.slice(0, 12), 16);
3481
- if (!(!Number.isFinite(o) || o <= 0))
3482
- return new Date(o);
3483
- }
3484
- function Ir({
3485
- messageActor: e,
3486
- baseProps: t = {}
3487
- }) {
3488
- const { message: a, status: o } = L(e, (c) => ({
3489
- message: c.context?.message,
3490
- status: c.context?.status
3491
- })), s = L(
3492
- e,
3493
- (c) => c.can?.({ type: "RETRY" }) ?? !1
3494
- ), i = _e(() => {
3495
- if (!a)
3496
- return {
3497
- ...t,
3498
- variant: "bot",
3499
- status: "sent",
3500
- showTimestamp: !0,
3501
- isClickable: !1
3502
- };
3503
- const c = (() => {
3504
- switch (o) {
3505
- case "unsent":
3506
- return "sending";
3507
- case "sent":
3508
- return "sent";
3509
- case "failed":
3510
- return "error";
3511
- default:
3512
- return "sent";
3513
- }
3514
- })(), f = (() => {
3515
- switch (a.sent_by) {
3516
- case me.User:
3517
- return "user";
3518
- case me.Bot:
3519
- return "bot";
3520
- case me.Agent:
3521
- return "agent";
3522
- default:
3523
- return "user";
3524
- }
3525
- })(), _ = s ? () => e.send({ type: "RETRY" }) : void 0, m = f === "bot" ? t.botAvatarConfig ?? void 0 : f === "agent" ? t.agentAvatarConfig ?? void 0 : void 0;
3526
- return {
3527
- ...t,
3528
- variant: f,
3529
- status: c,
3530
- timestamp: Ar(a.id),
3531
- showTimestamp: !0,
3532
- isClickable: s,
3533
- onPress: _,
3534
- avatarConfig: m
3535
- };
3536
- }, [a, o, s, e, t]), r = _e(
3537
- () => (c) => {
3538
- t.onUserInteraction?.(), e.send({
3539
- type: "BUTTON_CLICKED",
3540
- button: c
3541
- });
3542
- },
3543
- [t, e]
3544
- );
3545
- return {
3546
- message: a,
3547
- status: o,
3548
- canRetry: s,
3549
- messageProps: i,
3550
- handleButtonClick: r
3551
- };
3552
- }
3553
- const Er = ({
3554
- messageActor: e,
3555
- customMessageRenderer: t,
3556
- baseProps: a = {
3557
- customMessages: {}
3558
- },
3559
- onContentLoad: o,
3560
- onImageLoadStart: s,
3561
- onImageLoadComplete: i
3562
- }) => {
3563
- const { message: r, messageProps: c, handleButtonClick: f } = Ir({
3564
- messageActor: e,
3565
- baseProps: a
3566
- });
3567
- return S(() => {
3568
- if (r && r.type === "image") {
3569
- const m = `img-${r.id}-${r.data}`;
3570
- s?.(m);
3571
- }
3572
- }, [r, s]), r ? /* @__PURE__ */ n(Ee, { children: (() => {
3573
- const { id: m } = r;
3574
- if (r.isText())
3575
- return /* @__PURE__ */ n(Cr, { ...c, text: r.data.text }, m);
3576
- if (r.isAudio())
3577
- return /* @__PURE__ */ n(
3578
- xt,
3579
- {
3580
- ...c,
3581
- src: r.data.attachment_url ?? r.data.attachment_content ?? "",
3582
- messageId: m
3583
- },
3584
- m
3585
- );
3586
- if (r.isVideo())
3587
- return /* @__PURE__ */ n(
3588
- Dt,
3589
- {
3590
- ...c,
3591
- src: r.data.attachment_url ?? r.data.attachment_content ?? "",
3592
- messageId: m,
3593
- alt: "Video",
3594
- onVideoLoad: () => {
3595
- o?.();
3596
- }
3597
- },
3598
- m
3599
- );
3600
- if (r.isDocument())
3601
- return /* @__PURE__ */ n(
3602
- Bt,
3603
- {
3604
- ...c,
3605
- src: r.data.attachment_url ?? r.data.attachment_content ?? "",
3606
- mimeType: r.data.mime_type,
3607
- filename: r.data.filename
3608
- },
3609
- m
3610
- );
3611
- if (r.isLocation())
3612
- return /* @__PURE__ */ n(
3613
- vr,
3614
- {
3615
- ...c,
3616
- latitude: r.data.latitude,
3617
- longitude: r.data.longitude,
3618
- alt: "Location coordinates",
3619
- onLocationLoad: () => {
3620
- o?.();
3621
- }
3622
- },
3623
- m
3624
- );
3625
- if (r.isImage()) {
3626
- const l = r.data.attachment_url ?? r.data.attachment_content ?? "", d = `img-${m}-${l}`;
3627
- return /* @__PURE__ */ n(
3628
- kt,
3629
- {
3630
- ...c,
3631
- src: l,
3632
- alt: "Image",
3633
- onImageLoad: () => {
3634
- o?.(), i?.(d);
3635
- }
3636
- },
3637
- m
3638
- );
3639
- }
3640
- return r.isButtonMessage() ? /* @__PURE__ */ n(
3641
- Os,
3642
- {
3643
- ...c,
3644
- text: r.data.text,
3645
- buttons: r.data.buttons?.map(
3646
- (l) => ({
3647
- text: l.title,
3648
- value: l.payload || l.title,
3649
- type: l.type,
3650
- webview: l.webview,
3651
- disabled: !1,
3652
- onClick: () => {
3653
- f(l);
3654
- }
3655
- })
3656
- )
3657
- },
3658
- m
3659
- ) : r.isCarousel() ? /* @__PURE__ */ n(
3660
- Lt,
3661
- {
3662
- ...c,
3663
- elements: r.data.elements.map((l, d) => ({
3664
- id: `${m}-${d}`,
3665
- title: l.title,
3666
- subtitle: l.subtitle,
3667
- image: l.image,
3668
- buttons: l.buttons
3669
- })),
3670
- onButtonClick: (l) => {
3671
- f(l);
3672
- },
3673
- onElementImageLoad: () => {
3674
- o?.();
3675
- }
3676
- },
3677
- m
3678
- ) : r.isCustom() ? t ? t(r, r.data, f) : (console.warn(
3679
- `Custom message renderer not provided for message type: ${r.type}`
3680
- ), null) : (console.warn(`Unknown message type: ${r.type}`), null);
3681
- })() }) : null;
3682
- };
3683
- function Rr(e) {
3684
- return _e(() => {
3685
- if (!e)
3686
- return { bot: null, agent: null };
3687
- const t = (a, o) => {
3688
- if (!a) return null;
3689
- const s = {
3690
- variant: o,
3691
- src: a.src,
3692
- alt: a.alt,
3693
- svg: a.svg,
3694
- showName: a.showName,
3695
- name: a.name
3696
- };
3697
- return {
3698
- placement: a.placement,
3699
- avatarProps: s
3700
- };
3701
- };
3702
- return {
3703
- bot: t(e.bot, "bot"),
3704
- agent: t(e.agent, "agent")
3705
- };
3706
- }, [e]);
3707
- }
3708
- function xr(e, t, a) {
3709
- const {
3710
- variant: o = "default",
3711
- hasUserInteracted: s = !1,
3712
- onScrollDepthChange: i,
3713
- onMessagesScrollAtTopChange: r,
3714
- onUserInteraction: c,
3715
- "aria-label": f,
3716
- className: _,
3717
- ...m
3718
- } = e, l = L(
3719
- t.controller.machine,
3720
- (h) => {
3721
- const p = h.context.messageActors;
3722
- return p ? Array.from(p.values()) : [];
3723
- },
3724
- (h, p) => h.length === p.length
3725
- ), d = Rr(t.avatarConfig), u = L(
3726
- t.controller.machine,
3727
- (h) => h.context.isTypingOn,
3728
- (h, p) => h === p
3729
- );
3730
- return {
3731
- // Props to spread on wrapper element
3732
- messagesProps: {
3733
- ...m,
3734
- ref: a,
3735
- "aria-label": f || `Chat messages, ${l.length} messages`,
3736
- "aria-live": "polite",
3737
- "data-webchat-messages": ""
3738
- },
3739
- // Props for MessagesList component (using XState message actors)
3740
- messageListProps: {
3741
- messageActors: l,
3742
- // From XState selector
3743
- isTyping: u,
3744
- // From XState selector
3745
- hasUserInteracted: s,
3746
- customMessageRenderer: void 0,
3747
- // TODO: Add custom message renderer support
3748
- // Pre-computed avatar configs (performance optimization)
3749
- botAvatarConfig: d.bot,
3750
- agentAvatarConfig: d.agent,
3751
- onScrollDepthChange: i,
3752
- onMessagesScrollAtTopChange: r,
3753
- onUserInteraction: c
3754
- },
3755
- // CSS class variants
3756
- variants: {
3757
- variant: o,
3758
- className: _
3759
- }
3760
- };
3761
- }
3762
- const Lr = 8, Br = 1, kr = 350, Dr = 2;
3763
- function Or({
3764
- scrollRef: e,
3765
- hasUserInteracted: t,
3766
- messageActorsLength: a,
3767
- isTyping: o,
3768
- onScrollDepthChange: s,
3769
- onMessagesScrollAtTopChange: i
3770
- }) {
3771
- const r = C(!1), c = C(!1), f = C(void 0), _ = v(() => {
3772
- if (!t) return;
3773
- const d = e.current;
3774
- if (!d) return;
3775
- const u = d.scrollTop <= Dr;
3776
- i?.(u);
3777
- }, [t, i]), m = v(() => {
3778
- const d = e.current;
3779
- if (!d) return;
3780
- const u = r.current ? d.scrollTop > Br : d.scrollTop > Lr;
3781
- r.current !== u && (r.current = u, s?.(u));
3782
- }, [s]), l = v(() => {
3783
- m(), !c.current && _();
3784
- }, [_, m]);
3785
- return Ft(() => {
3786
- if (!e.current) return;
3787
- const d = e.current;
3788
- requestAnimationFrame(() => {
3789
- c.current = !0, f.current !== void 0 && window.clearTimeout(f.current), d.scrollTo({
3790
- top: d.scrollHeight,
3791
- behavior: "smooth"
3792
- }), f.current = window.setTimeout(() => {
3793
- c.current = !1, l();
3794
- }, kr), requestAnimationFrame(l);
3795
- });
3796
- }, [a, o, l]), { handleScrollState: l };
3797
- }
3798
- const Wr = "webchat-messages-module__base___V7acY", ue = {
3799
- base: Wr,
3800
- "messages-container": "webchat-messages-module__messages-container___Ew2gS",
3801
- "scroll-fade-bottom": "webchat-messages-module__scroll-fade-bottom___WoP9u",
3802
- "typing-indicator-container": "webchat-messages-module__typing-indicator-container___v3bpq",
3803
- default: "webchat-messages-module__default___3C2qm"
3804
- }, Vr = F(ue.base, {
3805
- variants: {
3806
- variant: {
3807
- default: ue.default
3808
- }
3809
- },
3810
- defaultVariants: {
3811
- variant: "default"
3812
- }
3813
- });
3814
- function $r({
3815
- messageActors: e,
3816
- isTyping: t,
3817
- hasUserInteracted: a = !1,
3818
- customMessages: o,
3819
- botAvatarConfig: s,
3820
- agentAvatarConfig: i,
3821
- scrollRef: r,
3822
- onScrollDepthChange: c,
3823
- onMessagesScrollAtTopChange: f,
3824
- onUserInteraction: _
3825
- }) {
3826
- const { handleScrollState: m } = Or({
3827
- scrollRef: r,
3828
- hasUserInteracted: a ?? !1,
3829
- messageActorsLength: e.length,
3830
- isTyping: t,
3831
- onScrollDepthChange: c,
3832
- onMessagesScrollAtTopChange: f
3833
- }), l = ft.useCallback(
3834
- (d, u, h) => {
3835
- const p = d;
3836
- if (p.type === "custom" && p.data && o) {
3837
- const g = o[p.data.name];
3838
- if (g && typeof g == "function")
3839
- return g({
3840
- ...p.data.props,
3841
- onButtonClick: h
3842
- });
3843
- }
3844
- return null;
3845
- },
3846
- [o]
3847
- );
3848
- return /* @__PURE__ */ w(
3849
- "div",
3850
- {
3851
- ref: r,
3852
- className: ue["messages-container"],
3853
- "data-testid": "webchat-messages-list",
3854
- onScroll: m,
3855
- children: [
3856
- e && e.length > 0 && e.map((d) => /* @__PURE__ */ n(
3857
- Er,
3858
- {
3859
- messageActor: d,
3860
- customMessageRenderer: l,
3861
- baseProps: {
3862
- className: ue.message,
3863
- // Pre-computed avatar configs (performance optimization)
3864
- botAvatarConfig: s,
3865
- agentAvatarConfig: i,
3866
- onUserInteraction: _
3867
- }
3868
- },
3869
- d.id
3870
- )),
3871
- t && /* @__PURE__ */ n("div", { className: ue["typing-indicator-container"], children: /* @__PURE__ */ n(Za, { isVisible: t }) }),
3872
- /* @__PURE__ */ n("div", { className: ue["scroll-fade-bottom"], "aria-hidden": !0 })
3873
- ]
3874
- }
3875
- );
3876
- }
3877
- function Hr(e) {
3878
- const { state: t } = U(), a = C(null), o = C(null), { messagesProps: s, messageListProps: i, variants: r } = xr(
3879
- e,
3880
- t,
3881
- a
3882
- );
3883
- return /* @__PURE__ */ n(
3884
- "div",
3885
- {
3886
- ...s,
3887
- className: Vr(r),
3888
- "data-webchat-messages": !0,
3889
- children: /* @__PURE__ */ n(
3890
- $r,
3891
- {
3892
- ...i,
3893
- customMessages: t.customMessages,
3894
- scrollRef: o
3895
- }
3896
- )
3897
- }
3898
- );
3899
- }
3900
- function Fr({
3901
- isOpen: e,
3902
- onClose: t,
3903
- onControllerReady: a,
3904
- title: o = "Chat",
3905
- placeholder: s = "Type a message...",
3906
- showBranding: i = !0,
3907
- coverRegistry: r,
3908
- icons: c,
3909
- heroHeaderLayout: f
3910
- }) {
3911
- const { controller: _, state: m } = U(), l = C(!1), d = rn({
3912
- controller: _,
3913
- isOpen: e,
3914
- layout: f,
3915
- enableResponsiveHeroHeader: m.enableResponsiveHeroHeader
3916
- }), { header: u, messages: h, onUserEngagement: p } = d;
3917
- return S(() => {
3918
- _ && !l.current && (l.current = !0, a?.(_));
3919
- }, [_, a]), S(() => {
3920
- if (!_) return;
3921
- const M = _.machine.getSnapshot().context.isOpen ?? !1;
3922
- e && !M ? _.open() : !e && M && _.close();
3923
- }, [e, _]), /* @__PURE__ */ w(bo, { layout: "default", coverRegistry: r, children: [
3924
- /* @__PURE__ */ n(
3925
- Ro,
3926
- {
3927
- title: o,
3928
- onClose: () => {
3929
- _?.close(), t?.();
3930
- },
3931
- variant: u.variant,
3932
- collapseProgress: u.collapseProgress,
3933
- hasShadow: u.hasShadow,
3934
- enableResponsiveHeroHeader: m.enableResponsiveHeroHeader,
3935
- children: /* @__PURE__ */ n(
3936
- $t,
3937
- {
3938
- trigger: /* @__PURE__ */ n(yt, { "aria-label": "Open menu" }),
3939
- placement: "bottom right",
3940
- children: ({ close: b }) => /* @__PURE__ */ w(Ht, { children: [
3941
- /* @__PURE__ */ n(ko, { onClose: b }),
3942
- /* @__PURE__ */ n(Lo, { onClose: b }),
3943
- /* @__PURE__ */ n(zo, {}),
3944
- /* @__PURE__ */ n(Fo, { onClose: b })
3945
- ] })
3946
- }
3947
- )
3948
- }
3949
- ),
3950
- /* @__PURE__ */ n(Hr, { variant: "default", ...h }),
3951
- /* @__PURE__ */ n(
3952
- Va,
3953
- {
3954
- placeholder: s,
3955
- showBranding: i,
3956
- variant: "default",
3957
- icons: c,
3958
- onUserMessageSent: p
3959
- }
3960
- )
3961
- ] });
3962
- }
3963
- function Ur({
3964
- appId: e,
3965
- isOpen: t,
3966
- onClose: a,
3967
- onControllerReady: o,
3968
- title: s,
3969
- placeholder: i,
3970
- showBranding: r = !0,
3971
- customMessages: c = {},
3972
- avatarConfig: f,
3973
- coverRegistry: _,
3974
- icons: m,
3975
- heroHeaderLayout: l,
3976
- // Note: showTrigger is accepted but not implemented yet (reserved for future use)
3977
- ...d
3978
- }) {
3979
- return /* @__PURE__ */ n(
3980
- nn,
3981
- {
3982
- appId: e,
3983
- customMessages: c,
3984
- avatarConfig: f,
3985
- ...d,
3986
- children: /* @__PURE__ */ n(
3987
- Fr,
3988
- {
3989
- isOpen: t,
3990
- onClose: a,
3991
- onControllerReady: o,
3992
- title: s,
3993
- placeholder: i,
3994
- showBranding: r,
3995
- coverRegistry: _,
3996
- icons: m,
3997
- heroHeaderLayout: l
3998
- }
3999
- )
4000
- }
4001
- );
4002
- }
4003
- const Yr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
4004
- __proto__: null,
4005
- WebchatApp: Ur
4006
- }, Symbol.toStringTag, { value: "Module" }));
4007
- export {
4008
- Be as A,
4009
- dn as B,
4010
- Io as C,
4011
- on as D,
4012
- ro as E,
4013
- po as F,
4014
- U as G,
4015
- Mo as H,
4016
- rn as I,
4017
- Oa as J,
4018
- xr as K,
4019
- tn as L,
4020
- yt as M,
4021
- Yr as N,
4022
- fo as O,
4023
- Za as T,
4024
- Ur as W,
4025
- Ae as a,
4026
- Nn as b,
4027
- wt as c,
4028
- An as d,
4029
- Lo as e,
4030
- ko as f,
4031
- Fo as g,
4032
- zo as h,
4033
- ie as i,
4034
- Je as j,
4035
- Er as k,
4036
- Fn as l,
4037
- Jn as m,
4038
- Ct as n,
4039
- qn as o,
4040
- co as p,
4041
- Yn as q,
4042
- bo as r,
4043
- Ro as s,
4044
- Va as t,
4045
- Hr as u,
4046
- nn as v,
4047
- qe as w,
4048
- an as x,
4049
- Sn as y,
4050
- mo as z
4051
- };