@akropolys/kiku 1.5.1 → 1.5.4

package/dist/index.mjs

@@ -437,18 +437,31 @@ var ArrowUpIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18"
   /* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
   /* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
 ] });
-function SourceCard({ source, defaultCurrency, onSelect }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "hsk-source-card", onClick: () => onSelect?.(source), children: [
-    source.image && /* @__PURE__ */ jsx5("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
-    /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx5("div", { className: "hsk-source-name", children: source.name }),
-      source.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-source-price", children: [
-        source.currency ?? defaultCurrency,
-        " ",
-        source.price
-      ] })
-    ] })
-  ] });
+function SourceCard({
+  source,
+  defaultCurrency,
+  onSelect,
+  isReferenced
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn("hsk-source-card", isReferenced && "hsk-source-card--referenced"),
+      onClick: () => onSelect?.(source),
+      children: [
+        source.image && /* @__PURE__ */ jsx5("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
+        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: [
+          isReferenced && /* @__PURE__ */ jsx5("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", style: { top: "0", right: "0" }, children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
+          /* @__PURE__ */ jsx5("div", { className: "hsk-source-name", style: { paddingRight: isReferenced ? "20px" : void 0 }, children: source.name }),
+          source.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-source-price", children: [
+            source.currency ?? defaultCurrency,
+            " ",
+            source.price
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function ChatWidget({
   title = "AI Shopping Assistant",
@@ -464,7 +477,7 @@ function ChatWidget({
   enableVision = false,
   visionCategoryHint
 }) {
-  const { messages, sources, loading: chatLoading, error, send, reset } = useKiku();
+  const { messages, sources, referencedIds, loading: chatLoading, streaming, error, send, reset } = useKiku();
   const [input, setInput] = useState4("");
   const [visualLoading, setVisualLoading] = useState4(false);
   const bottomRef = useRef4(null);
@@ -622,7 +635,54 @@ I couldn't find any matching products in the store.`;
               ] })
             ] }),
             msg.role === "assistant" && msg.visualSources && msg.visualSources.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: msg.visualSources.map((src, si) => /* @__PURE__ */ jsx5(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) }),
-            msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx5(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
+            msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && (() => {
+              const isStreamingActive = chatLoading || streaming;
+              if (isStreamingActive) {
+                return /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: sources.map((src, si) => {
+                  const isReferenced = !!(src.id && referencedIds.includes(src.id));
+                  return /* @__PURE__ */ jsx5(
+                    SourceCard,
+                    {
+                      source: src,
+                      defaultCurrency,
+                      onSelect: onSelectSource,
+                      isReferenced
+                    },
+                    si
+                  );
+                }) }) });
+              }
+              const featured = sources.filter((src) => src.id && referencedIds.includes(src.id));
+              const general = sources.filter((src) => !src.id || !referencedIds.includes(src.id));
+              return /* @__PURE__ */ jsxs4("div", { className: "hsk-sources-container", children: [
+                featured.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "hsk-sources-group", style: { marginBottom: "10px" }, children: [
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-sources-group-title", children: "\u2B50 Featured in response" }),
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: featured.map((src, si) => /* @__PURE__ */ jsx5(
+                    SourceCard,
+                    {
+                      source: src,
+                      defaultCurrency,
+                      onSelect: onSelectSource,
+                      isReferenced: true
+                    },
+                    `feat-${si}`
+                  )) })
+                ] }),
+                general.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "hsk-sources-group", children: [
+                  featured.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-group-title", children: "All matches" }),
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: general.map((src, si) => /* @__PURE__ */ jsx5(
+                    SourceCard,
+                    {
+                      source: src,
+                      defaultCurrency,
+                      onSelect: onSelectSource,
+                      isReferenced: false
+                    },
+                    `gen-${si}`
+                  )) })
+                ] })
+              ] });
+            })()
           ] }, idx)),
           loading && /* @__PURE__ */ jsxs4("div", { className: "hsk-msg-row", children: [
             /* @__PURE__ */ jsx5("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
@@ -1152,8 +1212,10 @@ function ActionPills({ cart, actionType, onSend, loading }) {
   const pills = [];
   if (hasItems && lastItem) {
     if (actionType === "add_to_cart") {
-      pills.push({ emoji: "\u2795", label: "Add 1 more", query: `Add one more ${lastItem.name} to my cart` });
-      pills.push({ emoji: "\u{1F5D1}\uFE0F", label: `Remove ${lastItem.name.split(" ")[0]}`, query: `Remove the ${lastItem.name} from my cart` });
+      const name = lastItem.name || "item";
+      const shortName = name.split(" ")[0] || "item";
+      pills.push({ emoji: "\u2795", label: "Add 1 more", query: `Add one more ${name} to my cart` });
+      pills.push({ emoji: "\u{1F5D1}\uFE0F", label: `Remove ${shortName}`, query: `Remove the ${name} from my cart` });
     }
     if (cart.items.length > 1) {
       pills.push({ emoji: "\u{1F6D2}", label: "View cart", query: "Show me my cart" });
@@ -1184,7 +1246,7 @@ function ActionPills({ cart, actionType, onSend, loading }) {
     pill.query
   )) });
 }
-function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
+function SourcesCarousel({ sources, defaultCurrency, onSelectSource, referencedIds = [] }) {
   const client = useAkropolysContext3();
   const isProperty = client?.vertical === "property";
   const railRef = useRef5(null);
@@ -1211,44 +1273,51 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
     railRef.current?.scrollBy({ left: 170, behavior: "smooth" });
   };
   return /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-sources-wrap", children: [
-    /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        className: "hsk-cb-source",
-        style: { animationDelay: `${si * 50}ms` },
-        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" }),
-            isProperty && /* @__PURE__ */ jsx7("div", { style: {
-              position: "absolute",
-              top: "6px",
-              right: "6px",
-              background: "rgba(14, 14, 15, 0.75)",
-              backdropFilter: "blur(4px)",
-              borderRadius: "50%",
-              width: "24px",
-              height: "24px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "#fbbf24",
-              // Gold sparkle badge
-              boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
-            }, children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 12 }) })
-          ] }) : /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
-          /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-info", children: [
-            /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-name", children: src.name }),
-            src.price && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-price", children: [
-              src.currency ?? defaultCurrency,
-              " ",
-              parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
+    /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => {
+      const isReferenced = !!(src.id && referencedIds.includes(src.id));
+      return /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: cn("hsk-cb-source", isReferenced && "hsk-cb-source--referenced"),
+          style: { animationDelay: `${si * 50}ms` },
+          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" }),
+              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",
+                top: "6px",
+                right: "6px",
+                background: "rgba(14, 14, 15, 0.75)",
+                backdropFilter: "blur(4px)",
+                borderRadius: "50%",
+                width: "24px",
+                height: "24px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#fbbf24",
+                // Gold sparkle badge
+                boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+              }, children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 12 }) })
+            ] }) : /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-imgwrap-empty", style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx7(SparkleIcon2, {}),
+              isReferenced && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-source-ref-badge", title: "Featured in response", children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 10 }) })
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-info", children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-name", children: src.name }),
+              src.price && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-price", children: [
+                src.currency ?? defaultCurrency,
+                " ",
+                parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
+              ] })
             ] })
