@sensiblestats/widget-react 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @sensiblestats/widget-react
 
+## 0.5.0
+
+### Minor Changes
+
+- Redesigned betting-insight card with scoped supporting stats.
+
+  - **widget-sdk:** extend `BettingInsight` with `homeTeamName`, `awayTeamName`, and `scopes` (`{ key, label, stats }[]`), so consumers can type the fixture line and the per-scope stat sets (this league / all competitions / head-to-head) the server now streams.
+  - **widget-react:** rebuild the betting card around the new payload — a phase-aware live/pre-match status line with the fixture, a promoted market with clearly labeled odds (and an optional bookmaker name), and scope chips that switch the supporting stats in place (shown only when ≥2 scopes are present, otherwise flat stat rows with a "show more" expander). The responsible-gambling disclaimer always renders. Type scale and spacing match the surrounding chat cards.
+  - **widget-embed:** rebuild against `@sensiblestats/widget-react` so the hosted embed renders the redesigned card.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.4.0
+
+## 0.4.0
+
+### Minor Changes
+
+- Render `betting_insight` events as insight cards (market, selection + line, odds with an optional live badge, supporting stats, and the responsible-gambling disclaimer). **Bug fix:** the reducer previously had no case for `betting_insight` and no fallthrough, so any unmodelled event returned `undefined` and corrupted state — the next event then crashed the widget (`Cannot read properties of undefined (reading 'length')`). Unknown event types are now ignored safely and can never break the UI.
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
 
 // src/i18n.ts
