@sensiblestats/widget-react 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.18.0
+
+### Minor Changes
+
+- Fact-grounded club dashboard taps: per-fact renderers are now individually tappable and send their grounding back with the chat message.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.16.0
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -652,7 +652,7 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
   const send = (0, import_react.useCallback)((text, opts) => {
     const trimmed = text.trim();
     if (!trimmed) return;
-    run({ message: trimmed, actionId: opts?.actionId }, opts?.displayText);
+    run({ message: trimmed, actionId: opts?.actionId, grounding: opts?.grounding }, opts?.displayText);
   }, [run]);
   const retry = (0, import_react.useCallback)(() => {
     const last = stateRef.current.lastUserInput;
@@ -1322,7 +1322,7 @@ function FixtureHeroBlock({
       block.venue ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-venue", children: block.venue }) : null,
       block.competition ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-comp", children: block.competition }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaActionValue, block.ctaLabel), children: block.ctaLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaActionValue, void 0, block.ctaLabel), children: block.ctaLabel })
   ] });
 }
 
@@ -1346,11 +1346,28 @@ function MatchPreviewBlock({
   ui,
   onAction
 }) {
-  if (block.lines.length === 0) return null;
+  if (block.facts.length === 0) return null;
   const heading = ui.clubMatchPreviewHeading;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { type: "button", className: "ss-w-cdash-lines", onClick: () => onAction(block.actionValue, heading), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-cdash-lines", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
-    block.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: line }, i))
+    block.facts.map(
+      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-cdash-fact",
+          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          children: [
+            f.sentence,
+            f.label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
+              " ",
+              f.label
+            ] }) : null
+          ]
+        },
+        i
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: f.sentence }, i)
+    )
   ] });
 }
 
@@ -1361,11 +1378,28 @@ function TeamDnaBlock({
   ui,
   onAction
 }) {
-  if (block.lines.length === 0) return null;
+  if (block.facts.length === 0) return null;
   const heading = ui.clubTeamDnaHeading;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", className: "ss-w-cdash-lines", onClick: () => onAction(block.actionValue, heading), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ss-w-cdash-lines", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
-    block.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: line }, i))
+    block.facts.map(
+      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-cdash-fact",
+          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          children: [
+            f.sentence,
+            f.label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
+              " ",
+              f.label
+            ] }) : null
+          ]
+        },
+        i
+      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: f.sentence }, i)
+    )
   ] });
 }
 
@@ -1500,7 +1534,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
               send(tile.actionValue, { displayText: tile.title });
               if (m.role === "assistant" && m.greetingDashboard) onDashboardTap?.(tile, index, m.greetingDashboard.layout);
             },
-            onClubAction: (actionValue, displayText) => send(actionValue, { displayText }),
+            onClubAction: (message, grounding, displayText) => send(message, { grounding, displayText: displayText ?? message }),
             ui,
             slip
           },
@@ -1950,9 +1984,12 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-cdash-pill--d { background: var(--ss-w-faint); }
 .ss-w-cdash-pill--l { background: color-mix(in srgb, var(--ss-w-neg) 88%, black); }
 
-.ss-w-cdash-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
+.ss-w-cdash-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; padding: 10px 12px; }
 .ss-w-cdash-lines-heading { font-size: 12px; font-weight: 700; color: var(--ss-w-accent); }
-.ss-w-cdash-lines p { font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); }
+.ss-w-cdash-lines p { font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); margin: 0; }
+.ss-w-cdash-fact { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); background: none; border: none; padding: 0; cursor: pointer; }
+.ss-w-cdash-fact:hover, .ss-w-cdash-fact:focus-visible { color: var(--ss-w-accent); text-decoration: underline; }
+.ss-w-cdash-fact-label { font-size: 11px; font-weight: 700; color: var(--ss-w-accent); }
 
 .ss-w-cdash-cd { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; text-align: center; }
 .ss-w-cdash-cd-clock { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: 18px; color: var(--ss-w-ink); }