@retrivora-ai/rag-engine 1.9.0 → 1.9.1

package/dist/index.js

@@ -395,7 +395,20 @@ var import_lucide_react4 = require("lucide-react");
 var import_image = __toESM(require("next/image"));
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function cleanProductDescription(raw) {
+  var _a;
+  if (raw === null || raw === void 0) return "";
+  const source = String(raw);
+  const bodyMatch = source.match(
+    /\bBody\s*\(HTML\)\s*:\s*([\s\S]*?)(?=\s*[,.]?\s+\b(?:Handle|Title|Vendor|Type|Tags|Published|Option\d*\s+Name|Option\d*\s+Value|Option|Variant|Image|SKU|Price|Status|Category)\b\s*:|$)/i
+  );
+  const descriptionMatch = bodyMatch != null ? bodyMatch : source.match(
+    /\b(?:Description|Summary|Details|Body)\s*:\s*([\s\S]*?)(?=\s*[,.]?\s+\b(?:Handle|Title|Vendor|Type|Tags|Published|Option\d*\s+Name|Option\d*\s+Value|Option|Variant|Image|SKU|Price|Status|Category)\b\s*:|$)/i
+  );
+  return ((_a = descriptionMatch == null ? void 0 : descriptionMatch[1]) != null ? _a : source).replace(/<[^>]*>/g, " ").replace(/&nbsp;/gi, " ").replace(/&amp;/gi, "&").replace(/&quot;/gi, '"').replace(/&#39;/gi, "'").replace(/\[[^\]]*TYPE[^\]]*\]/gi, " ").replace(/\b(?:Handle|Title|Vendor|Type|Tags|Published|Option\d*\s+Name|Option\d*\s+Value|Option|Variant|Image|SKU|Price|Status|Category)\s*:\s*[^,.\n:]+[,.]?/gi, " ").replace(/\bBody\s*\(HTML\)\s*:\s*/gi, " ").replace(/\b(?:Description|Summary|Details|Body|Content)\s*:\s*/gi, " ").replace(/\s+/g, " ").trim();
+}
 function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
+  const description = cleanProductDescription(product.description);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative h-40 w-full bg-slate-100 dark:bg-white/5 flex items-center justify-center overflow-hidden", children: [
       product.image ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -407,7 +420,7 @@ function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
           unoptimized: true,
           className: "object-cover group-hover:scale-105 transition-transform duration-500"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-slate-400 dark:text-white/20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ShoppingCart, { className: "w-12 h-12" }) }),
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-slate-400 dark:text-white/20 cursor-pointer", onClick: () => onAddToCart == null ? void 0 : onAddToCart(product), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ShoppingCart, { className: "w-12 h-12" }) }),
       product.brand && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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", children: product.brand })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-4 flex flex-col gap-2", children: [
@@ -415,13 +428,13 @@ function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1", children: product.name }),
         product.price && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-bold", style: { color: primaryColor }, children: typeof product.price === "number" ? `$${product.price}` : String(product.price).match(/^[\d.]/) ? `$${product.price}` : product.price })
       ] }),
-      product.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed", children: product.description }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed", children: description }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-2 flex gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "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",
+            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 cursor-pointer",
             style: { background: primaryColor },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ShoppingCart, { className: "w-3 h-3" }),
@@ -720,6 +733,9 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function getColor(index) {
   return CHART_COLORS[index % CHART_COLORS.length];
 }
