@sensiblestats/widget-react 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @sensiblestats/widget-react
 
+## 0.7.0
+
+### Minor Changes
+
+- Add to slip on betting insight cards.
+
+  The operator supplies an `onAddToSlip` callback; the widget hands it one selection
+  keyed by `matchOddsId` (the operator's own odds-row id) and maps the callback's
+  typed result to a localized (en/tr) toast. Two server fields drive it:
+  `odds.matchOddsId` and the per-operator gate `addToSlipEnabled` — the button
+  renders only when the gate is true, a handler is supplied, and the insight carries
+  a usable odds id. The widget never touches stake, balance, or bet placement.
+
+  - **widget-sdk:** add `SlipSelection`, `AddToSlipResult`, `AddToSlipRejectReason`,
+    and the `isAddToSlipResult` runtime guard; extend `BettingInsight` with
+    `addToSlipEnabled` and `odds.matchOddsId`.
+  - **widget-react:** add `AddToSlipButton` and `Toast`, the `slip.ts` result→toast
+    mapping (which honours `price_changed.accepted`), en/tr copy, `conversationId`
+    capture on `turn_complete`, and the `onAddToSlip` config entry. Malformed
+    results, throws, and a 10s timeout all fail closed to a retryable button.
+  - **widget-embed:** re-bundles widget-react, so it is republished. Add-to-slip is
+    not exposed to script-tag hosts, because a callback cannot be expressed in a
+    `data-*` attribute.
+
+  This shipped to master in `dd2da0e1` (#248) but never reached npm, because the
+  version was not bumped in the merged commit and the release workflow's
+  `--tolerate-republish` therefore skipped every package.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.6.0
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -36,8 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react7 = require("react");
-var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
+var import_react9 = require("react");
+var import_widget_sdk4 = require("@sensiblestats/widget-sdk");
 
 // src/i18n.ts
 var STRINGS = {
@@ -54,7 +54,16 @@ var STRINGS = {
     showLess: "Show less",
     showMore: (n) => `Show ${n} more`,
     oddsLabel: "Odds",
-    liveLabel: "Live"
+    liveLabel: "Live",
+    addToSlip: "Add to slip",
+    inSlip: "In slip",
+    slipAdded: (n) => n === void 0 ? "Added to slip" : `Added to slip (${n} selection${n === 1 ? "" : "s"})`,
+    slipDuplicate: "Already in your slip",
+    slipPriceChanged: (from, to) => `Added at ${to} (was ${from})`,
+    slipPriceNotAccepted: (from, to) => `Price moved to ${to} (was ${from}). Tap to add.`,
+    slipLoginRequired: "Sign in to add to your slip",
+    slipSuspended: "Market suspended",
+    slipFailed: "Couldn't add to slip. Try again."
   },
   tr: {
     launcherLabel: "SensibleStats ile sohbet et",
@@ -69,7 +78,16 @@ var STRINGS = {
     showLess: "Daha az g\xF6ster",
     showMore: (n) => `${n} tane daha g\xF6ster`,
     oddsLabel: "Oran",
-    liveLabel: "Canl\u0131"
+    liveLabel: "Canl\u0131",
+    addToSlip: "Kupona ekle",
+    inSlip: "Kuponda",
+    slipAdded: (n) => n === void 0 ? "Kupona eklendi" : `Kupona eklendi (${n} se\xE7im)`,
+    slipDuplicate: "Bu se\xE7im kuponunuzda zaten var",
+    slipPriceChanged: (from, to) => `${to} oran\u0131yla eklendi (\xF6nceki ${from})`,
+    slipPriceNotAccepted: (from, to) => `Oran ${to} oldu (\xF6nceki ${from}). Eklemek i\xE7in dokunun.`,
+    slipLoginRequired: "Kupona eklemek i\xE7in giri\u015F yap\u0131n",
+    slipSuspended: "Bu market ask\u0131ya al\u0131nd\u0131",
+    slipFailed: "Kupona eklenemedi. Tekrar deneyin."
   }
 };
 function resolveLocaleStrings(locale) {
@@ -101,7 +119,16 @@ function normalizeUi(cfg) {
     showLess: strings.showLess,
     showMore: strings.showMore,
     oddsLabel: strings.oddsLabel,
-    liveLabel: strings.liveLabel
+    liveLabel: strings.liveLabel,
+    addToSlip: strings.addToSlip,
+    inSlip: strings.inSlip,
+    slipAdded: strings.slipAdded,
+    slipDuplicate: strings.slipDuplicate,
+    slipPriceChanged: strings.slipPriceChanged,
+    slipPriceNotAccepted: strings.slipPriceNotAccepted,
+    slipLoginRequired: strings.slipLoginRequired,
+    slipSuspended: strings.slipSuspended,
+    slipFailed: strings.slipFailed
   };
 }
 function toClientOptions(cfg) {
@@ -181,6 +208,8 @@ function toInsightVM(insight) {
   const selection = [str(insight.selectionLabel), str(insight.line)].filter(Boolean).join(" ") || void 0;
   const value = insight.odds?.value;
   const odds = typeof value === "number" && Number.isFinite(value) ? value.toFixed(2) : void 0;
+  const oddsValue = insight.odds?.value;
+  const matchOddsId = typeof insight.odds?.matchOddsId === "number" ? insight.odds.matchOddsId : void 0;
   const home = str(insight.homeTeamName);
   const away = str(insight.awayTeamName);
   const fixture = home && away ? `${home} vs ${away}` : void 0;
@@ -200,14 +229,31 @@ function toInsightVM(insight) {
     scopes,
     text: str(insight.text) ?? "",
     stats: readStatCells(insight.stats),
-    disclaimer: str(insight.disclaimer)
+    disclaimer: str(insight.disclaimer),
+    matchId: typeof insight.matchId === "number" ? insight.matchId : 0,
+    matchOddsId,
+    addToSlipEnabled: insight.addToSlipEnabled === true,
+    oddsDecimal: typeof oddsValue === "number" && Number.isFinite(oddsValue) ? oddsValue : void 0,
+    quotedAtUtc: str(insight.odds?.quotedAtUtc)
+  };
+}
+function toSlipSelection(vm, conversationId) {
+  if (vm.matchOddsId === void 0 || vm.oddsDecimal === void 0) return null;
+  const selection = {
+    matchOddsId: vm.matchOddsId,
+    matchId: vm.matchId,
+    oddsDecimal: vm.oddsDecimal
   };
+  if (vm.quotedAtUtc !== void 0) selection.quotedAtUtc = vm.quotedAtUtc;
+  if (vm.id !== void 0) selection.insightId = vm.id;
+  if (conversationId !== void 0) selection.conversationId = conversationId;
+  return selection;
 }
 
 // src/reducer.ts
 var POPUP_MAX = 160;
 function initialState(starters) {
-  return { isOpen: false, messages: [], isStreaming: false, status: null, actionsLoading: false, starters, error: null, lastUserInput: null, lastDisplayText: null, popupText: null };
+  return { isOpen: false, messages: [], isStreaming: false, status: null, actionsLoading: false, starters, error: null, lastUserInput: null, lastDisplayText: null, popupText: null, conversationId: null };
 }
 function activeTurn(state) {
   const last = state.messages[state.messages.length - 1];
@@ -244,7 +290,15 @@ function applyEvent(state, event) {
       const active = activeTurn(state);
       const text = active?.text.trim() ?? "";
       const popupText = active?.isGreeting && !state.isOpen && text ? text.slice(0, POPUP_MAX) : state.popupText;
-      return { ...state, isStreaming: false, status: null, actionsLoading: false, popupText, messages: mapActive(state, (t) => ({ ...t, done: true })) };
+      return {
+        ...state,
+        isStreaming: false,
+        status: null,
+        actionsLoading: false,
+        popupText,
+        conversationId: event.data.conversationId ?? state.conversationId,
+        messages: mapActive(state, (t) => ({ ...t, done: true }))
+      };
     }
     case "error": {
       const suppress = activeTurn(state)?.isGreeting === true;
@@ -387,7 +441,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -400,7 +454,7 @@ function ChatHeader({ onClose, closeLabel = "Close chat" }) {
 }
 
 // src/components/MessageList.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/components/Markdown.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
@@ -454,94 +508,194 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
 }
 
 // src/components/BettingInsightList.tsx
+var import_react5 = require("react");
+
+// src/components/AddToSlipButton.tsx
+var import_react4 = require("react");
+var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
+
+// src/slip.ts
+var ADD_TO_SLIP_TIMEOUT_MS = 1e4;
+function wasAdded(result) {
+  if (!result) return true;
+  if (result.status === "price_changed") return result.accepted;
+  return result.status === "added";
+}
+function isTerminal(result) {
+  if (!result) return true;
+  if (result.status === "price_changed") return result.accepted;
+  return result.status === "added" || result.status === "duplicate";
+}
+function resultToToast(result, shownOdds, ui) {
+  if (!result) return { kind: "success", text: ui.slipAdded(void 0) };
+  switch (result.status) {
+    case "added":
+      return { kind: "success", text: ui.slipAdded(result.slip?.selectionCount) };
+    case "duplicate":
+      return { kind: "success", text: ui.slipDuplicate };
+    case "price_changed":
+      return result.accepted ? { kind: "success", text: ui.slipPriceChanged(shownOdds, result.newOddsDecimal.toFixed(2)) } : { kind: "error", text: ui.slipPriceNotAccepted(shownOdds, result.newOddsDecimal.toFixed(2)) };
+    case "rejected":
+      if (result.reason === "login_required") return { kind: "error", text: ui.slipLoginRequired };
+      if (result.reason === "suspended") return { kind: "error", text: ui.slipSuspended };
+      return { kind: "error", text: result.message ?? ui.slipFailed };
+  }
+}
+
+// src/components/Toast.tsx
 var import_react3 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var DISMISS_MS = 4e3;
+function Toast({ toast, onDismiss }) {
+  (0, import_react3.useEffect)(() => {
+    if (!toast) return;
+    const timer = setTimeout(onDismiss, DISMISS_MS);
+    return () => clearTimeout(timer);
+  }, [toast, onDismiss]);
+  if (!toast) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `ss-w-toast ss-w-toast-${toast.kind}`, role: "status", "aria-live": "polite", children: toast.text });
+}
+
+// src/components/AddToSlipButton.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function withTimeout(value) {
+  return Promise.race([
+    value,
+    new Promise((_, reject) => setTimeout(() => reject(new Error("add-to-slip timed out")), ADD_TO_SLIP_TIMEOUT_MS))
+  ]);
+}
+function AddToSlipButton({ it, slip, ui }) {
+  const [pending, setPending] = (0, import_react4.useState)(false);
+  const [settled, setSettled] = (0, import_react4.useState)(false);
+  const [toast, setToast] = (0, import_react4.useState)(null);
+  const dismiss = (0, import_react4.useCallback)(() => setToast(null), []);
+  const handler = slip.onAddToSlip;
+  const selection = it.addToSlipEnabled ? toSlipSelection(it, slip.conversationId) : null;
+  if (!ui || !handler || !selection) return null;
+  const onClick = async () => {
+    setPending(true);
+    try {
+      const raw = await withTimeout(Promise.resolve(handler(selection)));
+      if (raw != null && !(0, import_widget_sdk3.isAddToSlipResult)(raw)) throw new Error("malformed add-to-slip result");
+      const result = raw ?? void 0;
+      setToast(resultToToast(result, it.odds ?? selection.oddsDecimal.toFixed(2), ui));
+      setSettled(isTerminal(result));
+      if (wasAdded(result) && slip.onMarketClicked) {
+        try {
+          slip.onMarketClicked(it.market);
+        } catch {
+        }
+      }
+    } catch {
+      setToast({ kind: "error", text: ui.slipFailed });
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ss-w-slip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-slip-btn",
+        disabled: pending || settled,
+        onClick,
+        children: settled ? ui.inSlip : ui.addToSlip
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Toast, { toast, onDismiss: dismiss })
+  ] });
+}
+
+// src/components/BettingInsightList.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MAX_ROWS = 3;
 function StatRows({ stats, ui }) {
-  const [expanded, setExpanded] = (0, import_react3.useState)(false);
+  const [expanded, setExpanded] = (0, import_react5.useState)(false);
   const shown = expanded ? stats : stats.slice(0, MAX_ROWS);
   const overflow = stats.length - MAX_ROWS;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-bi-rows", children: [
-    shown.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-bi-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-row-dots", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-rows", children: [
+    shown.map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-dots", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
     ] }, `${s.label}:${s.value}`)),
