@sensiblestats/widget-react 0.6.1 → 0.7.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/i18n.ts
@@ -17,7 +17,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",
@@ -32,7 +41,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) {
@@ -64,7 +82,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) {
@@ -144,6 +171,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;
@@ -163,14 +192,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];
@@ -207,7 +253,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;
@@ -350,7 +404,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/components/ChatHeader.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -363,7 +417,7 @@ function ChatHeader({ onClose, closeLabel = "Close chat" }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // src/components/Markdown.tsx
 import ReactMarkdown from "react-markdown";
@@ -417,94 +471,194 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
 }
 
 // src/components/BettingInsightList.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+
+// src/components/AddToSlipButton.tsx
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { isAddToSlipResult } from "@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
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var DISMISS_MS = 4e3;
+function Toast({ toast, onDismiss }) {
+  useEffect2(() => {
+    if (!toast) return;
+    const timer = setTimeout(onDismiss, DISMISS_MS);
+    return () => clearTimeout(timer);
+  }, [toast, onDismiss]);
+  if (!toast) return null;
+  return /* @__PURE__ */ jsx7("div", { className: `ss-w-toast ss-w-toast-${toast.kind}`, role: "status", "aria-live": "polite", children: toast.text });
+}
+
+// src/components/AddToSlipButton.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "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] = useState2(false);
+  const [settled, setSettled] = useState2(false);
+  const [toast, setToast] = useState2(null);
+  const dismiss = useCallback2(() => 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 && !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__ */ jsxs5("div", { className: "ss-w-slip", children: [
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-slip-btn",
+        disabled: pending || settled,
+        onClick,
+        children: settled ? ui.inSlip : ui.addToSlip
+      }
+    ),
+    /* @__PURE__ */ jsx8(Toast, { toast, onDismiss: dismiss })
+  ] });
+}
+
+// src/components/BettingInsightList.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var MAX_ROWS = 3;
 function StatRows({ stats, ui }) {
-  const [expanded, setExpanded] = useState2(false);
+  const [expanded, setExpanded] = useState3(false);
   const shown = expanded ? stats : stats.slice(0, MAX_ROWS);
   const overflow = stats.length - MAX_ROWS;
-  return /* @__PURE__ */ jsxs5("div", { className: "ss-w-bi-rows", children: [
-    shown.map((s) => /* @__PURE__ */ jsxs5("div", { className: "ss-w-bi-row", children: [
-      /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-row-lbl", children: s.label }),
-      /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-row-dots", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-row-num", children: s.value })
+  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-rows", children: [
+    shown.map((s) => /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-row", children: [
+      /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-row-lbl", children: s.label }),
+      /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-row-dots", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-row-num", children: s.value })
     ] }, `${s.label}:${s.value}`)),
-    overflow > 0 ? /* @__PURE__ */ jsx7("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__ */ jsx9("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] = useState2(0);
+  const [active, setActive] = useState3(0);
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
-  return /* @__PURE__ */ jsxs5("div", { className: "ss-w-bi-scoped", children: [
-    /* @__PURE__ */ jsx7("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ jsx7("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ jsx7(StatRows, { stats: current.stats, ui }, current.key)
+  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-scoped", children: [
+    /* @__PURE__ */ jsx9("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ jsx9("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
+    /* @__PURE__ */ jsx9(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__ */ jsxs5("div", { className: "ss-w-binsight", children: [
-    live || it.fixture || it.competition ? /* @__PURE__ */ jsxs5("div", { className: "ss-w-bi-status", children: [
-      live ? /* @__PURE__ */ jsxs5("span", { className: "ss-w-bi-live", children: [
-        /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-binsight", children: [
+    live || it.fixture || it.competition ? /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-status", children: [
+      live ? /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-live", children: [
+        /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
         ui?.liveLabel ?? "Live"
       ] }) : null,
-      it.fixture ? /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
-      it.competition ? /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-comp", children: it.competition }) : null
+      it.fixture ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
+      it.competition ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-comp", children: it.competition }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs5("div", { className: "ss-w-bi-head", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "ss-w-bi-mkt", children: [
-        /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-sel", children: it.selection }) : null
+    /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-head", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-mkt", children: [
+        /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-market", children: it.market }),
+        it.selection ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-sel", children: it.selection }) : null
       ] }),
-      it.odds ? /* @__PURE__ */ jsxs5("span", { className: "ss-w-bi-odds", children: [
-        /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
-        /* @__PURE__ */ jsx7("b", { children: it.odds }),
-        it.bookmaker ? /* @__PURE__ */ jsx7("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
+      it.odds ? /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-odds", children: [
+        /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
+        /* @__PURE__ */ jsx9("b", { children: it.odds }),
+        it.bookmaker ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
       ] }) : null
     ] }),
-    it.text ? /* @__PURE__ */ jsx7("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    it.scopes && it.scopes.length >= 2 ? /* @__PURE__ */ jsx7(ScopedStats, { scopes: it.scopes, ui }) : it.stats.length > 0 ? /* @__PURE__ */ jsx7(StatRows, { stats: it.stats, ui }) : null,
-    it.disclaimer ? /* @__PURE__ */ jsx7("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
+    it.text ? /* @__PURE__ */ jsx9("p", { className: "ss-w-bi-text", children: it.text }) : null,
+    it.scopes && it.scopes.length >= 2 ? /* @__PURE__ */ jsx9(ScopedStats, { scopes: it.scopes, ui }) : it.stats.length > 0 ? /* @__PURE__ */ jsx9(StatRows, { stats: it.stats, ui }) : null,
+    it.disclaimer ? /* @__PURE__ */ jsx9("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null,
+    /* @__PURE__ */ jsx9(AddToSlipButton, { it, slip, ui })
   ] });
 }
-function BettingInsightList({ insights, ui }) {
+function BettingInsightList({ insights, ui, slip }) {
   if (!insights || insights.length === 0) return null;
-  return /* @__PURE__ */ jsx7("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ jsx7(InsightCard, { it, ui }, it.id)) });
+  return /* @__PURE__ */ jsx9("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ jsx9(InsightCard, { it, ui, slip }, it.id)) });
 }
 
 // src/components/ActionButtons.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
-  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ jsx8("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx8("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ jsx8("span", { className: "ss-w-abtn-shimmer" })
+  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-actions", children: [
+    actions.map((a, i) => /* @__PURE__ */ jsx10("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
+    actions.length === 0 && loading ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx10("span", { className: "ss-w-abtn-shimmer" }),
+      /* @__PURE__ */ jsx10("span", { className: "ss-w-abtn-shimmer" })
     ] }) : null
   ] });
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function ChatMessage({ message, disabled, onAct, ui }) {
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function ChatMessage({ message, disabled, onAct, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsx9("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx9("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ jsx11("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx11("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ jsx9(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ jsx9(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ jsx9(BettingInsightList, { insights: message.insights, ui }),
-    /* @__PURE__ */ jsx9(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ jsxs8("div", { className: "ss-w-msg ss-w-bot", children: [
+    message.text ? /* @__PURE__ */ jsx11(Markdown, { text: message.text }) : null,
+    /* @__PURE__ */ jsx11(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ jsx11(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ jsx11(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsx10("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx10("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ jsx12("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx12("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -514,17 +668,17 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function MessageList({ controller, ui }) {
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function MessageList({ controller, ui, slip }) {
   const { state, send } = controller;
   const listRef = useRef2(null);
   const endRef = useRef2(null);
   const pinnedRef = useRef2(true);
-  useEffect2(() => {
+  useEffect3(() => {
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
   const empty = state.messages.length === 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "ss-w-list",
@@ -534,35 +688,36 @@ function MessageList({ controller, ui }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ jsx11(
+        state.messages.map((m) => /* @__PURE__ */ jsx13(
           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__ */ jsx11(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx13(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ jsx11("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ jsxs8("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ jsx11("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ jsx11("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ jsx13("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ jsxs9("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ jsx13("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ jsx13("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        empty ? /* @__PURE__ */ jsx11(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ jsx11("div", { ref: endRef })
+        empty ? /* @__PURE__ */ jsx13(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ jsx13("div", { ref: endRef })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = useState3("");
+  const [value, setValue] = useState4("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -575,18 +730,18 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ jsx12("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ jsx12("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ jsx12("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ jsx12("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ jsx12(SendIcon, {}) })
+  return /* @__PURE__ */ jsxs10("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ jsx14("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ jsx14("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ jsx14("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ jsx14("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ jsx14(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = useState4(false);
-  useEffect3(() => {
+  const [modal, setModal] = useState5(false);
+  useEffect4(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -596,20 +751,20 @@ function useIsModal() {
   }, []);
   return modal;
 }
-function ChatPanel({ controller, ui }) {
+function ChatPanel({ controller, ui, slip }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
-  useEffect3(() => {
+  useEffect4(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ jsxs10("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ jsx13(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ jsx13(MessageList, { controller, ui }),
-    /* @__PURE__ */ jsx13(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ jsxs11("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ jsx15(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ jsx15(MessageList, { controller, ui, slip }),
+    /* @__PURE__ */ jsx15(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -762,13 +917,21 @@ 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
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -797,14 +960,27 @@ function StatsWidget(props) {
   const ui = useMemo2(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
   const rootRef = useRef3(null);
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
-  useEffect4(() => {
+  const slip = useMemo2(
+    () => ({
+      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]
+  );
+  useEffect5(() => {
     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__ */ jsx14("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__ */ jsx14(ChatPanel, { controller, ui }) : /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16("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__ */ jsx16(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ jsx16(
     ChatFab,
     {
       label: ui.launcherLabel,