@telia-ace/widget-conversation 1.1.2-rc.11 → 1.1.2-rc.13

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 (6) hide show
  1. package/components/conversation/ui/skip-link.d.ts +3 -0
  2. package/{conversation-d0c4d18c.mjs → conversation-021aed37.mjs} +455 -453
  3. package/{conversation-40b46299.js → conversation-8ebf1b1a.js} +89 -89
  4. package/index.js +1 -1
  5. package/index.mjs +1 -1
  6. package/package.json +8 -8
package/{conversation-d0c4d18c.mjs → conversation-021aed37.mjs} RENAMED
@@ -1,119 +1,110 @@
1
- import { jsx as n, jsxs as h, Fragment as N } from "react/jsx-runtime";
1
+ import { jsx as n, jsxs as u, Fragment as L } from "react/jsx-runtime";
2
2
  import a from "@emotion/styled";
3
- import { borderTabStyle as f, Input as se, Button as I, SymbolBadge as x, useIsTabbing as ae, useDispatch as Y, useContainer as ie, useProperties as H, useScroll as le, Typography as X, invertedHoverButton as xe, Html as G, List as ce, buttonCss as B, ItemList as K, itemList as E, Link as we, useComponent as ke, genericHtml as Ce, headingElement as J, usePrevious as Se, list as ze, WidgetOverlayOutlet as de, ConversationContext as Le } from "@telia-ace/widget-ui";
4
- import { appendClassNames as T, htmlParentContains as Ne } from "@telia-ace/widget-utilities";
5
- import { css as p, keyframes as Me } from "@emotion/react";
6
- import Ie, { useState as P, useEffect as Q, forwardRef as Z, useContext as He, Suspense as Te, useRef as me, useMemo as Ae, useCallback as ue } from "react";
7
- import { FormComponent as Oe } from "@telia-ace/widget-forms";
8
- import { ConversationMessageListItemType as C, ConversationMessageType as W } from "./index.mjs";
3
+ import { Input as ne, borderTabStyle as y, Button as M, SymbolBadge as x, useIsTabbing as re, useDispatch as _, useProperties as C, useScroll as oe, Typography as F, invertedHoverButton as be, Html as Y, List as se, buttonCss as R, ItemList as B, itemList as K, Link as $e, useComponent as ve, genericHtml as xe, headingElement as X, usePrevious as ke, list as we, useContainer as ae, WidgetOverlayOutlet as ie, ConversationContext as Ce } from "@telia-ace/widget-ui";
4
+ import { appendClassNames as H, htmlParentContains as Se } from "@telia-ace/widget-utilities";
5
+ import { css as b, keyframes as ze } from "@emotion/react";
6
+ import Le, { useState as D, useEffect as G, forwardRef as J, useContext as Ne, Suspense as Me, useRef as le, useMemo as Ie, useCallback as ce } from "react";
7
+ import { FormComponent as He } from "@telia-ace/widget-forms";
8
+ import { ConversationMessageListItemType as w, ConversationMessageType as j } from "./index.mjs";
9
9
  import "@telia-ace/widget-core";
10
10
  import "@telia-ace/widget-services";
11
11
  import "@telia-ace/widget-plugins";
