@telia-ace/widget-conversation 1.1.2 → 1.1.3

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