@telia-ace/widget-conversation 1.0.39 → 1.0.40-next.1

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 (5) hide show
  1. package/dist/{conversation-23bae0c6.js → conversation-9e73f101.js} +202 -178
  2. package/dist/conversation-9e73f101.js.map +1 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +10 -10
  5. package/dist/conversation-23bae0c6.js.map +0 -1
package/dist/{conversation-23bae0c6.js → conversation-9e73f101.js} RENAMED
@@ -1,12 +1,12 @@
1
1
  var ve = Object.defineProperty, Ee = Object.defineProperties;
2
2
  var xe = Object.getOwnPropertyDescriptors;
3
- var A = Object.getOwnPropertySymbols;
3
+ var T = Object.getOwnPropertySymbols;
4
4
  var ne = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable;
5
5
  var te = (e, t, r) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, g = (e, t) => {
6
6
  for (var r in t || (t = {}))
7
7
  ne.call(t, r) && te(e, r, t[r]);
8
- if (A)
9
- for (var r of A(t))
8
+ if (T)
9
+ for (var r of T(t))
10
10
  re.call(t, r) && te(e, r, t[r]);
11
11
  return e;
12
12
  }, E = (e, t) => Ee(e, xe(t));
@@ -14,86 +14,86 @@ var F = (e, t) => {
14
14
  var r = {};
15
15
  for (var o in e)
16
16
  ne.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
17
- if (e != null && A)
18
- for (var o of A(e))
17
+ if (e != null && T)
18
+ for (var o of T(e))
19
19
  t.indexOf(o) < 0 && re.call(e, o) && (r[o] = e[o]);
20
20
  return r;
21
21
  };
22
22
  import a from "@emotion/styled";
23
- import { useIsTabbing as we, useDispatch as Y, useProperties as I, useScroll as le, SymbolBadge as x, Input as se, Button as z, borderTabStyle as f, Typography as G, invertedHoverButton as ke, Html as J, List as ie, buttonCss as Q, ItemList as K, itemList as O, useComponent as Ce, genericHtml as Se, headingElement as X, list as ze, WidgetOverlayOutlet as ce, ConversationContext as Le } from "@telia-ace/widget-ui";
24
- import { appendClassNames as H } from "@telia-ace/widget-utilities";
25
- import n, { useState as R, useEffect as me, forwardRef as Z, Suspense as Me, useMemo as Ie, useCallback as de, useRef as He } from "react";
26
- import { css as p, keyframes as Te } from "@emotion/react";
27
- import { FormComponent as Ae } from "@telia-ace/widget-forms";
28
- import { ConversationMessageListItemType as k, ConversationMessageType as W } from "./index.js";
23
+ import { useIsTabbing as ke, useDispatch as Y, useProperties as N, useScroll as se, SymbolBadge as x, Input as le, Button as z, borderTabStyle as p, Typography as G, invertedHoverButton as we, Html as J, List as ie, buttonCss as Q, ItemList as K, itemList as O, useComponent as Ce, genericHtml as Se, headingElement as X, list as ze, WidgetOverlayOutlet as ce, ConversationContext as Le } from "@telia-ace/widget-ui";
24
+ import { appendClassNames as I } from "@telia-ace/widget-utilities";
25
+ import n, { useState as A, useEffect as me, forwardRef as Z, Suspense as Me, useMemo as Ne, useCallback as de, useRef as Ie } from "react";
26
+ import { css as y, keyframes as He } from "@emotion/react";
27
+ import { FormComponent as Te } from "@telia-ace/widget-forms";
28
+ import { ConversationMessageListItemType as w, ConversationMessageType as W } from "./index.js";
29
29
  import "@telia-ace/widget-core";
30
30
  import "@telia-ace/widget-services";
31
31
  import "@telia-ace/widget-plugins";