@@ -52,7 +52,9 @@ var STRINGS = {
     somethingWentWrong: "Something went wrong.",
     retry: "Retry",
     showLess: "Show less",
-    showMore: (n) => `Show ${n} more`
+    showMore: (n) => `Show ${n} more`,
+    oddsLabel: "Odds",
+    liveLabel: "Live"
   },
   tr: {
     launcherLabel: "SensibleStats ile sohbet et",
@@ -65,7 +67,9 @@ var STRINGS = {
     somethingWentWrong: "Bir \u015Feyler ters gitti.",
     retry: "Tekrar dene",
     showLess: "Daha az g\xF6ster",
-    showMore: (n) => `${n} tane daha g\xF6ster`
+    showMore: (n) => `${n} tane daha g\xF6ster`,
+    oddsLabel: "Oran",
+    liveLabel: "Canl\u0131"
   }
 };
 function resolveLocaleStrings(locale) {
@@ -95,7 +99,9 @@ function normalizeUi(cfg) {
     somethingWentWrong: strings.somethingWentWrong,
     retry: strings.retry,
     showLess: strings.showLess,
-    showMore: strings.showMore
+    showMore: strings.showMore,
+    oddsLabel: strings.oddsLabel,
+    liveLabel: strings.liveLabel
   };
 }
 function toClientOptions(cfg) {
@@ -132,16 +138,19 @@ function str(v) {
 function num(v) {
   return typeof v === "number" && Number.isFinite(v) ? String(v) : void 0;
 }
-function readStats(card) {
-  if (!Array.isArray(card.stats)) return [];
+function readStatCells(raw) {
+  if (!Array.isArray(raw)) return [];
   const cells = [];
-  for (const entry of card.stats) {
+  for (const entry of raw) {
     const label = str(entry.label);
     const value = num(entry.value) ?? str(entry.value);
     if (label !== void 0 && value !== void 0) cells.push({ label, value });
   }
   return cells;
 }
+function readStats(card) {
+  return readStatCells(card.stats);
+}
 function toCardVM(card) {
   const entityType = str(card.entityType)?.toLowerCase();
   const kind = entityType === "player" ? "player" : entityType === "team" ? "team" : "generic";
@@ -167,6 +176,31 @@ function toChipVM(intent) {
 function chipFromText(text) {
   return { text };
 }
+function toInsightVM(insight) {
+  const market = str(insight.marketLabel) ?? str(insight.marketDeveloperName) ?? "";
+  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 home = str(insight.homeTeamName);
+  const away = str(insight.awayTeamName);
+  const fixture = home && away ? `${home} vs ${away}` : void 0;
+  const scopes = Array.isArray(insight.scopes) ? insight.scopes.map((s) => ({ key: str(s.key), label: str(s.label), stats: readStatCells(s.stats) })).filter((s) => !!s.key && !!s.label) : void 0;
+  return {
+    id: str(insight.insightId) ?? `${str(insight.ruleId) ?? "insight"}:${num(insight.matchId) ?? ""}`,
+    market,
+    selection,
+    odds,
+    // The wire payload carries bookmakerId (not a name); render a name only if one is present.
+    bookmaker: str(insight.odds?.bookmakerName),
+    isLive: insight.odds?.isLive === true,
+    phase: str(insight.phase),
+    fixture,
+    scopes,
+    text: str(insight.text) ?? "",
+    stats: readStatCells(insight.stats),
+    disclaimer: str(insight.disclaimer)
+  };
+}
 
 // src/reducer.ts
 var POPUP_MAX = 160;
@@ -193,6 +227,8 @@ function applyEvent(state, event) {
       return { ...state, messages: mapActive(state, (t) => ({ ...t, cards: [...t.cards, toCardVM(event.data.card)] })) };
     case "action_button":
       return { ...state, actionsLoading: false, messages: mapActive(state, (t) => ({ ...t, actions: [...t.actions, toActionVM(event.data.action)] })) };
+    case "betting_insight":
+      return { ...state, messages: mapActive(state, (t) => ({ ...t, insights: [...t.insights, toInsightVM(event.data.insight)] })) };
     case "intent_chip": {
       const chip = toChipVM(event.data.intent);
       return chip ? { ...state, starters: [...state.starters, chip] } : state;
@@ -210,6 +246,7 @@ function applyEvent(state, event) {
       return { ...state, error: suppress ? state.error : event.data, isStreaming: false, status: null, actionsLoading: false, messages: mapActive(state, (t) => ({ ...t, done: true })) };
     }
   }
+  return state;
 }
 function reducer(state, action) {
   switch (action.kind) {
@@ -219,11 +256,11 @@ function reducer(state, action) {
       return { ...state, isOpen: false, isStreaming: false, status: null, actionsLoading: false };
     case "USER_SENT": {
       const user = { role: "user", id: action.userId, text: action.displayText ?? action.input.message };
-      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], done: false };
+      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], done: false };
       return { ...state, messages: [...state.messages, user, assistant], isStreaming: true, status: null, actionsLoading: false, starters: [], error: null, lastUserInput: action.input, lastDisplayText: action.displayText ?? null };
     }
     case "GREETING_SENT": {
-      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], done: false, isGreeting: true };
+      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], done: false, isGreeting: true };
       return { ...state, messages: [...state.messages, assistant], isStreaming: true, status: null, error: null };
     }
     case "DISMISS_POPUP":
@@ -345,7 +382,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -358,7 +395,7 @@ function ChatHeader({ onClose, closeLabel = "Close chat" }) {
 }
 
 // src/components/MessageList.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/Markdown.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
@@ -411,37 +448,94 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
   ] });
 }
 
