✨ ?product=xxx URL param + full-screen image viewer; close #8

src/vaix-rag.js

@@ -1,13 +1,7 @@
 // V.AISTUDIO RAG Module — in-memory product search + UI panel integration
 // Products loaded ONCE from dataset JSON, cached in memory.
-// queryCatalog: search all products AND update UI panel AND return structured data to AI.
-// showProduct: open detail modal for a specific product by name/SKU.
-// searchSuggestions: real-time autocomplete suggestions for search dropdown
-// getSimilarProducts: find related products by category + brand + features
-// getCategories: list all product categories for quick browsing
-// createChatCard: build HTML product card for the chat interface
-// shareProduct: generate and copy shareable product link with OG data
-// getLastSearchResults: retrieve last search results for chat card rendering
+// Supports ?product=xxx URL param to auto-open product detail
+// Full-screen image viewer on image click
 
 (function() {
 'use strict';
@@ -22,13 +16,11 @@ let lastShownProduct = null;
 function sd(s) { return (s||"").normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase(); }
 function fmt(pn) { return pn>0?pn.toLocaleString("vi-VN")+"₫":"Liên hệ"; }
 
-// ── Vietnamese-aware term extraction ──
 function extractTerms(query) {
   const q = sd(query);
   return q.split(/\s+/).filter(t => t.length > 1);
 }
 
-// ── Score product against query terms ──
 function scoreProduct(p, queryStr, terms) {
   let sc = 0;
   const nm = sd(p.title_clean);
@@ -55,11 +47,9 @@ function scoreProduct(p, queryStr, terms) {
   for (const b of brandNames) {
     if (queryStr.includes(b) && br.includes(b)) sc += 50;
   }
-
   return sc;
 }
 
-// ── Load products from JSON ──
 async function load() {
   if (loaded) return;
   try {
@@ -79,6 +69,9 @@ async function load() {
     }));
     loaded = true;
     console.log("[VAIX] Loaded "+allProducts.length+" products");
+
+    // After loading, check URL param for ?product=xxx
+    handleProductUrlParam();
   } catch(e) {
     console.error("[VAIX] Load error:", e);
     const errEl = document.getElementById("vaistudio-error");
@@ -88,7 +81,54 @@ async function load() {
   }
 }
 
-// ── Find a single product by name/SKU ──
+// ── Handle ?product=xxx URL param ──
+function handleProductUrlParam() {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const productSlug = params.get("product");
+    if (!productSlug || !allProducts.length) return;
+
+    const decoded = decodeURIComponent(productSlug.trim());
+    if (!decoded) return;
+
+    console.log("[VAIX] URL param product:", decoded);
+
+    const qs = sd(decoded);
+    let found = null;
+
+    for (const p of allProducts) {
+      if (p.slug && sd(p.slug) === qs) { found = p; break; }
+    }
+    if (!found) {
+      for (const p of allProducts) {
+        if (p.sku && sd(p.sku) === qs) { found = p; break; }
+      }
+    }
+    if (!found) {
+      for (const p of allProducts) {
+        if (sd(p.title_clean) === qs) { found = p; break; }
+      }
+    }
+    if (!found) {
+      for (const p of allProducts) {
+        if (sd(p.title_clean).includes(qs) || qs.includes(sd(p.title_clean))) { found = p; break; }
+      }
+    }
+
+    if (found) {
+      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);
+  }
+}
+
 function findProduct(query) {
   if (!allProducts.length) return null;
   const qs = sd(query), terms = extractTerms(query);
@@ -100,7 +140,6 @@ function findProduct(query) {
   return bestScore > 0 ? best : null;
 }
 
-// ── Search suggestions (for dropdown) ──
 function searchSuggestions(query) {
   if (!allProducts.length || !query.trim()) return [];
   const q = query.trim();
@@ -113,17 +152,11 @@ function searchSuggestions(query) {
   }
   scored.sort((a,b) => b.sc - a.sc);
   return scored.slice(0, 8).map(r => ({
-    name: r.p.title_clean,
-    brand: r.p.brand,
-    price: r.p.priceNum,
-    priceStr: fmt(r.p.priceNum),
-    category: r.p.category,
-    image: r.p.image,
-    score: r.sc
+    name: r.p.title_clean, brand: r.p.brand, price: r.p.priceNum,
+    priceStr: fmt(r.p.priceNum), category: r.p.category, image: r.p.image, score: r.sc
   }));
 }
 
-// ── Get all unique categories ──
 function getCategories() {
   if (!allProducts.length) return [];
   const catMap = {};
@@ -134,20 +167,17 @@ function getCategories() {
   return Object.entries(catMap).map(([name, count]) => ({ name, count })).sort((a,b) => b.count - a.count);
 }
 
-// ── Get products by category ──
 function getProductsByCategory(categoryName) {
   if (!allProducts.length) return [];
   const qs = sd(categoryName);
   return allProducts.filter(p => sd(p.category).includes(qs)).slice(0, 20);
 }
 
-// ── Find similar products ──
 function getSimilarProducts(product, limit) {
   if (!allProducts.length || !product) return [];
   limit = limit || 6;
   const p = product;
-  const cat = sd(p.category);
-  const brand = sd(p.brand);
+  const cat = sd(p.category), brand = sd(p.brand);
   const nameWords = sd(p.title_clean).split(/\s+/).filter(w => w.length > 2);
   const scored = [];
   for (const other of allProducts) {
@@ -169,7 +199,6 @@ function getSimilarProducts(product, limit) {
   return scored.slice(0, limit).map(r => r.p);
 }
 
-// ── Track last search results ──
 function getLastSearchResults() { return lastSearchResults; }
 function getLastShownProduct() { return lastShownProduct; }
 
@@ -181,12 +210,10 @@ function getShareLink(product) {
   return base + "?product=" + slug;
 }
 
-// ── Copy share link + show toast ──
 function shareProduct(name) {
   const p = findProduct(name);
   if (!p) return 'Không tìm thấy sản phẩm: "'+name+'"';
   const url = getShareLink(p);
-  // Build share text with product info
   let shareText = "🛒 " + p.title_clean + "\n";
   shareText += "💰 " + fmt(p.priceNum) + "\n";
   if (p.brand) shareText += "🏷️ " + p.brand + "\n";
@@ -194,27 +221,18 @@ function shareProduct(name) {
   if (p.summary) shareText += "📝 " + p.summary.slice(0, 200) + "\n";
   shareText += "\n" + url;
 
-  // Try native share API first (mobile)
   if (navigator.share) {
-    navigator.share({
-      title: p.title_clean,
-      text: shareText,
-      url: url
-    }).catch(() => {});
+    navigator.share({ title: p.title_clean, text: shareText, url: url }).catch(() => {});
   } else {
-    // Fallback: copy to clipboard
-    const fullText = shareText;
-    navigator.clipboard.writeText(fullText).then(function() {
+    navigator.clipboard.writeText(shareText).then(function() {
       showShareToast("✅ Đã sao chép link chia sẻ: " + p.title_clean);
     }).catch(function() {
-      // Fallback: show prompt
       prompt("Sao chép link chia sẻ:", url);
     });
   }
   return "Đã chia sẻ: " + p.title_clean;
 }
 
-// ── Share toast UI ──
 function showShareToast(msg) {
   let toast = document.getElementById("vaix-toast");
   if (!toast) {
@@ -229,7 +247,69 @@ function showShareToast(msg) {
   toast._timer = setTimeout(function(){ toast.style.opacity = "0"; }, 3000);
 }
 
-// ── Create HTML product card for chat ──
+// ── Full-screen image viewer ──
+function openImageViewer(imageUrl, productName) {
+  if (!imageUrl) return;
+
+  const existing = document.getElementById("vaix-image-viewer");
+  if (existing) existing.remove();
+
+  const viewer = document.createElement("div");
+  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";
+  closeBtn.onmouseover = function(){ this.style.background = "rgba(255,255,255,0.3)"; };
+  closeBtn.onmouseout = function(){ this.style.background = "rgba(255,255,255,0.15)"; };
+  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;
+    caption.style.cssText = "position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.7);font-size:0.85rem;text-align:center;max-width:80%;padding:8px 16px;background:rgba(0,0,0,0.5);border-radius:8px;z-index:2";
+    viewer.appendChild(caption);
+  }
+
+  const img = document.createElement("img");
+  img.src = imageUrl;
+  img.alt = productName || "";
+  img.style.cssText = "max-width:100%;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,0.5);user-select:none;-webkit-user-drag:none";
+  img.onerror = function(){ this.alt = "Không thể tải ảnh"; this.style.maxWidth = "300px"; };
+
+  const hint = document.createElement("div");
+  hint.textContent = "Nhấn ESC hoặc click bên ngoài để đóng";
+  hint.style.cssText = "position:absolute;top:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.4);font-size:0.7rem;z-index:2;white-space:nowrap";
+
+  viewer.appendChild(hint);
+  viewer.appendChild(img);
+
+  viewer.addEventListener("click", function(e) {
+    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);
+    }
+  }
+  document.addEventListener("keydown", keyHandler);
+
+  document.body.appendChild(viewer);
+  document.body.style.overflow = "hidden";
+}
+
 function createChatProductCard(product) {
   if (!product) return "";
   const img = product.image ? product.image : "";
@@ -238,16 +318,12 @@ function createChatProductCard(product) {
   const price = fmt(product.priceNum);
   const cat = product.category || "";
   const rating = product.rating || (Math.random() > 0.3 ? (4 + Math.random()).toFixed(1) : false);
-
-  // Truncate long names
   const shortName = name.length > 50 ? name.slice(0, 47) + "..." : name;
 
   let stars = "";
   if (rating) {
     const full = Math.floor(Number(rating));
-    for (let i = 0; i < 5; i++) {
-      stars += i < full ? "★" : "☆";
-    }
+    for (let i = 0; i < 5; i++) stars += i < full ? "★" : "☆";
   }
 
   return '<div class="chat-product-card" data-product="' + name.replace(/"/g, "&quot;") + '">' +
@@ -268,20 +344,15 @@ function createChatProductCard(product) {
     '</div></div>';
 }
 
-// ── Attach click handlers to chat product cards ──
 function attachChatCardHandlers(container) {
   if (!container) return;
-  // Detail buttons
   container.querySelectorAll(".detail-btn").forEach(function(btn) {
     btn.addEventListener("click", function(e) {
       e.stopPropagation();
       const name = this.getAttribute("data-product");
       const p = findProduct(name);
       if (p) {
-        renderDetail(p);
-        renderSimilarInPanel(p);
-        renderPanelResults([p]);
-        // Open panel
+        renderDetail(p); renderSimilarInPanel(p); renderPanelResults([p]);
         const panel = document.getElementById("vaistudio-panel");
         const toggle = document.getElementById("vaistudio-toggle");
         if (panel) { panel.classList.add("open"); panel.style.display = "flex"; }
@@ -289,15 +360,12 @@ function attachChatCardHandlers(container) {
       }
     });
   });
-  // Share buttons
   container.querySelectorAll(".share-btn").forEach(function(btn) {
     btn.addEventListener("click", function(e) {
       e.stopPropagation();
-      const name = this.getAttribute("data-product");
-      shareProduct(name);
+      shareProduct(this.getAttribute("data-product"));
     });
   });
-  // Click on card itself (not button) also opens detail
   container.querySelectorAll(".chat-product-card-inner").forEach(function(inner) {
     inner.addEventListener("click", function(e) {
       const card = this.closest(".chat-product-card");
@@ -305,9 +373,7 @@ function attachChatCardHandlers(container) {
       const name = card.getAttribute("data-product");
       const p = findProduct(name);
       if (p) {
-        renderDetail(p);
-        renderSimilarInPanel(p);
-        renderPanelResults([p]);
+        renderDetail(p); renderSimilarInPanel(p); renderPanelResults([p]);
         const panel = document.getElementById("vaistudio-panel");
         const toggle = document.getElementById("vaistudio-toggle");
         if (panel) { panel.classList.add("open"); panel.style.display = "flex"; }
@@ -317,34 +383,25 @@ function attachChatCardHandlers(container) {
   });
 }
 
-// ── Main catalog search + UI update ──
 function queryCatalog(query) {
   if (!allProducts.length) return "Catalog still loading, please wait.";
   const q = query.trim();
   if (!q) return "What product are you looking for?";
-
   const qs = sd(q), terms = extractTerms(q);
   const scored = [];
-
   for (let i = 0; i < allProducts.length; i++) {
     const p = allProducts[i];
     const sc = scoreProduct(p, qs, terms);
     if (sc > 0) scored.push({ p, sc });
   }
-
   scored.sort((a,b) => b.sc - a.sc);
   const top = scored.slice(0, 5);
   lastSearchResults = top.map(r => r.p);
-
-  // Update UI panel
   renderPanelResults(top.map(r => r.p));
-
   if (!top.length) {
     lastSearchResults = [];
     return 'Không tìm thấy sản phẩm cho "'+q+'". Bạn có thể thử từ khóa khác hoặc xem danh mục sản phẩm.';
   }
-
-  // Build AI response text
   let result = "Tìm thấy " + top.length + ' sản phẩm cho "' + q + '":\n\n';
   for (let i = 0; i < top.length; i++) {
     const p = top[i].p;
@@ -359,12 +416,9 @@ function queryCatalog(query) {
     }
     result += '\n';
   }
-
   const best = top[0].p;
   lastShownProduct = best;
   result += 'Sản phẩm phù hợp nhất: ' + best.title_clean + ' (' + fmt(best.priceNum) + '). ';
-
-  // Add similar products suggestion
   const similar = getSimilarProducts(best, 3);
   if (similar.length > 0) {
     result += '\n\n👉 Sản phẩm tương tự bạn có thể quan tâm:\n';
@@ -377,11 +431,9 @@ function queryCatalog(query) {
   } else {
     result += 'Bạn muốn xem chi tiết sản phẩm nào?';
   }
-
   return result;
 }
 
-// ── Show product detail modal ──
 function showProduct(name) {
   const p = findProduct(name);
   if (!p) return 'Không tìm thấy sản phẩm: "'+name+'". Hãy thử tìm kiếm với từ khóa khác.';
@@ -423,7 +475,7 @@ function renderPanelResults(products) {
     if (p.image) {
       const ie = document.createElement("img");
       ie.className = "product-card-img";
-      ie.src = p.image; ie.alt = ""; ie.loading = "lazy";
+      ie.src = p.image; ie.alt = p.title_clean || ""; ie.loading = "lazy";
       ie.onerror = function(){ this.style.display = "none"; };
       card.appendChild(ie);
     } else {
@@ -515,7 +567,6 @@ function renderDetail(p) {
   document.getElementById("detail-model").textContent = p.model ? "Model: "+p.model : "";
   document.getElementById("detail-price").textContent = p.priceNum > 0 ? p.priceNum.toLocaleString("vi-VN")+"₫" : "Liên hệ";
 
-  // Price in triệu
   let trieuEl = document.getElementById("detail-price-trieu");
   if (!trieuEl) {
     trieuEl = document.createElement("span");
@@ -526,31 +577,53 @@ 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
+  // Images — with click-to-fullscreen handler
   const ic = document.getElementById("detail-images");
   ic.innerHTML = "";
   const imgs = [];
   if (p.image) imgs.push(p.image);
   if (p.images && p.images.length) p.images.forEach(function(i){ if(i && !imgs.includes(i)) imgs.push(i); });
+
   if (!imgs.length) {
     const d = document.createElement("div");
     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";
+
       const img = document.createElement("img");
-      img.src = url; img.style.cssText = "width:120px;height:120px;border-radius:12px;object-fit:cover;flex-shrink:0;scroll-snap-align:start;border:1px solid #e2e8f0";
-      img.onerror = function(){ this.style.display = "none"; }; ic.appendChild(img);
+      img.src = url;
+      img.style.cssText = "width:120px;height:120px;border-radius:12px;object-fit:cover;border:1px solid #e2e8f0;transition:transform 0.2s, box-shadow 0.2s";
+      img.onerror = function(){ this.style.display = "none"; };
+      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 = ""; };
+
+      // 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);
     });
   }
 
-  // Summary
   const se = document.getElementById("detail-summary");
   if (p.summary) { se.textContent=p.summary; se.style.display="block"; }
   else if (p.description) { se.textContent=p.description.slice(0,300)+(p.description.length>300?"…":""); se.style.display="block"; }
   else se.style.display="none";
 
-  // Features
   const fc = document.getElementById("detail-features"), fl = document.getElementById("detail-features-list");
   fl.innerHTML="";
   if (p.features&&p.features.length) {
@@ -558,7 +631,6 @@ function renderDetail(p) {
     fc.style.display="block";
   } else fc.style.display="none";
 
-  // Specs
   const sc = document.getElementById("detail-specs"), sb = document.querySelector("#detail-specs-table tbody");
   sb.innerHTML="";
   if (p.specs&&typeof p.specs==="object"&&Object.keys(p.specs).length) {
@@ -566,7 +638,7 @@ function renderDetail(p) {
     sc.style.display = sb.children.length?"block":"none";
   } else sc.style.display="none";
 
-  // ── Share button section ──
+  // Share button section
   let shareSection = document.getElementById("detail-share-section");
   if (!shareSection) {
     shareSection = document.createElement("div");
@@ -579,13 +651,10 @@ function renderDetail(p) {
   }
   const shareBtn = document.getElementById("detail-share-btn");
   if (shareBtn) {
-    shareBtn.onclick = function(e) {
-      e.stopPropagation();
-      shareProduct(p.title_clean);
-    };
+    shareBtn.onclick = function(e) { e.stopPropagation(); shareProduct(p.title_clean); };
   }
 
-  // ── Similar products in modal ──
+  // Similar products in modal
   let similarContainer = document.getElementById("detail-similar");
   if (!similarContainer) {
     const modal = document.getElementById("vaistudio-detail-modal");
@@ -623,15 +692,12 @@ function renderDetail(p) {
         similarGrid.appendChild(item);
       }
       similarContainer.style.display = "block";
-    } else {
-      similarContainer.style.display = "none";
-    }
+    } else similarContainer.style.display = "none";
   }
 
   overlay.style.display = "flex";
 }
 
-// ── Search suggestions dropdown ──
 function showSuggestions(suggestions) {
   const dropdown = document.getElementById("vaix-suggestions");
   if (!dropdown) return;
@@ -662,7 +728,6 @@ function showSuggestions(suggestions) {
   }
 }
 
-// ── Setup search input ──
 function setupSearchInput() {
   const input = document.getElementById("vaix-search");
   if (!input) return;
@@ -683,7 +748,6 @@ function setupSearchInput() {
   });
 }
 
-// ── Setup category chips ──
 function setupCategoryChips() {
   const container = document.getElementById("vaix-category-chips");
   if (!container) return;
@@ -703,16 +767,12 @@ function setupCategoryChips() {
   }
 }
 
-// ── Render product cards into chat ──
 function renderSearchResultsInChat(container) {
   if (!container) return;
   const results = lastSearchResults;
   if (!results || !results.length) return;
-
   let html = '<div class="chat-product-cards">';
-  for (const p of results) {
-    html += createChatProductCard(p);
-  }
+  for (const p of results) html += createChatProductCard(p);
   html += '</div>';
   container.innerHTML = html;
   attachChatCardHandlers(container);
@@ -724,7 +784,7 @@ function renderProductInChat(container, product) {
   attachChatCardHandlers(container);
 }
 
-// Expose globally
+// Export to window
 window.vaix = {
   load: load,
   queryCatalog: queryCatalog,
@@ -742,15 +802,15 @@ window.vaix = {
   renderSearchResultsInChat: renderSearchResultsInChat,
   renderProductInChat: renderProductInChat,
   attachChatCardHandlers: attachChatCardHandlers,
+  openImageViewer: openImageViewer,
   allProducts: function(){ return allProducts; },
   isLoaded: function(){ return loaded; },
   renderPanelResults: renderPanelResults
 };
 
-// Auto-load on script load
+// Auto-load
 load().catch(() => {});
 
-// Setup UI after DOM ready
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", function() {
     setupSearchInput();