rivia 0.0.98 → 0.0.100

package/dist/index.js

@@ -4362,8 +4362,12 @@ var ProductManagement = /* @__PURE__ */ function() {
     // ✅ store API data
     titleFontSize: null,
     // for dynamic spacing when preview styles are applied
-    workspaceId: null
+    workspaceId: null,
     // to track current workspace for dynamic updates
+    new_feature: null,
+    // store new feature flag from user sync for potential use in widget (e.g. show "new" badge)
+    triggerBtn: null
+    // store the button that triggered the widget
   };
   function mergeConfig(cfg) {
     state.config = Object.assign({}, defaults, cfg || {});
@@ -4520,8 +4524,30 @@ var ProductManagement = /* @__PURE__ */ function() {
     riviaBtn.innerText = "See all changes";
     footerRow.appendChild(riviaLabel);
     footerRow.appendChild(riviaBtn);
-    riviaBtn.addEventListener("click", () => {
-      const baseUrl = `http://${state.config.workspace}.rivia.ai/users/changelog?userId=${state.pmUserId || ""}`;
+    riviaBtn.addEventListener("click", async () => {
+      try {
+        const buttons = document.querySelectorAll(state.config.buttonSelector);
+        buttons.forEach((btn) => {
+          const existingDot = btn.querySelector(".pm-dot");
+          if (existingDot) {
+            existingDot.remove();
+          }
+        });
+        const response = await fetch(`https://demoapi.rivia.ai/pm_users/${state.pmUserId || ""}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            new_feature: false
+          })
+        });
+        const data = await response.json();
+        console.log("Success:", data);
+      } catch (error) {
+        console.error("Error:", error);
+      }
+      const baseUrl = `https://${state.config.workspace}.rivia.ai/users/changelog?userId=${state.pmUserId || ""}`;
       const url = new URL(baseUrl);
       window.open(url.toString(), "_blank");
     });
@@ -4545,25 +4571,37 @@ var ProductManagement = /* @__PURE__ */ function() {
   }
   function positionWidget() {
     if (!state.widgetEl) return;
-    const { position, align } = state.config;
-    const offset = 20;
-    state.widgetEl.style.bottom = "";
-    state.widgetEl.style.top = "";
-    state.widgetEl.style.left = "";
-    state.widgetEl.style.right = "";
-    state.widgetEl.style.transform = "";
-    if (position === "bottom") {
-      state.widgetEl.style.bottom = offset + "px";
-    } else {
-      state.widgetEl.style.top = offset + "px";
-    }
-    if (align === "left") {
-      state.widgetEl.style.left = offset + "px";
-    } else if (align === "center") {
-      state.widgetEl.style.left = "50%";
-      state.widgetEl.style.transform = "translateX(-50%)";
+    if (state.triggerBtn) {
+      const widgetRect = state.widgetEl.getBoundingClientRect();
+      const triggerRect = state.triggerBtn.getBoundingClientRect();
+      const { top, left } = computePlacement(triggerRect, widgetRect, state.config);
+      state.widgetEl.style.position = "fixed";
+      state.widgetEl.style.top = Math.round(top) + "px";
+      state.widgetEl.style.left = Math.round(left) + "px";
+      state.widgetEl.style.right = "auto";
+      state.widgetEl.style.bottom = "auto";
+      state.widgetEl.style.transform = "none";
     } else {
-      state.widgetEl.style.right = offset + "px";
+      const { position, align } = state.config;
+      const offset = 20;
+      state.widgetEl.style.bottom = "";
+      state.widgetEl.style.top = "";
+      state.widgetEl.style.left = "";
+      state.widgetEl.style.right = "";
+      state.widgetEl.style.transform = "";
+      if (position === "bottom") {
+        state.widgetEl.style.bottom = offset + "px";
+      } else {
+        state.widgetEl.style.top = offset + "px";
+      }
+      if (align === "left") {
+        state.widgetEl.style.left = offset + "px";
+      } else if (align === "center") {
+        state.widgetEl.style.left = "50%";
+        state.widgetEl.style.transform = "translateX(-50%)";
+      } else {
+        state.widgetEl.style.right = offset + "px";
+      }
     }
   }
   async function fetchChangelog(id) {
@@ -4666,6 +4704,8 @@ var ProductManagement = /* @__PURE__ */ function() {
     if (!state.widgetEl) return;
     state.backdropEl.style.display = "none";
     state.widgetEl.style.display = "none";
+    window.removeEventListener("scroll", positionWidget);
+    state.triggerBtn = null;
   }
   function computePlacement(triggerRect, widgetRect, cfg) {
     const offset = cfg && cfg.attachOffset || 8;
@@ -4696,15 +4736,12 @@ var ProductManagement = /* @__PURE__ */ function() {
       state.widgetBody.innerHTML = '<div class="pm-lite-loading">Loading\u2026</div>';
       const data = await fetchChangelog(id);
       renderChangelog(data);
-      const active = document.activeElement;
-      const selector = state.config.buttonSelector || "[data-pm-changelog]";
-      const isTrigger = active && active instanceof Element && active.matches && active.matches(selector);
-      if (isTrigger) {
+      if (state.triggerBtn) {
         state.widgetEl.style.visibility = "hidden";
         state.widgetEl.style.display = "block";
         await new Promise((r) => requestAnimationFrame(r));
         const widgetRect = state.widgetEl.getBoundingClientRect();
-        const triggerRect = active.getBoundingClientRect();
+        const triggerRect = state.triggerBtn.getBoundingClientRect();
         const { top, left } = computePlacement(triggerRect, widgetRect, state.config);
         state.widgetEl.style.position = "fixed";
         state.widgetEl.style.top = Math.round(top) + "px";
@@ -4713,6 +4750,7 @@ var ProductManagement = /* @__PURE__ */ function() {
         state.widgetEl.style.bottom = "auto";
         state.widgetEl.style.transform = "none";
         state.widgetEl.style.visibility = "visible";
+        window.addEventListener("scroll", positionWidget);
       } else {
         positionWidget();
       }
@@ -4726,6 +4764,7 @@ var ProductManagement = /* @__PURE__ */ function() {
       const el = e.target.closest(state.config.buttonSelector);
       if (!el) return;
       e.preventDefault();
+      state.triggerBtn = el;
       const id = el.getAttribute("data-pm-changelog");
       openWidgetFor(state.config.workspace || id);
     });
@@ -4761,19 +4800,60 @@ var ProductManagement = /* @__PURE__ */ function() {
       } else {
         state.pmUserId = cfg.pm_user_id;
       }
+      if (data?.pm_user?.new_feature) {
+        state.new_feature = data.pm_user.new_feature;
+        console.log("state.new_feature", state.new_feature);
+      }
     } catch (err) {
       console.error("ProductManagement user sync failed:", err);
     }
   }
+  function attachDotToButtons() {
+    const buttons = document.querySelectorAll(state.config.buttonSelector);
+    buttons.forEach((btn) => {
+      if (btn.querySelector(".pm-dot")) return;
+      const dot = document.createElement("span");
+      dot.className = "pm-dot";
+      const style = window.getComputedStyle(btn);
+      if (style.position === "static") {
+        btn.style.position = "relative";
+      }
+      btn.appendChild(dot);
+    });
+  }
+  function injectDotStyles() {
+    if (document.getElementById("pm-dot-style")) return;
+    const style = document.createElement("style");
+    style.id = "pm-dot-style";
+    style.innerHTML = `
+      .pm-dot {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        width: 8px;
+        height: 8px;
+        background-color: red;
+        border-radius: 50%;
+        z-index: 10;
+      }
+    `;
+    document.head.appendChild(style);
+  }
   function init(cfg) {
     if (state.initialized) {
       console.warn("ProductManagement already initialized \u2014 ignoring subsequent init call.");
       return;
     }
     mergeConfig(cfg);
-    syncUserFromConfig();
-    bindClicks();
-    state.initialized = true;
+    syncUserFromConfig().then(() => {
+      console.log("Initial config:", state.config);
+      console.log("state.new_feature", state.new_feature);
+      if (state.new_feature)
+        attachDotToButtons();
+      injectDotStyles();
+      bindClicks();
+      state.initialized = true;
+    });
   }
   function setConfig(cfg) {
     mergeConfig(Object.assign({}, state.config, cfg));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rivia",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",