@sensiblestats/widget-react 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.20.0
+
+### Minor Changes
+
+- Club-dashboard taps (FixtureHero CTA, MatchPreview/TeamDna facts) now send the backend's opaque `actionRef` instead of a prose command, and `useChatStream` gains a client-side fallback timeout so the panel can no longer hang forever waiting for a `turn_complete`/`error` that never arrives.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.17.0
+
 ## 0.19.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -625,21 +625,42 @@ function reducer(state, action) {
 }
 
 // src/useChatStream.ts
+var STREAM_FALLBACK_TIMEOUT_MS = 3e4;
 function useChatStream(conversation, starterTexts, greetingMessage) {
   const seed = (0, import_react.useMemo)(() => initialState(starterTexts.map(chipFromText)), []);
   const [state, dispatch] = (0, import_react.useReducer)(reducer, seed);
   const idRef = (0, import_react.useRef)(0);
   const handleRef = (0, import_react.useRef)(null);
+  const fallbackTimerRef = (0, import_react.useRef)(null);
   const stateRef = (0, import_react.useRef)(state);
   stateRef.current = state;
   const greetedRef = (0, import_react.useRef)(false);
   const nextId = () => `m${idRef.current++}`;
+  const clearFallbackTimer = (0, import_react.useCallback)(() => {
+    if (fallbackTimerRef.current != null) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
+  }, []);
+  const armFallbackTimer = (0, import_react.useCallback)((onFire) => {
+    clearFallbackTimer();
+    fallbackTimerRef.current = setTimeout(() => {
+      fallbackTimerRef.current = null;
+      handleRef.current?.cancel();
+      handleRef.current = null;
+      onFire();
+    }, STREAM_FALLBACK_TIMEOUT_MS);
+  }, [clearFallbackTimer]);
   const consume = (0, import_react.useCallback)((handle, onError) => {
     ;
     (async () => {
       try {
-        for await (const event of handle) dispatch({ kind: "EVENT", event });
+        for await (const event of handle) {
+          dispatch({ kind: "EVENT", event });
+          if (event.type === "turn_complete" || event.type === "error") clearFallbackTimer();
+        }
       } catch (err) {
+        if (handleRef.current === handle) clearFallbackTimer();
         if (err instanceof import_widget_sdk3.WidgetSdkError) onError(err);
         else if (err?.name === "AbortError") {
         } else throw err;
@@ -647,18 +668,23 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
         if (handleRef.current === handle) handleRef.current = null;
       }
     })();
-  }, []);
+  }, [clearFallbackTimer]);
   const run = (0, import_react.useCallback)((input, displayText) => {
     handleRef.current?.cancel();
+    clearFallbackTimer();
     dispatch({ kind: "USER_SENT", input, userId: nextId(), assistantId: nextId(), displayText });
     const handle = conversation.send(input);
     handleRef.current = handle;
+    armFallbackTimer(() => {
+      dispatch({ kind: "STOP" });
+      dispatch({ kind: "STREAM_ERROR", error: new import_widget_sdk3.WidgetSdkError("No response received in time", "timeout") });
+    });
     consume(handle, (err) => dispatch({ kind: "STREAM_ERROR", error: err }));
-  }, [conversation, consume]);
+  }, [conversation, consume, clearFallbackTimer, armFallbackTimer]);
   const send = (0, import_react.useCallback)((text, opts) => {
     const trimmed = text.trim();
     if (!trimmed) return;
-    run({ message: trimmed, actionId: opts?.actionId, grounding: opts?.grounding }, opts?.displayText);
+    run({ message: trimmed, actionId: opts?.actionId, actionRef: opts?.actionRef }, opts?.displayText);
   }, [run]);
   const retry = (0, import_react.useCallback)(() => {
     const last = stateRef.current.lastUserInput;
@@ -670,25 +696,29 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
     greetedRef.current = true;
     try {
       handleRef.current?.cancel();
+      clearFallbackTimer();
       dispatch({ kind: "GREETING_SENT", assistantId: nextId() });
       const handle = conversation.send({ message });
       handleRef.current = handle;
+      armFallbackTimer(() => dispatch({ kind: "STOP" }));
       consume(handle, () => dispatch({ kind: "STOP" }));
     } catch {
       dispatch({ kind: "STOP" });
     }
-  }, [greetingMessage, conversation, consume]);
+  }, [greetingMessage, conversation, consume, clearFallbackTimer, armFallbackTimer]);
   const open = (0, import_react.useCallback)(() => dispatch({ kind: "OPEN" }), []);
   const close = (0, import_react.useCallback)(() => {
     handleRef.current?.cancel();
     handleRef.current = null;
+    clearFallbackTimer();
     dispatch({ kind: "CLOSE" });
-  }, []);
+  }, [clearFallbackTimer]);
   const stop = (0, import_react.useCallback)(() => {
     handleRef.current?.cancel();
     handleRef.current = null;
+    clearFallbackTimer();
     dispatch({ kind: "STOP" });
-  }, []);
+  }, [clearFallbackTimer]);
   const toggle = (0, import_react.useCallback)(() => {
     if (stateRef.current.isOpen) close();
     else open();
@@ -1353,7 +1383,7 @@ function FixtureHeroBlock({
       block.venue ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ss-w-cdash-venue", children: block.venue }) : null,
       block.competition ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ss-w-cdash-comp", children: block.competition }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaActionValue, void 0, block.ctaLabel), children: block.ctaLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaLabel, { actionRef: block.ctaActionRef }), children: block.ctaLabel })
   ] });
 }
 
@@ -1382,12 +1412,12 @@ function MatchPreviewBlock({
   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.facts.map(
-      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      (f, i) => f.actionRef ? /* @__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" }),
+          onClick: () => onAction(f.label ?? f.sentence, { actionRef: f.actionRef }),
           children: [
             f.sentence,
             f.label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
@@ -1414,12 +1444,12 @@ function TeamDnaBlock({
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ss-w-cdash-lines", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
     block.facts.map(
-      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      (f, i) => f.actionRef ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "button",
         {
           type: "button",
           className: "ss-w-cdash-fact",
-          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          onClick: () => onAction(f.label ?? f.sentence, { actionRef: f.actionRef }),
           children: [
             f.sentence,
             f.label ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
@@ -1565,7 +1595,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: (message, grounding, displayText) => send(message, { grounding, displayText: displayText ?? message }),
+            onClubAction: (label, opts) => send(label, { actionRef: opts.actionRef }),
             ui,
             slip
           },