+function stripLeakedAnswerWrappers(raw) {
+  return raw.replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>\s*([\s\S]*?)\s*<\/prose>/gi, "$1").replace(/<\/?prose(?:\s+answer)?[^>]*>/gi, "").trim();
+}
 function CustomTooltip({
   active,
   payload,
@@ -769,10 +785,20 @@ function renderVisualization(type, data, onAddToCart, primaryColor, isStreaming)
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PieChartView, { data, isStreaming });
       case "bar_chart":
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BarChartView, { data, primaryColor, isStreaming });
+      case "histogram":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BarChartView, { data, primaryColor, isStreaming });
+      case "horizontal_bar":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BarChartView, { data, primaryColor, isStreaming, layout: "vertical" });
       case "line_chart":
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LineChartView, { data, primaryColor, isStreaming });
+      case "scatter_plot":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScatterPlotView, { data, primaryColor, isStreaming });
       case "radar_chart":
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadarChartView, { data, isStreaming });
+      case "metric_card":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MetricCardView, { data, isStreaming });
+      case "geo_map":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BarChartView, { data, primaryColor, isStreaming });
       case "table":
         return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableView, { data, isStreaming });
       case "product_carousel":
@@ -807,28 +833,74 @@ function PieChartView({ data, isStreaming }) {
   }
   const chartData = data.map((item) => ({
     name: item.label,
-    value: item.value
+    value: item.value,
+    inStockCount: item.inStockCount,
+    outOfStockCount: item.outOfStockCount
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.PieChart, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_recharts2.Pie,
-      {
-        data: chartData,
-        dataKey: "value",
-        nameKey: "name",
-        cx: "50%",
-        cy: "50%",
-        outerRadius: "68%",
-        label: false,
-        labelLine: false,
-        children: chartData.map((_entry, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Cell, { fill: getColor(index) }, `cell-${index}`))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })
-  ] }) }) });
+  const hasStockBreakdown = chartData.some(
+    (item) => item.inStockCount !== void 0 || item.outOfStockCount !== void 0
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.PieChart, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_recharts2.Pie,
+        {
+          data: chartData,
+          dataKey: "value",
+          nameKey: "name",
+          cx: "50%",
+          cy: "50%",
+          outerRadius: "68%",
+          label: false,
+          labelLine: false,
+          children: chartData.map((_entry, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Cell, { fill: getColor(index) }, `cell-${index}`))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })
+    ] }) }),
+    hasStockBreakdown && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-3 grid gap-2 sm:grid-cols-2", children: chartData.map((item, index) => {
+      var _a, _b;
+      const inStock = Number((_a = item.inStockCount) != null ? _a : 0);
+      const outOfStock = Number((_b = item.outOfStockCount) != null ? _b : 0);
+      const status = inStock > 0 ? `${inStock} in stock` : "Out of stock";
+      const mutedStatus = outOfStock > 0 ? `${outOfStock} out` : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          className: "flex min-w-0 items-center justify-between gap-3 rounded-md border border-slate-100 px-2.5 py-2 text-xs dark:border-white/10",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-slate-700 dark:text-white/75", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "span",
+                {
+                  className: "h-2.5 w-2.5 flex-shrink-0 rounded-full",
+                  style: { background: getColor(index) }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: item.name })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: inStock > 0 ? "whitespace-nowrap font-medium text-emerald-600" : "whitespace-nowrap font-medium text-rose-600", children: [
+              status,
+              mutedStatus && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ml-1 text-slate-400", children: [
+                "(",
+                mutedStatus,
+                ")"
+              ] })
+            ] })
+          ]
+        },
+        item.name
+      );
+    }) })
+  ] });
 }