-    overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "ss-w-bi-more", onClick: () => setExpanded((v) => !v), children: expanded ? ui?.showLess ?? "Show less" : (ui?.showMore ?? ((n) => `Show ${n} more`))(overflow) }) : null
+    overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "ss-w-bi-more", onClick: () => setExpanded((v) => !v), children: expanded ? ui?.showLess ?? "Show less" : (ui?.showMore ?? ((n) => `Show ${n} more`))(overflow) }) : null
   ] });
 }
 function ScopedStats({ scopes, ui }) {
-  const [active, setActive] = (0, import_react3.useState)(0);
+  const [active, setActive] = (0, import_react5.useState)(0);
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-bi-scoped", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatRows, { stats: current.stats, ui }, current.key)
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-scoped", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: current.stats, ui }, current.key)
   ] });
 }
-function InsightCard({ it, ui }) {
+function InsightCard({ it, ui, slip }) {
   const live = it.isLive || it.phase === "live";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-binsight", children: [
-    live || it.fixture || it.competition ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-bi-status", children: [
-      live ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ss-w-bi-live", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-binsight", children: [
+    live || it.fixture || it.competition ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-status", children: [
+      live ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-live", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
         ui?.liveLabel ?? "Live"
       ] }) : null,
-      it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
-      it.competition ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-comp", children: it.competition }) : null
+      it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
+      it.competition ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-comp", children: it.competition }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-bi-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ss-w-bi-mkt", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-mkt", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-market", children: it.market }),
+        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null
       ] }),