32
- const Re = ({ className: e }) => {
33
- const [t, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = we(), m = Y(), {
32
+ const Ae = ({ className: e }) => {
33
+ const [t, r] = A(""), [o, s] = A(!1), [l, u] = A(0), [c, h] = A(0), v = ke(), m = Y(), {
34
34
  inputPlaceholder: i = "Type your message",
35
35
  inputHidden: $ = !1,
36
36
  inputDisabled: S = !1,
37
37
  sendButtonLabel: L = "Send message",
38
- inputMultiline: w = !0,
39
- secondaryAction: y
40
- } = I(), [pe, b] = le(!0);
38
+ inputMultiline: k = !0,
39
+ secondaryAction: f
40
+ } = N(), [ye, b] = se(!0);
41
41
  me(() => {
42
42
  if (b.current) {
43
- const { lineHeight: d, maxHeight: T } = getComputedStyle(b.current);
43
+ const { lineHeight: d, maxHeight: H } = getComputedStyle(b.current);
44
44
  if (d && d.indexOf("px") > -1) {
45
45
  const M = d.split("px"), be = parseInt(M[0], 10);
46
46
  u(be);
47
- const $e = T.split("px");
47
+ const $e = H.split("px");
48
48
  h(parseInt($e[0], 10));
49
49
  }
50
50
  }
51
51
  }, [b.current]);
52
52
  const j = (d) => {
53
- !d.shiftKey || !w ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && d.preventDefault();
53
+ !d.shiftKey || !k ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && d.preventDefault();
54
+ }, pe = (d) => {
55
+ f && (d.preventDefault(), m("action", g({
56
+ actionKey: f.action
57
+ }, f)));
54
58
  }, fe = (d) => {
55
- y && (d.preventDefault(), m("action", g({
56
- actionKey: y.action
57
- }, y)));
58
- }, ye = (d) => {
59
- if (w && b.current) {
60
- const T = b.current.scrollHeight;
61
- if (T > s) {
59
+ if (k && b.current) {
60
+ const H = b.current.scrollHeight;
61
+ if (H > l) {
62
62
  b.current.style.height = "auto";
63
- let M = T;
64
- d.length < 1 && (M = s), b.current.style.height = `${M}px`, M >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
63
+ let M = H;
64
+ d.length < 1 && (M = l), b.current.style.height = `${M}px`, M >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
65
65
  }
66
66
  }
67
67
  }, D = (d) => {
68
- ye(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
68
+ fe(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
69
69
  };
70
70
  return $ ? null : /* @__PURE__ */ n.createElement(
71
71
  Oe,
72
72
  {
73
- grow: w,
74
- className: H("humany-conversation-input", e),
73
+ grow: k,
74
+ className: I("humany-conversation-input", e),
75
75
  "data-has-focus": o,
76
- scrollableCss: pe,
76
+ scrollableCss: ye,
77
77
  isTabbing: v
78
78
  },
79
- y && /* @__PURE__ */ n.createElement(
79
+ f && /* @__PURE__ */ n.createElement(
80
80
  Ke,
81
81
  {
82
82
  disabled: S,
83
- onClick: fe,
84
- title: y.label,
85
- "aria-label": y.label
83
+ onClick: pe,
84
+ title: f.label,
85
+ "aria-label": f.label
86
86
  },
87
87
  /* @__PURE__ */ n.createElement(
88
88
  x,
89
89
  {
90
90
  size: 24,
91
- symbol: { type: "Svg", content: y.icon || "browse" }
91
+ symbol: { type: "Svg", content: f.icon || "browse" }
92
92
  }
93
93
  )
94
94
  ),
95
- w ? /* @__PURE__ */ n.createElement(
96
- Be,
95
+ k ? /* @__PURE__ */ n.createElement(
96
+ Re,
97
97
  {
98
98
  value: t,
99
99
  onChange: D,
@@ -101,13 +101,13 @@ const Re = ({ className: e }) => {
101
101
  disabled: S,
102
102
  "aria-label": i,
103
103
  placeholder: i,
104
- onFocusChange: l,
104
+ onFocusChange: s,
105
105
  type: "textarea",
106
106
  rows: 1,
107
107
  ref: b
108
108
  }
109
109
  ) : /* @__PURE__ */ n.createElement(
110
- Ne,
110
+ Be,
111
111
  {
112
112
  value: t,
113
113
  onChange: D,
@@ -115,7 +115,7 @@ const Re = ({ className: e }) => {
115
115
  disabled: S,
116
116
  "aria-label": i,
117
117
  placeholder: i,
118
- onFocusChange: l
118
+ onFocusChange: s
119
119
  }
120
120
  ),
121
121
  /* @__PURE__ */ n.createElement(
@@ -136,7 +136,7 @@ const Re = ({ className: e }) => {
136
136
  )
137
137
  )
138
138
  );
139
- }, Be = a(se)`
139
+ }, Re = a(le)`
140
140
  resize: none;
141
141
  flex: 1;
142
142
  flex-shrink: 1;
@@ -156,7 +156,7 @@ const Re = ({ className: e }) => {
156
156
  border: none;
157
157
  transition: height 200ms linear;
158
158
  outline: none;
159
- `, Ne = a(se)`
159
+ `, Be = a(le)`
160
160
  flex: 1;
161
161
  border: none;
162
162
  background-color: transparent;
@@ -192,7 +192,7 @@ const Re = ({ className: e }) => {
192
192
  border: none;
193
193
  color: #a6a6a6;
194
194
  &:focus-visible {
195
- ${f};
195
+ ${p};
196
196
  }
197
197
  `, Ke = a(ue)`
198
198
  border-right: ${(e) => e.theme.border};
@@ -201,10 +201,10 @@ const Re = ({ className: e }) => {
201
201
  return (t = e.theme.sizes) == null ? void 0 : t.normal;
202
202
  }} 0;
203
203
  `, Oe = a.div`
204
- ${(e) => e.grow ? p`
204
+ ${(e) => e.grow ? y`
205
205
  min-height: 50px;
206
206
  max-height: 150px;
207
- ` : p`
207
+ ` : y`
208
208
  height: 50px;
209
209
  `}
210
210
  flex: 0 0 auto;
@@ -215,7 +215,7 @@ const Re = ({ className: e }) => {
215
215
  return (t = e.theme.colors) == null ? void 0 : t.accent;
216
216
  }};
217
217
  border-top: ${(e) => e.theme.inputBorder};
218
- ${(e) => e["data-has-focus"] && e.isTabbing && f}
218
+ ${(e) => e["data-has-focus"] && e.isTabbing && p}
219
219
  textarea {
220
220
  ${(e) => !!e.scrollableCss && e.scrollableCss}
221
221
  }
@@ -240,7 +240,7 @@ const Re = ({ className: e }) => {
240
240
  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
241
241
  }};
242
242
  }
243
- `, De = Re, Fe = a.div`
243
+ `, De = Ae, Fe = a.div`
244
244
  width: ${(e) => e.avatarSize || "32px"};
245
245
  height: ${(e) => e.avatarSize || "32px"};
246
246
  border-radius: 50%;
@@ -287,7 +287,7 @@ const Re = ({ className: e }) => {
287
287
  }};
288
288
  }
289
289
  }
290
- `, We = Te`
290
+ `, We = He`
291
291
  0% {
292
292
  opacity: 0;
293
293
  }
@@ -356,13 +356,13 @@ const Re = ({ className: e }) => {
356
356
  max-width: 100%;
357
357
  ${(e) => e.fullWidth && "width: 100%;"}
358
358
  `, _e = (e, t) => {
359
- var o, l;
360
- const r = p`
359
+ var o, s;
360
+ const r = y`
361
361
  background-color: ${(o = t.colors) == null ? void 0 : o.accent};
362
- color: ${(l = t.colors) == null ? void 0 : l.text};
362
+ color: ${(s = t.colors) == null ? void 0 : s.text};
363
363
  ${t.border && `border: ${t.border};`};
364
364
  `;
365
- return t.borderRadius ? p`
365
+ return t.borderRadius ? y`
366
366
  ${r}
367
367
 
368
368
  border-top-right-radius: ${t.borderRadius};
@@ -377,12 +377,12 @@ const Re = ({ className: e }) => {
377
377
  `}
378
378
  ` : r;
379
379
  }, Ve = (e, t) => {
380
- var o, l;
381
- const r = p`
380
+ var o, s;
381
+ const r = y`
382
382
  background-color: ${(o = t.colors) == null ? void 0 : o.primary};
383
- color: ${(l = t.colors) == null ? void 0 : l.accent};
383
+ color: ${(s = t.colors) == null ? void 0 : s.accent};
384
384
  `;
385
- return t.borderRadius ? p`
385
+ return t.borderRadius ? y`
386
386
  ${r}
387
387
 
388
388
  border-top-left-radius: ${t.borderRadius};
@@ -396,7 +396,7 @@ const Re = ({ className: e }) => {
396
396
  border-bottom-right-radius: ${t.borderRadius};
397
397
  `}
398
398
  ` : r;
399
- }, B = a.div`
399
+ }, R = a.div`
400
400
  margin-bottom: ${(e) => {
401
401
  var t;
402
402
  return (t = e.theme.sizes) == null ? void 0 : t.normal;
@@ -406,18 +406,18 @@ const Re = ({ className: e }) => {
406
406
  }
407
407
  `, C = (e) => {
408
408
  var t, r;
409
- return p`
409
+ return y`
410
410
  margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
411
411
  padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
412
412
  `;
413
- }, qe = a(Ae)`
413
+ }, qe = a(Te)`
414
414
  & button.humany-form-component-button {
415
415
  ${(e) => {
416
- var t, r, o, l;
417
- return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && ke({
416
+ var t, r, o, s;
417
+ return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && we({
418
418
  active: !1,
419
419
  primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
420
- secondaryColor: (l = e.theme.colors) == null ? void 0 : l.accent,
420
+ secondaryColor: (s = e.theme.colors) == null ? void 0 : s.accent,
421
421
  theme: e.theme
422
422
  });
423
423
  }};
@@ -445,7 +445,7 @@ const Re = ({ className: e }) => {
445
445
  &:focus {
446
446
  ${(e) => {
447
447
  var t;
448
- return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && f;
448
+ return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && p;
449
449
  }};
450
450
  }
451
451
  }
@@ -472,7 +472,7 @@ const Re = ({ className: e }) => {
472
472
  width: 100%;
473
473
  color: #fff;
474
474
  &:focus-visible {
475
- ${f}
475
+ ${p}
476
476
  background-color: transparent;
477
477
  }
478
478
  `, Qe = Z(
@@ -497,29 +497,29 @@ const Re = ({ className: e }) => {
497
497
  return null;
498
498
  let o = "";
499
499
  return t ? r ? o = `${t}: ${ae(r)}` : o = t : r && (o = ae(r)), /* @__PURE__ */ n.createElement(Xe, null, o);
500
- }, N = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
501
- const { avatar: l, name: s } = r, { avatarSize: u } = I();
500
+ }, B = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
501
+ const { avatar: s, name: l } = r, { avatarSize: u } = N();
502
502
  return /* @__PURE__ */ n.createElement(
503
503
  tt,
504
504
  {
505
- hasAvatar: !!l,
506
- className: H(e, "humany-conversation-agent-message")
505
+ hasAvatar: !!s,
506
+ className: I(e, "humany-conversation-agent-message")
507
507
  },
508
- l && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", { src: l }) : /* @__PURE__ */ n.createElement(x, { symbol: l })),
508
+ s && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof s == "string" ? /* @__PURE__ */ n.createElement("img", { src: s }) : /* @__PURE__ */ n.createElement(x, { symbol: s })),
509
509
  t,
510
- /* @__PURE__ */ n.createElement(N, { name: s, timestamp: o })
510
+ /* @__PURE__ */ n.createElement(B, { name: l, timestamp: o })
511
511
  );
512
512
  }, tt = a.div`
513
513
  display: grid;
514
514
  margin-right: 10%;
515
515
  width: 90%;
516
- ${(e) => e.hasAvatar ? p`
516
+ ${(e) => e.hasAvatar ? y`
517
517
  grid-template-columns: auto 1fr;
518
518
  grid-template-rows: 1fr auto;
519
519
  grid-template-areas:
520
520
  'avatar content'
521
521
  '. info';
522
- ` : p`
522
+ ` : y`
523
523
  grid-template-columns: 1fr;
524
524
  grid-template-rows: 1fr auto;
525
525
  grid-template-areas:
@@ -527,14 +527,14 @@ const Re = ({ className: e }) => {
527
527
  'info';
528
528
  `};
529
529
  `, he = et, nt = Z(
530
- ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(
530
+ ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: s }, l) => /* @__PURE__ */ n.createElement(
531
531
  rt,
532
532
  {
533
- ref: s,
534
- className: H(e, "humany-conversation-system-message"),
535
- fullWidth: l
533
+ ref: l,
534
+ className: I(e, "humany-conversation-system-message"),
535
+ fullWidth: s
536
536
  },
537
- o ? /* @__PURE__ */ n.createElement(ot, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(N, { timestamp: r })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(N, { timestamp: r }))
537
+ o ? /* @__PURE__ */ n.createElement(ot, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(B, { timestamp: r })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(B, { timestamp: r }))
538
538
  )
539
539
  ), rt = a.div`
540
540
  ${(e) => e.fullWidth && "width: 100%"};
@@ -557,28 +557,29 @@ const Re = ({ className: e }) => {
557
557
  > p {
558
558
  margin: 0;
559
559
  }
560
- `, at = nt, lt = ({ className: e, children: t, timestamp: r }) => {
561
- const { userLabel: o = "" } = I();
560
+ `, at = nt, st = ({ className: e, children: t, timestamp: r }) => {
561
+ const { userLabel: o = "" } = N();
562
562
  return /* @__PURE__ */ n.createElement(
563
- st,
563
+ lt,
564
564
  {
565
- className: H(e, "humany-conversation-user-message")
565
+ className: I(e, "humany-conversation-user-message")
566
566
  },
567
567
  t,
568
- /* @__PURE__ */ n.createElement(N, { name: o, timestamp: r })
568
+ /* @__PURE__ */ n.createElement(B, { name: o, timestamp: r })
569
569
  );
570
- }, st = a.div`
570
+ }, lt = a.div`
571
571
  margin-left: 10%;
572
572
  width: 90%;
573
573
  display: flex;
574
574
  flex-direction: column;
575
575
  align-items: flex-end;
576
- `, it = lt, ee = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
576
+ `, it = st, ee = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
577
577
  label: e[t],
578
578
  actionKey: t
579
579
  })), ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
580
580
  mt,
581
581
  {
582
+ className: "humany-conversation-button-list",
582
583
  header: e,
583
584
  items: ee(t),
584
585
  renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
@@ -625,7 +626,7 @@ const Re = ({ className: e }) => {
625
626
  overflow: hidden;
626
627
  text-overflow: ellipsis;
627
628
  &:focus-visible {
628
- ${f}
629
+ ${p}
629
630
  background-color: transparent;
630
631
  }
631
632
 
@@ -647,17 +648,18 @@ const Re = ({ className: e }) => {
647
648
  a {
648
649
  color: ${(e) => e.theme.colors.link};
649
650
  &:focus-visible {
650
- ${f};
651
+ ${p};
651
652
  }
652
653
  }
653
- `, pt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
654
- ft,
654
+ `, yt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
655
+ pt,
655
656
  {
657
+ className: "humany-conversation-item-list",
656
658
  header: e,
657
659
  items: ee(t),
658
660
  renderItem: (o) => {
659
- var l;
660
- return /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(yt, null, ((l = o.symbol) == null ? void 0 : l.content) && /* @__PURE__ */ n.createElement("div", { className: "item-icon" }, /* @__PURE__ */ n.createElement(
661
+ var s;
662
+ return /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(ft, null, ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n.createElement("div", { className: "item-icon" }, /* @__PURE__ */ n.createElement(
661
663
  x,
662
664
  {
663
665
  size: 22,
@@ -679,7 +681,7 @@ const Re = ({ className: e }) => {
679
681
  ), o.description && /* @__PURE__ */ n.createElement("p", null, o.description))));
680
682
  }
681
683
  }
682
- ), ft = a(K)`
684
+ ), pt = a(K)`
683
685
  ${O}
684
686
 
685
687
  > .humany-paragraph {
@@ -693,7 +695,7 @@ const Re = ({ className: e }) => {
693
695
 
694
696
  ${(e) => X(e)(
695
697
  "h1",
696
- p`
698
+ y`
697
699
  white-space: normal;
698
700
  `
699
701
  )}
@@ -717,7 +719,7 @@ const Re = ({ className: e }) => {
717
719
  border-bottom: none;
718
720
  }
719
721
  }
720
- `, yt = a.div`
722
+ `, ft = a.div`
721
723
  display: flex;
722
724
  gap: ${(e) => {
723
725
  var t;
@@ -756,7 +758,7 @@ const Re = ({ className: e }) => {
756
758
  margin: 0;
757
759
 
758
760
  &:focus-visible {
759
- ${f}
761
+ ${p}
760
762
  span {
761
763
  color: ${(e) => {
762
764
  var t;
@@ -769,6 +771,7 @@ const Re = ({ className: e }) => {
769
771
  `, bt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
770
772
  $t,
771
773
  {
774
+ className: "humany-conversation-link-list",
772
775
  header: e,
773
776
  items: ee(t),
774
777
  renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
@@ -800,7 +803,7 @@ const Re = ({ className: e }) => {
800
803
 
801
804
  ${(e) => X(e)(
802
805
  "h1",
803
- p`
806
+ y`
804
807
  white-space: normal;
805
808
  `
806
809
  )}
@@ -830,7 +833,7 @@ const Re = ({ className: e }) => {
830
833
 
831
834
  ${(e) => {
832
835
  var t, r;
833
- return e.help && p`
836
+ return e.help && y`
834
837
  color: ${(t = e.theme.colors) == null ? void 0 : t.text};
835
838
  text-decoration: underline;
836
839
 
@@ -842,7 +845,7 @@ const Re = ({ className: e }) => {
842
845
  }}
843
846
 
844
847
  &:focus-visible {
845
- ${f}
848
+ ${p}
846
849
  span {
847
850
  color: ${(e) => {
848
851
  var t;
@@ -851,10 +854,10 @@ const Re = ({ className: e }) => {
851
854
  text-decoration: underline;
852
855
  }
853
856
  }
854
- `, Et = () => /* @__PURE__ */ n.createElement(xt, null), xt = a.div`
857
+ `, Et = () => /* @__PURE__ */ n.createElement(xt, { className: "humany-conversation-separator" }), xt = a.div`
855
858
  ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
856
859
  width: 100%;
857
- `, wt = ({ text: e }) => /* @__PURE__ */ n.createElement(kt, { variant: "span" }, e), kt = a(G)`
860
+ `, kt = ({ text: e }) => /* @__PURE__ */ n.createElement(wt, { className: "humany-conversation-text", variant: "span" }, e), wt = a(G)`
858
861
  ${C}
859
862
  `, Ct = ({
860
863
  header: e = "Video call",
@@ -862,7 +865,7 @@ const Re = ({ className: e }) => {
862
865
  declineLabel: r = "Decline",
863
866
  dispatch: o
864
867
  }) => {
865
- const l = Ie(() => [
868
+ const s = Ne(() => [
866
869
  {
867
870
  label: t,
868
871
  actionKey: "accept-video-call",
@@ -883,21 +886,22 @@ const Re = ({ className: e }) => {
883
886
  return /* @__PURE__ */ n.createElement(
884
887
  St,
885
888
  {
889
+ className: "humany-conversation-video-request",
886
890
  header: e,
887
- items: l,
888
- renderItem: (s) => {
889
- const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
890
- return /* @__PURE__ */ n.createElement("li", { key: s.actionKey }, /* @__PURE__ */ n.createElement(
891
+ items: s,
892
+ renderItem: (l) => {
893
+ const u = l.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
894
+ return /* @__PURE__ */ n.createElement("li", { key: l.actionKey }, /* @__PURE__ */ n.createElement(
891
895
  zt,
892
896
  {
893
897
  onClick: () => {
894
- o("action", s);
898
+ o("action", l);
895
899
  },
896
- "aria-label": s.label,
897
- title: s.label,
900
+ "aria-label": l.label,
901
+ title: l.label,
898
902
  bgColor: u
899
903
  },
900
- /* @__PURE__ */ n.createElement(x, { symbol: s.symbol, size: 25 })
904
+ /* @__PURE__ */ n.createElement(x, { symbol: l.symbol, size: 25 })
901
905
  ));
902
906
  }
903
907
  }
@@ -929,7 +933,7 @@ const Re = ({ className: e }) => {
929
933
  border-radius: 100%;
930
934
 
931
935
  &:focus-visible {
932
- ${f}
936
+ ${p}
933
937
  background-color: transparent;
934
938
 
935
939
  i,
@@ -957,73 +961,92 @@ const Re = ({ className: e }) => {
957
961
  }
958
962
  }
959
963
  `, Lt = ([e, t]) => ({ type: e, content: t }), Mt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
960
- It,
964
+ Nt,
961
965
  {
966
+ className: "humany-message-list",
962
967
  items: e.map(Lt),
963
968
  renderLi: !0,
964
969
  renderItem: (r) => {
965
970
  switch (r.type) {
966
- case k.Text:
967
- return /* @__PURE__ */ n.createElement(wt, { text: r.content });
968
- case k.HTML:
971
+ case w.Text:
972
+ return /* @__PURE__ */ n.createElement(kt, { text: r.content });
973
+ case w.HTML:
969
974
  return /* @__PURE__ */ n.createElement(ht, g({}, r.content));
970
- case k.Separator:
975
+ case w.Separator:
971
976
  return /* @__PURE__ */ n.createElement(Et, g({}, r.content));
972
- case k.ItemList:
973
- return /* @__PURE__ */ n.createElement(pt, E(g({}, r.content), { dispatch: t }));
974
- case k.LinkList:
977
+ case w.ItemList:
978
+ return /* @__PURE__ */ n.createElement(yt, E(g({}, r.content), { dispatch: t }));
979
+ case w.LinkList:
975
980
  return /* @__PURE__ */ n.createElement(bt, E(g({}, r.content), { dispatch: t }));
976
- case k.ButtonList:
981
+ case w.ButtonList:
977
982
  return /* @__PURE__ */ n.createElement(ct, E(g({}, r.content), { dispatch: t }));
978
- case k.VideoRequest:
983
+ case w.VideoRequest:
979
984
  return /* @__PURE__ */ n.createElement(Ct, E(g({}, r.content), { dispatch: t }));
980
985
  default:
981
986
  return /* @__PURE__ */ n.createElement(ut, { type: r.type, content: r.content });
982
987
  }
983
988
  }
984
989
  }
985
- ), It = a(ie)`
990
+ ), Nt = a(ie)`
986
991
  ${ze}
987
992
 
988
993
  > li {
989
994
  margin: 0;
990
995
  }
991
- `, Ht = Z(
992
- ({ className: e, timestamp: t, sender: r, type: o, content: l }, s) => {
996
+ `, It = Z(
997
+ ({ className: e, timestamp: t, sender: r, type: o, content: s }, l) => {
993
998
  const u = de(
994
999
  (m) => {
995
1000
  let i = "first";
996
- return l.length > 1 && (i = m === 0 ? "first" : m + 1 === l.length ? "last" : "middle"), i;
1001
+ return s.length > 1 && (i = m === 0 ? "first" : m + 1 === s.length ? "last" : "middle"), i;
997
1002
  },
998
- [l]
999
- ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, l.map((m) => {
1000
- const { key: i, body: $, title: S, form: L, actions: w } = m, y = !!$ && !S && !L && !w;
1003
+ [s]
1004
+ ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, s.map((m) => {
1005
+ const { key: i, body: $, title: S, form: L, actions: k } = m, f = !!$ && !S && !L && !k;
1001
1006
  return /* @__PURE__ */ n.createElement(
1002
1007
  at,
1003
1008
  {
1004
1009
  className: e,
1005
1010
  key: i,
1006
- discrete: y,
1007
- ref: s,
1011
+ discrete: f,
1012
+ ref: l,
1008
1013
  timestamp: t,
1009
- fullWidth: !!L || !!w
1014
+ fullWidth: !!L || !!k
1010
1015
  },
1011
- y && $ ? /* @__PURE__ */ n.createElement(J, { html: $ }) : /* @__PURE__ */ n.createElement(P, { isSystem: !0, content: m })
1016
+ f && $ ? /* @__PURE__ */ n.createElement(J, { html: $ }) : /* @__PURE__ */ n.createElement(P, { isSystem: !0, content: m })
1012
1017
  );
1013
- })), h = () => /* @__PURE__ */ n.createElement(he, { sender: r, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, null, l.map((m, i) => /* @__PURE__ */ n.createElement(V, { left: !0, key: m.key, ref: s }, /* @__PURE__ */ n.createElement(
1014
- P,
1018
+ })), h = () => /* @__PURE__ */ n.createElement(he, { sender: r, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, { className: "humany-message-content-bundle" }, s.map((m, i) => /* @__PURE__ */ n.createElement(
1019
+ V,
1015
1020
  {
1016
- content: m,
1017
- stacked: u(i)
1018
- }
1019
- ))))), v = () => /* @__PURE__ */ n.createElement(it, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, null, l.map((m, i) => /* @__PURE__ */ n.createElement(V, { right: !0, key: m.key, ref: s }, /* @__PURE__ */ n.createElement(
1020
- P,
1021
+ className: "humany-message-container",
1022
+ left: !0,
1023
+ key: m.key,
1024
+ ref: l
1025
+ },
1026
+ /* @__PURE__ */ n.createElement(
1027
+ P,
1028
+ {
1029
+ content: m,
1030
+ stacked: u(i)
1031
+ }
1032
+ )
1033
+ )))), v = () => /* @__PURE__ */ n.createElement(it, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, { className: "humany-message-content-bundle" }, s.map((m, i) => /* @__PURE__ */ n.createElement(
1034
+ V,
1021
1035
  {
1022
- isUser: !0,
1023
- content: m,
1024
- stacked: u(i)
1025
- }
1026
- )))));
1036
+ className: "humany-message-container",
1037
+ right: !0,
1038
+ key: m.key,
1039
+ ref: l
1040
+ },
1041
+ /* @__PURE__ */ n.createElement(
1042
+ P,
1043
+ {
1044
+ isUser: !0,
1045
+ content: m,
1046
+ stacked: u(i)
1047
+ }
1048
+ )
1049
+ ))));
1027
1050
  switch (o) {
1028
1051
  case W.System:
1029
1052
  return c();
@@ -1036,22 +1059,23 @@ const Re = ({ className: e }) => {
1036
1059
  }
1037
1060
  }
1038
1061
  ), P = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
1039
- const l = Y(), { title: s, body: u, actions: c, form: h, items: v } = e;
1040
- return v ? /* @__PURE__ */ n.createElement(q, { user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(Mt, { items: v, dispatch: l })) : /* @__PURE__ */ n.createElement(
1062
+ const s = Y(), { title: l, body: u, actions: c, form: h, items: v } = e;
1063
+ return v ? /* @__PURE__ */ n.createElement(q, { className: "humany-message-content", user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(Mt, { items: v, dispatch: s })) : /* @__PURE__ */ n.createElement(
1041
1064
  q,
1042
1065
  {
1066
+ className: "humany-message-content",
1043
1067
  padded: !r,
1044
1068
  user: !!t,
1045
1069
  stacked: o,
1046
1070
  fullWidth: !!h || !!c
1047
1071
  },
1048
- s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ue, { variant: "h2" }, s)),
1049
- u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, { html: u })),
1050
- h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
1072
+ l && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ue, { variant: "h2" }, l)),
1073
+ u && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ye, { html: u })),
1074
+ h && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(
1051
1075
  qe,
1052
1076
  E(g({}, h), {
1053
1077
  onChange: (i, $) => {
1054
- l("form", {
1078
+ s("form", {
1055
1079
  data: $,
1056
1080
  formKey: h.schema.id,
1057
1081
  actionKey: i
@@ -1059,7 +1083,7 @@ const Re = ({ className: e }) => {
1059
1083
  }
1060
1084
  })
1061
1085
  )),
1062
- c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
1086
+ c && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(
1063
1087
  Ge,
1064
1088
  {
1065
1089
  items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
@@ -1067,7 +1091,7 @@ const Re = ({ className: e }) => {
1067
1091
  Je,
1068
1092
  {
1069
1093
  onClick: () => {
1070
- l("action", i.actionKey);
1094
+ s("action", i.actionKey);
1071
1095
  }
1072
1096
  },
1073
1097
  i.label
@@ -1083,12 +1107,12 @@ const Re = ({ className: e }) => {
1083
1107
  behavior: "smooth"
1084
1108
  });
1085
1109
  }, 250);
1086
- }, []), [t, r] = le(!0), {
1110
+ }, []), [t, r] = se(!0), {
1087
1111
  messages: o,
1088
- loading: l,
1089
- typingActors: s = []
1090
- } = I(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(U, { id: `typing_${c.name}`, key: `typing_${c.name}` }, /* @__PURE__ */ n.createElement(he, { timestamp: Date.now(), sender: c }, /* @__PURE__ */ n.createElement(oe, { boxed: !0, ref: e })))) : null;
1091
- return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Tt, { tabIndex: 0, scrollableCss: t, ref: r }, o && o.length ? o.map((c, h) => {
1112
+ loading: s,
1113
+ typingActors: l = []
1114
+ } = N(), u = () => l && l.length ? l.map((c, h) => /* @__PURE__ */ n.createElement(U, { id: `typing_${c.name}`, key: `typing_${c.name}` }, /* @__PURE__ */ n.createElement(he, { timestamp: Date.now(), sender: c }, /* @__PURE__ */ n.createElement(oe, { boxed: !0, ref: e })))) : null;
1115
+ return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Ht, { tabIndex: 0, scrollableCss: t, ref: r }, o && o.length ? o.map((c, h) => {
1092
1116
  const { type: v, timestamp: m, sender: i, content: $ } = c;
1093
1117
  return /* @__PURE__ */ n.createElement(
1094
1118
  U,
@@ -1097,10 +1121,10 @@ const Re = ({ className: e }) => {
1097
1121
  tabIndex: -1,
1098
1122
  key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
1099
1123
  },
1100
- /* @__PURE__ */ n.createElement(Ht, E(g({}, c), { ref: e }))
1124
+ /* @__PURE__ */ n.createElement(It, E(g({}, c), { ref: e }))
1101
1125
  );
1102
- }) : null, u(), l && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
1103
- }, Tt = a.div`
1126
+ }) : null, u(), s && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
1127
+ }, Ht = a.div`
1104
1128
  display: flex;
1105
1129
  flex-direction: column;
1106
1130
  align-items: stretch;
@@ -1111,7 +1135,7 @@ const Re = ({ className: e }) => {
1111
1135
  }};
1112
1136
  ${(e) => !!e.scrollableCss && e.scrollableCss};
1113
1137
  &:focus-visible {
1114
- ${(e) => f(e)};
1138
+ ${(e) => p(e)};
1115
1139
  }
1116
1140
  `, U = a.div`
1117
1141
  margin: 0;
@@ -1147,12 +1171,12 @@ const Re = ({ className: e }) => {
1147
1171
  }
1148
1172
  ${(e) => X(e)(
1149
1173
  "h1",
1150
- p`
1174
+ y`
1151
1175
  font-weight: normal;
1152
1176
  `
1153
1177
  )}
1154
- `, At = ({ dispatch: e }) => {
1155
- const t = He(null);
1178
+ `, Tt = ({ dispatch: e }) => {
1179
+ const t = Ie(null);
1156
1180
  return me(() => {
1157
1181
  t.current && t.current.parentNode && e("overlay-mounted", t.current);
1158
1182
  }, [t]), /* @__PURE__ */ n.createElement(
@@ -1163,17 +1187,17 @@ const Re = ({ className: e }) => {
1163
1187
  ref: t
1164
1188
  }
1165
1189
  );
1166
- }, Rt = ({
1190
+ }, At = ({
1167
1191
  dispatch: e,
1168
1192
  header: t,
1169
1193
  buttonLabel: r
1170
1194
  }) => /* @__PURE__ */ n.createElement(
1171
- Bt,
1195
+ Rt,
1172
1196
  {
1173
1197
  portalId: "humany-conversation-portal",
1174
1198
  className: "humany-conversation-outlet"
1175
1199
  },
1176
- /* @__PURE__ */ n.createElement(Nt, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
1200
+ /* @__PURE__ */ n.createElement(Bt, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
1177
1201
  Ot,
1178
1202
  {
1179
1203
  className: "humany-conversation-outlet-head-button",
@@ -1200,7 +1224,7 @@ const Re = ({ className: e }) => {
1200
1224
  t
1201
1225
  )),
1202
1226
  /* @__PURE__ */ n.createElement(ge, null)
1203
- ), Bt = a(ce)`
1227
+ ), Rt = a(ce)`
1204
1228
  z-index: 11;
1205
1229
  top: auto;
1206
1230
  height: 65%;
@@ -1215,7 +1239,7 @@ const Re = ({ className: e }) => {
1215
1239
  var t;
1216
1240
  return (t = e.theme.sizes) == null ? void 0 : t.large;
1217
1241
  }};
1218
- `, Nt = a.div`
1242
+ `, Bt = a.div`
1219
1243
  display: flex;
1220
1244
  flex-direction: column;
1221
1245
  justify-content: center;
@@ -1253,7 +1277,7 @@ const Re = ({ className: e }) => {
1253
1277
  ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
1254
1278
 
1255
1279
  &:focus-visible {
1256
- ${f};
1280
+ ${p};
1257
1281
  }
1258
1282
 
1259
1283
  svg line {
@@ -1265,11 +1289,11 @@ const Re = ({ className: e }) => {
1265
1289
  `, Qt = (r) => {
1266
1290
  var o = r, { className: e } = o, t = F(o, ["className"]);
1267
1291
  const {
1268
- overlay: l,
1269
- overlayConversationHeader: s,
1292
+ overlay: s,
1293
+ overlayConversationHeader: l,
1270
1294
  overlayConversationCloseLabel: u,
1271
1295
  conversationControllerId: c
1272
- } = I(), h = Y();
1296
+ } = N(), h = Y();
1273
1297
  return /* @__PURE__ */ n.createElement(
1274
1298
  Le.Provider,
1275
1299
  {
@@ -1278,15 +1302,15 @@ const Re = ({ className: e }) => {
1278
1302
  /* @__PURE__ */ n.createElement(
1279
1303
  jt,
1280
1304
  E(g({}, t), {
1281
- className: H(e, "humany-conversation-component")
1305
+ className: I(e, "humany-conversation-component")
1282
1306
  }),
1283
1307
  /* @__PURE__ */ n.createElement(ge, null)
1284
1308
  ),
1285
- l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(At, { dispatch: h }), l.conversation && /* @__PURE__ */ n.createElement(
1286
- Rt,
1309
+ s && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Tt, { dispatch: h }), s.conversation && /* @__PURE__ */ n.createElement(
1310
+ At,
1287
1311
  {
1288
1312
  dispatch: h,
1289
- header: s,
1313
+ header: l,
1290
1314
  buttonLabel: u
1291
1315
  }
1292
1316
  ))
@@ -1304,4 +1328,4 @@ const Re = ({ className: e }) => {
1304
1328
  export {
1305
1329
  Qt as default
1306
1330
  };
1307
- //# sourceMappingURL=conversation-23bae0c6.js.map
1331
+ //# sourceMappingURL=conversation-9e73f101.js.map