rivia 0.0.87 → 0.0.90

package/dist/index.js

@@ -4283,15 +4283,15 @@ var triggerEvent = async (message) => {
   }
 };
 
-// src/utils/canny.js
-var CannyLite = /* @__PURE__ */ function() {
+// src/utils/pm.js
+var ProductManagement = /* @__PURE__ */ function() {
   const defaults = {
     apiUrl: "/api/changelog",
     // backend endpoint to fetch changelog JSON (base URL)
     appID: null,
     authToken: null,
     // optional Authorization header
-    buttonSelector: "[data-canny-changelog]",
+    buttonSelector: "[data-pm-changelog]",
     position: "bottom",
     // or 'top'
     align: "right",
@@ -4304,79 +4304,194 @@ var CannyLite = /* @__PURE__ */ function() {
     // additional fetch options
     workspace: null,
     // optional workspace identifier to send to backend for multi-tenant support
-    cannyUserId: null,
+    pmUserId: null,
     // optional user identifier to send to backend for personalization
     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,
-    cannyUserId: 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("canny-lite-styles")) return;
+    if (document.getElementById("pm-lite-styles")) return;
     const css = `
-      .canny-lite-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:none;z-index:9998}
-      .canny-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}
-      .canny-lite-widget.light{background:#fff;color:#111}
-      .canny-lite-widget.dark{background:#111;color:#eee}
-      .canny-lite-header{padding:12px 16px;font-weight:600;border-bottom:1px solid rgba(0,0,0,0.06);position:relative}
-      .canny-lite-badge{font-size:12px;margin-left:8px;color:rgba(0,0,0,0.6)}
-      .canny-lite-body{max-height:60vh;overflow:auto;padding:12px 16px}
-      .canny-lite-item{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.04)}
-      .canny-lite-item.unread{background:linear-gradient(90deg,rgba(255,245,235,0.6),transparent)}
-      .canny-lite-close{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:16px;cursor:pointer}
-      .canny-lite-tags{font-size:12px;opacity:0.8;margin-top:6px}
-      .canny-lite-link{display:inline-block;margin-top:6px;font-size:13px}
+      .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: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;
+      
+  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;}
+      .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 = "canny-lite-styles";
+    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");
-    backdrop.className = "canny-lite-backdrop";
+    backdrop.className = "pm-lite-backdrop";
     backdrop.addEventListener("click", closeWidget);
     const widget = document.createElement("div");
-    widget.className = "canny-lite-widget " + (state.config.theme === "dark" ? "dark" : "light");
+    widget.className = "pm-lite-widget " + (state.config.theme === "dark" ? "dark" : "light");
     widget.setAttribute("role", "dialog");
     const header = document.createElement("div");
-    header.className = "canny-lite-header";
-    header.innerText = "Changelog";
+    header.className = "pm-lite-header";
+    header.innerText = "Latest Updates";
+    header.paddingTop = "10px";
     const badge = document.createElement("span");
-    badge.className = "canny-lite-badge";
+    badge.className = "pm-lite-badge";
     badge.style.display = "none";
     header.appendChild(badge);
     const closeBtn = document.createElement("button");
-    closeBtn.className = "canny-lite-close";
+    closeBtn.className = "pm-lite-close";
     closeBtn.innerHTML = "\u2715";
     closeBtn.addEventListener("click", closeWidget);
     const body = document.createElement("div");
-    body.className = "canny-lite-body";
-    body.innerHTML = '<div class="canny-lite-loading">Loading\u2026</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 = "canny-lite-rivia-btn";
-    riviaBtn.innerText = "Open Rivia";
+    riviaBtn.className = "pm-lite-rivia-btn";
+    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.cannyUserId || ""}`;
+      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 CannyLite = /* @__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 CannyLite = /* @__PURE__ */ function() {
   }
   async function fetchChangelog(id) {
     if (state.config.initialData) {
-      const candidate = state.config.initialData.canny_integration ? state.config.initialData.canny_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 || "";
+    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 CannyLite = /* @__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.canny_integration ? payload.canny_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) {
-      state.widgetBody.innerHTML = '<div class="canny-lite-empty">No updates yet.</div>';
+    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 = "canny-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 = "canny-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 = "canny-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 CannyLite = /* @__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() {
@@ -4525,11 +4654,11 @@ var CannyLite = /* @__PURE__ */ function() {
   async function openWidgetFor(id) {
     try {
       showWidget();
-      state.widgetBody.innerHTML = '<div class="canny-lite-loading">Loading\u2026</div>';
+      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-canny-changelog]";
+      const selector = state.config.buttonSelector || "[data-pm-changelog]";
       const isTrigger = active && active instanceof Element && active.matches && active.matches(selector);
       if (isTrigger) {
         state.widgetEl.style.visibility = "hidden";
@@ -4549,7 +4678,7 @@ var CannyLite = /* @__PURE__ */ function() {
         positionWidget();
       }
     } catch (err) {
-      state.widgetBody.innerHTML = `<div class="canny-lite-error">Error loading changelog: ${escapeHtml(err.message)}</div>`;
+      state.widgetBody.innerHTML = `<div class="pm-lite-error">Error loading changelog: ${escapeHtml(err.message)}</div>`;
       console.error(err);
     }
   }
@@ -4558,29 +4687,26 @@ var CannyLite = /* @__PURE__ */ function() {
       const el = e.target.closest(state.config.buttonSelector);
       if (!el) return;
       e.preventDefault();
-      if (el.hasAttribute("data-canny-changelog")) {
-        const baseUrl = `http://${state.config.workspace}.rivia.ai/users/changelog?userId=${state.cannyUserId || ""}`;
-        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() {
     const cfg = state.config;
     if (!cfg.workspace || !cfg.email) {
-      console.warn("CannyLite: workspace/email missing, skipping user sync");
+      console.warn("ProductManagement: workspace/email missing, skipping user sync");
       return;
     }
     const payload = {
       workspace: cfg.workspace,
-      cannyUserId: cfg.cannyUserId,
+      pmUserId: cfg.pmUserId,
       name: cfg.name,
       email: cfg.email,
       user_avatar: cfg.user_avatar,
       url: cfg.url
     };
     try {
-      const res = await fetch(cfg.userApiUrl, {
+      const res = await fetch(`https://demoapi.rivia.ai/pm_users`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -4591,18 +4717,18 @@ var CannyLite = /* @__PURE__ */ function() {
         throw new Error(`Failed to sync user (${res.status})`);
       }
       const data = await res.json();
-      if (data?.canny_user?.canny_user_id) {
-        state.cannyUserId = data.canny_user.canny_user_id;
+      if (data?.pm_user?.pm_user_id) {
+        state.pmUserId = data.pm_user.pm_user_id;
       } else {
-        state.cannyUserId = cfg.canny_user_id;
+        state.pmUserId = cfg.pm_user_id;
       }
     } catch (err) {
-      console.error("CannyLite user sync failed:", err);
+      console.error("ProductManagement user sync failed:", err);
     }
   }
   function init(cfg) {
     if (state.initialized) {
-      console.warn("CannyLite already initialized \u2014 ignoring subsequent init call.");
+      console.warn("ProductManagement already initialized \u2014 ignoring subsequent init call.");
       return;
     }
     mergeConfig(cfg);
@@ -4613,7 +4739,7 @@ var CannyLite = /* @__PURE__ */ function() {
   function setConfig(cfg) {
     mergeConfig(Object.assign({}, state.config, cfg));
     if (state.widgetEl) {
-      state.widgetEl.className = "canny-lite-widget " + (state.config.theme === "dark" ? "dark" : "light");
+      state.widgetEl.className = "pm-lite-widget " + (state.config.theme === "dark" ? "dark" : "light");
       positionWidget();
     }
   }
@@ -4623,7 +4749,7 @@ var CannyLite = /* @__PURE__ */ function() {
   function destroy() {
     if (state.widgetEl) state.widgetEl.remove();
     if (state.backdropEl) state.backdropEl.remove();
-    const style = document.getElementById("canny-lite-styles");
+    const style = document.getElementById("pm-lite-styles");
     if (style) style.remove();
     state.widgetEl = null;
     state.backdropEl = null;
@@ -4638,8 +4764,8 @@ var CannyLite = /* @__PURE__ */ function() {
     destroy
   };
 }();
-if (typeof window !== "undefined") window.CannyLite = CannyLite;
-var canny_default = CannyLite;
+if (typeof window !== "undefined") window.ProductManagement = ProductManagement;
+var pm_default = ProductManagement;
 
 // src/utils/index.js
 if (typeof window !== "undefined") {
@@ -4647,12 +4773,12 @@ if (typeof window !== "undefined") {
   window.Tours = rivia_tour_default;
   window.Banner = banner_default;
   window.triggerEvent = triggerEvent;
-  window.CannyLite = canny_default;
+  window.ProductManagement = pm_default;
 }
 export {
   banner_default as Banner,
-  canny_default as CannyLite,
   rivia_default as Checklist,
+  pm_default as ProductManagement,
   rivia_tour_default as Tours,
   triggerEvent
 };

package/index.d.ts

@@ -24,30 +24,48 @@ declare global {
   }
 }
 
-export type CannyLiteTheme = "light" | "dark" | "auto";
-export type CannyLitePosition = "top" | "bottom";
-export type CannyLiteAlign = "left" | "right" | "center";
+export type ProductManagementTheme = "light" | "dark" | "auto";
+export type ProductManagementPosition = "top" | "bottom";
+export type ProductManagementAlign = "left" | "right" | "center";
 
-export interface CannyLiteConfig {
+export interface ProductManagementConfig {
   apiUrl: string;
   appID: string;
   authToken?: string;
-  position?: CannyLitePosition;
-  align?: CannyLiteAlign;
-  theme?: CannyLiteTheme;
+  position?: ProductManagementPosition;
+  align?: ProductManagementAlign;
+  theme?: ProductManagementTheme;
 }
 
-declare function CannyLite(): {
-  init(config: CannyLiteConfig): void;
+declare function ProductManagement(): {
+  init(config: ProductManagementConfig): void;
   open(id?: string): void;
   close(): void;
-  setConfig(config: Partial<CannyLiteConfig>): void;
+  setConfig(config: Partial<ProductManagementConfig>): void;
   attachButton(): void;
   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, CannyLite};
+export { Checklist,Banner, Tours, ProductManagement};
 
 // declare function Checklist(
 //   checklist_id: string,

package/package.json

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