@retrivora-ai/rag-engine 1.7.9 → 1.8.1

package/dist/index.mjs

@@ -31,41 +31,40 @@ import {
 import React6 from "react";
 import { Bot, User, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 
 // src/components/SourceCard.tsx
-import React2 from "react";
+import React from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 function SourceCard({ source, index }) {
   var _a, _b;
-  const [expanded, setExpanded] = React2.useState(false);
+  const [expanded, setExpanded] = React.useState(false);
   const scorePercent = Math.round(source.score * 100);
   const scoreColor = source.score >= 0.8 ? "text-emerald-400" : source.score >= 0.6 ? "text-amber-400" : "text-rose-400";
   const scoreBg = source.score >= 0.8 ? "bg-emerald-50 border-emerald-100 dark:bg-emerald-400/10 dark:border-emerald-400/20" : source.score >= 0.6 ? "bg-amber-50 border-amber-100 dark:bg-amber-400/10 dark:border-amber-400/20" : "bg-rose-50 border-rose-100 dark:bg-rose-400/10 dark:border-rose-400/20";
   const preview = source.content.slice(0, 120);
   const hasMore = source.content.length > 120;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `rounded-xl border backdrop-blur-sm p-3 transition-all duration-200 hover:scale-[1.01] cursor-pointer ${scoreBg}`,
       onClick: () => setExpanded((e) => !e)
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React2.createElement("span", { className: "flex-shrink-0 w-5 h-5 rounded-full bg-slate-200 dark:bg-white/10 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-white/60" }, index + 1), /* @__PURE__ */ React2.createElement("span", { className: "text-xs text-slate-500 dark:text-white/50 truncate font-mono" }, (_b = (_a = source.metadata) == null ? void 0 : _a.docId) != null ? _b : source.id)), /* @__PURE__ */ React2.createElement("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums` }, scorePercent, "%")),
-    /* @__PURE__ */ React2.createElement("p", { className: "mt-2 text-xs text-slate-600 dark:text-white/70 leading-relaxed" }, expanded ? source.content : `${preview}${hasMore && !expanded ? "\u2026" : ""}`),
-    hasMore && /* @__PURE__ */ React2.createElement("button", { className: "mt-1 text-[10px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-0.5" }, expanded ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ChevronUp, { className: "w-3 h-3" }), " Show less") : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ChevronDown, { className: "w-3 h-3" }), " Show more"))
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "flex-shrink-0 w-5 h-5 rounded-full bg-slate-200 dark:bg-white/10 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-white/60" }, index + 1), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-slate-500 dark:text-white/50 truncate font-mono" }, (_b = (_a = source.metadata) == null ? void 0 : _a.docId) != null ? _b : source.id)), /* @__PURE__ */ React.createElement("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums` }, scorePercent, "%")),
+    /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-xs text-slate-600 dark:text-white/70 leading-relaxed" }, expanded ? source.content : `${preview}${hasMore && !expanded ? "\u2026" : ""}`),
+    hasMore && /* @__PURE__ */ React.createElement("button", { className: "mt-1 text-[10px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-0.5" }, expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ChevronUp, { className: "w-3 h-3" }), " Show less") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ChevronDown, { className: "w-3 h-3" }), " Show more"))
   );
 }
 
 // src/components/ProductCarousel.tsx
-import React4, { useRef, useState, useEffect } from "react";
+import React3, { useRef, useState, useEffect } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
 // src/components/ProductCard.tsx
-import React3 from "react";
+import React2 from "react";
 import Image from "next/image";
 import { ShoppingCart, ExternalLink } from "lucide-react";
 function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
-  return /* @__PURE__ */ React3.createElement("div", { className: "flex-shrink-0 w-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 group" }, /* @__PURE__ */ React3.createElement("div", { className: "relative h-40 w-full bg-slate-100 dark:bg-white/5 flex items-center justify-center overflow-hidden" }, product.image ? /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { className: "flex-shrink-0 w-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 group" }, /* @__PURE__ */ React2.createElement("div", { className: "relative h-40 w-full bg-slate-100 dark:bg-white/5 flex items-center justify-center overflow-hidden" }, product.image ? /* @__PURE__ */ React2.createElement(
     Image,
     {
       src: product.image,
@@ -74,16 +73,16 @@ function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
       unoptimized: true,
       className: "object-cover group-hover:scale-105 transition-transform duration-500"
     }
-  ) : /* @__PURE__ */ React3.createElement("div", { className: "text-slate-400 dark:text-white/20" }, /* @__PURE__ */ React3.createElement(ShoppingCart, { className: "w-12 h-12" })), product.brand && /* @__PURE__ */ React3.createElement("div", { className: "absolute top-2 left-2 px-2 py-1 bg-white/90 dark:bg-black/60 backdrop-blur-md rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-700 dark:text-white/90 shadow-sm" }, product.brand)), /* @__PURE__ */ React3.createElement("div", { className: "p-4 flex flex-col gap-2" }, /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-start gap-2" }, /* @__PURE__ */ React3.createElement("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1" }, product.name), product.price && /* @__PURE__ */ React3.createElement("span", { className: "text-sm font-bold", style: { color: primaryColor } }, typeof product.price === "number" ? `$${product.price}` : product.price)), product.description && /* @__PURE__ */ React3.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed" }, product.description), /* @__PURE__ */ React3.createElement("div", { className: "mt-2 flex gap-2" }, /* @__PURE__ */ React3.createElement(
+  ) : /* @__PURE__ */ React2.createElement("div", { className: "text-slate-400 dark:text-white/20" }, /* @__PURE__ */ React2.createElement(ShoppingCart, { className: "w-12 h-12" })), product.brand && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-2 left-2 px-2 py-1 bg-white/90 dark:bg-black/60 backdrop-blur-md rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-700 dark:text-white/90 shadow-sm" }, product.brand)), /* @__PURE__ */ React2.createElement("div", { className: "p-4 flex flex-col gap-2" }, /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between items-start gap-2" }, /* @__PURE__ */ React2.createElement("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1" }, product.name), product.price && /* @__PURE__ */ React2.createElement("span", { className: "text-sm font-bold", style: { color: primaryColor } }, typeof product.price === "number" ? `$${product.price}` : product.price)), product.description && /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed" }, product.description), /* @__PURE__ */ React2.createElement("div", { className: "mt-2 flex gap-2" }, /* @__PURE__ */ React2.createElement(
     "button",
     {
       onClick: () => onAddToCart == null ? void 0 : onAddToCart(product),
       className: "flex-1 py-2 px-3 rounded-lg text-[11px] font-medium text-white shadow-sm hover:opacity-90 transition-opacity flex items-center justify-center gap-1.5",
       style: { background: primaryColor }
     },
-    /* @__PURE__ */ React3.createElement(ShoppingCart, { className: "w-3 h-3" }),
+    /* @__PURE__ */ React2.createElement(ShoppingCart, { className: "w-3 h-3" }),
     "Add to Cart"
-  ), product.link && /* @__PURE__ */ React3.createElement(
+  ), product.link && /* @__PURE__ */ React2.createElement(
     "a",
     {
       href: product.link,
@@ -91,7 +90,7 @@ function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
       rel: "noopener noreferrer",
       className: "p-2 rounded-lg bg-slate-100 dark:bg-white/10 text-slate-600 dark:text-white/70 hover:bg-slate-200 dark:hover:bg-white/20 transition-colors"
     },
-    /* @__PURE__ */ React3.createElement(ExternalLink, { className: "w-3.5 h-3.5" })
+    /* @__PURE__ */ React2.createElement(ExternalLink, { className: "w-3.5 h-3.5" })
   ))));
 }
 
@@ -123,9 +122,9 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
   };
   if (!products || products.length === 0) return null;
   if (products.length === 1) {
-    return /* @__PURE__ */ React4.createElement("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up" }, /* @__PURE__ */ React4.createElement(ProductCard, { product: products[0], primaryColor, onAddToCart }));
+    return /* @__PURE__ */ React3.createElement("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up" }, /* @__PURE__ */ React3.createElement(ProductCard, { product: products[0], primaryColor, onAddToCart }));
   }
-  return /* @__PURE__ */ React4.createElement("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up" }, canScroll && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", { className: "absolute -left-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity" }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up" }, canScroll && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "absolute -left-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity" }, /* @__PURE__ */ React3.createElement(
     "button",
     {
       onClick: (e) => {
@@ -135,8 +134,8 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
       className: "p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95",
       "aria-label": "Scroll left"
     },
-    /* @__PURE__ */ React4.createElement(ChevronLeft, { className: "w-5 h-5" })
-  )), /* @__PURE__ */ React4.createElement("div", { className: "absolute -right-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity" }, /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React3.createElement(ChevronLeft, { className: "w-5 h-5" })
+  )), /* @__PURE__ */ React3.createElement("div", { className: "absolute -right-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity" }, /* @__PURE__ */ React3.createElement(
     "button",
     {
       onClick: (e) => {
@@ -146,27 +145,27 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
       className: "p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95",
       "aria-label": "Scroll right"
     },
-    /* @__PURE__ */ React4.createElement(ChevronRight, { className: "w-5 h-5" })
-  ))), /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React3.createElement(ChevronRight, { className: "w-5 h-5" })
+  ))), /* @__PURE__ */ React3.createElement(
     "div",
     {
       ref: scrollRef,
       className: "flex gap-4 overflow-x-auto pb-4 px-1 scrollbar-hide snap-x snap-mandatory",
       style: { scrollbarWidth: "none", msOverflowStyle: "none" }
     },
-    products.map((product) => /* @__PURE__ */ React4.createElement(
+    products.map((product) => /* @__PURE__ */ React3.createElement(
       "div",
       {
         key: product.id,
         className: "snap-start flex-shrink-0 w-[min(88%,18rem)] min-w-[11rem] max-w-full"
       },
-      /* @__PURE__ */ React4.createElement(ProductCard, { product, primaryColor, onAddToCart })
+      /* @__PURE__ */ React3.createElement(ProductCard, { product, primaryColor, onAddToCart })
     ))
   ));
 }
 
 // src/components/DynamicChart.tsx
-import React5 from "react";
+import React4 from "react";
 import {
   BarChart,
   Bar,
@@ -191,9 +190,9 @@ function DynamicChart({
 }) {
   const { type, data } = config;
   const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
-  const containerRef = React5.useRef(null);
-  const [containerWidth, setContainerWidth] = React5.useState(0);
-  React5.useEffect(() => {
+  const containerRef = React4.useRef(null);
+  const [containerWidth, setContainerWidth] = React4.useState(0);
+  React4.useEffect(() => {
     const element = containerRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const updateWidth = (width) => {
@@ -219,7 +218,7 @@ function DynamicChart({
     return text.length > maxLength ? `${text.slice(0, maxLength)}\u2026` : text;
   };
   const chartMargin = isTiny ? { top: 8, right: 4, left: -28, bottom: 0 } : isCompact ? { top: 10, right: 6, left: -24, bottom: 0 } : { top: 10, right: 10, left: -20, bottom: 0 };
-  const sanitizedData = React5.useMemo(() => {
+  const sanitizedData = React4.useMemo(() => {
     if (!data) return [];
     return data.map((item) => {
       const newItem = {};
@@ -252,7 +251,7 @@ function DynamicChart({
     });
   }, [data]);
   if (!data || data.length === 0) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
+    return /* @__PURE__ */ React4.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
   }
   const firstItem = sanitizedData[0];
   const allKeys = Object.keys(firstItem);
@@ -267,46 +266,23 @@ function DynamicChart({
   const finalXKey = String(resolvedXKey);
   const finalDataKeys = resolvedDataKeys.map(String).filter((k) => k !== "undefined");
   const pieDataKey = finalDataKeys[0] || "value";
-  const stockAwareColor = (entry, index) => {
-    var _a, _b, _c;
-    const stockStatus = String(
-      (_c = (_b = (_a = entry.stockStatus) != null ? _a : entry.status) != null ? _b : entry.availability) != null ? _c : ""
-    ).toLowerCase();
-    const inStockCount = typeof entry.inStockCount === "number" ? entry.inStockCount : void 0;
-    const outOfStockCount = typeof entry.outOfStockCount === "number" ? entry.outOfStockCount : void 0;
-    const inStockFlag = entry.inStock;
-    if (stockStatus.includes("in stock")) return "#10b981";
-    if (stockStatus.includes("out of stock")) return "#f97316";
-    if (typeof inStockFlag === "string" && inStockFlag.toLowerCase() === "true") return "#10b981";
-    if (inStockFlag === 1) return "#10b981";
-    if (inStockFlag === 0) return "#f97316";
-    if (typeof inStockCount === "number" || typeof outOfStockCount === "number") {
-      const inCount = inStockCount != null ? inStockCount : 0;
-      const outCount = outOfStockCount != null ? outOfStockCount : 0;
-      if (inCount > outCount) return "#10b981";
-      if (outCount > inCount) return "#f97316";
-    }
-    return colors[index % colors.length];
-  };
   const tooltipLabelMap = {
-    value: "Value",
+    value: "Total Items",
     count: "Count",
-    inStock: "In stock",
-    inStockCount: "In stock",
-    outOfStockCount: "Out of stock",
-    stockStatus: "Stock status",
-    category: "Category",
-    label: "Label",
-    name: "Name"
+    inStockCount: "In Stock",
+    outOfStockCount: "Out of Stock",
+    stockStatus: "Status"
   };
   const renderTooltip = (row, label) => {
     var _a, _b;
     if (!row) return null;
-    return /* @__PURE__ */ React5.createElement("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950" }, /* @__PURE__ */ React5.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, String((_b = (_a = row[finalXKey]) != null ? _a : label) != null ? _b : "Details")), Object.entries(row).map(([key, value]) => {
+    return /* @__PURE__ */ React4.createElement("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950" }, /* @__PURE__ */ React4.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, String((_b = (_a = row[finalXKey]) != null ? _a : label) != null ? _b : "Details")), Object.entries(row).map(([key, value]) => {
       var _a2;
       if (value === null || value === void 0 || key === finalXKey) return null;
       if (typeof value === "object") return null;
-      return /* @__PURE__ */ React5.createElement("div", { key, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React5.createElement("span", null, (_a2 = tooltipLabelMap[key]) != null ? _a2 : key), /* @__PURE__ */ React5.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, String(value)));
+      const forbiddenKeys = ["fill", "color", "payload", "percent", "stroke", "inStock"];
+      if (forbiddenKeys.includes(key)) return null;
+      return /* @__PURE__ */ React4.createElement("div", { key, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React4.createElement("span", null, (_a2 = tooltipLabelMap[key]) != null ? _a2 : key), /* @__PURE__ */ React4.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, String(value)));
     }));
   };
   const getTooltipRow = (payload) => {
@@ -318,7 +294,7 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ React5.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React5.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React5.createElement(PieChart, null, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
       Pie,
       {
         data: sanitizedData,
@@ -330,10 +306,10 @@ function DynamicChart({
         label: false,
         labelLine: false
       },
-      sanitizedData.map((entry, index) => /* @__PURE__ */ React5.createElement(Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
-    ), /* @__PURE__ */ React5.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ React5.createElement(Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
+      sanitizedData.map((_entry, index) => /* @__PURE__ */ React4.createElement(Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
+    ), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
   }
-  return /* @__PURE__ */ React5.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React5.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React5.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React5.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React5.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React5.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React5.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Bar,
     {
       key,
@@ -342,7 +318,7 @@ function DynamicChart({
       radius: [4, 4, 0, 0],
       barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
     }
-  ))) : /* @__PURE__ */ React5.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React5.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React5.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React5.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React5.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React5.createElement(
+  ))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Line,
     {
       key,
@@ -357,175 +333,251 @@ function DynamicChart({
 }
 
 // src/components/VisualizationRenderer.tsx
-import Image2 from "next/image";
+import React5 from "react";
+import {
+  PieChart as PieChart2,
+  Pie as Pie2,
+  Cell as Cell2,
+  BarChart as BarChart2,
+  Bar as Bar2,
+  LineChart as LineChart2,
+  Line as Line2,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  CartesianGrid as CartesianGrid2,
+  Tooltip as Tooltip2,
+  Legend as Legend2,
+  ResponsiveContainer as ResponsiveContainer2,
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis
+} from "recharts";
+var CHART_COLORS = [
+  "#6366f1",
+  // indigo
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#ef4444",
+  // red
+  "#8b5cf6",
+  // purple
+  "#ec4899",
+  // pink
+  "#06b6d4",
+  // cyan
+  "#f97316"
+  // orange
+];
+function getColor(index) {
+  return CHART_COLORS[index % CHART_COLORS.length];
+}
+function CustomTooltip({
+  active,
+  payload,
+  label
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ React5.createElement("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950" }, label && /* @__PURE__ */ React5.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, label), payload.map((entry, i) => /* @__PURE__ */ React5.createElement("div", { key: i, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React5.createElement("span", { className: "flex items-center gap-1.5" }, entry.color && /* @__PURE__ */ React5.createElement(
+    "span",
+    {
+      className: "inline-block w-2 h-2 rounded-full flex-shrink-0",
+      style: { background: entry.color }
+    }
+  ), entry.name), /* @__PURE__ */ React5.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, entry.value))));
+}
 function VisualizationRenderer({
   data,
-  className = ""
+  className = "",
+  primaryColor,
+  onAddToCart
 }) {
+  var _a;
   if (!data) {
-    return /* @__PURE__ */ React.createElement("div", { className: `p-4 text-gray-500 ${className}` }, "No data available for visualization");
+    return /* @__PURE__ */ React5.createElement("div", { className: `p-4 text-gray-500 ${className}` }, "No data available for visualization");
   }
-  return /* @__PURE__ */ React.createElement("div", { className: `space-y-4 ${className}` }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, data.title), data.description && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400" }, data.description)), renderVisualization(data.type, data.data));
+  return /* @__PURE__ */ React5.createElement("div", { className: `space-y-4 ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React5.createElement("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white" }, data.title), data.description && data.description !== ((_a = data.data) == null ? void 0 : _a.content) && /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 dark:text-slate-400" }, data.description)), renderVisualization(data.type, data.data, onAddToCart, primaryColor));
 }
