@sensiblestats/widget-react 0.37.2 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.38.0
+
+### Minor Changes
+
+- Persist the chat conversation in the browser for a sliding hour: on return within the hour the widget silently restores the prior thread (and continues the same server thread), otherwise it starts fresh. Adds a "New conversation" control to clear and start over. Client-only (localStorage); no SDK or server change. Conversations now sync live across open browser tabs (a write or "New conversation" in one tab mirrors into the others).
+
+## 0.37.3
+
+### Patch Changes
+
+- Odds tab: show a single market-odds card per pin instead of a card-inside-a-card. The fixture/date is no longer duplicated — each pinned market renders one betting card (competition, fixture, market, odds) with the unpin in its own header, plus a slim live strip (score, minute, suspended/settled) shown only for in-play markets and hidden for pre-match. The unpin threads the exact stored pin key so it always removes the right pin.
+
 ## 0.37.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -57,6 +57,7 @@ var STRINGS = {
     launcherLabel: "Chat with SensibleStats",
     placeholder: "Ask about a team, player or match\u2026",
     closeChat: "Close chat",
+    newConversation: "New conversation",
     chatDialogLabel: "SensibleStats chat",
     stopResponse: "Stop response",
     sendMessage: "Send message",
@@ -129,6 +130,7 @@ var STRINGS = {
     launcherLabel: "SensibleStats ile sohbet et",
     placeholder: "Bir tak\u0131m, oyuncu veya ma\xE7 hakk\u0131nda sor\u2026",
     closeChat: "Sohbeti kapat",
+    newConversation: "Yeni sohbet",
     chatDialogLabel: "SensibleStats sohbet",
     stopResponse: "Yan\u0131t\u0131 durdur",
     sendMessage: "Mesaj g\xF6nder",
@@ -224,6 +226,7 @@ function normalizeUi(cfg) {
     starters: cfg.starters ?? [],
     injectStyles: cfg.injectStyles ?? true,
     closeChat: strings.closeChat,
+    newConversation: strings.newConversation,
     chatDialogLabel: strings.chatDialogLabel,
     stopResponse: strings.stopResponse,
     sendMessage: strings.sendMessage,
@@ -642,7 +645,7 @@ function marketOddsRowToSlipSelection(vm, row, conversationId) {
 // 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, conversationId: null };
+  return { isOpen: false, messages: [], isStreaming: false, status: null, actionsLoading: false, starters, configuredStarters: starters, error: null, lastUserInput: null, lastDisplayText: null, popupText: null, conversationId: null };
 }
 function activeTurn(state) {
   const last = state.messages[state.messages.length - 1];
@@ -722,6 +725,19 @@ function reducer(state, action) {
     }
     case "DISMISS_POPUP":
       return { ...state, popupText: null };
+    case "RESET":
+      return { ...initialState(state.configuredStarters), isOpen: state.isOpen };
+    case "RESTORE":
+      return {
+        ...state,
+        messages: action.messages,
+        conversationId: action.conversationId,
+        isStreaming: false,
+        status: null,
+        actionsLoading: false,
+        starters: action.messages.length ? [] : state.configuredStarters,
+        error: null
+      };
     case "EVENT":
       return applyEvent(state, action.event);
     case "STREAM_ERROR":
@@ -841,17 +857,82 @@ function useLiveDashboardPoll({ messages, dispatch, getLiveDashboard }) {
   }, [anchorKey, messages, forceUpdate]);
 }
 
+// src/conversationStore.ts
+var TTL_MS = 36e5;
+var MAX_MESSAGES = 30;
+function readConversation(storageKey, now) {
+  let raw;
+  try {
+    raw = window.localStorage.getItem(storageKey);
+  } catch {
+    return null;
+  }
+  if (!raw) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return "corrupt";
+  }
+  if (parsed?.v !== 1 || !Array.isArray(parsed.messages) || typeof parsed.updatedAt !== "number") return "corrupt";
+  if (now - parsed.updatedAt > TTL_MS) return "expired";
+  return { conversationId: parsed.conversationId ?? null, messages: parsed.messages };
+}
+function writeConversation(storageKey, conversationId, messages, now) {
+  let capped = messages.slice(-MAX_MESSAGES);
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify({ v: 1, updatedAt: now, conversationId, messages: capped }));
+      return;
+    } catch {
+      if (capped.length <= 1) return;
+      capped = capped.slice(Math.ceil(capped.length / 2));
+    }
+  }
+}
+function clearConversation(storageKey) {
+  try {
+    window.localStorage.removeItem(storageKey);
+  } catch {
+  }
+}
+
 // src/useChatStream.ts
