@sensiblestats/widget-react 0.2.1 → 0.3.0

package/dist/index.js

@@ -114,8 +114,7 @@ function toCardVM(card) {
     name: card.canonicalName,
     image: str(card.imagePath) ?? str(card.imageUrl) ?? str(card.image_url) ?? str(card.logoUrl) ?? str(card.logo),
     sub: str(card.subtitle) ?? str(card.teamName) ?? str(card.leagueName) ?? str(card.position),
-    stats: readStats(card),
-    query: card.canonicalName
+    stats: readStats(card)
   };
 }
 function toActionVM(action) {
@@ -288,9 +287,6 @@ function SendIcon() {
 function CloseIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fill: "none", d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2" }) });
 }
-function ChevronIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", d: "M9 6l6 6-6 6" }) });
-}
 
 // src/components/GreetingBubble.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -349,13 +345,13 @@ var MAX_VISIBLE = 3;
 function initials(name) {
   return name.split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
 }
-function EntityCardList({ cards, disabled, onSelect, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
+function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
   const [expanded, setExpanded] = useState(false);
   if (cards.length === 0) return null;
   const visible = expanded ? cards : cards.slice(0, MAX_VISIBLE);
   const overflow = cards.length - MAX_VISIBLE;
   return /* @__PURE__ */ jsxs4("div", { className: "ss-w-cards", children: [
-    visible.map((c) => /* @__PURE__ */ jsxs4("button", { type: "button", className: "ss-w-ecard", "data-kind": c.kind, disabled, onClick: () => onSelect(c.query), children: [
+    visible.map((c) => /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
       /* @__PURE__ */ jsx6(
         "span",
         {
@@ -372,8 +368,7 @@ function EntityCardList({ cards, disabled, onSelect, showLessLabel = "Show less"
       c.stats.map((s) => /* @__PURE__ */ jsxs4("span", { className: "ss-w-stat", children: [
         /* @__PURE__ */ jsx6("b", { children: s.value }),
         /* @__PURE__ */ jsx6("span", { children: s.label })
-      ] }, s.label)),
-      /* @__PURE__ */ jsx6("span", { className: "ss-w-chev", children: /* @__PURE__ */ jsx6(ChevronIcon, {}) })
+      ] }, s.label))
     ] }, c.id)),
     overflow > 0 ? /* @__PURE__ */ jsx6("button", { type: "button", className: "ss-w-cards-more", disabled, onClick: () => setExpanded((v) => !v), children: expanded ? showLessLabel : showMoreLabel(overflow) }) : null
   ] });
@@ -394,13 +389,13 @@ function ActionButtons({ actions, loading, disabled, onAct }) {
 
 // src/components/ChatMessage.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function ChatMessage({ message, disabled, onAct, onSelect, ui }) {
+function ChatMessage({ message, disabled, onAct, ui }) {
   if (message.role === "user") {
     return /* @__PURE__ */ jsx8("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx8("div", { className: "ss-w-bubble", children: message.text }) });
   }
   return /* @__PURE__ */ jsxs6("div", { className: "ss-w-msg ss-w-bot", children: [
     message.text ? /* @__PURE__ */ jsx8(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ jsx8(EntityCardList, { cards: message.cards, disabled, onSelect, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ jsx8(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
     /* @__PURE__ */ jsx8(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
@@ -412,37 +407,55 @@ function IntentChips({ chips, onPick }) {
   return /* @__PURE__ */ jsx9("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx9("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
+// src/scroll.ts
+var PIN_THRESHOLD = 48;
+function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
+  return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
+}
+
 // src/components/MessageList.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function MessageList({ controller, ui }) {
   const { state, send } = controller;
+  const listRef = useRef2(null);
   const endRef = useRef2(null);
+  const pinnedRef = useRef2(true);
   useEffect2(() => {
-    endRef.current?.scrollIntoView({ block: "end" });
+    if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
   const empty = state.messages.length === 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-list", "aria-live": "polite", children: [
-    state.messages.map((m) => /* @__PURE__ */ jsx10(
-      ChatMessage,
-      {
-        message: m,
-        disabled: state.isStreaming,
-        onAct: (a) => send(a.message, { actionId: a.actionId, displayText: a.label }),
-        onSelect: (q) => send(q),
-        ui
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: "ss-w-list",
+      "aria-live": "polite",
+      ref: listRef,
+      onScroll: () => {
+        if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
-      m.id
-    )),
-    state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx10(ActionButtons, { actions: [], loading: true, onAct: () => {
-    } }) : null,
-    state.status ? /* @__PURE__ */ jsx10("div", { className: "ss-w-status", children: state.status }) : null,
-    state.error ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-error", role: "alert", children: [
-      /* @__PURE__ */ jsx10("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-      /* @__PURE__ */ jsx10("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
-    ] }) : null,
-    empty ? /* @__PURE__ */ jsx10(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-    /* @__PURE__ */ jsx10("div", { ref: endRef })
-  ] });
+      children: [
+        state.messages.map((m) => /* @__PURE__ */ jsx10(
+          ChatMessage,
+          {
+            message: m,
+            disabled: state.isStreaming,
+            onAct: (a) => send(a.message, { actionId: a.actionId, displayText: a.label }),
+            ui
+          },
+          m.id
+        )),
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx10(ActionButtons, { actions: [], loading: true, onAct: () => {
+        } }) : null,
+        state.status ? /* @__PURE__ */ jsx10("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ jsx10("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ jsx10("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        ] }) : null,
+        empty ? /* @__PURE__ */ jsx10(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ jsx10("div", { ref: endRef })
+      ]
+    }
+  );
 }
 
 // src/components/ChatInput.tsx
@@ -580,7 +593,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* entity cards */
 .ss-w-cards { display: flex; flex-direction: column; gap: 7px; }
-.ss-w-ecard { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 11px; text-align: left; cursor: pointer; }
+.ss-w-ecard { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 11px; text-align: left; }
 .ss-w-thumb { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; }
 .ss-w-thumb.ss-w-team { border-radius: 10px; }
 .ss-w-ecard[data-kind="player"] .ss-w-thumb { background-color: var(--ss-w-accent); }
@@ -591,10 +604,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-stat { margin-left: auto; text-align: center; }
 .ss-w-stat b { display: block; font-variant-numeric: tabular-nums; }
 .ss-w-stat span { font-size: 9px; text-transform: uppercase; color: var(--ss-w-faint); }
-.ss-w-chev { color: var(--ss-w-faint); font-size: 16px; display: grid; place-items: center; }
 .ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }
 .ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }
-.ss-w-ecard:disabled, .ss-w-cards-more:disabled { opacity: .5; cursor: default; }
+.ss-w-cards-more:disabled { opacity: .5; cursor: default; }
 
 /* action buttons */
 .ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@@ -611,6 +623,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ss-w-line); }
 .ss-w-textarea { flex: 1; resize: none; border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; font: inherit; color: inherit; background: var(--ss-w-panel); max-height: 96px; }
 .ss-w-textarea:disabled { opacity: .55; cursor: not-allowed; }
+/* iOS Safari zooms the page when a focused field's font-size is < 16px. Bump it
+   on touch devices only, so the desktop 13px design is unchanged. */
+@media (pointer: coarse) {
+  .ss-w-textarea { font-size: 16px; }
+}
 .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; }