@akropolys/kiku 1.7.0 → 1.7.2

package/dist/index.mjs

@@ -222,8 +222,25 @@ var parseInline = (text, keyPrefix) => {
     return part;
   });
 };
-function renderMarkdown(content) {
+function isTableLine(line, inTable) {
+  const t = line.trim();
+  if (inTable) return t.includes("|");
+  return t.startsWith("|");
+}
+function splitTableCells(rowLine) {
+  let t = rowLine.trim();
+  if (t.startsWith("|")) t = t.slice(1);
+  if (t.endsWith("|")) t = t.slice(0, -1);
+  return t.split("|").map((c) => c.trim());
+}
+function renderMarkdown(content, streaming = false) {
   const lines = content.split("\n");
+  if (streaming && lines.length > 0) {
+    const last = lines[lines.length - 1];
+    if (last.trim().startsWith("|") && !last.trim().endsWith("|")) {
+      lines.pop();
+    }
+  }
   const elements = [];
   let i = 0;
   while (i < lines.length) {
@@ -275,17 +292,27 @@ function renderMarkdown(content) {
       elements.push(/* @__PURE__ */ jsx2("ul", { className: "hsk-markdown-list", children: listItems }, `ul-${key}`));
       continue;
     }
-    if (line.trim().startsWith("|")) {
+    if (line.match(/^\d+[.)]\s+/)) {
+      const listItems = [];
+      while (i < lines.length && lines[i].match(/^\d+[.)]\s+/)) {
+        const itemText = lines[i].replace(/^\d+[.)]\s+/, "");
+        listItems.push(/* @__PURE__ */ jsx2("li", { children: parseInline(itemText, `li-${i}`) }, `li-${i}`));
+        i++;
+      }
+      elements.push(/* @__PURE__ */ jsx2("ol", { className: "hsk-markdown-list", children: listItems }, `ol-${key}`));
+      continue;
+    }
+    if (isTableLine(line, false)) {
       const tableRows = [];
       let isHeader = true;
-      while (i < lines.length && lines[i].trim().startsWith("|")) {
+      while (i < lines.length && isTableLine(lines[i], true)) {
         const rowLine = lines[i].trim();
-        if (rowLine.match(/^\|[-:| ]+\|$/)) {
+        if (rowLine.match(/^\|?[-:| ]+\|?$/) && rowLine.includes("-")) {
           i++;
           isHeader = false;
           continue;
         }
-        const cells = rowLine.split("|").slice(1, -1).map((c) => c.trim());
+        const cells = splitTableCells(rowLine);
         const Tag = isHeader ? "th" : "td";
         tableRows.push(
           /* @__PURE__ */ jsx2("tr", { children: cells.map((cell, cIdx) => /* @__PURE__ */ jsx2(Tag, { children: parseInline(cell, `td-${i}-${cIdx}`) }, `td-${i}-${cIdx}`)) }, `tr-${i}`)
@@ -471,7 +498,7 @@ function SourceCard({
   );
 }
 function ChatWidget({
-  title = "AI Shopping Assistant",
+  title = "kiku",
   placeholder = "Ask about anything in our store\u2026",
   emptyStateText = "Ask me anything about our products",
   emptyStateSuggestions = '"Find me headphones under KSh 5,000" \xB7 "Gift ideas"',
@@ -1082,77 +1109,22 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES", displayConfig }) {
 
 // src/components/KikuButton.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs6(
+var KikuIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsx7(
   "svg",
   {
-    className: cn("hsk-brand-a", className),
+    className: cn("hsk-brand-mark", className),
     width: size,
     height: size,
-    viewBox: "0 0 28 30",
-    fill: "none",
+    viewBox: "0 0 100 100",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": "Akropolys",
-    children: [
-      /* @__PURE__ */ jsx7(
-        "path",
-        {
-          d: "M14.5 4.5 L6.5 25",
-          stroke: "currentColor",
-          strokeWidth: "2.2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "path",
-        {
-          d: "M14.5 4.5 L22.5 25",
-          stroke: "currentColor",
-          strokeWidth: "4.2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "path",
-        {
-          d: "M9.5 17 H19.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "path",
-        {
-          d: "M3 25 H10",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "path",
-        {
-          d: "M19 25 H26",
-          stroke: "currentColor",
-          strokeWidth: "2.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "path",
-        {
-          d: "M8.5 2.5 C10 2.5, 11 3.5, 11 5 C11 7, 8.5 8.5, 7.5 9.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          fill: "none",
-          className: "hsk-akr-breath"
-        }
-      )
-    ]
+    "aria-label": "kiku",
+    children: /* @__PURE__ */ jsxs6("g", { transform: "translate(22.7 19) scale(0.62)", fill: "currentColor", fillRule: "evenodd", children: [
+      /* @__PURE__ */ jsx7("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z" }),
+      /* @__PURE__ */ jsx7("circle", { cx: "55", cy: "82", r: "3.4" })
+    ] })
   }
 );
-var SparkleIcon2 = AkropolysAIcon;
+var SparkleIcon2 = KikuIcon;
 var ArrowUpIcon2 = () => /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx7("path", { d: "m5 12 7-7 7 7" }),
   /* @__PURE__ */ jsx7("path", { d: "M12 19V5" })
@@ -1345,7 +1317,25 @@ function AtPickerMenu({ onSelect, onDismiss }) {
     }
   );
 }
-function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClick, referencedIds = [] }) {
+function SourceImg({ src, alt, onImageClick }) {
+  const [failed, setFailed] = useState5(false);
+  if (failed) {
+    return /* @__PURE__ */ jsx7("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--hsk-chat-source-bg, rgba(0,0,0,.04))", color: "var(--hsk-chat-muted, #888)" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) });
+  }
+  return /* @__PURE__ */ jsx7(
+    "img",
+    {
+      src,
+      alt: alt ?? "",
+      onError: () => setFailed(true),
+      onClick: onImageClick ? (e) => {
+        e.stopPropagation();
+        onImageClick(src);
+      } : void 0
+    }
+  );
+}
+function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClick, referencedIds = [], compact = false }) {
   const client = useAkropolysContext3();
   const isProperty = client?.vertical === "property";
   const railRef = useRef5(null);
@@ -1373,7 +1363,7 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClic
   };
   const display = sources.filter((s) => s.id && referencedIds.includes(s.id));
   if (display.length === 0) return null;
-  return /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-sources-wrap", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("hsk-cb-sources-wrap", compact && "hsk-cb-sources-wrap--compact"), children: [
     /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sources", ref: railRef, children: display.map((src, si) => {
       const isReferenced = !!(src.id && referencedIds.includes(src.id));
       return /* @__PURE__ */ jsxs6(
@@ -1384,18 +1374,7 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClic
           onClick: () => onSelectSource?.(src),
           children: [
             src.image ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx7(
-                "img",
-                {
-                  src: src.image,
-                  alt: src.name,
-                  loading: "lazy",
-                  onClick: onImageClick ? (e) => {
-                    e.stopPropagation();
-                    onImageClick(src.image);
-                  } : void 0
-                }
-              ),
+              /* @__PURE__ */ jsx7(SourceImg, { src: src.image, alt: src.name, onImageClick }),
               isReferenced && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 10 }) }),
               isProperty && /* @__PURE__ */ jsx7("div", { style: {
                 position: "absolute",
@@ -1427,7 +1406,7 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource, onImageClic
             ] })
           ]
         },
-        si
+        src.id ?? si
       );
     }) }),
     showNext && /* @__PURE__ */ jsxs6(Fragment3, { children: [
@@ -1652,7 +1631,7 @@ var PROPERTY_CHIPS = [
   "Studio apartments with pool"
 ];
 function ChatModal({
-  title = "Shopping Assistant",
+  title = "kiku",
   placeholder = "Ask me anything \u2014 gifts, budget, use case\u2026",
   backdropColor,
   backdropBlur,
@@ -1740,7 +1719,7 @@ function ChatModal({
   }, []);
   const isProperty = client.vertical === "property";
   const activeChips = chips === DEFAULT_CHIPS && isProperty ? PROPERTY_CHIPS : chips;
-  const activeTitle = title === "Shopping Assistant" && isProperty ? "Property Assistant" : title;
+  const activeTitle = title;
   const activePlaceholder = placeholder === "Ask me anything \u2014 gifts, budget, use case\u2026" && isProperty ? "Ask me anything \u2014 location, budget, bedrooms\u2026" : placeholder;
   const [selectedProduct, setSelectedProduct] = useState5(null);
   const [lightboxSrc, setLightboxSrc] = useState5(null);
@@ -2019,10 +1998,10 @@ function ChatModal({
                     messageRefs.current[idx] = el;
                   }, children: isUser ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-user-msg", children: [
                     msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-user-imgs", children: msg.images.map((img, i) => /* @__PURE__ */ jsx7("img", { src: img, alt: `attachment ${i + 1}`, className: "hsk-cb-user-img-thumb" }, i)) }),
-                    msg.content && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-user-bubble", children: [
-                      /^@kiku\b/i.test(msg.content) && /* @__PURE__ */ jsx7("span", { className: "hsk-kiku-badge", children: "@kiku" }),
-                      msg.content
-                    ] })
+                    msg.content && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-user-bubble", children: /^@kiku\b/i.test(msg.content) ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                      /* @__PURE__ */ jsx7("span", { className: "hsk-kiku-badge", children: "@kiku" }),
+                      msg.content.replace(/^@kiku\s*/i, "")
+                    ] }) : msg.content })
                   ] }) : /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
                     /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
                     /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-body", children: [