-function renderVisualization(type, data) {
-  switch (type) {
-    case "pie_chart":
-      return renderPieChart(data);
-    case "bar_chart":
-      return renderBarChart(data);
-    case "line_chart":
-      return renderLineChart(data);
-    case "table":
-      return renderTable(data);
-    case "product_carousel":
-      return renderProductCarousel(data);
-    case "text":
-    default:
-      return renderText(data);
+function renderVisualization(type, data, onAddToCart, primaryColor) {
+  try {
+    switch (type) {
+      case "pie_chart":
+        return /* @__PURE__ */ React5.createElement(PieChartView, { data });
+      case "bar_chart":
+        return /* @__PURE__ */ React5.createElement(BarChartView, { data, primaryColor });
+      case "line_chart":
+        return /* @__PURE__ */ React5.createElement(LineChartView, { data, primaryColor });
+      case "radar_chart":
+        return /* @__PURE__ */ React5.createElement(RadarChartView, { data });
+      case "table":
+        return /* @__PURE__ */ React5.createElement(TableView, { data });
+      case "product_carousel":
+      case "carousel":
+        return /* @__PURE__ */ React5.createElement(CarouselView, { data, onAddToCart, primaryColor });
+      case "text":
+      default:
+        return /* @__PURE__ */ React5.createElement(TextView, { data });
+    }
+  } catch (error) {
+    console.warn("[VisualizationRenderer] Rendering failed, falling back to text:", error);
+    return /* @__PURE__ */ React5.createElement(TextView, { data: { content: "Unable to render the requested visualization." } });
   }
 }
-function renderPieChart(data) {
-  if (!Array.isArray(data)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "text-red-500" }, "Invalid pie chart data");
+function PieChartView({ data }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid pie chart data");
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg shadow" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2" }, data.map((item, idx) => /* @__PURE__ */ React.createElement(
-    "div",
+  const chartData = data.map((item) => ({
+    name: item.label,
+    value: item.value
+  }));
+  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 280 }, /* @__PURE__ */ React5.createElement(PieChart2, null, /* @__PURE__ */ React5.createElement(
+    Pie2,
     {
-      key: idx,
-      className: "flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-700 rounded"
+      data: chartData,
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      outerRadius: "68%",
+      label: false,
+      labelLine: false
     },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "w-3 h-3 rounded-full",
-        style: { backgroundColor: generateColor(idx) }
-      }
-    ),
-    /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300" }, item.label, ": ", item.value),
-    item.inStock !== void 0 && /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: `text-xs px-2 py-1 rounded ${item.inStock ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`
-      },
-      item.inStock ? "In Stock" : "Out of Stock"
-    )
-  ))));
+    chartData.map((_entry, index) => /* @__PURE__ */ React5.createElement(Cell2, { key: `cell-${index}`, fill: getColor(index) }))
+  ), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null) }), /* @__PURE__ */ React5.createElement(Legend2, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" }))));
 }