-function BarChartView({ data, primaryColor, isStreaming }) {
+function BarChartView({
+  data,
+  primaryColor,
+  isStreaming,
+  layout = "horizontal"
+}) {
   if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid bar chart data" });
@@ -839,26 +911,66 @@ function BarChartView({ data, primaryColor, isStreaming }) {
   }, 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__ */ (0, import_jsx_runtime7.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 260, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.BarChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_recharts2.XAxis,
-      {
-        dataKey: "category",
-        tick: { fontSize: 11, fill: "#64748b" },
-        tickLine: false,
-        axisLine: { stroke: "#cbd5e1" }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}), cursor: { fill: "#f1f5f9" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } }),
-    hasStock ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 260, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_recharts2.BarChart,
+    {
+      data: chartData,
+      layout,
+      margin: { top: 10, right: 10, left: layout === "vertical" ? 20 : -20, bottom: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+        layout === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.XAxis, { type: "number", tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.YAxis, { type: "category", dataKey: "category", width: 110, tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_recharts2.XAxis,
+            {
+              dataKey: "category",
+              tick: { fontSize: 11, fill: "#64748b" },
+              tickLine: false,
+              axisLine: { stroke: "#cbd5e1" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}), cursor: { fill: "#f1f5f9" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } }),
+        hasStock ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] })
+      ]
+    }
+  ) }) });
+}
+function ScatterPlotView({ data, primaryColor, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
+  if (!Array.isArray(data) || data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid scatter plot data" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 260, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.ScatterChart, { margin: { top: 10, right: 10, left: -20, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.XAxis, { type: "number", dataKey: "x", tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.YAxis, { type: "number", dataKey: "y", tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Scatter, { name: "Value", data, fill: primaryColor != null ? primaryColor : getColor(0) })
   ] }) }) });
 }
+function MetricCardView({ data, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
+  if (!data || typeof data.value !== "number") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid metric data" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-slate-900", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs font-medium uppercase text-slate-500 dark:text-slate-400", children: data.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-2 text-3xl font-semibold text-slate-900 dark:text-white", children: [
+      data.value.toLocaleString(),
+      data.unit && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1 text-base text-slate-500", children: data.unit })
+    ] }),
+    data.operation && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: data.operation })
+  ] });
+}
 function LineChartView({ data, primaryColor, isStreaming }) {
   if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
@@ -992,7 +1104,7 @@ function CarouselView({
   ) });
 }
 function TextView({ data }) {
-  const content = (data == null ? void 0 : data.content) || String(data != null ? data : "");
+  const content = stripLeakedAnswerWrappers((data == null ? void 0 : data.content) || String(data != null ? data : ""));
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed", children: content }) });
 }
 
@@ -1430,6 +1542,14 @@ var FIELD_SYNONYMS = {
     "in stock",
     "status"
   ],
+  category: [
+    "product_category",
+    "product category",
+    "category_name",
+    "category name",
+    "department",
+    "collection"
+  ],
   description: ["summary", "content", "body", "text", "info", "details"],
   link: ["url", "href", "product_url", "page_url", "link"]
 };
