rivia 0.0.88 → 0.0.90

package/dist/index.js

@@ -4309,40 +4309,139 @@ var ProductManagement = /* @__PURE__ */ function() {
     name: "abc",
     user_avatar: null,
     url: "https://img.freepik.com/free-photo/closeup-scarlet-macaw-from-side-view-scarlet-macaw-closeup-head_488145-3540.jpg?semt=ais_hybrid&w=740&q=80",
-    email: "priyanshu@yopmail.com"
+    email: "priyanshu@yopmail.com",
+    // hardcoded preview id while debugging
+    changelogPreviewId: "outplay"
   };
   const state = {
     initialized: false,
     config: {},
     widgetEl: null,
     backdropEl: null,
-    pmUserId: null
+    pmUserId: null,
+    changelogEntries: [],
+    // ✅ store API data
+    titleFontSize: null,
+    // for dynamic spacing when preview styles are applied
+    workspaceId: null
+    // to track current workspace for dynamic updates
   };
   function mergeConfig(cfg) {
     state.config = Object.assign({}, defaults, cfg || {});
   }
+  async function fetchCSS(previewId, widget, header, body) {
+    if (!previewId) return;
+    try {
+      console.log("Fetching preview styles for id:", previewId);
+      const res = await fetch(`https://demoapi.rivia.ai/change_logs_preview_by_workspace_name/${previewId}`);
+      if (!res.ok) throw new Error("Failed to fetch preview styles");
+      const response = await res.json();
+      const data = response?.message?.[0];
+      console.log("Applying preview styles:", data);
+      if (data.width) {
+        widget.style.width = data.width;
+        widget.style.maxWidth = data.width;
+      }
+      if (data.backgroundColor)
+        widget.style.backgroundColor = data.backgroundColor;
+      if (data.borderRadius)
+        widget.style.borderRadius = data.borderRadius;
+      if (data.fontFamily)
+        widget.style.fontFamily = data.fontFamily;
+      if (data.padding)
+        body.style.padding = data.padding;
+      if (data.bodyFontSize)
+        body.style.fontSize = data.bodyFontSize;
+      if (data.bodyColor)
+        body.style.color = data.bodyColor;
+      if (data.titleFontSize) {
+        header.style.fontSize = data.titleFontSize;
+        state.titleFontSize = data.titleFontSize;
+      }
+      if (data.titleColor)
+        header.style.color = data.titleColor;
+    } catch (err) {
+      console.error("Preview CSS load failed:", err);
+    }
+  }
   function ensureStyles() {
     if (document.getElementById("pm-lite-styles")) return;
     const css = `
-      .pm-lite-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:none;z-index:9998}
+      .pm-lite-backdrop{position:fixed;inset:0;background:rgba(255, 255, 255, 0);display:none;z-index:9998}
       .pm-lite-widget{position:fixed;z-index:9999;max-width:420px;width:clamp(280px,30vw,420px);box-shadow:0 10px 40px rgba(0,0,0,0.2);border-radius:12px;overflow:hidden;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
       .pm-lite-widget.light{background:#fff;color:#111}
       .pm-lite-widget.dark{background:#111;color:#eee}
-      .pm-lite-header{padding:12px 16px;font-weight:600;border-bottom:1px solid rgba(0,0,0,0.06);position:relative}
+      .pm-lite-header{
+      
+  padding:6px;
+  padding-top:15px; /* default is 12px, can be overridden by preview styles */
+  font-weight:600;
+  position:relative;
+
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.pm-lite-rivia-btn{
+  display:block;
+  margin-left:auto;
+  color:#2563eb;   /* blue */
+  font-style:italic;
+  font-size:13px;
+  background:transparent;
+  border:none;
+  cursor:pointer;
+  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
+  padding:3px 15px;
+
+}
+  .pm-lite-rivia-label{
+  display:block;
+  margin-right:auto;
+  color:rgba(0,0,0,0.6);
+  font-style:italic;
+  font-size:12px;
+  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
+  padding-left:18px;
+}
       .pm-lite-badge{font-size:12px;margin-left:8px;color:rgba(0,0,0,0.6)}
-      .pm-lite-body{max-height:60vh;overflow:auto;padding:12px 16px}
-      .pm-lite-item{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.04)}
+      .pm-lite-body{max-height:60vh;overflow:auto;
+      
+  overflow: visible;   /* remove scroll */
+  height: auto;        /* dynamic height */
+  max-height: none;  }
+      .pm-lite-item{
+  box-sizing:border-box;
+  margin-bottom:6px;
+  padding:6px 7px;
+  border:1px solid rgba(0,0,0,0.08);
+  border-radius:8px;
+  background:#ffffff;
+  /* isolate from external CSS */
+  font-family:inherit;
+  line-height:1.4;
+}
       .pm-lite-item.unread{background:linear-gradient(90deg,rgba(255,245,235,0.6),transparent)}
       .pm-lite-close{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:16px;cursor:pointer}
-      .pm-lite-tags{font-size:12px;opacity:0.8;margin-top:6px}
+      .pm-lite-tags{font-size:12px;opacity:0.8;}
       .pm-lite-link{display:inline-block;margin-top:6px;font-size:13px}
+      .pm-lite-tags{
+  display:inline-block;
+  background-color:rgb(220, 252, 231);
+  color:rgb(22, 101, 52);
+  border-radius:999px;
+  padding:2px 8px;
+  font-size:12px;
+  font-weight:bold;
+  font:Verdana, sans-serif;
+}
     `;
     const style = document.createElement("style");
     style.id = "pm-lite-styles";
     style.appendChild(document.createTextNode(css));
     document.head.appendChild(style);
   }