-function renderBarChart(data) {
-  if (!Array.isArray(data)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "text-red-500" }, "Invalid bar chart data");
+function BarChartView({ data, primaryColor }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid bar chart data");
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg shadow overflow-x-auto" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, data.map((item, idx) => /* @__PURE__ */ React.createElement("div", { key: idx, className: "space-y-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300" }, item.category), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400" }, item.value)), /* @__PURE__ */ React.createElement("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2" }, /* @__PURE__ */ React.createElement(
-    "div",
+  const chartData = data.map((item) => __spreadValues(__spreadValues({
+    category: item.category,
+    value: item.value
+  }, item.inStockCount !== void 0 && { inStockCount: item.inStockCount }), item.outOfStockCount !== void 0 && { outOfStockCount: item.outOfStockCount }));
+  const barColor = primaryColor != null ? primaryColor : getColor(0);
+  const hasStock = chartData.some((d) => "inStockCount" in d);
+  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 260 }, /* @__PURE__ */ React5.createElement(BarChart2, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React5.createElement(CartesianGrid2, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(
+    XAxis2,
     {
-      className: "h-full rounded-full transition-all",
-      style: {
-        width: `${item.value / Math.max(...data.map((d) => d.value)) * 100}%`,
-        backgroundColor: generateColor(idx)
-      }
+      dataKey: "category",
+      tick: { fontSize: 11, fill: "#64748b" },
+      tickLine: false,
+      axisLine: { stroke: "#cbd5e1" }
     }
-  )), item.inStock !== void 0 && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: `text-xs px-2 py-1 rounded inline-block ${item.inStock ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`
-    },
-    item.inStock ? "In Stock" : "Out of Stock"
-  )))));
+  ), /* @__PURE__ */ React5.createElement(YAxis2, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null), cursor: { fill: "#f1f5f9" } }), /* @__PURE__ */ React5.createElement(Legend2, { wrapperStyle: { fontSize: 12 } }), hasStock ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Bar2, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }), /* @__PURE__ */ React5.createElement(Bar2, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })) : /* @__PURE__ */ React5.createElement(Bar2, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] }))));
 }