+function hasAnswerContent(t) {
+  return !!t.text || t.cards.length > 0 || t.insights.length > 0 || t.marketOdds.length > 0 || t.oddsMovement.length > 0 || !!t.greetingDashboard || !!t.clubFanDashboard;
+}
 var STREAM_FALLBACK_TIMEOUT_MS = 3e4;
-function useChatStream(conversation, starterTexts, greetingMessage) {
-  const seed = (0, import_react2.useMemo)(() => initialState(starterTexts.map(chipFromText)), []);
-  const [state, dispatch] = (0, import_react2.useReducer)(reducer, seed);
-  const idRef = (0, import_react2.useRef)(0);
+function seedIdCounter(messages) {
+  let max = -1;
+  for (const m of messages) {
+    const n = Number(m.id.slice(1));
+    if (m.id[0] === "m" && Number.isFinite(n) && n > max) max = n;
+  }
+  return max + 1;
+}
+function useChatStream(conversation, starterTexts, greetingMessage, storageKey) {
+  const boot = (0, import_react2.useMemo)(() => {
+    const payload = storageKey ? readConversation(storageKey, Date.now()) : null;
+    const restored = payload != null && payload !== "expired" && payload !== "corrupt";
+    const base = initialState(starterTexts.map(chipFromText));
+    if (restored) {
+      return { state: { ...base, messages: payload.messages, conversationId: payload.conversationId, starters: [] }, restored: true, stale: false };
+    }
+    return { state: base, restored: false, stale: payload === "expired" || payload === "corrupt" };
+  }, []);
+  const [state, dispatch] = (0, import_react2.useReducer)(reducer, boot.state);
+  const idRef = (0, import_react2.useRef)(seedIdCounter(boot.state.messages));
   const handleRef = (0, import_react2.useRef)(null);
   const fallbackTimerRef = (0, import_react2.useRef)(null);
   const stateRef = (0, import_react2.useRef)(state);
   stateRef.current = state;
-  const greetedRef = (0, import_react2.useRef)(false);
+  const greetedRef = (0, import_react2.useRef)(boot.restored);
+  const hydratedRef = (0, import_react2.useRef)(false);
+  const restoreSeededRef = (0, import_react2.useRef)(false);
+  if (!restoreSeededRef.current) {
+    restoreSeededRef.current = true;
+    if (boot.restored && boot.state.conversationId) conversation.conversationId = boot.state.conversationId;
+  }
   const nextId = () => `m${idRef.current++}`;
   const clearFallbackTimer = (0, import_react2.useCallback)(() => {
     if (fallbackTimerRef.current != null) {
@@ -907,10 +988,9 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
     const last = stateRef.current.lastUserInput;
     if (last) run(last, stateRef.current.lastDisplayText ?? void 0);
   }, [run]);
-  (0, import_react2.useEffect)(() => {
+  const fireGreeting = (0, import_react2.useCallback)(() => {
     const message = greetingMessage?.trim();
-    if (!message || greetedRef.current) return;
-    greetedRef.current = true;
+    if (!message) return;
     try {
       handleRef.current?.cancel();
       clearFallbackTimer();
@@ -923,6 +1003,55 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
       dispatch({ kind: "STOP" });
     }
   }, [greetingMessage, conversation, consume, clearFallbackTimer, armFallbackTimer]);
+  (0, import_react2.useEffect)(() => {
+    if (greetedRef.current) return;
+    greetedRef.current = true;
+    fireGreeting();
+  }, [fireGreeting]);
+  (0, import_react2.useEffect)(() => {
+    if (boot.stale && storageKey) clearConversation(storageKey);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!storageKey || state.isStreaming) return;
+    if (hydratedRef.current) {
+      hydratedRef.current = false;
+      return;
+    }
+    const msgs = state.messages;
+    const persistable = msgs.filter((m, i) => {
+      if (m.role === "user") {
+        const next = msgs[i + 1];
+        return !!next && next.role === "assistant" && next.done && !next.isGreeting && hasAnswerContent(next);
+      }
+      return m.done && !m.isGreeting && hasAnswerContent(m);
+    });
+    if (persistable.length === 0) return;
+    writeConversation(storageKey, state.conversationId, persistable, Date.now());
+  }, [storageKey, state.isStreaming, state.messages, state.conversationId]);
+  (0, import_react2.useEffect)(() => {
+    if (!storageKey) return;
+    const onStorage = (e) => {
+      if (e.key !== storageKey || e.storageArea !== window.localStorage) return;
+      if (stateRef.current.isStreaming) return;
+      if (e.newValue == null) {
+        idRef.current = 0;
+        conversation.conversationId = void 0;
+        hydratedRef.current = true;
+        dispatch({ kind: "RESET" });
+        greetedRef.current = true;
+        fireGreeting();
+        return;
+      }
+      const parsed = readConversation(storageKey, Date.now());
+      if (!parsed || parsed === "expired" || parsed === "corrupt") return;
+      idRef.current = seedIdCounter(parsed.messages);
+      conversation.conversationId = parsed.conversationId ?? void 0;
+      hydratedRef.current = true;
+      dispatch({ kind: "RESTORE", messages: parsed.messages, conversationId: parsed.conversationId });
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [storageKey, conversation, fireGreeting]);
   const open = (0, import_react2.useCallback)(() => dispatch({ kind: "OPEN" }), []);
   const close = (0, import_react2.useCallback)(() => {
     handleRef.current?.cancel();
@@ -941,9 +1070,20 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
     else open();
   }, [close, open]);
   const dismissPopup = (0, import_react2.useCallback)(() => dispatch({ kind: "DISMISS_POPUP" }), []);
+  const reset = (0, import_react2.useCallback)(() => {
+    handleRef.current?.cancel();
+    handleRef.current = null;
+    clearFallbackTimer();
+    if (storageKey) clearConversation(storageKey);
+    idRef.current = 0;
+    conversation.conversationId = void 0;
+    dispatch({ kind: "RESET" });
+    greetedRef.current = true;
+    fireGreeting();
+  }, [storageKey, conversation, clearFallbackTimer, fireGreeting]);
   const getLiveDashboard = (0, import_react2.useCallback)(() => conversation.getLiveDashboard(), [conversation]);
   useLiveDashboardPoll({ messages: state.messages, dispatch, getLiveDashboard });
-  return { state, open, close, stop, toggle, send, retry, dismissPopup };
+  return { state, open, close, stop, toggle, send, retry, dismissPopup, reset };
 }
 
 // src/useLiveMonitor.ts
@@ -1288,6 +1428,9 @@ function CloseIcon() {
 function ChevronIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
+function NewChatIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
 var DASHBOARD_EMOJI = {
   football: "\u26BD",
   "goal-net": "\u{1F945}",
@@ -1356,10 +1499,11 @@ var import_react22 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function ChatHeader({ onClose, closeLabel = "Close chat", logoUrl, headerTitle }) {
+function ChatHeader({ onClose, closeLabel = "Close chat", logoUrl, headerTitle, onNewConversation, canReset, newConversationLabel = "New conversation" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "ss-w-header", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BrandMark, { logoUrl, className: "ss-w-header-mark" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ss-w-header-title", children: headerTitle ?? "SensibleStats" }),
+    canReset && onNewConversation ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "ss-w-newconv", "aria-label": newConversationLabel, onClick: onNewConversation, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NewChatIcon, {}) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "ss-w-close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) })
   ] });
 }
@@ -1801,7 +1945,7 @@ function OddsRow({ vm, row, ui, slip, inSlipIds }) {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
   ] });
 }
-function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader }) {
+function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }) {
   const [open, setOpen] = (0, import_react12.useState)(false);
   const kickoff = vm.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(vm.kickoffUtc) : void 0;
   const hasNamedTeams = !!vm.homeTeamName && !!vm.awayTeamName;
@@ -1829,7 +1973,7 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader }) {
             {
               ui,
               monitor,
-              pin: { kind: "market", matchId: vm.matchId, marketDeveloperName: vm.marketDeveloperName, line: vm.mainLine }
+              pin: pinRef ?? { kind: "market", matchId: vm.matchId, marketDeveloperName: vm.marketDeveloperName, line: vm.mainLine }
             }
           ) : null
         ] })