-// src/components/ActionButtons.tsx
+// src/components/BettingInsightList.tsx
+var import_react3 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var MAX_ROWS = 3;
+function StatRows({ stats, ui }) {
+  const [expanded, setExpanded] = (0, import_react3.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 })
+    ] }, `${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
+  ] });
+}
+function ScopedStats({ scopes, ui }) {
+  const [active, setActive] = (0, import_react3.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)
+  ] });
+}
+function InsightCard({ it, ui }) {
+  const live = it.isLive || it.phase === "live";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-binsight", children: [
+    live || it.fixture ? /* @__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" }),
+        ui?.liveLabel ?? "Live"
+      ] }) : null,
+      it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-bi-fixture", children: it.fixture }) : 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
+      ] }),
+      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
+      ] }) : 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
+  ] });
+}
+function BettingInsightList({ insights, ui }) {
+  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)) });
+}
+
+// src/components/ActionButtons.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ss-w-abtn-shimmer" })
+  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" })
     ] }) : null
   ] });
 }
 
 // src/components/ChatMessage.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ChatMessage({ message, disabled, onAct, ui }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    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_runtime8.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  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 })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  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}`)) });
 }
 
 // src/scroll.ts
@@ -451,17 +545,17 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function MessageList({ controller, ui }) {
   const { state, send } = controller;
-  const listRef = (0, import_react3.useRef)(null);
-  const endRef = (0, import_react3.useRef)(null);
-  const pinnedRef = (0, import_react3.useRef)(true);
-  (0, import_react3.useEffect)(() => {
+  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)(() => {
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
   const empty = state.messages.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -471,7 +565,7 @@ function MessageList({ controller, ui }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ChatMessage,
           {
             message: m,
@@ -481,25 +575,25 @@ function MessageList({ controller, ui }) {
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        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 })
         ] }) : null,
-        empty ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: endRef })
+        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 })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-var import_react4 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = (0, import_react4.useState)("");
+  const [value, setValue] = (0, import_react5.useState)("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -512,18 +606,18 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SendIcon, {}) })
+  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, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [modal, setModal] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -536,17 +630,17 @@ function useIsModal() {
 function ChatPanel({ controller, ui }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageList, { controller, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.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_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 })
   ] });
 }
 
@@ -645,6 +739,36 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }
 .ss-w-cards-more:disabled { opacity: .5; cursor: default; }
 
+/* betting insights */
+.ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
+.ss-w-bi-status { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.ss-w-bi-fixture { font-size: 11px; color: var(--ss-w-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
+.ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
+.ss-w-bi-head { display: flex; align-items: flex-start; gap: 10px; }
+.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.ss-w-bi-market { font-size: 13px; font-weight: 660; line-height: 1.3; color: var(--ss-w-ink); }
+.ss-w-bi-sel { font-size: 11px; line-height: 1.3; color: var(--ss-w-faint); }
+.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 24%, var(--ss-w-line)); border-radius: 8px; padding: 3px 9px; min-width: 56px; }
+.ss-w-bi-odds-cap { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-bi-odds b { font-size: 15px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.15; }
+.ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
+.ss-w-bi-text { font-size: 12px; color: var(--ss-w-ink); }
+.ss-w-bi-rows { display: flex; flex-direction: column; }
+.ss-w-bi-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--ss-w-line); }
+.ss-w-bi-row:first-child { border-top: none; }
+.ss-w-bi-row-lbl { font-size: 11px; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-bi-row-dots { flex: 1; border-bottom: 1px dotted var(--ss-w-line); transform: translateY(-3px); min-width: 12px; }
+.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; flex: none; color: var(--ss-w-ink); }
+.ss-w-bi-more { align-self: flex-start; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11px; font-weight: 560; padding: 2px 0; cursor: pointer; }
+.ss-w-bi-more:hover { text-decoration: underline; }
+.ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }
+.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-bi-scopes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
+.ss-w-bi-chip { font-size: 11px; font-weight: 550; border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 3px 10px; color: var(--ss-w-ink); background: var(--ss-w-bubble); cursor: pointer; }
+.ss-w-bi-chip[aria-pressed="true"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }
+
 /* action buttons */
 .ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
 .ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; }
@@ -674,7 +798,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -699,18 +823,18 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react6.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const ui = (0, import_react6.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react6.useRef)(null);
+  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 controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.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_runtime13.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_runtime13.jsx)(ChatPanel, { controller, ui }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  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)(
     ChatFab,
     {
       label: ui.launcherLabel,