-      it.odds ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ss-w-bi-odds", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("b", { children: it.odds }),
-        it.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
+      it.odds ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-odds", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("b", { children: it.odds }),
+        it.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
       ] }) : null
     ] }),
-    it.text ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    it.scopes && it.scopes.length >= 2 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScopedStats, { scopes: it.scopes, ui }) : it.stats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatRows, { stats: it.stats, ui }) : null,
-    it.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
+    it.text ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-text", children: it.text }) : null,
+    it.scopes && it.scopes.length >= 2 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScopedStats, { scopes: it.scopes, ui }) : it.stats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: it.stats, ui }) : null,
+    it.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddToSlipButton, { it, slip, ui })
   ] });
 }
-function BettingInsightList({ insights, ui }) {
+function BettingInsightList({ insights, ui, slip }) {
   if (!insights || insights.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InsightCard, { it, ui }, it.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InsightCard, { it, ui, slip }, it.id)) });
 }
 
 // src/components/ActionButtons.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ss-w-abtn-shimmer" })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-actions", children: [
+    actions.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
+    actions.length === 0 && loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-abtn-shimmer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-abtn-shimmer" })
     ] }) : null
   ] });
 }
 
 // src/components/ChatMessage.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function ChatMessage({ message, disabled, onAct, ui }) {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ChatMessage({ message, disabled, onAct, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BettingInsightList, { insights: message.insights, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