-          ] })
-        ]
-      },
-      si
-    )) }),
+          ]
+        },
+        si
+      );
+    }) }),
     showNext && /* @__PURE__ */ jsxs6(Fragment3, { children: [
       /* @__PURE__ */ jsx7(
         "div",
@@ -1296,11 +1365,12 @@ function SmartContextPills({
       });
     }
     if (cheapest && !isProperty) {
-      const short = cheapest.name.split(" ").slice(0, 3).join(" ");
+      const name = cheapest.name || "";
+      const short = name.split(" ").slice(0, 3).join(" ");
       pills.push({
         emoji: "\u{1F6D2}",
         label: `Add ${short}`,
-        query: `Add the ${cheapest.name} to my cart`
+        query: `Add the ${name} to my cart`
       });
     }
     if (isProperty) {
@@ -1310,11 +1380,12 @@ function SmartContextPills({
     }
   } else if (intent === "compare" && sources.length > 0) {
     if (cheapest && !isProperty) {
-      const short = cheapest.name.split(" ").slice(0, 3).join(" ");
+      const name = cheapest.name || "";
+      const short = name.split(" ").slice(0, 3).join(" ");
       pills.push({
         emoji: "\u{1F6D2}",
         label: `Add ${short}`,
-        query: `Add the ${cheapest.name} to my cart`
+        query: `Add the ${name} to my cart`
       });
     }
     if (firstName) {
@@ -1417,7 +1488,7 @@ function ChatModal({
   visionCategoryHint
 }) {
   const client = useAkropolysContext3();
-  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset } = useKiku2();
+  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset, referencedIds } = useKiku2();
   const [input, setInput] = useState5("");
   const [loadingMessageIndex, setLoadingMessageIndex] = useState5(0);
   const [attachments, setAttachments] = useState5([]);
@@ -1762,7 +1833,8 @@ function ChatModal({
                     {
                       sources,
                       defaultCurrency,
-                      onSelectSource: handleSourceClick
+                      onSelectSource: handleSourceClick,
+                      referencedIds
                     }
                   ),
                   msg.cartSnapshot && msg.cartSnapshot.items?.length > 0 && /* @__PURE__ */ jsx7(
@@ -2355,7 +2427,7 @@ Question: ${q}`;
                       (() => {
                         const similarProducts = results.filter(
                           (r) => {
-                            const isSameName = r.product.name.toLowerCase() === displayProduct?.name?.toLowerCase();
+                            const isSameName = !!(r.product.name && displayProduct?.name && r.product.name.toLowerCase() === displayProduct.name.toLowerCase());
                             const isSameSlug = r.product.slug && displayProduct?.slug && r.product.slug.toLowerCase() === displayProduct.slug.toLowerCase();
                             return !isSameName && !isSameSlug;
                           }
@@ -2525,7 +2597,7 @@ Question: ${q}`;
               /* @__PURE__ */ jsx8("div", { className: "hsk-sp-results", children: (() => {
                 const similarProducts = results.filter(
                   (r) => {
-                    const isSameName = r.product.name.toLowerCase() === displayProduct?.name?.toLowerCase();
+                    const isSameName = !!(r.product.name && displayProduct?.name && r.product.name.toLowerCase() === displayProduct.name.toLowerCase());
                     const isSameSlug = r.product.slug && displayProduct?.slug && r.product.slug.toLowerCase() === displayProduct.slug.toLowerCase();
                     return !isSameName && !isSameSlug;
                   }