12
- const Re = ({ className: t }) => {
13
- const [e, r] = P(""), [o, s] = P(0), [i, c] = P(0), m = ae(), u = Y(), y = ie(), {
14
- inputPlaceholder: b = "Type your message",
15
- inputHidden: l = !1,
16
- inputDisabled: g = !1,
17
- sendButtonLabel: w = "Send message",
18
- inputMultiline: z = !0,
19
- secondaryAction: $,
20
- skipToLatestMessageLabel: A = "Skip to latest message"
21
- } = H(), [O, v] = le(!0);
22
- Q(() => {
23
- if (v.current) {
24
- const { lineHeight: d, maxHeight: k } = getComputedStyle(v.current);
25
- if (d && d.indexOf("px") > -1) {
26
- const L = d.split("px"), $e = parseInt(L[0], 10);
27
- s($e);
28
- const ve = k.split("px");
29
- c(parseInt(ve[0], 10));
12
+ const Te = ({ className: t }) => {
13
+ const [e, o] = D(""), [r, s] = D(0), [i, c] = D(0), d = re(), m = _(), {
14
+ inputPlaceholder: f = "Type your message",
15
+ inputHidden: k = !1,
16
+ inputDisabled: l = !1,
17
+ sendButtonLabel: h = "Send message",
18
+ inputMultiline: $ = !0,
19
+ secondaryAction: v
20
+ } = C(), [T, p] = oe(!0);
21
+ G(() => {
22
+ if (p.current) {
23
+ const { lineHeight: g, maxHeight: A } = getComputedStyle(p.current);
24
+ if (g && g.indexOf("px") > -1) {
25
+ const I = g.split("px"), ye = parseInt(I[0], 10);
26
+ s(ye);
27
+ const pe = A.split("px");
28
+ c(parseInt(pe[0], 10));
30
29
  }
31
30
  }
32
- }, [v.current]);
33
- const D = (d) => {
34
- !d.shiftKey || !z ? (d.preventDefault(), e && e.length > 0 && (u("user-submit", { text: e }), r(""), j(""))) : e.length < 1 && d.preventDefault();
35
- }, pe = (d) => {
36
- $ && (d.preventDefault(), u("action", {
37
- actionKey: $.action,
38
- ...$
31
+ }, [p.current]);
32
+ const z = (g) => {
33
+ !g.shiftKey || !$ ? (g.preventDefault(), e && e.length > 0 && (m("user-submit", { text: e }), o(""), E(""))) : e.length < 1 && g.preventDefault();
34
+ }, ge = (g) => {
35
+ v && (g.preventDefault(), m("action", {
36
+ actionKey: v.action,
37
+ ...v
39
38
  }));
40
- }, be = (d) => {
41
- if (z && v.current) {
42
- const k = v.current.scrollHeight;
43
- if (k > o) {
44
- v.current.style.height = "auto";
45
- let L = k;
46
- d.length < 1 && (L = o), v.current.style.height = `${L}px`, L >= i ? v.current.style.overflowY = "scroll" : v.current.style.overflowY = "hidden";
39
+ }, fe = (g) => {
40
+ if ($ && p.current) {
41
+ const A = p.current.scrollHeight;
42
+ if (A > r) {
43
+ p.current.style.height = "auto";
44
+ let I = A;
45
+ g.length < 1 && (I = r), p.current.style.height = `${I}px`, I >= i ? p.current.style.overflowY = "scroll" : p.current.style.overflowY = "hidden";
47
46
  }
48
47
  }
49
- }, j = (d) => {
50
- be(d), r(d), d && d.length > 0 && u("user-typing", { textLength: d.length });
51
- }, te = () => {
52
- const d = y.get("widgetDOMElement");
53
- if (d) {
54
- const k = d.querySelectorAll(
55
- ".humany-conversation-entry"
56
- );
57
- k.length && k[k.length - 1].focus();
58
- }
48
+ }, E = (g) => {
49
+ fe(g), o(g), g && g.length > 0 && m("user-typing", { textLength: g.length });
59
50
  };
60
- return l ? null : /* @__PURE__ */ h(
61
- je,
51
+ return k ? null : /* @__PURE__ */ u(
52
+ Be,
62
53
  {
63
- grow: z,
64
- className: T("humany-conversation-input", t),
65
- scrollableCss: O,
66
- isTabbing: m,
54
+ grow: $,
55
+ className: H("humany-conversation-input", t),
56
+ scrollableCss: T,
57
+ isTabbing: d,
67
58
  children: [
68
- $ && /* @__PURE__ */ n(
69
- De,
59
+ v && /* @__PURE__ */ n(
60
+ Re,
70
61
  {
71
- disabled: g,
72
- onClick: pe,
73
- title: $.label,
74
- "aria-label": $.label,
62
+ disabled: l,
63
+ onClick: ge,
64
+ title: v.label,
65
+ "aria-label": v.label,
75
66
  children: /* @__PURE__ */ n(
76
67
  x,
77
68
  {
78
69
  size: 24,
79
- symbol: { type: "Svg", content: $.icon || "browse" }
70
+ symbol: { type: "Svg", content: v.icon || "browse" }
80
71
  }
81
72
  )
82
73
  }
83
74
  ),
84
- z ? /* @__PURE__ */ n(
85
- Ke,
75
+ $ ? /* @__PURE__ */ n(
76
+ Ae,
86
77
  {
87
78
  value: e,
88
- onChange: j,
89
- onEnter: D,
90
- disabled: g,
91
- "aria-label": b,
92
- placeholder: b,
79
+ onChange: E,
80
+ onEnter: z,
81
+ disabled: l,
82
+ "aria-label": f,
83
+ placeholder: f,
93
84
  type: "textarea",
94
85
  rows: 1,
95
- ref: v
86
+ ref: p
96
87
  }
97
88
  ) : /* @__PURE__ */ n(
98
- Ee,
89
+ Oe,
99
90
  {
100
91
  value: e,
101
- onChange: j,
102
- onEnter: D,
103
- disabled: g,
104
- "aria-label": b,
105
- placeholder: b
92
+ onChange: E,
93
+ onEnter: z,
94
+ disabled: l,
95
+ "aria-label": f,
96
+ placeholder: f
106
97
  }
107
98
  ),
108
99
  /* @__PURE__ */ n(
109
- he,
100
+ de,
110
101
  {
111
102
  disabled: !1,
112
- onClick: D,
113
- title: w,
114
- "aria-label": w,
103
+ onClick: z,
104
+ title: h,
105
+ "aria-label": h,
115
106
  children: /* @__PURE__ */ n(
116
- Pe,
107
+ Ke,
117
108
  {
118
109
  size: 22,
119
110
  symbol: { type: "Svg", content: "send" },
@@ -121,42 +112,11 @@ const Re = ({ className: t }) => {
121
112
  }
122
113
  )
123
114
  }
124
- ),
125
- /* @__PURE__ */ n(
126
- Be,
127
- {
128
- className: "humany-skip-to-latest-message",
129
- onKeyDown: (d) => {
130
- (d.key === "Enter" || d.keyCode === 13) && te();
131
- },
132
- onClick: te,
133
- children: A
134
- }
135
115
  )
136
116
  ]
137
117
  }
138
118
  );
139
- }, Be = a.button`
140
- position: absolute;
141
- bottom: 112px;
142
- text-align: center;
143
- background-color: white;
144
- padding: ${(t) => {
145
- var e;
146
- return (e = t.theme.sizes) == null ? void 0 : e.small;
147
- }};
148
- text-decoration: none;
149
- border-radius: ${(t) => {
150
- var e;
151
- return (e = t.theme.sizes) == null ? void 0 : e.small;
152
- }};
153
- left: -10000000px;
154
- &:focus-visible {
155
- left: 50%;
156
- transform: translateX(-50%);
157
- ${f};
158
- }
159
- `, Ke = a(se)`
119
+ }, Ae = a(ne)`
160
120
  resize: none;
161
121
  flex: 1;
162
122
  flex-shrink: 1;
@@ -177,10 +137,10 @@ const Re = ({ className: t }) => {
177
137
  transition: height 200ms linear;
178
138
  outline: none;
179
139
  &:focus-visible {
180
- ${f};
140
+ ${y};
181
141
  outline-offset: 12px;
182
142
  }
183
- `, Ee = a(se)`
143
+ `, Oe = a(ne)`
184
144
  flex: 1;
185
145
  border: none;
186
146
  background-color: transparent;
@@ -206,7 +166,7 @@ const Re = ({ className: t }) => {
206
166
  }};
207
167
  font-style: italic;
208
168
  }
209
- `, he = a(I)`
169
+ `, de = a(M)`
210
170
  flex: 0 0 50px;
211
171
  align-self: stretch;
212
172
  background-color: transparent;
@@ -216,19 +176,19 @@ const Re = ({ className: t }) => {
216
176
  border: none;
217
177
  color: #a6a6a6;
218
178
  &:focus-visible {
219
- ${f};
179
+ ${y};
220
180
  }
221
- `, De = a(he)`
181
+ `, Re = a(de)`
222
182
  border-right: ${(t) => t.theme.border};
223
183
  margin: ${(t) => {
224
184
  var e;
225
185
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
226
186
  }} 0;
227
- `, je = a.div`
228
- ${(t) => t.grow ? p`
187
+ `, Be = a.div`
188
+ ${(t) => t.grow ? b`
229
189
  min-height: 50px;
230
190
  max-height: 150px;
231
- ` : p`
191
+ ` : b`
232
192
  height: 50px;
233
193
  `}
234
194
  flex: 0 0 auto;
@@ -239,11 +199,11 @@ const Re = ({ className: t }) => {
239
199
  return (e = t.theme.colors) == null ? void 0 : e.accent;
240
200
  }};
241
201
  border-top: ${(t) => t.theme.inputBorder};
242
- ${(t) => t["data-has-focus"] && t.isTabbing && f}
202
+ ${(t) => t["data-has-focus"] && t.isTabbing && y}
243
203
  textarea {
244
204
  ${(t) => !!t.scrollableCss && t.scrollableCss}
245
205
  }
246
- `, Pe = a(
206
+ `, Ke = a(
247
207
  ({
248
208
  hasContent: t,
249
209
  ...e
@@ -260,7 +220,7 @@ const Re = ({ className: t }) => {
260
220
  return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
261
221
  }};
262
222
  }
263
- `, We = a.div`
223
+ `, Ee = a.div`
264
224
  width: ${(t) => t.avatarSize || "32px"};
265
225
  height: ${(t) => t.avatarSize || "32px"};
266
226
  border-radius: 50%;
@@ -307,7 +267,7 @@ const Re = ({ className: t }) => {
307
267
  }};
308
268
  }
309
269
  }
310
- `, qe = Me`
270
+ `, De = ze`
311
271
  0% {
312
272
  opacity: 0;
313
273
  }
@@ -317,7 +277,7 @@ const Re = ({ className: t }) => {
317
277
  100% {
318
278
  opacity: 0;
319
279
  }
320
- `, Ue = a.div`
280
+ `, je = a.div`
321
281
  display: flex;
322
282
  justify-content: center;
323
283
  > div {
@@ -329,7 +289,7 @@ const Re = ({ className: t }) => {
329
289
  var e;
330
290
  return (e = t.theme.colors) == null ? void 0 : e.text;
331
291
  }};
332
- animation: ${qe} 1s infinite;
292
+ animation: ${De} 1s infinite;
333
293
  }
334
294
  > div:nth-of-type(2) {
335
295
  animation-delay: 100ms;
@@ -337,29 +297,29 @@ const Re = ({ className: t }) => {
337
297
  > div:nth-of-type(3) {
338
298
  animation-delay: 200ms;
339
299
  }
340
- `, V = a.div`
300
+ `, q = a.div`
341
301
  grid-area: content;
342
302
  max-width: 100%;
343
303
  overflow: hidden;
344
- `, Ve = a(X)`
304
+ `, Pe = a(F)`
345
305
  font-size: ${(t) => {
346
306
  var e;
347
307
  return (e = t.theme.fonts) == null ? void 0 : e.normal;
348
308
  }};
349
309
  font-weight: normal;
350
310
  margin: 0;
351
- `, _ = a.div`
311
+ `, U = a.div`
352
312
  display: flex;
353
313
  ${(t) => t.left && "justify-content: start;"};
354
314
  ${(t) => t.center && "justify-content: center;"};
355
315
  ${(t) => t.right && "justify-content: end;"};
356
- `, F = a.div`
316
+ `, V = a.div`
357
317
  ${(t) => {
358
318
  var e;
359
319
  return t.padded && `padding: ${(e = t.theme.sizes) == null ? void 0 : e.medium};`;
360
320
  }}
361
- ${(t) => !t.user && t.stacked && _e(t.stacked, t.theme)}
362
- ${(t) => t.user && t.stacked && Fe(t.stacked, t.theme)}
321
+ ${(t) => !t.user && t.stacked && We(t.stacked, t.theme)}
322
+ ${(t) => t.user && t.stacked && qe(t.stacked, t.theme)}
363
323
 
364
324
  display: inline-block;
365
325
  margin-top: ${(t) => {
@@ -375,15 +335,15 @@ const Re = ({ className: t }) => {
375
335
  }
376
336
  max-width: 100%;
377
337
  ${(t) => t.fullWidth && "width: 100%;"}
378
- `, _e = (t, e) => {
379
- var o, s;
380
- const r = p`
381
- background-color: ${(o = e.colors) == null ? void 0 : o.accent};
338
+ `, We = (t, e) => {
339
+ var r, s;
340
+ const o = b`
341
+ background-color: ${(r = e.colors) == null ? void 0 : r.accent};
382
342
  color: ${(s = e.colors) == null ? void 0 : s.text};
383
343
  ${e.border && `border: ${e.border};`};
384
344
  `;
385
- return e.borderRadius ? p`
386
- ${r}
345
+ return e.borderRadius ? b`
346
+ ${o}
387
347
 
388
348
  border-top-right-radius: ${e.borderRadius};
389
349
  border-bottom-right-radius: ${e.borderRadius};
@@ -395,15 +355,15 @@ const Re = ({ className: t }) => {
395
355
  ${t === "last" && `
396
356
  border-bottom-left-radius: ${e.borderRadius};
397
357
  `}
398
- ` : r;
399
- }, Fe = (t, e) => {
400
- var o, s;
401
- const r = p`
402
- background-color: ${(o = e.colors) == null ? void 0 : o.primary};
358
+ ` : o;
359
+ }, qe = (t, e) => {
360
+ var r, s;
361
+ const o = b`
362
+ background-color: ${(r = e.colors) == null ? void 0 : r.primary};
403
363
  color: ${(s = e.colors) == null ? void 0 : s.accent};
404
364
  `;
405
- return e.borderRadius ? p`
406
- ${r}
365
+ return e.borderRadius ? b`
366
+ ${o}
407
367
 
408
368
  border-top-left-radius: ${e.borderRadius};
409
369
  border-bottom-left-radius: ${e.borderRadius};
@@ -415,8 +375,8 @@ const Re = ({ className: t }) => {
415
375
  ${t === "last" && `
416
376
  border-bottom-right-radius: ${e.borderRadius};
417
377
  `}
418
- ` : r;
419
- }, R = a.div`
378
+ ` : o;
379
+ }, O = a.div`
420
380
  margin-bottom: ${(t) => {
421
381
  var e;
422
382
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -425,18 +385,18 @@ const Re = ({ className: t }) => {
425
385
  margin-bottom: 0;
426
386
  }
427
387
  `, S = (t) => {
428
- var e, r;
429
- return p`
388
+ var e, o;
389
+ return b`
430
390
  margin: ${(e = t.theme.sizes) == null ? void 0 : e.medium} 0;
431
- padding: 0 ${(r = t.theme.sizes) == null ? void 0 : r.medium};
391
+ padding: 0 ${(o = t.theme.sizes) == null ? void 0 : o.medium};
432
392
  `;
433
- }, Ye = a(Oe)`
393
+ }, Ue = a(He)`
434
394
  & button.humany-form-component-button {
435
395
  ${(t) => {
436
- var e, r, o, s;
437
- return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && xe({
396
+ var e, o, r, s;
397
+ return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((o = t.theme.colors) == null ? void 0 : o.accent) && be({
438
398
  active: !1,
439
- primaryColor: (o = t.theme.colors) == null ? void 0 : o.primary,
399
+ primaryColor: (r = t.theme.colors) == null ? void 0 : r.primary,
440
400
  secondaryColor: (s = t.theme.colors) == null ? void 0 : s.accent,
441
401
  theme: t.theme
442
402
  });
@@ -458,18 +418,18 @@ const Re = ({ className: t }) => {
458
418
  }};
459
419
  }
460
420
  }
461
- `, Xe = a(G)`
421
+ `, Ve = a(Y)`
462
422
  white-space: pre-wrap;
463
423
  a {
464
424
  color: ${(t) => t.theme.colors.link};
465
425
  &:focus {
466
426
  ${(t) => {
467
427
  var e;
468
- return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && f;
428
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && y;
469
429
  }};
470
430
  }
471
431
  }
472
- `, Ge = a(ce)`
432
+ `, _e = a(se)`
473
433
  padding: 0;
474
434
  list-style: none;
475
435
  margin: 0 -${(t) => {
@@ -482,8 +442,8 @@ const Re = ({ className: t }) => {
482
442
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
483
443
  }};
484
444
  }
485
- `, Je = a.button`
486
- ${(t) => B(t)};
445
+ `, Fe = a.button`
446
+ ${(t) => R(t)};
487
447
  display: block;
488
448
  background-color: ${(t) => {
489
449
  var e;
@@ -492,23 +452,23 @@ const Re = ({ className: t }) => {
492
452
  width: 100%;
493
453
  color: #fff;
494
454
  &:focus-visible {
495
- ${f}
455
+ ${y}
496
456
  background-color: transparent;
497
457
  }
498
- `, ne = Z(
499
- ({ boxed: t, className: e, agentData: r }, o) => /* @__PURE__ */ n(V, { ref: o, children: /* @__PURE__ */ n(_, { left: t, center: !t, children: /* @__PURE__ */ n(
500
- F,
458
+ `, Z = J(
459
+ ({ boxed: t, className: e, agentData: o }, r) => /* @__PURE__ */ n(q, { ref: r, children: /* @__PURE__ */ n(U, { left: t, center: !t, children: /* @__PURE__ */ n(
460
+ V,
501
461
  {
502
462
  padded: !!t,
503
463
  stacked: t ? "first" : void 0,
504
- children: /* @__PURE__ */ h(Ue, { children: [
464
+ children: /* @__PURE__ */ u(je, { children: [
505
465
  /* @__PURE__ */ n("div", {}),
506
466
  /* @__PURE__ */ n("div", {}),
507
467
  /* @__PURE__ */ n("div", {})
508
468
  ] })
509
469
  }
510
470
  ) }) })
511
- ), ge = Ie.createContext(null), Qe = a.p`
471
+ ), me = Le.createContext(null), Ye = a.p`
512
472
  && {
513
473
  font-size: ${(t) => {
514
474
  var e;
@@ -523,96 +483,96 @@ const Re = ({ className: t }) => {
523
483
  var e;
524
484
  return (e = t.theme.colors) == null ? void 0 : e.text;
525
485
  }};
526
- `, re = (t, e) => new Date(t).toLocaleTimeString(e || [], {
486
+ `, ee = (t, e) => new Date(t).toLocaleTimeString(e || [], {
527
487
  hour: "numeric",
528
488
  minute: "2-digit"
529
- }), M = ({
489
+ }), N = ({
530
490
  className: t,
531
491
  name: e,
532
- timestamp: r,
533
- ariaHidden: o = !1
492
+ timestamp: o,
493
+ ariaHidden: r = !1
534
494
  }) => {
535
- const s = He(ge);
536
- if (!e && !r)
495
+ const s = Ne(me);
496
+ if (!e && !o)
537
497
  return null;
538
498
  let i = "";
539
- return e ? r ? i = `${e}: ${re(r, s)}` : i = e : r && (i = re(r, s)), /* @__PURE__ */ n(Qe, { "aria-hidden": o, children: i });
540
- }, fe = ({
499
+ return e ? o ? i = `${e}: ${ee(o, s)}` : i = e : o && (i = ee(o, s)), /* @__PURE__ */ n(Ye, { "aria-hidden": r, children: i });
500
+ }, ue = ({
541
501
  className: t,
542
502
  children: e,
543
- sender: r,
544
- timestamp: o
503
+ sender: o,
504
+ timestamp: r
545
505
  }) => {
546
- const { avatar: s, name: i } = r, { avatarSize: c } = H();
547
- return /* @__PURE__ */ h(
548
- Ze,
506
+ const { avatar: s, name: i } = o, { avatarSize: c } = C();
507
+ return /* @__PURE__ */ u(
508
+ Xe,
549
509
  {
550
510
  hasAvatar: !!s,
551
- className: T(
511
+ className: H(
552
512
  t,
553
513
  "humany-conversation-agent-message"
554
514
  ),
555
515
  children: [
556
- s && /* @__PURE__ */ n(We, { avatarSize: c, children: typeof s == "string" ? (
516
+ s && /* @__PURE__ */ n(Ee, { avatarSize: c, children: typeof s == "string" ? (
557
517
  // eslint-disable-next-line jsx-a11y/alt-text
558
518
  /* @__PURE__ */ n("img", { src: s })
559
519
  ) : /* @__PURE__ */ n(x, { symbol: s }) }),
560
520
  e,
561
521
  /* @__PURE__ */ n(
562
- M,
522
+ N,
563
523
  {
564
524
  name: i,
565
- timestamp: o,
525
+ timestamp: r,
566
526
  ariaHidden: !0
567
527
  }
568
528
  )
569
529
  ]
570
530
  }
571
531
  );
572
- }, Ze = a.div`
532
+ }, Xe = a.div`
573
533
  display: grid;
574
534
  margin-right: 10%;
575
535
  width: 90%;
576
- ${(t) => t.hasAvatar ? p`
536
+ ${(t) => t.hasAvatar ? b`
577
537
  grid-template-columns: auto 1fr;
578
538
  grid-template-rows: 1fr auto;
579
539
  grid-template-areas:
580
540
  'avatar content'
581
541
  '. info';
582
- ` : p`
542
+ ` : b`
583
543
  grid-template-columns: 1fr;
584
544
  grid-template-rows: 1fr auto;
585
545
  grid-template-areas:
586
546
  'content'
587
547
  'info';
588
548
  `};
589
- `, et = Z(
590
- ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: s }, i) => /* @__PURE__ */ n(
591
- tt,
549
+ `, Ge = J(
550
+ ({ className: t, children: e, timestamp: o, discrete: r, fullWidth: s }, i) => /* @__PURE__ */ n(
551
+ Je,
592
552
  {
593
553
  ref: i,
594
- className: T(
554
+ className: H(
595
555
  t,
596
556
  "humany-conversation-system-message"
597
557
  ),
598
558
  fullWidth: s,
599
- children: o ? /* @__PURE__ */ h(nt, { className: "humany-conversation-discrete-message", children: [
559
+ children: r ? /* @__PURE__ */ u(Qe, { className: "humany-conversation-discrete-message", children: [
600
560
  e,
601
- /* @__PURE__ */ n(M, { timestamp: r })
602
- ] }) : /* @__PURE__ */ h(N, { children: [
561
+ /* @__PURE__ */ n(N, { timestamp: o })
562
+ ] }) : /* @__PURE__ */ u(L, { children: [
603
563
  e,
604
- /* @__PURE__ */ n(M, { timestamp: r })
564
+ /* @__PURE__ */ n(N, { timestamp: o })
605
565
  ] })
606
566
  }
607
567
  )
608
- ), tt = a.div`
568
+ ), Je = a.div`
609
569
  ${(t) => t.fullWidth && "width: 100%"};
610
570
  padding: 0 ${(t) => {
611
571
  var e;
612
572
  return (e = t.theme.sizes) == null ? void 0 : e.large;
613
573
  }};
614
574
  overflow: auto;
615
- `, nt = a.div`
575
+ `, Qe = a.div`
616
576
  text-align: center;
617
577
  word-wrap: break-word;
618
578
  font-size: ${(t) => {
@@ -626,79 +586,79 @@ const Re = ({ className: t }) => {
626
586
  > p {
627
587
  margin: 0;
628
588
  }
629
- `, rt = ({ className: t, children: e, timestamp: r }) => {
630
- const { userLabel: o = "" } = H();
631
- return /* @__PURE__ */ h(
632
- ot,
589
+ `, Ze = ({ className: t, children: e, timestamp: o }) => {
590
+ const { userLabel: r = "" } = C();
591
+ return /* @__PURE__ */ u(
592
+ et,
633
593
  {
634
- className: T(
594
+ className: H(
635
595
  t,
636
596
  "humany-conversation-user-message"
637
597
  ),
638
598
  children: [
639
599
  e,
640
600
  /* @__PURE__ */ n(
641
- M,
601
+ N,
642
602
  {
643
- name: o,
644
- timestamp: r,
603
+ name: r,
604
+ timestamp: o,
645
605
  ariaHidden: !0
646
606
  }
647
607
  )
648
608
  ]
649
609
  }
650
610
  );
651
- }, ot = a.div`
611
+ }, et = a.div`
652
612
  margin-left: 10%;
653
613
  width: 90%;
654
614
  display: flex;
655
615
  flex-direction: column;
656
616
  align-items: flex-end;
657
- `, ee = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
617
+ `, Q = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
658
618
  label: t[e],
659
619
  actionKey: e
660
- })), st = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
661
- at,
620
+ })), tt = ({ header: t, actions: e, dispatch: o }) => /* @__PURE__ */ n(
621
+ nt,
662
622
  {
663
623
  className: "humany-conversation-button-list",
664
624
  header: t,
665
- items: ee(e),
666
- renderItem: (o) => {
625
+ items: Q(e),
626
+ renderItem: (r) => {
667
627
  var i;
668
- const s = !!((i = o == null ? void 0 : o.data) != null && i.href);
669
- return /* @__PURE__ */ n("li", { children: s ? /* @__PURE__ */ h(
670
- it,
628
+ const s = !!((i = r == null ? void 0 : r.data) != null && i.href);
629
+ return /* @__PURE__ */ n("li", { children: s ? /* @__PURE__ */ u(
630
+ rt,
671
631
  {
672
632
  onClick: () => {
673
- r("action", o);
633
+ o("action", r);
674
634
  },
675
- href: o.data.href,
676
- target: o.data.target,
677
- "aria-label": o.label,
678
- title: o.label,
635
+ href: r.data.href,
636
+ target: r.data.target,
637
+ "aria-label": r.label,
638
+ title: r.label,
679
639
  children: [
680
- /* @__PURE__ */ n(x, { symbol: o.symbol }),
681
- o.label
640
+ /* @__PURE__ */ n(x, { symbol: r.symbol }),
641
+ r.label
682
642
  ]
683
643
  }
684
- ) : /* @__PURE__ */ h(
685
- lt,
644
+ ) : /* @__PURE__ */ u(
645
+ ot,
686
646
  {
687
647
  onClick: () => {
688
- r("action", o);
648
+ o("action", r);
689
649
  },
690
- "aria-label": o.label,
691
- title: o.label,
650
+ "aria-label": r.label,
651
+ title: r.label,
692
652
  children: [
693
- /* @__PURE__ */ n(x, { symbol: o.symbol }),
694
- o.label
653
+ /* @__PURE__ */ n(x, { symbol: r.symbol }),
654
+ r.label
695
655
  ]
696
656
  }
697
- ) }, o.actionKey);
657
+ ) }, r.actionKey);
698
658
  }
699
659
  }
700
- ), at = a(K)`
701
- ${E}
660
+ ), nt = a(B)`
661
+ ${K}
702
662
  > ul {
703
663
  display: flex;
704
664
  flex-wrap: wrap;
@@ -711,8 +671,8 @@ const Re = ({ className: t }) => {
711
671
  }
712
672
  }
713
673
  ${S}
714
- `, it = a(we)`
715
- ${B};
674
+ `, rt = a($e)`
675
+ ${R};
716
676
 
717
677
  display: block;
718
678
  padding: ${(t) => {
@@ -728,7 +688,7 @@ const Re = ({ className: t }) => {
728
688
  overflow: hidden;
729
689
  text-overflow: ellipsis;
730
690
  &:focus-visible {
731
- ${f}
691
+ ${y}
732
692
  background-color: transparent;
733
693
  }
734
694
 
@@ -739,8 +699,8 @@ const Re = ({ className: t }) => {
739
699
  return (e = t.theme.sizes) == null ? void 0 : e.small;
740
700
  }};
741
701
  }
742
- `, lt = a(I)`
743
- ${B};
702
+ `, ot = a(M)`
703
+ ${R};
744
704
 
745
705
  display: block;
746
706
  padding: ${(t) => {
@@ -756,7 +716,7 @@ const Re = ({ className: t }) => {
756
716
  overflow: hidden;
757
717
  text-overflow: ellipsis;
758
718
  &:focus-visible {
759
- ${f}
719
+ ${y}
760
720
  background-color: transparent;
761
721
  }
762
722
 
@@ -767,58 +727,58 @@ const Re = ({ className: t }) => {
767
727
  return (e = t.theme.sizes) == null ? void 0 : e.small;
768
728
  }};
769
729
  }
770
- `, ct = ({ type: t, content: e = {} }) => {
771
- const r = ke(t);
772
- return !r || !t ? null : /* @__PURE__ */ n(Te, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
773
- }, dt = ({ body: t }) => /* @__PURE__ */ n(mt, { html: t }), mt = a(G)`
774
- ${Ce}
730
+ `, st = ({ type: t, content: e = {} }) => {
731
+ const o = ve(t);
732
+ return !o || !t ? null : /* @__PURE__ */ n(Me, { fallback: null, children: /* @__PURE__ */ n(o, { ...e }) });
733
+ }, at = ({ body: t }) => /* @__PURE__ */ n(it, { html: t }), it = a(Y)`
734
+ ${xe}
775
735
  color: inherit;
776
736
  white-space: pre-wrap;
777
737
  ${S}
778
738
  a {
779
739
  color: ${(t) => t.theme.colors.link};
780
740
  &:focus-visible {
781
- ${f};
741
+ ${y};
782
742
  }
783
743
  }
784
- `, ut = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
785
- ht,
744
+ `, lt = ({ header: t, actions: e, dispatch: o }) => /* @__PURE__ */ n(
745
+ ct,
786
746
  {
787
747
  className: "humany-conversation-item-list",
788
748
  header: t,
789
- items: ee(e),
790
- renderItem: (o) => {
749
+ items: Q(e),
750
+ renderItem: (r) => {
791
751
  var s;
792
- return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(gt, { children: [
793
- ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
752
+ return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(dt, { children: [
753
+ ((s = r.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
794
754
  x,
795
755
  {
796
756
  size: 22,
797
757
  symbol: {
798
- type: o.symbol.type,
799
- content: o.symbol.content
758
+ type: r.symbol.type,
759
+ content: r.symbol.content
800
760
  }
801
761
  }
802
762
  ) }),
803
- /* @__PURE__ */ h("div", { className: "item-body", children: [
763
+ /* @__PURE__ */ u("div", { className: "item-body", children: [
804
764
  /* @__PURE__ */ n(
805
- I,
765
+ M,
806
766
  {
807
767
  onClick: () => {
808
- r("action", o);
768
+ o("action", r);
809
769
  },
810
- "aria-label": o.label,
811
- title: o.label,
812
- children: o.label
770
+ "aria-label": r.label,
771
+ title: r.label,
772
+ children: r.label
813
773
  }
814
774
  ),
815
- o.description && /* @__PURE__ */ n("p", { children: o.description })
775
+ r.description && /* @__PURE__ */ n("p", { children: r.description })
816
776
  ] })
817
- ] }) }, o.actionKey);
777
+ ] }) }, r.actionKey);
818
778
  }
819
779
  }
820
- ), ht = a(K)`
821
- ${E}
780
+ ), ct = a(B)`
781
+ ${K}
822
782
 
823
783
  > .humany-paragraph {
824
784
  ${S}
@@ -829,9 +789,9 @@ const Re = ({ className: t }) => {
829
789
  }
830
790
  }
831
791
 
832
- ${(t) => J(t)(
792
+ ${(t) => X(t)(
833
793
  "h1",
834
- p`
794
+ b`
835
795
  white-space: normal;
836
796
  `
837
797
  )}
@@ -855,7 +815,7 @@ const Re = ({ className: t }) => {
855
815
  border-bottom: none;
856
816
  }
857
817
  }
858
- `, gt = a.div`
818
+ `, dt = a.div`
859
819
  display: flex;
860
820
  gap: ${(t) => {
861
821
  var e;
@@ -894,7 +854,7 @@ const Re = ({ className: t }) => {
894
854
  margin: 0;
895
855
 
896
856
  &:focus-visible {
897
- ${f}
857
+ ${y}
898
858
  span {
899
859
  color: ${(t) => {
900
860
  var e;
@@ -904,32 +864,32 @@ const Re = ({ className: t }) => {
904
864
  }
905
865
  }
906
866
  }
907
- `, ft = ({ header: t, actions: e, dispatch: r }) => {
908
- const o = Se(e), s = me(), i = ae();
909
- return Q(() => {
910
- if (o && Array.isArray(e) && Array.isArray(o) && o.length < e.length && s.current) {
867
+ `, mt = ({ header: t, actions: e, dispatch: o }) => {
868
+ const r = ke(e), s = le(), i = re();
869
+ return G(() => {
870
+ if (r && Array.isArray(e) && Array.isArray(r) && r.length < e.length && s.current) {
911
871
  const c = s.current.querySelectorAll(
912
872
  ".humany-conversation-link-list > ul > li"
913
- ), m = c[o.length];
914
- if (c.length === e.length && o.length) {
915
- const u = c[o.length - 1];
916
- if (u) {
917
- const y = u.querySelector(
873
+ ), d = c[r.length];
874
+ if (c.length === e.length && r.length) {
875
+ const m = c[r.length - 1];
876
+ if (m) {
877
+ const f = m.querySelector(
918
878
  ".humany-button"
919
879
  );
920
- y && y.focus();
880
+ f && f.focus();
921
881
  }
922
882
  } else
923
- m && new MutationObserver((y, b) => {
924
- y.forEach((l) => {
883
+ d && new MutationObserver((f, k) => {
884
+ f.forEach((l) => {
925
885
  if (l.addedNodes) {
926
- const g = Array.from(
886
+ const h = Array.from(
927
887
  l.addedNodes
928
- ).find((w) => w.tagName === "BUTTON");
929
- g && Ne(s.current, document.activeElement) && (i && g.focus(), b.disconnect());
888
+ ).find(($) => $.tagName === "BUTTON");
889
+ h && Se(s.current, document.activeElement) && (i && h.focus(), k.disconnect());
930
890
  }
931
891
  });
932
- }).observe(m, {
892
+ }).observe(d, {
933
893
  attributes: !1,
934
894
  characterData: !1,
935
895
  childList: !0,
@@ -939,18 +899,18 @@ const Re = ({ className: t }) => {
939
899
  });
940
900
  }
941
901
  }), /* @__PURE__ */ n(
942
- yt,
902
+ ut,
943
903
  {
944
904
  ref: s,
945
905
  className: "humany-conversation-link-list",
946
906
  header: t,
947
- items: ee(e),
948
- renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
949
- pt,
907
+ items: Q(e),
908
+ renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
909
+ ht,
950
910
  {
951
911
  help: c.actionKey === "help",
952
912
  onClick: () => {
953
- r("action", c);
913
+ o("action", c);
954
914
  },
955
915
  "aria-label": c.label,
956
916
  title: c.label,
@@ -971,13 +931,13 @@ const Re = ({ className: t }) => {
971
931
  ) }, c.actionKey)
972
932
  }
973
933
  );
974
- }, yt = a(K)`
975
- ${E}
934
+ }, ut = a(B)`
935
+ ${K}
976
936
  ${S}
977
937
 
978
- ${(t) => J(t)(
938
+ ${(t) => X(t)(
979
939
  "h1",
980
- p`
940
+ b`
981
941
  white-space: normal;
982
942
  `
983
943
  )}
@@ -993,7 +953,7 @@ const Re = ({ className: t }) => {
993
953
  margin: 0;
994
954
  }
995
955
  }
996
- `, pt = a(I)`
956
+ `, ht = a(M)`
997
957
  display: block;
998
958
  text-align: left;
999
959
  font-weight: 300;
@@ -1006,20 +966,20 @@ const Re = ({ className: t }) => {
1006
966
  overflow: hidden;
1007
967
 
1008
968
  ${(t) => {
1009
- var e, r;
1010
- return t.help && p`
969
+ var e, o;
970
+ return t.help && b`
1011
971
  color: ${(e = t.theme.colors) == null ? void 0 : e.text};
1012
972
  text-decoration: underline;
1013
973
 
1014
974
  i,
1015
975
  svg {
1016
- margin-left: ${(r = t.theme.sizes) == null ? void 0 : r.small};
976
+ margin-left: ${(o = t.theme.sizes) == null ? void 0 : o.small};
1017
977
  }
1018
978
  `;
1019
979
  }}
1020
980
 
1021
981
  &:focus-visible {
1022
- ${f}
982
+ ${y}
1023
983
  span {
1024
984
  color: ${(t) => {
1025
985
  var e;
@@ -1028,18 +988,18 @@ const Re = ({ className: t }) => {
1028
988
  text-decoration: underline;
1029
989
  }
1030
990
  }
1031
- `, bt = () => /* @__PURE__ */ n($t, { className: "humany-conversation-separator" }), $t = a.div`
991
+ `, gt = () => /* @__PURE__ */ n(ft, { className: "humany-conversation-separator" }), ft = a.div`
1032
992
  ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
1033
993
  width: 100%;
1034
- `, vt = ({ text: t }) => /* @__PURE__ */ n(xt, { className: "humany-conversation-text", variant: "span", children: t }), xt = a(X)`
994
+ `, yt = ({ text: t }) => /* @__PURE__ */ n(pt, { className: "humany-conversation-text", variant: "span", children: t }), pt = a(F)`
1035
995
  ${S}
1036
- `, wt = ({
996
+ `, bt = ({
1037
997
  header: t = "Video call",
1038
998
  acceptLabel: e = "Accept",
1039
- declineLabel: r = "Decline",
1040
- dispatch: o
999
+ declineLabel: o = "Decline",
1000
+ dispatch: r
1041
1001
  }) => {
1042
- const s = Ae(() => [
1002
+ const s = Ie(() => [
1043
1003
  {
1044
1004
  label: e,
1045
1005
  actionKey: "accept-video-call",
@@ -1049,16 +1009,16 @@ const Re = ({ className: t }) => {
1049
1009
  }
1050
1010
  },
1051
1011
  {
1052
- label: r,
1012
+ label: o,
1053
1013
  actionKey: "decline-video-call",
1054
1014
  symbol: {
1055
1015
  type: "Svg",
1056
1016
  content: "close"
1057
1017
  }
1058
1018
  }
1059
- ], [e, r]);
1019
+ ], [e, o]);
1060
1020
  return /* @__PURE__ */ n(
1061
- kt,
1021
+ $t,
1062
1022
  {
1063
1023
  className: "humany-conversation-video-request",
1064
1024
  header: t,
@@ -1066,10 +1026,10 @@ const Re = ({ className: t }) => {
1066
1026
  renderItem: (i) => {
1067
1027
  const c = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
1068
1028
  return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
1069
- Ct,
1029
+ vt,
1070
1030
  {
1071
1031
  onClick: () => {
1072
- o("action", i);
1032
+ r("action", i);
1073
1033
  },
1074
1034
  "aria-label": i.label,
1075
1035
  title: i.label,
@@ -1080,8 +1040,8 @@ const Re = ({ className: t }) => {
1080
1040
  }
1081
1041
  }
1082
1042
  );
1083
- }, kt = a(K)`
1084
- ${(t) => E(t)}
1043
+ }, $t = a(B)`
1044
+ ${(t) => K(t)}
1085
1045
  > ul {
1086
1046
  display: flex;
1087
1047
  flex-wrap: wrap;
@@ -1094,8 +1054,8 @@ const Re = ({ className: t }) => {
1094
1054
  }
1095
1055
  }
1096
1056
  ${(t) => S(t)}
1097
- `, Ct = a(I)`
1098
- ${B};
1057
+ `, vt = a(M)`
1058
+ ${R};
1099
1059
 
1100
1060
  background-color: ${(t) => t.bgColor};
1101
1061
  display: flex;
@@ -1107,7 +1067,7 @@ const Re = ({ className: t }) => {
1107
1067
  border-radius: 100%;
1108
1068
 
1109
1069
  &:focus-visible {
1110
- ${f}
1070
+ ${y}
1111
1071
  background-color: transparent;
1112
1072
 
1113
1073
  i,
@@ -1134,81 +1094,81 @@ const Re = ({ className: t }) => {
1134
1094
  stroke: #fff;
1135
1095
  }
1136
1096
  }
1137
- `, St = ([t, e]) => ({ type: t, content: e }), zt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
1138
- Lt,
1097
+ `, xt = ([t, e]) => ({ type: t, content: e }), kt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
1098
+ wt,
1139
1099
  {
1140
1100
  role: "none",
1141
1101
  className: "humany-message-list",
1142
- items: t.map(St),
1102
+ items: t.map(xt),
1143
1103
  renderLi: !0,
1144
- renderItem: (r) => {
1145
- switch (r.type) {
1146
- case C.Text:
1147
- return /* @__PURE__ */ n(vt, { text: r.content });
1148
- case C.HTML:
1149
- return /* @__PURE__ */ n(dt, { ...r.content });
1150
- case C.Separator:
1151
- return /* @__PURE__ */ n(bt, { ...r.content });
1152
- case C.ItemList:
1153
- return /* @__PURE__ */ n(ut, { ...r.content, dispatch: e });
1154
- case C.LinkList:
1155
- return /* @__PURE__ */ n(ft, { ...r.content, dispatch: e });
1156
- case C.ButtonList:
1157
- return /* @__PURE__ */ n(st, { ...r.content, dispatch: e });
1158
- case C.VideoRequest:
1159
- return /* @__PURE__ */ n(wt, { ...r.content, dispatch: e });
1104
+ renderItem: (o) => {
1105
+ switch (o.type) {
1106
+ case w.Text:
1107
+ return /* @__PURE__ */ n(yt, { text: o.content });
1108
+ case w.HTML:
1109
+ return /* @__PURE__ */ n(at, { ...o.content });
1110
+ case w.Separator:
1111
+ return /* @__PURE__ */ n(gt, { ...o.content });
1112
+ case w.ItemList:
1113
+ return /* @__PURE__ */ n(lt, { ...o.content, dispatch: e });
1114
+ case w.LinkList:
1115
+ return /* @__PURE__ */ n(mt, { ...o.content, dispatch: e });
1116
+ case w.ButtonList:
1117
+ return /* @__PURE__ */ n(tt, { ...o.content, dispatch: e });
1118
+ case w.VideoRequest:
1119
+ return /* @__PURE__ */ n(bt, { ...o.content, dispatch: e });
1160
1120
  default:
1161
- return /* @__PURE__ */ n(ct, { type: r.type, content: r.content });
1121
+ return /* @__PURE__ */ n(st, { type: o.type, content: o.content });
1162
1122
  }
1163
1123
  }
1164
1124
  }
1165
- ), Lt = a(ce)`
1166
- ${ze}
1125
+ ), wt = a(se)`
1126
+ ${we}
1167
1127
 
1168
1128
  > li {
1169
1129
  margin: 0;
1170
1130
  }
1171
- `, Nt = Z(
1172
- ({ className: t, timestamp: e, sender: r, type: o, content: s }, i) => {
1173
- const c = ue(
1131
+ `, Ct = J(
1132
+ ({ className: t, timestamp: e, sender: o, type: r, content: s }, i) => {
1133
+ const c = ce(
1174
1134
  (l) => {
1175
- let g = "first";
1176
- return s.length > 1 && (g = l === 0 ? "first" : l + 1 === s.length ? "last" : "middle"), g;
1135
+ let h = "first";
1136
+ return s.length > 1 && (h = l === 0 ? "first" : l + 1 === s.length ? "last" : "middle"), h;
1177
1137
  },
1178
1138
  [s]
1179
- ), { userLabel: m = "" } = H(), u = () => /* @__PURE__ */ n(N, { children: s.map((l) => {
1180
- const { key: g, body: w, title: z, form: $, actions: A } = l, O = !!w && !z && !$ && !A;
1139
+ ), { userLabel: d = "" } = C(), m = () => /* @__PURE__ */ n(L, { children: s.map((l) => {
1140
+ const { key: h, body: $, title: v, form: T, actions: p } = l, z = !!$ && !v && !T && !p;
1181
1141
  return /* @__PURE__ */ n(
1182
- et,
1142
+ Ge,
1183
1143
  {
1184
1144
  className: t,
1185
- discrete: O,
1145
+ discrete: z,
1186
1146
  ref: i,
1187
1147
  timestamp: e,
1188
- fullWidth: !!$ || !!A,
1189
- children: O && w ? /* @__PURE__ */ n(G, { html: w }) : /* @__PURE__ */ n(q, { isSystem: !0, content: l })
1148
+ fullWidth: !!T || !!p,
1149
+ children: z && $ ? /* @__PURE__ */ n(Y, { html: $ }) : /* @__PURE__ */ n(P, { isSystem: !0, content: l })
1190
1150
  },
1191
- g
1151
+ h
1192
1152
  );
1193
- }) }), y = () => /* @__PURE__ */ h(N, { children: [
1194
- /* @__PURE__ */ n(oe, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: r == null ? void 0 : r.name, timestamp: e }) }),
1153
+ }) }), f = () => /* @__PURE__ */ u(L, { children: [
1154
+ /* @__PURE__ */ n(te, { className: "humany-sr-only", children: /* @__PURE__ */ n(N, { name: o == null ? void 0 : o.name, timestamp: e }) }),
1195
1155
  /* @__PURE__ */ n(
1196
- fe,
1156
+ ue,
1197
1157
  {
1198
- sender: r,
1158
+ sender: o,
1199
1159
  timestamp: e,
1200
1160
  className: t,
1201
- children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, g) => /* @__PURE__ */ n(
1202
- _,
1161
+ children: /* @__PURE__ */ n(q, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
1162
+ U,
1203
1163
  {
1204
1164
  className: "humany-message-container",
1205
1165
  left: !0,
1206
1166
  ref: i,
1207
1167
  children: /* @__PURE__ */ n(
1208
- q,
1168
+ P,
1209
1169
  {
1210
1170
  content: l,
1211
- stacked: c(g)
1171
+ stacked: c(h)
1212
1172
  }
1213
1173
  )
1214
1174
  },
@@ -1216,82 +1176,82 @@ const Re = ({ className: t }) => {
1216
1176
  )) })
1217
1177
  }
1218
1178
  )
1219
- ] }), b = () => /* @__PURE__ */ h(N, { children: [
1220
- /* @__PURE__ */ n(oe, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: m, timestamp: e }) }),
1221
- /* @__PURE__ */ n(rt, { timestamp: e, className: t, children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, g) => /* @__PURE__ */ n(
1222
- _,
1179
+ ] }), k = () => /* @__PURE__ */ u(L, { children: [
1180
+ /* @__PURE__ */ n(te, { className: "humany-sr-only", children: /* @__PURE__ */ n(N, { name: d, timestamp: e }) }),
1181
+ /* @__PURE__ */ n(Ze, { timestamp: e, className: t, children: /* @__PURE__ */ n(q, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
1182
+ U,
1223
1183
  {
1224
1184
  className: "humany-message-container",
1225
1185
  right: !0,
1226
1186
  ref: i,
1227
1187
  children: /* @__PURE__ */ n(
1228
- q,
1188
+ P,
1229
1189
  {
1230
1190
  isUser: !0,
1231
1191
  content: l,
1232
- stacked: c(g)
1192
+ stacked: c(h)
1233
1193
  }
1234
1194
  )
1235
1195
  },
1236
1196
  l.key
1237
1197
  )) }) })
1238
1198
  ] });
1239
- switch (o) {
1240
- case W.System:
1241
- return u();
1242
- case W.Agent:
1243
- return y();
1244
- case W.User:
1245
- return b();
1199
+ switch (r) {
1200
+ case j.System:
1201
+ return m();
1202
+ case j.Agent:
1203
+ return f();
1204
+ case j.User:
1205
+ return k();
1246
1206
  default:
1247
1207
  return null;
1248
1208
  }
1249
1209
  }
1250
- ), q = ({
1210
+ ), P = ({
1251
1211
  content: t,
1252
1212
  isUser: e,
1253
- isSystem: r,
1254
- stacked: o
1213
+ isSystem: o,
1214
+ stacked: r
1255
1215
  }) => {
1256
- const s = Y(), { title: i, body: c, actions: m, form: u, items: y } = t;
1257
- return y ? /* @__PURE__ */ n(
1258
- F,
1216
+ const s = _(), { title: i, body: c, actions: d, form: m, items: f } = t;
1217
+ return f ? /* @__PURE__ */ n(
1218
+ V,
1259
1219
  {
1260
1220
  className: "humany-message-content",
1261
1221
  user: !!e,
1262
- stacked: o,
1263
- children: /* @__PURE__ */ n(zt, { items: y, dispatch: s })
1222
+ stacked: r,
1223
+ children: /* @__PURE__ */ n(kt, { items: f, dispatch: s })
1264
1224
  }
1265
- ) : /* @__PURE__ */ h(
1266
- F,
1225
+ ) : /* @__PURE__ */ u(
1226
+ V,
1267
1227
  {
1268
1228
  className: "humany-message-content",
1269
- padded: !r,
1229
+ padded: !o,
1270
1230
  user: !!e,
1271
- stacked: o,
1272
- fullWidth: !!u || !!m,
1231
+ stacked: r,
1232
+ fullWidth: !!m || !!d,
1273
1233
  children: [
1274
- i && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(Ve, { variant: "h2", children: i }) }),
1275
- c && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(Xe, { html: c }) }),
1276
- u && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(
1277
- Ye,
1234
+ i && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(Pe, { variant: "h2", children: i }) }),
1235
+ c && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(Ve, { html: c }) }),
1236
+ m && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
1237
+ Ue,
1278
1238
  {
1279
- ...u,
1280
- onChange: (l, g) => {
1239
+ ...m,
1240
+ onChange: (l, h) => {
1281
1241
  s("form", {
1282
- data: g,
1283
- formKey: u.schema.id,
1242
+ data: h,
1243
+ formKey: m.schema.id,
1284
1244
  actionKey: l
1285
1245
  });
1286
1246
  }
1287
1247
  }
1288
1248
  ) }),
1289
- m && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(
1290
- Ge,
1249
+ d && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
1250
+ _e,
1291
1251
  {
1292
- items: Object.keys(m).map((l) => ({ label: m[l], actionKey: l })),
1252
+ items: Object.keys(d).map((l) => ({ label: d[l], actionKey: l })),
1293
1253
  renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
1294
- Je,
1254
+ Fe,
1295
1255
  {
1296
1256
  onClick: () => {
1297
1257
  s("action", l.actionKey);
@@ -1304,59 +1264,101 @@ const Re = ({ className: t }) => {
1304
1264
  ]
1305
1265
  }
1306
1266
  );
1307
- }, oe = a.div`
1267
+ }, te = a.div`
1308
1268
  position: absolute;
1309
1269
  left: -10000px;
1310
1270
  top: auto;
1311
1271
  width: 1px;
1312
1272
  height: 1px;
1313
1273
  overflow: hidden;
1314
- `, ye = () => {
1315
- const t = ue((m) => {
1316
- m && setTimeout(() => {
1317
- m.scrollIntoView({
1274
+ `, St = () => {
1275
+ const { skipToLatestMessageLabel: t = "Skip to latest message" } = C(), e = ae(), o = () => {
1276
+ const r = e.get("widgetDOMElement");
1277
+ if (r) {
1278
+ const s = r.querySelectorAll(
1279
+ ".humany-conversation-entry"
1280
+ );
1281
+ s.length && s[s.length - 1].focus();
1282
+ }
1283
+ };
1284
+ return /* @__PURE__ */ n(
1285
+ zt,
1286
+ {
1287
+ className: "humany-skip-to-latest-message",
1288
+ onKeyDown: (r) => {
1289
+ (r.key === "Enter" || r.keyCode === 13) && o();
1290
+ },
1291
+ onClick: o,
1292
+ children: t
1293
+ }
1294
+ );
1295
+ }, zt = a.button`
1296
+ position: absolute;
1297
+ bottom: 60px;
1298
+ text-align: center;
1299
+ background-color: white;
1300
+ text-decoration: none;
1301
+ padding: ${(t) => {
1302
+ var e;
1303
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1304
+ }};
1305
+ border-radius: ${(t) => {
1306
+ var e;
1307
+ return (e = t.theme.sizes) == null ? void 0 : e.small;
1308
+ }};
1309
+ left: -10000000px;
1310
+ &:focus-visible {
1311
+ left: 50%;
1312
+ transform: translateX(-50%);
1313
+ ${y};
1314
+ }
1315
+ `, he = () => {
1316
+ const t = ce((d) => {
1317
+ d && setTimeout(() => {
1318
+ d.scrollIntoView({
1318
1319
  block: "start",
1319
1320
  behavior: "smooth"
1320
1321
  });
1321
1322
  }, 250);
1322
- }, []), [e, r] = le(!0), {
1323
- messages: o,
1323
+ }, []), [e, o] = oe(!0), {
1324
+ messages: r,
1324
1325
  loading: s,
1325
1326
  typingActors: i = []
1326
- } = H(), c = () => i && i.length ? i.map((m, u) => /* @__PURE__ */ n(
1327
- U,
1327
+ } = C(), c = () => i && i.length ? i.map((d, m) => /* @__PURE__ */ n(
1328
+ W,
1328
1329
  {
1329
- id: `typing_${m.name}`,
1330
- children: /* @__PURE__ */ n(fe, { timestamp: Date.now(), sender: m, children: /* @__PURE__ */ n(
1331
- ne,
1330
+ id: `typing_${d.name}`,
1331
+ children: /* @__PURE__ */ n(ue, { timestamp: Date.now(), sender: d, children: /* @__PURE__ */ n(
1332
+ Z,
1332
1333
  {
1333
1334
  boxed: !0,
1334
1335
  ref: t
1335
1336
  }
1336
1337
  ) })
1337
1338
  },
1338
- `typing_${m.name}`
1339
+ `typing_${d.name}`
1339
1340
  )) : null;
1340
- return /* @__PURE__ */ h(N, { children: [
1341
- /* @__PURE__ */ h(Mt, { tabIndex: 0, scrollableCss: e, ref: r, children: [
1342
- o && o.length ? o.map((m, u) => {
1343
- const { type: y, timestamp: b, sender: l, content: g } = m;
1341
+ return /* @__PURE__ */ u(L, { children: [
1342
+ /* @__PURE__ */ u(Lt, { tabIndex: 0, scrollableCss: e, ref: o, children: [
1343
+ r && r.length ? r.map((d, m) => {
1344
+ const { type: f, timestamp: k, sender: l, content: h } = d;
1344
1345
  return /* @__PURE__ */ n(
1345
- U,
1346
+ W,
1346
1347
  {
1347
1348
  className: "humany-conversation-entry",
1348
1349
  tabIndex: -1,
1349
- children: /* @__PURE__ */ n(Nt, { ...m, ref: t })
1350
+ children: /* @__PURE__ */ n(Ct, { ...d, ref: t })
1350
1351
  },
1351
- `${y}_${l == null ? void 0 : l.name}_${b}_${g[0].key}`
1352
+ `${f}_${l == null ? void 0 : l.name}_${k}_${h[0].key}`
1352
1353
  );
1353
1354
  }) : null,
1354
1355
  c(),
1355
- s && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(ne, { ref: t }) })
1356
+ s && /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(Z, { ref: t }) })
1356
1357
  ] }),
1357
- /* @__PURE__ */ n(Re, {})
1358
+ /* @__PURE__ */ n(Te, {}),
1359
+ /* @__PURE__ */ n(St, {})
1358
1360
  ] });
1359
- }, Mt = a.div`
1361
+ }, Lt = a.div`
1360
1362
  display: flex;
1361
1363
  flex-direction: column;
1362
1364
  align-items: stretch;
@@ -1367,9 +1369,9 @@ const Re = ({ className: t }) => {
1367
1369
  }};
1368
1370
  ${(t) => !!t.scrollableCss && t.scrollableCss};
1369
1371
  &:focus-visible {
1370
- ${(t) => f(t)};
1372
+ ${(t) => y(t)};
1371
1373
  }
1372
- `, U = a.div`
1374
+ `, W = a.div`
1373
1375
  margin: 0;
1374
1376
  margin-bottom: ${(t) => {
1375
1377
  var e;
@@ -1403,47 +1405,47 @@ const Re = ({ className: t }) => {
1403
1405
  }
1404
1406
 
1405
1407
  &:focus-visible {
1406
- ${f}
1408
+ ${y}
1407
1409
  border-radius: ${(t) => {
1408
1410
  var e;
1409
1411
  return (e = t.theme.sizes) == null ? void 0 : e.small;
1410
1412
  }};
1411
1413
  }
1412
- ${(t) => J(t)(
1414
+ ${(t) => X(t)(
1413
1415
  "h1",
1414
- p`
1416
+ b`
1415
1417
  font-weight: normal;
1416
1418
  `
1417
1419
  )}
1418
- `, It = ({ dispatch: t }) => {
1419
- const e = me(null);
1420
- return Q(() => {
1420
+ `, Nt = ({ dispatch: t }) => {
1421
+ const e = le(null);
1422
+ return G(() => {
1421
1423
  e.current && e.current.parentNode && t("overlay-mounted", e.current);
1422
1424
  }, [e]), /* @__PURE__ */ n(
1423
- de,
1425
+ ie,
1424
1426
  {
1425
1427
  portalId: "humany-conversation-overlay-portal",
1426
1428
  className: "humany-conversation-overlay-outlet",
1427
1429
  ref: e
1428
1430
  }
1429
1431
  );
1430
- }, Ht = ({
1432
+ }, Mt = ({
1431
1433
  dispatch: t,
1432
1434
  header: e,
1433
- buttonLabel: r
1434
- }) => /* @__PURE__ */ h(
1435
- Tt,
1435
+ buttonLabel: o
1436
+ }) => /* @__PURE__ */ u(
1437
+ It,
1436
1438
  {
1437
1439
  portalId: "humany-conversation-portal",
1438
1440
  className: "humany-conversation-outlet",
1439
1441
  children: [
1440
- /* @__PURE__ */ h(At, { className: "humany-conversation-outlet-head", children: [
1442
+ /* @__PURE__ */ u(Ht, { className: "humany-conversation-outlet-head", children: [
1441
1443
  /* @__PURE__ */ n(
1442
- Rt,
1444
+ At,
1443
1445
  {
1444
1446
  className: "humany-conversation-outlet-head-button",
1445
- "aria-label": r,
1446
- title: r,
1447
+ "aria-label": o,
1448
+ title: o,
1447
1449
  onClick: () => t("hide-overlay-conversation"),
1448
1450
  children: /* @__PURE__ */ n(
1449
1451
  x,
@@ -1458,7 +1460,7 @@ const Re = ({ className: t }) => {
1458
1460
  }
1459
1461
  ),
1460
1462
  e && /* @__PURE__ */ n(
1461
- Ot,
1463
+ Tt,
1462
1464
  {
1463
1465
  className: "humany-conversation-outlet-header",
1464
1466
  variant: "h1",
@@ -1466,10 +1468,10 @@ const Re = ({ className: t }) => {
1466
1468
  }
1467
1469
  )
1468
1470
  ] }),
1469
- /* @__PURE__ */ n(ye, {})
1471
+ /* @__PURE__ */ n(he, {})
1470
1472
  ]
1471
1473
  }
1472
- ), Tt = a(de)`
1474
+ ), It = a(ie)`
1473
1475
  z-index: 11;
1474
1476
  top: auto;
1475
1477
  height: 65%;
@@ -1484,7 +1486,7 @@ const Re = ({ className: t }) => {
1484
1486
  var e;
1485
1487
  return (e = t.theme.sizes) == null ? void 0 : e.large;
1486
1488
  }};
1487
- `, At = a.div`
1489
+ `, Ht = a.div`
1488
1490
  display: flex;
1489
1491
  flex-direction: column;
1490
1492
  justify-content: center;
@@ -1498,7 +1500,7 @@ const Re = ({ className: t }) => {
1498
1500
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
1499
1501
  }};
1500
1502
  ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
1501
- `, Ot = a(X)`
1503
+ `, Tt = a(F)`
1502
1504
  font-size: ${(t) => {
1503
1505
  var e;
1504
1506
  return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -1508,7 +1510,7 @@ const Re = ({ className: t }) => {
1508
1510
  return (e = t.theme.colors) == null ? void 0 : e.text;
1509
1511
  }};
1510
1512
  margin: 0;
1511
- `, Rt = a(I)`
1513
+ `, At = a(M)`
1512
1514
  display: flex;
1513
1515
  align-items: center;
1514
1516
  justify-content: center;
@@ -1522,7 +1524,7 @@ const Re = ({ className: t }) => {
1522
1524
  ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
1523
1525
 
1524
1526
  &:focus-visible {
1525
- ${f};
1527
+ ${y};
1526
1528
  }
1527
1529
 
1528
1530
  svg line {
@@ -1531,37 +1533,37 @@ const Re = ({ className: t }) => {
1531
1533
  return (e = t.theme.colors) == null ? void 0 : e.text;
1532
1534
  }};
1533
1535
  }
1534
- `, Yt = ({ className: t, ...e }) => {
1536
+ `, _t = ({ className: t, ...e }) => {
1535
1537
  const {
1536
- overlay: r,
1537
- overlayConversationHeader: o,
1538
+ overlay: o,
1539
+ overlayConversationHeader: r,
1538
1540
  overlayConversationCloseLabel: s,
1539
1541
  conversationControllerId: i
1540
- } = H(), c = Y(), u = ie().get("$settings");
1542
+ } = C(), c = _(), m = ae().get("$settings");
1541
1543
  return /* @__PURE__ */ n(
1542
- Le.Provider,
1544
+ Ce.Provider,
1543
1545
  {
1544
1546
  value: i ? { id: i } : null,
1545
- children: /* @__PURE__ */ h(ge.Provider, { value: u == null ? void 0 : u.language, children: [
1547
+ children: /* @__PURE__ */ u(me.Provider, { value: m == null ? void 0 : m.language, children: [
1546
1548
  /* @__PURE__ */ n(
1547
- Bt,
1549
+ Ot,
1548
1550
  {
1549
1551
  "aria-live": "assertive",
1550
1552
  ...e,
1551
- className: T(
1553
+ className: H(
1552
1554
  t,
1553
1555
  "humany-conversation-component"
1554
1556
  ),
1555
- children: /* @__PURE__ */ n(ye, {})
1557
+ children: /* @__PURE__ */ n(he, {})
1556
1558
  }
1557
1559
  ),
1558
- r && /* @__PURE__ */ h(N, { children: [
1559
- /* @__PURE__ */ n(It, { dispatch: c }),
1560
- r.conversation && /* @__PURE__ */ n(
1561
- Ht,
1560
+ o && /* @__PURE__ */ u(L, { children: [
1561
+ /* @__PURE__ */ n(Nt, { dispatch: c }),
1562
+ o.conversation && /* @__PURE__ */ n(
1563
+ Mt,
1562
1564
  {
1563
1565
  dispatch: c,
1564
- header: o,
1566
+ header: r,
1565
1567
  buttonLabel: s
1566
1568
  }
1567
1569
  )
@@ -1569,7 +1571,7 @@ const Re = ({ className: t }) => {
1569
1571
  ] })
1570
1572
  }
1571
1573
  );
1572
- }, Bt = a.div`
1574
+ }, Ot = a.div`
1573
1575
  position: absolute;
1574
1576
  right: 0;
1575
1577
  left: 0;
@@ -1580,5 +1582,5 @@ const Re = ({ className: t }) => {
1580
1582
  flex-direction: column;
1581
1583
  `;
1582
1584
  export {
1583
- Yt as default
1585
+ _t as default
1584
1586
  };