@sensiblestats/widget-react 0.43.0 → 0.44.0

package/dist/index.js

@@ -279,6 +279,18 @@ function isTerminal(result) {
   if (result.status === "price_changed") return result.accepted;
   return result.status === "added" || result.status === "duplicate";
 }
+function slipOutcome(result) {
+  if (!result) return "added";
+  switch (result.status) {
+    case "added":
+    case "duplicate":
+      return result.status;
+    case "price_changed":
+      return result.accepted ? "added" : "price_changed";
+    case "rejected":
+      return result.reason;
+  }
+}
 function resultToToast(result, shownOdds, ui) {
   if (!result) return { kind: "success", text: ui.slipAdded };
   switch (result.status) {
@@ -300,8 +312,28 @@ import { ENTITY_TYPE_CODES } from "@sensiblestats/widget-sdk";
 function isSignalEntityType(value) {
   return Object.prototype.hasOwnProperty.call(ENTITY_TYPE_CODES, value);
 }
-function createDashboardTapSignal(sendSignal) {
+function toWidgetEntityType(value) {
+  switch (value.toLowerCase()) {
+    case "match":
+      return "match";
+    case "team":
+      return "team";
+    case "player":
+      return "player";
+    case "competition":
+      return "competition";
+    case "market":
+      return "market";
+    default:
+      return null;
+  }
+}
+function createDashboardTapSignal(sendSignal, log) {
   return (tile, index, layout) => {
+    const widgetEntityType = toWidgetEntityType(tile.signal.entityType);
+    if (widgetEntityType) {
+      log?.log({ name: "tile_tap", entityType: widgetEntityType, entityId: tile.signal.entityId });
+    }
     if (!isSignalEntityType(tile.signal.entityType)) return;
     try {
       void sendSignal({
@@ -1373,6 +1405,13 @@ function useLiveMonitor(opts) {
   };
 }
 
+// src/eventLogContext.ts
+import { createContext, useContext } from "react";
+var EventLogContext = createContext(null);
+function useEventLog() {
+  return useContext(EventLogContext);
+}
+
 // src/components/ChatFab.tsx
 import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 
@@ -1701,19 +1740,32 @@ function withTimeout(value) {
     new Promise((_, reject) => setTimeout(() => reject(new Error("add-to-slip timed out")), ADD_TO_SLIP_TIMEOUT_MS))
   ]);
 }
-function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
+function SlipButton({ selection, shownOdds, marketName, marketDeveloperName, slip, ui }) {
   const [pending, setPending] = useState6(false);
   const [settled, setSettled] = useState6(false);
   const [toast, setToast] = useState6(null);
   const dismiss = useCallback3(() => setToast(null), []);
+  const log = useEventLog();
   const handler = slip.onAddToSlip;
   if (!ui || !handler || !selection) return null;
   const onClick = async () => {
     setPending(true);
+    if (marketDeveloperName !== void 0) {
+      log?.log({ name: "slip_click", entityType: "market", marketDeveloperName, entityId: marketDeveloperName });
+    }
     try {
       const raw = await withTimeout(Promise.resolve(handler(selection)));
       if (raw != null && !isAddToSlipResult(raw)) throw new Error("malformed add-to-slip result");
       const result = raw ?? void 0;
+      if (marketDeveloperName !== void 0) {
+        log?.log({
+          name: "slip_result",
+          entityType: "market",
+          marketDeveloperName,
+          entityId: marketDeveloperName,
+          outcome: slipOutcome(result)
+        });
+      }
       setToast(resultToToast(result, shownOdds || selection.oddsDecimal.toFixed(2), ui));
       setSettled(isTerminal(result));
       if (wasAdded(result) && slip.onMarketClicked) {
@@ -1723,6 +1775,9 @@ function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
         }
       }
     } catch {
+      if (marketDeveloperName !== void 0) {
+        log?.log({ name: "slip_result", entityType: "market", marketDeveloperName, entityId: marketDeveloperName, outcome: "timeout" });
+      }
       setToast({ kind: "error", text: ui.slipFailed });
     } finally {
       setPending(false);
@@ -1744,7 +1799,17 @@ function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
 }
 function AddToSlipButton({ it, slip, ui }) {
   const selection = it.addToSlipEnabled ? toSlipSelection(it, slip.conversationId) : null;
-  return /* @__PURE__ */ jsx9(SlipButton, { selection, shownOdds: it.odds ?? "", marketName: it.market, slip, ui });
+  return /* @__PURE__ */ jsx9(
+    SlipButton,
+    {
+      selection,
+      shownOdds: it.odds ?? "",
+      marketName: it.market,
+      marketDeveloperName: it.marketDeveloperName,
+      slip,
+      ui
+    }
+  );
 }
 
 // src/components/OddsMovementBadge.tsx
@@ -1794,13 +1859,21 @@ var PIN_GLYPHS = {
 function PinToggle({ pin, monitor, ui }) {
   const [toast, setToast] = useState8(null);
   const dismiss = useCallback4(() => setToast(null), []);
+  const log = useEventLog();
   if (!monitor || !monitor.enabled) return null;
   const key = pinKey(pin);
   const pinned = monitor.isPinned(key);
   const labels = pin.kind === "match" ? { pin: ui.matchPinLabel, unpin: ui.matchUnpinLabel } : { pin: ui.pinLabel, unpin: ui.unpinLabel };
   const onClick = () => {
     const result = monitor.togglePin({ ...pin, key });
-    if (result === "match_limit") {
+    if ((result === "added" || result === "removed") && (pin.kind === "match" || pin.marketDeveloperName !== void 0)) {
+      log?.log({
+        name: result === "added" ? "pin_add" : "pin_remove",
+        entityType: pin.kind === "match" ? "match" : "market",
+        entityId: pin.kind === "match" ? String(pin.matchId) : pin.marketDeveloperName,
+        marketDeveloperName: pin.marketDeveloperName
+      });
+    } else if (result === "match_limit") {
       setToast({ kind: "error", text: ui.matchLimitToast });
     } else if (result === "market_limit") {
       setToast({ kind: "error", text: ui.marketLimitToast });
@@ -1857,11 +1930,19 @@ function hasStatsContent(it) {
 }
 function ReasonStrip({ it, ui }) {
   const [open, setOpen] = useState9(false);
+  const log = useEventLog();
   const hasScopes = !!it.scopes && it.scopes.length >= 2;
   const hasStats = hasStatsContent(it);
   const hasText = !!it.text;
   if (!hasText && !hasStats) return null;
   const expandable = hasStats || (it.text?.length ?? 0) > 90;
+  const onToggle = () => {
+    setOpen((v) => {
+      const next = !v;
+      if (next) log?.log({ name: "insight_expand", entityType: "match", entityId: String(it.matchId) });
+      return next;
+    });
+  };
   return /* @__PURE__ */ jsxs9("div", { className: "ss-w-bi-reason", children: [
     /* @__PURE__ */ jsx13("span", { className: "ss-w-bi-chart", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs9("div", { className: "ss-w-bi-reason-body", children: [
@@ -1875,7 +1956,7 @@ function ReasonStrip({ it, ui }) {
         className: "ss-w-bi-expand",
         "aria-expanded": open,
         "aria-label": open ? ui?.hideStats ?? "Hide stats" : ui?.showStats ?? "Show stats",
-        onClick: () => setOpen((v) => !v),
+        onClick: onToggle,
         children: /* @__PURE__ */ jsx13("span", { className: `ss-w-bi-arrow${open ? " ss-w-bi-arrow-open" : ""}`, "aria-hidden": "true" })
       }
     ) : null
@@ -1981,7 +2062,7 @@ function OddsRow({ vm, row, ui, slip, inSlipIds }) {
       "\u2713 ",
       ui.inSlipLabel
     ] }) : null,
-    /* @__PURE__ */ jsx14(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
+    /* @__PURE__ */ jsx14(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, marketDeveloperName: vm.marketDeveloperName, slip, ui })
   ] });
 }
 function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }) {
@@ -3167,7 +3248,7 @@ function MarketAccordion({ match, monitor, ui, slip }) {
   if (markets.length === 0) return null;
   const open = monitor.openMarket[match.matchId] ?? null;
   return /* @__PURE__ */ jsx46("div", { className: "ss-w-acc", children: markets.map((m) => {
-    const isOpen = open === m.marketDeveloperName;
+    const isOpen = open === m.marketDeveloperName && !m.suspended;
     const key = `${match.matchId}:${m.marketDeveloperName}`;
     const entry = monitor.marketOdds[key];
     return /* @__PURE__ */ jsxs41("div", { className: isOpen ? "ss-w-acc-row ss-w-acc-row-open" : "ss-w-acc-row", children: [
@@ -3176,11 +3257,12 @@ function MarketAccordion({ match, monitor, ui, slip }) {
           "button",
           {
             type: "button",
-            className: "ss-w-acc-toggle",
+            className: m.suspended ? "ss-w-acc-toggle ss-w-acc-toggle--susp" : "ss-w-acc-toggle",
             "aria-expanded": isOpen,
+            disabled: m.suspended,
             onClick: () => monitor.toggleMarket(match.matchId, m.marketDeveloperName),
             children: [
-              /* @__PURE__ */ jsx46("span", { className: "ss-w-acc-chevron", children: isOpen ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ jsx46("span", { className: "ss-w-acc-chevron", children: m.suspended ? "" : isOpen ? "\u25BE" : "\u25B8" }),
               /* @__PURE__ */ jsx46("span", { className: "ss-w-acc-label", children: m.marketLabel }),
               m.hasInsight && /* @__PURE__ */ jsx46("span", { className: "ss-w-acc-badge", children: "\u2605" }),
               m.suspended && /* @__PURE__ */ jsx46("span", { className: "ss-w-acc-susp", children: ui.accordionSuspended })
@@ -3312,6 +3394,7 @@ function MonitorMatchCard({ match, promotedPins, monitor, ui, slip }) {
                 selection,
                 shownOdds: typeof row.market.price === "number" ? row.market.price.toFixed(2) : "",
                 marketName: row.market.marketLabel,
+                marketDeveloperName: row.market.marketDeveloperName,
                 slip,
                 ui
               }
@@ -4287,6 +4370,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */
 .ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }
 .ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }
+/* Suspended: the row stays listed (knowing a market is off is useful) but is not tappable --
+   its card is unservable, so a pointer cursor would promise something that cannot load. */
+.ss-w-acc-toggle--susp { cursor: default; color: var(--ss-w-faint); }
 .ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }
 .ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }
@@ -4323,6 +4409,13 @@ function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
   const built = useMemo2(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const logger = useMemo2(
+    () => built ? built.client.createEventLogger({
+      operatorUserId: cfg?.userContext?.operatorUserId,
+      anonymousUserId: cfg?.userContext?.anonymousUserId
+    }) : null,
+    [built?.client]
+  );
   const ui = useMemo2(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
   const rootRef = useRef8(null);
   const introDoneRef = useRef8(false);
@@ -4361,9 +4454,33 @@ function StatsWidget(props) {
     [props.config?.onAddToSlip, controller.state.conversationId, built, monitor.markInSlip]
   );
   const onDashboardTap = useMemo2(
-    () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input)) : void 0,
-    [built]
+    () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input), logger) : void 0,
+    [built, logger]
   );
+  const operatorUserId = cfg?.userContext?.operatorUserId;
+  const anonymousUserId = cfg?.userContext?.anonymousUserId;
+  const conversationId = controller.state.conversationId ?? void 0;
+  useEffect11(() => {
+    if (!logger) return;
+    logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
+  }, [logger, operatorUserId, anonymousUserId, conversationId]);
+  useEffect11(() => {
+    if (!logger) return;
+    const onHide = () => {
+      logger.flushOnHide();
+    };
+    const onVisibilityHide = () => {
+      if (document.visibilityState === "hidden") logger.flushOnHide();
+    };
+    window.addEventListener("pagehide", onHide);
+    document.addEventListener("visibilitychange", onVisibilityHide);
+    return () => {
+      window.removeEventListener("pagehide", onHide);
+      document.removeEventListener("visibilitychange", onVisibilityHide);
+      logger.flushOnHide();
+      logger.dispose();
+    };
+  }, [logger]);
   useEffect11(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
@@ -4371,7 +4488,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ jsx50("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx50(ChatPanel, { controller, ui, slip, onDashboardTap, monitor: monitor.enabled ? monitor : void 0 }) : /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx50(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ jsx50("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx50(ChatPanel, { controller, ui, slip, onDashboardTap, monitor: monitor.enabled ? monitor : void 0 }) : /* @__PURE__ */ jsx50(
     ChatFab,
     {
       label: ui.launcherLabel,
@@ -4384,7 +4501,7 @@ function StatsWidget(props) {
       introAllowed: !introDoneRef.current,
       onIntroStart: markIntroDone
     }
-  ) });
+  ) }) });
 }
 function emptyConversation() {
   return { send: () => {