Delete src/vaix.css, src/vaix.js

src/vaix.css

@@ -1,457 +0,0 @@
-/* V.AIX Panel styles — compact, mobile-friendly product catalog */
-
-.vaix-panel {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  max-width: 100vw;
-  height: 100%;
-  max-height: 100vh;
-  background: #fff;
-  border-radius: 20px 20px 0 0;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
-  z-index: 160;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  visibility: hidden;
-  transition: visibility 0.3s;
-}
-
-.vaix-panel.open {
-  visibility: visible;
-}
-
-.vaix-header {
-  background: linear-gradient(135deg, #003f62, #0077b6);
-  color: #fff;
-  padding: 14px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-shrink: 0;
-}
-
-.vaix-header-avatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.15);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1rem;
-  flex-shrink: 0;
-}
-
-.vaix-header-info {
-  flex: 1;
-}
-
-.vaix-header-info h4 {
-  font-size: 0.9rem;
-  font-weight: 700;
-  margin: 0;
-}
-
-.vaix-header-info span {
-  font-size: 0.68rem;
-  opacity: 0.75;
-}
-
-.vaix-close-btn {
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-  min-height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.25);
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1rem;
-  transition: all 0.2s ease;
-}
-
-.vaix-close-btn:hover {
-  background: rgba(255, 255, 255, 0.4);
-}
-
-.vaix-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  background: #f8fafc;
-}
-
-.vaix-search-box {
-  position: relative;
-  margin-bottom: 16px;
-}
-
-.vaix-search-box input {
-  width: 100%;
-  padding: 10px 40px 10px 14px;
-  border: 2px solid #e2e8f0;
-  border-radius: 12px;
-  font-size: 0.88rem;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.vaix-search-box input:focus {
-  border-color: #003f62;
-  box-shadow: 0 0 0 3px rgba(0, 63, 98, 0.1);
-}
-
-.vaix-search-btn {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  bottom: 4px;
-  width: 34px;
-  border-radius: 8px;
-  background: #003f62;
-  color: #fff;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.9rem;
-}
-
-.vaix-search-btn:hover {
-  background: #005a8c;
-}
-
-.vaix-loading {
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 60px 20px;
-  color: #64748b;
-}
-
-.vaix-loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #e2e8f0;
-  border-top-color: #003f62;
-  border-radius: 50%;
-  animation: vaix-spin 1s linear infinite;
-}
-
-@keyframes vaix-spin {
-  to { transform: rotate(360deg); }
-}
-
-.vaix-empty {
-  text-align: center;
-  padding: 50px 20px;
-  color: #64748b;
-}
-
-.vaix-empty i {
-  font-size: 2.5rem;
-  opacity: 0.3;
-  margin-bottom: 14px;
-  display: block;
-}
-
-.vaix-empty h3 {
-  font-size: 1rem;
-  font-weight: 700;
-  color: #0f172a;
-  margin-bottom: 6px;
-}
-
-.vaix-clear-btn {
-  padding: 8px 16px;
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  font-size: 0.82rem;
-  cursor: pointer;
-  font-family: inherit;
-  color: #64748b;
-}
-
-.vaix-clear-btn:hover {
-  background: #e2e8f0;
-}
-
-.vaix-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.vaix-category {
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-}
-
-.vaix-category h3 {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: #003f62;
-  padding: 12px 14px 10px;
-  background: #f8fafc;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.vaix-category h3 .vaix-cat-name::after {
-  content: "";
-  display: inline-block;
-  width: 4px;
-  height: 14px;
-  background: #db9815;
-  border-radius: 2px;
-  margin-left: 8px;
-  vertical-align: middle;
-}
-
-.vaix-products {
-  padding: 8px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 8px;
-}
-
-.vaix-product-card {
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-.vaix-product-card:hover {
-  border-color: #003f62;
-  box-shadow: 0 4px 12px rgba(0, 63, 98, 0.15);
-}
-
-.vaix-product-card img {
-  width: 100%;
-  height: 100px;
-  object-fit: contain;
-  background: #f8fafc;
-  padding: 6px;
-}
-
-.vaix-product-info {
-  padding: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.vaix-product-title {
-  font-size: 0.74rem;
-  font-weight: 600;
-  color: #0f172a;
-  line-height: 1.3;
-  margin-bottom: 4px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.vaix-product-brand {
-  font-size: 0.64rem;
-  font-weight: 500;
-  color: #64748b;
-  margin-bottom: 2px;
-}
-
-.vaix-product-price {
-  font-size: 0.78rem;
-  font-weight: 800;
-  color: #003f62;
-}
-
-.vaix-product-sku {
-  font-size: 0.62rem;
-  color: #94a3b8;
-  margin-top: 2px;
-}
-
-/* Product detail modal */
-.vaix-product-detail {
-  background: #f8fafc;
-  border-radius: 16px;
-  padding: 16px;
-  min-height: 200px;
-}
-
-.vaix-detail-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.vaix-detail-grid img {
-  width: 100%;
-  height: auto;
-  max-height: 200px;
-  object-fit: contain;
-  border-radius: 12px;
-  background: #fff;
-  padding: 12px;
-}
-
-.vaix-detail-info {
-  padding: 8px 0;
-}
-
-.vaix-detail-info h2 {
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: #0f172a;
-  margin: 0 0 8px;
-}
-
-.vaix-detail-sku {
-  font-size: 0.74rem;
-  color: #64748b;
-  margin-bottom: 4px;
-}
-
-.vaix-detail-brand {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: #003f62;
-  margin-bottom: 8px;
-}
-
-.vaix-detail-price {
-  font-size: 1.2rem;
-  font-weight: 800;
-  color: #003f62;
-  margin-bottom: 12px;
-}
-
-.vaix-detail-category {
-  display: inline-block;
-  background: #e0f2fe;
-  color: #003f62;
-  padding: 4px 12px;
-  border-radius: 20px;
-  font-size: 0.74rem;
-  font-weight: 600;
-  margin-bottom: 12px;
-}
-
-.vaix-detail-features {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.82rem;
-  color: #0f172a;
-  margin-bottom: 12px;
-}
-
-.vaix-detail-features i {
-  color: #db9815;
-}
-
-.vaix-detail-description {
-  font-size: 0.82rem;
-  color: #64748b;
-  line-height: 1.6;
-  margin-bottom: 16px;
-}
-
-.vaix-inquire-btn {
-  width: 100%;
-  padding: 12px 16px;
-  background: linear-gradient(135deg, #003f62, #0077b6);
-  color: #fff;
-  border: none;
-  border-radius: 10px;
-  font-size: 0.88rem;
-  font-weight: 700;
-  cursor: pointer;
-  font-family: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.vaix-inquire-btn:hover {
-  background: linear-gradient(135deg, #005a8c, #0086c9);
-}
-
-.vaix-back-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  font-size: 0.82rem;
-  cursor: pointer;
-  font-family: inherit;
-  color: #64748b;
-  margin-bottom: 12px;
-}
-
-.vaix-back-btn:hover {
-  background: #f1f5f9;
-}
-
-/* Inquiry suggestion */
-.vaix-inquiry-suggest {
-  display: none;
-  padding: 10px 14px;
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-  border-radius: 10px;
-  font-size: 0.82rem;
-  color: #92400e;
-  margin-top: 12px;
-}
-
-/* Small screen adjustments */
-@media (max-width: 768px) {
-  .vaix-panel {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: 0;
-  }
-
-  .vaix-products {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .vaix-product-card img {
-    height: 80px;
-  }
-}
-
-@media (max-width: 480px) {
-  .vaix-products {
-    grid-template-columns: 1fr;
-  }
-
-  .vaix-product-card img {
-    height: 120px;
-  }
-}

src/vaix.js

@@ -1,324 +0,0 @@
-/**
- * V.AIX Panel — lightweight product search & display for gemma-avatar.
- * 
- * Data source: /api/vaix/* endpoints (serving from HF Dataset via index.ts).
- * 
- * Caching strategy:
- * 1. Load products from /api/vaix/products on first open
- * 2. Subsequent opens load from localStorage (instant)
- * 3. Cache refreshes every 24h via background fetch
- */
-
-// Use local server API endpoints (index.ts serves these)
-const API_PRODUCTS = "/api/vaix/products";
-const API_SEARCH = "/api/vaix/search";
-
-// Cache keys
-const CACHE_KEY = "vaix_products_cache";
-const CACHE_TIMESTAMP_KEY = "vaix_cache_timestamp";
-const CACHE_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
-
-// State
-let allProducts = [];
-let filteredProducts = [];
-let isLoading = false;
-let searchDebounceTimer = null;
-
-// Search index (pre-built for fast client-side search)
-let searchIndex = new Map();
-
-function initSearchIndex(products) {
-  searchIndex.clear();
-  products.forEach((p, i) => {
-    const searchable = [p.title_clean, p.sku, p.brand, p.category, p.features]
-      .filter(Boolean)
-      .join(" ")
-      .toLowerCase()
-      .normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-    searchable.split(/\s+/).forEach(word => {
-      if (word.length > 1) {
-        if (!searchIndex.has(word)) searchIndex.set(word, []);
-        searchIndex.get(word).push(i);
-      }
-    });
-  });
-  console.log(`[V.AIX] Search index built: ${searchIndex.size} terms, ${products.length} products`);
-}
-
-function searchLocal(query) {
-  if (!query || !searchIndex.size) return allProducts.slice(0, 50);
-  
-  const norm = query.toLowerCase().normalize('NFD').replace(/[\u0300-\u06f]/g, '');
-  const terms = norm.split(/\s+/).filter(w => w.length > 0);
-  
-  const scores = new Map();
-  allProducts.forEach((p, i) => {
-    const searchable = [p.title_clean, p.sku, p.brand, p.category, p.features, p.description]
-      .filter(Boolean)
-      .join(" ")
-      .toLowerCase()
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '');
-    
-    let score = 0;
-    terms.forEach(term => {
-      const termLen = term.length;
-      if (p.title_clean && p.title_clean.toLowerCase().includes(term)) score += 10 * termLen;
-      if (p.sku && p.sku.toLowerCase().includes(term)) score += 8 * termLen;
-      if (p.brand && p.brand.toLowerCase().includes(term)) score += 6 * termLen;
-      if (p.category && p.category.toLowerCase().includes(term)) score += 4 * termLen;
-      if (p.features && p.features.toLowerCase().includes(term)) score += 2 * termLen;
-    });
-    
-    if (score > 0) scores.set(i, score);
-  });
-  
-  const sorted = [...scores.entries()].sort((a, b) => b[1] - a[1]);
-  return sorted.slice(0, 100).map(([idx]) => allProducts[idx]);
-}
-
-function saveToCache() {
-  try {
-    localStorage.setItem(CACHE_KEY, JSON.stringify({
-      products: allProducts.map(p => ({
-        title_clean: p.title_clean,
-        title: p.title,
-        sku: p.sku,
-        brand: p.brand,
-        category: p.category,
-        price: p.price,
-        image: p.image || "",
-        features: p.features,
-        description: p.description,
-      })),
-      timestamp: Date.now(),
-    }));
-    localStorage.setItem(CACHE_TIMESTAMP_KEY, Date.now().toString());
-    console.log(`[V.AIX] Cached ${allProducts.length} products`);
-  } catch (e) { console.warn("[V.AIX] Cache save failed:", e); }
-}
-
-function loadFromCache() {
-  try {
-    const data = localStorage.getItem(CACHE_KEY);
-    const ts = localStorage.getItem(CACHE_TIMESTAMP_KEY);
-    if (!data || !ts) return null;
-    
-    const cache = JSON.parse(data);
-    const age = Date.now() - parseInt(ts);
-    
-    if (age > CACHE_EXPIRY_MS) {
-      localStorage.removeItem(CACHE_KEY);
-      localStorage.removeItem(CACHE_TIMESTAMP_KEY);
-      return null;
-    }
-    
-    console.log(`[V.AIX] Loaded ${cache.products.length} products from cache (${Math.round(age / 60000)}m old)`);
-    return cache.products;
-  } catch (e) {
-    console.warn("[V.AIX] Cache load failed:", e);
-    return null;
-  }
-}
-
-async function fetchProducts() {
-  if (isLoading) return;
-  isLoading = true;
-  
-  // Try cache first
-  const cached = loadFromCache();
-  if (cached && cached.length > 0) {
-    allProducts = cached;
-    initSearchIndex(allProducts);
-    updateProductCount(cached.length);
-    isLoading = false;
-    return;
-  }
-  
-  showLoadingState(true);
-  
-  try {
-    const resp = await fetch(API_PRODUCTS);
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    
-    const data = await resp.json();
-    allProducts = Array.isArray(data) ? data : (data.products || []);
-    
-    console.log(`[V.AIX V2] Fetched ${allProducts.length} products from ${API_PRODUCTS}`);
-    
-    if (allProducts.length > 0) {
-      initSearchIndex(allProducts);
-      saveToCache();
-      updateProductCount(allProducts.length);
-    } else {
-      console.warn("[V.AIX V2] No products returned from API");
-    }
-  } catch (e) {
-    console.error("[V.AIX V2] Fetch failed:", e);
-  }
-  
-  showLoadingState(false);
-  isLoading = false;
-}
-
-function updateProductCount(count) {
-  const el = document.getElementById("vaix-count");
-  if (el) el.textContent = `${count.toLocaleString("vi-VN")} sản phẩm`;
-}
-
-function showLoadingState(show) {
-  const el = document.getElementById("vaix-loading");
-  if (el) el.style.display = show ? "flex" : "none";
-}
-
-function showProducts(productList) {
-  const container = document.getElementById("vaix-product-list");
-  if (!container) return;
-  
-  if (!productList || productList.length === 0) {
-    container.innerHTML = `
-      <div class="vaix-empty">
-        <i class="fas fa-search"></i>
-        <h3>Không tìm thấy sản phẩm</h3>
-        <p>Thử từ khóa khác hoặc duyệt theo danh mục</p>
-      </div>
-    `;
-    return;
-  }
-  
-  // Group by category for compact display
-  const categories = {};
-  productList.forEach(p => {
-    const cat = p.category || "Khác";
-    if (!categories[cat]) categories[cat] = [];
-    categories[cat].push(p);
-  });
-  
-  let html = `<div class="vaix-grid">`;
-  
-  Object.entries(categories).forEach(([cat, products]) => {
-    html += `<div class="vaix-category">
-      <h3><span class="vaix-cat-name">${escHtml(cat)}</span> (${products.length})</h3>
-      <div class="vaix-products">`;
-    
-    products.forEach(p => {
-      const priceStr = formatPrice(p.price);
-      const imgSrc = p.image || 'https://via.placeholder.com/120x120?text=V.AIX';
-      html += `
-        <div class="vaix-product-card" onclick="openProduct(${allProducts.indexOf(p)})">
-          <img src="${imgSrc}" alt="${escHtml(p.title)}" loading="lazy" />
-          <div class="vaix-product-info">
-            <div class="vaix-product-title">${escHtml(p.title_clean || p.title)}</div>
-            <div class="vaix-product-brand">${escHtml(p.brand || "")}</div>
-            <div class="vaix-product-price">${priceStr}</div>
-            ${p.sku ? `<div class="vaix-product-sku">${escHtml(p.sku)}</div>` : ""}
-          </div>
-        </div>
-      `;
-    });
-    
-    html += `</div></div>`;
-  });
-  
-  html += `</div>`;
-  container.innerHTML = html;
-}
-
-function formatPrice(price) {
-  if (!price || price <= 0) return "Liên hệ";
-  return price.toLocaleString("vi-VN") + "đ";
-}
-
-function escHtml(str) {
-  if (!str) return "";
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
-}
-
-function openProduct(index) {
-  if (index < 0 || index >= allProducts.length) return;
-  showProductDetail(allProducts[index]);
-}
-
-function showProductDetail(product) {
-  const container = document.getElementById("vaix-product-detail");
-  if (!container) return;
-  
-  container.innerHTML = `
-    <div class="vaix-product-detail">
-      <button class="vaix-back-btn" onclick="closeDetail()"><i class="fas fa-arrow-left"></i> Quay lại</button>
-      <div class="vaix-detail-grid">
-        <img src="${product.image || 'https://via.placeholder.com/300x300?text=V.AIX'}" alt="${product.title}" />
-        <div class="vaix-detail-info">
-          <h2>${escHtml(product.title_clean || product.title)}</h2>
-          <div class="vaix-detail-sku">${escHtml(product.sku || "")}</div>
-          <div class="vaix-detail-brand">${escHtml(product.brand || "")}</div>
-          <div class="vaix-detail-price">${formatPrice(product.price)}</div>
-          ${product.category ? `<div class="vaix-detail-category">${escHtml(product.category)}</div>` : ""}
-          ${product.features ? `<div class="vaix-detail-features">${escHtml(product.features)}</div>` : ""}
-          ${product.description ? `<div class="vaix-detail-description">${escHtml(product.description)}</div>` : ""}
-          <button class="vaix-inquire-btn" onclick="inquireProduct('${escHtml(product.title_clean || product.title)}')">
-            <i class="fas fa-comments"></i> Tư vấn sản phẩm
-          </button>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-function closeDetail() {
-  document.getElementById("vaix-product-detail").innerHTML = "";
-}
-
-function inquireProduct(title) {
-  console.log("[V.AIX] Inquiring about:", title);
-  if (window.parent && window.parent.postMessage) {
-    window.parent.postMessage({
-      type: "VAIX_INQUIRY",
-      product: title,
-    }, "*");
-  }
-  
-  const suggestEl = document.getElementById("vaix-inquiry-suggest");
-  if (suggestEl) {
-    suggestEl.textContent = `Bạn có muốn hỏi Gemma về "${title}"?`;
-    suggestEl.style.display = "block";
-  }
-}
-
-function clearSearch() {
-  const input = document.getElementById("vaix-search-input");
-  if (input) input.value = "";
-  const container = document.getElementById("vaix-product-list");
-  if (container) container.innerHTML = "";
-  const detailViewBtn = document.getElementById("vaix-detail-view-btn");
-  if (detailViewBtn) detailViewBtn.style.display = "flex";
-  document.getElementById("vaix-product-detail").innerHTML = "";
-}
-
-const VAX_SEARCH = (e) => {
-  const q = e.target.value.trim();
-  clearTimeout(searchDebounceTimer);
-  
-  searchDebounceTimer = setTimeout(() => {
-    const results = q ? searchLocal(q) : allProducts.slice(0, 20);
-    filteredProducts = results;
-    showProducts(results);
-  }, 200);
-};
-
-window.vaix = {
-  fetchProducts,
-  searchLocal,
-  openProduct,
-  showProducts,
-  getProducts: () => allProducts,
-  search: (q) => searchLocal(q),
-};
-
-document.addEventListener("DOMContentLoaded", () => {
-  const searchEl = document.getElementById("vaix-search-input");
-  if (searchEl) searchEl.addEventListener("input", VAX_SEARCH);
-  fetchProducts();
-});