@@ -1857,9 +2001,9 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader }) {
     vm.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "ss-w-bi-disc", children: vm.disclaimer }) : null
   ] });
 }
-function MarketOddsCardList({ cards, ui, slip, monitor, inSlipIds, hideHeader }) {
+function MarketOddsCardList({ cards, ui, slip, monitor, inSlipIds, hideHeader, pinRef }) {
   if (!cards || cards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCard, { vm, ui, slip, monitor, inSlipIds, hideHeader }, vm.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCard, { vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }, vm.id)) });
 }
 
 // src/components/OddsMovementCard.tsx
@@ -3144,36 +3288,24 @@ function MonitorMatchCard({ match, promotedPins, monitor, ui, slip }) {
 
 // src/components/MonitorTabs.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-function ContextLine({ m, monitor, ui }) {
-  const kick = m.kickoffUtc ? ui.bettingKickoff(m.kickoffUtc) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mk-ctx", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mk-ctx-side", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Crest2, { kind: "team", url: m.homeCrestUrl ?? void 0, name: m.homeTeamName ?? void 0 }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-name", children: m.homeTeamName })
-    ] }),
-    m.phase === "preMatch" ? kick && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mon-pill", children: [
-      kick.dayLabel,
+function OddsLiveStrip({ m, ui }) {
+  const showScore = m.phase !== "preMatch" && typeof m.homeScore === "number";
+  const stale = m.status === "stale";
+  if (!showScore && !m.minuteLabel && !(m.isSuspended && !m.isSettled) && !m.isSettled && !stale) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mk-live", children: [
+    showScore && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("b", { className: "ss-w-mk-live-score", children: [
+      m.homeTeamName,
       " ",
-      kick.time
-    ] }) : typeof m.homeScore === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("b", { children: [
       m.homeScore,
       "\u2013",
-      m.awayScore
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mk-ctx-side", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-name", children: m.awayTeamName }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Crest2, { kind: "team", url: m.awayCrestUrl ?? void 0, name: m.awayTeamName ?? void 0 })
+      m.awayScore,
+      " ",
+      m.awayTeamName
     ] }),
     m.minuteLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-min", children: m.minuteLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "ss-w-mk-ctx-right", children: [