+    message.text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { text: message.text }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -551,17 +705,17 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function MessageList({ controller, ui }) {
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function MessageList({ controller, ui, slip }) {
   const { state, send } = controller;
-  const listRef = (0, import_react4.useRef)(null);
-  const endRef = (0, import_react4.useRef)(null);
-  const pinnedRef = (0, import_react4.useRef)(true);
-  (0, import_react4.useEffect)(() => {
+  const listRef = (0, import_react6.useRef)(null);
+  const endRef = (0, import_react6.useRef)(null);
+  const pinnedRef = (0, import_react6.useRef)(true);
+  (0, import_react6.useEffect)(() => {
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
   const empty = state.messages.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -571,35 +725,36 @@ function MessageList({ controller, ui }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ChatMessage,
           {
             message: m,
             disabled: state.isStreaming,
             onAct: (a) => send(a.message, { actionId: a.actionId, displayText: a.label }),
-            ui
+            ui,
+            slip
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        empty ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: endRef })
+        empty ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: endRef })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-var import_react5 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = (0, import_react5.useState)("");
+  const [value, setValue] = (0, import_react7.useState)("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -612,18 +767,18 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SendIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [modal, setModal] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -633,20 +788,20 @@ function useIsModal() {
   }, []);
   return modal;
 }
-function ChatPanel({ controller, ui }) {
+function ChatPanel({ controller, ui, slip }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageList, { controller, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageList, { controller, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -799,20 +954,28 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-send { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: var(--ss-w-accent); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; }
 .ss-w-stop-glyph { width: 11px; height: 11px; background: currentColor; border-radius: 2px; }
 
+/* add to slip */
+.ss-w-slip { position: relative; display: flex; }
+.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: #fff; background: var(--ss-w-accent); border: 1px solid var(--ss-w-accent); border-radius: 14px; padding: 5px 12px; cursor: pointer; }
+.ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }
+.ss-w-toast { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1; max-width: 100%; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
+.ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
+.ss-w-toast-error { color: #c0392b; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
+
 @media (prefers-reduced-motion: reduce) {
   .ss-w-abtn-shimmer { animation: none; }
 }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
       return { client: props.client, conversation: props.client.conversation() };
     }
     const cfg = props.config;
-    const client = new import_widget_sdk3.StatsWidgetClient(toClientOptions(cfg));
+    const client = new import_widget_sdk4.StatsWidgetClient(toClientOptions(cfg));
     return { client, conversation: client.conversation(toUserContext(cfg)) };
   } catch (err) {
     console.error("[StatsWidget] failed to initialize:", err instanceof Error ? err.message : err);
@@ -830,18 +993,31 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react7.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const ui = (0, import_react7.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react7.useRef)(null);
+  const built = (0, import_react9.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const ui = (0, import_react9.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
+  const rootRef = (0, import_react9.useRef)(null);
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
-  (0, import_react7.useEffect)(() => {
+  const slip = (0, import_react9.useMemo)(
+    () => ({
+      onAddToSlip: props.config?.onAddToSlip,
+      conversationId: controller.state.conversationId ?? void 0,
+      onMarketClicked: (marketName) => {
+        try {
+          void built?.conversation.sendSignal({ signalType: "InsightMarketClicked", entityType: "Market", entityName: marketName }).catch(() => void 0);
+        } catch {
+        }
+      }
+    }),
+    [props.config?.onAddToSlip, controller.state.conversationId, built]
+  );
+  (0, import_react9.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)(ChatPanel, { controller, ui }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,