@@ -1637,11 +1757,12 @@ function extractProductsFromSources(sources, isUser) {
     var _a;
     const m = (_a = s.metadata) != null ? _a : {};
     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 hasStrongProductKey = keys.some(
+      (k) => ["price", "image", "img", "thumbnail", "images", "product", "sku", "cost"].includes(k)
     );
+    const hasProductIdentity = keys.some((k) => ["brand", "model"].includes(k)) && keys.some((k) => ["name", "title", "product_name", "product"].includes(k));
     const hasPricePattern = /\$\s*\d+/.test(s.content);
-    return hasProductKey || hasPricePattern || m.type === "product";
+    return hasStrongProductKey || hasProductIdentity || hasPricePattern || m.type === "product";
   }).map((s) => {
     var _a, _b;
     const m = (_a = s.metadata) != null ? _a : {};
@@ -1828,6 +1949,7 @@ function resolveStructuredRows(config) {
 }
 function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
   var _a;
+  console.log("rawContent", rawContent);
   const result = import_react7.default.useMemo(() => {
     try {
       const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
@@ -1962,12 +2084,11 @@ function createMarkdownComponents({
   viewportSize
 }) {
   return {
-    p: (_a) => {
+    // p: ({ ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    //   <p className="whitespace-pre-line" {...props} />
+    // ),
+    table: (_a) => {
       var props = __objRest(_a, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", __spreadValues({ className: "whitespace-pre-line" }, props));
-    },
-    table: (_b) => {
-      var props = __objRest(_b, []);
       if (isStreaming) {
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
@@ -1981,8 +2102,8 @@ function createMarkdownComponents({
         }, props)
       ) }) });
     },
-    thead: (_c) => {
-      var props = __objRest(_c, []);
+    thead: (_b) => {
+      var props = __objRest(_b, []);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "thead",
         __spreadValues({
@@ -1990,12 +2111,12 @@ function createMarkdownComponents({
         }, props)
       );
     },
-    tbody: (_d) => {
-      var props = __objRest(_d, []);
+    tbody: (_c) => {
+      var props = __objRest(_c, []);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
     },
-    tr: (_e) => {
-      var props = __objRest(_e, []);
+    tr: (_d) => {
+      var props = __objRest(_d, []);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "tr",
         __spreadValues({
@@ -2003,8 +2124,8 @@ function createMarkdownComponents({
         }, props)
       );
     },
-    th: (_f) => {
-      var _g = _f, { children } = _g, props = __objRest(_g, ["children"]);
+    th: (_e) => {
+      var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "th",
         __spreadProps(__spreadValues({
@@ -2014,8 +2135,8 @@ function createMarkdownComponents({
         })
       );
     },
-    td: (_h) => {
-      var _i = _h, { children } = _i, props = __objRest(_i, ["children"]);
+    td: (_g) => {
+      var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "td",
         __spreadProps(__spreadValues({
@@ -2025,12 +2146,12 @@ function createMarkdownComponents({
         })
       );
     },
-    code(_j) {
-      var _k = _j, {
+    code(_i) {
+      var _j = _i, {
         inline,
         className,
         children
-      } = _k, props = __objRest(_k, [
+      } = _j, props = __objRest(_j, [
         "inline",
         "className",
         "children"
@@ -2080,6 +2201,16 @@ function normaliseChild(children) {
 
 // src/components/MessageBubble.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function normalizePlusSeparatedLists(raw) {
+  return raw.split("\n").map((line) => {
+    const productListLine = /[—:]\s*\d+\s+\+\s+[A-Za-z]/.test(line) || /\b(products?|categories?|in stock|out of stock)\b/i.test(line);
+    if (!productListLine) return line;
+    return line.replace(/\s+\+\s+(?=[A-Za-z0-9])/g, ", ");
+  }).join("\n");
+}
+function stripLeakedAnswerWrappers2(raw) {
+  return raw.replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>\s*([\s\S]*?)\s*<\/prose>/gi, "$1").replace(/<\/?prose(?:\s+answer)?[^>]*>/gi, "").replace(/\n{3,}/g, "\n\n").trim();
+}
 function MessageBubble({
   message,
   sources,
@@ -2089,6 +2220,7 @@ function MessageBubble({
   onAddToCart,
   viewportSize = "large"
 }) {
+  var _a;
   const isUser = message.role === "user";
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
@@ -2108,6 +2240,10 @@ function MessageBubble({
     }
     return false;
   }, [message.uiTransformation, structuredContent.payload]);
+  const uiTransformationType = (_a = message.uiTransformation) == null ? void 0 : _a.type;
+  const shouldSuppressProductCarousel = Boolean(
+    uiTransformationType && !["text", "product_carousel", "carousel"].includes(uiTransformationType)
+  );
   const shouldRenderStructuredOnly = !isUser && hasRichUI && isLikelyUiOnlyMessage(structuredContent.text);
   const productsFromSources = import_react9.default.useMemo(() => {
     return extractProductsFromSources(sources, isUser);
@@ -2133,6 +2269,14 @@ function MessageBubble({
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = import_react9.default.useMemo(() => {
     let raw = structuredContent.payload ? structuredContent.text : cleanContent || message.content;
+    raw = raw.replace(/\$\s*(\d+)(?!\.\d)/g, "$1");
+    raw = normalizePlusSeparatedLists(raw);
+    raw = stripLeakedAnswerWrappers2(raw);
+    raw = raw.replace(/\*\*([^*\n]+)\*\*(\s*[—\-–:]\s*)/g, "$1$2");
+    raw = raw.split("\n").filter((line, idx, arr) => {
+      const trimmed = line.trim();
+      return !trimmed || arr.findIndex((l) => l.trim() === trimmed) === idx;
+    }).join("\n");
     const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
     if (!isStreaming) {
@@ -2206,11 +2350,11 @@ ${match.trim()}
         }
       ),
       (() => {
-        var _a, _b;
+        var _a2, _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());
+        const textContent = (_b = (_a2 = ui.data) == null ? void 0 : _a2.content) != null ? _b : "";
+        const shouldShow = ui.type === "table" || !["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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           VisualizationRenderer,
@@ -2223,7 +2367,7 @@ ${match.trim()}
           }
         ) });
       })(),
-      !isUser && !hasRichUI && allProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      !isUser && !hasRichUI && !shouldSuppressProductCarousel && allProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ProductCarousel,
         {
           products: allProducts,
@@ -2377,6 +2521,23 @@ function useRagChat(projectId, options = {}) {
         let uiTransformation = null;
         let trace;
         let buffer = "";
+        let pendingFlush = false;
+        const pendingContentRef = { current: "" };
+        const flushTextUpdate = (msgId) => {
+          pendingFlush = false;
+          const snapshot = pendingContentRef.current;
+          setMessages(
+            (prev) => prev.map(
+              (msg) => msg.id === msgId ? __spreadProps(__spreadValues({}, msg), { content: snapshot }) : msg
+            )
+          );
+        };
+        const scheduleFlush = (msgId) => {
+          if (!pendingFlush) {
+            pendingFlush = true;
+            requestAnimationFrame(() => flushTextUpdate(msgId));
+          }
+        };
         const assistantMessageId = `assistant_${Date.now()}`;
         setMessages((prev) => [
           ...prev,
@@ -2395,28 +2556,37 @@ function useRagChat(projectId, options = {}) {
           if (lastBoundary === -1) continue;
           const complete = buffer.slice(0, lastBoundary + 2);
           buffer = buffer.slice(lastBoundary + 2);
+          let hasNonTextFrame = false;
           for (const frame of parseSseChunk(complete)) {
             if (frame.type === "text" && frame.text) {
               assistantContent += frame.text;
+              pendingContentRef.current = assistantContent;
+              scheduleFlush(assistantMessageId);
             } else if (frame.type === "metadata") {
               sources = (_a = frame.sources) != null ? _a : [];
+              hasNonTextFrame = true;
             } else if (frame.type === "ui_transformation") {
               uiTransformation = frame.data;
+              hasNonTextFrame = true;
             } else if (frame.type === "observability") {
               trace = frame.data;
+              hasNonTextFrame = true;
             } else if (frame.type === "error") {
               setError(frame.error || "Stream error");
             }
           }
-          setMessages(
-            (prev) => prev.map(
-              (msg) => msg.id === assistantMessageId ? __spreadProps(__spreadValues({}, msg), {
-                content: assistantContent,
-                sources: sources.length > 0 ? sources : msg.sources,
-                uiTransformation: uiTransformation || msg.uiTransformation
-              }) : msg
-            )
-          );
+          if (hasNonTextFrame) {
+            pendingFlush = false;
+            setMessages(
+              (prev) => prev.map(
+                (msg) => msg.id === assistantMessageId ? __spreadProps(__spreadValues({}, msg), {
+                  content: assistantContent,
+                  sources: sources.length > 0 ? sources : msg.sources,
+                  uiTransformation: uiTransformation || msg.uiTransformation
+                }) : msg
+              )
+            );
+          }
         }
         if (buffer.trim()) {
           for (const frame of parseSseChunk(buffer)) {