@telia-ace/widget-conversation 1.0.26 → 1.0.27

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 (4) hide show
  1. package/dist/{conversation.3981560b.js → conversation.70c6987f.js} +266 -265
  2. package/dist/{conversation.3981560b.js.map → conversation.70c6987f.js.map} +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +9 -9
package/dist/{conversation.3981560b.js → conversation.70c6987f.js} RENAMED
@@ -1,93 +1,93 @@
1
1
  var pe = Object.defineProperty, ye = Object.defineProperties;
2
2
  var be = Object.getOwnPropertyDescriptors;
3
- var I = Object.getOwnPropertySymbols;
4
- var Y = Object.prototype.hasOwnProperty, q = Object.prototype.propertyIsEnumerable;
5
- var V = (e, t, r) => t in e ? pe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, z = (e, t) => {
3
+ var K = Object.getOwnPropertySymbols;
4
+ var Q = Object.prototype.hasOwnProperty, X = Object.prototype.propertyIsEnumerable;
5
+ var J = (e, t, r) => t in e ? pe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, w = (e, t) => {
6
6
  for (var r in t || (t = {}))
7
- Y.call(t, r) && V(e, r, t[r]);
8
- if (I)
9
- for (var r of I(t))
10
- q.call(t, r) && V(e, r, t[r]);
7
+ Q.call(t, r) && J(e, r, t[r]);
8
+ if (K)
9
+ for (var r of K(t))
10
+ X.call(t, r) && J(e, r, t[r]);
11
11
  return e;
12
- }, J = (e, t) => ye(e, be(t));
13
- var Q = (e, t) => {
12
+ }, N = (e, t) => ye(e, be(t));
13
+ var O = (e, t) => {
14
14
  var r = {};
15
- for (var o in e)
16
- Y.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
17
- if (e != null && I)
18
- for (var o of I(e))
19
- t.indexOf(o) < 0 && q.call(e, o) && (r[o] = e[o]);
15
+ for (var a in e)
16
+ Q.call(e, a) && t.indexOf(a) < 0 && (r[a] = e[a]);
17
+ if (e != null && K)
18
+ for (var a of K(e))
19
+ t.indexOf(a) < 0 && X.call(e, a) && (r[a] = e[a]);
20
20
  return r;
21
21
  };
22
- import { Input as le, Button as $e, borderTabStyle as x, SymbolBadge as M, useDispatch as U, useProperties as K, useScroll as se, Typography as Ee, useComponent as ke, invertedHoverButton as W, Html as _, List as P, buttonCss as R, Icon as xe, Lightbox as ie, useTransitionEnd as ve, headingElement as we } from "@telia-ace/widget-ui";
23
- import { appendClassNames as T, uuid as X } from "@telia-ace/widget-utilities";
24
- import n, { useState as S, useEffect as ce, Suspense as Ce, Fragment as Z, useRef as ze, useCallback as Se } from "react";
25
- import l, { css as m, keyframes as Te } from "styled-components";
26
- import { FormComponent as me } from "@telia-ace/widget-forms";
27
- import { ConversationMessageListItemType as E, ConversationMessageType as B } from "./index.js";
22
+ import { Input as se, Button as $e, borderTabStyle as x, SymbolBadge as P, useDispatch as R, useProperties as A, useScroll as ie, Typography as Ee, useComponent as ke, invertedHoverButton as G, Html as V, List as B, buttonCss as Y, Icon as xe, Lightbox as ce, useTransitionEnd as ve, headingElement as we } from "@telia-ace/widget-ui";
23
+ import { appendClassNames as M, uuid as Z } from "@telia-ace/widget-utilities";
24
+ import n, { useState as I, useEffect as me, Suspense as Ce, Fragment as ee, useRef as ze, useCallback as Se } from "react";
25
+ import l, { css as d, keyframes as Te } from "styled-components";
26
+ import { FormComponent as de } from "@telia-ace/widget-forms";
27
+ import { ConversationMessageListItemType as E, ConversationMessageType as D } from "./index.js";
28
28
  import "@telia-ace/widget-core";
29
29
  import "@telia-ace/widget-services";
30
30
  import "@telia-ace/widget-plugins";
31
31
  const Le = ({ className: e }) => {
32
- const [t, r] = S(""), [o, c] = S(!1), [g, u] = S(0), [p, b] = S(0), d = U(), {
33
- inputPlaceholder: a = "Type your message",
34
- inputHidden: i = !1,
32
+ const [t, r] = I(""), [a, i] = I(!1), [p, f] = I(0), [h, $] = I(0), c = R(), {
33
+ inputPlaceholder: o = "Type your message",
34
+ inputHidden: u = !1,
35
35
  inputDisabled: s = !1,
36
36
  sendButtonLabel: v = "Send message",
37
- inputMultiline: y = !0
38
- } = K(), [$, f] = se(!0);
39
- ce(() => {
40
- if (f.current) {
41
- const { lineHeight: h, maxHeight: L } = getComputedStyle(f.current);
42
- if (h && h.indexOf("px") > -1) {
43
- const C = h.split("px"), ge = parseInt(C[0], 10);
44
- u(ge);
45
- const fe = L.split("px");
46
- b(parseInt(fe[0], 10));
37
+ inputMultiline: m = !0
38
+ } = A(), [b, y] = ie(!0);
39
+ me(() => {
40
+ if (y.current) {
41
+ const { lineHeight: g, maxHeight: H } = getComputedStyle(y.current);
42
+ if (g && g.indexOf("px") > -1) {
43
+ const L = g.split("px"), ge = parseInt(L[0], 10);
44
+ f(ge);
45
+ const fe = H.split("px");
46
+ $(parseInt(fe[0], 10));
47
47
  }
48
48
  }
49
- }, [f.current]);
50
- const F = (h) => {
51
- !h.shiftKey || !y ? (h.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), r(""), A(""))) : t.length < 1 && h.preventDefault();
52
- }, he = (h) => {
53
- if (y && f.current) {
54
- const L = f.current.scrollHeight;
55
- if (L > g) {
56
- f.current.style.height = "auto";
57
- let C = L;
58
- h.length < 1 && (C = g), f.current.style.height = `${C}px`, C >= p ? f.current.style.overflowY = "scroll" : f.current.style.overflowY = "hidden";
49
+ }, [y.current]);
50
+ const z = (g) => {
51
+ !g.shiftKey || !m ? (g.preventDefault(), t && t.length > 0 && (c("user-submit", { text: t }), r(""), T(""))) : t.length < 1 && g.preventDefault();
52
+ }, S = (g) => {
53
+ if (m && y.current) {
54
+ const H = y.current.scrollHeight;
55
+ if (H > p) {
56
+ y.current.style.height = "auto";
57
+ let L = H;
58
+ g.length < 1 && (L = p), y.current.style.height = `${L}px`, L >= h ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
59
59
  }
60
60
  }
61
- }, A = (h) => {
62
- he(h), r(h), h && h.length > 0 && d("user-typing", { textLength: h.length });
61
+ }, T = (g) => {
62
+ S(g), r(g), g && g.length > 0 && c("user-typing", { textLength: g.length });
63
63
  };
64
- return i ? null : /* @__PURE__ */ n.createElement(He, {
65
- grow: y,
66
- className: T("humany-conversation-input", e),
67
- "data-has-focus": o,
68
- scrollableCss: $
69
- }, y ? /* @__PURE__ */ n.createElement(de, {
64
+ return u ? null : /* @__PURE__ */ n.createElement(He, {
65
+ grow: m,
66
+ className: M("humany-conversation-input", e),
67
+ "data-has-focus": a,
68
+ scrollableCss: b
69
+ }, m ? /* @__PURE__ */ n.createElement(ue, {
70
70
  value: t,
71
- onChange: A,
72
- onEnter: F,
71
+ onChange: T,
72
+ onEnter: z,
73
73
  disabled: s,
74
- "aria-label": a,
75
- placeholder: a,
76
- onFocusChange: c,
74
+ "aria-label": o,
75
+ placeholder: o,
76
+ onFocusChange: i,
77
77
  type: "textarea",
78
78
  rows: 1,
79
- ref: f
79
+ ref: y
80
80
  }) : /* @__PURE__ */ n.createElement(Ie, {
81
81
  value: t,
82
- onChange: A,
83
- onEnter: F,
82
+ onChange: T,
83
+ onEnter: z,
84
84
  disabled: s,
85
- "aria-label": a,
86
- placeholder: a,
87
- onFocusChange: c
85
+ "aria-label": o,
86
+ placeholder: o,
87
+ onFocusChange: i
88
88
  }), /* @__PURE__ */ n.createElement(Me, {
89
89
  disabled: s,
90
- onClick: F,
90
+ onClick: z,
91
91
  title: v,
92
92
  "aria-label": v
93
93
  }, /* @__PURE__ */ n.createElement(Ke, {
@@ -95,7 +95,7 @@ const Le = ({ className: e }) => {
95
95
  symbol: { type: "Svg", content: "send" },
96
96
  hasContent: t && t.length
97
97
  })));
98
- }, de = l(le)`
98
+ }, ue = l(se)`
99
99
  resize: none;
100
100
  flex: 1;
101
101
  flex-shrink: 1;
@@ -118,7 +118,7 @@ const Le = ({ className: e }) => {
118
118
  border: none;
119
119
  transition: height 200ms linear;
120
120
  outline: none;
121
- `, Ie = l(le)`
121
+ `, Ie = l(se)`
122
122
  flex: 1;
123
123
  border: none;
124
124
  background-color: transparent;
@@ -156,10 +156,10 @@ const Le = ({ className: e }) => {
156
156
  }};
157
157
  }
158
158
  `, He = l.div`
159
- ${(e) => e.grow ? m`
159
+ ${(e) => e.grow ? d`
160
160
  min-height: 50px;
161
161
  max-height: 150px;
162
- ` : m`
162
+ ` : d`
163
163
  height: 50px;
164
164
  `}
165
165
  flex: 0 0 auto;
@@ -170,18 +170,18 @@ const Le = ({ className: e }) => {
170
170
  return (t = e.theme.colors) == null ? void 0 : t.accent;
171
171
  }};
172
172
  border-top: ${(e) => e.theme.inputBorder};
173
- ${(e) => e["data-has-focus"] && m`
173
+ ${(e) => e["data-has-focus"] && d`
174
174
  ${(t) => {
175
175
  var r;
176
176
  return ((r = t.theme.accessibility) == null ? void 0 : r.isTabbing) && x;
177
177
  }};
178
178
  `}
179
- ${de} {
179
+ ${ue} {
180
180
  ${(e) => !!e.scrollableCss && e.scrollableCss}
181
181
  }
182
182
  `, Ke = l((r) => {
183
- var o = r, { hasContent: e } = o, t = Q(o, ["hasContent"]);
184
- return /* @__PURE__ */ n.createElement(M, z({}, t));
183
+ var a = r, { hasContent: e } = a, t = O(a, ["hasContent"]);
184
+ return /* @__PURE__ */ n.createElement(P, w({}, t));
185
185
  })`
186
186
  line,
187
187
  path {
@@ -274,7 +274,7 @@ const Le = ({ className: e }) => {
274
274
  > div:nth-child(3) {
275
275
  animation-delay: 200ms;
276
276
  }
277
- `, D = l.div`
277
+ `, W = l.div`
278
278
  grid-area: content;
279
279
  max-width: 100%;
280
280
  overflow: hidden;
@@ -285,9 +285,9 @@ const Le = ({ className: e }) => {
285
285
  }};
286
286
  font-weight: normal;
287
287
  margin: 0;
288
- `, j = l.div`
288
+ `, _ = l.div`
289
289
  display: flex;
290
- `, G = l.div`
290
+ `, q = l.div`
291
291
  background-color: ${(e) => {
292
292
  var t, r;
293
293
  return e.user ? (t = e.theme.colors) == null ? void 0 : t.primary : (r = e.theme.colors) == null ? void 0 : r.accent;
@@ -312,44 +312,44 @@ const Le = ({ className: e }) => {
312
312
  max-width: 100%;
313
313
  ${(e) => e.fullWidth && "width: 100%;"}
314
314
 
315
- ${(e) => !e.user && m`
315
+ ${(e) => !e.user && d`
316
316
  border: ${e.theme.border};
317
317
  `}
318
318
  ${(e) => e.user && "margin-left: auto"};
319
319
 
320
- ${(e) => e.stacked === "first" && e.user && m`
320
+ ${(e) => e.stacked === "first" && e.user && d`
321
321
  border-bottom-right-radius: 1px; // TODO: Prop?
322
322
  `}
323
- ${(e) => e.stacked === "middle" && e.user && m`
323
+ ${(e) => e.stacked === "middle" && e.user && d`
324
324
  border-bottom-right-radius: 1px;
325
325
  border-top-right-radius: 1px;
326
326
  `}
327
- ${(e) => e.stacked === "last" && e.user && m`
327
+ ${(e) => e.stacked === "last" && e.user && d`
328
328
  border-top-right-radius: 1px;
329
329
  `}
330
- ${(e) => e.stacked === "first" && !e.user && m`
330
+ ${(e) => e.stacked === "first" && !e.user && d`
331
331
  border-bottom-left-radius: 1px;
332
332
  `}
333
- ${(e) => e.stacked === "middle" && !e.user && m`
333
+ ${(e) => e.stacked === "middle" && !e.user && d`
334
334
  border-bottom-left-radius: 1px;
335
335
  border-top-left-radius: 1px;
336
336
  `}
337
- ${(e) => e.stacked === "last" && !e.user && m`
337
+ ${(e) => e.stacked === "last" && !e.user && d`
338
338
  border-top-left-radius: 1px;
339
339
  `};
340
340
 
341
- ${(e) => !e.stacked && m`
341
+ ${(e) => !e.stacked && d`
342
342
  ${e.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
343
343
  `};
344
344
 
345
345
  transition: border-radius 500ms linear;
346
- `, w = l.div`
346
+ `, C = l.div`
347
347
  padding: ${(e) => {
348
348
  var t;
349
349
  return (t = e.theme.sizes) == null ? void 0 : t.medium;
350
350
  }};
351
351
 
352
- ${(e) => e.noPadding && m`
352
+ ${(e) => e.noPadding && d`
353
353
  padding: 0;
354
354
  `}
355
355
 
@@ -360,7 +360,7 @@ const Le = ({ className: e }) => {
360
360
  &:last-child {
361
361
  margin-bottom: 0;
362
362
  }
363
- `, ee = ({ className: e, agentData: t }) => /* @__PURE__ */ n.createElement(D, null, /* @__PURE__ */ n.createElement(j, null, /* @__PURE__ */ n.createElement(G, null, /* @__PURE__ */ n.createElement(Ae, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null))))), Ne = l.p`
363
+ `, te = ({ className: e, agentData: t }) => /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(_, null, /* @__PURE__ */ n.createElement(q, null, /* @__PURE__ */ n.createElement(Ae, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null))))), Ne = l.p`
364
364
  && {
365
365
  font-size: ${(e) => {
366
366
  var t;
@@ -375,37 +375,37 @@ const Le = ({ className: e }) => {
375
375
  var t;
376
376
  return (t = e.theme.colors) == null ? void 0 : t.text;
377
377
  }};
378
- `, te = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), H = ({ className: e, name: t, timestamp: r }) => {
378
+ `, ne = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), F = ({ className: e, name: t, timestamp: r }) => {
379
379
  if (!t && !r)
380
380
  return null;
381
- let o = "";
382
- return t ? r ? o = `${t}: ${te(r)}` : o = t : r && (o = te(r)), /* @__PURE__ */ n.createElement(Ne, null, o);
383
- }, ue = ({ className: e, children: t, sender: r, timestamp: o }) => {
384
- const { avatar: c, name: g } = r, { avatarSize: u } = K();
381
+ let a = "";
382
+ return t ? r ? a = `${t}: ${ne(r)}` : a = t : r && (a = ne(r)), /* @__PURE__ */ n.createElement(Ne, null, a);
383
+ }, he = ({ className: e, children: t, sender: r, timestamp: a }) => {
384
+ const { avatar: i, name: p } = r, { avatarSize: f } = A();
385
385
  return /* @__PURE__ */ n.createElement(Oe, {
386
- hasAvatar: !!c,
387
- className: T(e, "humany-conversation-agent-message")
388
- }, c && /* @__PURE__ */ n.createElement(Pe, {
389
- avatarSize: u
390
- }, typeof c == "string" ? /* @__PURE__ */ n.createElement("img", {
391
- src: c
392
- }) : /* @__PURE__ */ n.createElement(M, {
393
- symbol: c
394
- })), t, /* @__PURE__ */ n.createElement(H, {
395
- name: g,
396
- timestamp: o
386
+ hasAvatar: !!i,
387
+ className: M(e, "humany-conversation-agent-message")
388
+ }, i && /* @__PURE__ */ n.createElement(Pe, {
389
+ avatarSize: f
390
+ }, typeof i == "string" ? /* @__PURE__ */ n.createElement("img", {
391
+ src: i
392
+ }) : /* @__PURE__ */ n.createElement(P, {
393
+ symbol: i
394
+ })), t, /* @__PURE__ */ n.createElement(F, {
395
+ name: p,
396
+ timestamp: a
397
397
  }));
398
398
  }, Oe = l.div`
399
399
  display: grid;
400
400
  margin-right: 0;
401
401
  width: 100%;
402
- ${(e) => e.hasAvatar ? m`
402
+ ${(e) => e.hasAvatar ? d`
403
403
  grid-template-columns: auto 1fr;
404
404
  grid-template-rows: 1fr auto;
405
405
  grid-template-areas:
406
406
  'avatar content'
407
407
  '. info';
408
- ` : m`
408
+ ` : d`
409
409
  grid-template-columns: 1fr;
410
410
  grid-template-rows: 1fr auto;
411
411
  grid-template-areas:
@@ -416,27 +416,27 @@ const Le = ({ className: e }) => {
416
416
  const t = ke(e.type);
417
417
  return t ? /* @__PURE__ */ n.createElement(Ce, {
418
418
  fallback: null
419
- }, /* @__PURE__ */ n.createElement(G, {
419
+ }, /* @__PURE__ */ n.createElement(q, {
420
420
  user: e.isUser,
421
421
  stacked: !!e.stacked && e.stacked,
422
422
  fullWidth: !!e.content.form || !!e.content.actions
423
- }, /* @__PURE__ */ n.createElement(w, {
423
+ }, /* @__PURE__ */ n.createElement(C, {
424
424
  noPadding: !!e.content.noPadding && e.content.noPadding
425
- }, /* @__PURE__ */ n.createElement(t, z({}, e.content))))) : null;
425
+ }, /* @__PURE__ */ n.createElement(t, w({}, e.content))))) : null;
426
426
  }, je = ({
427
427
  className: e,
428
428
  children: t,
429
429
  timestamp: r,
430
- discrete: o,
431
- fullWidth: c
430
+ discrete: a,
431
+ fullWidth: i
432
432
  }) => /* @__PURE__ */ n.createElement(Ue, {
433
- className: T(e, "humany-conversation-system-message"),
434
- fullWidth: c
435
- }, o ? /* @__PURE__ */ n.createElement(We, {
433
+ className: M(e, "humany-conversation-system-message"),
434
+ fullWidth: i
435
+ }, a ? /* @__PURE__ */ n.createElement(We, {
436
436
  className: "humany-conversation-discrete-message"
437
- }, t, /* @__PURE__ */ n.createElement(H, {
437
+ }, t, /* @__PURE__ */ n.createElement(F, {
438
438
  timestamp: r
439
- })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(H, {
439
+ })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(F, {
440
440
  timestamp: r
441
441
  }))), Ue = l.div`
442
442
  ${(e) => e.fullWidth && "width: 100%"};
@@ -460,11 +460,11 @@ const Le = ({ className: e }) => {
460
460
  margin: 0;
461
461
  }
462
462
  `, _e = ({ className: e, children: t, timestamp: r }) => {
463
- const { userLabel: o = "" } = K();
463
+ const { userLabel: a = "" } = A();
464
464
  return /* @__PURE__ */ n.createElement(Re, {
465
- className: T(e, "humany-conversation-user-message")
466
- }, t, /* @__PURE__ */ n.createElement(H, {
467
- name: o,
465
+ className: M(e, "humany-conversation-user-message")
466
+ }, t, /* @__PURE__ */ n.createElement(F, {
467
+ name: a,
468
468
  timestamp: r
469
469
  }));
470
470
  }, Re = l.div`
@@ -473,80 +473,80 @@ const Le = ({ className: e }) => {
473
473
  display: flex;
474
474
  flex-direction: column;
475
475
  align-items: flex-end;
476
- `, Ge = (e) => /* @__PURE__ */ n.createElement(ie, {
476
+ `, Ge = (e) => /* @__PURE__ */ n.createElement(ce, {
477
477
  attrs: e
478
- }), ne = {
478
+ }), re = {
479
479
  transform: {
480
480
  img: Ge
481
481
  }
482
- }, N = ({ content: e, isUser: t, stacked: r }) => {
483
- const o = U(), { title: c, body: g, actions: u, form: p, type: b, items: d } = e;
484
- return b ? /* @__PURE__ */ n.createElement(De, {
485
- type: b,
482
+ }, j = ({ content: e, isUser: t, stacked: r }) => {
483
+ const a = R(), { title: i, body: p, actions: f, form: h, type: $, items: c } = e;
484
+ return $ ? /* @__PURE__ */ n.createElement(De, {
485
+ type: $,
486
486
  content: e,
487
487
  isUser: t,
488
488
  stacked: r
489
- }) : /* @__PURE__ */ n.createElement(G, {
489
+ }) : /* @__PURE__ */ n.createElement(q, {
490
490
  noPadding: !0,
491
491
  user: t,
492
492
  stacked: !!r && r,
493
- fullWidth: !!p || !!u
494
- }, c && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(Be, {
493
+ fullWidth: !!h || !!f
494
+ }, i && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(Be, {
495
495
  variant: "h2"
496
- }, c)), g && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(re, {
497
- html: g,
498
- htmlParseInstruction: ne
499
- })), p && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(Ve, J(z({}, p), {
500
- onChange: (a, i) => {
501
- o("form", {
502
- data: i,
503
- formKey: p.schema.id,
504
- actionKey: a
496
+ }, i)), p && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(oe, {
497
+ html: p,
498
+ htmlParseInstruction: re
499
+ })), h && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(Ve, N(w({}, h), {
500
+ onChange: (o, u) => {
501
+ a("form", {
502
+ data: u,
503
+ formKey: h.schema.id,
504
+ actionKey: o
505
505
  });
506
506
  }
507
- }))), u && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(oe, {
508
- items: Object.keys(u).map((a) => ({ label: u[a], actionKey: a })),
509
- renderItem: (a) => /* @__PURE__ */ n.createElement("li", {
510
- key: a.actionKey
507
+ }))), f && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(ae, {
508
+ items: Object.keys(f).map((o) => ({ label: f[o], actionKey: o })),
509
+ renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
510
+ key: o.actionKey
511
511
  }, /* @__PURE__ */ n.createElement(Qe, {
512
512
  onClick: () => {
513
- o("action", a.actionKey);
513
+ a("action", o.actionKey);
514
514
  }
515
- }, a.label))
516
- })), d && /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(w, {
517
- key: X(),
515
+ }, o.label))
516
+ })), c && /* @__PURE__ */ n.createElement(ee, null, /* @__PURE__ */ n.createElement(C, {
517
+ key: Z(),
518
518
  noPadding: !0
519
- }, /* @__PURE__ */ n.createElement(oe, {
520
- items: d.map(([a, i]) => ({ type: a, content: i })),
521
- renderItem: (a) => {
522
- const i = X();
523
- switch (a.type) {
519
+ }, /* @__PURE__ */ n.createElement(ae, {
520
+ items: c.map(([o, u]) => ({ type: o, content: u })),
521
+ renderItem: (o) => {
522
+ const u = Z();
523
+ switch (o.type) {
524
524
  case E.Header:
525
525
  return /* @__PURE__ */ n.createElement(k, {
526
- key: i
527
- }, /* @__PURE__ */ n.createElement("strong", null, a.content));
526
+ key: u
527
+ }, /* @__PURE__ */ n.createElement("strong", null, o.content));
528
528
  case E.Text:
529
529
  return /* @__PURE__ */ n.createElement(k, {
530
- key: i
531
- }, /* @__PURE__ */ n.createElement("span", null, a.content));
530
+ key: u
531
+ }, /* @__PURE__ */ n.createElement("span", null, o.content));
532
532
  case E.HTML:
533
533
  return /* @__PURE__ */ n.createElement(k, {
534
- key: i
535
- }, /* @__PURE__ */ n.createElement(re, {
536
- html: a.content.body,
537
- htmlParseInstruction: ne
534
+ key: u
535
+ }, /* @__PURE__ */ n.createElement(oe, {
536
+ html: o.content.body,
537
+ htmlParseInstruction: re
538
538
  }));
539
539
  case E.Separator:
540
540
  return /* @__PURE__ */ n.createElement(k, {
541
- key: i,
541
+ key: u,
542
542
  noPadding: !0
543
543
  }, /* @__PURE__ */ n.createElement(Xe, null));
544
544
  case E.LinkList:
545
545
  return /* @__PURE__ */ n.createElement(k, {
546
- key: i
546
+ key: u
547
547
  }, /* @__PURE__ */ n.createElement(qe, {
548
- items: Object.keys(a.content.actions).map((s) => ({
549
- label: a.content.actions[s],
548
+ items: Object.keys(o.content.actions).map((s) => ({
549
+ label: o.content.actions[s],
550
550
  actionKey: s
551
551
  })),
552
552
  renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
@@ -554,9 +554,9 @@ const Le = ({ className: e }) => {
554
554
  }, /* @__PURE__ */ n.createElement(Je, {
555
555
  help: s.actionKey === "help",
556
556
  onClick: () => {
557
- o("action", s.actionKey);
557
+ a("action", s.actionKey);
558
558
  }
559
- }, s.label, s.actionKey === "help" && /* @__PURE__ */ n.createElement(M, {
559
+ }, s.label, s.actionKey === "help" && /* @__PURE__ */ n.createElement(P, {
560
560
  size: 14,
561
561
  symbol: {
562
562
  type: "Svg",
@@ -566,40 +566,40 @@ const Le = ({ className: e }) => {
566
566
  }));
567
567
  case E.ButtonList:
568
568
  return /* @__PURE__ */ n.createElement(k, {
569
- key: i
570
- }, /* @__PURE__ */ n.createElement(ae, {
571
- items: Object.keys(a.content.actions).map((s) => ({
572
- label: a.content.actions[s],
569
+ key: u
570
+ }, /* @__PURE__ */ n.createElement(le, {
571
+ items: Object.keys(o.content.actions).map((s) => ({
572
+ label: o.content.actions[s],
573
573
  actionKey: s
574
574
  })),
575
575
  renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
576
576
  key: s.actionKey
577
577
  }, /* @__PURE__ */ n.createElement(Ye, {
578
578
  onClick: () => {
579
- o("action", s.actionKey);
579
+ a("action", s.actionKey);
580
580
  }
581
581
  }, s.label))
582
582
  }));
583
583
  case E.NoGoodAlternative:
584
584
  return /* @__PURE__ */ n.createElement(k, {
585
- key: i
585
+ key: u
586
586
  }, /* @__PURE__ */ n.createElement(Ze, {
587
587
  onClick: () => {
588
- o("action", "help");
588
+ a("action", "help");
589
589
  }
590
- }, /* @__PURE__ */ n.createElement(M, {
590
+ }, /* @__PURE__ */ n.createElement(P, {
591
591
  size: 14,
592
592
  symbol: {
593
593
  type: "FontAwesome",
594
594
  content: "meh-o"
595
595
  }
596
- }), /* @__PURE__ */ n.createElement("span", null, a.content.body)));
596
+ }), /* @__PURE__ */ n.createElement("span", null, o.content.body)));
597
597
  case E.FeedbackList:
598
598
  return /* @__PURE__ */ n.createElement(k, {
599
- key: i
600
- }, /* @__PURE__ */ n.createElement(ae, {
601
- items: Object.keys(a.content.actions).map((s) => ({
602
- label: a.content.actions[s],
599
+ key: u
600
+ }, /* @__PURE__ */ n.createElement(le, {
601
+ items: Object.keys(o.content.actions).map((s) => ({
602
+ label: o.content.actions[s],
603
603
  actionKey: s
604
604
  })),
605
605
  renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
@@ -611,22 +611,22 @@ const Le = ({ className: e }) => {
611
611
  "data-selected": !0,
612
612
  "data-direction": "vertical",
613
613
  onClick: () => {
614
- o("action", s.actionKey);
614
+ a("action", s.actionKey);
615
615
  }
616
616
  }, /* @__PURE__ */ n.createElement(xe, {
617
617
  faIcon: s.actionKey == "yes" ? "smile-o" : "frown-o"
618
618
  }), /* @__PURE__ */ n.createElement("span", null, s.label)))
619
619
  }));
620
620
  default:
621
- return /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement("p", null, "Unknown message type"));
621
+ return /* @__PURE__ */ n.createElement(ee, null, /* @__PURE__ */ n.createElement("p", null, "Unknown message type"));
622
622
  }
623
623
  }
624
624
  }))));
625
- }, Ve = l(me)`
625
+ }, Ve = l(de)`
626
626
  & button.humany-form-component-button {
627
627
  ${(e) => {
628
628
  var t, r;
629
- return W({
629
+ return G({
630
630
  active: !1,
631
631
  primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
632
632
  secondaryColor: (r = e.theme.colors) == null ? void 0 : r.accent
@@ -649,7 +649,7 @@ const Le = ({ className: e }) => {
649
649
  }};
650
650
  }
651
651
  }
652
- `, re = l(_)`
652
+ `, oe = l(V)`
653
653
  white-space: pre-wrap;
654
654
  a {
655
655
  color: ${(e) => e.theme.colors.link};
@@ -660,7 +660,7 @@ const Le = ({ className: e }) => {
660
660
  }};
661
661
  }
662
662
  }
663
- `, oe = l(P)`
663
+ `, ae = l(B)`
664
664
  padding: 0;
665
665
  list-style: none;
666
666
  margin: 0 -${(e) => {
@@ -673,7 +673,7 @@ const Le = ({ className: e }) => {
673
673
  return (t = e.theme.sizes) == null ? void 0 : t.normal;
674
674
  }};
675
675
  }
676
- `, ae = l(P)`
676
+ `, le = l(B)`
677
677
  padding: 0;
678
678
  list-style: none;
679
679
  > li {
@@ -688,7 +688,7 @@ const Le = ({ className: e }) => {
688
688
  display: inline-block;
689
689
  }
690
690
  `, Ye = l.button`
691
- ${R};
691
+ ${Y};
692
692
  display: block;
693
693
  background-color: ${(e) => {
694
694
  var t;
@@ -699,13 +699,13 @@ const Le = ({ className: e }) => {
699
699
  &:focus {
700
700
  ${(e) => {
701
701
  var t;
702
- return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && m`
702
+ return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
703
703
  ${x}
704
704
  background-color: transparent;
705
705
  `;
706
706
  }}
707
707
  }
708
- `, qe = l(P)`
708
+ `, qe = l(B)`
709
709
  padding: 0;
710
710
  list-style: none;
711
711
  > li {
@@ -733,7 +733,7 @@ const Le = ({ className: e }) => {
733
733
 
734
734
  ${(e) => {
735
735
  var t, r;
736
- return e.help && m`
736
+ return e.help && d`
737
737
  color: ${(t = e.theme.colors) == null ? void 0 : t.text};
738
738
  text-decoration: underline;
739
739
 
@@ -744,7 +744,7 @@ const Le = ({ className: e }) => {
744
744
  `;
745
745
  }}
746
746
  `, Qe = l.button`
747
- ${R};
747
+ ${Y};
748
748
  display: block;
749
749
  background-color: ${(e) => {
750
750
  var t;
@@ -758,7 +758,7 @@ const Le = ({ className: e }) => {
758
758
  &:focus {
759
759
  ${(e) => {
760
760
  var t;
761
- return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && m`
761
+ return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
762
762
  ${x}
763
763
  background-color: transparent;
764
764
  `;
@@ -814,17 +814,17 @@ const Le = ({ className: e }) => {
814
814
  }
815
815
  ${(e) => {
816
816
  var t, r;
817
- return e["data-direction"] === "horizontal" && m`
817
+ return e["data-direction"] === "horizontal" && d`
818
818
  width: 225px;
819
819
  max-width: calc(50% - ${(t = e.theme.sizes) == null ? void 0 : t.large} - ${(r = e.theme.sizes) == null ? void 0 : r.small});
820
820
  `;
821
821
  }}
822
- ${(e) => e["data-direction"] === "vertical" && m`
822
+ ${(e) => e["data-direction"] === "vertical" && d`
823
823
  min-width: 150px;
824
824
  `}
825
825
  ${(e) => {
826
826
  var t;
827
- return W({
827
+ return G({
828
828
  active: e["data-selected"],
829
829
  primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
830
830
  secondaryColor: "#FFFFFF"
@@ -846,7 +846,7 @@ const Le = ({ className: e }) => {
846
846
  return (t = e.theme.colors) == null ? void 0 : t.primary;
847
847
  }} !important;
848
848
  }
849
- `, tt = (e) => /* @__PURE__ */ n.createElement(ie, {
849
+ `, tt = (e) => /* @__PURE__ */ n.createElement(ce, {
850
850
  attrs: e
851
851
  }), nt = {
852
852
  transform: {
@@ -856,64 +856,64 @@ const Le = ({ className: e }) => {
856
856
  className: e,
857
857
  timestamp: t,
858
858
  sender: r,
859
- type: o,
860
- content: c
859
+ type: a,
860
+ content: i
861
861
  }) => {
862
- U();
863
- const g = (d) => {
864
- let a;
865
- return c.length > 1 && (a = d === 0 ? "first" : d + 1 === c.length ? "last" : "middle"), a;
866
- }, u = () => /* @__PURE__ */ n.createElement(n.Fragment, null, c.map((d) => {
867
- const { key: a, body: i, title: s, form: v, actions: y } = d, $ = !!i && !s && !v && !y;
862
+ R();
863
+ const p = (c) => {
864
+ let o;
865
+ return i.length > 1 && (o = c === 0 ? "first" : c + 1 === i.length ? "last" : "middle"), o;
866
+ }, f = () => /* @__PURE__ */ n.createElement(n.Fragment, null, i.map((c) => {
867
+ const { key: o, body: u, title: s, form: v, actions: m } = c, b = !!u && !s && !v && !m;
868
868
  return /* @__PURE__ */ n.createElement(je, {
869
869
  className: e,
870
- key: a,
871
- discrete: $,
870
+ key: o,
871
+ discrete: b,
872
872
  timestamp: t,
873
- fullWidth: !!v || !!y
874
- }, $ && i ? /* @__PURE__ */ n.createElement(_, {
875
- html: i,
873
+ fullWidth: !!v || !!m
874
+ }, b && u ? /* @__PURE__ */ n.createElement(V, {
875
+ html: u,
876
876
  htmlParseInstruction: nt
877
- }) : /* @__PURE__ */ n.createElement(N, {
878
- content: d,
877
+ }) : /* @__PURE__ */ n.createElement(j, {
878
+ content: c,
879
879
  isUser: !1
880
880
  }));
881
- })), p = () => /* @__PURE__ */ n.createElement(ue, {
881
+ })), h = () => /* @__PURE__ */ n.createElement(he, {
882
882
  sender: r,
883
883
  timestamp: t,
884
884
  className: e
885
- }, /* @__PURE__ */ n.createElement(D, null, c.map((d, a) => /* @__PURE__ */ n.createElement(j, {
886
- key: d.key
887
- }, /* @__PURE__ */ n.createElement(N, {
888
- content: d,
885
+ }, /* @__PURE__ */ n.createElement(W, null, i.map((c, o) => /* @__PURE__ */ n.createElement(_, {
886
+ key: c.key
887
+ }, /* @__PURE__ */ n.createElement(j, {
888
+ content: c,
889
889
  isUser: !1,
890
- stacked: g(a)
891
- }))))), b = () => /* @__PURE__ */ n.createElement(_e, {
890
+ stacked: p(o)
891
+ }))))), $ = () => /* @__PURE__ */ n.createElement(_e, {
892
892
  timestamp: t,
893
893
  className: e
894
- }, /* @__PURE__ */ n.createElement(D, null, c.map((d, a) => /* @__PURE__ */ n.createElement(j, {
895
- key: d.key
896
- }, /* @__PURE__ */ n.createElement(N, {
897
- content: d,
894
+ }, /* @__PURE__ */ n.createElement(W, null, i.map((c, o) => /* @__PURE__ */ n.createElement(_, {
895
+ key: c.key
896
+ }, /* @__PURE__ */ n.createElement(j, {
897
+ content: c,
898
898
  isUser: !0,
899
- stacked: g(a)
899
+ stacked: p(o)
900
900
  })))));
901
- switch (o) {
902
- case B.System:
903
- return u();
904
- case B.Agent:
905
- return p();
906
- case B.User:
907
- return b();
901
+ switch (a) {
902
+ case D.System:
903
+ return f();
904
+ case D.Agent:
905
+ return h();
906
+ case D.User:
907
+ return $();
908
908
  default:
909
909
  return null;
910
910
  }
911
911
  };
912
- l(me)`
912
+ l(de)`
913
913
  & button.humany-form-component-button {
914
914
  ${(e) => {
915
915
  var t, r;
916
- return W({
916
+ return G({
917
917
  active: !1,
918
918
  primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
919
919
  secondaryColor: (r = e.theme.colors) == null ? void 0 : r.accent
@@ -938,7 +938,7 @@ l(me)`
938
938
  }
939
939
  }
940
940
  `;
941
- l(_)`
941
+ l(V)`
942
942
  white-space: pre-wrap;
943
943
 
944
944
  a {
@@ -951,7 +951,7 @@ l(_)`
951
951
  }
952
952
  }
953
953
  `;
954
- l(P)`
954
+ l(B)`
955
955
  padding: 0;
956
956
  list-style: none;
957
957
  margin: 0 -${(e) => {
@@ -966,7 +966,7 @@ l(P)`
966
966
  }
967
967
  `;
968
968
  l.button`
969
- ${R};
969
+ ${Y};
970
970
  display: block;
971
971
  background-color: ${(e) => {
972
972
  var t;
@@ -977,54 +977,55 @@ l.button`
977
977
  &:focus {
978
978
  ${(e) => {
979
979
  var t;
980
- return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && m`
980
+ return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
981
981
  ${x}
982
982
  background-color: transparent;
983
983
  `;
984
984
  }}
985
985
  }
986
986
  `;
987
- const pt = ({ className: e }) => {
988
- const t = ze(document.createElement("div")), [r, o] = se(!0), { messages: c, loading: g, typingActors: u } = K(), [p, b] = S(!1), d = Se((i, s = !0) => {
989
- if (i !== null && i.current !== null) {
990
- if (c && c.length === 1 && i.current.focus(), i.current.id.indexOf("typing_") !== -1 && o.current.scrollTopMax - o.current.scrollTop > i.current.clientHeight + 100)
987
+ const pt = (r) => {
988
+ var a = r, { className: e } = a, t = O(a, ["className"]);
989
+ const i = ze(document.createElement("div")), [p, f] = ie(!0), { messages: h, loading: $, typingActors: c } = A(), [o, u] = I(!1), s = Se((m, b = !0) => {
990
+ if (m !== null && m.current !== null) {
991
+ if (h && h.length === 1 && m.current.focus(), m.current.id.indexOf("typing_") !== -1 && f.current.scrollTopMax - f.current.scrollTop > m.current.clientHeight + 100)
991
992
  return;
992
993
  setTimeout(() => {
993
- i.current && i.current.scrollIntoView({
994
+ m.current && m.current.scrollIntoView({
994
995
  block: "end",
995
- behavior: s ? "smooth" : "auto"
996
+ behavior: b ? "smooth" : "auto"
996
997
  });
997
998
  }, 0);
998
999
  }
999
- }, [t]);
1000
- ce(() => {
1001
- p && d(t);
1002
- }, [c, u]), ve(() => {
1003
- b(!0), d(t, !1);
1000
+ }, [i]);
1001
+ me(() => {
1002
+ o && s(i);
1003
+ }, [h, c]), ve(() => {
1004
+ u(!0), s(i, !1);
1004
1005
  });
1005
- const a = () => u && u.length ? u.map((i, s) => /* @__PURE__ */ n.createElement(O, {
1006
- id: `typing_${i.name}`,
1007
- ref: u.length ? t : null,
1008
- key: `typing_${i.name}`
1009
- }, /* @__PURE__ */ n.createElement(ue, {
1006
+ const v = () => c && c.length ? c.map((m, b) => /* @__PURE__ */ n.createElement(U, {
1007
+ id: `typing_${m.name}`,
1008
+ ref: c.length ? i : null,
1009
+ key: `typing_${m.name}`
1010
+ }, /* @__PURE__ */ n.createElement(he, {
1010
1011
  timestamp: Date.now(),
1011
- sender: i
1012
- }, /* @__PURE__ */ n.createElement(ee, null)))) : null;
1013
- return /* @__PURE__ */ n.createElement(ot, {
1014
- className: T(e, "humany-conversation-component")
1015
- }, /* @__PURE__ */ n.createElement(at, {
1012
+ sender: m
1013
+ }, /* @__PURE__ */ n.createElement(te, null)))) : null;
1014
+ return /* @__PURE__ */ n.createElement(ot, N(w({}, t), {
1015
+ className: M(e, "humany-conversation-component")
1016
+ }), /* @__PURE__ */ n.createElement(at, {
1016
1017
  tabIndex: 0,
1017
- scrollableCss: r,
1018
- ref: o
1019
- }, c && c.length ? c.map((i, s) => {
1020
- const { type: v, timestamp: y, sender: $, content: f } = i;
1021
- return /* @__PURE__ */ n.createElement(O, {
1018
+ scrollableCss: p,
1019
+ ref: f
1020
+ }, h && h.length ? h.map((m, b) => {
1021
+ const { type: y, timestamp: z, sender: S, content: T } = m;
1022
+ return /* @__PURE__ */ n.createElement(U, {
1022
1023
  className: "humany-conversation-entry",
1023
1024
  tabIndex: -1,
1024
- key: `${v}_${$ == null ? void 0 : $.name}_${y}_${f[0].key}`,
1025
- ref: s + 1 < c.length || u.length ? null : t
1026
- }, /* @__PURE__ */ n.createElement(rt, z({}, i)));
1027
- }) : null, a(), g && /* @__PURE__ */ n.createElement(O, null, /* @__PURE__ */ n.createElement(ee, null))), /* @__PURE__ */ n.createElement(Le, null));
1025
+ key: `${y}_${S == null ? void 0 : S.name}_${z}_${T[0].key}`,
1026
+ ref: b + 1 < h.length || c.length ? null : i
1027
+ }, /* @__PURE__ */ n.createElement(rt, w({}, m)));
1028
+ }) : null, v(), $ && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(te, null))), /* @__PURE__ */ n.createElement(Le, null));
1028
1029
  }, ot = l.div`
1029
1030
  position: absolute;
1030
1031
  right: 0;
@@ -1050,7 +1051,7 @@ const pt = ({ className: e }) => {
1050
1051
  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
1051
1052
  }};
1052
1053
  }
1053
- `, O = l.div`
1054
+ `, U = l.div`
1054
1055
  margin: 0;
1055
1056
  margin-bottom: ${(e) => {
1056
1057
  var t;
@@ -1090,11 +1091,11 @@ const pt = ({ className: e }) => {
1090
1091
  font-weight: normal;
1091
1092
  }
1092
1093
 
1093
- ${we("h1", m`
1094
+ ${we("h1", d`
1094
1095
  font-weight: normal;
1095
1096
  `)}
1096
1097
  `;
1097
1098
  export {
1098
1099
  pt as default
1099
1100
  };
1100
- //# sourceMappingURL=conversation.3981560b.js.map
1101
+ //# sourceMappingURL=conversation.70c6987f.js.map