@botonic/webchat-react 2.23.2 → 2.25.0

package/webchat-app-BUGnjp8Q.js

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