Revert to 0f8aedf — restore src/vaix-rag.js

src/vaix-rag.js

@@ -2,7 +2,6 @@
 // Products loaded ONCE from dataset JSON, cached in memory.
 // Supports ?product=xxx URL param to auto-open product detail
 // Full-screen image viewer on image click
-// SSR: window.__VAIX_PRODUCT_DATA__ from server renders instantly before full JSON load
 
 (function() {
 'use strict';
@@ -10,7 +9,6 @@
 const JSON_URL = "https://huggingface.co/datasets/bep40/grob-products-updated/resolve/main/products_with_slugs.json";
 let allProducts = [];
 let loaded = false;
-let fullCatalogLoading = false;
 let searchDebounceTimer = null;
 let lastSearchResults = [];
 let lastShownProduct = null;
@@ -54,52 +52,6 @@ function scoreProduct(p, queryStr, terms) {
 
 async function load() {
   if (loaded) return;
-
-  // ── Check for server-injected product data (?product=xxx) ──
-  const injectedData = window.__VAIX_PRODUCT_DATA__;
-  if (injectedData && injectedData.title_clean) {
-    console.log("[VAIX] Using injected product data:", injectedData.title_clean);
-    // Quick-set as 1-item catalog, will be replaced by full JSON in background
-    allProducts = [injectedData];
-    loaded = true;
-    fullCatalogLoading = true;
-
-    // Immediately render from injected data — no waiting
-    setTimeout(function() {
-      // Open panel and show the product right away
-      handleProductUrlParam();
-    }, 10);
-
-    // Also trigger full JSON fetch in background for search/related
-    fullCatalogLoading = true;
-    fetch(JSON_URL).then(r => {
-      if (!r.ok) throw new Error("HTTP "+r.status);
-      return r.json();
-    }).then(raw => {
-      // Only replace if we don't already have the full catalog
-      if (allProducts.length <= 1 || !fullCatalogLoading) return;
-      allProducts = (Array.isArray(raw) ? raw : []).map((p,i)=>({
-        name: p.n||p.name||"", title_clean: p.n||p.name||"",
-        brand: p.brand||"", price: p.p||p.price||"", priceNum: Number(p.pn??0),
-        category: p.c||p.cat||"", category_slug: p.cs||"", category_icon: p.ci||"fa-box",
-        sku: p.sku||"", model: p.mod||p.model||"", slug: p.slug||"",
-        description: p.desc||"", summary: p.sum||p.summary||"",
-        features: Array.isArray(p.feats)?p.feats:[],
-        specs: (typeof p.specs==="object"&&p.specs!==null)?p.specs:{},
-        video: p.vid||"", image: p.i||(Array.isArray(p.imgs)?p.imgs[0]:"")||"",
-        images: p.imgs||p.images||[], link: p.l||"", _idx: i
-      }));
-      loaded = true;
-      fullCatalogLoading = false;
-      console.log("[VAIX] Full catalog loaded in background:", allProducts.length);
-    }).catch(e => {
-      console.error("[VAIX] Background catalog load failed:", e);
-      fullCatalogLoading = false;
-    });
-    return;
-  }
-
-  // ── Normal: full JSON load ──
   try {
     const resp = await fetch(JSON_URL);
     if (!resp.ok) throw new Error("HTTP "+resp.status);
@@ -118,10 +70,8 @@ async function load() {
     loaded = true;
     console.log("[VAIX] Loaded "+allProducts.length+" products");
 
-    // Also check URL param after full load (if not already shown via injected data)
-    if (!window.__VAIX_PRODUCT_DATA__) {
-      handleProductUrlParam();
-    }
+    // After loading, check URL param for ?product=xxx
+    handleProductUrlParam();
   } catch(e) {
     console.error("[VAIX] Load error:", e);
     const errEl = document.getElementById("vaistudio-error");
@@ -166,11 +116,13 @@ function handleProductUrlParam() {
     }
 
     if (found) {
-      renderDetail(found);
-      renderSimilarInPanel(found);
-      renderPanelResults([found]);
-      lastShownProduct = found;
-      document.body.style.overflow = "hidden";
+      setTimeout(function() {
+        renderDetail(found);
+        renderSimilarInPanel(found);
+        renderPanelResults([found]);
+        lastShownProduct = found;
+        document.body.style.overflow = "hidden";
+      }, 300);
     }
   } catch(e) {
     console.error("[VAIX] URL param error:", e);
@@ -229,7 +181,7 @@ function getSimilarProducts(product, limit) {
   const nameWords = sd(p.title_clean).split(/\s+/).filter(w => w.length > 2);
   const scored = [];
   for (const other of allProducts) {
-    if (other._idx === p._idx || !other.title_clean) continue;
+    if (other._idx === p._idx) continue;
     let sc = 0;
     const otherCat = sd(other.category), otherBrand = sd(other.brand);
     if (otherCat && cat && (otherCat === cat || otherCat.includes(cat) || cat.includes(otherCat))) sc += 40;
@@ -306,6 +258,7 @@ function openImageViewer(imageUrl, productName) {
   viewer.id = "vaix-image-viewer";
   viewer.style.cssText = "position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;cursor:zoom-out;animation:modalIn 0.2s ease";
 
+  // Close button
   const closeBtn = document.createElement("button");
   closeBtn.innerHTML = "✕";
   closeBtn.style.cssText = "position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.15);color:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s;z-index:2";
@@ -314,6 +267,7 @@ function openImageViewer(imageUrl, productName) {
   closeBtn.onclick = function(e){ e.stopPropagation(); viewer.remove(); document.body.style.overflow = ""; };
   viewer.appendChild(closeBtn);
 
+  // Product name caption
   if (productName) {
     const caption = document.createElement("div");
     caption.textContent = productName;
@@ -335,13 +289,20 @@ function openImageViewer(imageUrl, productName) {
   viewer.appendChild(img);
 
   viewer.addEventListener("click", function(e) {
-    if (e.target === viewer) { viewer.remove(); document.body.style.overflow = ""; }
+    if (e.target === viewer) {
+      viewer.remove();
+      document.body.style.overflow = "";
+    }
   });
 
   viewer.setAttribute("tabindex", "0");
   viewer.focus();
   function keyHandler(e) {
-    if (e.key === "Escape") { viewer.remove(); document.body.style.overflow = ""; document.removeEventListener("keydown", keyHandler); }
+    if (e.key === "Escape") {
+      viewer.remove();
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", keyHandler);
+    }
   }
   document.addEventListener("keydown", keyHandler);
 
@@ -400,7 +361,10 @@ function attachChatCardHandlers(container) {
     });
   });
   container.querySelectorAll(".share-btn").forEach(function(btn) {
-    btn.addEventListener("click", function(e) { e.stopPropagation(); shareProduct(this.getAttribute("data-product")); });
+    btn.addEventListener("click", function(e) {
+      e.stopPropagation();
+      shareProduct(this.getAttribute("data-product"));
+    });
   });
   container.querySelectorAll(".chat-product-card-inner").forEach(function(inner) {
     inner.addEventListener("click", function(e) {
@@ -541,7 +505,11 @@ function renderPanelResults(products) {
       info.appendChild(ct);
     }
     card.appendChild(info);
-    card.addEventListener("click", function(e){ e.stopPropagation(); renderDetail(p); renderSimilarInPanel(p); });
+    card.addEventListener("click", function(e){
+      e.stopPropagation();
+      renderDetail(p);
+      renderSimilarInPanel(p);
+    });
     productsEl.appendChild(card);
   }
   if (countEl) countEl.textContent = products.length + " kết quả";
@@ -609,6 +577,7 @@ function renderDetail(p) {
   if (p.priceNum >= 1000000) { trieuEl.textContent = "(" + (p.priceNum/1000000).toFixed(1) + " triệu)"; trieuEl.style.display="inline"; }
   else trieuEl.style.display = "none";
 
+  // Images — with click-to-fullscreen handler
   const ic = document.getElementById("detail-images");
   ic.innerHTML = "";
   const imgs = [];
@@ -620,7 +589,7 @@ function renderDetail(p) {
     d.style.cssText = "width:120px;height:120px;background:#f1f5f9;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0";
     d.textContent = "📦"; ic.appendChild(d);
   } else {
-    imgs.forEach(function(url){
+    imgs.forEach(function(url, idx){
       const wrapper = document.createElement("div");
       wrapper.style.cssText = "position:relative;flex-shrink:0;scroll-snap-align:start;cursor:zoom-in";
       wrapper.title = "Nhấn để xem ảnh toàn màn hình";
@@ -632,13 +601,19 @@ function renderDetail(p) {
       img.onmouseover = function(){ this.style.transform = "scale(1.05)"; this.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)"; };
       img.onmouseout = function(){ this.style.transform = ""; this.style.boxShadow = ""; };
 
-      img.addEventListener("click", function(e) { e.stopPropagation(); openImageViewer(url, p.title_clean); });
+      // Click image → open fullscreen viewer
+      img.addEventListener("click", function(e) {
+        e.stopPropagation();
+        openImageViewer(url, p.title_clean);
+      });
 
       wrapper.appendChild(img);
 
+      // Small zoom icon overlay
       const zoomIcon = document.createElement("div");
       zoomIcon.textContent = "🔍";
       zoomIcon.style.cssText = "position:absolute;bottom:4px;right:4px;font-size:0.7rem;background:rgba(0,0,0,0.5);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0.7";
+
       wrapper.appendChild(zoomIcon);
       ic.appendChild(wrapper);
     });
@@ -663,6 +638,7 @@ function renderDetail(p) {
     sc.style.display = sb.children.length?"block":"none";
   } else sc.style.display="none";
 
+  // Share button section
   let shareSection = document.getElementById("detail-share-section");
   if (!shareSection) {
     shareSection = document.createElement("div");
@@ -674,8 +650,11 @@ function renderDetail(p) {
     else document.getElementById("vaistudio-detail-modal").appendChild(shareSection);
   }
   const shareBtn = document.getElementById("detail-share-btn");
-  if (shareBtn) shareBtn.onclick = function(e) { e.stopPropagation(); shareProduct(p.title_clean); };
+  if (shareBtn) {
+    shareBtn.onclick = function(e) { e.stopPropagation(); shareProduct(p.title_clean); };
+  }
 
+  // Similar products in modal
   let similarContainer = document.getElementById("detail-similar");
   if (!similarContainer) {
     const modal = document.getElementById("vaistudio-detail-modal");