-function renderLineChart(data) {
-  if (!Array.isArray(data)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "text-red-500" }, "Invalid line chart data");
+function LineChartView({ data, primaryColor }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid line chart data");
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg shadow overflow-x-auto" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, data.map((point, idx) => /* @__PURE__ */ React.createElement(
-    "div",
+  const chartData = data.map((point) => {
+    var _a;
+    return {
+      label: String((_a = point.label) != null ? _a : point.timestamp),
+      value: Number(point.value)
+    };
+  });
+  const lineColor = primaryColor != null ? primaryColor : getColor(0);
+  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 260 }, /* @__PURE__ */ React5.createElement(LineChart2, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React5.createElement(CartesianGrid2, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(
+    XAxis2,
     {
-      key: idx,
-      className: "flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-700 rounded"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400" }, point.label || point.timestamp),
-    /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold text-gray-900 dark:text-white" }, typeof point.value === "number" ? point.value.toFixed(2) : point.value)
+      dataKey: "label",
+      tick: { fontSize: 11, fill: "#64748b" },
+      tickLine: false,
+      axisLine: { stroke: "#cbd5e1" }
+    }
+  ), /* @__PURE__ */ React5.createElement(YAxis2, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null) }), /* @__PURE__ */ React5.createElement(
+    Line2,
+    {
+      type: "monotone",
+      dataKey: "value",
+      name: "Value",
+      stroke: lineColor,
+      strokeWidth: 2.5,
+      dot: { r: 3.5, strokeWidth: 2, fill: lineColor },
+      activeDot: { r: 5 }
+    }
   ))));
 }