@@ -2031,7 +2010,7 @@ function ChatModal({
                         return /* @__PURE__ */ jsxs6(Fragment3, { children: [
                           thinking && /* @__PURE__ */ jsx7(ThinkingBlock, { text: thinking, isComplete }),
                           content && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-text", children: [
-                            renderMarkdown(content),
+                            renderMarkdown(content, isLast && streaming),
                             isLast && streaming && /* @__PURE__ */ jsx7("span", { style: { display: "inline-block", width: "0.5em", height: "1.05em", marginLeft: "2px", verticalAlign: "text-bottom", background: "currentColor", opacity: 0.55, borderRadius: "1px" } })
                           ] })
                         ] });
@@ -2046,14 +2025,18 @@ function ChatModal({
                           src: msg.visualization,
                           alt: "Product visualized in your photo",
                           className: "hsk-markdown-img",
-                          loading: "lazy"
+                          onError: (e) => {
+                            e.target.style.display = "none";
+                          }
                         }
                       ) }),
                       isLast && lastIntent === "compare" && sources.length >= 2 && /* @__PURE__ */ jsx7(ComparisonMatrix, { sources, defaultCurrency }),
                       (() => {
                         const msgReferencedIds = isLast ? referencedIds : msg.referencedIds ?? [];
                         const msgSources = isLast ? sources : msg.sources ?? [];
-                        const showCarousel = msgReferencedIds.length > 0 && (isLast ? lastIntent !== "compare" : msg.intent !== "compare") && lastAction?.type !== "request_kiku_key" && lastAction?.type !== "capture" && lastAction?.type !== "delete" && lastAction?.type !== "view_history";
+                        const msgIntent = isLast ? lastIntent : msg.intent;
+                        const hiddenIntent = msgIntent === "compare" || msgIntent === "capture" || msgIntent === "capture_all" || msgIntent === "delete" || msgIntent === "view_history";
+                        const showCarousel = msgReferencedIds.length > 0 && !hiddenIntent && (!isLast || lastAction?.type !== "request_kiku_key");
                         return showCarousel && /* @__PURE__ */ jsx7(
                           SourcesCarousel,
                           {
@@ -2061,7 +2044,8 @@ function ChatModal({
                             defaultCurrency,
                             onSelectSource: handleSourceClick,
                             onImageClick: setLightboxSrc,
-                            referencedIds: msgReferencedIds
+                            referencedIds: msgReferencedIds,
+                            compact: !!msg.visualization
                           }
                         );
                       })(),
@@ -2099,22 +2083,20 @@ function ChatModal({
                     ]
                   }
                 ),
-                loading && !streaming && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
-                  /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center", marginTop: "4px" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
-                  /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-                    /* @__PURE__ */ jsx7("style", { children: `
-                    @keyframes hsk-pulse {
-                      0%, 100% { opacity: 0.6; }
-                      50% { opacity: 1; }
-                    }
-                  ` }),
-                    /* @__PURE__ */ jsx7("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: "Thinking\u2026" }),
-                    /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-typing", style: { margin: 0, alignSelf: "flex-start" }, children: [
-                      /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot" }),
-                      /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot" }),
-                      /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot" })
-                    ] })
-                  ] })
+                loading && !streaming && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                  /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-thinking-icon", children: [
+                    /* @__PURE__ */ jsx7("svg", { className: "hsk-brand-mark", viewBox: "0 0 100 100", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z", transform: "translate(22.7 19) scale(0.62)", fillRule: "evenodd" }) }),
+                    /* @__PURE__ */ jsx7("svg", { className: "hsk-brand-mark hsk-brand-mark--sheen", viewBox: "0 0 100 100", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z", transform: "translate(22.7 19) scale(0.62)", fillRule: "evenodd" }) }),
+                    /* @__PURE__ */ jsx7("span", { className: "hsk-handle-orbit", children: /* @__PURE__ */ jsxs6("span", { className: "hsk-handle-ring", children: [
+                      /* @__PURE__ */ jsx7("span", { className: "hsk-handle-ball" }),
+                      /* @__PURE__ */ jsx7("span", { className: "hsk-handle-ball" }),
+                      /* @__PURE__ */ jsx7("span", { className: "hsk-handle-ball" }),
+                      /* @__PURE__ */ jsx7("span", { className: "hsk-handle-ball" }),
+                      /* @__PURE__ */ jsx7("span", { className: "hsk-handle-ball" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx7("span", { className: "hsk-handle-rest" })
+                  ] }),
+                  /* @__PURE__ */ jsx7("span", { className: "hsk-cb-thinking-text", children: "Thinking\u2026" })
                 ] }),
                 error && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
                 keyPhase === "prompt_key" && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
@@ -2269,7 +2251,7 @@ function ChatModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-hint", children: "Akropolys AI \xB7 searches the whole catalogue in real time" })
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-hint", children: "kiku \xB7 searches the whole catalogue in real time" })
               ] })
             ] })
           ]
