@telia-ace/widget-conversation 1.1.2-rc.4 → 1.1.2-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,113 +1,110 @@
1
1
  import { jsx as n, jsxs as m, Fragment as z } from "react/jsx-runtime";
2
2
  import a from "@emotion/styled";
3
- import { Input as oe, Button as L, borderTabStyle as p, SymbolBadge as w, useIsTabbing as se, useDispatch as Y, useProperties as N, useScroll as ae, Typography as G, invertedHoverButton as $e, Html as J, List as ie, buttonCss as K, ItemList as j, itemList as D, Link as ve, useComponent as xe, genericHtml as we, headingElement as Q, usePrevious as ke, list as Ce, WidgetOverlayOutlet as le, useContainer as Se, ConversationContext as ze } from "@telia-ace/widget-ui";
4
- import { appendClassNames as M, htmlParentContains as Le } from "@telia-ace/widget-utilities";
5
- import { css as y, keyframes as Ne } from "@emotion/react";
6
- import Ie, { useState as R, useEffect as X, forwardRef as Z, useContext as Me, Suspense as Te, useRef as ce, useMemo as Ae, useCallback as de } from "react";
7
- import { FormComponent as He } from "@telia-ace/widget-forms";
8
- import { ConversationMessageListItemType as C, ConversationMessageType as W } from "./index.mjs";
3
+ import { Input as ne, borderTabStyle as b, Button as L, SymbolBadge as x, useIsTabbing as re, useDispatch as _, useProperties as N, useScroll as oe, Typography as F, invertedHoverButton as pe, Html as Y, List as se, buttonCss as B, ItemList as O, itemList as K, Link as be, useComponent as $e, genericHtml as ve, headingElement as G, usePrevious as xe, list as we, WidgetOverlayOutlet as ae, useContainer as ke, ConversationContext as Ce } from "@telia-ace/widget-ui";
4
+ import { appendClassNames as M, htmlParentContains as Se } from "@telia-ace/widget-utilities";
5
+ import { css as p, keyframes as ze } from "@emotion/react";
6
+ import Le, { useState as D, useEffect as J, forwardRef as Q, useContext as Ne, Suspense as Ie, useRef as ie, useMemo as Me, useCallback as le } from "react";
7
+ import { FormComponent as Te } from "@telia-ace/widget-forms";
8
+ import { ConversationMessageListItemType as k, ConversationMessageType as E } 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] = R(""), [o, s] = R(!1), [i, c] = R(0), [d, u] = R(0), f = se(), b = Y(), {
14
- inputPlaceholder: l = "Type your message",
15
- inputHidden: h = !1,
16
- inputDisabled: x = !1,
17
- sendButtonLabel: T = "Send message",
18
- inputMultiline: k = !0,
19
- secondaryAction: $
20
- } = N(), [A, v] = ae(!0);
21
- X(() => {
22
- if (v.current) {
23
- const { lineHeight: g, maxHeight: H } = getComputedStyle(v.current);
12
+ const Ae = ({ className: t }) => {
13
+ const [e, r] = D(""), [o, s] = D(0), [i, c] = D(0), d = re(), u = _(), {
14
+ inputPlaceholder: f = "Type your message",
15
+ inputHidden: w = !1,
16
+ inputDisabled: l = !1,
17
+ sendButtonLabel: h = "Send message",
18
+ inputMultiline: $ = !0,
19
+ secondaryAction: v
20
+ } = N(), [T, y] = oe(!0);
21
+ J(() => {
22
+ if (y.current) {
23
+ const { lineHeight: g, maxHeight: A } = getComputedStyle(y.current);
24
24
  if (g && g.indexOf("px") > -1) {
25
- const I = g.split("px"), pe = parseInt(I[0], 10);
26
- c(pe);
27
- const be = H.split("px");
28
- u(parseInt(be[0], 10));
25
+ const I = g.split("px"), fe = parseInt(I[0], 10);
26
+ s(fe);
27
+ const ye = A.split("px");
28
+ c(parseInt(ye[0], 10));
29
29
  }
30
30
  }
31
- }, [v.current]);
32
- const E = (g) => {
33
- !g.shiftKey || !k ? (g.preventDefault(), e && e.length > 0 && (b("user-submit", { text: e }), r(""), P(""))) : e.length < 1 && g.preventDefault();
34
- }, fe = (g) => {
35
- $ && (g.preventDefault(), b("action", {
36
- actionKey: $.action,
37
- ...$
31
+ }, [y.current]);
32
+ const S = (g) => {
33
+ !g.shiftKey || !$ ? (g.preventDefault(), e && e.length > 0 && (u("user-submit", { text: e }), r(""), j(""))) : e.length < 1 && g.preventDefault();
34
+ }, he = (g) => {
35
+ v && (g.preventDefault(), u("action", {
36
+ actionKey: v.action,
37
+ ...v
38
38
  }));
39
- }, ye = (g) => {
40
- if (k && v.current) {
41
- const H = v.current.scrollHeight;
42
- if (H > i) {
43
- v.current.style.height = "auto";
44
- let I = H;
45
- g.length < 1 && (I = i), v.current.style.height = `${I}px`, I >= d ? v.current.style.overflowY = "scroll" : v.current.style.overflowY = "hidden";
39
+ }, ge = (g) => {
40
+ if ($ && y.current) {
41
+ const A = y.current.scrollHeight;
42
+ if (A > o) {
43
+ y.current.style.height = "auto";
44
+ let I = A;
45
+ g.length < 1 && (I = o), y.current.style.height = `${I}px`, I >= i ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
46
46
  }
47
47
  }
48
- }, P = (g) => {
49
- ye(g), r(g), g && g.length > 0 && b("user-typing", { textLength: g.length });
48
+ }, j = (g) => {
49
+ ge(g), r(g), g && g.length > 0 && u("user-typing", { textLength: g.length });
50
50
  };
51
- return h ? null : /* @__PURE__ */ m(
52
- je,
51
+ return w ? null : /* @__PURE__ */ m(
52
+ Oe,
53
53
  {
54
- grow: k,
54
+ grow: $,
55
55
  className: M("humany-conversation-input", t),
56
- "data-has-focus": o,
57
- scrollableCss: A,
58
- isTabbing: f,
56
+ scrollableCss: T,
57
+ isTabbing: d,
59
58
  children: [
60
- $ && /* @__PURE__ */ n(
61
- Ke,
59
+ v && /* @__PURE__ */ n(
60
+ Be,
62
61
  {
63
- disabled: x,
64
- onClick: fe,
65
- title: $.label,
66
- "aria-label": $.label,
62
+ disabled: l,
63
+ onClick: he,
64
+ title: v.label,
65
+ "aria-label": v.label,
67
66
  children: /* @__PURE__ */ n(
68
- w,
67
+ x,
69
68
  {
70
69
  size: 24,
71
- symbol: { type: "Svg", content: $.icon || "browse" }
70
+ symbol: { type: "Svg", content: v.icon || "browse" }
72
71
  }
73
72
  )
74
73
  }
75
74
  ),
76
- k ? /* @__PURE__ */ n(
77
- Be,
75
+ $ ? /* @__PURE__ */ n(
76
+ He,
78
77
  {
79
78
  value: e,
80
- onChange: P,
81
- onEnter: E,
82
- disabled: x,
83
- "aria-label": l,
84
- placeholder: l,
85
- onFocusChange: s,
79
+ onChange: j,
80
+ onEnter: S,
81
+ disabled: l,
82
+ "aria-label": f,
83
+ placeholder: f,
86
84
  type: "textarea",
87
85
  rows: 1,
88
- ref: v
86
+ ref: y
89
87
  }
90
88
  ) : /* @__PURE__ */ n(
91
- Oe,
89
+ Re,
92
90
  {
93
91
  value: e,
94
- onChange: P,
95
- onEnter: E,
96
- disabled: x,
97
- "aria-label": l,
98
- placeholder: l,
99
- onFocusChange: s
92
+ onChange: j,
93
+ onEnter: S,
94
+ disabled: l,
95
+ "aria-label": f,
96
+ placeholder: f
100
97
  }
101
98
  ),
102
99
  /* @__PURE__ */ n(
103
- me,
100
+ ce,
104
101
  {
105
102
  disabled: !1,
106
- onClick: E,
107
- title: T,
108
- "aria-label": T,
103
+ onClick: S,
104
+ title: h,
105
+ "aria-label": h,
109
106
  children: /* @__PURE__ */ n(
110
- De,
107
+ Ke,
111
108
  {
112
109
  size: 22,
113
110
  symbol: { type: "Svg", content: "send" },
@@ -119,7 +116,7 @@ const Re = ({ className: t }) => {
119
116
  ]
120
117
  }
121
118
  );
122
- }, Be = a(oe)`
119
+ }, He = a(ne)`
123
120
  resize: none;
124
121
  flex: 1;
125
122
  flex-shrink: 1;
@@ -139,7 +136,11 @@ const Re = ({ className: t }) => {
139
136
  border: none;
140
137
  transition: height 200ms linear;
141
138
  outline: none;
142
- `, Oe = a(oe)`
139
+ &:focus-visible {
140
+ ${b};
141
+ outline-offset: 12px;
142
+ }
143
+ `, Re = a(ne)`
143
144
  flex: 1;
144
145
  border: none;
145
146
  background-color: transparent;
@@ -165,7 +166,7 @@ const Re = ({ className: t }) => {
165
166
  }};
166
167
  font-style: italic;
167
168
  }
168
- `, me = a(L)`
169
+ `, ce = a(L)`
169
170
  flex: 0 0 50px;
170
171
  align-self: stretch;
171
172
  background-color: transparent;
@@ -175,19 +176,19 @@ const Re = ({ className: t }) => {
175
176
  border: none;
176
177
  color: #a6a6a6;
177
178
  &:focus-visible {
178
- ${p};
179
+ ${b};
179
180
  }
180
- `, Ke = a(me)`
181
+ `, Be = a(ce)`
181
182
  border-right: ${(t) => t.theme.border};
182
183
  margin: ${(t) => {
183
184
  var e;
184
185
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
185
186
  }} 0;
186
- `, je = a.div`
187
- ${(t) => t.grow ? y`
187
+ `, Oe = a.div`
188
+ ${(t) => t.grow ? p`
188
189
  min-height: 50px;
189
190
  max-height: 150px;
190
- ` : y`
191
+ ` : p`
191
192
  height: 50px;
192
193
  `}
193
194
  flex: 0 0 auto;
@@ -198,15 +199,15 @@ const Re = ({ className: t }) => {
198
199
  return (e = t.theme.colors) == null ? void 0 : e.accent;
199
200
  }};
200
201
  border-top: ${(t) => t.theme.inputBorder};
201
- ${(t) => t["data-has-focus"] && t.isTabbing && p}
202
+ ${(t) => t["data-has-focus"] && t.isTabbing && b}
202
203
  textarea {
203
204
  ${(t) => !!t.scrollableCss && t.scrollableCss}
204
205
  }
205
- `, De = a(
206
+ `, Ke = a(
206
207
  ({
207
208
  hasContent: t,
208
209
  ...e
209
- }) => /* @__PURE__ */ n(w, { ...e })
210
+ }) => /* @__PURE__ */ n(x, { ...e })
210
211
  )`
211
212
  line,
212
213
  path {
@@ -219,7 +220,7 @@ const Re = ({ className: t }) => {
219
220
  return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
220
221
  }};
221
222
  }
222
- `, Ee = a.div`
223
+ `, je = a.div`
223
224
  width: ${(t) => t.avatarSize || "32px"};
224
225
  height: ${(t) => t.avatarSize || "32px"};
225
226
  border-radius: 50%;
@@ -266,7 +267,7 @@ const Re = ({ className: t }) => {
266
267
  }};
267
268
  }
268
269
  }
269
- `, Pe = Ne`
270
+ `, De = ze`
270
271
  0% {
271
272
  opacity: 0;
272
273
  }
@@ -276,7 +277,7 @@ const Re = ({ className: t }) => {
276
277
  100% {
277
278
  opacity: 0;
278
279
  }
279
- `, We = a.div`
280
+ `, Ee = a.div`
280
281
  display: flex;
281
282
  justify-content: center;
282
283
  > div {
@@ -288,7 +289,7 @@ const Re = ({ className: t }) => {
288
289
  var e;
289
290
  return (e = t.theme.colors) == null ? void 0 : e.text;
290
291
  }};
291
- animation: ${Pe} 1s infinite;
292
+ animation: ${De} 1s infinite;
292
293
  }
293
294
  > div:nth-of-type(2) {
294
295
  animation-delay: 100ms;
@@ -296,29 +297,29 @@ const Re = ({ className: t }) => {
296
297
  > div:nth-of-type(3) {
297
298
  animation-delay: 200ms;
298
299
  }
299
- `, V = a.div`
300
+ `, U = a.div`
300
301
  grid-area: content;
301
302
  max-width: 100%;
302
303
  overflow: hidden;
303
- `, Fe = a(G)`
304
+ `, Pe = a(F)`
304
305
  font-size: ${(t) => {
305
306
  var e;
306
307
  return (e = t.theme.fonts) == null ? void 0 : e.normal;
307
308
  }};
308
309
  font-weight: normal;
309
310
  margin: 0;
310
- `, q = a.div`
311
+ `, V = a.div`
311
312
  display: flex;
312
313
  ${(t) => t.left && "justify-content: start;"};
313
314
  ${(t) => t.center && "justify-content: center;"};
314
315
  ${(t) => t.right && "justify-content: end;"};
315
- `, _ = a.div`
316
+ `, q = a.div`
316
317
  ${(t) => {
317
318
  var e;
318
319
  return t.padded && `padding: ${(e = t.theme.sizes) == null ? void 0 : e.medium};`;
319
320
  }}
320
- ${(t) => !t.user && t.stacked && Ue(t.stacked, t.theme)}
321
- ${(t) => t.user && t.stacked && Ve(t.stacked, t.theme)}
321
+ ${(t) => !t.user && t.stacked && We(t.stacked, t.theme)}
322
+ ${(t) => t.user && t.stacked && Ue(t.stacked, t.theme)}
322
323
 
323
324
  display: inline-block;
324
325
  margin-top: ${(t) => {
@@ -334,14 +335,14 @@ const Re = ({ className: t }) => {
334
335
  }
335
336
  max-width: 100%;
336
337
  ${(t) => t.fullWidth && "width: 100%;"}
337
- `, Ue = (t, e) => {
338
+ `, We = (t, e) => {
338
339
  var o, s;
339
- const r = y`
340
+ const r = p`
340
341
  background-color: ${(o = e.colors) == null ? void 0 : o.accent};
341
342
  color: ${(s = e.colors) == null ? void 0 : s.text};
342
343
  ${e.border && `border: ${e.border};`};
343
344
  `;
344
- return e.borderRadius ? y`
345
+ return e.borderRadius ? p`
345
346
  ${r}
346
347
 
347
348
  border-top-right-radius: ${e.borderRadius};
@@ -355,13 +356,13 @@ const Re = ({ className: t }) => {
355
356
  border-bottom-left-radius: ${e.borderRadius};
356
357
  `}
357
358
  ` : r;
358
- }, Ve = (t, e) => {
359
+ }, Ue = (t, e) => {
359
360
  var o, s;
360
- const r = y`
361
+ const r = p`
361
362
  background-color: ${(o = e.colors) == null ? void 0 : o.primary};
362
363
  color: ${(s = e.colors) == null ? void 0 : s.accent};
363
364
  `;
364
- return e.borderRadius ? y`
365
+ return e.borderRadius ? p`
365
366
  ${r}
366
367
 
367
368
  border-top-left-radius: ${e.borderRadius};
@@ -375,7 +376,7 @@ const Re = ({ className: t }) => {
375
376
  border-bottom-right-radius: ${e.borderRadius};
376
377
  `}
377
378
  ` : r;
378
- }, B = a.div`
379
+ }, H = a.div`
379
380
  margin-bottom: ${(t) => {
380
381
  var e;
381
382
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -383,17 +384,17 @@ const Re = ({ className: t }) => {
383
384
  &:last-child {
384
385
  margin-bottom: 0;
385
386
  }
386
- `, S = (t) => {
387
+ `, C = (t) => {
387
388
  var e, r;
388
- return y`
389
+ return p`
389
390
  margin: ${(e = t.theme.sizes) == null ? void 0 : e.medium} 0;
390
391
  padding: 0 ${(r = t.theme.sizes) == null ? void 0 : r.medium};
391
392
  `;
392
- }, qe = a(He)`
393
+ }, Ve = a(Te)`
393
394
  & button.humany-form-component-button {
394
395
  ${(t) => {
395
396
  var e, r, o, s;
396
- return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && $e({
397
+ return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && pe({
397
398
  active: !1,
398
399
  primaryColor: (o = t.theme.colors) == null ? void 0 : o.primary,
399
400
  secondaryColor: (s = t.theme.colors) == null ? void 0 : s.accent,
@@ -417,18 +418,18 @@ const Re = ({ className: t }) => {
417
418
  }};
418
419
  }
419
420
  }
420
- `, _e = a(J)`
421
+ `, qe = a(Y)`
421
422
  white-space: pre-wrap;
422
423
  a {
423
424
  color: ${(t) => t.theme.colors.link};
424
425
  &:focus {
425
426
  ${(t) => {
426
427
  var e;
427
- return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && p;
428
+ return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && b;
428
429
  }};
429
430
  }
430
431
  }
431
- `, Ye = a(ie)`
432
+ `, _e = a(se)`
432
433
  padding: 0;
433
434
  list-style: none;
434
435
  margin: 0 -${(t) => {
@@ -441,8 +442,8 @@ const Re = ({ className: t }) => {
441
442
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
442
443
  }};
443
444
  }
444
- `, Ge = a.button`
445
- ${(t) => K(t)};
445
+ `, Fe = a.button`
446
+ ${(t) => B(t)};
446
447
  display: block;
447
448
  background-color: ${(t) => {
448
449
  var e;
@@ -451,23 +452,23 @@ const Re = ({ className: t }) => {
451
452
  width: 100%;
452
453
  color: #fff;
453
454
  &:focus-visible {
454
- ${p}
455
+ ${b}
455
456
  background-color: transparent;
456
457
  }
457
- `, te = Z(
458
- ({ boxed: t, className: e, agentData: r }, o) => /* @__PURE__ */ n(V, { ref: o, children: /* @__PURE__ */ n(q, { left: t, center: !t, children: /* @__PURE__ */ n(
459
- _,
458
+ `, Z = Q(
459
+ ({ boxed: t, className: e, agentData: r }, o) => /* @__PURE__ */ n(U, { ref: o, children: /* @__PURE__ */ n(V, { left: t, center: !t, children: /* @__PURE__ */ n(
460
+ q,
460
461
  {
461
462
  padded: !!t,
462
463
  stacked: t ? "first" : void 0,
463
- children: /* @__PURE__ */ m(We, { children: [
464
+ children: /* @__PURE__ */ m(Ee, { children: [
464
465
  /* @__PURE__ */ n("div", {}),
465
466
  /* @__PURE__ */ n("div", {}),
466
467
  /* @__PURE__ */ n("div", {})
467
468
  ] })
468
469
  }
469
470
  ) }) })
470
- ), ue = Ie.createContext(null), Je = a.p`
471
+ ), de = Le.createContext(null), Ye = a.p`
471
472
  && {
472
473
  font-size: ${(t) => {
473
474
  var e;
@@ -482,16 +483,16 @@ const Re = ({ className: t }) => {
482
483
  var e;
483
484
  return (e = t.theme.colors) == null ? void 0 : e.text;
484
485
  }};
485
- `, ne = (t, e) => new Date(t).toLocaleTimeString(e || [], {
486
- hour: "2-digit",
486
+ `, ee = (t, e) => new Date(t).toLocaleTimeString(e || [], {
487
+ hour: "numeric",
487
488
  minute: "2-digit"
488
- }), O = ({ className: t, name: e, timestamp: r }) => {
489
- const o = Me(ue);
489
+ }), R = ({ className: t, name: e, timestamp: r }) => {
490
+ const o = Ne(de);
490
491
  if (!e && !r)
491
492
  return null;
492
493
  let s = "";
493
- return e ? r ? s = `${e}: ${ne(r, o)}` : s = e : r && (s = ne(r, o)), /* @__PURE__ */ n(Je, { children: s });
494
- }, he = ({
494
+ return e ? r ? s = `${e}: ${ee(r, o)}` : s = e : r && (s = ee(r, o)), /* @__PURE__ */ n(Ye, { children: s });
495
+ }, me = ({
495
496
  className: t,
496
497
  children: e,
497
498
  sender: r,
@@ -499,7 +500,7 @@ const Re = ({ className: t }) => {
499
500
  }) => {
500
501
  const { avatar: s, name: i } = r, { avatarSize: c } = N();
501
502
  return /* @__PURE__ */ m(
502
- Qe,
503
+ Ge,
503
504
  {
504
505
  hasAvatar: !!s,
505
506
  className: M(
@@ -507,35 +508,35 @@ const Re = ({ className: t }) => {
507
508
  "humany-conversation-agent-message"
508
509
  ),
509
510
  children: [
510
- s && /* @__PURE__ */ n(Ee, { avatarSize: c, children: typeof s == "string" ? (
511
+ s && /* @__PURE__ */ n(je, { avatarSize: c, children: typeof s == "string" ? (
511
512
  // eslint-disable-next-line jsx-a11y/alt-text
512
513
  /* @__PURE__ */ n("img", { src: s })
513
- ) : /* @__PURE__ */ n(w, { symbol: s }) }),
514
+ ) : /* @__PURE__ */ n(x, { symbol: s }) }),
514
515
  e,
515
- /* @__PURE__ */ n(O, { name: i, timestamp: o })
516
+ /* @__PURE__ */ n(R, { name: i, timestamp: o })
516
517
  ]
517
518
  }
518
519
  );
519
- }, Qe = a.div`
520
+ }, Ge = a.div`
520
521
  display: grid;
521
522
  margin-right: 10%;
522
523
  width: 90%;
523
- ${(t) => t.hasAvatar ? y`
524
+ ${(t) => t.hasAvatar ? p`
524
525
  grid-template-columns: auto 1fr;
525
526
  grid-template-rows: 1fr auto;
526
527
  grid-template-areas:
527
528
  'avatar content'
528
529
  '. info';
529
- ` : y`
530
+ ` : p`
530
531
  grid-template-columns: 1fr;
531
532
  grid-template-rows: 1fr auto;
532
533
  grid-template-areas:
533
534
  'content'
534
535
  'info';
535
536
  `};
536
- `, Xe = Z(
537
+ `, Je = Q(
537
538
  ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: s }, i) => /* @__PURE__ */ n(
538
- Ze,
539
+ Qe,
539
540
  {
540
541
  ref: i,
541
542
  className: M(
@@ -543,23 +544,23 @@ const Re = ({ className: t }) => {
543
544
  "humany-conversation-system-message"
544
545
  ),
545
546
  fullWidth: s,
546
- children: o ? /* @__PURE__ */ m(et, { className: "humany-conversation-discrete-message", children: [
547
+ children: o ? /* @__PURE__ */ m(Xe, { className: "humany-conversation-discrete-message", children: [
547
548
  e,
548
- /* @__PURE__ */ n(O, { timestamp: r })
549
+ /* @__PURE__ */ n(R, { timestamp: r })
549
550
  ] }) : /* @__PURE__ */ m(z, { children: [
550
551
  e,
551
- /* @__PURE__ */ n(O, { timestamp: r })
552
+ /* @__PURE__ */ n(R, { timestamp: r })
552
553
  ] })
553
554
  }
554
555
  )
555
- ), Ze = a.div`
556
+ ), Qe = a.div`
556
557
  ${(t) => t.fullWidth && "width: 100%"};
557
558
  padding: 0 ${(t) => {
558
559
  var e;
559
560
  return (e = t.theme.sizes) == null ? void 0 : e.large;
560
561
  }};
561
562
  overflow: auto;
562
- `, et = a.div`
563
+ `, Xe = a.div`
563
564
  text-align: center;
564
565
  word-wrap: break-word;
565
566
  font-size: ${(t) => {
@@ -573,10 +574,10 @@ const Re = ({ className: t }) => {
573
574
  > p {
574
575
  margin: 0;
575
576
  }
576
- `, tt = ({ className: t, children: e, timestamp: r }) => {
577
+ `, Ze = ({ className: t, children: e, timestamp: r }) => {
577
578
  const { userLabel: o = "" } = N();
578
579
  return /* @__PURE__ */ m(
579
- nt,
580
+ et,
580
581
  {
581
582
  className: M(
582
583
  t,
@@ -584,30 +585,30 @@ const Re = ({ className: t }) => {
584
585
  ),
585
586
  children: [
586
587
  e,
587
- /* @__PURE__ */ n(O, { name: o, timestamp: r })
588
+ /* @__PURE__ */ n(R, { name: o, timestamp: r })
588
589
  ]
589
590
  }
590
591
  );
591
- }, nt = a.div`
592
+ }, et = a.div`
592
593
  margin-left: 10%;
593
594
  width: 90%;
594
595
  display: flex;
595
596
  flex-direction: column;
596
597
  align-items: flex-end;
597
- `, ee = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
598
+ `, X = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
598
599
  label: t[e],
599
600
  actionKey: e
600
- })), rt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
601
- ot,
601
+ })), tt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
602
+ nt,
602
603
  {
603
604
  className: "humany-conversation-button-list",
604
605
  header: t,
605
- items: ee(e),
606
+ items: X(e),
606
607
  renderItem: (o) => {
607
608
  var i;
608
609
  const s = !!((i = o == null ? void 0 : o.data) != null && i.href);
609
610
  return /* @__PURE__ */ n("li", { children: s ? /* @__PURE__ */ m(
610
- st,
611
+ rt,
611
612
  {
612
613
  onClick: () => {
613
614
  r("action", o);
@@ -617,12 +618,12 @@ const Re = ({ className: t }) => {
617
618
  "aria-label": o.label,
618
619
  title: o.label,
619
620
  children: [
620
- /* @__PURE__ */ n(w, { symbol: o.symbol }),
621
+ /* @__PURE__ */ n(x, { symbol: o.symbol }),
621
622
  o.label
622
623
  ]
623
624
  }
624
625
  ) : /* @__PURE__ */ m(
625
- at,
626
+ ot,
626
627
  {
627
628
  onClick: () => {
628
629
  r("action", o);
@@ -630,15 +631,15 @@ const Re = ({ className: t }) => {
630
631
  "aria-label": o.label,
631
632
  title: o.label,
632
633
  children: [
633
- /* @__PURE__ */ n(w, { symbol: o.symbol }),
634
+ /* @__PURE__ */ n(x, { symbol: o.symbol }),
634
635
  o.label
635
636
  ]
636
637
  }
637
638
  ) }, o.actionKey);
638
639
  }
639
640
  }
640
- ), ot = a(j)`
641
- ${D}
641
+ ), nt = a(O)`
642
+ ${K}
642
643
  > ul {
643
644
  display: flex;
644
645
  flex-wrap: wrap;
@@ -650,9 +651,9 @@ const Re = ({ className: t }) => {
650
651
  margin: 0;
651
652
  }
652
653
  }
653
- ${S}
654
- `, st = a(ve)`
655
- ${K};
654
+ ${C}
655
+ `, rt = a(be)`
656
+ ${B};
656
657
 
657
658
  display: block;
658
659
  padding: ${(t) => {
@@ -668,7 +669,7 @@ const Re = ({ className: t }) => {
668
669
  overflow: hidden;
669
670
  text-overflow: ellipsis;
670
671
  &:focus-visible {
671
- ${p}
672
+ ${b}
672
673
  background-color: transparent;
673
674
  }
674
675
 
@@ -679,8 +680,8 @@ const Re = ({ className: t }) => {
679
680
  return (e = t.theme.sizes) == null ? void 0 : e.small;
680
681
  }};
681
682
  }
682
- `, at = a(L)`
683
- ${K};
683
+ `, ot = a(L)`
684
+ ${B};
684
685
 
685
686
  display: block;
686
687
  padding: ${(t) => {
@@ -696,7 +697,7 @@ const Re = ({ className: t }) => {
696
697
  overflow: hidden;
697
698
  text-overflow: ellipsis;
698
699
  &:focus-visible {
699
- ${p}
700
+ ${b}
700
701
  background-color: transparent;
701
702
  }
702
703
 
@@ -707,31 +708,31 @@ const Re = ({ className: t }) => {
707
708
  return (e = t.theme.sizes) == null ? void 0 : e.small;
708
709
  }};
709
710
  }
710
- `, it = ({ type: t, content: e = {} }) => {
711
- const r = xe(t);
712
- return !r || !t ? null : /* @__PURE__ */ n(Te, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
713
- }, lt = ({ body: t }) => /* @__PURE__ */ n(ct, { html: t }), ct = a(J)`
714
- ${we}
711
+ `, st = ({ type: t, content: e = {} }) => {
712
+ const r = $e(t);
713
+ return !r || !t ? null : /* @__PURE__ */ n(Ie, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
714
+ }, at = ({ body: t }) => /* @__PURE__ */ n(it, { html: t }), it = a(Y)`
715
+ ${ve}
715
716
  color: inherit;
716
717
  white-space: pre-wrap;
717
- ${S}
718
+ ${C}
718
719
  a {
719
720
  color: ${(t) => t.theme.colors.link};
720
721
  &:focus-visible {
721
- ${p};
722
+ ${b};
722
723
  }
723
724
  }
724
- `, dt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
725
- mt,
725
+ `, lt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
726
+ ct,
726
727
  {
727
728
  className: "humany-conversation-item-list",
728
729
  header: t,
729
- items: ee(e),
730
+ items: X(e),
730
731
  renderItem: (o) => {
731
732
  var s;
732
- return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(ut, { children: [
733
+ return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(dt, { children: [
733
734
  ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
734
- w,
735
+ x,
735
736
  {
736
737
  size: 22,
737
738
  symbol: {
@@ -757,11 +758,11 @@ const Re = ({ className: t }) => {
757
758
  ] }) }, o.actionKey);
758
759
  }
759
760
  }
760
- ), mt = a(j)`
761
- ${D}
761
+ ), ct = a(O)`
762
+ ${K}
762
763
 
763
764
  > .humany-paragraph {
764
- ${S}
765
+ ${C}
765
766
  margin-bottom: 0;
766
767
 
767
768
  h1 {
@@ -769,9 +770,9 @@ const Re = ({ className: t }) => {
769
770
  }
770
771
  }
771
772
 
772
- ${(t) => Q(t)(
773
+ ${(t) => G(t)(
773
774
  "h1",
774
- y`
775
+ p`
775
776
  white-space: normal;
776
777
  `
777
778
  )}
@@ -795,13 +796,13 @@ const Re = ({ className: t }) => {
795
796
  border-bottom: none;
796
797
  }
797
798
  }
798
- `, ut = a.div`
799
+ `, dt = a.div`
799
800
  display: flex;
800
801
  gap: ${(t) => {
801
802
  var e;
802
803
  return (e = t.theme.sizes) == null ? void 0 : e.medium;
803
804
  }};
804
- ${S}
805
+ ${C}
805
806
 
806
807
  .item-icon {
807
808
  }
@@ -834,7 +835,7 @@ const Re = ({ className: t }) => {
834
835
  margin: 0;
835
836
 
836
837
  &:focus-visible {
837
- ${p}
838
+ ${b}
838
839
  span {
839
840
  color: ${(t) => {
840
841
  var e;
@@ -844,9 +845,9 @@ const Re = ({ className: t }) => {
844
845
  }
845
846
  }
846
847
  }
847
- `, ht = ({ header: t, actions: e, dispatch: r }) => {
848
- const o = ke(e), s = ce(), i = se();
849
- return X(() => {
848
+ `, mt = ({ header: t, actions: e, dispatch: r }) => {
849
+ const o = xe(e), s = ie(), i = re();
850
+ return J(() => {
850
851
  if (o && Array.isArray(e) && Array.isArray(o) && o.length < e.length && s.current) {
851
852
  const c = s.current.querySelectorAll(
852
853
  ".humany-conversation-link-list > ul > li"
@@ -860,13 +861,13 @@ const Re = ({ className: t }) => {
860
861
  f && f.focus();
861
862
  }
862
863
  } else
863
- d && new MutationObserver((f, b) => {
864
+ d && new MutationObserver((f, w) => {
864
865
  f.forEach((l) => {
865
866
  if (l.addedNodes) {
866
867
  const h = Array.from(
867
868
  l.addedNodes
868
- ).find((x) => x.tagName === "BUTTON");
869
- h && Le(s.current, document.activeElement) && (i && h.focus(), b.disconnect());
869
+ ).find(($) => $.tagName === "BUTTON");
870
+ h && Se(s.current, document.activeElement) && (i && h.focus(), w.disconnect());
870
871
  }
871
872
  });
872
873
  }).observe(d, {
@@ -879,14 +880,14 @@ const Re = ({ className: t }) => {
879
880
  });
880
881
  }
881
882
  }), /* @__PURE__ */ n(
882
- gt,
883
+ ut,
883
884
  {
884
885
  ref: s,
885
886
  className: "humany-conversation-link-list",
886
887
  header: t,
887
- items: ee(e),
888
+ items: X(e),
888
889
  renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(
889
- ft,
890
+ ht,
890
891
  {
891
892
  help: c.actionKey === "help",
892
893
  onClick: () => {
@@ -897,7 +898,7 @@ const Re = ({ className: t }) => {
897
898
  children: [
898
899
  c.label,
899
900
  c.actionKey === "help" && /* @__PURE__ */ n(
900
- w,
901
+ x,
901
902
  {
902
903
  size: 14,
903
904
  symbol: {
@@ -911,13 +912,13 @@ const Re = ({ className: t }) => {
911
912
  ) }, c.actionKey)
912
913
  }
913
914
  );
914
- }, gt = a(j)`
915
- ${D}
916
- ${S}
915
+ }, ut = a(O)`
916
+ ${K}
917
+ ${C}
917
918
 
918
- ${(t) => Q(t)(
919
+ ${(t) => G(t)(
919
920
  "h1",
920
- y`
921
+ p`
921
922
  white-space: normal;
922
923
  `
923
924
  )}
@@ -933,7 +934,7 @@ const Re = ({ className: t }) => {
933
934
  margin: 0;
934
935
  }
935
936
  }
936
- `, ft = a(L)`
937
+ `, ht = a(L)`
937
938
  display: block;
938
939
  text-align: left;
939
940
  font-weight: 300;
@@ -947,7 +948,7 @@ const Re = ({ className: t }) => {
947
948
 
948
949
  ${(t) => {
949
950
  var e, r;
950
- return t.help && y`
951
+ return t.help && p`
951
952
  color: ${(e = t.theme.colors) == null ? void 0 : e.text};
952
953
  text-decoration: underline;
953
954
 
@@ -959,7 +960,7 @@ const Re = ({ className: t }) => {
959
960
  }}
960
961
 
961
962
  &:focus-visible {
962
- ${p}
963
+ ${b}
963
964
  span {
964
965
  color: ${(t) => {
965
966
  var e;
@@ -968,18 +969,18 @@ const Re = ({ className: t }) => {
968
969
  text-decoration: underline;
969
970
  }
970
971
  }
971
- `, yt = () => /* @__PURE__ */ n(pt, { className: "humany-conversation-separator" }), pt = a.div`
972
+ `, gt = () => /* @__PURE__ */ n(ft, { className: "humany-conversation-separator" }), ft = a.div`
972
973
  ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
973
974
  width: 100%;
974
- `, bt = ({ text: t }) => /* @__PURE__ */ n($t, { className: "humany-conversation-text", variant: "span", children: t }), $t = a(G)`
975
- ${S}
976
- `, vt = ({
975
+ `, yt = ({ text: t }) => /* @__PURE__ */ n(pt, { className: "humany-conversation-text", variant: "span", children: t }), pt = a(F)`
976
+ ${C}
977
+ `, bt = ({
977
978
  header: t = "Video call",
978
979
  acceptLabel: e = "Accept",
979
980
  declineLabel: r = "Decline",
980
981
  dispatch: o
981
982
  }) => {
982
- const s = Ae(() => [
983
+ const s = Me(() => [
983
984
  {
984
985
  label: e,
985
986
  actionKey: "accept-video-call",
@@ -998,7 +999,7 @@ const Re = ({ className: t }) => {
998
999
  }
999
1000
  ], [e, r]);
1000
1001
  return /* @__PURE__ */ n(
1001
- xt,
1002
+ $t,
1002
1003
  {
1003
1004
  className: "humany-conversation-video-request",
1004
1005
  header: t,
@@ -1006,7 +1007,7 @@ const Re = ({ className: t }) => {
1006
1007
  renderItem: (i) => {
1007
1008
  const c = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
1008
1009
  return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
1009
- wt,
1010
+ vt,
1010
1011
  {
1011
1012
  onClick: () => {
1012
1013
  o("action", i);
@@ -1014,14 +1015,14 @@ const Re = ({ className: t }) => {
1014
1015
  "aria-label": i.label,
1015
1016
  title: i.label,
1016
1017
  bgColor: c,
1017
- children: /* @__PURE__ */ n(w, { symbol: i.symbol, size: 25 })
1018
+ children: /* @__PURE__ */ n(x, { symbol: i.symbol, size: 25 })
1018
1019
  }
1019
1020
  ) }, i.actionKey);
1020
1021
  }
1021
1022
  }
1022
1023
  );
1023
- }, xt = a(j)`
1024
- ${(t) => D(t)}
1024
+ }, $t = a(O)`
1025
+ ${(t) => K(t)}
1025
1026
  > ul {
1026
1027
  display: flex;
1027
1028
  flex-wrap: wrap;
@@ -1033,9 +1034,9 @@ const Re = ({ className: t }) => {
1033
1034
  margin: 0;
1034
1035
  }
1035
1036
  }
1036
- ${(t) => S(t)}
1037
- `, wt = a(L)`
1038
- ${K};
1037
+ ${(t) => C(t)}
1038
+ `, vt = a(L)`
1039
+ ${B};
1039
1040
 
1040
1041
  background-color: ${(t) => t.bgColor};
1041
1042
  display: flex;
@@ -1047,7 +1048,7 @@ const Re = ({ className: t }) => {
1047
1048
  border-radius: 100%;
1048
1049
 
1049
1050
  &:focus-visible {
1050
- ${p}
1051
+ ${b}
1051
1052
  background-color: transparent;
1052
1053
 
1053
1054
  i,
@@ -1074,81 +1075,81 @@ const Re = ({ className: t }) => {
1074
1075
  stroke: #fff;
1075
1076
  }
1076
1077
  }
1077
- `, kt = ([t, e]) => ({ type: t, content: e }), Ct = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
1078
- St,
1078
+ `, xt = ([t, e]) => ({ type: t, content: e }), wt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
1079
+ kt,
1079
1080
  {
1080
1081
  role: "none",
1081
1082
  className: "humany-message-list",
1082
- items: t.map(kt),
1083
+ items: t.map(xt),
1083
1084
  renderLi: !0,
1084
1085
  renderItem: (r) => {
1085
1086
  switch (r.type) {
1086
- case C.Text:
1087
- return /* @__PURE__ */ n(bt, { text: r.content });
1088
- case C.HTML:
1089
- return /* @__PURE__ */ n(lt, { ...r.content });
1090
- case C.Separator:
1091
- return /* @__PURE__ */ n(yt, { ...r.content });
1092
- case C.ItemList:
1093
- return /* @__PURE__ */ n(dt, { ...r.content, dispatch: e });
1094
- case C.LinkList:
1095
- return /* @__PURE__ */ n(ht, { ...r.content, dispatch: e });
1096
- case C.ButtonList:
1097
- return /* @__PURE__ */ n(rt, { ...r.content, dispatch: e });
1098
- case C.VideoRequest:
1099
- return /* @__PURE__ */ n(vt, { ...r.content, dispatch: e });
1087
+ case k.Text:
1088
+ return /* @__PURE__ */ n(yt, { text: r.content });
1089
+ case k.HTML:
1090
+ return /* @__PURE__ */ n(at, { ...r.content });
1091
+ case k.Separator:
1092
+ return /* @__PURE__ */ n(gt, { ...r.content });
1093
+ case k.ItemList:
1094
+ return /* @__PURE__ */ n(lt, { ...r.content, dispatch: e });
1095
+ case k.LinkList:
1096
+ return /* @__PURE__ */ n(mt, { ...r.content, dispatch: e });
1097
+ case k.ButtonList:
1098
+ return /* @__PURE__ */ n(tt, { ...r.content, dispatch: e });
1099
+ case k.VideoRequest:
1100
+ return /* @__PURE__ */ n(bt, { ...r.content, dispatch: e });
1100
1101
  default:
1101
- return /* @__PURE__ */ n(it, { type: r.type, content: r.content });
1102
+ return /* @__PURE__ */ n(st, { type: r.type, content: r.content });
1102
1103
  }
1103
1104
  }
1104
1105
  }
1105
- ), St = a(ie)`
1106
- ${Ce}
1106
+ ), kt = a(se)`
1107
+ ${we}
1107
1108
 
1108
1109
  > li {
1109
1110
  margin: 0;
1110
1111
  }
1111
- `, zt = Z(
1112
+ `, Ct = Q(
1112
1113
  ({ className: t, timestamp: e, sender: r, type: o, content: s }, i) => {
1113
- const c = de(
1114
+ const c = le(
1114
1115
  (l) => {
1115
1116
  let h = "first";
1116
1117
  return s.length > 1 && (h = l === 0 ? "first" : l + 1 === s.length ? "last" : "middle"), h;
1117
1118
  },
1118
1119
  [s]
1119
1120
  ), { userLabel: d = "" } = N(), u = () => /* @__PURE__ */ n(z, { children: s.map((l) => {
1120
- const { key: h, body: x, title: T, form: k, actions: $ } = l, A = !!x && !T && !k && !$;
1121
+ const { key: h, body: $, title: v, form: T, actions: y } = l, S = !!$ && !v && !T && !y;
1121
1122
  return /* @__PURE__ */ n(
1122
- Xe,
1123
+ Je,
1123
1124
  {
1124
1125
  className: t,
1125
- discrete: A,
1126
+ discrete: S,
1126
1127
  ref: i,
1127
1128
  timestamp: e,
1128
- fullWidth: !!k || !!$,
1129
- children: A && x ? /* @__PURE__ */ n(J, { html: x }) : /* @__PURE__ */ n(F, { isSystem: !0, content: l })
1129
+ fullWidth: !!T || !!y,
1130
+ children: S && $ ? /* @__PURE__ */ n(Y, { html: $ }) : /* @__PURE__ */ n(P, { isSystem: !0, content: l })
1130
1131
  },
1131
1132
  h
1132
1133
  );
1133
1134
  }) }), f = () => /* @__PURE__ */ m(z, { children: [
1134
- /* @__PURE__ */ m(re, { className: "humany-sr-only", children: [
1135
+ /* @__PURE__ */ m(te, { className: "humany-sr-only", children: [
1135
1136
  r == null ? void 0 : r.name,
1136
1137
  ":"
1137
1138
  ] }),
1138
1139
  /* @__PURE__ */ n(
1139
- he,
1140
+ me,
1140
1141
  {
1141
1142
  sender: r,
1142
1143
  timestamp: e,
1143
1144
  className: t,
1144
- children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
1145
- q,
1145
+ children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
1146
+ V,
1146
1147
  {
1147
1148
  className: "humany-message-container",
1148
1149
  left: !0,
1149
1150
  ref: i,
1150
1151
  children: /* @__PURE__ */ n(
1151
- F,
1152
+ P,
1152
1153
  {
1153
1154
  content: l,
1154
1155
  stacked: c(h)
@@ -1159,19 +1160,19 @@ const Re = ({ className: t }) => {
1159
1160
  )) })
1160
1161
  }
1161
1162
  )
1162
- ] }), b = () => /* @__PURE__ */ m(z, { children: [
1163
- /* @__PURE__ */ m(re, { className: "humany-sr-only", children: [
1163
+ ] }), w = () => /* @__PURE__ */ m(z, { children: [
1164
+ /* @__PURE__ */ m(te, { className: "humany-sr-only", children: [
1164
1165
  d,
1165
1166
  ":"
1166
1167
  ] }),
1167
- /* @__PURE__ */ n(tt, { timestamp: e, className: t, children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
1168
- q,
1168
+ /* @__PURE__ */ n(Ze, { timestamp: e, className: t, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
1169
+ V,
1169
1170
  {
1170
1171
  className: "humany-message-container",
1171
1172
  right: !0,
1172
1173
  ref: i,
1173
1174
  children: /* @__PURE__ */ n(
1174
- F,
1175
+ P,
1175
1176
  {
1176
1177
  isUser: !0,
1177
1178
  content: l,
@@ -1183,33 +1184,33 @@ const Re = ({ className: t }) => {
1183
1184
  )) }) })
1184
1185
  ] });
1185
1186
  switch (o) {
1186
- case W.System:
1187
+ case E.System:
1187
1188
  return u();
1188
- case W.Agent:
1189
+ case E.Agent:
1189
1190
  return f();
1190
- case W.User:
1191
- return b();
1191
+ case E.User:
1192
+ return w();
1192
1193
  default:
1193
1194
  return null;
1194
1195
  }
1195
1196
  }
1196
- ), F = ({
1197
+ ), P = ({
1197
1198
  content: t,
1198
1199
  isUser: e,
1199
1200
  isSystem: r,
1200
1201
  stacked: o
1201
1202
  }) => {
1202
- const s = Y(), { title: i, body: c, actions: d, form: u, items: f } = t;
1203
+ const s = _(), { title: i, body: c, actions: d, form: u, items: f } = t;
1203
1204
  return f ? /* @__PURE__ */ n(
1204
- _,
1205
+ q,
1205
1206
  {
1206
1207
  className: "humany-message-content",
1207
1208
  user: !!e,
1208
1209
  stacked: o,
1209
- children: /* @__PURE__ */ n(Ct, { items: f, dispatch: s })
1210
+ children: /* @__PURE__ */ n(wt, { items: f, dispatch: s })
1210
1211
  }
1211
1212
  ) : /* @__PURE__ */ m(
1212
- _,
1213
+ q,
1213
1214
  {
1214
1215
  className: "humany-message-content",
1215
1216
  padded: !r,
@@ -1217,10 +1218,10 @@ const Re = ({ className: t }) => {
1217
1218
  stacked: o,
1218
1219
  fullWidth: !!u || !!d,
1219
1220
  children: [
1220
- i && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(Fe, { variant: "h2", children: i }) }),
1221
- c && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(_e, { html: c }) }),
1222
- u && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(
1223
- qe,
1221
+ i && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(Pe, { variant: "h2", children: i }) }),
1222
+ c && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(qe, { html: c }) }),
1223
+ u && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(
1224
+ Ve,
1224
1225
  {
1225
1226
  ...u,
1226
1227
  onChange: (l, h) => {
@@ -1232,12 +1233,12 @@ const Re = ({ className: t }) => {
1232
1233
  }
1233
1234
  }
1234
1235
  ) }),
1235
- d && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(
1236
- Ye,
1236
+ d && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(
1237
+ _e,
1237
1238
  {
1238
1239
  items: Object.keys(d).map((l) => ({ label: d[l], actionKey: l })),
1239
1240
  renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
1240
- Ge,
1241
+ Fe,
1241
1242
  {
1242
1243
  onClick: () => {
1243
1244
  s("action", l.actionKey);
@@ -1250,31 +1251,31 @@ const Re = ({ className: t }) => {
1250
1251
  ]
1251
1252
  }
1252
1253
  );
1253
- }, re = a.div`
1254
+ }, te = a.div`
1254
1255
  position: absolute;
1255
1256
  left: -10000px;
1256
1257
  top: auto;
1257
1258
  width: 1px;
1258
1259
  height: 1px;
1259
1260
  overflow: hidden;
1260
- `, ge = () => {
1261
- const t = de((d) => {
1261
+ `, ue = () => {
1262
+ const t = le((d) => {
1262
1263
  d && setTimeout(() => {
1263
1264
  d.scrollIntoView({
1264
1265
  block: "start",
1265
1266
  behavior: "smooth"
1266
1267
  });
1267
1268
  }, 250);
1268
- }, []), [e, r] = ae(!0), {
1269
+ }, []), [e, r] = oe(!0), {
1269
1270
  messages: o,
1270
1271
  loading: s,
1271
1272
  typingActors: i = []
1272
1273
  } = N(), c = () => i && i.length ? i.map((d, u) => /* @__PURE__ */ n(
1273
- U,
1274
+ W,
1274
1275
  {
1275
1276
  id: `typing_${d.name}`,
1276
- children: /* @__PURE__ */ n(he, { timestamp: Date.now(), sender: d, children: /* @__PURE__ */ n(
1277
- te,
1277
+ children: /* @__PURE__ */ n(me, { timestamp: Date.now(), sender: d, children: /* @__PURE__ */ n(
1278
+ Z,
1278
1279
  {
1279
1280
  boxed: !0,
1280
1281
  ref: t
@@ -1284,25 +1285,25 @@ const Re = ({ className: t }) => {
1284
1285
  `typing_${d.name}`
1285
1286
  )) : null;
1286
1287
  return /* @__PURE__ */ m(z, { children: [
1287
- /* @__PURE__ */ m(Lt, { tabIndex: 0, scrollableCss: e, ref: r, children: [
1288
+ /* @__PURE__ */ m(St, { tabIndex: 0, scrollableCss: e, ref: r, children: [
1288
1289
  o && o.length ? o.map((d, u) => {
1289
- const { type: f, timestamp: b, sender: l, content: h } = d;
1290
+ const { type: f, timestamp: w, sender: l, content: h } = d;
1290
1291
  return /* @__PURE__ */ n(
1291
- U,
1292
+ W,
1292
1293
  {
1293
1294
  className: "humany-conversation-entry",
1294
1295
  tabIndex: -1,
1295
- children: /* @__PURE__ */ n(zt, { ...d, ref: t })
1296
+ children: /* @__PURE__ */ n(Ct, { ...d, ref: t })
1296
1297
  },
1297
- `${f}_${l == null ? void 0 : l.name}_${b}_${h[0].key}`
1298
+ `${f}_${l == null ? void 0 : l.name}_${w}_${h[0].key}`
1298
1299
  );
1299
1300
  }) : null,
1300
1301
  c(),
1301
- s && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(te, { ref: t }) })
1302
+ s && /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(Z, { ref: t }) })
1302
1303
  ] }),
1303
- /* @__PURE__ */ n(Re, {})
1304
+ /* @__PURE__ */ n(Ae, {})
1304
1305
  ] });
1305
- }, Lt = a.div`
1306
+ }, St = a.div`
1306
1307
  display: flex;
1307
1308
  flex-direction: column;
1308
1309
  align-items: stretch;
@@ -1313,9 +1314,9 @@ const Re = ({ className: t }) => {
1313
1314
  }};
1314
1315
  ${(t) => !!t.scrollableCss && t.scrollableCss};
1315
1316
  &:focus-visible {
1316
- ${(t) => p(t)};
1317
+ ${(t) => b(t)};
1317
1318
  }
1318
- `, U = a.div`
1319
+ `, W = a.div`
1319
1320
  margin: 0;
1320
1321
  margin-bottom: ${(t) => {
1321
1322
  var e;
@@ -1347,44 +1348,44 @@ const Re = ({ className: t }) => {
1347
1348
  h1 {
1348
1349
  font-weight: normal;
1349
1350
  }
1350
- ${(t) => Q(t)(
1351
+ ${(t) => G(t)(
1351
1352
  "h1",
1352
- y`
1353
+ p`
1353
1354
  font-weight: normal;
1354
1355
  `
1355
1356
  )}
1356
- `, Nt = ({ dispatch: t }) => {
1357
- const e = ce(null);
1358
- return X(() => {
1357
+ `, zt = ({ dispatch: t }) => {
1358
+ const e = ie(null);
1359
+ return J(() => {
1359
1360
  e.current && e.current.parentNode && t("overlay-mounted", e.current);
1360
1361
  }, [e]), /* @__PURE__ */ n(
1361
- le,
1362
+ ae,
1362
1363
  {
1363
1364
  portalId: "humany-conversation-overlay-portal",
1364
1365
  className: "humany-conversation-overlay-outlet",
1365
1366
  ref: e
1366
1367
  }
1367
1368
  );
1368
- }, It = ({
1369
+ }, Lt = ({
1369
1370
  dispatch: t,
1370
1371
  header: e,
1371
1372
  buttonLabel: r
1372
1373
  }) => /* @__PURE__ */ m(
1373
- Mt,
1374
+ Nt,
1374
1375
  {
1375
1376
  portalId: "humany-conversation-portal",
1376
1377
  className: "humany-conversation-outlet",
1377
1378
  children: [
1378
- /* @__PURE__ */ m(Tt, { className: "humany-conversation-outlet-head", children: [
1379
+ /* @__PURE__ */ m(It, { className: "humany-conversation-outlet-head", children: [
1379
1380
  /* @__PURE__ */ n(
1380
- Ht,
1381
+ Tt,
1381
1382
  {
1382
1383
  className: "humany-conversation-outlet-head-button",
1383
1384
  "aria-label": r,
1384
1385
  title: r,
1385
1386
  onClick: () => t("hide-overlay-conversation"),
1386
1387
  children: /* @__PURE__ */ n(
1387
- w,
1388
+ x,
1388
1389
  {
1389
1390
  symbol: {
1390
1391
  type: "Svg",
@@ -1396,7 +1397,7 @@ const Re = ({ className: t }) => {
1396
1397
  }
1397
1398
  ),
1398
1399
  e && /* @__PURE__ */ n(
1399
- At,
1400
+ Mt,
1400
1401
  {
1401
1402
  className: "humany-conversation-outlet-header",
1402
1403
  variant: "h1",
@@ -1404,10 +1405,10 @@ const Re = ({ className: t }) => {
1404
1405
  }
1405
1406
  )
1406
1407
  ] }),
1407
- /* @__PURE__ */ n(ge, {})
1408
+ /* @__PURE__ */ n(ue, {})
1408
1409
  ]
1409
1410
  }
1410
- ), Mt = a(le)`
1411
+ ), Nt = a(ae)`
1411
1412
  z-index: 11;
1412
1413
  top: auto;
1413
1414
  height: 65%;
@@ -1422,7 +1423,7 @@ const Re = ({ className: t }) => {
1422
1423
  var e;
1423
1424
  return (e = t.theme.sizes) == null ? void 0 : e.large;
1424
1425
  }};
1425
- `, Tt = a.div`
1426
+ `, It = a.div`
1426
1427
  display: flex;
1427
1428
  flex-direction: column;
1428
1429
  justify-content: center;
@@ -1436,7 +1437,7 @@ const Re = ({ className: t }) => {
1436
1437
  return (e = t.theme.sizes) == null ? void 0 : e.normal;
1437
1438
  }};
1438
1439
  ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
1439
- `, At = a(G)`
1440
+ `, Mt = a(F)`
1440
1441
  font-size: ${(t) => {
1441
1442
  var e;
1442
1443
  return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -1446,7 +1447,7 @@ const Re = ({ className: t }) => {
1446
1447
  return (e = t.theme.colors) == null ? void 0 : e.text;
1447
1448
  }};
1448
1449
  margin: 0;
1449
- `, Ht = a(L)`
1450
+ `, Tt = a(L)`
1450
1451
  display: flex;
1451
1452
  align-items: center;
1452
1453
  justify-content: center;
@@ -1460,7 +1461,7 @@ const Re = ({ className: t }) => {
1460
1461
  ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
1461
1462
 
1462
1463
  &:focus-visible {
1463
- ${p};
1464
+ ${b};
1464
1465
  }
1465
1466
 
1466
1467
  svg line {
@@ -1469,20 +1470,20 @@ const Re = ({ className: t }) => {
1469
1470
  return (e = t.theme.colors) == null ? void 0 : e.text;
1470
1471
  }};
1471
1472
  }
1472
- `, qt = ({ className: t, ...e }) => {
1473
+ `, Vt = ({ className: t, ...e }) => {
1473
1474
  const {
1474
1475
  overlay: r,
1475
1476
  overlayConversationHeader: o,
1476
1477
  overlayConversationCloseLabel: s,
1477
1478
  conversationControllerId: i
1478
- } = N(), c = Y(), u = Se().get("$settings");
1479
+ } = N(), c = _(), u = ke().get("$settings");
1479
1480
  return /* @__PURE__ */ n(
1480
- ze.Provider,
1481
+ Ce.Provider,
1481
1482
  {
1482
1483
  value: i ? { id: i } : null,
1483
- children: /* @__PURE__ */ m(ue.Provider, { value: u == null ? void 0 : u.language, children: [
1484
+ children: /* @__PURE__ */ m(de.Provider, { value: u == null ? void 0 : u.language, children: [
1484
1485
  /* @__PURE__ */ n(
1485
- Rt,
1486
+ At,
1486
1487
  {
1487
1488
  "aria-live": "assertive",
1488
1489
  ...e,
@@ -1490,13 +1491,13 @@ const Re = ({ className: t }) => {
1490
1491
  t,
1491
1492
  "humany-conversation-component"
1492
1493
  ),
1493
- children: /* @__PURE__ */ n(ge, {})
1494
+ children: /* @__PURE__ */ n(ue, {})
1494
1495
  }
1495
1496
  ),
1496
1497
  r && /* @__PURE__ */ m(z, { children: [
1497
- /* @__PURE__ */ n(Nt, { dispatch: c }),
1498
+ /* @__PURE__ */ n(zt, { dispatch: c }),
1498
1499
  r.conversation && /* @__PURE__ */ n(
1499
- It,
1500
+ Lt,
1500
1501
  {
1501
1502
  dispatch: c,
1502
1503
  header: o,
@@ -1507,7 +1508,7 @@ const Re = ({ className: t }) => {
1507
1508
  ] })
1508
1509
  }
1509
1510
  );
1510
- }, Rt = a.div`
1511
+ }, At = a.div`
1511
1512
  position: absolute;
1512
1513
  right: 0;
1513
1514
  left: 0;
@@ -1518,5 +1519,5 @@ const Re = ({ className: t }) => {
1518
1519
  flex-direction: column;
1519
1520
  `;
1520
1521
  export {
1521
- qt as default
1522
+ Vt as default
1522
1523
  };