-function renderTable(data) {
-  if (!data.columns || !data.rows) {
-    return /* @__PURE__ */ React.createElement("div", { className: "text-red-500" }, "Invalid table data");
+function RadarChartView({ data }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid radar chart data");
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow overflow-x-auto" }, /* @__PURE__ */ React.createElement("table", { className: "w-full text-sm" }, /* @__PURE__ */ React.createElement("thead", { className: "bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600" }, /* @__PURE__ */ React.createElement("tr", null, data.columns.map((col, idx) => /* @__PURE__ */ React.createElement(
+  const productNames = Array.from(
+    new Set(data.flatMap((item) => Object.keys(item).filter((key) => key !== "attribute")))
+  );
+  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 300 }, /* @__PURE__ */ React5.createElement(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data }, /* @__PURE__ */ React5.createElement(PolarGrid, { stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(PolarAngleAxis, { dataKey: "attribute", tick: { fontSize: 11, fill: "#64748b" } }), /* @__PURE__ */ React5.createElement(PolarRadiusAxis, { tick: { fontSize: 10, fill: "#64748b" } }), productNames.map((productName, index) => /* @__PURE__ */ React5.createElement(
+    Radar,
+    {
+      key: productName,
+      name: productName,
+      dataKey: productName,
+      stroke: getColor(index),
+      fill: getColor(index),
+      fillOpacity: 0.4
+    }
+  )), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null) }), /* @__PURE__ */ React5.createElement(Legend2, { wrapperStyle: { fontSize: 12 } }))));
+}
+function TableView({ data }) {
+  if (!(data == null ? void 0 : data.columns) || !(data == null ? void 0 : data.rows)) {
+    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid table data");
+  }
+  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: "w-full text-sm border-collapse" }, /* @__PURE__ */ React5.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React5.createElement("tr", null, data.columns.map((col, idx) => /* @__PURE__ */ React5.createElement(
     "th",
     {
       key: idx,
-      className: "px-4 py-2 text-left font-semibold text-gray-900 dark:text-white"
+      className: "px-4 py-3 text-left text-xs font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap uppercase tracking-wider"
     },
     col
-  )))), /* @__PURE__ */ React.createElement("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600" }, data.rows.map((row, rowIdx) => /* @__PURE__ */ React.createElement(
+  )))), /* @__PURE__ */ React5.createElement("tbody", { className: "divide-y divide-slate-100 dark:divide-white/5" }, data.rows.map((row, rowIdx) => /* @__PURE__ */ React5.createElement(
     "tr",
     {
       key: rowIdx,
-      className: "hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+      className: "hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
     },
-    row.map((cell, cellIdx) => /* @__PURE__ */ React.createElement(
+    row.map((cell, cellIdx) => /* @__PURE__ */ React5.createElement(
       "td",
       {
         key: cellIdx,
-        className: "px-4 py-2 text-gray-700 dark:text-gray-300"
+        className: "px-4 py-3 text-slate-600 dark:text-white/70 text-sm"
       },
       String(cell)
     ))
-  )))));
+  ))))), /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, data.rows.length, " row", data.rows.length !== 1 ? "s" : "")));
 }
-function renderProductCarousel(data) {
+function CarouselView({
+  data,
+  onAddToCart,
+  primaryColor
+}) {
   if (!Array.isArray(data)) {
-    return /* @__PURE__ */ React.createElement("div", { className: "text-red-500" }, "Invalid carousel data");
+    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid carousel data");
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 pb-4" }, data.map((product) => /* @__PURE__ */ React.createElement(
-    "div",
+  const products = data.map((product) => ({
+    id: product.id,
+    name: product.name,
+    brand: product.brand,
+    price: product.price,
+    image: product.image,
+    link: typeof product.link === "string" ? product.link : void 0,
+    description: product.description,
+    inStock: product.inStock
+  }));
+  return /* @__PURE__ */ React5.createElement("div", { className: "w-full" }, /* @__PURE__ */ React5.createElement(
+    ProductCarousel,
     {
-      key: product.id,
-      className: "flex-shrink-0 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
-    },
-    product.image && /* @__PURE__ */ React.createElement("div", { className: "relative w-full h-40 bg-gray-200" }, /* @__PURE__ */ React.createElement(
-      Image2,
-      {
-        src: product.image,
-        alt: product.name,
-        fill: true,
-        className: "object-cover",
-        sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-      }
-    )),
-    /* @__PURE__ */ React.createElement("div", { className: "p-4 space-y-2" }, /* @__PURE__ */ React.createElement("h4", { className: "font-semibold text-gray-900 dark:text-white line-clamp-2" }, product.name), product.brand && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Brand: ", product.brand), product.price && /* @__PURE__ */ React.createElement("p", { className: "text-lg font-bold text-gray-900 dark:text-white" }, "$", typeof product.price === "number" ? product.price.toFixed(2) : product.price), product.description && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400 line-clamp-2" }, product.description), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2 pt-2" }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: `text-xs px-2 py-1 rounded flex-1 text-center ${product.inStock ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`
-      },
-      product.inStock ? "In Stock" : "Out of Stock"
-    )))
-  ))));
-}
-function renderText(data) {
-  const content = (data == null ? void 0 : data.content) || String(data);
-  return /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg shadow prose dark:prose-invert max-w-none" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-wrap" }, content));
+      products,
+      primaryColor: primaryColor != null ? primaryColor : "#6366f1",
+      onAddToCart: (p) => onAddToCart == null ? void 0 : onAddToCart(p)
+    }
+  ));
 }