@@ -2376,74 +2358,19 @@ import { useState as useState6, useEffect as useEffect4, useRef as useRef6 } fro
 import { createPortal as createPortal2 } from "react-dom";
 import { useSearch as useSearch2, useKiku as useKiku3, useAkropolysContext as useAkropolysContext4 } from "@akropolys/sdk";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs7(
+var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsx8(
   "svg",
   {
-    className: cn("hsk-brand-a", className),
+    className: cn("hsk-brand-mark", className),
     width: size,
     height: size,
-    viewBox: "0 0 28 30",
-    fill: "none",
+    viewBox: "0 0 100 100",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": "Akropolys",
-    children: [
-      /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M14.5 4.5 L6.5 25",
-          stroke: "currentColor",
-          strokeWidth: "2.2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M14.5 4.5 L22.5 25",
-          stroke: "currentColor",
-          strokeWidth: "4.2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M9.5 17 H19.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M3 25 H10",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M19 25 H26",
-          stroke: "currentColor",
-          strokeWidth: "2.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "path",
-        {
-          d: "M8.5 2.5 C10 2.5, 11 3.5, 11 5 C11 7, 8.5 8.5, 7.5 9.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          fill: "none",
-          className: "hsk-akr-breath"
-        }
-      )
-    ]
+    "aria-label": "kiku",
+    children: /* @__PURE__ */ jsxs7("g", { transform: "translate(22.7 19) scale(0.62)", fill: "currentColor", fillRule: "evenodd", children: [
+      /* @__PURE__ */ jsx8("path", { d: "M39.4 10.4 Q44 0 48.6 10.4 L86.1 95.8 Q88 100 83.4 100 L4.6 100 Q0 100 1.9 95.8 Z M24 100 L24 65 Q24 60 27.4 56.3 Q44 38 60.6 56.3 Q64 60 64 65 L64 100 Z" }),
+      /* @__PURE__ */ jsx8("circle", { cx: "55", cy: "82", r: "3.4" })
+    ] })
   }
 );
 var CloseIcon2 = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -2605,7 +2532,7 @@ Question: ${q}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx8("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
+              /* @__PURE__ */ jsx8("div", { className: "hsk-sp-header-sub", children: "kiku" })
             ] }),
             /* @__PURE__ */ jsx8("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx8(CloseIcon2, {}) })
           ] }),