@telia-ace/widget-conversation 1.0.24 → 1.0.27

package/dist/conversation.70c6987f.js

@@ -0,0 +1,1101 @@
+var pe = Object.defineProperty, ye = Object.defineProperties;
+var be = Object.getOwnPropertyDescriptors;
+var K = Object.getOwnPropertySymbols;
+var Q = Object.prototype.hasOwnProperty, X = Object.prototype.propertyIsEnumerable;
+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) => {
+  for (var r in t || (t = {}))
+    Q.call(t, r) && J(e, r, t[r]);
+  if (K)
+    for (var r of K(t))
+      X.call(t, r) && J(e, r, t[r]);
+  return e;
+}, N = (e, t) => ye(e, be(t));
+var O = (e, t) => {
+  var r = {};
+  for (var a in e)
+    Q.call(e, a) && t.indexOf(a) < 0 && (r[a] = e[a]);
+  if (e != null && K)
+    for (var a of K(e))
+      t.indexOf(a) < 0 && X.call(e, a) && (r[a] = e[a]);
+  return r;
+};
+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";
+import { appendClassNames as M, uuid as Z } from "@telia-ace/widget-utilities";
+import n, { useState as I, useEffect as me, Suspense as Ce, Fragment as ee, useRef as ze, useCallback as Se } from "react";
+import l, { css as d, keyframes as Te } from "styled-components";
+import { FormComponent as de } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as E, ConversationMessageType as D } from "./index.js";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-services";
+import "@telia-ace/widget-plugins";
+const Le = ({ className: e }) => {
+  const [t, r] = I(""), [a, i] = I(!1), [p, f] = I(0), [h, $] = I(0), c = R(), {
+    inputPlaceholder: o = "Type your message",
+    inputHidden: u = !1,
+    inputDisabled: s = !1,
+    sendButtonLabel: v = "Send message",
+    inputMultiline: m = !0
+  } = A(), [b, y] = ie(!0);
+  me(() => {
+    if (y.current) {
+      const { lineHeight: g, maxHeight: H } = getComputedStyle(y.current);
+      if (g && g.indexOf("px") > -1) {
+        const L = g.split("px"), ge = parseInt(L[0], 10);
+        f(ge);
+        const fe = H.split("px");
+        $(parseInt(fe[0], 10));
+      }
+    }
+  }, [y.current]);
+  const z = (g) => {
+    !g.shiftKey || !m ? (g.preventDefault(), t && t.length > 0 && (c("user-submit", { text: t }), r(""), T(""))) : t.length < 1 && g.preventDefault();
+  }, S = (g) => {
+    if (m && y.current) {
+      const H = y.current.scrollHeight;
+      if (H > p) {
+        y.current.style.height = "auto";
+        let L = H;
+        g.length < 1 && (L = p), y.current.style.height = `${L}px`, L >= h ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
+      }
+    }
+  }, T = (g) => {
+    S(g), r(g), g && g.length > 0 && c("user-typing", { textLength: g.length });
+  };
+  return u ? null : /* @__PURE__ */ n.createElement(He, {
+    grow: m,
+    className: M("humany-conversation-input", e),
+    "data-has-focus": a,
+    scrollableCss: b
+  }, m ? /* @__PURE__ */ n.createElement(ue, {
+    value: t,
+    onChange: T,
+    onEnter: z,
+    disabled: s,
+    "aria-label": o,
+    placeholder: o,
+    onFocusChange: i,
+    type: "textarea",
+    rows: 1,
+    ref: y
+  }) : /* @__PURE__ */ n.createElement(Ie, {
+    value: t,
+    onChange: T,
+    onEnter: z,
+    disabled: s,
+    "aria-label": o,
+    placeholder: o,
+    onFocusChange: i
+  }), /* @__PURE__ */ n.createElement(Me, {
+    disabled: s,
+    onClick: z,
+    title: v,
+    "aria-label": v
+  }, /* @__PURE__ */ n.createElement(Ke, {
+    size: 22,
+    symbol: { type: "Svg", content: "send" },
+    hasContent: t && t.length
+  })));
+}, ue = l(se)`
+    resize: none;
+    flex: 1;
+    flex-shrink: 1;
+    min-height: 1.2em;
+    max-height: 148px;
+    line-height: 1.2em;
+    height: 1.2em;
+    padding: 0;
+    margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    border: none;
+    transition: height 200ms linear;
+    outline: none;
+`, Ie = l(se)`
+    flex: 1;
+    border: none;
+    background-color: transparent;
+    font-weight: 300;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    line-height: 1.2em;
+    outline: none;
+    padding-left: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    &::placeholder {
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.textLight;
+}};
+        font-style: italic;
+    }
+`, Me = l($e)`
+    flex: 0 0 50px;
+    align-self: stretch;
+    background-color: transparent;
+    border: none;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+    }
+`, He = l.div`
+    ${(e) => e.grow ? d`
+                  min-height: 50px;
+                  max-height: 150px;
+              ` : d`
+                  height: 50px;
+              `}
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.accent;
+}};
+    border-top: ${(e) => e.theme.inputBorder};
+    ${(e) => e["data-has-focus"] && d`
+            ${(t) => {
+  var r;
+  return ((r = t.theme.accessibility) == null ? void 0 : r.isTabbing) && x;
+}};
+        `}
+    ${ue} {
+        ${(e) => !!e.scrollableCss && e.scrollableCss}
+    }
+`, Ke = l((r) => {
+  var a = r, { hasContent: e } = a, t = O(a, ["hasContent"]);
+  return /* @__PURE__ */ n.createElement(P, w({}, t));
+})`
+    line,
+    path {
+        stroke: ${(e) => {
+  var t;
+  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
+}};
+        fill: ${(e) => {
+  var t;
+  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
+}};
+    }
+`, Pe = l.div`
+    width: ${(e) => e.avatarSize || "32px"};
+    height: ${(e) => e.avatarSize || "32px"};
+    border-radius: 50%;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.accent;
+}};
+    border: ${(e) => e.theme.border};
+    grid-area: avatar;
+    align-self: flex-end;
+    justify-self: center;
+    overflow: hidden;
+    margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+
+    > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    > svg {
+        width: 90%;
+        height: 90%;
+        padding: 10%;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+
+        line,
+        path,
+        circle,
+        fill {
+            stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        }
+    }
+`, Fe = Te`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`, Ae = l.div`
+    display: flex;
+    justify-content: center;
+    > div {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        margin: 5px;
+        background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        animation: ${Fe} 1s infinite;
+    }
+    > div:nth-child(2) {
+        animation-delay: 100ms;
+    }
+    > div:nth-child(3) {
+        animation-delay: 200ms;
+    }
+`, W = l.div`
+    grid-area: content;
+    max-width: 100%;
+    overflow: hidden;
+`, Be = l(Ee)`
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-weight: normal;
+    margin: 0;
+`, _ = l.div`
+    display: flex;
+`, q = l.div`
+    background-color: ${(e) => {
+  var t, r;
+  return e.user ? (t = e.theme.colors) == null ? void 0 : t.primary : (r = e.theme.colors) == null ? void 0 : r.accent;
+}};
+    color: ${(e) => {
+  var t, r;
+  return e.user ? (t = e.theme.colors) == null ? void 0 : t.accent : (r = e.theme.colors) == null ? void 0 : r.text;
+}};
+    border-radius: 5px; // TODO: prop?
+    margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    display: inline-block;
+    && > * {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        word-break: break-word;
+        hyphens: auto;
+    }
+    max-width: 100%;
+    ${(e) => e.fullWidth && "width: 100%;"}
+
+    ${(e) => !e.user && d`
+            border: ${e.theme.border};
+        `}
+  ${(e) => e.user && "margin-left: auto"};
+
+    ${(e) => e.stacked === "first" && e.user && d`
+            border-bottom-right-radius: 1px; // TODO: Prop?
+        `}
+    ${(e) => e.stacked === "middle" && e.user && d`
+            border-bottom-right-radius: 1px;
+            border-top-right-radius: 1px;
+        `}
+  ${(e) => e.stacked === "last" && e.user && d`
+            border-top-right-radius: 1px;
+        `}
+  ${(e) => e.stacked === "first" && !e.user && d`
+            border-bottom-left-radius: 1px;
+        `}
+  ${(e) => e.stacked === "middle" && !e.user && d`
+            border-bottom-left-radius: 1px;
+            border-top-left-radius: 1px;
+        `}
+  ${(e) => e.stacked === "last" && !e.user && d`
+            border-top-left-radius: 1px;
+        `};
+
+    ${(e) => !e.stacked && d`
+            ${e.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
+        `};
+
+    transition: border-radius 500ms linear;
+`, C = l.div`
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+
+    ${(e) => e.noPadding && d`
+            padding: 0;
+        `}
+
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`, 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`
+    && {
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.small;
+}};
+        font-weight: 300;
+    }
+    margin: 0;
+    line-height: 1.5em;
+    grid-area: info;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+`, ne = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), F = ({ className: e, name: t, timestamp: r }) => {
+  if (!t && !r)
+    return null;
+  let a = "";
+  return t ? r ? a = `${t}: ${ne(r)}` : a = t : r && (a = ne(r)), /* @__PURE__ */ n.createElement(Ne, null, a);
+}, he = ({ className: e, children: t, sender: r, timestamp: a }) => {
+  const { avatar: i, name: p } = r, { avatarSize: f } = A();
+  return /* @__PURE__ */ n.createElement(Oe, {
+    hasAvatar: !!i,
+    className: M(e, "humany-conversation-agent-message")
+  }, i && /* @__PURE__ */ n.createElement(Pe, {
+    avatarSize: f
+  }, typeof i == "string" ? /* @__PURE__ */ n.createElement("img", {
+    src: i
+  }) : /* @__PURE__ */ n.createElement(P, {
+    symbol: i
+  })), t, /* @__PURE__ */ n.createElement(F, {
+    name: p,
+    timestamp: a
+  }));
+}, Oe = l.div`
+    display: grid;
+    margin-right: 0;
+    width: 100%;
+    ${(e) => e.hasAvatar ? d`
+                  grid-template-columns: auto 1fr;
+                  grid-template-rows: 1fr auto;
+                  grid-template-areas:
+                      'avatar content'
+                      '. info';
+              ` : d`
+                  grid-template-columns: 1fr;
+                  grid-template-rows: 1fr auto;
+                  grid-template-areas:
+                      'content'
+                      'info';
+              `};
+`, De = (e) => {
+  const t = ke(e.type);
+  return t ? /* @__PURE__ */ n.createElement(Ce, {
+    fallback: null
+  }, /* @__PURE__ */ n.createElement(q, {
+    user: e.isUser,
+    stacked: !!e.stacked && e.stacked,
+    fullWidth: !!e.content.form || !!e.content.actions
+  }, /* @__PURE__ */ n.createElement(C, {
+    noPadding: !!e.content.noPadding && e.content.noPadding
+  }, /* @__PURE__ */ n.createElement(t, w({}, e.content))))) : null;
+}, je = ({
+  className: e,
+  children: t,
+  timestamp: r,
+  discrete: a,
+  fullWidth: i
+}) => /* @__PURE__ */ n.createElement(Ue, {
+  className: M(e, "humany-conversation-system-message"),
+  fullWidth: i
+}, a ? /* @__PURE__ */ n.createElement(We, {
+  className: "humany-conversation-discrete-message"
+}, t, /* @__PURE__ */ n.createElement(F, {
+  timestamp: r
+})) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(F, {
+  timestamp: r
+}))), Ue = l.div`
+    ${(e) => e.fullWidth && "width: 100%"};
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+    overflow: auto;
+`, We = l.div`
+    text-align: center;
+    word-wrap: break-word;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    > p {
+        margin: 0;
+    }
+`, _e = ({ className: e, children: t, timestamp: r }) => {
+  const { userLabel: a = "" } = A();
+  return /* @__PURE__ */ n.createElement(Re, {
+    className: M(e, "humany-conversation-user-message")
+  }, t, /* @__PURE__ */ n.createElement(F, {
+    name: a,
+    timestamp: r
+  }));
+}, Re = l.div`
+    margin-left: 15%;
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+`, Ge = (e) => /* @__PURE__ */ n.createElement(ce, {
+  attrs: e
+}), re = {
+  transform: {
+    img: Ge
+  }
+}, j = ({ content: e, isUser: t, stacked: r }) => {
+  const a = R(), { title: i, body: p, actions: f, form: h, type: $, items: c } = e;
+  return $ ? /* @__PURE__ */ n.createElement(De, {
+    type: $,
+    content: e,
+    isUser: t,
+    stacked: r
+  }) : /* @__PURE__ */ n.createElement(q, {
+    noPadding: !0,
+    user: t,
+    stacked: !!r && r,
+    fullWidth: !!h || !!f
+  }, i && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(Be, {
+    variant: "h2"
+  }, i)), p && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(oe, {
+    html: p,
+    htmlParseInstruction: re
+  })), h && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(Ve, N(w({}, h), {
+    onChange: (o, u) => {
+      a("form", {
+        data: u,
+        formKey: h.schema.id,
+        actionKey: o
+      });
+    }
+  }))), f && /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(ae, {
+    items: Object.keys(f).map((o) => ({ label: f[o], actionKey: o })),
+    renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
+      key: o.actionKey
+    }, /* @__PURE__ */ n.createElement(Qe, {
+      onClick: () => {
+        a("action", o.actionKey);
+      }
+    }, o.label))
+  })), c && /* @__PURE__ */ n.createElement(ee, null, /* @__PURE__ */ n.createElement(C, {
+    key: Z(),
+    noPadding: !0
+  }, /* @__PURE__ */ n.createElement(ae, {
+    items: c.map(([o, u]) => ({ type: o, content: u })),
+    renderItem: (o) => {
+      const u = Z();
+      switch (o.type) {
+        case E.Header:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement("strong", null, o.content));
+        case E.Text:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement("span", null, o.content));
+        case E.HTML:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement(oe, {
+            html: o.content.body,
+            htmlParseInstruction: re
+          }));
+        case E.Separator:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u,
+            noPadding: !0
+          }, /* @__PURE__ */ n.createElement(Xe, null));
+        case E.LinkList:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement(qe, {
+            items: Object.keys(o.content.actions).map((s) => ({
+              label: o.content.actions[s],
+              actionKey: s
+            })),
+            renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
+              key: s.actionKey
+            }, /* @__PURE__ */ n.createElement(Je, {
+              help: s.actionKey === "help",
+              onClick: () => {
+                a("action", s.actionKey);
+              }
+            }, s.label, s.actionKey === "help" && /* @__PURE__ */ n.createElement(P, {
+              size: 14,
+              symbol: {
+                type: "Svg",
+                content: "caret-down"
+              }
+            })))
+          }));
+        case E.ButtonList:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement(le, {
+            items: Object.keys(o.content.actions).map((s) => ({
+              label: o.content.actions[s],
+              actionKey: s
+            })),
+            renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
+              key: s.actionKey
+            }, /* @__PURE__ */ n.createElement(Ye, {
+              onClick: () => {
+                a("action", s.actionKey);
+              }
+            }, s.label))
+          }));
+        case E.NoGoodAlternative:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement(Ze, {
+            onClick: () => {
+              a("action", "help");
+            }
+          }, /* @__PURE__ */ n.createElement(P, {
+            size: 14,
+            symbol: {
+              type: "FontAwesome",
+              content: "meh-o"
+            }
+          }), /* @__PURE__ */ n.createElement("span", null, o.content.body)));
+        case E.FeedbackList:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: u
+          }, /* @__PURE__ */ n.createElement(le, {
+            items: Object.keys(o.content.actions).map((s) => ({
+              label: o.content.actions[s],
+              actionKey: s
+            })),
+            renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
+              key: s.actionKey
+            }, /* @__PURE__ */ n.createElement(et, {
+              className: "humany-feedback-button",
+              disabled: !1,
+              "aria-pressed": !0,
+              "data-selected": !0,
+              "data-direction": "vertical",
+              onClick: () => {
+                a("action", s.actionKey);
+              }
+            }, /* @__PURE__ */ n.createElement(xe, {
+              faIcon: s.actionKey == "yes" ? "smile-o" : "frown-o"
+            }), /* @__PURE__ */ n.createElement("span", null, s.label)))
+          }));
+        default:
+          return /* @__PURE__ */ n.createElement(ee, null, /* @__PURE__ */ n.createElement("p", null, "Unknown message type"));
+      }
+    }
+  }))));
+}, Ve = l(de)`
+    & button.humany-form-component-button {
+        ${(e) => {
+  var t, r;
+  return G({
+    active: !1,
+    primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
+    secondaryColor: (r = e.theme.colors) == null ? void 0 : r.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        }
+    }
+`, oe = l(V)`
+    white-space: pre-wrap;
+    a {
+        color: ${(e) => e.theme.colors.link};
+        &:focus {
+            ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+        }
+    }
+`, ae = l(B)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    > li {
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+`, le = l(B)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        margin-left: 0;
+        display: inline-block;
+    }
+`, Ye = l.button`
+    ${Y};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
+                ${x}
+                background-color: transparent;
+            `;
+}}
+    }
+`, qe = l(B)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+`, Je = l.button`
+    display: block;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    font-weight: 300;
+    font-family: inherit;
+    cursor: pointer;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+
+    ${(e) => {
+  var t, r;
+  return e.help && d`
+            color: ${(t = e.theme.colors) == null ? void 0 : t.text};
+            text-decoration: underline;
+
+            i,
+            svg {
+                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
+            }
+        `;
+}}
+`, Qe = l.button`
+    ${Y};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    font-family: Lato;
+    font-size: 1rem;
+    font-weight: 300;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
+                ${x}
+                background-color: transparent;
+            `;
+}}
+    }
+`, Xe = l.div`
+    background-color: #efefef;
+    height: 1px;
+    width: 100%;
+`, Ze = l.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    > i,
+    svg {
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    }
+`, k = l.li`
+    padding-left: ${(e) => {
+  var t;
+  return e.noPadding ? 0 : (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    padding-right: ${(e) => {
+  var t;
+  return e.noPadding ? 0 : (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+`, et = l.button`
+    display: inline-block;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    background-color: #ffffff !important;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    border-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    font-weight: 300;
+    && {
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    }
+    ${(e) => {
+  var t, r;
+  return e["data-direction"] === "horizontal" && d`
+            width: 225px;
+            max-width: calc(50% - ${(t = e.theme.sizes) == null ? void 0 : t.large} - ${(r = e.theme.sizes) == null ? void 0 : r.small});
+        `;
+}}
+    ${(e) => e["data-direction"] === "vertical" && d`
+            min-width: 150px;
+        `}
+  ${(e) => {
+  var t;
+  return G({
+    active: e["data-selected"],
+    primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
+    secondaryColor: "#FFFFFF"
+  });
+}}
+    i {
+        margin: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} 0 0;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    }
+    span {
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    }
+`, tt = (e) => /* @__PURE__ */ n.createElement(ce, {
+  attrs: e
+}), nt = {
+  transform: {
+    img: tt
+  }
+}, rt = ({
+  className: e,
+  timestamp: t,
+  sender: r,
+  type: a,
+  content: i
+}) => {
+  R();
+  const p = (c) => {
+    let o;
+    return i.length > 1 && (o = c === 0 ? "first" : c + 1 === i.length ? "last" : "middle"), o;
+  }, f = () => /* @__PURE__ */ n.createElement(n.Fragment, null, i.map((c) => {
+    const { key: o, body: u, title: s, form: v, actions: m } = c, b = !!u && !s && !v && !m;
+    return /* @__PURE__ */ n.createElement(je, {
+      className: e,
+      key: o,
+      discrete: b,
+      timestamp: t,
+      fullWidth: !!v || !!m
+    }, b && u ? /* @__PURE__ */ n.createElement(V, {
+      html: u,
+      htmlParseInstruction: nt
+    }) : /* @__PURE__ */ n.createElement(j, {
+      content: c,
+      isUser: !1
+    }));
+  })), h = () => /* @__PURE__ */ n.createElement(he, {
+    sender: r,
+    timestamp: t,
+    className: e
+  }, /* @__PURE__ */ n.createElement(W, null, i.map((c, o) => /* @__PURE__ */ n.createElement(_, {
+    key: c.key
+  }, /* @__PURE__ */ n.createElement(j, {
+    content: c,
+    isUser: !1,
+    stacked: p(o)
+  }))))), $ = () => /* @__PURE__ */ n.createElement(_e, {
+    timestamp: t,
+    className: e
+  }, /* @__PURE__ */ n.createElement(W, null, i.map((c, o) => /* @__PURE__ */ n.createElement(_, {
+    key: c.key
+  }, /* @__PURE__ */ n.createElement(j, {
+    content: c,
+    isUser: !0,
+    stacked: p(o)
+  })))));
+  switch (a) {
+    case D.System:
+      return f();
+    case D.Agent:
+      return h();
+    case D.User:
+      return $();
+    default:
+      return null;
+  }
+};
+l(de)`
+    & button.humany-form-component-button {
+        ${(e) => {
+  var t, r;
+  return G({
+    active: !1,
+    primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
+    secondaryColor: (r = e.theme.colors) == null ? void 0 : r.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        }
+    }
+`;
+l(V)`
+    white-space: pre-wrap;
+
+    a {
+        color: ${(e) => e.theme.colors.link};
+        &:focus {
+            ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+        }
+    }
+`;
+l(B)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    > li {
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+`;
+l.button`
+    ${Y};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
+                ${x}
+                background-color: transparent;
+            `;
+}}
+    }
+`;
+const pt = (r) => {
+  var a = r, { className: e } = a, t = O(a, ["className"]);
+  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) => {
+    if (m !== null && m.current !== null) {
+      if (h && h.length === 1 && m.current.focus(), m.current.id.indexOf("typing_") !== -1 && f.current.scrollTopMax - f.current.scrollTop > m.current.clientHeight + 100)
+        return;
+      setTimeout(() => {
+        m.current && m.current.scrollIntoView({
+          block: "end",
+          behavior: b ? "smooth" : "auto"
+        });
+      }, 0);
+    }
+  }, [i]);
+  me(() => {
+    o && s(i);
+  }, [h, c]), ve(() => {
+    u(!0), s(i, !1);
+  });
+  const v = () => c && c.length ? c.map((m, b) => /* @__PURE__ */ n.createElement(U, {
+    id: `typing_${m.name}`,
+    ref: c.length ? i : null,
+    key: `typing_${m.name}`
+  }, /* @__PURE__ */ n.createElement(he, {
+    timestamp: Date.now(),
+    sender: m
+  }, /* @__PURE__ */ n.createElement(te, null)))) : null;
+  return /* @__PURE__ */ n.createElement(ot, N(w({}, t), {
+    className: M(e, "humany-conversation-component")
+  }), /* @__PURE__ */ n.createElement(at, {
+    tabIndex: 0,
+    scrollableCss: p,
+    ref: f
+  }, h && h.length ? h.map((m, b) => {
+    const { type: y, timestamp: z, sender: S, content: T } = m;
+    return /* @__PURE__ */ n.createElement(U, {
+      className: "humany-conversation-entry",
+      tabIndex: -1,
+      key: `${y}_${S == null ? void 0 : S.name}_${z}_${T[0].key}`,
+      ref: b + 1 < h.length || c.length ? null : i
+    }, /* @__PURE__ */ n.createElement(rt, w({}, m)));
+  }) : null, v(), $ && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(te, null))), /* @__PURE__ */ n.createElement(Le, null));
+}, ot = l.div`
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`, at = l.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 0 1 100%;
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    ${(e) => !!e.scrollableCss && e.scrollableCss};
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+    }
+`, U = l.div`
+    margin: 0;
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+
+    &:first-of-type {
+        margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    }
+
+    &:last-of-type {
+        padding-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    }
+
+    * {
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    }
+
+    & span,
+    p,
+    a,
+    div {
+        font-weight: 300;
+    }
+
+    & b,
+    h1 {
+        font-weight: normal;
+    }
+
+    ${we("h1", d`
+            font-weight: normal;
+        `)}
+`;
+export {
+  pt as default
+};
+//# sourceMappingURL=conversation.70c6987f.js.map