-      m.isSuspended && !m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-susp", children: ui.suspendedLabel }),
-      m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-pill", children: ui.fullTimeLabel }),
-      m.status === "stale" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-asof", children: ui.asOf(new Date(m.asOfUtc).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })) }),
-      (() => {
-        const pin = monitor.pins.find((p) => p.key === m.key);
-        return pin ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PinToggle, { ui, monitor, pin }) : null;
-      })()
-    ] })
+    m.isSuspended && !m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-susp", children: ui.suspendedLabel }),
+    m.isSettled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-pill", children: ui.fullTimeLabel }),
+    stale && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ss-w-mon-asof", children: ui.asOf(new Date(m.asOfUtc).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })) })
   ] });
 }
 function MatchesPanel({ monitor, ui, slip }) {
@@ -3206,20 +3338,25 @@ function withSinceViewMovement(vm, prev) {
 function OddsPanel({ monitor, ui, slip }) {
   const markets = (monitor.snapshot?.markets ?? []).filter((m) => monitor.pins.some((p) => p.key === m.key));
   if (markets.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-empty", children: ui.emptyOddsTab });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-list", children: markets.map((m) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mon-oddspin", "data-settled": m.isSettled || void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ContextLine, { m, monitor, ui }),
-    m.card && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      MarketOddsCardList,
-      {
-        cards: [withSinceViewMovement(toMarketOddsVM(m.card), monitor.lastViewedPrices[m.key])],
-        ui,
-        slip,
-        inSlipIds: monitor.inSlip
-      }
-    ),
-    m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OddsMovementCardList, { cards: [toOddsMovementVM(m.history)], ui }),
-    !m.card && !m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-empty-card", children: ui.oddsUnavailable })
-  ] }, m.key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-list", children: markets.map((m) => {
+    const pin = monitor.pins.find((p) => p.key === m.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ss-w-mon-oddspin", "data-settled": m.isSettled || void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OddsLiveStrip, { m, ui }),
+      m.card && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        MarketOddsCardList,
+        {
+          cards: [withSinceViewMovement(toMarketOddsVM(m.card), monitor.lastViewedPrices[m.key])],
+          ui,
+          slip,
+          monitor,
+          pinRef: pin ?? void 0,
+          inSlipIds: monitor.inSlip
+        }
+      ),
+      m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OddsMovementCardList, { cards: [toOddsMovementVM(m.history)], ui }),
+      !m.card && !m.history && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ss-w-mon-empty-card", children: ui.oddsUnavailable })
+    ] }, m.key);
+  }) });
 }
 
 // src/components/ChatPanel.tsx