-function generateColor(index) {
-  const colors = [
-    "#3B82F6",
-    // blue
-    "#10B981",
-    // green
-    "#F59E0B",
-    // amber
-    "#EF4444",
-    // red
-    "#8B5CF6",
-    // purple
-    "#EC4899",
-    // pink
-    "#06B6D4",
-    // cyan
-    "#F97316"
-    // orange
-  ];
-  return colors[index % colors.length];
+function TextView({ data }) {
+  const content = (data == null ? void 0 : data.content) || String(data != null ? data : "");
+  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed" }, content));
 }
 
 // src/components/MessageBubble.tsx
@@ -609,41 +661,51 @@ function stripStructuredUiLabels(raw) {
   );
 }
 function extractBareJsonObject(raw) {
-  const start = raw.indexOf("{");
+  let start = raw.indexOf("{");
   if (start === -1) return null;
-  let depth = 0;
-  let inString = false;
-  let escape = false;
-  for (let i = start; i < raw.length; i += 1) {
-    const ch = raw[i];
-    if (escape) {
-      escape = false;
-      continue;
-    }
-    if (ch === "\\" && inString) {
-      escape = true;
-      continue;
-    }
-    if (ch === '"') {
-      inString = !inString;
-      continue;
-    }
-    if (inString) continue;
-    if (ch === "{") depth += 1;
-    if (ch === "}") {
-      depth -= 1;
-      if (depth === 0) {
-        return raw.slice(start, i + 1);
+  let bestJson = null;
+  let maxLen = 0;
+  while (start !== -1) {
+    let depth = 0;
+    let inString = false;
+    let escape = false;
+    for (let i = start; i < raw.length; i += 1) {
+      const ch = raw[i];
+      if (escape) {
+        escape = false;
+        continue;
+      }
+      if (ch === "\\" && inString) {
+        escape = true;
+        continue;
+      }
+      if (ch === '"') {
+        inString = !inString;
+        continue;
+      }
+      if (inString) continue;
+      if (ch === "{") depth += 1;
+      else if (ch === "}") {
+        depth -= 1;
+        if (depth === 0) {
+          const candidate = raw.slice(start, i + 1);
+          if (candidate.length > maxLen) {
+            maxLen = candidate.length;
+            bestJson = candidate;
+          }
+          break;
+        }
       }
     }
+    start = raw.indexOf("{", start + 1);
   }
-  return null;
+  return bestJson;
 }
 function extractStructuredPayload(raw) {
   var _a, _b;
   let working = raw;
   const fenceRegex = /```(?:[a-z]+)?\s*([\s\S]*?)```/gi;
-  for (const match of raw.matchAll(fenceRegex)) {
+  for (const match of Array.from(raw.matchAll(fenceRegex))) {
     const body = (_b = (_a = match[1]) == null ? void 0 : _a.trim()) != null ? _b : "";
     if (!looksLikeStructuredPayload(body)) continue;
     working = working.replace(match[0], "");
@@ -667,19 +729,28 @@ function extractStructuredPayload(raw) {
 }
 function isLikelyUiOnlyMessage(text) {
   const trimmed = text.trim();
-  return trimmed.length === 0 || /^(chart data|table data|visualization|visual representation|product catalog|product recommendations|catalog summary)\s*:?\s*$/i.test(trimmed);
+  return trimmed.length === 0 || trimmed.length < 30 || /^(chart data|table data|visualization|visual representation|product catalog|product recommendations|catalog summary|availability|inventory status|details)\s*:?\s*$/i.test(trimmed);
 }
 function resolveImage(data) {
   const isPlaceholder = (val) => typeof val === "string" && (val === "..." || val === "" || val.toLowerCase() === "null" || val.toLowerCase() === "undefined");
-  for (const key of ["image", "img", "thumbnail"]) {
+  for (const key of ["image", "img", "thumbnail", "images", "product_image", "Image", "Thumbnail"]) {
     const v = data[key];
     if (typeof v === "string" && v && !isPlaceholder(v)) return v;
-  }
-  if (Array.isArray(data.images) && typeof data.images[0] === "string" && !isPlaceholder(data.images[0])) {
-    return data.images[0];
+    if (Array.isArray(v) && typeof v[0] === "string" && v[0] && !isPlaceholder(v[0])) return v[0];
   }
   return void 0;
 }
+function getMetadataValue(meta, keys) {
+  const searchKeys = keys.map((k) => k.toLowerCase());
+  const metaKeys = Object.keys(meta);
+  const foundKey = metaKeys.find((k) => searchKeys.includes(k.toLowerCase()));
+  if (foundKey) return meta[foundKey];
+  const partialKey = metaKeys.find((k) => {
+    const kLow = k.toLowerCase();
+    return searchKeys.some((sk) => kLow.includes(sk) || sk.includes(kLow));
+  });
+  return partialKey ? meta[partialKey] : void 0;
+}
 function normaliseChild(children) {
   if (typeof children === "object" && children !== null && !Array.isArray(children) && !React6.isValidElement(children)) {
     return JSON.stringify(children);
@@ -757,6 +828,13 @@ function DataTable({ config, viewportSize = "large" }) {
 }
 function normalizeTabularRows(rows, columns) {
   if (!Array.isArray(rows)) return [];
+  const SYNONYMS = {
+    name: ["product", "item", "title", "label", "heading", "product name", "item name"],
+    price: ["cost", "amount", "msrp", "price", "rate", "value", "price_usd"],
+    brand: ["manufacturer", "vendor", "make", "company", "brand_name", "supplier"],
+    image: ["imageUrl", "thumbnail", "img", "url", "photo", "picture", "media"],
+    stock: ["inventory", "quantity", "count", "availability", "stock_level", "in stock", "status"]
+  };
   return rows.map((row) => {
     if (Array.isArray(row)) {
       const keys = Array.isArray(columns) && columns.length > 0 ? columns : row.map((_, index) => `column_${index + 1}`);
@@ -766,7 +844,36 @@ function normalizeTabularRows(rows, columns) {
       }, {});
     }
     if (row && typeof row === "object") {
-      return row;
+      const result = __spreadValues({}, row);
+      if (Array.isArray(columns)) {
+        columns.forEach((col) => {
+          if (result[col] !== void 0) return;
+          const rowKeys = Object.keys(row);
+          const colLower = col.toLowerCase().replace(/_/g, " ");
+          const foundKey = rowKeys.find((rk) => {
+            const rkLower = rk.toLowerCase().replace(/_/g, " ");
+            return rkLower === colLower || rkLower.includes(colLower) || colLower.includes(rkLower);
+          });
+          if (foundKey) {
+            result[col] = row[foundKey];
+            return;
+          }
+          for (const [target, aliases] of Object.entries(SYNONYMS)) {
+            const isMatch = target === colLower || aliases.some((a) => colLower.includes(a) || a.includes(colLower));
+            if (isMatch) {
+              const mappedKey = rowKeys.find((rk) => {
+                const rkL = rk.toLowerCase();
+                return rkL === target || aliases.some((a) => rkL.includes(a) || a.includes(rkL));
+              });
+              if (mappedKey) {
+                result[col] = row[mappedKey];
+                break;
+              }
+            }
+          }
+        });
+      }
+      return result;
     }
     return { value: row };
   }).filter((row) => Object.keys(row).length > 0);
@@ -809,12 +916,15 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         config2.view = "chart";
         config2.chartType = config2.chartType || "bar";
       }
-      if (!config2.view) {
-        if (config2.type === "products" || Array.isArray(config2.items) || hasProductLikeData) {
+      if (!config2.view || ["pie", "bar", "line", "pie_chart", "bar_chart", "line_chart"].includes(String(config2.view))) {
+        const viewStr = String(config2.view || "").toLowerCase();
+        if (viewStr.includes("carousel") || config2.type === "products" || Array.isArray(config2.items) || hasProductLikeData) {
           config2.view = "carousel";
-        } else if (hasAggregationLikeData || typeof config2.type === "string" && ["pie", "bar", "line"].includes(config2.type) || typeof config2.chartType === "string" && ["pie", "bar", "line"].includes(config2.chartType)) {
+        } else if (viewStr.includes("chart") || viewStr.includes("pie") || viewStr.includes("bar") || viewStr.includes("line") || hasAggregationLikeData || typeof config2.type === "string" && ["pie", "bar", "line"].includes(config2.type) || typeof config2.chartType === "string" && ["pie", "bar", "line"].includes(config2.chartType)) {
           config2.view = "chart";
-          config2.chartType = config2.chartType || config2.type || "bar";
+          config2.chartType = config2.chartType || viewStr.replace("_chart", "") || config2.type || "bar";
+        } else if (viewStr.includes("table")) {
+          config2.view = "table";
         } else {
           config2.view = "table";
         }
@@ -853,13 +963,13 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
           accentColor,
           viewportSize
         }
-      ), hasInsights && /* @__PURE__ */ React6.createElement("div", { className: "mt-4 flex flex-wrap gap-2 px-2" }, (_a = config.insights) == null ? void 0 : _a.map((insight) => /* @__PURE__ */ React6.createElement(
+      ), hasInsights && /* @__PURE__ */ React6.createElement("div", { className: "mt-4 flex flex-wrap gap-2 px-2" }, (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ React6.createElement(
         "span",
         {
-          key: insight,
+          key: `insight-${i}`,
           className: `rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? "px-2.5 py-1 text-[10px]" : "px-3 py-1 text-[11px]"} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`
         },
-        insight
+        String(insight)
       ))));
     case "carousel":
       return /* @__PURE__ */ React6.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ React6.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ React6.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React6.createElement(ProductCarousel, { products: config.data.map((item) => {
@@ -895,43 +1005,58 @@ function MessageBubble({
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
   const [showSources, setShowSources] = React6.useState(false);
-  const hasStructuredProductBlock = React6.useMemo(
-    () => /```(?:ui|json|chart)\s*[\s\S]*?"?(?:view|type|data|products)"?\s*:\s*"?(?:carousel|products|table)"?/i.test(message.content) || /\{[\s\S]*?"?(?:view|type|data|products)"?\s*:\s*"?(?:carousel|products)"?[\s\S]*\}/i.test(message.content) && looksLikeStructuredPayload(message.content),
-    [message.content]
-  );
   const structuredContent = React6.useMemo(
     () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
     [isUser, message.content]
   );
-  const shouldRenderStructuredOnly = !isUser && Boolean(structuredContent.payload) && isLikelyUiOnlyMessage(structuredContent.text);
+  const hasRichUI = React6.useMemo(() => {
+    if (message.uiTransformation) {
+      const type = message.uiTransformation.type;
+      if (type && !["text", "table"].includes(type)) return true;
+    }
+    if (structuredContent.payload) {
+      return /"?(?:view|type|chartType)"?\s*:\s*"?(?:chart|carousel|pie|bar|line|product_carousel)"?/i.test(structuredContent.payload);
+    }
+    return false;
+  }, [message.uiTransformation, structuredContent.payload]);
+  const shouldRenderStructuredOnly = !isUser && hasRichUI && isLikelyUiOnlyMessage(structuredContent.text);
   const productsFromSources = React6.useMemo(() => {
     if (isUser || !sources) return [];
     return sources.filter((s) => {
       var _a;
       const m = (_a = s.metadata) != null ? _a : {};
-      return m.price || m.image || m.img || m.thumbnail || m.images || m.brand || m.type === "product";
+      const keys = Object.keys(m).map((k) => k.toLowerCase());
+      const hasProductKey = keys.some(
+        (k) => ["price", "image", "img", "thumbnail", "images", "brand", "product", "sku", "category", "model", "cost"].includes(k)
+      );
+      const hasPricePattern = /\$\s*\d+/.test(s.content);
+      return hasProductKey || hasPricePattern || m.type === "product";
     }).map((s) => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       const m = (_a = s.metadata) != null ? _a : {};
+      const name = getMetadataValue(m, ["name", "product", "title", "label", "item"]);
+      const brand = getMetadataValue(m, ["brand", "manufacturer", "vendor", "make"]);
+      const price = getMetadataValue(m, ["price", "cost", "amount", "msrp", "rate"]);
       return {
         id: s.id,
-        name: (_d = (_c = (_b = m.name) != null ? _b : m.title) != null ? _c : s.content.split("\n")[0]) != null ? _d : "Unknown Product",
-        brand: m.brand,
-        price: m.price,
+        name: (_b = name != null ? name : s.content.split("\n")[0]) != null ? _b : "Unknown Product",
+        brand,
+        price,
         image: resolveImage(m),
-        link: m.link,
+        link: getMetadataValue(m, ["link", "url", "product_url"]),
         description: s.content
       };
     });
   }, [sources, isUser]);
   const { productsFromContent, cleanContent } = React6.useMemo(() => {
+    var _a, _b;
     if (isUser) {
       return { productsFromContent: [], cleanContent: message.content };
     }
     const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
     const products = [];
     let content = structuredContent.text;
-    const payloadCandidates = [structuredContent.payload, ...content.matchAll(jsonRegex).map((match) => match[1])].filter(Boolean);
+    const payloadCandidates = [structuredContent.payload, ...Array.from(content.matchAll(jsonRegex)).map((match) => match[1])].filter(Boolean);
     for (const candidate of payloadCandidates) {
       try {
         const data = JSON.parse(sanitizeJson(candidate));
@@ -939,9 +1064,9 @@ function MessageBubble({
         if ((data.type === "products" || data.view === "carousel" || data.view === "table" || Array.isArray(data.products)) && itemSet) {
           products.push(
             ...itemSet.map((item) => {
-              var _a;
+              var _a2;
               return __spreadProps(__spreadValues({}, item), {
-                image: (_a = item.image) != null ? _a : resolveImage(item)
+                image: (_a2 = item.image) != null ? _a2 : resolveImage(item)
               });
             })
           );
@@ -950,15 +1075,15 @@ function MessageBubble({
       }
     }
     if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
-      for (const match of content.matchAll(jsonRegex)) {
+      for (const match of Array.from(content.matchAll(jsonRegex))) {
         try {
           const data = JSON.parse(sanitizeJson(match[1]));
           if (data.type === "products" && Array.isArray(data.items)) {
             products.push(
               ...data.items.map((item) => {
-                var _a;
+                var _a2;
                 return __spreadProps(__spreadValues({}, item), {
-                  image: (_a = item.image) != null ? _a : resolveImage(item)
+                  image: (_a2 = item.image) != null ? _a2 : resolveImage(item)
                 });
               })
             );
@@ -968,8 +1093,41 @@ function MessageBubble({
         }
       }
     }
+    const bulletRegex = /(?:[•*-]\s*)?([^•\n\-\$*–—\(]+?)(?:\s*\(?Price\s*[:\-–—]?\s*)?(?:\s*[:\-–—]\s*|\s+)\$?([\d,.]+)(?:\s*USD)?/gi;
+    const matches = Array.from(content.matchAll(bulletRegex));
+    if (matches.length >= 2) {
+      const normalize = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+      for (const match of matches) {
+        let name = ((_a = match[1]) == null ? void 0 : _a.trim()) || "";
+        name = name.replace(/\s*\(?Price\s*$/i, "").replace(/[:\-–—]\s*$/g, "").trim();
+        let price = ((_b = match[2]) == null ? void 0 : _b.trim()) || "";
+        price = price.replace(/[,\s]+$/, "").trim();
+        if (name && price) {
+          const newProduct = {
+            id: `text-prod-${name}-${price}`,
+            name,
+            price: `$${price}`
+          };
+          const normName = normalize(name);
+          const sourceMatch = productsFromSources.find((s) => {
+            const sn = normalize(s.name);
+            return sn.includes(normName) || normName.includes(sn);
+          });
+          if (sourceMatch) {
+            newProduct.image = sourceMatch.image;
+            newProduct.brand = sourceMatch.brand;
+            newProduct.link = sourceMatch.link;
+            newProduct.description = sourceMatch.description;
+          }
+          products.push(newProduct);
+          content = content.replace(match[0], `
+**${name}** \u2014 $${price}`);
+        }
+      }
+      content = content.replace(/\n{3,}/g, "\n\n").trim();
+    }
     return { productsFromContent: products, cleanContent: content.trim() };
-  }, [message.content, isUser, structuredContent]);
+  }, [message.content, isUser, structuredContent, productsFromSources]);
   const allProducts = React6.useMemo(() => {
     if (productsFromContent.length > 0) return productsFromContent;
     const seen = /* @__PURE__ */ new Set();
@@ -1166,8 +1324,24 @@ ${match.trim()}
         onAddToCart,
         viewportSize
       }
-    ), !shouldRenderStructuredOnly && /* @__PURE__ */ React6.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, processedMarkdown), !isUser && !structuredContent.payload && !!message.uiTransformation && /* @__PURE__ */ React6.createElement("div", { className: "mt-4 border-t border-slate-100 dark:border-white/5 pt-4" }, /* @__PURE__ */ React6.createElement(VisualizationRenderer, { data: message.uiTransformation })), isStreaming && message.content && /* @__PURE__ */ React6.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
-  ), !isUser && !hasStructuredProductBlock && allProducts.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React6.createElement(
+    ), !shouldRenderStructuredOnly && /* @__PURE__ */ React6.createElement(ReactMarkdown, { components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React6.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
+  ), (() => {
+    var _a, _b;
+    if (isUser || structuredContent.payload || !message.uiTransformation) return null;
+    const ui = message.uiTransformation;
+    const textContent = (_b = (_a = ui.data) == null ? void 0 : _a.content) != null ? _b : "";
+    const shouldShow = ui.type === "table" && allProducts.length === 0 || !["text", "table"].includes(ui.type) || ui.type === "text" && !hasRichUI && allProducts.length === 0 && textContent && !processedMarkdown.toLowerCase().includes(textContent.trim().toLowerCase());
+    if (!shouldShow) return null;
+    return /* @__PURE__ */ React6.createElement("div", { className: "w-full mt-3" }, /* @__PURE__ */ React6.createElement(
+      VisualizationRenderer,
+      {
+        data: ui,
+        primaryColor,
+        onAddToCart,
+        className: "rounded-3xl border border-slate-200/60 dark:border-white/10 bg-white/90 dark:bg-slate-900/80 p-4"
+      }
+    ));
+  })(), !isUser && !hasRichUI && allProducts.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React6.createElement(
     ProductCarousel,
     {
       products: allProducts,
@@ -1371,7 +1545,7 @@ function useRagChat(projectId, options = {}) {
           const complete = buffer.slice(0, lastBoundary + 2);
           buffer = buffer.slice(lastBoundary + 2);
           for (const frame of parseSseChunk(complete)) {
-            if (frame.type === "text") {
+            if (frame.type === "text" && frame.text) {
               assistantContent += frame.text;
             } else if (frame.type === "metadata") {
               sources = (_a = frame.sources) != null ? _a : [];
@@ -1393,7 +1567,7 @@ function useRagChat(projectId, options = {}) {
         }
         if (buffer.trim()) {
           for (const frame of parseSseChunk(buffer)) {
-            if (frame.type === "text") assistantContent += frame.text;
+            if (frame.type === "text" && frame.text) assistantContent += frame.text;
             else if (frame.type === "metadata") sources = (_b = frame.sources) != null ? _b : [];
           }
         }