src/rag-ui.js

// ── VAIX RAG: helper functions for UI + sync search ──
// These are injected into app.js after the queryProducts function.
// They add: findProductByName (search by name/SKU), updatePanelResults (show in panel),
// and queryProducts now also updates the UI panel.

function findProductByName(query) {
  if (!vaistudioAllProducts.length) return null;
  const qs = _sd(query), terms = qs.split(/\s+/).filter(t=>t.length>1);
  let best = null, bestScore = 0;
  for (const p of vaistudioAllProducts) {
    let sc = 0;
    const nm = _sd(p.title_clean||p.name), sk = _sd(p.sku||p.model), br = _sd(p.brand);
    if (nm===qs||sk===qs) return p;
    if (nm.includes(qs)||sk.includes(qs)||br.includes(qs)) sc+=20;
    for (const t of terms) { if (nm.includes(t)) sc+=5; if (sk.includes(t)) sc+=4; if (br.includes(t)) sc+=3; }
    if (sc>bestScore) { bestScore=sc; best=p; }
  }
  return best;
}

function updatePanelResults(products) {
  const panel = document.getElementById("vaistudio-panel");
  const toggle = document.getElementById("vaistudio-toggle");
  const loadingEl = document.getElementById("vaistudio-loading");
  const prodsEl = document.getElementById("vaistudio-products");
  const countEl = document.getElementById("vaistudio-count");
  if (!prodsEl) return;

  if (panel && !panel.classList.contains("open")) { panel.classList.add("open"); panel.style.display="flex"; }
  if (toggle) toggle.classList.add("active");
  if (loadingEl) loadingEl.hidden = true;

  prodsEl.innerHTML = "";
  prodsEl.style.display = "block";

  for (let i=0; i<products.length; i++) {
    const p = products[i];
    const card = document.createElement("div"); card.className = "product-card";
    if (p.image) {
      const ie = document.createElement("img"); ie.className="product-card-img"; ie.src=p.image; ie.alt=""; ie.loading="lazy";
      ie.onerror = function(){this.style.display="none"}; card.appendChild(ie);
    } else {
      const pl = document.createElement("div"); pl.className="product-card-img";
      pl.style.cssText = "flex-shrink:0;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-size:1.5rem";
      pl.textContent="📦"; card.appendChild(pl);
    }
    const info = document.createElement("div"); info.className="product-card-info";
    const t = document.createElement("p"); t.className="product-card-title"; t.textContent=p.title_clean||p.name;
    const b = document.createElement("p"); b.className="product-card-brand"; b.textContent=p.brand||"";
    const pr = document.createElement("p"); pr.className="product-card-price"; pr.textContent=_fmt(p.priceNum);
    info.append(t,b,pr);
    if (p.category) { const ct = document.createElement("span"); ct.className="product-card-cat"; ct.textContent=p.category; info.appendChild(ct); }
    card.appendChild(info);
    card.addEventListener("click", function(e){ e.stopPropagation(); showProductDetail(p); });
    prodsEl.appendChild(card);
  }
  if (countEl) countEl.textContent = products.length+" kết quả";
}