@botonic/webchat-react 2.24.0 → 2.26.0

package/webchat-app-CLGvs-LL.js

@@ -0,0 +1,2518 @@
+import { jsx as t, jsxs as g, Fragment as ve } from "react/jsx-runtime";
+import Ce, { useState as B, useMemo as se, useEffect as P, forwardRef as $, useContext as ye, createContext as we, useRef as T, useCallback as h } from "react";
+import { cx as k, cva as A } from "class-variance-authority";
+import { WebchatController as Te, setupGlobalWebchatAPI as ke, isCloseWebviewMessage as Se, isWebviewPostMessage as Pe, WEBVIEW_MESSAGE_TYPES as J } from "@botonic/webchat-core";
+import { useSelector as E } from "@xstate/react";
+import { WebchatMessageFactory as $e, MessageSentBy as oe } from "@botonic/shared";
+function Le(e) {
+  const [n, s] = B(""), a = se(() => {
+    console.log("🏗️ Creating WebchatController with config:", e);
+    const i = new Te(e);
+    return i.initialize().catch((b) => {
+      console.error("❌ Failed to initialize webchat:", b);
+    }), i;
+  }, [e.appId]), l = E(
+    a.machine,
+    (i) => {
+      const b = i.context.messageActors;
+      return b ? Array.from(b.values()) : [];
+    }
+  ), u = E(
+    a.machine,
+    (i) => i.context.isOpen || !1
+  ), o = E(
+    a.machine,
+    (i) => i.matches("operational")
+  ), d = E(
+    a.machine,
+    (i) => i.matches("connectionFailed")
+  ), r = E(
+    a.machine,
+    (i) => i.context.connectionStatus || "disconnected"
+  ), m = E(
+    a.machine,
+    (i) => i.context.overlayActor
+  ), c = E(
+    m,
+    (i) => i.context.overlayState
+  );
+  return P(() => (ke(a), () => {
+    console.log("🧹 Cleaning up webchat controller"), a.destroy();
+  }), [a]), {
+    // Framework-agnostic controller - all webchat functionality
+    controller: a,
+    // React-specific UI state (minimal)
+    inputValue: n,
+    setInputValue: s,
+    // XState machine state (direct from machine via useSelector)
+    isOpen: u,
+    isInitialized: o,
+    initializationError: d,
+    messageActors: l,
+    connectionStatus: r,
+    // Overlay state (webview or cover component)
+    overlayState: c,
+    // Configuration
+    avatarConfig: e.avatarConfig,
+    // Custom messages
+    customMessages: e.customMessages
+  };
+}
+const Ne = we(null), Ee = $(({ children: e, ...n }, s) => {
+  const a = Le(n);
+  Ce.useImperativeHandle(s, () => a.controller, [a.controller]);
+  const l = {
+    state: a,
+    controller: a.controller
+    // Direct access to controller
+  };
+  return /* @__PURE__ */ t(Ne.Provider, { value: l, children: e });
+});
+function ee() {
+  const e = ye(Ne);
+  if (!e)
+    throw new Error("useWebchatContext must be used within a WebchatProvider");
+  return e;
+}
+const De = "button-component-module__buttonComponent___KMwSR", Ae = "button-component-module__secondary___TTpBp", ze = "button-component-module__primary___bD2jQ", ue = {
+  buttonComponent: De,
+  secondary: Ae,
+  primary: ze
+}, ie = $(
+  ({
+    text: e,
+    disabled: n = !1,
+    onClick: s,
+    button: a,
+    className: l,
+    variant: u = "secondary"
+  }, o) => /* @__PURE__ */ t(
+    "button",
+    {
+      ref: o,
+      disabled: n,
+      onClick: (r) => {
+        r.preventDefault(), r.stopPropagation(), s?.(a);
+      },
+      className: k(
+        ue.buttonComponent,
+        u === "primary" && ue.primary,
+        u === "secondary" && ue.secondary,
+        l
+      ),
+      type: "button",
+      children: e
+    }
+  )
+), Re = "confirm-modal-module__overlay___rRE3G", Oe = "confirm-modal-module__modal___AliW3", Ve = "confirm-modal-module__title___nOVLU", We = "confirm-modal-module__message___NiTmg", He = "confirm-modal-module__buttons___T9sSa", te = {
+  overlay: Re,
+  modal: Oe,
+  title: Ve,
+  message: We,
+  buttons: He
+};
+function je(e) {
+  return e === !1 || e === void 0 ? null : e === !0 ? {
+    message: "Are you sure you want to close?"
+  } : typeof e == "string" ? {
+    message: e
+  } : e;
+}
+const Fe = ({
+  config: e,
+  onConfirm: n,
+  onCancel: s
+}) => {
+  const a = T(null), l = T(null), u = je(e);
+  P(() => {
+    a.current?.focus();
+  }, []), P(() => {
+    const c = (i) => {
+      i.key === "Escape" && (i.stopPropagation(), s());
+    };
+    return window.addEventListener("keydown", c, !0), () => {
+      window.removeEventListener("keydown", c, !0);
+    };
+  }, [s]);
+  const o = h((c) => {
+    if (c.key === "Tab") {
+      const i = l.current?.querySelectorAll(
+        "button:not([disabled])"
+      );
+      if (!i?.length) return;
+      const b = i[0], C = i[i.length - 1];
+      c.shiftKey ? document.activeElement === b && (c.preventDefault(), C.focus()) : document.activeElement === C && (c.preventDefault(), b.focus());
+    }
+  }, []);
+  if (!u)
+    return null;
+  const d = u.title || "Close?", r = u.confirmText || "Close", m = u.cancelText || "Cancel";
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: te.overlay,
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-labelledby": "confirm-close-title",
+      "aria-describedby": "confirm-close-message",
+      onClick: s,
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          ref: l,
+          className: te.modal,
+          onClick: (c) => c.stopPropagation(),
+          onKeyDown: o,
+          children: [
+            /* @__PURE__ */ t("h3", { id: "confirm-close-title", className: te.title, children: d }),
+            /* @__PURE__ */ t("p", { id: "confirm-close-message", className: te.message, children: u.message }),
+            /* @__PURE__ */ g("div", { className: te.buttons, children: [
+              /* @__PURE__ */ t(
+                ie,
+                {
+                  text: m,
+                  button: { text: "cancel", value: "cancel" },
+                  onClick: s,
+                  variant: "secondary"
+                }
+              ),
+              /* @__PURE__ */ t(
+                ie,
+                {
+                  ref: a,
+                  text: r,
+                  button: { text: "confirm", value: "confirm" },
+                  onClick: n,
+                  variant: "primary"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}, Me = we(null);
+function le() {
+  const e = ye(Me);
+  if (!e)
+    throw new Error("useOverlayContext must be used within an Overlay");
+  return e;
+}
+const Ue = "cover-frame-module__base___e38vU", Ye = "cover-frame-module__errorContainer___o19mQ", Ke = "cover-frame-module__errorText___ltF9m", de = {
+  base: Ue,
+  errorContainer: Ye,
+  errorText: Ke
+}, he = A(de.base);
+function Xe({ className: e }) {
+  const { overlayState: n, coverRegistry: s, setIsLoading: a } = le();
+  if (P(() => {
+    n?.type === "cover" && a(!1);
+  }, [n?.type, a]), !n || n.type !== "cover")
+    return null;
+  const l = n, u = s?.[l.componentId];
+  return u ? /* @__PURE__ */ t("div", { className: he({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ t(u, { ...l.props || {} }) }) : (console.warn(
+    `[OverlayCoverFrame] Component "${l.componentId}" not found in registry. Available components: ${Object.keys(s || {}).join(", ") || "none"}`
+  ), /* @__PURE__ */ t("div", { className: he({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ t("div", { className: de.errorContainer, children: /* @__PURE__ */ g("p", { className: de.errorText, children: [
+    'Component "',
+    l.componentId,
+    '" not found'
+  ] }) }) }));
+}
+const qe = "webview-frame-module__base___u5SZG", Ge = "webview-frame-module__loadingContainer___eqQ-L", Qe = "webview-frame-module__spinner___5gsaP", Ze = "webview-frame-module__iframe___XewWc", re = {
+  base: qe,
+  loadingContainer: Ge,
+  spinner: Qe,
+  iframe: Ze
+}, Je = A(re.base);
+function et({ className: e }) {
+  const { overlayState: n, sandboxPermissions: s, isLoading: a, setIsLoading: l } = le(), u = h(() => {
+    l(!1);
+  }, [l]);
+  if (!n || n.type !== "webview")
+    return null;
+  const o = n;
+  return /* @__PURE__ */ g("div", { className: Je({ className: e }), "data-overlay-webview-frame": !0, children: [
+    a && /* @__PURE__ */ t("div", { className: re.loadingContainer, children: /* @__PURE__ */ t("div", { className: re.spinner, "aria-label": "Loading webview" }) }),
+    /* @__PURE__ */ t(
+      "iframe",
+      {
+        src: o.url,
+        className: re.iframe,
+        sandbox: s,
+        title: o.title || "Webview",
+        onLoad: u,
+        style: { opacity: a ? 0 : 1 }
+      }
+    )
+  ] });
+}
+function tt({ className: e }) {
+  const { overlayState: n } = le();
+  if (!n)
+    return null;
+  switch (n.type) {
+    case "webview":
+      return /* @__PURE__ */ t(et, { className: e });
+    case "cover":
+      return /* @__PURE__ */ t(Xe, { className: e });
+    default:
+      return null;
+  }
+}
+const nt = "header-module__base___WYM0o", st = "header-module__minimal___6nq5w", at = "header-module__titleContainer___56hi4", ot = "header-module__icon___BCSbe", rt = "header-module__title___0c-LL", it = "header-module__closeButton___wOwC8", Q = {
+  base: nt,
+  default: "header-module__default___z7D3c",
+  minimal: st,
+  titleContainer: at,
+  icon: ot,
+  title: rt,
+  closeButton: it
+};
+function lt(e, n) {
+  const s = n?.title || "Overlay", a = n?.icon, l = n?.allowClose !== !1;
+  return {
+    title: s,
+    icon: a,
+    showClose: l,
+    variants: {
+      variant: e.variant || "default"
+    }
+  };
+}
+const ct = A(Q.base, {
+  variants: {
+    variant: {
+      default: Q.default,
+      minimal: Q.minimal
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function ut(e) {
+  const { overlayState: n, attemptClose: s } = le(), { showClose: a, title: l, icon: u, variants: o } = lt(
+    e,
+    n
+  );
+  return /* @__PURE__ */ g("header", { className: ct(o), "data-overlay-header": !0, children: [
+    /* @__PURE__ */ g("div", { className: Q.titleContainer, children: [
+      u && /* @__PURE__ */ t("span", { className: Q.icon, children: u }),
+      /* @__PURE__ */ t("h4", { className: Q.title, children: l })
+    ] }),
+    a && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: Q.closeButton,
+        onClick: s,
+        "aria-label": "Close overlay",
+        children: "×"
+      }
+    )
+  ] });
+}
+const dt = "overlay-module__base___qm4j7", mt = "overlay-module__loading___8U4v9", be = {
+  base: dt,
+  loading: mt
+};
+function _t(e, n) {
+  const [s, a] = B(!0), [l, u] = B(!1), o = h(() => {
+    e?.confirmClose ? u(!0) : n.onClose();
+  }, [n, e?.confirmClose]), d = h(() => {
+    u(!1), n.onClose();
+  }, [n]), r = h(() => {
+    u(!1);
+  }, []);
+  return P(() => {
+    e?.isOpen && e?.type === "webview" && a(!0);
+  }, [e?.isOpen, e?.type]), P(() => {
+    e?.type === "webview" && a(!0);
+  }, [e?.type === "webview" ? e.url : null]), P(() => {
+    if (e?.type !== "webview")
+      return;
+    const m = (c) => {
+      if (Se(c.data)) {
+        o();
+        return;
+      }
+      if (Pe(c.data)) {
+        const i = c.data;
+        switch (i.type) {
+          case J.SET_TITLE:
+            n.onSetTitle(i.title);
+            break;
+          case J.SET_ICON:
+            n.onSetIcon(i.icon);
+            break;
+          case J.SET_ALLOW_CLOSE:
+            n.onSetAllowClose(i.allow);
+            break;
+          case J.SET_CONFIRM_CLOSE:
+            n.onSetConfirmClose(i.config);
+            break;
+          case J.SEND_PAYLOAD:
+            n.onSendPayload(i.payload);
+            break;
+          case J.NAVIGATE:
+            n.onNavigate(i.url);
+            break;
+        }
+      }
+    };
+    return window.addEventListener("message", m), () => {
+      window.removeEventListener("message", m);
+    };
+  }, [n, o, e?.type]), P(() => {
+    if (l) return;
+    const m = (c) => {
+      c.key === "Escape" && e?.isOpen && e?.allowClose !== !1 && o();
+    };
+    return window.addEventListener("keydown", m), () => {
+      window.removeEventListener("keydown", m);
+    };
+  }, [
+    o,
+    l,
+    e?.isOpen,
+    e?.allowClose
+  ]), {
+    isLoading: s,
+    setIsLoading: a,
+    showConfirmModal: l,
+    setShowConfirmModal: u,
+    attemptClose: o,
+    handleConfirmClose: d,
+    handleCancelClose: r,
+    variants: { isLoading: s }
+  };
+}
+const gt = "allow-scripts allow-forms allow-same-origin allow-popups", ht = A(be.base, {
+  variants: {
+    isLoading: {
+      true: be.loading
+    }
+  }
+});
+function bt({
+  overlayState: e,
+  onClose: n,
+  onSetTitle: s,
+  onSetIcon: a,
+  onSetAllowClose: l,
+  onSetConfirmClose: u,
+  onSendPayload: o,
+  onNavigate: d,
+  coverRegistry: r,
+  children: m
+}) {
+  const c = {
+    onClose: n,
+    onSetTitle: s,
+    onSetIcon: a,
+    onSetAllowClose: l,
+    onSetConfirmClose: u,
+    onSendPayload: o,
+    onNavigate: d
+  }, {
+    isLoading: i,
+    setIsLoading: b,
+    showConfirmModal: C,
+    setShowConfirmModal: _,
+    attemptClose: f,
+    handleConfirmClose: v,
+    handleCancelClose: p,
+    variants: w
+  } = _t(e, c);
+  if (!e?.isOpen)
+    return null;
+  const M = {
+    overlayState: e,
+    ...c,
+    sandboxPermissions: gt,
+    isLoading: i,
+    setIsLoading: b,
+    attemptClose: f,
+    showConfirmModal: C,
+    setShowConfirmModal: _,
+    coverRegistry: r
+  };
+  return /* @__PURE__ */ t(Me.Provider, { value: M, children: /* @__PURE__ */ g("div", { className: ht(w), "data-overlay": !0, children: [
+    m || /* @__PURE__ */ g(ve, { children: [
+      /* @__PURE__ */ t(ut, {}),
+      /* @__PURE__ */ t(tt, {})
+    ] }),
+    C && e.confirmClose && /* @__PURE__ */ t(
+      Fe,
+      {
+        config: e.confirmClose,
+        onConfirm: v,
+        onCancel: p
+      }
+    )
+  ] }) });
+}
+function ft(e, n, s) {
+  const {
+    layout: a = "default",
+    size: l = "normal",
+    position: u = "bottom-right",
+    "aria-label": o = "Webchat interface",
+    className: d,
+    coverRegistry: r,
+    // Exclude from DOM props
+    ...m
+  } = e, c = E(n.controller.machine, (p) => p.context.isOpen || !1), [i, b] = B(null), [C, _] = B(!1), f = T(!1), v = h(
+    (p) => {
+      p.target === p.currentTarget && i !== null && (i === "closing" && _(!1), b(null));
+    },
+    [i]
+  );
+  return P(() => {
+    const p = f.current;
+    f.current = c, p === !1 && c ? (_(!0), b("opening")) : p === !0 && !c && b("closing");
+  }, [c]), {
+    // Component visibility - stays true during close animation
+    shouldRender: C,
+    // Container element props
+    containerProps: {
+      ref: s,
+      role: "dialog",
+      "aria-label": o,
+      "aria-live": "polite",
+      "data-testid": "webchat-container",
+      "data-layout": a,
+      "data-size": l,
+      tabIndex: -1,
+      onAnimationEnd: v,
+      ...m
+    },
+    // CSS class variants
+    variants: {
+      layout: a,
+      size: l,
+      position: u,
+      isOpen: c,
+      isOpening: i === "opening",
+      isClosing: i === "closing",
+      className: d
+    }
+  };
+}
+const pt = "webchat-container-module__base___-nEHI", V = {
+  base: pt,
+  "is-open": "webchat-container-module__is-open___y7UjX",
+  default: "webchat-container-module__default___Zl33C",
+  "position-bottom-right": "webchat-container-module__position-bottom-right___NIW0p",
+  "position-bottom-left": "webchat-container-module__position-bottom-left___gatKC",
+  "position-top-right": "webchat-container-module__position-top-right___DKI8J",
+  "position-top-left": "webchat-container-module__position-top-left___ehR4d",
+  "is-opening": "webchat-container-module__is-opening___5Ot9W",
+  "is-closing": "webchat-container-module__is-closing___o0hqs"
+}, vt = A(V.base, {
+  variants: {
+    layout: {
+      default: V.default
+    },
+    position: {
+      "bottom-right": V["position-bottom-right"],
+      "bottom-left": V["position-bottom-left"],
+      "top-right": V["position-top-right"],
+      "top-left": V["position-top-left"]
+    },
+    isOpen: {
+      true: V["is-open"]
+    },
+    isOpening: {
+      true: V["is-opening"]
+    },
+    isClosing: {
+      true: V["is-closing"]
+    }
+  },
+  defaultVariants: {
+    layout: "default",
+    position: "bottom-right"
+  }
+});
+function Ct(e) {
+  const { state: n, controller: s } = ee(), a = T(null), { shouldRender: l, containerProps: u, variants: o } = ft(
+    e,
+    n,
+    a
+  ), {
+    children: d,
+    coverRegistry: r,
+    layout: m,
+    size: c,
+    position: i,
+    ...b
+  } = e, C = h(
+    () => s.overlay.close(),
+    [s]
+  ), _ = h(
+    (y) => s.overlay.setTitle(y),
+    [s]
+  ), f = h(
+    (y) => s.overlay.setIcon(y),
+    [s]
+  ), v = h(
+    (y) => s.overlay.setAllowClose(y),
+    [s]
+  ), p = h(
+    (y) => s.overlay.setConfirmClose(y),
+    [s]
+  ), w = h(
+    (y) => s.overlay.sendPayload(y),
+    [s]
+  ), M = h(
+    (y) => s.overlay.navigate(y),
+    [s]
+  );
+  return l ? /* @__PURE__ */ g(
+    "div",
+    {
+      ...u,
+      ...b,
+      className: vt(o),
+      "data-testid": "webchat-container",
+      children: [
+        d,
+        /* @__PURE__ */ t(
+          bt,
+          {
+            overlayState: n.overlayState,
+            onClose: C,
+            onSetTitle: _,
+            onSetIcon: f,
+            onSetAllowClose: v,
+            onSetConfirmClose: p,
+            onSendPayload: w,
+            onNavigate: M,
+            coverRegistry: r
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+function yt(e, n, s) {
+  const {
+    title: a = "Chat",
+    showStatus: l = !0,
+    showClose: u = !0,
+    onClose: o,
+    variant: d = "default",
+    "aria-label": r,
+    className: m,
+    ...c
+  } = e, i = E(
+    n.controller.machine,
+    (f) => f.context.connectionStatus || "disconnected"
+  ), b = h(() => {
+    o ? o() : n.controller.close();
+  }, [o, n.controller]), C = h((f) => {
+    switch (f) {
+      case "connected":
+        return "Online";
+      case "connecting":
+        return "Connecting...";
+      case "disconnected":
+        return "Offline";
+      case "unavailable":
+        return "Connection unstable";
+      case "error":
+        return "Connection error";
+      default:
+        return "Offline";
+    }
+  }, []), _ = l ? C(i) : void 0;
+  return {
+    // Header element props
+    headerProps: {
+      ...c,
+      ref: s,
+      "aria-label": r || `${a} header`
+    },
+    // Header content
+    title: a,
+    showStatus: l,
+    statusText: _,
+    showClose: u,
+    onClose: b,
+    connectionStatus: i,
+    // CSS class variants
+    variants: {
+      variant: d,
+      className: m
+    }
+  };
+}
+const wt = "webchat-header-module__base___VbIWd", Nt = "webchat-header-module__minimal___rloXK", O = {
+  base: wt,
+  "header-content": "webchat-header-module__header-content___bPP9l",
+  "header-text": "webchat-header-module__header-text___64Yj9",
+  "header-title": "webchat-header-module__header-title___QHcHi",
+  "status-section": "webchat-header-module__status-section___TlGf-",
+  "status-text": "webchat-header-module__status-text___fTZvQ",
+  "status-dot": "webchat-header-module__status-dot___rjbA2",
+  "close-button": "webchat-header-module__close-button___ggJh9",
+  minimal: Nt
+}, Mt = A(O.base, {
+  variants: {
+    variant: {
+      default: O.default,
+      minimal: O.minimal
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function xt(e) {
+  const { state: n } = ee(), s = T(null), {
+    headerProps: a,
+    title: l,
+    showStatus: u,
+    statusText: o,
+    showClose: d,
+    onClose: r,
+    connectionStatus: m,
+    variants: c
+  } = yt(e, n, s), { ...i } = e;
+  return /* @__PURE__ */ t(
+    "header",
+    {
+      ...a,
+      ...i,
+      className: Mt(c),
+      "data-webchat-header": !0,
+      children: /* @__PURE__ */ g("div", { className: O["header-content"], children: [
+        /* @__PURE__ */ g("div", { className: O["header-text"], children: [
+          /* @__PURE__ */ t("h3", { className: O["header-title"], children: l }),
+          u && /* @__PURE__ */ g("div", { className: O["status-section"], children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: O["status-dot"],
+                "data-status": m,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: O["status-text"], children: o })
+          ] })
+        ] }),
+        d && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: r,
+            className: O["close-button"],
+            "aria-label": "Close chat",
+            children: "×"
+          }
+        )
+      ] })
+    }
+  );
+}
+const me = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512",
+  fill: "currentColor",
+  role: "img",
+  "aria-hidden": !0
+};
+function It() {
+  return /* @__PURE__ */ t("svg", { ...me, viewBox: "0 0 448 512", children: /* @__PURE__ */ t("path", { d: "M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z" }) });
+}
+function Bt() {
+  return /* @__PURE__ */ t("svg", { ...me, children: /* @__PURE__ */ t("path", { d: "M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }) });
+}
+function Tt() {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      role: "img",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ t("path", { d: "M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" })
+    }
+  );
+}
+function kt() {
+  return /* @__PURE__ */ t("svg", { ...me, children: /* @__PURE__ */ t("path", { d: "M57.6 35.8C23.1 20.6-11.3 57.4 6.1 90.9l63 121.2c4.4 8.4 12.6 14.1 22 15.3L266 249.3c3.4 .4 6 3.3 6 6.7s-2.6 6.3-6 6.7L91.1 284.6c-9.4 1.2-17.6 6.9-22 15.3L6.1 421.1c-17.4 33.5 17 70.2 51.6 55.1L492.9 285.3c25.5-11.2 25.5-47.4 0-58.6L57.6 35.8z" }) });
+}
+function St(e, n, s) {
+  const { controller: a } = ee(), {
+    placeholder: l = "Message...",
+    disabled: u,
+    variant: o = "default",
+    showBranding: d = !0,
+    "aria-label": r,
+    className: m,
+    onEmojiClick: c,
+    onAttachmentClick: i,
+    onMicrophoneClick: b,
+    ...C
+  } = e, [_, f] = B(""), v = T(""), p = _.trim().length > 0, w = h(() => {
+    const N = v.current.trim();
+    if (N) {
+      const D = $e.createText({
+        text: N,
+        metadata: {
+          sent_by: oe.User
+        }
+      });
+      a.sendMessage(D), v.current = "", f("");
+    }
+  }, [a]), M = h(
+    (N) => {
+      N.preventDefault(), w();
+    },
+    [w]
+  ), y = h(
+    (N) => {
+      const D = N.target.value;
+      v.current = D, f(D);
+    },
+    []
+  ), z = h(
+    (N) => {
+      N.key === "Enter" && !N.shiftKey && (N.preventDefault(), w());
+    },
+    [w]
+  );
+  return {
+    // Input wrapper props
+    inputProps: {
+      ...C,
+      ref: s,
+      "aria-label": r || l,
+      "data-webchat-input": ""
+    },
+    // Form state and handlers
+    inputValue: _,
+    hasText: p,
+    handleSubmit: M,
+    handleInputChange: y,
+    handleKeyDown: z,
+    onEmojiClick: c,
+    onAttachmentClick: i,
+    onMicrophoneClick: b,
+    // Input field props
+    fieldProps: {
+      value: _,
+      onChange: y,
+      onKeyDown: z,
+      placeholder: l,
+      disabled: u,
+      rows: 1
+    },
+    // Single primary-action button: submit when text exists, mic otherwise
+    primaryActionProps: {
+      type: p ? "submit" : "button",
+      disabled: !!u,
+      "aria-label": p ? "Send message" : "Record voice message"
+    },
+    // CSS class variants
+    variants: {
+      variant: o,
+      className: m
+    },
+    isInputDisabled: u,
+    showBranding: d
+  };
+}
+const Pt = "webchat-input-module__base___TZXU7", $t = "webchat-input-module__branding___ReLzJ", I = {
+  default: "webchat-input-module__default___tHS5e",
+  base: Pt,
+  "input-form": "webchat-input-module__input-form___GnKc7",
+  branding: $t,
+  "input-field": "webchat-input-module__input-field___c4r26",
+  "primary-action-base": "webchat-input-module__primary-action-base___UfC2U",
+  "primary-action-send": "webchat-input-module__primary-action-send___3ZCtv",
+  "primary-action-mic": "webchat-input-module__primary-action-mic___cB0BZ",
+  "icon-slot": "webchat-input-module__icon-slot___VBqqX",
+  "icon-face": "webchat-input-module__icon-face___9gNV-",
+  "icon-send": "webchat-input-module__icon-send___iTZQ1",
+  "action-button": "webchat-input-module__action-button___QnDXK",
+  "icon-mic": "webchat-input-module__icon-mic___m8zbn",
+  "input-container": "webchat-input-module__input-container___N2B7J",
+  "action-bar": "webchat-input-module__action-bar___gEuJH"
+}, Lt = A(I.base, {
+  variants: {
+    variant: {
+      default: I.default
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Et(e) {
+  const { state: n } = ee(), s = T(null), {
+    inputProps: a,
+    handleSubmit: l,
+    fieldProps: u,
+    primaryActionProps: o,
+    variants: d,
+    showBranding: r,
+    hasText: m,
+    onEmojiClick: c,
+    onAttachmentClick: i,
+    onMicrophoneClick: b,
+    isInputDisabled: C
+  } = St(e, n, s), { icons: _ } = e;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ...a,
+      className: Lt(d),
+      "data-webchat-input": !0,
+      children: [
+        /* @__PURE__ */ t("div", { className: I["input-container"], children: /* @__PURE__ */ g("form", { onSubmit: l, className: I["input-form"], children: [
+          /* @__PURE__ */ t("textarea", { ...u, className: I["input-field"] }),
+          /* @__PURE__ */ g(
+            "div",
+            {
+              className: I["action-bar"],
+              role: "group",
+              "aria-label": "Message actions",
+              children: [
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: I["action-button"],
+                    "aria-label": "Emoji",
+                    disabled: C,
+                    onClick: c,
+                    children: _?.emoji ?? /* @__PURE__ */ t(Bt, {})
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: I["action-button"],
+                    "aria-label": "Attach file",
+                    disabled: C,
+                    onClick: i,
+                    children: _?.attachment ?? /* @__PURE__ */ t(It, {})
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    ...o,
+                    className: k(
+                      I["primary-action-base"],
+                      m ? I["primary-action-send"] : I["primary-action-mic"]
+                    ),
+                    "aria-label": m ? "Send message" : "Record voice message",
+                    onClick: m ? void 0 : b,
+                    children: /* @__PURE__ */ g("span", { className: I["icon-slot"], children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          "aria-hidden": !0,
+                          className: k(I["icon-face"], I["icon-mic"]),
+                          "data-visible": m ? "false" : "true",
+                          children: _?.microphone ?? /* @__PURE__ */ t(Tt, {})
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          "aria-hidden": !0,
+                          className: k(I["icon-face"], I["icon-send"]),
+                          "data-visible": m ? "true" : "false",
+                          children: _?.send ?? /* @__PURE__ */ t(kt, {})
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ] }) }),
+        r ? /* @__PURE__ */ t("p", { className: I.branding, children: "Powered by Hubtype" }) : void 0
+      ]
+    }
+  );
+}
+const Dt = "message-avatar-module__container___-EX1c", At = "message-avatar-module__base___RPKhe", zt = "message-avatar-module__image___rxwYA", Rt = "message-avatar-module__svg___eMikf", Ot = "message-avatar-module__fallback___2Xa-W", Vt = "message-avatar-module__name___L20Ht", Wt = "message-avatar-module__small___gBALc", Ht = "message-avatar-module__medium___WSeE1", jt = "message-avatar-module__large___a-hNp", Ft = "message-avatar-module__bot___2Bh0Y", Ut = "message-avatar-module__agent___MemVD", L = {
+  container: Dt,
+  base: At,
+  image: zt,
+  svg: Rt,
+  fallback: Ot,
+  name: Vt,
+  small: Wt,
+  medium: Ht,
+  large: jt,
+  bot: Ft,
+  agent: Ut
+}, Yt = A(L.base, {
+  variants: {
+    variant: {
+      user: L.user,
+      bot: L.bot,
+      system: L.system,
+      agent: L.agent
+    },
+    size: {
+      small: L.small,
+      medium: L.medium,
+      large: L.large
+    }
+  },
+  defaultVariants: { variant: "bot", size: "medium" }
+}), _e = $(
+  ({
+    variant: e = "bot",
+    size: n = "medium",
+    src: s,
+    alt: a,
+    svg: l,
+    showName: u = !1,
+    name: o,
+    fallback: d,
+    className: r
+  }, m) => /* @__PURE__ */ g(
+    "div",
+    {
+      ref: m,
+      className: L.container,
+      "data-webchat-message-avatar": !0,
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: Yt({
+              variant: e,
+              size: n,
+              className: r
+            }),
+            children: l ? /* @__PURE__ */ t(
+              "div",
+              {
+                className: L.svg,
+                dangerouslySetInnerHTML: { __html: l },
+                role: "img",
+                "aria-label": a || `${e} avatar`
+              }
+            ) : s ? /* @__PURE__ */ t(
+              "img",
+              {
+                src: s,
+                alt: a || `${e} avatar`,
+                className: L.image
+              }
+            ) : /* @__PURE__ */ t("div", { className: L.fallback, children: d || (e === "bot" ? "🤖" : e === "agent" ? "👨‍💼" : "👤") })
+          }
+        ),
+        u && o && /* @__PURE__ */ t("div", { className: L.name, children: o })
+      ]
+    }
+  )
+), Kt = "message-bubble-module__base___WzTAP", Xt = "message-bubble-module__bot___PcXmL", qt = "message-bubble-module__agent___WGfzX", Gt = "message-bubble-module__user___lFMMm", Qt = "message-bubble-module__system___e8-FD", Zt = "message-bubble-module__sending___P9nK-", Jt = "message-bubble-module__error___mine7", Y = {
+  base: Kt,
+  bot: Xt,
+  agent: qt,
+  user: Gt,
+  system: Qt,
+  sending: Zt,
+  error: Jt
+}, en = A(Y.base, {
+  variants: {
+    variant: {
+      user: Y.user,
+      bot: Y.bot,
+      system: Y.system,
+      agent: Y.agent
+    },
+    status: {
+      sending: Y.sending,
+      sent: Y.sent,
+      error: Y.error
+    }
+  },
+  defaultVariants: { variant: "bot", status: "sent" }
+}), tn = $(
+  ({ variant: e = "bot", status: n = "sent", avatarProps: s, children: a, className: l }, u) => /* @__PURE__ */ g(
+    "div",
+    {
+      ref: u,
+      className: en({
+        variant: e,
+        status: n,
+        className: l
+      }),
+      "data-webchat-message-bubble": !0,
+      children: [
+        s && /* @__PURE__ */ t(_e, { ...s }),
+        a
+      ]
+    }
+  )
+), nn = "message-info-module__base___yO0Cd", sn = "message-info-module__timestamp___xwDsF", an = "message-info-module__status___jPwtz", on = "message-info-module__top___NK5CY", rn = "message-info-module__bottom___NE4Rs", ln = "message-info-module__bot___xlQbg", cn = "message-info-module__agent___ckeYQ", un = "message-info-module__user___bgEi-", dn = "message-info-module__system___MF1CS", H = {
+  base: nn,
+  timestamp: sn,
+  status: an,
+  top: on,
+  bottom: rn,
+  bot: ln,
+  agent: cn,
+  user: un,
+  system: dn
+}, mn = A(H.base, {
+  variants: {
+    variant: {
+      user: H.user,
+      bot: H.bot,
+      system: H.system,
+      agent: H.agent
+    },
+    position: {
+      top: H.top,
+      bottom: H.bottom
+    }
+  },
+  defaultVariants: { variant: "bot", position: "bottom" }
+}), _n = $(
+  ({
+    variant: e = "bot",
+    position: n = "bottom",
+    showTimestamp: s = !0,
+    timestamp: a,
+    showStatus: l = !1,
+    status: u,
+    avatarProps: o,
+    className: d,
+    children: r
+  }, m) => {
+    const c = (C) => C ? typeof C == "string" ? C : C.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    }), i = (C) => {
+      switch (C) {
+        case "sending":
+          return "Sending...";
+        case "sent":
+          return "Sent";
+        case "error":
+          return "Failed to send";
+        default:
+          return "";
+      }
+    };
+    return s || l || r || o ? /* @__PURE__ */ g(
+      "div",
+      {
+        ref: m,
+        className: mn({
+          variant: e,
+          position: n,
+          className: d
+        }),
+        "data-webchat-message-info": !0,
+        children: [
+          o && /* @__PURE__ */ t(_e, { ...o }),
+          s && /* @__PURE__ */ t("span", { className: H.timestamp, children: c(a) }),
+          l && u && /* @__PURE__ */ t("span", { className: H.status, "data-status": u, children: i(u) })
+        ]
+      }
+    ) : null;
+  }
+), gn = "message-module__base___Ki7QB", hn = "message-module__bot___vw-E6", bn = "message-module__agent___2wXra", fn = "message-module__user___BSpcY", pn = "message-module__system___-jvsr", K = {
+  base: gn,
+  bot: hn,
+  agent: bn,
+  user: fn,
+  system: pn
+}, vn = A(K.base, {
+  variants: {
+    variant: {
+      user: K.user,
+      bot: K.bot,
+      system: K.system,
+      agent: K.agent
+    },
+    status: {
+      sending: K.sending,
+      sent: K.sent,
+      error: K.error
+    }
+  },
+  defaultVariants: { variant: "bot", status: "sent" }
+});
+function Cn(e) {
+  const {
+    variant: n = "bot",
+    status: s = "sent",
+    showTimestamp: a = !0,
+    showStatus: l = !1,
+    avatarConfig: u,
+    className: o,
+    ...d
+  } = e;
+  return se(() => {
+    const r = vn({
+      variant: n,
+      status: s,
+      className: o
+    });
+    if (!u)
+      return {
+        messageClasses: r,
+        bubbleProps: {
+          variant: n,
+          status: s,
+          ...d
+        },
+        infoProps: {
+          variant: n,
+          showTimestamp: a,
+          showStatus: l,
+          ...d
+        },
+        standaloneAvatarProps: null
+      };
+    const { placement: m, avatarProps: c } = u;
+    switch (m) {
+      case "bubble":
+        return {
+          messageClasses: r,
+          bubbleProps: {
+            variant: n,
+            status: s,
+            avatarProps: c,
+            ...d
+          },
+          infoProps: {
+            variant: n,
+            showTimestamp: a,
+            showStatus: l,
+            ...d
+          },
+          standaloneAvatarProps: null
+        };
+      case "info":
+        return {
+          messageClasses: r,
+          bubbleProps: {
+            variant: n,
+            status: s,
+            ...d
+          },
+          infoProps: {
+            variant: n,
+            showTimestamp: a,
+            showStatus: l,
+            avatarProps: c,
+            ...d
+          },
+          standaloneAvatarProps: null
+        };
+      case "standalone":
+        return {
+          messageClasses: r,
+          bubbleProps: {
+            variant: n,
+            status: s,
+            ...d
+          },
+          infoProps: {
+            variant: n,
+            showTimestamp: a,
+            showStatus: l,
+            ...d
+          },
+          standaloneAvatarProps: c
+        };
+      default:
+        return {
+          messageClasses: r,
+          bubbleProps: {
+            variant: n,
+            status: s,
+            ...d
+          },
+          infoProps: {
+            variant: n,
+            showTimestamp: a,
+            showStatus: l,
+            ...d
+          },
+          standaloneAvatarProps: null
+        };
+    }
+  }, [
+    n,
+    s,
+    a,
+    l,
+    u,
+    o,
+    d
+  ]);
+}
+const q = $(
+  (e, n) => {
+    const { messageClasses: s, bubbleProps: a, infoProps: l, standaloneAvatarProps: u } = Cn(e);
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        ref: n,
+        className: s,
+        "data-testid": `webchat-message-${e.variant || "bot"}`,
+        children: [
+          u && /* @__PURE__ */ t(_e, { ...u }),
+          /* @__PURE__ */ t(tn, { ...a, children: e.children }),
+          /* @__PURE__ */ t(_n, { ...l })
+        ]
+      }
+    );
+  }
+), yn = "audio-message-module__audioMessageBase___Xye8T", wn = "audio-message-module__audioContainer___7ehUa", Nn = "audio-message-module__audioControls___bPgRS", Mn = "audio-message-module__playButton___zFi0C", xn = "audio-message-module__isPlaying___WQu2R", In = "audio-message-module__playIcon___X2gd4", Bn = "audio-message-module__audioInfo___YeYsJ", Tn = "audio-message-module__timeDisplay___zhXjk", kn = "audio-message-module__progressContainer___4gzGk", Sn = "audio-message-module__progressBar___TwMvE", R = {
+  audioMessageBase: yn,
+  audioContainer: wn,
+  audioControls: Nn,
+  playButton: Mn,
+  isPlaying: xn,
+  playIcon: In,
+  audioInfo: Bn,
+  timeDisplay: Tn,
+  progressContainer: kn,
+  progressBar: Sn
+}, Pn = $(
+  ({
+    src: e,
+    alt: n = "Audio message",
+    onAudioLoad: s,
+    onPlay: a,
+    onPause: l,
+    onEnded: u,
+    className: o,
+    ...d
+  }, r) => {
+    const m = T(null), [c, i] = B(!1), [b, C] = B(null), [_, f] = B(0), v = h(() => {
+      m.current && (C(m.current.duration), s?.());
+    }, [s]), p = h(() => {
+      m.current && f(m.current.currentTime);
+    }, []), w = h(() => {
+      i(!0), a?.();
+    }, [a]), M = h(() => {
+      i(!1), l?.();
+    }, [l]), y = h(() => {
+      i(!1), f(0), u?.();
+    }, [u]), z = h(() => {
+      m.current && (c ? m.current.pause() : m.current.play());
+    }, [c]), N = h(
+      (F) => {
+        const Z = parseFloat(F.target.value);
+        m.current && (m.current.currentTime = Z, f(Z));
+      },
+      []
+    ), D = h((F) => {
+      const Z = Math.floor(F / 60), ce = Math.floor(F % 60);
+      return `${Z}:${ce.toString().padStart(2, "0")}`;
+    }, []);
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: r,
+        className: k(R.audioMessageBase, o),
+        ...d,
+        children: /* @__PURE__ */ g("div", { className: R.audioContainer, children: [
+          /* @__PURE__ */ t(
+            "audio",
+            {
+              ref: m,
+              src: e,
+              onLoadedMetadata: v,
+              onTimeUpdate: p,
+              onPlay: w,
+              onPause: M,
+              onEnded: y,
+              preload: "metadata"
+            }
+          ),
+          /* @__PURE__ */ g("div", { className: R.audioControls, children: [
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: k(R.playButton, c && R.isPlaying),
+                onClick: z,
+                "aria-label": c ? "Pause audio" : "Play audio",
+                children: c ? /* @__PURE__ */ g(
+                  "svg",
+                  {
+                    className: R.playIcon,
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    children: [
+                      /* @__PURE__ */ t("rect", { x: "6", y: "4", width: "4", height: "16" }),
+                      /* @__PURE__ */ t("rect", { x: "14", y: "4", width: "4", height: "16" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ t(
+                  "svg",
+                  {
+                    className: R.playIcon,
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ t("polygon", { points: "5,3 19,12 5,21" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ g("div", { className: R.audioInfo, children: [
+              /* @__PURE__ */ g("div", { className: R.timeDisplay, children: [
+                D(_),
+                " /",
+                " ",
+                b ? D(b) : "--:--"
+              ] }),
+              /* @__PURE__ */ t("div", { className: R.progressContainer, children: /* @__PURE__ */ t(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: b || 0,
+                  value: _,
+                  onChange: N,
+                  className: R.progressBar,
+                  disabled: !b
+                }
+              ) })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+), $n = "button-message-module__buttonMessageBase___ZYxyt", Ln = "button-message-module__buttonMessageContainer___HZsQh", En = "button-message-module__buttonGrid___KQjrj", Dn = "button-message-module__buttonText___8-9nw", ae = {
+  buttonMessageBase: $n,
+  buttonMessageContainer: Ln,
+  buttonGrid: En,
+  buttonText: Dn
+}, An = $(
+  ({ text: e, buttons: n, buttonsPerRow: s = 2, className: a, ...l }, u) => {
+    const o = Math.min(s, n.length), d = (r) => {
+      "value" in r && n.find(
+        (c) => c.text === r.text && c.value === r.value
+      )?.onClick?.(r.value);
+    };
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: u,
+        className: k(ae.buttonMessageBase, a),
+        ...l,
+        children: /* @__PURE__ */ g("div", { className: ae.buttonMessageContainer, children: [
+          e && /* @__PURE__ */ t("div", { className: ae.buttonText, children: e }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: ae.buttonGrid,
+              style: {
+                gridTemplateColumns: `repeat(${o}, 1fr)`
+              },
+              children: n.map((r, m) => /* @__PURE__ */ t(
+                ie,
+                {
+                  text: r.text,
+                  disabled: r.disabled,
+                  button: { text: r.text, value: r.value },
+                  onClick: d,
+                  variant: "secondary"
+                },
+                m
+              ))
+            }
+          )
+        ] })
+      }
+    );
+  }
+), zn = "carousel-message-module__carouselMessageBase___yV-Nd", Rn = "carousel-message-module__carouselContainer___32NGN", On = "carousel-message-module__carouselElement___6Cucf", Vn = "carousel-message-module__imageContainer___-NYcV", Wn = "carousel-message-module__elementImage___TEjVf", Hn = "carousel-message-module__elementContent___fQqqZ", jn = "carousel-message-module__elementTitle___sUPzb", Fn = "carousel-message-module__elementSubtitle___7yW9w", Un = "carousel-message-module__buttonContainer___lPydV", W = {
+  carouselMessageBase: zn,
+  carouselContainer: Rn,
+  carouselElement: On,
+  imageContainer: Vn,
+  elementImage: Wn,
+  elementContent: Hn,
+  elementTitle: jn,
+  elementSubtitle: Fn,
+  buttonContainer: Un
+}, Yn = $(
+  ({ elements: e, onButtonClick: n, onElementImageLoad: s, className: a, ...l }, u) => {
+    const o = h(
+      (r) => {
+        "type" in r && n?.(r);
+      },
+      [n]
+    ), d = h(
+      (r) => {
+        s?.(r);
+      },
+      [s]
+    );
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: u,
+        className: k(W.carouselMessageBase, a),
+        ...l,
+        children: /* @__PURE__ */ t("div", { className: W.carouselContainer, children: e.map((r, m) => /* @__PURE__ */ g(
+          "div",
+          {
+            className: W.carouselElement,
+            children: [
+              /* @__PURE__ */ t("div", { className: W.imageContainer, children: /* @__PURE__ */ t(
+                "img",
+                {
+                  src: r.image,
+                  alt: r.title,
+                  className: W.elementImage,
+                  onLoad: () => d(m)
+                }
+              ) }),
+              /* @__PURE__ */ g("div", { className: W.elementContent, children: [
+                /* @__PURE__ */ t("h3", { className: W.elementTitle, children: r.title }),
+                r.subtitle && /* @__PURE__ */ t("p", { className: W.elementSubtitle, children: r.subtitle }),
+                r.buttons.map((c, i) => /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: W.buttonContainer,
+                    children: /* @__PURE__ */ t(
+                      ie,
+                      {
+                        text: c.title,
+                        button: c,
+                        onClick: o,
+                        variant: "secondary"
+                      }
+                    )
+                  },
+                  `${r.title}-${r.subtitle || ""}-${c.title}-${i}`
+                ))
+              ] })
+            ]
+          },
+          `${r.title}-${r.subtitle || ""}-${m}`
+        )) })
+      }
+    );
+  }
+), Kn = "document-message-module__documentMessageBase___hqh5-", Xn = "document-message-module__documentContainer___AYtOi", qn = "document-message-module__documentInfo___UiSqy", Gn = "document-message-module__documentIcon___Ti2QJ", Qn = "document-message-module__documentDetails___XDlt9", Zn = "document-message-module__documentName___UsAgR", Jn = "document-message-module__documentMeta___5QVnf", es = "document-message-module__fileSize___qOdcA", ts = "document-message-module__fileType___7EdaH", ns = "document-message-module__documentActions___7m0QP", ss = "document-message-module__previewButton___gluoY", as = "document-message-module__downloadButton___J6HuC", os = "document-message-module__previewIcon___7HMaf", rs = "document-message-module__downloadIcon___Hg4tV", S = {
+  documentMessageBase: Kn,
+  documentContainer: Xn,
+  documentInfo: qn,
+  documentIcon: Gn,
+  documentDetails: Qn,
+  documentName: Zn,
+  documentMeta: Jn,
+  fileSize: es,
+  fileType: ts,
+  documentActions: ns,
+  previewButton: ss,
+  downloadButton: as,
+  previewIcon: os,
+  downloadIcon: rs
+}, is = $(
+  ({
+    src: e,
+    filename: n,
+    mimeType: s,
+    size: a,
+    alt: l = "Document",
+    onDocumentLoad: u,
+    onDownload: o,
+    className: d,
+    ...r
+  }, m) => {
+    const c = h(() => {
+      u?.();
+    }, [u]), i = h(() => {
+      const _ = document.createElement("a");
+      _.href = e, _.download = n || "document", _.target = "_blank", _.rel = "noopener noreferrer", document.body.appendChild(_), _.click(), document.body.removeChild(_), o?.();
+    }, [e, n, o]), b = h((_) => {
+      if (!_) return "Unknown size";
+      const f = ["B", "KB", "MB", "GB"];
+      let v = _, p = 0;
+      for (; v >= 1024 && p < f.length - 1; )
+        v /= 1024, p++;
+      return `${v.toFixed(1)} ${f[p]}`;
+    }, []), C = h((_) => _ ? _.startsWith("image/") ? "🖼️" : _.startsWith("video/") ? "🎥" : _.startsWith("audio/") ? "🎵" : _.includes("pdf") ? "📕" : _.includes("word") || _.includes("document") ? "📝" : _.includes("excel") || _.includes("spreadsheet") ? "📊" : _.includes("powerpoint") || _.includes("presentation") ? "📈" : _.includes("zip") || _.includes("archive") ? "📦" : (_.includes("text/"), "📄") : "📄", []);
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: m,
+        className: k(S.documentMessageBase, d),
+        ...r,
+        children: /* @__PURE__ */ g("div", { className: S.documentContainer, children: [
+          /* @__PURE__ */ g("div", { className: S.documentInfo, children: [
+            /* @__PURE__ */ t("div", { className: S.documentIcon, children: C(s) }),
+            /* @__PURE__ */ g("div", { className: S.documentDetails, children: [
+              /* @__PURE__ */ t("div", { className: S.documentName, children: n || "Document" }),
+              /* @__PURE__ */ g("div", { className: S.documentMeta, children: [
+                /* @__PURE__ */ t("span", { className: S.fileSize, children: b(a) }),
+                s && /* @__PURE__ */ t("span", { className: S.fileType, children: s.split("/")[1]?.toUpperCase() || s })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ g("div", { className: S.documentActions, children: [
+            /* @__PURE__ */ g(
+              "button",
+              {
+                type: "button",
+                className: S.previewButton,
+                onClick: c,
+                "aria-label": "Preview document",
+                children: [
+                  /* @__PURE__ */ t(
+                    "svg",
+                    {
+                      className: S.previewIcon,
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      children: /* @__PURE__ */ t("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" })
+                    }
+                  ),
+                  "Preview"
+                ]
+              }
+            ),
+            /* @__PURE__ */ g(
+              "button",
+              {
+                type: "button",
+                className: S.downloadButton,
+                onClick: i,
+                "aria-label": "Download document",
+                children: [
+                  /* @__PURE__ */ t(
+                    "svg",
+                    {
+                      className: S.downloadIcon,
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      children: /* @__PURE__ */ t("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
+                    }
+                  ),
+                  "Download"
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+), ls = "image-message-module__imageMessageBase___FDwNN", cs = "image-message-module__messageImage___JnXFb", fe = {
+  imageMessageBase: ls,
+  messageImage: cs
+}, us = $(
+  ({ src: e, alt: n = "Attached image", onImageLoad: s, className: a, ...l }, u) => {
+    const o = h(() => {
+      s?.();
+    }, [s]), d = h(() => {
+      s?.();
+    }, [s]);
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: u,
+        className: k(fe.imageMessageBase, a),
+        ...l,
+        children: /* @__PURE__ */ t(
+          "img",
+          {
+            src: e,
+            alt: n,
+            className: fe.messageImage,
+            onLoad: o,
+            onError: d
+          }
+        )
+      }
+    );
+  }
+), ds = "location-message-module__locationMessageBase___rY3d-", ms = "location-message-module__locationContainer___9Rukw", _s = "location-message-module__locationContent___2BRdV", gs = "location-message-module__locationIcon___rjObu", hs = "location-message-module__locationInfo___NqVsR", bs = "location-message-module__locationTitle___RpUjH", fs = "location-message-module__locationCoordinates___lLfuf", ps = "location-message-module__locationLink___Zq2I2", X = {
+  locationMessageBase: ds,
+  locationContainer: ms,
+  locationContent: _s,
+  locationIcon: gs,
+  locationInfo: hs,
+  locationTitle: bs,
+  locationCoordinates: fs,
+  locationLink: ps
+}, vs = $(
+  ({
+    latitude: e,
+    longitude: n,
+    alt: s = "Location coordinates",
+    onLocationLoad: a,
+    className: l,
+    ...u
+  }, o) => {
+    const d = h(() => {
+      a?.();
+    }, [a]), r = `https://www.google.com/maps?q=${e},${n}`;
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: o,
+        className: k(X.locationMessageBase, l),
+        ...u,
+        children: /* @__PURE__ */ g("div", { className: X.locationContainer, children: [
+          /* @__PURE__ */ g("div", { className: X.locationContent, children: [
+            /* @__PURE__ */ t("div", { className: X.locationIcon, children: /* @__PURE__ */ t(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ t(
+                  "path",
+                  {
+                    d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
+                    fill: "currentColor"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ g("div", { className: X.locationInfo, children: [
+              /* @__PURE__ */ t("div", { className: X.locationTitle, children: "Location" }),
+              /* @__PURE__ */ g("div", { className: X.locationCoordinates, children: [
+                e.toFixed(6),
+                ", ",
+                n.toFixed(6)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ g(
+            "a",
+            {
+              href: r,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: X.locationLink,
+              onClick: d,
+              "aria-label": `Open location in Google Maps: ${e}, ${n}`,
+              children: [
+                /* @__PURE__ */ t("span", { children: "View on Map" }),
+                /* @__PURE__ */ t(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ t(
+                      "path",
+                      {
+                        d: "M7 17L17 7M17 7H7M17 7V17",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+), Cs = "text-message-module__textMessageBase___p4r-t", ys = "text-message-module__textContent___yRb8d", pe = {
+  textMessageBase: Cs,
+  textContent: ys
+}, ws = $(
+  ({ text: e, className: n, ...s }, a) => /* @__PURE__ */ t(
+    q,
+    {
+      ref: a,
+      className: k(pe.textMessageBase, n),
+      ...s,
+      children: /* @__PURE__ */ t("div", { className: pe.textContent, children: e })
+    }
+  )
+), Ns = "video-message-module__videoMessageBase___RX3Qk", Ms = "video-message-module__videoContainer___ctZrR", xs = "video-message-module__videoElement___dYbDh", Is = "video-message-module__videoControls___K4Xdt", Bs = "video-message-module__controlsTop___6NCn9", Ts = "video-message-module__controlsBottom___E3II8", ks = "video-message-module__controlsLeft___feB6m", Ss = "video-message-module__controlsRight___9Wtf-", Ps = "video-message-module__playButton___8LVrt", $s = "video-message-module__isPlaying___z4Tf5", Ls = "video-message-module__playIcon___ert2Q", Es = "video-message-module__timeDisplay___Rzmtn", Ds = "video-message-module__progressContainer___U81jI", As = "video-message-module__progressBar___vX-3m", zs = "video-message-module__volumeContainer___-mIlN", Rs = "video-message-module__volumeIcon___x18vs", Os = "video-message-module__volumeSlider___jAwcn", x = {
+  videoMessageBase: Ns,
+  videoContainer: Ms,
+  videoElement: xs,
+  videoControls: Is,
+  controlsTop: Bs,
+  controlsBottom: Ts,
+  controlsLeft: ks,
+  controlsRight: Ss,
+  playButton: Ps,
+  isPlaying: $s,
+  playIcon: Ls,
+  timeDisplay: Es,
+  progressContainer: Ds,
+  progressBar: As,
+  volumeContainer: zs,
+  volumeIcon: Rs,
+  volumeSlider: Os
+}, Vs = $(
+  ({
+    src: e,
+    alt: n = "Video message",
+    onVideoLoad: s,
+    onPlay: a,
+    onPause: l,
+    onEnded: u,
+    className: o,
+    ...d
+  }, r) => {
+    const m = T(null), [c, i] = B(!1), [b, C] = B(null), [_, f] = B(0), [v, p] = B(1), [w, M] = B(!1), y = h(() => {
+      m.current && (C(m.current.duration), s?.());
+    }, [s]), z = h(() => {
+      m.current && f(m.current.currentTime);
+    }, []), N = h(() => {
+      i(!0), a?.();
+    }, [a]), D = h(() => {
+      i(!1), l?.();
+    }, [l]), F = h(() => {
+      i(!1), f(0), u?.();
+    }, [u]), Z = h(() => {
+      m.current && (c ? m.current.pause() : m.current.play());
+    }, [c]), ce = h(
+      (U) => {
+        const G = parseFloat(U.target.value);
+        m.current && (m.current.currentTime = G, f(G));
+      },
+      []
+    ), xe = h(
+      (U) => {
+        const G = parseFloat(U.target.value);
+        m.current && (m.current.volume = G, p(G));
+      },
+      []
+    ), Ie = h(() => {
+      M((U) => !U);
+    }, []), ge = h((U) => {
+      const G = Math.floor(U / 60), Be = Math.floor(U % 60);
+      return `${G}:${Be.toString().padStart(2, "0")}`;
+    }, []);
+    return /* @__PURE__ */ t(
+      q,
+      {
+        ref: r,
+        className: k(x.videoMessageBase, o),
+        ...d,
+        children: /* @__PURE__ */ g("div", { className: x.videoContainer, children: [
+          /* @__PURE__ */ t(
+            "video",
+            {
+              ref: m,
+              src: e,
+              onLoadedMetadata: y,
+              onTimeUpdate: z,
+              onPlay: N,
+              onPause: D,
+              onEnded: F,
+              onClick: Ie,
+              className: x.videoElement,
+              preload: "metadata",
+              poster: ""
+            }
+          ),
+          w && /* @__PURE__ */ g("div", { className: x.videoControls, children: [
+            /* @__PURE__ */ t("div", { className: x.controlsTop, children: /* @__PURE__ */ t("div", { className: x.progressContainer, children: /* @__PURE__ */ t(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: b || 0,
+                value: _,
+                onChange: ce,
+                className: x.progressBar,
+                disabled: !b
+              }
+            ) }) }),
+            /* @__PURE__ */ g("div", { className: x.controlsBottom, children: [
+              /* @__PURE__ */ g("div", { className: x.controlsLeft, children: [
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: k(
+                      x.playButton,
+                      c && x.isPlaying
+                    ),
+                    onClick: Z,
+                    "aria-label": c ? "Pause video" : "Play video",
+                    children: c ? /* @__PURE__ */ g(
+                      "svg",
+                      {
+                        className: x.playIcon,
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor",
+                        children: [
+                          /* @__PURE__ */ t("rect", { x: "6", y: "4", width: "4", height: "16" }),
+                          /* @__PURE__ */ t("rect", { x: "14", y: "4", width: "4", height: "16" })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ t(
+                      "svg",
+                      {
+                        className: x.playIcon,
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor",
+                        children: /* @__PURE__ */ t("polygon", { points: "5,3 19,12 5,21" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ g("div", { className: x.timeDisplay, children: [
+                  ge(_),
+                  " /",
+                  " ",
+                  b ? ge(b) : "--:--"
+                ] })
+              ] }),
+              /* @__PURE__ */ t("div", { className: x.controlsRight, children: /* @__PURE__ */ g("div", { className: x.volumeContainer, children: [
+                /* @__PURE__ */ t(
+                  "svg",
+                  {
+                    className: x.volumeIcon,
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    children: v === 0 ? /* @__PURE__ */ t("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) : v < 0.5 ? /* @__PURE__ */ t("path", { d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" }) : /* @__PURE__ */ t("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" })
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    type: "range",
+                    min: "0",
+                    max: "1",
+                    step: "0.1",
+                    value: v,
+                    onChange: xe,
+                    className: x.volumeSlider
+                  }
+                )
+              ] }) })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+function Ws({
+  messageActor: e,
+  baseProps: n = {}
+}) {
+  const { message: s, status: a } = E(e, (d) => ({
+    message: d.context?.message,
+    status: d.context?.status
+  })), l = E(
+    e,
+    (d) => d.can?.({ type: "RETRY" }) ?? !1
+  ), u = se(() => {
+    if (!s)
+      return {
+        ...n,
+        variant: "bot",
+        status: "sent",
+        showTimestamp: !0,
+        isClickable: !1
+      };
+    const d = (() => {
+      switch (a) {
+        case "unsent":
+          return "sending";
+        case "sent":
+          return "sent";
+        case "failed":
+          return "error";
+        default:
+          return "sent";
+      }
+    })(), r = (() => {
+      switch (s.sent_by) {
+        case oe.User:
+          return "user";
+        case oe.Bot:
+          return "bot";
+        case oe.Agent:
+          return "agent";
+        default:
+          return "user";
+      }
+    })(), m = l ? () => e.send({ type: "RETRY" }) : void 0, c = r === "bot" ? n.botAvatarConfig ?? void 0 : r === "agent" ? n.agentAvatarConfig ?? void 0 : void 0;
+    return {
+      ...n,
+      variant: r,
+      status: d,
+      // timestamp: message.timestamp ? new Date(message.timestamp) : undefined,
+      showTimestamp: !0,
+      isClickable: l,
+      onPress: m,
+      avatarConfig: c
+      // Pre-computed, just pass it through
+    };
+  }, [s, a, l, e, n]), o = se(
+    () => (d) => {
+      e.send({
+        type: "BUTTON_CLICKED",
+        button: d
+      });
+    },
+    [e]
+  );
+  return {
+    message: s,
+    status: a,
+    canRetry: l,
+    messageProps: u,
+    handleButtonClick: o
+  };
+}
+const Hs = ({
+  messageActor: e,
+  customMessageRenderer: n,
+  baseProps: s = {
+    customMessages: {}
+  },
+  onContentLoad: a,
+  onImageLoadStart: l,
+  onImageLoadComplete: u
+}) => {
+  const { message: o, messageProps: d, handleButtonClick: r } = Ws({
+    messageActor: e,
+    baseProps: s
+  });
+  return P(() => {
+    if (o && o.type === "image") {
+      const c = `img-${o.id}-${o.data}`;
+      l?.(c);
+    }
+  }, [o, l]), o ? /* @__PURE__ */ t(ve, { children: (() => {
+    const { id: c } = o;
+    if (o.isText())
+      return /* @__PURE__ */ t(ws, { ...d, text: o.data.text }, c);
+    if (o.isAudio())
+      return /* @__PURE__ */ t(
+        Pn,
+        {
+          ...d,
+          src: o.data.attachment_url ?? ""
+        },
+        c
+      );
+    if (o.isVideo())
+      return /* @__PURE__ */ t(
+        Vs,
+        {
+          ...d,
+          src: o.data.attachment_url ?? "",
+          alt: "Video",
+          onVideoLoad: () => {
+            a?.();
+          }
+        },
+        c
+      );
+    if (o.isDocument())
+      return /* @__PURE__ */ t(
+        is,
+        {
+          ...d,
+          src: o.data.attachment_url ?? "",
+          alt: "Document",
+          onDocumentLoad: () => {
+            a?.();
+          }
+        },
+        c
+      );
+    if (o.isLocation())
+      return /* @__PURE__ */ t(
+        vs,
+        {
+          ...d,
+          latitude: o.data.latitude,
+          longitude: o.data.longitude,
+          alt: "Location coordinates",
+          onLocationLoad: () => {
+            a?.();
+          }
+        },
+        c
+      );
+    if (o.isImage()) {
+      const i = `img-${c}-${o.data.attachment_url ?? ""}`;
+      return /* @__PURE__ */ t(
+        us,
+        {
+          ...d,
+          src: o.data.attachment_url ?? "",
+          alt: "Image",
+          onImageLoad: () => {
+            a?.(), u?.(i);
+          }
+        },
+        c
+      );
+    }
+    return o.isButtonMessage() ? /* @__PURE__ */ t(
+      An,
+      {
+        ...d,
+        text: o.data.text,
+        buttons: o.data.buttons?.map(
+          (i) => ({
+            text: i.title,
+            value: i.payload || i.title,
+            disabled: !1,
+            onClick: () => {
+              r(i);
+            }
+          })
+        )
+      },
+      c
+    ) : o.isCarousel() ? /* @__PURE__ */ t(
+      Yn,
+      {
+        ...d,
+        elements: o.data.elements.map((i, b) => ({
+          id: `${c}-${b}`,
+          title: i.title,
+          subtitle: i.subtitle,
+          image: i.image,
+          buttons: i.buttons
+        })),
+        onButtonClick: (i) => {
+          r(i);
+        },
+        onElementImageLoad: () => {
+          a?.();
+        }
+      },
+      c
+    ) : o.isCustom() ? n ? n(o, o.data, r) : (console.warn(
+      `Custom message renderer not provided for message type: ${o.type}`
+    ), null) : (console.warn(`Unknown message type: ${o.type}`), null);
+  })() }) : null;
+}, js = "typing-indicator-module__typingIndicator___2hMSH", Fs = "typing-indicator-module__typingDots___Sy7xC", Us = "typing-indicator-module__typingDot___SdRIv", ne = {
+  typingIndicator: js,
+  typingDots: Fs,
+  typingDot: Us
+}, Ys = ({
+  isVisible: e = !1,
+  className: n
+}) => e ? /* @__PURE__ */ t(
+  "div",
+  {
+    "data-testid": "typing-indicator",
+    className: `${ne.typingIndicator} ${n || ""}`,
+    children: /* @__PURE__ */ g("div", { className: ne.typingDots, children: [
+      /* @__PURE__ */ t("div", { className: ne.typingDot }),
+      /* @__PURE__ */ t("div", { className: ne.typingDot }),
+      /* @__PURE__ */ t("div", { className: ne.typingDot })
+    ] })
+  }
+) : null, Ks = 24;
+function Xs(e) {
+  const n = T(null), s = T(null), [a, l] = B(0), [u, o] = B(0), [d, r] = B(!1), m = T(), c = T(), i = h(() => {
+    const _ = e.current, f = n.current;
+    if (!_ || !f) return;
+    const { scrollHeight: v, clientHeight: p, scrollTop: w } = _;
+    if (v <= p) {
+      r(!1);
+      return;
+    }
+    const M = f.clientHeight, y = p / v, z = Math.max(y * M, Ks), N = v - p, D = N > 0 ? w / N * (M - z) : 0;
+    l(z), o(D), r(!0), clearTimeout(m.current), m.current = setTimeout(() => r(!1), 1200);
+  }, [e]);
+  P(() => {
+    const _ = e.current;
+    if (!_) return;
+    const f = () => i();
+    _.addEventListener("scroll", f, { passive: !0 });
+    const v = new ResizeObserver(() => i());
+    v.observe(_);
+    const p = new MutationObserver(() => i());
+    return p.observe(_, { childList: !0, subtree: !0 }), i(), () => {
+      _.removeEventListener("scroll", f), v.disconnect(), p.disconnect(), clearTimeout(m.current);
+    };
+  }, [e, i]);
+  const b = h(
+    (_) => {
+      _.preventDefault(), _.stopPropagation();
+      const f = e.current;
+      if (!f) return;
+      c.current = { startY: _.clientY, startScrollTop: f.scrollTop };
+      const v = (w) => {
+        const M = c.current, y = n.current;
+        if (!M || !f || !y) return;
+        const z = w.clientY - M.startY, N = y.clientHeight, F = (f.scrollHeight - f.clientHeight) / (N - a);
+        f.scrollTop = M.startScrollTop + z * F;
+      }, p = () => {
+        c.current = void 0, document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", p);
+      };
+      document.addEventListener("mousemove", v), document.addEventListener("mouseup", p);
+    },
+    [e, a]
+  ), C = h(
+    (_) => {
+      _.preventDefault();
+      const f = e.current, v = n.current;
+      if (!f || !v) return;
+      const p = v.getBoundingClientRect(), w = _.clientY - p.top, M = v.clientHeight, y = w / M;
+      f.scrollTop = y * (f.scrollHeight - f.clientHeight);
+    },
+    [e]
+  );
+  return {
+    thumbHeight: a,
+    thumbTop: u,
+    isVisible: d,
+    trackRef: n,
+    thumbRef: s,
+    onTrackMouseDown: C,
+    onThumbMouseDown: b
+  };
+}
+function qs(e) {
+  return se(() => {
+    if (!e)
+      return { bot: null, agent: null };
+    const n = (s, a) => {
+      if (!s) return null;
+      const l = {
+        variant: a,
+        src: s.src,
+        alt: s.alt,
+        svg: s.svg,
+        showName: s.showName,
+        name: s.name
+      };
+      return {
+        placement: s.placement,
+        avatarProps: l
+      };
+    };
+    return {
+      bot: n(e.bot, "bot"),
+      agent: n(e.agent, "agent")
+    };
+  }, [e]);
+}
+function Gs(e, n, s) {
+  const {
+    variant: a = "default",
+    "aria-label": l,
+    className: u,
+    ...o
+  } = e, d = E(
+    n.controller.machine,
+    (c) => {
+      const i = c.context.messageActors;
+      return i ? Array.from(i.values()) : [];
+    },
+    (c, i) => c.length === i.length
+  ), r = qs(n.avatarConfig), m = E(
+    n.controller.machine,
+    (c) => c.context.isTypingOn,
+    (c, i) => c === i
+  );
+  return {
+    // Props to spread on wrapper element
+    messagesProps: {
+      ...o,
+      ref: s,
+      "aria-label": l || `Chat messages, ${d.length} messages`,
+      "aria-live": "polite",
+      "data-webchat-messages": ""
+    },
+    // Props for MessagesList component (using XState message actors)
+    messageListProps: {
+      messageActors: d,
+      // From XState selector
+      isTyping: m,
+      // From XState selector
+      customMessageRenderer: void 0,
+      // TODO: Add custom message renderer support
+      // Pre-computed avatar configs (performance optimization)
+      botAvatarConfig: r.bot,
+      agentAvatarConfig: r.agent
+    },
+    // CSS class variants
+    variants: {
+      variant: a,
+      className: u
+    }
+  };
+}
+const Qs = "webchat-messages-module__base___V7acY", j = {
+  base: Qs,
+  "scroll-fade-bottom": "webchat-messages-module__scroll-fade-bottom___WoP9u",
+  "messages-container": "webchat-messages-module__messages-container___Ew2gS",
+  "typing-indicator-container": "webchat-messages-module__typing-indicator-container___v3bpq",
+  "scrollbar-track": "webchat-messages-module__scrollbar-track___WLz0l",
+  "scrollbar-track-visible": "webchat-messages-module__scrollbar-track-visible___LyCn8",
+  "scrollbar-thumb": "webchat-messages-module__scrollbar-thumb___AVatG",
+  default: "webchat-messages-module__default___3C2qm"
+}, Zs = A(j.base, {
+  variants: {
+    variant: {
+      default: j.default
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Js({
+  messageActors: e,
+  isTyping: n,
+  customMessages: s,
+  botAvatarConfig: a,
+  agentAvatarConfig: l,
+  scrollRef: u
+}) {
+  const o = u;
+  P(() => {
+    if (o.current) {
+      const r = o.current;
+      requestAnimationFrame(() => {
+        r.scrollTo({
+          top: r.scrollHeight,
+          behavior: "smooth"
+        });
+      });
+    }
+  }, [e.length, n]);
+  const d = Ce.useCallback(
+    (r, m, c) => {
+      const i = r;
+      if (i.type === "custom" && i.data && s) {
+        const b = s[i.data.name];
+        if (b && typeof b == "function")
+          return b({
+            ...i.data.props,
+            onButtonClick: c
+          });
+      }
+      return null;
+    },
+    [s]
+  );
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: o,
+      className: j["messages-container"],
+      "data-testid": "webchat-messages-list",
+      children: [
+        e && e.length > 0 && e.map((r) => /* @__PURE__ */ t(
+          Hs,
+          {
+            messageActor: r,
+            customMessageRenderer: d,
+            baseProps: {
+              className: j.message,
+              // Pre-computed avatar configs (performance optimization)
+              botAvatarConfig: a,
+              agentAvatarConfig: l
+            }
+          },
+          r.id
+        )),
+        n && /* @__PURE__ */ t("div", { className: j["typing-indicator-container"], children: /* @__PURE__ */ t(Ys, { isVisible: n }) })
+      ]
+    }
+  );
+}
+function ea(e) {
+  const { state: n } = ee(), s = T(null), a = T(null), { messagesProps: l, messageListProps: u, variants: o } = Gs(
+    e,
+    n,
+    s
+  ), d = Xs(a);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ...l,
+      className: Zs(o),
+      "data-webchat-messages": !0,
+      children: [
+        /* @__PURE__ */ t(
+          Js,
+          {
+            ...u,
+            customMessages: n.customMessages,
+            scrollRef: a
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: j["scroll-fade-bottom"],
+            "aria-hidden": !0,
+            "data-testid": "webchat-messages-bottom-fade"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            ref: d.trackRef,
+            className: k(
+              j["scrollbar-track"],
+              d.isVisible && j["scrollbar-track-visible"]
+            ),
+            onMouseDown: d.onTrackMouseDown,
+            "aria-hidden": !0,
+            "data-testid": "webchat-custom-scrollbar",
+            children: /* @__PURE__ */ t(
+              "div",
+              {
+                ref: d.thumbRef,
+                className: j["scrollbar-thumb"],
+                style: {
+                  height: d.thumbHeight,
+                  top: d.thumbTop
+                },
+                onMouseDown: d.onThumbMouseDown
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ta({
+  isOpen: e,
+  onClose: n,
+  onControllerReady: s,
+  title: a = "Chat",
+  placeholder: l = "Type a message...",
+  showBranding: u = !0,
+  coverRegistry: o,
+  icons: d
+}) {
+  const { controller: r } = ee(), m = T(!1);
+  return P(() => {
+    r && !m.current && (m.current = !0, s?.(r));
+  }, [r, s]), P(() => {
+    if (!r) return;
+    const b = r.machine.getSnapshot().context.isOpen ?? !1;
+    e && !b ? r.open() : !e && b && r.close();
+  }, [e, r]), /* @__PURE__ */ g(Ct, { layout: "default", coverRegistry: o, children: [
+    /* @__PURE__ */ t(xt, { title: a, onClose: () => {
+      r?.close(), n?.();
+    } }),
+    /* @__PURE__ */ t(ea, { variant: "default" }),
+    /* @__PURE__ */ t(
+      Et,
+      {
+        placeholder: l,
+        showBranding: u,
+        variant: "default",
+        icons: d
+      }
+    )
+  ] });
+}
+function na({
+  appId: e,
+  isOpen: n,
+  onClose: s,
+  onControllerReady: a,
+  title: l,
+  placeholder: u,
+  showBranding: o = !0,
+  customMessages: d = {},
+  avatarConfig: r,
+  coverRegistry: m,
+  icons: c,
+  // Note: showTrigger is accepted but not implemented yet (reserved for future use)
+  ...i
+}) {
+  return /* @__PURE__ */ t(
+    Ee,
+    {
+      appId: e,
+      customMessages: d,
+      avatarConfig: r,
+      ...i,
+      children: /* @__PURE__ */ t(
+        ta,
+        {
+          isOpen: n,
+          onClose: s,
+          onControllerReady: a,
+          title: l,
+          placeholder: u,
+          showBranding: o,
+          coverRegistry: m,
+          icons: c
+        }
+      )
+    }
+  );
+}
+const ca = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  WebchatApp: na
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  ie as B,
+  q as M,
+  bt as O,
+  Ys as T,
+  na as W,
+  tn as a,
+  Hs as b,
+  Fe as c,
+  tt as d,
+  Me as e,
+  Xe as f,
+  ut as g,
+  et as h,
+  Ct as i,
+  xt as j,
+  Et as k,
+  ea as l,
+  Ee as m,
+  le as n,
+  lt as o,
+  ft as p,
+  ee as q,
+  yt as r,
+  St as s,
+  Gs as t,
+  _t as u,
+  Le as v,
+  ca as w
+};