@botonic/webchat-react 2.24.0 → 2.25.0

package/webchat-app-CtAHJapU.js

@@ -1,2285 +0,0 @@
-import { jsx as t, jsxs as _, Fragment as ve } from "react/jsx-runtime";
-import pe, { useState as M, useMemo as ee, useEffect as P, forwardRef as x, useContext as Ce, createContext as ye, useRef as T, useCallback as g } from "react";
-import { cx as k, cva as $ } from "class-variance-authority";
-import { WebchatController as Be, setupGlobalWebchatAPI as Pe, isCloseWebviewMessage as $e, isWebviewPostMessage as Se, WEBVIEW_MESSAGE_TYPES as X } from "@botonic/webchat-core";
-import { useSelector as B } from "@xstate/react";
-import { WebchatMessageFactory as Te, MessageSentBy as ne } from "@botonic/shared";
-function ke(e) {
-  const [s, n] = M(""), o = ee(() => {
-    console.log("🏗️ Creating WebchatController with config:", e);
-    const i = new Be(e);
-    return i.initialize().catch((f) => {
-      console.error("❌ Failed to initialize webchat:", f);
-    }), i;
-  }, [e.appId]), r = B(
-    o.machine,
-    (i) => {
-      const f = i.context.messageActors;
-      return f ? Array.from(f.values()) : [];
-    }
-  ), c = B(
-    o.machine,
-    (i) => i.context.isOpen || !1
-  ), a = B(
-    o.machine,
-    (i) => i.matches("operational")
-  ), d = B(
-    o.machine,
-    (i) => i.matches("connectionFailed")
-  ), u = B(
-    o.machine,
-    (i) => i.context.connectionStatus || "disconnected"
-  ), m = B(
-    o.machine,
-    (i) => i.context.overlayActor
-  ), l = B(
-    m,
-    (i) => i.context.overlayState
-  );
-  return P(() => (Pe(o), () => {
-    console.log("🧹 Cleaning up webchat controller"), o.destroy();
-  }), [o]), {
-    // Framework-agnostic controller - all webchat functionality
-    controller: o,
-    // React-specific UI state (minimal)
-    inputValue: s,
-    setInputValue: n,
-    // XState machine state (direct from machine via useSelector)
-    isOpen: c,
-    isInitialized: a,
-    initializationError: d,
-    messageActors: r,
-    connectionStatus: u,
-    // Overlay state (webview or cover component)
-    overlayState: l,
-    // Configuration
-    avatarConfig: e.avatarConfig,
-    // Custom messages
-    customMessages: e.customMessages
-  };
-}
-const we = ye(null), Le = x(({ children: e, ...s }, n) => {
-  const o = ke(s);
-  pe.useImperativeHandle(n, () => o.controller, [o.controller]);
-  const r = {
-    state: o,
-    controller: o.controller
-    // Direct access to controller
-  };
-  return /* @__PURE__ */ t(we.Provider, { value: r, children: e });
-});
-function Q() {
-  const e = Ce(we);
-  if (!e)
-    throw new Error("useWebchatContext must be used within a WebchatProvider");
-  return e;
-}
-const Ee = "button-component-module__buttonComponent___KMwSR", De = "button-component-module__secondary___TTpBp", Oe = "button-component-module__primary___bD2jQ", de = {
-  buttonComponent: Ee,
-  secondary: De,
-  primary: Oe
-}, oe = x(
-  ({
-    text: e,
-    disabled: s = !1,
-    onClick: n,
-    button: o,
-    className: r,
-    variant: c = "secondary"
-  }, a) => /* @__PURE__ */ t(
-    "button",
-    {
-      ref: a,
-      disabled: s,
-      onClick: (u) => {
-        u.preventDefault(), u.stopPropagation(), n?.(o);
-      },
-      className: k(
-        de.buttonComponent,
-        c === "primary" && de.primary,
-        c === "secondary" && de.secondary,
-        r
-      ),
-      type: "button",
-      children: e
-    }
-  )
-), Ae = "confirm-modal-module__overlay___rRE3G", Re = "confirm-modal-module__modal___AliW3", ze = "confirm-modal-module__title___nOVLU", Ve = "confirm-modal-module__message___NiTmg", We = "confirm-modal-module__buttons___T9sSa", G = {
-  overlay: Ae,
-  modal: Re,
-  title: ze,
-  message: Ve,
-  buttons: We
-};
-function Fe(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 He = ({
-  config: e,
-  onConfirm: s,
-  onCancel: n
-}) => {
-  const o = T(null), r = T(null), c = Fe(e);
-  P(() => {
-    o.current?.focus();
-  }, []), P(() => {
-    const l = (i) => {
-      i.key === "Escape" && (i.stopPropagation(), n());
-    };
-    return window.addEventListener("keydown", l, !0), () => {
-      window.removeEventListener("keydown", l, !0);
-    };
-  }, [n]);
-  const a = g((l) => {
-    if (l.key === "Tab") {
-      const i = r.current?.querySelectorAll(
-        "button:not([disabled])"
-      );
-      if (!i?.length) return;
-      const f = i[0], v = i[i.length - 1];
-      l.shiftKey ? document.activeElement === f && (l.preventDefault(), v.focus()) : document.activeElement === v && (l.preventDefault(), f.focus());
-    }
-  }, []);
-  if (!c)
-    return null;
-  const d = c.title || "Close?", u = c.confirmText || "Close", m = c.cancelText || "Cancel";
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: G.overlay,
-      role: "alertdialog",
-      "aria-modal": "true",
-      "aria-labelledby": "confirm-close-title",
-      "aria-describedby": "confirm-close-message",
-      onClick: n,
-      children: /* @__PURE__ */ _(
-        "div",
-        {
-          ref: r,
-          className: G.modal,
-          onClick: (l) => l.stopPropagation(),
-          onKeyDown: a,
-          children: [
-            /* @__PURE__ */ t("h3", { id: "confirm-close-title", className: G.title, children: d }),
-            /* @__PURE__ */ t("p", { id: "confirm-close-message", className: G.message, children: c.message }),
-            /* @__PURE__ */ _("div", { className: G.buttons, children: [
-              /* @__PURE__ */ t(
-                oe,
-                {
-                  text: m,
-                  button: { text: "cancel", value: "cancel" },
-                  onClick: n,
-                  variant: "secondary"
-                }
-              ),
-              /* @__PURE__ */ t(
-                oe,
-                {
-                  ref: o,
-                  text: u,
-                  button: { text: "confirm", value: "confirm" },
-                  onClick: s,
-                  variant: "primary"
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}, Ne = ye(null);
-function le() {
-  const e = Ce(Ne);
-  if (!e)
-    throw new Error("useOverlayContext must be used within an Overlay");
-  return e;
-}
-const je = "cover-frame-module__base___e38vU", Ue = "cover-frame-module__errorContainer___o19mQ", Ke = "cover-frame-module__errorText___ltF9m", ue = {
-  base: je,
-  errorContainer: Ue,
-  errorText: Ke
-}, ge = $(ue.base);
-function Ye({ className: e }) {
-  const { overlayState: s, coverRegistry: n, setIsLoading: o } = le();
-  if (P(() => {
-    s?.type === "cover" && o(!1);
-  }, [s?.type, o]), !s || s.type !== "cover")
-    return null;
-  const r = s, c = n?.[r.componentId];
-  return c ? /* @__PURE__ */ t("div", { className: ge({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ t(c, { ...r.props || {} }) }) : (console.warn(
-    `[OverlayCoverFrame] Component "${r.componentId}" not found in registry. Available components: ${Object.keys(n || {}).join(", ") || "none"}`
-  ), /* @__PURE__ */ t("div", { className: ge({ className: e }), "data-overlay-cover-frame": !0, children: /* @__PURE__ */ t("div", { className: ue.errorContainer, children: /* @__PURE__ */ _("p", { className: ue.errorText, children: [
-    'Component "',
-    r.componentId,
-    '" not found'
-  ] }) }) }));
-}
-const Xe = "webview-frame-module__base___u5SZG", qe = "webview-frame-module__loadingContainer___eqQ-L", Qe = "webview-frame-module__spinner___5gsaP", Ge = "webview-frame-module__iframe___XewWc", ae = {
-  base: Xe,
-  loadingContainer: qe,
-  spinner: Qe,
-  iframe: Ge
-}, Ze = $(ae.base);
-function Je({ className: e }) {
-  const { overlayState: s, sandboxPermissions: n, isLoading: o, setIsLoading: r } = le(), c = g(() => {
-    r(!1);
-  }, [r]);
-  if (!s || s.type !== "webview")
-    return null;
-  const a = s;
-  return /* @__PURE__ */ _("div", { className: Ze({ className: e }), "data-overlay-webview-frame": !0, children: [
-    o && /* @__PURE__ */ t("div", { className: ae.loadingContainer, children: /* @__PURE__ */ t("div", { className: ae.spinner, "aria-label": "Loading webview" }) }),
-    /* @__PURE__ */ t(
-      "iframe",
-      {
-        src: a.url,
-        className: ae.iframe,
-        sandbox: n,
-        title: a.title || "Webview",
-        onLoad: c,
-        style: { opacity: o ? 0 : 1 }
-      }
-    )
-  ] });
-}
-function et({ className: e }) {
-  const { overlayState: s } = le();
-  if (!s)
-    return null;
-  switch (s.type) {
-    case "webview":
-      return /* @__PURE__ */ t(Je, { className: e });
-    case "cover":
-      return /* @__PURE__ */ t(Ye, { className: e });
-    default:
-      return null;
-  }
-}
-const tt = "header-module__base___WYM0o", st = "header-module__minimal___6nq5w", nt = "header-module__titleContainer___56hi4", at = "header-module__icon___BCSbe", ot = "header-module__title___0c-LL", lt = "header-module__closeButton___wOwC8", U = {
-  base: tt,
-  default: "header-module__default___z7D3c",
-  minimal: st,
-  titleContainer: nt,
-  icon: at,
-  title: ot,
-  closeButton: lt
-};
-function rt(e, s) {
-  const n = s?.title || "Overlay", o = s?.icon, r = s?.allowClose !== !1;
-  return {
-    title: n,
-    icon: o,
-    showClose: r,
-    variants: {
-      variant: e.variant || "default"
-    }
-  };
-}
-const it = $(U.base, {
-  variants: {
-    variant: {
-      default: U.default,
-      minimal: U.minimal
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-function ct(e) {
-  const { overlayState: s, attemptClose: n } = le(), { showClose: o, title: r, icon: c, variants: a } = rt(
-    e,
-    s
-  );
-  return /* @__PURE__ */ _("header", { className: it(a), "data-overlay-header": !0, children: [
-    /* @__PURE__ */ _("div", { className: U.titleContainer, children: [
-      c && /* @__PURE__ */ t("span", { className: U.icon, children: c }),
-      /* @__PURE__ */ t("h4", { className: U.title, children: r })
-    ] }),
-    o && /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        className: U.closeButton,
-        onClick: n,
-        "aria-label": "Close overlay",
-        children: "×"
-      }
-    )
-  ] });
-}
-const dt = "overlay-module__base___qm4j7", ut = "overlay-module__loading___8U4v9", he = {
-  base: dt,
-  loading: ut
-};
-function mt(e, s) {
-  const [n, o] = M(!0), [r, c] = M(!1), a = g(() => {
-    e?.confirmClose ? c(!0) : s.onClose();
-  }, [s, e?.confirmClose]), d = g(() => {
-    c(!1), s.onClose();
-  }, [s]), u = g(() => {
-    c(!1);
-  }, []);
-  return P(() => {
-    e?.isOpen && e?.type === "webview" && o(!0);
-  }, [e?.isOpen, e?.type]), P(() => {
-    e?.type === "webview" && o(!0);
-  }, [e?.type === "webview" ? e.url : null]), P(() => {
-    if (e?.type !== "webview")
-      return;
-    const m = (l) => {
-      if ($e(l.data)) {
-        a();
-        return;
-      }
-      if (Se(l.data)) {
-        const i = l.data;
-        switch (i.type) {
-          case X.SET_TITLE:
-            s.onSetTitle(i.title);
-            break;
-          case X.SET_ICON:
-            s.onSetIcon(i.icon);
-            break;
-          case X.SET_ALLOW_CLOSE:
-            s.onSetAllowClose(i.allow);
-            break;
-          case X.SET_CONFIRM_CLOSE:
-            s.onSetConfirmClose(i.config);
-            break;
-          case X.SEND_PAYLOAD:
-            s.onSendPayload(i.payload);
-            break;
-          case X.NAVIGATE:
-            s.onNavigate(i.url);
-            break;
-        }
-      }
-    };
-    return window.addEventListener("message", m), () => {
-      window.removeEventListener("message", m);
-    };
-  }, [s, a, e?.type]), P(() => {
-    if (r) return;
-    const m = (l) => {
-      l.key === "Escape" && e?.isOpen && e?.allowClose !== !1 && a();
-    };
-    return window.addEventListener("keydown", m), () => {
-      window.removeEventListener("keydown", m);
-    };
-  }, [
-    a,
-    r,
-    e?.isOpen,
-    e?.allowClose
-  ]), {
-    isLoading: n,
-    setIsLoading: o,
-    showConfirmModal: r,
-    setShowConfirmModal: c,
-    attemptClose: a,
-    handleConfirmClose: d,
-    handleCancelClose: u,
-    variants: { isLoading: n }
-  };
-}
-const _t = "allow-scripts allow-forms allow-same-origin allow-popups", gt = $(he.base, {
-  variants: {
-    isLoading: {
-      true: he.loading
-    }
-  }
-});
-function ht({
-  overlayState: e,
-  onClose: s,
-  onSetTitle: n,
-  onSetIcon: o,
-  onSetAllowClose: r,
-  onSetConfirmClose: c,
-  onSendPayload: a,
-  onNavigate: d,
-  coverRegistry: u,
-  children: m
-}) {
-  const l = {
-    onClose: s,
-    onSetTitle: n,
-    onSetIcon: o,
-    onSetAllowClose: r,
-    onSetConfirmClose: c,
-    onSendPayload: a,
-    onNavigate: d
-  }, {
-    isLoading: i,
-    setIsLoading: f,
-    showConfirmModal: v,
-    setShowConfirmModal: h,
-    attemptClose: b,
-    handleConfirmClose: C,
-    handleCancelClose: p,
-    variants: A
-  } = mt(e, l);
-  if (!e?.isOpen)
-    return null;
-  const H = {
-    overlayState: e,
-    ...l,
-    sandboxPermissions: _t,
-    isLoading: i,
-    setIsLoading: f,
-    attemptClose: b,
-    showConfirmModal: v,
-    setShowConfirmModal: h,
-    coverRegistry: u
-  };
-  return /* @__PURE__ */ t(Ne.Provider, { value: H, children: /* @__PURE__ */ _("div", { className: gt(A), "data-overlay": !0, children: [
-    m || /* @__PURE__ */ _(ve, { children: [
-      /* @__PURE__ */ t(ct, {}),
-      /* @__PURE__ */ t(et, {})
-    ] }),
-    v && e.confirmClose && /* @__PURE__ */ t(
-      He,
-      {
-        config: e.confirmClose,
-        onConfirm: C,
-        onCancel: p
-      }
-    )
-  ] }) });
-}
-function ft(e, s, n) {
-  const {
-    layout: o = "default",
-    size: r = "normal",
-    position: c = "bottom-right",
-    "aria-label": a = "Webchat interface",
-    className: d,
-    coverRegistry: u,
-    // Exclude from DOM props
-    ...m
-  } = e, l = B(s.controller.machine, (p) => p.context.isOpen || !1), [i, f] = M(null), [v, h] = M(!1), b = T(!1), C = g(
-    (p) => {
-      p.target === p.currentTarget && i !== null && (i === "closing" && h(!1), f(null));
-    },
-    [i]
-  );
-  return P(() => {
-    const p = b.current;
-    b.current = l, p === !1 && l ? (h(!0), f("opening")) : p === !0 && !l && f("closing");
-  }, [l]), {
-    // Component visibility - stays true during close animation
-    shouldRender: v,
-    // Container element props
-    containerProps: {
-      ref: n,
-      role: "dialog",
-      "aria-label": a,
-      "aria-live": "polite",
-      "data-testid": "webchat-container",
-      "data-layout": o,
-      "data-size": r,
-      tabIndex: -1,
-      onAnimationEnd: C,
-      ...m
-    },
-    // CSS class variants
-    variants: {
-      layout: o,
-      size: r,
-      position: c,
-      isOpen: l,
-      isOpening: i === "opening",
-      isClosing: i === "closing",
-      className: d
-    }
-  };
-}
-const bt = "webchat-container-module__base___-nEHI", E = {
-  base: bt,
-  "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 = $(E.base, {
-  variants: {
-    layout: {
-      default: E.default
-    },
-    position: {
-      "bottom-right": E["position-bottom-right"],
-      "bottom-left": E["position-bottom-left"],
-      "top-right": E["position-top-right"],
-      "top-left": E["position-top-left"]
-    },
-    isOpen: {
-      true: E["is-open"]
-    },
-    isOpening: {
-      true: E["is-opening"]
-    },
-    isClosing: {
-      true: E["is-closing"]
-    }
-  },
-  defaultVariants: {
-    layout: "default",
-    position: "bottom-right"
-  }
-});
-function pt(e) {
-  const { state: s, controller: n } = Q(), o = T(null), { shouldRender: r, containerProps: c, variants: a } = ft(
-    e,
-    s,
-    o
-  ), {
-    children: d,
-    coverRegistry: u,
-    layout: m,
-    size: l,
-    position: i,
-    ...f
-  } = e, v = g(
-    () => n.overlay.close(),
-    [n]
-  ), h = g(
-    (w) => n.overlay.setTitle(w),
-    [n]
-  ), b = g(
-    (w) => n.overlay.setIcon(w),
-    [n]
-  ), C = g(
-    (w) => n.overlay.setAllowClose(w),
-    [n]
-  ), p = g(
-    (w) => n.overlay.setConfirmClose(w),
-    [n]
-  ), A = g(
-    (w) => n.overlay.sendPayload(w),
-    [n]
-  ), H = g(
-    (w) => n.overlay.navigate(w),
-    [n]
-  );
-  return r ? /* @__PURE__ */ _(
-    "div",
-    {
-      ...c,
-      ...f,
-      className: vt(a),
-      "data-testid": "webchat-container",
-      children: [
-        d,
-        /* @__PURE__ */ t(
-          ht,
-          {
-            overlayState: s.overlayState,
-            onClose: v,
-            onSetTitle: h,
-            onSetIcon: b,
-            onSetAllowClose: C,
-            onSetConfirmClose: p,
-            onSendPayload: A,
-            onNavigate: H,
-            coverRegistry: u
-          }
-        )
-      ]
-    }
-  ) : null;
-}
-function Ct(e, s, n) {
-  const {
-    title: o = "Chat",
-    showStatus: r = !0,
-    showClose: c = !0,
-    onClose: a,
-    variant: d = "default",
-    "aria-label": u,
-    className: m,
-    ...l
-  } = e, i = B(
-    s.controller.machine,
-    (b) => b.context.connectionStatus || "disconnected"
-  ), f = g(() => {
-    a ? a() : s.controller.close();
-  }, [a, s.controller]), v = g((b) => {
-    switch (b) {
-      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";
-    }
-  }, []), h = r ? v(i) : void 0;
-  return {
-    // Header element props
-    headerProps: {
-      ...l,
-      ref: n,
-      "aria-label": u || `${o} header`
-    },
-    // Header content
-    title: o,
-    showStatus: r,
-    statusText: h,
-    showClose: c,
-    onClose: f,
-    connectionStatus: i,
-    // CSS class variants
-    variants: {
-      variant: d,
-      className: m
-    }
-  };
-}
-const yt = "webchat-header-module__base___VbIWd", wt = "webchat-header-module__minimal___rloXK", L = {
-  base: yt,
-  "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: wt
-}, Nt = $(L.base, {
-  variants: {
-    variant: {
-      default: L.default,
-      minimal: L.minimal
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-function Mt(e) {
-  const { state: s } = Q(), n = T(null), {
-    headerProps: o,
-    title: r,
-    showStatus: c,
-    statusText: a,
-    showClose: d,
-    onClose: u,
-    connectionStatus: m,
-    variants: l
-  } = Ct(e, s, n), { ...i } = e;
-  return /* @__PURE__ */ t(
-    "header",
-    {
-      ...o,
-      ...i,
-      className: Nt(l),
-      "data-webchat-header": !0,
-      children: /* @__PURE__ */ _("div", { className: L["header-content"], children: [
-        /* @__PURE__ */ _("div", { className: L["header-text"], children: [
-          /* @__PURE__ */ t("h3", { className: L["header-title"], children: r }),
-          c && /* @__PURE__ */ _("div", { className: L["status-section"], children: [
-            /* @__PURE__ */ t(
-              "div",
-              {
-                className: L["status-dot"],
-                "data-status": m,
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ t("span", { className: L["status-text"], children: a })
-          ] })
-        ] }),
-        d && /* @__PURE__ */ t(
-          "button",
-          {
-            type: "button",
-            onClick: u,
-            className: L["close-button"],
-            "aria-label": "Close chat",
-            children: "×"
-          }
-        )
-      ] })
-    }
-  );
-}
-function xt(e, s, n) {
-  const { controller: o } = Q(), {
-    placeholder: r = "Message...",
-    disabled: c,
-    variant: a = "default",
-    "aria-label": d,
-    className: u,
-    ...m
-  } = e, [l, i] = M(""), f = g(
-    (b) => {
-      b.preventDefault();
-      const C = l.trim();
-      if (C) {
-        const p = Te.createText({
-          text: C,
-          metadata: {
-            sent_by: ne.User
-          }
-        });
-        o.sendMessage(p), i("");
-      }
-    },
-    [l, o]
-  ), v = g(
-    (b) => {
-      i(b.target.value);
-    },
-    []
-  ), h = g(
-    (b) => {
-      b.key === "Enter" && !b.shiftKey && (b.preventDefault(), f(b));
-    },
-    [f]
-  );
-  return {
-    // Input wrapper props
-    inputProps: {
-      ...m,
-      ref: n,
-      "aria-label": d || r,
-      "data-webchat-input": ""
-    },
-    // Form state and handlers
-    inputValue: l,
-    handleSubmit: f,
-    handleInputChange: v,
-    handleKeyDown: h,
-    // Input field props
-    fieldProps: {
-      value: l,
-      onChange: v,
-      onKeyDown: h,
-      placeholder: r,
-      disabled: c,
-      rows: 1
-    },
-    // Submit button props
-    submitProps: {
-      type: "submit",
-      disabled: !l.trim() || c,
-      "aria-label": "Send message"
-    },
-    // CSS class variants
-    variants: {
-      variant: a,
-      className: u
-    }
-  };
-}
-const It = "webchat-input-module__base___TZXU7", q = {
-  base: It,
-  "input-form": "webchat-input-module__input-form___GnKc7",
-  "input-field": "webchat-input-module__input-field___c4r26",
-  "send-button": "webchat-input-module__send-button___iOZ7C"
-}, Bt = $(q.base, {
-  variants: {
-    variant: {
-      default: q.default
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-function Pt(e) {
-  const { state: s } = Q(), n = T(null), { inputProps: o, handleSubmit: r, fieldProps: c, submitProps: a, variants: d } = xt(e, s, n), { ...u } = e;
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      ...o,
-      ...u,
-      className: Bt(d),
-      "data-webchat-input": !0,
-      children: /* @__PURE__ */ t("div", { className: q["input-container"], children: /* @__PURE__ */ _("form", { onSubmit: r, className: q["input-form"], children: [
-        /* @__PURE__ */ t(
-          "textarea",
-          {
-            ...c,
-            className: q["input-field"],
-            "data-testid": "webchat-input-field"
-          }
-        ),
-        /* @__PURE__ */ t(
-          "button",
-          {
-            ...a,
-            className: q["send-button"],
-            "data-testid": "webchat-send-button",
-            children: /* @__PURE__ */ t("span", { children: "→" })
-          }
-        )
-      ] }) })
-    }
-  );
-}
-const $t = "message-avatar-module__container___-EX1c", St = "message-avatar-module__base___RPKhe", Tt = "message-avatar-module__image___rxwYA", kt = "message-avatar-module__svg___eMikf", Lt = "message-avatar-module__fallback___2Xa-W", Et = "message-avatar-module__name___L20Ht", Dt = "message-avatar-module__small___gBALc", Ot = "message-avatar-module__medium___WSeE1", At = "message-avatar-module__large___a-hNp", Rt = "message-avatar-module__bot___2Bh0Y", zt = "message-avatar-module__agent___MemVD", I = {
-  container: $t,
-  base: St,
-  image: Tt,
-  svg: kt,
-  fallback: Lt,
-  name: Et,
-  small: Dt,
-  medium: Ot,
-  large: At,
-  bot: Rt,
-  agent: zt
-}, Vt = $(I.base, {
-  variants: {
-    variant: {
-      user: I.user,
-      bot: I.bot,
-      system: I.system,
-      agent: I.agent
-    },
-    size: {
-      small: I.small,
-      medium: I.medium,
-      large: I.large
-    }
-  },
-  defaultVariants: { variant: "bot", size: "medium" }
-}), me = x(
-  ({
-    variant: e = "bot",
-    size: s = "medium",
-    src: n,
-    alt: o,
-    svg: r,
-    showName: c = !1,
-    name: a,
-    fallback: d,
-    className: u
-  }, m) => /* @__PURE__ */ _(
-    "div",
-    {
-      ref: m,
-      className: I.container,
-      "data-webchat-message-avatar": !0,
-      children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            className: Vt({
-              variant: e,
-              size: s,
-              className: u
-            }),
-            children: r ? /* @__PURE__ */ t(
-              "div",
-              {
-                className: I.svg,
-                dangerouslySetInnerHTML: { __html: r },
-                role: "img",
-                "aria-label": o || `${e} avatar`
-              }
-            ) : n ? /* @__PURE__ */ t(
-              "img",
-              {
-                src: n,
-                alt: o || `${e} avatar`,
-                className: I.image
-              }
-            ) : /* @__PURE__ */ t("div", { className: I.fallback, children: d || (e === "bot" ? "🤖" : e === "agent" ? "👨‍💼" : "👤") })
-          }
-        ),
-        c && a && /* @__PURE__ */ t("div", { className: I.name, children: a })
-      ]
-    }
-  )
-), Wt = "message-bubble-module__base___WzTAP", Ft = "message-bubble-module__bot___PcXmL", Ht = "message-bubble-module__agent___WGfzX", jt = "message-bubble-module__user___lFMMm", Ut = "message-bubble-module__system___e8-FD", Kt = "message-bubble-module__sending___P9nK-", Yt = "message-bubble-module__error___mine7", z = {
-  base: Wt,
-  bot: Ft,
-  agent: Ht,
-  user: jt,
-  system: Ut,
-  sending: Kt,
-  error: Yt
-}, Xt = $(z.base, {
-  variants: {
-    variant: {
-      user: z.user,
-      bot: z.bot,
-      system: z.system,
-      agent: z.agent
-    },
-    status: {
-      sending: z.sending,
-      sent: z.sent,
-      error: z.error
-    }
-  },
-  defaultVariants: { variant: "bot", status: "sent" }
-}), qt = x(
-  ({ variant: e = "bot", status: s = "sent", avatarProps: n, children: o, className: r }, c) => /* @__PURE__ */ _(
-    "div",
-    {
-      ref: c,
-      className: Xt({
-        variant: e,
-        status: s,
-        className: r
-      }),
-      "data-webchat-message-bubble": !0,
-      children: [
-        n && /* @__PURE__ */ t(me, { ...n }),
-        o
-      ]
-    }
-  )
-), Qt = "message-info-module__base___yO0Cd", Gt = "message-info-module__timestamp___xwDsF", Zt = "message-info-module__status___jPwtz", Jt = "message-info-module__top___NK5CY", es = "message-info-module__bottom___NE4Rs", ts = "message-info-module__bot___xlQbg", ss = "message-info-module__agent___ckeYQ", ns = "message-info-module__user___bgEi-", as = "message-info-module__system___MF1CS", O = {
-  base: Qt,
-  timestamp: Gt,
-  status: Zt,
-  top: Jt,
-  bottom: es,
-  bot: ts,
-  agent: ss,
-  user: ns,
-  system: as
-}, os = $(O.base, {
-  variants: {
-    variant: {
-      user: O.user,
-      bot: O.bot,
-      system: O.system,
-      agent: O.agent
-    },
-    position: {
-      top: O.top,
-      bottom: O.bottom
-    }
-  },
-  defaultVariants: { variant: "bot", position: "bottom" }
-}), ls = x(
-  ({
-    variant: e = "bot",
-    position: s = "bottom",
-    showTimestamp: n = !0,
-    timestamp: o,
-    showStatus: r = !1,
-    status: c,
-    avatarProps: a,
-    className: d,
-    children: u
-  }, m) => {
-    const l = (v) => v ? typeof v == "string" ? v : v.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit"
-    }), i = (v) => {
-      switch (v) {
-        case "sending":
-          return "Sending...";
-        case "sent":
-          return "Sent";
-        case "error":
-          return "Failed to send";
-        default:
-          return "";
-      }
-    };
-    return n || r || u || a ? /* @__PURE__ */ _(
-      "div",
-      {
-        ref: m,
-        className: os({
-          variant: e,
-          position: s,
-          className: d
-        }),
-        "data-webchat-message-info": !0,
-        children: [
-          a && /* @__PURE__ */ t(me, { ...a }),
-          n && /* @__PURE__ */ t("span", { className: O.timestamp, children: l(o) }),
-          r && c && /* @__PURE__ */ t("span", { className: O.status, "data-status": c, children: i(c) })
-        ]
-      }
-    ) : null;
-  }
-), rs = "message-module__base___Ki7QB", is = "message-module__bot___vw-E6", cs = "message-module__agent___2wXra", ds = "message-module__user___BSpcY", us = "message-module__system___-jvsr", V = {
-  base: rs,
-  bot: is,
-  agent: cs,
-  user: ds,
-  system: us
-}, ms = $(V.base, {
-  variants: {
-    variant: {
-      user: V.user,
-      bot: V.bot,
-      system: V.system,
-      agent: V.agent
-    },
-    status: {
-      sending: V.sending,
-      sent: V.sent,
-      error: V.error
-    }
-  },
-  defaultVariants: { variant: "bot", status: "sent" }
-});
-function _s(e) {
-  const {
-    variant: s = "bot",
-    status: n = "sent",
-    showTimestamp: o = !0,
-    showStatus: r = !1,
-    avatarConfig: c,
-    className: a,
-    ...d
-  } = e;
-  return ee(() => {
-    const u = ms({
-      variant: s,
-      status: n,
-      className: a
-    });
-    if (!c)
-      return {
-        messageClasses: u,
-        bubbleProps: {
-          variant: s,
-          status: n,
-          ...d
-        },
-        infoProps: {
-          variant: s,
-          showTimestamp: o,
-          showStatus: r,
-          ...d
-        },
-        standaloneAvatarProps: null
-      };
-    const { placement: m, avatarProps: l } = c;
-    switch (m) {
-      case "bubble":
-        return {
-          messageClasses: u,
-          bubbleProps: {
-            variant: s,
-            status: n,
-            avatarProps: l,
-            ...d
-          },
-          infoProps: {
-            variant: s,
-            showTimestamp: o,
-            showStatus: r,
-            ...d
-          },
-          standaloneAvatarProps: null
-        };
-      case "info":
-        return {
-          messageClasses: u,
-          bubbleProps: {
-            variant: s,
-            status: n,
-            ...d
-          },
-          infoProps: {
-            variant: s,
-            showTimestamp: o,
-            showStatus: r,
-            avatarProps: l,
-            ...d
-          },
-          standaloneAvatarProps: null
-        };
-      case "standalone":
-        return {
-          messageClasses: u,
-          bubbleProps: {
-            variant: s,
-            status: n,
-            ...d
-          },
-          infoProps: {
-            variant: s,
-            showTimestamp: o,
-            showStatus: r,
-            ...d
-          },
-          standaloneAvatarProps: l
-        };
-      default:
-        return {
-          messageClasses: u,
-          bubbleProps: {
-            variant: s,
-            status: n,
-            ...d
-          },
-          infoProps: {
-            variant: s,
-            showTimestamp: o,
-            showStatus: r,
-            ...d
-          },
-          standaloneAvatarProps: null
-        };
-    }
-  }, [
-    s,
-    n,
-    o,
-    r,
-    c,
-    a,
-    d
-  ]);
-}
-const F = x(
-  (e, s) => {
-    const { messageClasses: n, bubbleProps: o, infoProps: r, standaloneAvatarProps: c } = _s(e);
-    return /* @__PURE__ */ _(
-      "div",
-      {
-        ref: s,
-        className: n,
-        "data-testid": `webchat-message-${e.variant || "bot"}`,
-        children: [
-          c && /* @__PURE__ */ t(me, { ...c }),
-          /* @__PURE__ */ t(qt, { ...o, children: e.children }),
-          /* @__PURE__ */ t(ls, { ...r })
-        ]
-      }
-    );
-  }
-), gs = "audio-message-module__audioMessageBase___Xye8T", hs = "audio-message-module__audioContainer___7ehUa", fs = "audio-message-module__audioControls___bPgRS", bs = "audio-message-module__playButton___zFi0C", vs = "audio-message-module__isPlaying___WQu2R", ps = "audio-message-module__playIcon___X2gd4", Cs = "audio-message-module__audioInfo___YeYsJ", ys = "audio-message-module__timeDisplay___zhXjk", ws = "audio-message-module__progressContainer___4gzGk", Ns = "audio-message-module__progressBar___TwMvE", S = {
-  audioMessageBase: gs,
-  audioContainer: hs,
-  audioControls: fs,
-  playButton: bs,
-  isPlaying: vs,
-  playIcon: ps,
-  audioInfo: Cs,
-  timeDisplay: ys,
-  progressContainer: ws,
-  progressBar: Ns
-}, Ms = x(
-  ({
-    src: e,
-    alt: s = "Audio message",
-    onAudioLoad: n,
-    onPlay: o,
-    onPause: r,
-    onEnded: c,
-    className: a,
-    ...d
-  }, u) => {
-    const m = T(null), [l, i] = M(!1), [f, v] = M(null), [h, b] = M(0), C = g(() => {
-      m.current && (v(m.current.duration), n?.());
-    }, [n]), p = g(() => {
-      m.current && b(m.current.currentTime);
-    }, []), A = g(() => {
-      i(!0), o?.();
-    }, [o]), H = g(() => {
-      i(!1), r?.();
-    }, [r]), w = g(() => {
-      i(!1), b(0), c?.();
-    }, [c]), re = g(() => {
-      m.current && (l ? m.current.pause() : m.current.play());
-    }, [l]), ie = g(
-      (K) => {
-        const Y = parseFloat(K.target.value);
-        m.current && (m.current.currentTime = Y, b(Y));
-      },
-      []
-    ), te = g((K) => {
-      const Y = Math.floor(K / 60), ce = Math.floor(K % 60);
-      return `${Y}:${ce.toString().padStart(2, "0")}`;
-    }, []);
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: u,
-        className: k(S.audioMessageBase, a),
-        ...d,
-        children: /* @__PURE__ */ _("div", { className: S.audioContainer, children: [
-          /* @__PURE__ */ t(
-            "audio",
-            {
-              ref: m,
-              src: e,
-              onLoadedMetadata: C,
-              onTimeUpdate: p,
-              onPlay: A,
-              onPause: H,
-              onEnded: w,
-              preload: "metadata"
-            }
-          ),
-          /* @__PURE__ */ _("div", { className: S.audioControls, children: [
-            /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                className: k(S.playButton, l && S.isPlaying),
-                onClick: re,
-                "aria-label": l ? "Pause audio" : "Play audio",
-                children: l ? /* @__PURE__ */ _(
-                  "svg",
-                  {
-                    className: S.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: S.playIcon,
-                    viewBox: "0 0 24 24",
-                    fill: "currentColor",
-                    children: /* @__PURE__ */ t("polygon", { points: "5,3 19,12 5,21" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ _("div", { className: S.audioInfo, children: [
-              /* @__PURE__ */ _("div", { className: S.timeDisplay, children: [
-                te(h),
-                " /",
-                " ",
-                f ? te(f) : "--:--"
-              ] }),
-              /* @__PURE__ */ t("div", { className: S.progressContainer, children: /* @__PURE__ */ t(
-                "input",
-                {
-                  type: "range",
-                  min: "0",
-                  max: f || 0,
-                  value: h,
-                  onChange: ie,
-                  className: S.progressBar,
-                  disabled: !f
-                }
-              ) })
-            ] })
-          ] })
-        ] })
-      }
-    );
-  }
-), xs = "button-message-module__buttonMessageBase___ZYxyt", Is = "button-message-module__buttonMessageContainer___HZsQh", Bs = "button-message-module__buttonGrid___KQjrj", Ps = "button-message-module__buttonText___8-9nw", se = {
-  buttonMessageBase: xs,
-  buttonMessageContainer: Is,
-  buttonGrid: Bs,
-  buttonText: Ps
-}, $s = x(
-  ({ text: e, buttons: s, buttonsPerRow: n = 2, className: o, ...r }, c) => {
-    const a = Math.min(n, s.length), d = (u) => {
-      "value" in u && s.find(
-        (l) => l.text === u.text && l.value === u.value
-      )?.onClick?.(u.value);
-    };
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: c,
-        className: k(se.buttonMessageBase, o),
-        ...r,
-        children: /* @__PURE__ */ _("div", { className: se.buttonMessageContainer, children: [
-          e && /* @__PURE__ */ t("div", { className: se.buttonText, children: e }),
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: se.buttonGrid,
-              style: {
-                gridTemplateColumns: `repeat(${a}, 1fr)`
-              },
-              children: s.map((u, m) => /* @__PURE__ */ t(
-                oe,
-                {
-                  text: u.text,
-                  disabled: u.disabled,
-                  button: { text: u.text, value: u.value },
-                  onClick: d,
-                  variant: "secondary"
-                },
-                m
-              ))
-            }
-          )
-        ] })
-      }
-    );
-  }
-), Ss = "carousel-message-module__carouselMessageBase___yV-Nd", Ts = "carousel-message-module__carouselContainer___32NGN", ks = "carousel-message-module__carouselElement___6Cucf", Ls = "carousel-message-module__imageContainer___-NYcV", Es = "carousel-message-module__elementImage___TEjVf", Ds = "carousel-message-module__elementContent___fQqqZ", Os = "carousel-message-module__elementTitle___sUPzb", As = "carousel-message-module__elementSubtitle___7yW9w", Rs = "carousel-message-module__buttonContainer___lPydV", D = {
-  carouselMessageBase: Ss,
-  carouselContainer: Ts,
-  carouselElement: ks,
-  imageContainer: Ls,
-  elementImage: Es,
-  elementContent: Ds,
-  elementTitle: Os,
-  elementSubtitle: As,
-  buttonContainer: Rs
-}, zs = x(
-  ({ elements: e, onButtonClick: s, onElementImageLoad: n, className: o, ...r }, c) => {
-    const a = g(
-      (u) => {
-        "type" in u && s?.(u);
-      },
-      [s]
-    ), d = g(
-      (u) => {
-        n?.(u);
-      },
-      [n]
-    );
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: c,
-        className: k(D.carouselMessageBase, o),
-        ...r,
-        children: /* @__PURE__ */ t("div", { className: D.carouselContainer, children: e.map((u, m) => /* @__PURE__ */ _(
-          "div",
-          {
-            className: D.carouselElement,
-            children: [
-              /* @__PURE__ */ t("div", { className: D.imageContainer, children: /* @__PURE__ */ t(
-                "img",
-                {
-                  src: u.image,
-                  alt: u.title,
-                  className: D.elementImage,
-                  onLoad: () => d(m)
-                }
-              ) }),
-              /* @__PURE__ */ _("div", { className: D.elementContent, children: [
-                /* @__PURE__ */ t("h3", { className: D.elementTitle, children: u.title }),
-                u.subtitle && /* @__PURE__ */ t("p", { className: D.elementSubtitle, children: u.subtitle }),
-                u.buttons.map((l, i) => /* @__PURE__ */ t(
-                  "div",
-                  {
-                    className: D.buttonContainer,
-                    children: /* @__PURE__ */ t(
-                      oe,
-                      {
-                        text: l.title,
-                        button: l,
-                        onClick: a,
-                        variant: "secondary"
-                      }
-                    )
-                  },
-                  `${u.title}-${u.subtitle || ""}-${l.title}-${i}`
-                ))
-              ] })
-            ]
-          },
-          `${u.title}-${u.subtitle || ""}-${m}`
-        )) })
-      }
-    );
-  }
-), Vs = "document-message-module__documentMessageBase___hqh5-", Ws = "document-message-module__documentContainer___AYtOi", Fs = "document-message-module__documentInfo___UiSqy", Hs = "document-message-module__documentIcon___Ti2QJ", js = "document-message-module__documentDetails___XDlt9", Us = "document-message-module__documentName___UsAgR", Ks = "document-message-module__documentMeta___5QVnf", Ys = "document-message-module__fileSize___qOdcA", Xs = "document-message-module__fileType___7EdaH", qs = "document-message-module__documentActions___7m0QP", Qs = "document-message-module__previewButton___gluoY", Gs = "document-message-module__downloadButton___J6HuC", Zs = "document-message-module__previewIcon___7HMaf", Js = "document-message-module__downloadIcon___Hg4tV", N = {
-  documentMessageBase: Vs,
-  documentContainer: Ws,
-  documentInfo: Fs,
-  documentIcon: Hs,
-  documentDetails: js,
-  documentName: Us,
-  documentMeta: Ks,
-  fileSize: Ys,
-  fileType: Xs,
-  documentActions: qs,
-  previewButton: Qs,
-  downloadButton: Gs,
-  previewIcon: Zs,
-  downloadIcon: Js
-}, en = x(
-  ({
-    src: e,
-    filename: s,
-    mimeType: n,
-    size: o,
-    alt: r = "Document",
-    onDocumentLoad: c,
-    onDownload: a,
-    className: d,
-    ...u
-  }, m) => {
-    const l = g(() => {
-      c?.();
-    }, [c]), i = g(() => {
-      const h = document.createElement("a");
-      h.href = e, h.download = s || "document", h.target = "_blank", h.rel = "noopener noreferrer", document.body.appendChild(h), h.click(), document.body.removeChild(h), a?.();
-    }, [e, s, a]), f = g((h) => {
-      if (!h) return "Unknown size";
-      const b = ["B", "KB", "MB", "GB"];
-      let C = h, p = 0;
-      for (; C >= 1024 && p < b.length - 1; )
-        C /= 1024, p++;
-      return `${C.toFixed(1)} ${b[p]}`;
-    }, []), v = g((h) => h ? h.startsWith("image/") ? "🖼️" : h.startsWith("video/") ? "🎥" : h.startsWith("audio/") ? "🎵" : h.includes("pdf") ? "📕" : h.includes("word") || h.includes("document") ? "📝" : h.includes("excel") || h.includes("spreadsheet") ? "📊" : h.includes("powerpoint") || h.includes("presentation") ? "📈" : h.includes("zip") || h.includes("archive") ? "📦" : (h.includes("text/"), "📄") : "📄", []);
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: m,
-        className: k(N.documentMessageBase, d),
-        ...u,
-        children: /* @__PURE__ */ _("div", { className: N.documentContainer, children: [
-          /* @__PURE__ */ _("div", { className: N.documentInfo, children: [
-            /* @__PURE__ */ t("div", { className: N.documentIcon, children: v(n) }),
-            /* @__PURE__ */ _("div", { className: N.documentDetails, children: [
-              /* @__PURE__ */ t("div", { className: N.documentName, children: s || "Document" }),
-              /* @__PURE__ */ _("div", { className: N.documentMeta, children: [
-                /* @__PURE__ */ t("span", { className: N.fileSize, children: f(o) }),
-                n && /* @__PURE__ */ t("span", { className: N.fileType, children: n.split("/")[1]?.toUpperCase() || n })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ _("div", { className: N.documentActions, children: [
-            /* @__PURE__ */ _(
-              "button",
-              {
-                type: "button",
-                className: N.previewButton,
-                onClick: l,
-                "aria-label": "Preview document",
-                children: [
-                  /* @__PURE__ */ t(
-                    "svg",
-                    {
-                      className: N.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__ */ _(
-              "button",
-              {
-                type: "button",
-                className: N.downloadButton,
-                onClick: i,
-                "aria-label": "Download document",
-                children: [
-                  /* @__PURE__ */ t(
-                    "svg",
-                    {
-                      className: N.downloadIcon,
-                      viewBox: "0 0 24 24",
-                      fill: "currentColor",
-                      children: /* @__PURE__ */ t("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
-                    }
-                  ),
-                  "Download"
-                ]
-              }
-            )
-          ] })
-        ] })
-      }
-    );
-  }
-), tn = "image-message-module__imageMessageBase___FDwNN", sn = "image-message-module__messageImage___JnXFb", fe = {
-  imageMessageBase: tn,
-  messageImage: sn
-}, nn = x(
-  ({ src: e, alt: s = "Attached image", onImageLoad: n, className: o, ...r }, c) => {
-    const a = g(() => {
-      n?.();
-    }, [n]), d = g(() => {
-      n?.();
-    }, [n]);
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: c,
-        className: k(fe.imageMessageBase, o),
-        ...r,
-        children: /* @__PURE__ */ t(
-          "img",
-          {
-            src: e,
-            alt: s,
-            className: fe.messageImage,
-            onLoad: a,
-            onError: d
-          }
-        )
-      }
-    );
-  }
-), an = "location-message-module__locationMessageBase___rY3d-", on = "location-message-module__locationContainer___9Rukw", ln = "location-message-module__locationContent___2BRdV", rn = "location-message-module__locationIcon___rjObu", cn = "location-message-module__locationInfo___NqVsR", dn = "location-message-module__locationTitle___RpUjH", un = "location-message-module__locationCoordinates___lLfuf", mn = "location-message-module__locationLink___Zq2I2", W = {
-  locationMessageBase: an,
-  locationContainer: on,
-  locationContent: ln,
-  locationIcon: rn,
-  locationInfo: cn,
-  locationTitle: dn,
-  locationCoordinates: un,
-  locationLink: mn
-}, _n = x(
-  ({
-    latitude: e,
-    longitude: s,
-    alt: n = "Location coordinates",
-    onLocationLoad: o,
-    className: r,
-    ...c
-  }, a) => {
-    const d = g(() => {
-      o?.();
-    }, [o]), u = `https://www.google.com/maps?q=${e},${s}`;
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: a,
-        className: k(W.locationMessageBase, r),
-        ...c,
-        children: /* @__PURE__ */ _("div", { className: W.locationContainer, children: [
-          /* @__PURE__ */ _("div", { className: W.locationContent, children: [
-            /* @__PURE__ */ t("div", { className: W.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__ */ _("div", { className: W.locationInfo, children: [
-              /* @__PURE__ */ t("div", { className: W.locationTitle, children: "Location" }),
-              /* @__PURE__ */ _("div", { className: W.locationCoordinates, children: [
-                e.toFixed(6),
-                ", ",
-                s.toFixed(6)
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ _(
-            "a",
-            {
-              href: u,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: W.locationLink,
-              onClick: d,
-              "aria-label": `Open location in Google Maps: ${e}, ${s}`,
-              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"
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    );
-  }
-), gn = "text-message-module__textMessageBase___p4r-t", hn = "text-message-module__textContent___yRb8d", be = {
-  textMessageBase: gn,
-  textContent: hn
-}, fn = x(
-  ({ text: e, className: s, ...n }, o) => /* @__PURE__ */ t(
-    F,
-    {
-      ref: o,
-      className: k(be.textMessageBase, s),
-      ...n,
-      children: /* @__PURE__ */ t("div", { className: be.textContent, children: e })
-    }
-  )
-), bn = "video-message-module__videoMessageBase___RX3Qk", vn = "video-message-module__videoContainer___ctZrR", pn = "video-message-module__videoElement___dYbDh", Cn = "video-message-module__videoControls___K4Xdt", yn = "video-message-module__controlsTop___6NCn9", wn = "video-message-module__controlsBottom___E3II8", Nn = "video-message-module__controlsLeft___feB6m", Mn = "video-message-module__controlsRight___9Wtf-", xn = "video-message-module__playButton___8LVrt", In = "video-message-module__isPlaying___z4Tf5", Bn = "video-message-module__playIcon___ert2Q", Pn = "video-message-module__timeDisplay___Rzmtn", $n = "video-message-module__progressContainer___U81jI", Sn = "video-message-module__progressBar___vX-3m", Tn = "video-message-module__volumeContainer___-mIlN", kn = "video-message-module__volumeIcon___x18vs", Ln = "video-message-module__volumeSlider___jAwcn", y = {
-  videoMessageBase: bn,
-  videoContainer: vn,
-  videoElement: pn,
-  videoControls: Cn,
-  controlsTop: yn,
-  controlsBottom: wn,
-  controlsLeft: Nn,
-  controlsRight: Mn,
-  playButton: xn,
-  isPlaying: In,
-  playIcon: Bn,
-  timeDisplay: Pn,
-  progressContainer: $n,
-  progressBar: Sn,
-  volumeContainer: Tn,
-  volumeIcon: kn,
-  volumeSlider: Ln
-}, En = x(
-  ({
-    src: e,
-    alt: s = "Video message",
-    onVideoLoad: n,
-    onPlay: o,
-    onPause: r,
-    onEnded: c,
-    className: a,
-    ...d
-  }, u) => {
-    const m = T(null), [l, i] = M(!1), [f, v] = M(null), [h, b] = M(0), [C, p] = M(1), [A, H] = M(!1), w = g(() => {
-      m.current && (v(m.current.duration), n?.());
-    }, [n]), re = g(() => {
-      m.current && b(m.current.currentTime);
-    }, []), ie = g(() => {
-      i(!0), o?.();
-    }, [o]), te = g(() => {
-      i(!1), r?.();
-    }, [r]), K = g(() => {
-      i(!1), b(0), c?.();
-    }, [c]), Y = g(() => {
-      m.current && (l ? m.current.pause() : m.current.play());
-    }, [l]), ce = g(
-      (R) => {
-        const j = parseFloat(R.target.value);
-        m.current && (m.current.currentTime = j, b(j));
-      },
-      []
-    ), Me = g(
-      (R) => {
-        const j = parseFloat(R.target.value);
-        m.current && (m.current.volume = j, p(j));
-      },
-      []
-    ), xe = g(() => {
-      H((R) => !R);
-    }, []), _e = g((R) => {
-      const j = Math.floor(R / 60), Ie = Math.floor(R % 60);
-      return `${j}:${Ie.toString().padStart(2, "0")}`;
-    }, []);
-    return /* @__PURE__ */ t(
-      F,
-      {
-        ref: u,
-        className: k(y.videoMessageBase, a),
-        ...d,
-        children: /* @__PURE__ */ _("div", { className: y.videoContainer, children: [
-          /* @__PURE__ */ t(
-            "video",
-            {
-              ref: m,
-              src: e,
-              onLoadedMetadata: w,
-              onTimeUpdate: re,
-              onPlay: ie,
-              onPause: te,
-              onEnded: K,
-              onClick: xe,
-              className: y.videoElement,
-              preload: "metadata",
-              poster: ""
-            }
-          ),
-          A && /* @__PURE__ */ _("div", { className: y.videoControls, children: [
-            /* @__PURE__ */ t("div", { className: y.controlsTop, children: /* @__PURE__ */ t("div", { className: y.progressContainer, children: /* @__PURE__ */ t(
-              "input",
-              {
-                type: "range",
-                min: "0",
-                max: f || 0,
-                value: h,
-                onChange: ce,
-                className: y.progressBar,
-                disabled: !f
-              }
-            ) }) }),
-            /* @__PURE__ */ _("div", { className: y.controlsBottom, children: [
-              /* @__PURE__ */ _("div", { className: y.controlsLeft, children: [
-                /* @__PURE__ */ t(
-                  "button",
-                  {
-                    type: "button",
-                    className: k(
-                      y.playButton,
-                      l && y.isPlaying
-                    ),
-                    onClick: Y,
-                    "aria-label": l ? "Pause video" : "Play video",
-                    children: l ? /* @__PURE__ */ _(
-                      "svg",
-                      {
-                        className: y.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: y.playIcon,
-                        viewBox: "0 0 24 24",
-                        fill: "currentColor",
-                        children: /* @__PURE__ */ t("polygon", { points: "5,3 19,12 5,21" })
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ _("div", { className: y.timeDisplay, children: [
-                  _e(h),
-                  " /",
-                  " ",
-                  f ? _e(f) : "--:--"
-                ] })
-              ] }),
-              /* @__PURE__ */ t("div", { className: y.controlsRight, children: /* @__PURE__ */ _("div", { className: y.volumeContainer, children: [
-                /* @__PURE__ */ t(
-                  "svg",
-                  {
-                    className: y.volumeIcon,
-                    viewBox: "0 0 24 24",
-                    fill: "currentColor",
-                    children: C === 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" }) : C < 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: C,
-                    onChange: Me,
-                    className: y.volumeSlider
-                  }
-                )
-              ] }) })
-            ] })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-function Dn({
-  messageActor: e,
-  baseProps: s = {}
-}) {
-  const { message: n, status: o } = B(e, (d) => ({
-    message: d.context?.message,
-    status: d.context?.status
-  })), r = B(
-    e,
-    (d) => d.can?.({ type: "RETRY" }) ?? !1
-  ), c = ee(() => {
-    if (!n)
-      return {
-        ...s,
-        variant: "bot",
-        status: "sent",
-        showTimestamp: !0,
-        isClickable: !1
-      };
-    const d = (() => {
-      switch (o) {
-        case "unsent":
-          return "sending";
-        case "sent":
-          return "sent";
-        case "failed":
-          return "error";
-        default:
-          return "sent";
-      }
-    })(), u = (() => {
-      switch (n.sent_by) {
-        case ne.User:
-          return "user";
-        case ne.Bot:
-          return "bot";
-        case ne.Agent:
-          return "agent";
-        default:
-          return "user";
-      }
-    })(), m = r ? () => e.send({ type: "RETRY" }) : void 0, l = u === "bot" ? s.botAvatarConfig ?? void 0 : u === "agent" ? s.agentAvatarConfig ?? void 0 : void 0;
-    return {
-      ...s,
-      variant: u,
-      status: d,
-      // timestamp: message.timestamp ? new Date(message.timestamp) : undefined,
-      showTimestamp: !0,
-      isClickable: r,
-      onPress: m,
-      avatarConfig: l
-      // Pre-computed, just pass it through
-    };
-  }, [n, o, r, e, s]), a = ee(
-    () => (d) => {
-      e.send({
-        type: "BUTTON_CLICKED",
-        button: d
-      });
-    },
-    [e]
-  );
-  return {
-    message: n,
-    status: o,
-    canRetry: r,
-    messageProps: c,
-    handleButtonClick: a
-  };
-}
-const On = ({
-  messageActor: e,
-  customMessageRenderer: s,
-  baseProps: n = {
-    customMessages: {}
-  },
-  onContentLoad: o,
-  onImageLoadStart: r,
-  onImageLoadComplete: c
-}) => {
-  const { message: a, messageProps: d, handleButtonClick: u } = Dn({
-    messageActor: e,
-    baseProps: n
-  });
-  return P(() => {
-    if (a && a.type === "image") {
-      const l = `img-${a.id}-${a.data}`;
-      r?.(l);
-    }
-  }, [a, r]), a ? /* @__PURE__ */ t(ve, { children: (() => {
-    const { id: l } = a;
-    if (a.isText())
-      return /* @__PURE__ */ t(fn, { ...d, text: a.data.text }, l);
-    if (a.isAudio())
-      return /* @__PURE__ */ t(
-        Ms,
-        {
-          ...d,
-          src: a.data.attachment_url ?? ""
-        },
-        l
-      );
-    if (a.isVideo())
-      return /* @__PURE__ */ t(
-        En,
-        {
-          ...d,
-          src: a.data.attachment_url ?? "",
-          alt: "Video",
-          onVideoLoad: () => {
-            o?.();
-          }
-        },
-        l
-      );
-    if (a.isDocument())
-      return /* @__PURE__ */ t(
-        en,
-        {
-          ...d,
-          src: a.data.attachment_url ?? "",
-          alt: "Document",
-          onDocumentLoad: () => {
-            o?.();
-          }
-        },
-        l
-      );
-    if (a.isLocation())
-      return /* @__PURE__ */ t(
-        _n,
-        {
-          ...d,
-          latitude: a.data.latitude,
-          longitude: a.data.longitude,
-          alt: "Location coordinates",
-          onLocationLoad: () => {
-            o?.();
-          }
-        },
-        l
-      );
-    if (a.isImage()) {
-      const i = `img-${l}-${a.data.attachment_url ?? ""}`;
-      return /* @__PURE__ */ t(
-        nn,
-        {
-          ...d,
-          src: a.data.attachment_url ?? "",
-          alt: "Image",
-          onImageLoad: () => {
-            o?.(), c?.(i);
-          }
-        },
-        l
-      );
-    }
-    return a.isButtonMessage() ? /* @__PURE__ */ t(
-      $s,
-      {
-        ...d,
-        text: a.data.text,
-        buttons: a.data.buttons?.map(
-          (i) => ({
-            text: i.title,
-            value: i.payload || i.title,
-            disabled: !1,
-            onClick: () => {
-              u(i);
-            }
-          })
-        )
-      },
-      l
-    ) : a.isCarousel() ? /* @__PURE__ */ t(
-      zs,
-      {
-        ...d,
-        elements: a.data.elements.map((i, f) => ({
-          id: `${l}-${f}`,
-          title: i.title,
-          subtitle: i.subtitle,
-          image: i.image,
-          buttons: i.buttons
-        })),
-        onButtonClick: (i) => {
-          u(i);
-        },
-        onElementImageLoad: () => {
-          o?.();
-        }
-      },
-      l
-    ) : a.isCustom() ? s ? s(a, a.data, u) : (console.warn(
-      `Custom message renderer not provided for message type: ${a.type}`
-    ), null) : (console.warn(`Unknown message type: ${a.type}`), null);
-  })() }) : null;
-}, An = "typing-indicator-module__typingIndicator___2hMSH", Rn = "typing-indicator-module__typingDots___Sy7xC", zn = "typing-indicator-module__typingDot___SdRIv", Z = {
-  typingIndicator: An,
-  typingDots: Rn,
-  typingDot: zn
-}, Vn = ({
-  isVisible: e = !1,
-  className: s
-}) => e ? /* @__PURE__ */ t(
-  "div",
-  {
-    "data-testid": "typing-indicator",
-    className: `${Z.typingIndicator} ${s || ""}`,
-    children: /* @__PURE__ */ _("div", { className: Z.typingDots, children: [
-      /* @__PURE__ */ t("div", { className: Z.typingDot }),
-      /* @__PURE__ */ t("div", { className: Z.typingDot }),
-      /* @__PURE__ */ t("div", { className: Z.typingDot })
-    ] })
-  }
-) : null;
-function Wn(e) {
-  return ee(() => {
-    if (!e)
-      return { bot: null, agent: null };
-    const s = (n, o) => {
-      if (!n) return null;
-      const r = {
-        variant: o,
-        src: n.src,
-        alt: n.alt,
-        svg: n.svg,
-        showName: n.showName,
-        name: n.name
-      };
-      return {
-        placement: n.placement,
-        avatarProps: r
-      };
-    };
-    return {
-      bot: s(e.bot, "bot"),
-      agent: s(e.agent, "agent")
-    };
-  }, [e]);
-}
-function Fn(e, s, n) {
-  const {
-    variant: o = "default",
-    "aria-label": r,
-    className: c,
-    ...a
-  } = e, d = B(
-    s.controller.machine,
-    (l) => {
-      const i = l.context.messageActors;
-      return i ? Array.from(i.values()) : [];
-    },
-    (l, i) => l.length === i.length
-  ), u = Wn(s.avatarConfig), m = B(
-    s.controller.machine,
-    (l) => l.context.isTypingOn,
-    (l, i) => l === i
-  );
-  return {
-    // Props to spread on wrapper element
-    messagesProps: {
-      ...a,
-      ref: n,
-      "aria-label": r || `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: u.bot,
-      agentAvatarConfig: u.agent
-    },
-    // CSS class variants
-    variants: {
-      variant: o,
-      className: c
-    }
-  };
-}
-const Hn = "webchat-messages-module__base___V7acY", J = {
-  base: Hn,
-  "messages-container": "webchat-messages-module__messages-container___Ew2gS",
-  "typing-indicator-container": "webchat-messages-module__typing-indicator-container___v3bpq",
-  default: "webchat-messages-module__default___3C2qm"
-}, jn = $(J.base, {
-  variants: {
-    variant: {
-      default: J.default
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-function Un({
-  messageActors: e,
-  isTyping: s,
-  customMessages: n,
-  botAvatarConfig: o,
-  agentAvatarConfig: r
-}) {
-  const c = T(null);
-  P(() => {
-    if (c.current) {
-      const d = c.current;
-      requestAnimationFrame(() => {
-        d.scrollTo({
-          top: d.scrollHeight,
-          behavior: "smooth"
-        });
-      });
-    }
-  }, [e.length, s]);
-  const a = pe.useCallback(
-    (d, u, m) => {
-      const l = d;
-      if (l.type === "custom" && l.data && n) {
-        const i = n[l.data.name];
-        if (i && typeof i == "function")
-          return i({
-            ...l.data.props,
-            onButtonClick: m
-          });
-      }
-      return null;
-    },
-    [n]
-  );
-  return /* @__PURE__ */ _(
-    "div",
-    {
-      ref: c,
-      className: J["messages-container"],
-      "data-testid": "webchat-messages-list",
-      children: [
-        e && e.length > 0 && e.map((d) => /* @__PURE__ */ t(
-          On,
-          {
-            messageActor: d,
-            customMessageRenderer: a,
-            baseProps: {
-              className: J.message,
-              // Pre-computed avatar configs (performance optimization)
-              botAvatarConfig: o,
-              agentAvatarConfig: r
-            }
-          },
-          d.id
-        )),
-        s && /* @__PURE__ */ t("div", { className: J["typing-indicator-container"], children: /* @__PURE__ */ t(Vn, { isVisible: s }) })
-      ]
-    }
-  );
-}
-function Kn(e) {
-  const { state: s } = Q(), n = T(null), { messagesProps: o, messageListProps: r, variants: c } = Fn(
-    e,
-    s,
-    n
-  ), { ...a } = e;
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      ...o,
-      ...a,
-      className: jn(c),
-      "data-webchat-messages": !0,
-      children: /* @__PURE__ */ t(
-        Un,
-        {
-          ...r,
-          customMessages: s.customMessages
-        }
-      )
-    }
-  );
-}
-function Yn({
-  isOpen: e,
-  onClose: s,
-  onControllerReady: n,
-  title: o = "Chat",
-  placeholder: r = "Type a message...",
-  coverRegistry: c
-}) {
-  const { controller: a } = Q(), d = T(!1);
-  return P(() => {
-    a && !d.current && (d.current = !0, n?.(a));
-  }, [a, n]), P(() => {
-    if (!a) return;
-    const l = a.machine.getSnapshot().context.isOpen ?? !1;
-    e && !l ? a.open() : !e && l && a.close();
-  }, [e, a]), /* @__PURE__ */ _(pt, { layout: "default", coverRegistry: c, children: [
-    /* @__PURE__ */ t(Mt, { title: o, onClose: () => {
-      a?.close(), s?.();
-    } }),
-    /* @__PURE__ */ t(Kn, { variant: "default" }),
-    /* @__PURE__ */ t(Pt, { placeholder: r, variant: "default" })
-  ] });
-}
-function Xn({
-  appId: e,
-  isOpen: s,
-  onClose: n,
-  onControllerReady: o,
-  title: r,
-  placeholder: c,
-  customMessages: a = {},
-  avatarConfig: d,
-  coverRegistry: u,
-  // Note: showTrigger is accepted but not implemented yet (reserved for future use)
-  ...m
-}) {
-  return /* @__PURE__ */ t(
-    Le,
-    {
-      appId: e,
-      customMessages: a,
-      avatarConfig: d,
-      ...m,
-      children: /* @__PURE__ */ t(
-        Yn,
-        {
-          isOpen: s,
-          onClose: n,
-          onControllerReady: o,
-          title: r,
-          placeholder: c,
-          coverRegistry: u
-        }
-      )
-    }
-  );
-}
-const ta = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  WebchatApp: Xn
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  oe as B,
-  F as M,
-  ht as O,
-  Vn as T,
-  Xn as W,
-  qt as a,
-  On as b,
-  He as c,
-  et as d,
-  Ne as e,
-  Ye as f,
-  ct as g,
-  Je as h,
-  pt as i,
-  Mt as j,
-  Pt as k,
-  Kn as l,
-  Le as m,
-  le as n,
-  rt as o,
-  ft as p,
-  Q as q,
-  Ct as r,
-  xt as s,
-  Fn as t,
-  mt as u,
-  ke as v,
-  ta as w
-};