-  function createWidgetShell() {
+  async function createWidgetShell() {
     if (state.widgetEl) return;
     ensureStyles();
     const backdrop = document.createElement("div");
@@ -4353,7 +4452,8 @@ var ProductManagement = /* @__PURE__ */ function() {
     widget.setAttribute("role", "dialog");
     const header = document.createElement("div");
     header.className = "pm-lite-header";
-    header.innerText = "Changelog";
+    header.innerText = "Latest Updates";
+    header.paddingTop = "10px";
     const badge = document.createElement("span");
     badge.className = "pm-lite-badge";
     badge.style.display = "none";
@@ -4365,18 +4465,33 @@ var ProductManagement = /* @__PURE__ */ function() {
     const body = document.createElement("div");
     body.className = "pm-lite-body";
     body.innerHTML = '<div class="pm-lite-loading">Loading\u2026</div>';
+    const footerRow = document.createElement("div");
+    footerRow.style.display = "flex";
+    footerRow.style.alignItems = "center";
+    footerRow.style.justifyContent = "space-between";
+    footerRow.style.marginTop = "5px";
+    footerRow.style.marginBottom = "5px";
+    const riviaLabel = document.createElement("span");
+    riviaLabel.className = "pm-lite-rivia-label";
+    riviaLabel.innerText = "Powered by Rivia";
+    riviaLabel.style.fontSize = "12px";
+    riviaLabel.style.opacity = "0.7";
     const riviaBtn = document.createElement("button");
     riviaBtn.className = "pm-lite-rivia-btn";
-    riviaBtn.innerText = "Open Rivia";
+    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 || ""}`;
+      const baseUrl = `http://${state.config.workspace}.rivia.ai:8080/users/changelog?userId=${state.pmUserId || ""}`;
       const url = new URL(baseUrl);
       window.open(url.toString(), "_blank");
     });
     widget.appendChild(header);
-    widget.appendChild(closeBtn);
-    widget.appendChild(riviaBtn);
+    const divider = document.createElement("div");
+    divider.style.borderTop = "1px solid rgba(0,0,0,0.08)";
     widget.appendChild(body);
+    widget.appendChild(divider);
+    widget.appendChild(footerRow);
     document.body.appendChild(backdrop);
     document.body.appendChild(widget);
     state.backdropEl = backdrop;
@@ -4384,6 +4499,8 @@ var ProductManagement = /* @__PURE__ */ function() {
     state.widgetBody = body;
     state.widgetHeader = header;
     state.widgetBadge = badge;
+    console.log("Widget shell created, now fetching preview CSS if available...", state.config.workspace);
+    await fetchCSS(state.config.workspace, widget, header, body);
     positionWidget();
     window.addEventListener("resize", positionWidget);
   }
@@ -4412,12 +4529,9 @@ var ProductManagement = /* @__PURE__ */ function() {
   }
   async function fetchChangelog(id) {
     if (state.config.initialData) {
-      const candidate = state.config.initialData.pm_integration ? state.config.initialData.pm_integration : state.config.initialData;
-      if (candidate && (candidate.integration_id === id || candidate.id === id || candidate.integration_id === candidate.id && !id)) {
-        return candidate;
-      }
+      return state.config.initialData;
     }
-    let urlStr = state.config.apiUrl || "https://demoapi.rivia.ai/pm";
+    let urlStr = `https://demoapi.rivia.ai/change_logs_by_workspace_name`;
     if (!urlStr) throw new Error("apiUrl is not configured");
     if (id) {
       if (urlStr.includes("{id}")) urlStr = urlStr.replace("{id}", encodeURIComponent(id));
@@ -4429,55 +4543,69 @@ var ProductManagement = /* @__PURE__ */ function() {
       const headers = Object.assign({}, state.config.fetchOptions.headers || {});
       const opts = Object.assign({ method: "GET", headers }, state.config.fetchOptions);
       const res = await fetch(url.toString(), opts);
-      if (!res.ok) throw new Error("Failed to fetch changelog: " + res.status + " " + res.statusText);
+      if (!res.ok) {
+        throw new Error("Failed to fetch changelog: " + res.status + " " + res.statusText);
+      }
       const payload = await res.json();
-      const data = payload && payload.pm_integration ? payload.pm_integration : payload;
-      return data;
+      state.changelogEntries = payload.message || [];
+      return state.changelogEntries;
     } catch (err) {
       throw err;
     }
   }
   function renderChangelog(data) {
     if (!state.widgetBody) return;
-    state.widgetHeader.childNodes[0] && (state.widgetHeader.childNodes[0].nodeValue = data.title || "Changelog");
-    if (typeof data.unread_count === "number" && data.unread_count > 0) {
-      state.widgetBadge.style.display = "inline-block";
-      state.widgetBadge.innerText = `(${data.unread_count} new)`;
-    } else {
-      state.widgetBadge.style.display = "none";
+    if (state.widgetHeader.childNodes[0]) {
+      state.widgetHeader.childNodes[0].nodeValue = "Latest Updates";
     }
-    const items = data.items || [];
-    if (!items.length) {
+    if (!data || !data.length) {
       state.widgetBody.innerHTML = '<div class="pm-lite-empty">No updates yet.</div>';
       return;
     }
     const frag = document.createDocumentFragment();
-    items.forEach((it) => {
+    let i = 0;
+    data.forEach((it) => {
+      i++;
+      if (i > 3) return;
       const div = document.createElement("div");
-      const unreadClass = it.is_read === false ? " unread" : "";
-      div.className = "pm-lite-item" + unreadClass;
+      div.className = "pm-lite-item";
+      const date = it.created_at ? new Date(it.created_at).toLocaleDateString() : "";
+      if (it.label) {
+        const tag = document.createElement("span");
+        tag.className = "pm-lite-tags";
+        tag.innerText = it.label;
+        tag.style.display = "inline-block";
+        tag.style.borderRadius = "999px";
+        tag.style.fontSize = "11px";
+        tag.style.fontWeight = "bold";
+        tag.style.fontFamily = "Verdana, sans-serif";
+        tag.style.backgroundColor = "rgb(220, 252, 231)";
+        tag.style.color = "rgb(22, 101, 52)";
+        tag.style.border = "1px solid rgb(187, 247, 208)";
+        div.appendChild(tag);
+      }
       const header = document.createElement("div");
+      header.className = "pm-lite-item-header";
       header.style.fontWeight = "600";
-      header.innerText = (it.version || "") + (it.date ? `  \xB7  ${it.date}` : "");
+      header.innerText = `${it.title || "Untitled"}  `;
+      header.style.display = "-webkit-box";
+      header.style.webkitLineClamp = "1";
+      header.style.webkitBoxOrient = "vertical";
+      header.style.overflow = "hidden";
+      header.style.textOverflow = "ellipsis";
+      header.style.fontSize = state.titleFontSize;
       const content = document.createElement("div");
-      content.innerHTML = escapeHtml(it.content || it.text || "");
+      content.innerHTML = it.text || "";
+      content.style.display = "-webkit-box";
+      content.style.webkitLineClamp = "3";
+      content.style.webkitBoxOrient = "vertical";
+      content.style.overflow = "hidden";
+      content.style.textOverflow = "ellipsis";
+      content.querySelectorAll("b, strong").forEach((el) => {
+        el.style.fontWeight = "normal";
+      });
       div.appendChild(header);
       div.appendChild(content);
-      if (Array.isArray(it.tags) && it.tags.length) {
-        const tags = document.createElement("div");
-        tags.className = "pm-lite-tags";
-        tags.innerHTML = it.tags.map((t) => `<span>#${escapeHtml(t)}</span>`).join(" ");
-        div.appendChild(tags);
-      }
-      if (it.url) {
-        const a = document.createElement("a");
-        a.className = "pm-lite-link";
-        a.href = it.url;
-        a.target = "_blank";
-        a.rel = "noopener noreferrer";
-        a.innerText = "Read more";
-        div.appendChild(a);
-      }
       frag.appendChild(div);
     });
     state.widgetBody.innerHTML = "";
@@ -4492,6 +4620,7 @@ var ProductManagement = /* @__PURE__ */ function() {
   function showWidget() {
     if (!state.widgetEl) createWidgetShell();
     state.backdropEl.style.display = "block";
+    state.widgetEl.style.visibility = "hidden";
     state.widgetEl.style.display = "block";
   }
   function closeWidget() {
@@ -4558,11 +4687,8 @@ var ProductManagement = /* @__PURE__ */ function() {
       const el = e.target.closest(state.config.buttonSelector);
       if (!el) return;
       e.preventDefault();
-      if (el.hasAttribute("data-pm-changelog")) {
-        const baseUrl = `http://${state.config.workspace}.rivia.ai/users/changelog?userId=${state.pmUserId || ""}`;
-        const url = new URL(baseUrl);
-        window.open(url.toString(), "_blank");
-      }
+      const id = el.getAttribute("data-pm-changelog");
+      openWidgetFor(state.config.workspace || id);
     });
   }
   async function syncUserFromConfig() {
@@ -4580,7 +4706,7 @@ var ProductManagement = /* @__PURE__ */ function() {
       url: cfg.url
     };
     try {
-      const res = await fetch(cfg.userApiUrl || "https://demoapi.rivia.ai/pm_users", {
+      const res = await fetch(`https://demoapi.rivia.ai/pm_users`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"

package/index.d.ts

@@ -46,6 +46,24 @@ declare function ProductManagement(): {
   destroy(): void;
 };
 
+declare global {
+  interface Window {
+    ProductManagement: {
+      init(config: ProductManagementConfig): void;
+      open(id?: string): void;
+      close(): void;
+      setConfig(config: Partial<ProductManagementConfig>): void;
+      attachButton(): void;
+      destroy(): void;
+      name?: string;
+      email?: string;
+      workspace?: string;
+      user_avatar?: string;
+    };
+    triggerEvent: typeof triggerEvent;
+  }
+}
+
 declare function Tours(tourId: string, userId: object): void ;
 export { Checklist,Banner, Tours, ProductManagement};
 

package/package.json

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