@@ -3238,7 +3375,7 @@ function useIsModal() {
   return modal;
 }
 function ChatPanel({ controller, ui, slip, onDashboardTap, monitor }) {
-  const { state, close, stop, send } = controller;
+  const { state, close, stop, send, reset } = controller;
   const isModal = useIsModal();
   (0, import_react22.useEffect)(() => {
     const onKey = (e) => {
@@ -3255,7 +3392,18 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor }) {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat, logoUrl: ui.logoUrl, headerTitle: ui.headerTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      ChatHeader,
+      {
+        onClose: close,
+        closeLabel: ui.closeChat,
+        logoUrl: ui.logoUrl,
+        headerTitle: ui.headerTitle,
+        onNewConversation: reset,
+        canReset: state.messages.length > 0,
+        newConversationLabel: ui.newConversation
+      }
+    ),
     monitor && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       TabBar,
       {
@@ -3370,8 +3518,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 }
 .ss-w-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ss-w-line); }
 .ss-w-header-mark { width: 18px; height: 18px; display: block; object-fit: contain; }
-.ss-w-header-title { font-weight: 660; }
-.ss-w-close { margin-left: auto; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
+.ss-w-header-title { font-weight: 660; flex: 1; }
+.ss-w-newconv { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
+.ss-w-close { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
 
 /* messages */
 /* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --
@@ -4059,7 +4208,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
    a bare context line with nothing under it. */
 .ss-w-mon-empty-card { padding: 8px 0 2px; font-size: 12px; color: var(--ss-w-faint); }
 .ss-w-mon-inslip { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-pos); }
-.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }
+/* Odds-tab item is bare: the visible card is the market-odds card itself (no outer wrapper card),
+   with an optional slim live strip above it. */
+.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-mk-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-mk-live-score { color: var(--ss-w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
 .ss-w-mon-oddspin[data-settled] .ss-w-mo-price,
 .ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }
 
@@ -4114,7 +4267,8 @@ function StatsWidget(props) {
   const markIntroDone = (0, import_react23.useCallback)(() => {
     introDoneRef.current = true;
   }, []);
-  const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
+  const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
+  const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0, convStorageKey);
   const monitor = useLiveMonitor({
     getLiveMonitor: (pins) => built ? built.conversation.getLiveMonitor(pins) : Promise.resolve(null),
     getMarketOdds: (matchId, dev) => built ? built.conversation.getMarketOdds(matchId, dev) : Promise.resolve(null),