@akropolys/kiku 1.5.8 → 1.5.9

package/dist/index.d.mts

@@ -116,8 +116,9 @@ declare function CheckoutModal({ onClose, theme, customStyles, hskThemeAttr }: {
 interface ComparisonMatrixProps {
     sources: ChatSource[];
     defaultCurrency?: string;
+    displayConfig?: Record<string, string>;
 }
-declare function ComparisonMatrix({ sources, defaultCurrency }: ComparisonMatrixProps): React.JSX.Element | null;
+declare function ComparisonMatrix({ sources, defaultCurrency, displayConfig }: ComparisonMatrixProps): React.JSX.Element | null;
 
 interface VoiceButtonProps {
     onTranscript: (text: string) => void;

package/dist/index.d.ts

@@ -116,8 +116,9 @@ declare function CheckoutModal({ onClose, theme, customStyles, hskThemeAttr }: {
 interface ComparisonMatrixProps {
     sources: ChatSource[];
     defaultCurrency?: string;
+    displayConfig?: Record<string, string>;
 }
-declare function ComparisonMatrix({ sources, defaultCurrency }: ComparisonMatrixProps): React.JSX.Element | null;
+declare function ComparisonMatrix({ sources, defaultCurrency, displayConfig }: ComparisonMatrixProps): React.JSX.Element | null;
 
 interface VoiceButtonProps {
     onTranscript: (text: string) => void;

package/dist/index.js

@@ -798,66 +798,51 @@ I couldn't find any matching products in the store.`;
 // src/components/KikuButton.tsx
 var import_react5 = require("react");
 var import_react_dom = require("react-dom");
-var import_sdk4 = require("@akropolys/sdk");
 var import_sdk5 = require("@akropolys/sdk");
 var import_sdk6 = require("@akropolys/sdk");
+var import_sdk7 = require("@akropolys/sdk");
 
 // src/components/ComparisonMatrix.tsx
+var import_sdk4 = require("@akropolys/sdk");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function extractSize(p) {
-  const name = p.name;
-  const cat = (p.category || "").toLowerCase();
-  const mExplicit = name.match(/(\d+(?:\.\d+)?)\s*(?:inch(?:es)?|["'″])/i);
-  if (mExplicit) {
-    return `${mExplicit[1]} inches`;
+function normalizeKey(key) {
+  let s = key.replace(/[_-]+/g, " ");
+  s = s.replace(/([a-z])([A-Z])/g, "$1 $2");
+  return s.split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function getBaseGroup(normalized) {
+  const norm = normalized.toLowerCase().trim();
+  if (norm.startsWith("salary") || norm.startsWith("pay") || norm.startsWith("wage")) {
+    return "Salary";
   }
-  if (cat.includes("tv") || cat.includes("audio")) {
-    const mTv = name.match(/\b(\d{2})(?:[a-zA-Z]|\b)/);
-    if (mTv) {
-      const size = parseInt(mTv[1], 10);
-      if (size >= 24 && size <= 120) {
-        return `${size} inches`;
-      }
-    }
+  if (norm.startsWith("price") || norm.startsWith("cost") || norm.startsWith("rate")) {
+    return "Price";
   }
-  return null;
-}
-function extractResolution(name) {
-  if (/\b4K\b/i.test(name)) return "4K Ultra HD (2160p)";
-  if (/\bUHD\b/i.test(name)) return "Ultra HD (2160p)";
-  if (/\b(?:Full HD|FHD|1080p)\b/i.test(name)) return "Full HD (1080p)";
-  if (/\b(?:HD|720p)\b/i.test(name)) return "HD (720p)";
-  return null;
-}
-function extractStorage(name) {
-  const m = name.match(/(\d+)\s*GB(?!\s*RAM)/i);
-  return m ? `${m[1]} GB` : null;
-}
-function extractRAM(name) {
-  const m = name.match(/(\d+)\s*GB\s*RAM/i);
-  return m ? `${m[1]} GB` : null;
-}
-function extractCamera(name) {
-  const m = name.match(/(\d+)\s*MP/i);
-  return m ? `${m[1]} MP` : null;
-}
-function extractBattery(name) {
-  const m = name.match(/(\d{3,5})\s*mAh/i);
-  return m ? `${m[1]} mAh` : null;
+  if (norm.startsWith("location") || norm.startsWith("address") || norm.startsWith("city")) {
+    return "Location";
+  }
+  if (norm.startsWith("image") || norm.startsWith("photo") || norm.startsWith("pic") || norm.startsWith("thumb")) {
+    return "Image";
+  }
+  if (norm.startsWith("title") || norm.startsWith("name") || norm.startsWith("label") || norm.startsWith("heading")) {
+    return "Title";
+  }
+  return normalized;
 }
-function buildRows(products, currency) {
+function buildRows(products, displayConfig, defaultCurrency = "KES") {
   const rows = [];
+  const resolved = products.map((p) => (0, import_sdk4.resolveDisplayFields)(p.fields || p, displayConfig));
   rows.push({
     label: "Product Preview",
-    values: products.map((s) => s.image || null),
+    values: resolved.map((r) => r.image || null),
     type: "image"
   });
-  const prices = products.map((s) => {
-    const n = parseFloat(String(s.price ?? "").replace(/[^0-9.]/g, ""));
+  const prices = resolved.map((r) => {
+    const n = parseFloat(String(r.price ?? "").replace(/[^0-9.]/g, ""));
     return isNaN(n) ? null : n;
   });
-  const priceLabels = products.map((s, i) => {
-    const c = s.currency || currency;
+  const priceLabels = products.map((p, i) => {
+    const c = p.fields?.currency || p.currency || defaultCurrency;
     const n = prices[i];
     return n !== null ? `${c} ${n.toLocaleString("en-KE", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : null;
   });
@@ -869,38 +854,101 @@ function buildRows(products, currency) {
     type: "price",
     bestIdx: minPrice !== null ? prices.indexOf(minPrice) : void 0
   });
-  const brands = products.map((s) => s.brand || null);
-  if (brands.some(Boolean)) rows.push({ label: "Brand", values: brands });
-  const specDefs = [
-    { label: "Display Size", fn: extractSize },
-    { label: "Resolution", fn: (p) => extractResolution(p.name), higherIsBetter: true },
-    { label: "Storage", fn: (p) => extractStorage(p.name), higherIsBetter: true },
-    { label: "RAM", fn: (p) => extractRAM(p.name), higherIsBetter: true },
-    { label: "Camera", fn: (p) => extractCamera(p.name), higherIsBetter: true },
-    { label: "Battery", fn: (p) => extractBattery(p.name), higherIsBetter: true }
+  const keysToExclude = /* @__PURE__ */ new Set([
+    "url",
+    "fields",
+    "id",
+    "score",
+    "currency",
+    "status",
+    "indexed_at",
+    "indexedAt"
+  ]);
+  if (displayConfig) {
+    Object.values(displayConfig).forEach((v) => {
+      if (v) keysToExclude.add(v);
+    });
+  }
+  const commonKeys = [
+    "title",
+    "name",
+    "label",
+    "headline",
+    "subject",
+    "job_title",
+    "listing_title",
+    "common_name",
+    "product_name",
+    "image",
+    "images",
+    "thumbnail",
+    "photo",
+    "cover",
+    "featured_image",
+    "hero_image",
+    "listing_image",
+    "logo",
+    "price",
+    "cost",
+    "listingPrice",
+    "rate",
+    "fee",
+    "startingFrom",
+    "brand",
+    "category",
+    "location",
+    "type",
+    "variety",
+    "make"
   ];
-  const resOrder = ["4K Ultra HD (2160p)", "Ultra HD (2160p)", "Full HD (1080p)", "HD (720p)"];
-  for (const { label, fn, higherIsBetter } of specDefs) {
-    const vals = products.map((s) => fn(s));
-    if (!vals.some(Boolean)) continue;
-    let bestIdx;
-    if (higherIsBetter && vals.filter(Boolean).length > 1) {
-      if (label === "Resolution") {
-        bestIdx = vals.reduce((best, v, i) => {
-          const rank = resOrder.indexOf(v ?? "");
-          const bestRank = resOrder.indexOf(vals[best] ?? "");
-          return rank !== -1 && (bestRank === -1 || rank < bestRank) ? i : best;
-        }, 0);
-      } else {
-        const nums = vals.map((v) => parseFloat((v ?? "").replace(/[^0-9.]/g, "")));
-        const max = Math.max(...nums.filter((n) => !isNaN(n)));
-        bestIdx = nums.indexOf(max);
+  commonKeys.forEach((k) => keysToExclude.add(k));
+  const allFieldKeys = /* @__PURE__ */ new Set();
+  products.forEach((p) => {
+    const f = p.fields || p;
+    if (f) {
+      Object.keys(f).forEach((k) => {
+        if (!keysToExclude.has(k)) {
+          allFieldKeys.add(k);
+        }
+      });
+    }
+  });
+  const groupedKeys = /* @__PURE__ */ new Map();
+  allFieldKeys.forEach((k) => {
+    const norm = normalizeKey(k);
+    const base = getBaseGroup(norm);
+    if (!groupedKeys.has(base)) {
+      groupedKeys.set(base, []);
+    }
+    groupedKeys.get(base).push(k);
+  });
+  const sortedGroups = Array.from(groupedKeys.keys()).sort();
+  sortedGroups.forEach((group) => {
+    const originalKeys = groupedKeys.get(group);
+    const values = products.map((p) => {
+      const f = p.fields || p;
+      if (!f) return null;
+      for (const k of originalKeys) {
+        if (f[k] !== void 0 && f[k] !== null) {
+          if (typeof f[k] === "object") {
+            return JSON.stringify(f[k]);
+          }
+          return String(f[k]);
+        }
       }
+      return null;
+    });
+    if (values.some((v) => v !== null)) {
+      rows.push({
+        label: group,
+        values,
+        type: "text"
+      });
     }
-    rows.push({ label, values: vals, bestIdx });
-  }
+  });
   const avail = products.map((s) => {
-    const a = s.availability ?? "";
+    const f = s.fields || s;
+    const a = f.availability || "";
     if (!a) return null;
     if (/in.?stock/i.test(a)) return "In-Stock";
     if (/out.?of.?stock/i.test(a)) return "Out of Stock";
@@ -909,7 +957,10 @@ function buildRows(products, currency) {
   if (avail.some(Boolean)) {
     rows.push({ label: "Availability", values: avail, type: "availability" });
   }
-  const cats = products.map((s) => s.category || null);
+  const cats = products.map((s) => {
+    const f = s.fields || s;
+    return f.category || null;
+  });
   if (cats.some(Boolean)) rows.push({ label: "Category", values: cats });
   return rows;
 }
@@ -949,16 +1000,15 @@ function AvailabilityCell({ value }) {
     value
   ] });
 }
-function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
-  if (sources.length < 2) return null;
+function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
+  if (!sources || sources.length < 2) return null;
   const products = sources.slice(0, 3);
-  const rows = buildRows(products, defaultCurrency);
+  const rows = buildRows(products, displayConfig, defaultCurrency);
   const colTemplate = `140px repeat(${products.length}, 1fr)`;
   const labelStyle = {
     padding: "10px 12px",
     fontSize: 11,
     fontWeight: 700,
-    // Solid dark fallback — never inherit a muted ancestor color
     color: "var(--hsk-text-muted, #4b5563)",
     textTransform: "uppercase",
     letterSpacing: "0.05em",
@@ -971,7 +1021,6 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
   const cellBase = {
     padding: "10px 14px",
     fontSize: 13,
-    // Explicit color so cells are always readable regardless of parent theme
     color: "var(--hsk-text, #111827)",
     borderBottom: "1px solid var(--hsk-border, rgba(0,0,0,0.07))",
     verticalAlign: "middle",
@@ -993,27 +1042,30 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid", gridTemplateColumns: colTemplate, background: "var(--hsk-surface2, #f9fafb)", borderBottom: "2px solid var(--hsk-border, rgba(0,0,0,0.09))" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...labelStyle, borderBottom: "none", color: "var(--hsk-text, #111)", fontSize: 12 }, children: "Feature" }),
-          products.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "a",
-            {
-              href: p.url || "#",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              style: {
-                display: "flex",
-                alignItems: "center",
-                padding: "10px 14px",
-                fontSize: 12,
-                fontWeight: 700,
-                color: "var(--hsk-primary, #16a34a)",
-                textDecoration: "none",
-                lineHeight: 1.3,
-                borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none"
+          products.map((p, i) => {
+            const { title } = (0, import_sdk4.resolveDisplayFields)(p.fields || p, displayConfig);
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "a",
+              {
+                href: p.url || "#",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "10px 14px",
+                  fontSize: 12,
+                  fontWeight: 700,
+                  color: "var(--hsk-primary, #16a34a)",
+                  textDecoration: "none",
+                  lineHeight: 1.3,
+                  borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none"
+                },
+                children: title
               },
-              children: p.name
-            },
-            i
-          ))
+              i
+            );
+          })
         ] }),
         rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
@@ -1028,8 +1080,9 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
               products.map((p, i) => {
                 const val = row.values[i];
                 const isBest = row.bestIdx === i && row.values.filter(Boolean).length > 1;
+                const { title } = (0, import_sdk4.resolveDisplayFields)(p.fields || p, displayConfig);
                 if (row.type === "image") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageCell, { value: val, name: p.name }) }, i);
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageCell, { value: val, name: title }) }, i);
                 }
                 if (row.type === "availability") {
                   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...cellBase, borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvailabilityCell, { value: val }) }, i);
@@ -1040,7 +1093,6 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
                     style: {
                       ...cellBase,
                       fontWeight: isBest ? 700 : 400,
-                      // Always use a solid dark fallback — never 'inherit' which can be muted/invisible
                       color: isBest ? "var(--hsk-primary, #ea580c)" : row.type === "price" ? "var(--hsk-text, #374151)" : "var(--hsk-text, #111827)",
                       borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none"
                     },
@@ -1282,7 +1334,7 @@ function ActionPills({ cart, actionType, onSend, loading }) {
   )) });
 }
 function SourcesCarousel({ sources, defaultCurrency, onSelectSource, referencedIds = [] }) {
-  const client = (0, import_sdk6.useAkropolysContext)();
+  const client = (0, import_sdk7.useAkropolysContext)();
   const isProperty = client?.vertical === "property";
   const railRef = (0, import_react5.useRef)(null);
   const [showNext, setShowNext] = (0, import_react5.useState)(false);
@@ -1380,7 +1432,7 @@ function SmartContextPills({
   onSend,
   loading
 }) {
-  const client = (0, import_sdk6.useAkropolysContext)();
+  const client = (0, import_sdk7.useAkropolysContext)();
   const isProperty = client?.vertical === "property";
   if (!intent) return null;
   const pills = [];
@@ -1598,8 +1650,8 @@ function ChatModal({
   enableVision = false,
   visionCategoryHint
 }) {
-  const client = (0, import_sdk6.useAkropolysContext)();
-  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset, referencedIds } = (0, import_sdk4.useKiku)();
+  const client = (0, import_sdk7.useAkropolysContext)();
+  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset, referencedIds } = (0, import_sdk5.useKiku)();
   const [input, setInput] = (0, import_react5.useState)("");
   const [attachments, setAttachments] = (0, import_react5.useState)([]);
   const imageInputRef = (0, import_react5.useRef)(null);
@@ -1670,7 +1722,7 @@ function ChatModal({
   const [sessions, setSessions] = (0, import_react5.useState)(() => loadSessions());
   const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(false);
   const [replayMessages, setReplayMessages] = (0, import_react5.useState)(null);
-  const { status: pollStatus } = (0, import_sdk5.usePaymentPolling)({
+  const { status: pollStatus } = (0, import_sdk6.usePaymentPolling)({
     client: client.api,
     merchantReference: merchantRef,
     onSuccess: () => {
@@ -2264,7 +2316,7 @@ function KikuButton({
 // src/components/Sparkle.tsx
 var import_react6 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_sdk7 = require("@akropolys/sdk");
+var import_sdk8 = require("@akropolys/sdk");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
   "svg",
@@ -2375,11 +2427,11 @@ function SparkleModal({
   classNames = {},
   product: initialProduct
 }) {
-  const client = (0, import_sdk7.useAkropolysContext)();
+  const client = (0, import_sdk8.useAkropolysContext)();
   const [fetchedProduct, setFetchedProduct] = (0, import_react6.useState)(null);
   const displayProduct = initialProduct || fetchedProduct;
-  const { results, loading: searchLoading, search } = (0, import_sdk7.useSearch)({ type: "vector" });
-  const { messages, sources, loading: chatLoading, error: chatError, send } = (0, import_sdk7.useKiku)();
+  const { results, loading: searchLoading, search } = (0, import_sdk8.useSearch)({ type: "vector" });
+  const { messages, sources, loading: chatLoading, error: chatError, send } = (0, import_sdk8.useKiku)();
   const [chatInput, setChatInput] = (0, import_react6.useState)("");
   const [isMobile, setIsMobile] = (0, import_react6.useState)(false);
   const [showSpecs, setShowSpecs] = (0, import_react6.useState)(false);
@@ -2865,10 +2917,10 @@ function Sparkle({
 }
 
 // src/components/CartBadge.tsx
-var import_sdk8 = require("@akropolys/sdk");
+var import_sdk9 = require("@akropolys/sdk");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function CartBadge({ className }) {
-  const { cart } = (0, import_sdk8.useCart)();
+  const { cart } = (0, import_sdk9.useCart)();
   if (!cart || cart.item_count === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("hsk-cart-badge", className), children: cart.item_count });
 }
@@ -2876,12 +2928,12 @@ function CartBadge({ className }) {
 // src/components/CartDrawer.tsx
 var import_react8 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_sdk10 = require("@akropolys/sdk");
+var import_sdk11 = require("@akropolys/sdk");
 
 // src/components/CheckoutModal.tsx
 var import_react7 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_sdk9 = require("@akropolys/sdk");
+var import_sdk10 = require("@akropolys/sdk");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function CheckoutModal({
   onClose,
@@ -2889,8 +2941,8 @@ function CheckoutModal({
   customStyles,
   hskThemeAttr
 }) {
-  const { cart, loading: cartLoading } = (0, import_sdk9.useCart)();
-  const client = (0, import_sdk9.useAkropolysContext)();
+  const { cart, loading: cartLoading } = (0, import_sdk10.useCart)();
+  const client = (0, import_sdk10.useAkropolysContext)();
   const [config, setConfig] = (0, import_react7.useState)(null);
   const [loadingConfig, setLoadingConfig] = (0, import_react7.useState)(true);
   const [phone, setPhone] = (0, import_react7.useState)(() => {
@@ -2920,7 +2972,7 @@ function CheckoutModal({
   const [phase, setPhase] = (0, import_react7.useState)("idle");
   const [merchantRef, setMerchantRef] = (0, import_react7.useState)(null);
   const [payError, setPayError] = (0, import_react7.useState)(null);
-  const {} = (0, import_sdk9.usePaymentPolling)({
+  const {} = (0, import_sdk10.usePaymentPolling)({
     client: client.api,
     merchantReference: merchantRef,
     onSuccess: () => {
@@ -3185,11 +3237,11 @@ function CartDrawer({
   className,
   theme
 }) {
-  const { cart, loading } = (0, import_sdk10.useCart)();
+  const { cart, loading } = (0, import_sdk11.useCart)();
   const [open, setOpen] = (0, import_react8.useState)(false);
   const [showCheckout, setShowCheckout] = (0, import_react8.useState)(false);
   const [mounted, setMounted] = (0, import_react8.useState)(false);
-  const client = (0, import_sdk10.useAkropolysContext)();
+  const client = (0, import_sdk11.useAkropolysContext)();
   (0, import_react8.useEffect)(() => {
     setMounted(true);
     const handleTriggerCheckout = () => {