@botonic/webchat-react 2.23.1

package/webchat-app-CtAHJapU.js

@@ -0,0 +1,2285 @@
+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
+};