@retrivora-ai/rag-engine 1.5.4 → 1.5.6

package/dist/index.mjs

@@ -123,7 +123,7 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
   };
   if (!products || products.length === 0) return null;
   if (products.length === 1) {
-    return /* @__PURE__ */ React3.createElement("div", { className: "my-4 w-[85%] sm:w-[48%] md:w-[31%] min-w-[200px] max-w-[300px] animate-fade-in-up" }, /* @__PURE__ */ React3.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__ */ 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",
@@ -158,7 +158,7 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
       "div",
       {
         key: product.id,
-        className: "snap-start flex-shrink-0 w-[85%] sm:w-[48%] md:w-[31%] min-w-[200px] max-w-[300px]"
+        className: "snap-start flex-shrink-0 w-[min(88%,18rem)] min-w-[11rem] max-w-full"
       },
       /* @__PURE__ */ React3.createElement(ProductCard, { product, primaryColor, onAddToCart })
     ))
@@ -183,9 +183,20 @@ import {
   ResponsiveContainer
 } from "recharts";
 var DEFAULT_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
-function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6" }) {
+function DynamicChart({
+  config,
+  primaryColor = "#6366f1",
+  accentColor = "#8b5cf6",
+  viewportSize = "large"
+}) {
   const { type, data } = config;
   const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+  const isCompact = viewportSize === "compact";
+  const isMedium = viewportSize === "medium";
+  const chartHeightClass = isCompact ? "h-56 min-h-[220px]" : isMedium ? "h-64 min-h-[250px]" : "h-72 min-h-[280px]";
+  const pieOuterRadius = isCompact ? 56 : isMedium ? 68 : 80;
+  const pieLabel = ({ name, percent }) => isCompact ? `${name}` : `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%`;
+  const axisTick = { fontSize: isCompact ? 10 : 12, fill: "#64748b" };
   const sanitizedData = React4.useMemo(() => {
     if (!data) return [];
     return data.map((item) => {
@@ -233,9 +244,59 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
   }).slice(0, 5);
   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",
+    count: "Count",
+    inStock: "In stock",
+    inStockCount: "In stock",
+    outOfStockCount: "Out of stock",
+    stockStatus: "Stock status",
+    category: "Category",
+    label: "Label",
+    name: "Name"
+  };
+  const renderTooltip = (row, label) => {
+    var _a, _b;
+    if (!row) return null;
+    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__ */ 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) => {
+    if (!Array.isArray(payload) || payload.length === 0) return null;
+    const first = payload[0];
+    if (!first || typeof first !== "object" || !("payload" in first)) return null;
+    const row = first.payload;
+    if (!row || typeof row !== "object" || Array.isArray(row)) return null;
+    return row;
+  };
   if (type === "pie") {
-    const pieDataKey = finalDataKeys[0] || "value";
-    return /* @__PURE__ */ React4.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React4.createElement("div", { className: `w-full ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
       Pie,
       {
         data: sanitizedData,
@@ -243,47 +304,31 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
         nameKey: finalXKey,
         cx: "50%",
         cy: "50%",
-        outerRadius: 80,
-        label: ({ name, percent }) => `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%`
+        outerRadius: pieOuterRadius,
+        label: pieLabel
       },
-      data.map((entry, index) => /* @__PURE__ */ React4.createElement(Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
-    ), /* @__PURE__ */ React4.createElement(
-      Tooltip,
-      {
-        contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
-      }
-    ), /* @__PURE__ */ React4.createElement(Legend, null))));
+      sanitizedData.map((entry, index) => /* @__PURE__ */ React4.createElement(Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
+    ), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }))));
   }
-  return /* @__PURE__ */ React4.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ React4.createElement(YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(
-    Tooltip,
-    {
-      contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
-      cursor: { fill: "#f1f5f9" }
-    }
-  ), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: `w-full ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__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" } }), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Bar,
     {
       key,
       dataKey: key,
       fill: colors[index % colors.length],
       radius: [4, 4, 0, 0],
-      barSize: Math.max(20, 60 / data.length)
+      barSize: isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
     }
-  ))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ React4.createElement(YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(
-    Tooltip,
-    {
-      contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
-    }
-  ), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+  ))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__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) }), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Line,
     {
       key,
       type: "monotone",
       dataKey: key,
       stroke: colors[index % colors.length],
-      strokeWidth: 3,
-      dot: { r: 4, strokeWidth: 2 },
-      activeDot: { r: 6 }
+      strokeWidth: isCompact ? 2 : 3,
+      dot: { r: isCompact ? 3 : 4, strokeWidth: 2 },
+      activeDot: { r: isCompact ? 5 : 6 }
     }
   )))));
 }
@@ -342,6 +387,14 @@ function sanitizeJson(raw) {
   }
   return s;
 }
+function extractLikelyJsonBlock(raw) {
+  const trimmed = raw.trim();
+  const objectStart = trimmed.indexOf("{");
+  const arrayStart = trimmed.indexOf("[");
+  const starts = [objectStart, arrayStart].filter((index) => index >= 0);
+  if (starts.length === 0) return trimmed;
+  return trimmed.slice(Math.min(...starts));
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -358,7 +411,9 @@ function normaliseChild(children) {
   }
   return children;
 }
-function DataTable({ config }) {
+function DataTable({ config, viewportSize = "large" }) {
+  const isCompact = viewportSize === "compact";
+  const isMedium = viewportSize === "medium";
   const keys = React5.useMemo(() => {
     if (Array.isArray(config.columns) && config.columns.length) {
       return config.columns;
@@ -380,11 +435,11 @@ function DataTable({ config }) {
     if (typeof val === "boolean") return val ? "\u2713" : "\u2717";
     return String(val);
   };
-  return /* @__PURE__ */ React5.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2.5 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React5.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: "w-full text-left border-collapse min-w-[320px] text-sm" }, /* @__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, keys.map((k) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2.5 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React5.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: `w-full text-left border-collapse ${isCompact ? "min-w-[240px] text-xs" : isMedium ? "min-w-[280px] text-[13px]" : "min-w-[320px] text-sm"}` }, /* @__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, keys.map((k) => /* @__PURE__ */ React5.createElement(
     "th",
     {
       key: k,
-      className: "px-4 py-3 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
+      className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap`
     },
     k
   )))), /* @__PURE__ */ React5.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ React5.createElement(
@@ -397,33 +452,54 @@ function DataTable({ config }) {
       "td",
       {
         key: k,
-        className: "px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap"
+        className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} text-slate-600 dark:text-white/70 whitespace-nowrap`
       },
       formatCell(row[k])
     ))
   ))))), /* @__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" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
 }
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }) {
+function normalizeTabularRows(rows, columns) {
+  if (!Array.isArray(rows)) return [];
+  return rows.map((row) => {
+    if (Array.isArray(row)) {
+      const keys = Array.isArray(columns) && columns.length > 0 ? columns : row.map((_, index) => `column_${index + 1}`);
+      return keys.reduce((acc, key, index) => {
+        acc[key] = row[index];
+        return acc;
+      }, {});
+    }
+    if (row && typeof row === "object") {
+      return row;
+    }
+    return { value: row };
+  }).filter((row) => Object.keys(row).length > 0);
+}
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
+  var _a;
   const result = React5.useMemo(() => {
     if (isStreaming) return { loading: true };
     try {
       const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
-      const parsed = JSON.parse(sanitizeJson(clean));
+      const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
       const config2 = __spreadValues({}, parsed);
       if (!config2.view) {
         if (config2.type === "products" || Array.isArray(config2.items)) {
           config2.view = "carousel";
           config2.data = config2.data || config2.items || [];
-        } else if (["pie", "bar", "line"].includes(config2.type) || ["pie", "bar", "line"].includes(config2.chartType)) {
+        } else if (typeof config2.type === "string" && ["pie", "bar", "line"].includes(config2.type) || typeof config2.chartType === "string" && ["pie", "bar", "line"].includes(config2.chartType)) {
+          const resolvedChartType = config2.chartType === "pie" || config2.chartType === "bar" || config2.chartType === "line" ? config2.chartType : config2.type === "pie" || config2.type === "bar" || config2.type === "line" ? config2.type : "bar";
           config2.view = "chart";
-          config2.chartType = config2.chartType || config2.type || "bar";
+          config2.chartType = resolvedChartType;
           config2.data = config2.data || [];
         } else {
           config2.view = "table";
           config2.data = Array.isArray(config2.data) ? config2.data : Array.isArray(config2) ? config2 : [];
         }
       }
-      return { config: config2 };
+      const normalizedConfig = __spreadProps(__spreadValues({}, config2), {
+        data: normalizeTabularRows(config2.data, config2.columns)
+      });
+      return { config: normalizedConfig };
     } catch (err) {
       return { error: String(err) };
     }
@@ -435,28 +511,50 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }) {
     return /* @__PURE__ */ React5.createElement("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40" }, /* @__PURE__ */ React5.createElement("code", null, rawContent));
   }
   const { config } = result;
+  const isCompact = viewportSize === "compact";
+  const hasInsights = Array.isArray(config.insights) && config.insights.length > 0;
+  const hasDescription = typeof config.description === "string" && config.description.trim().length > 0;
   switch (config.view) {
     case "chart":
-      return /* @__PURE__ */ React5.createElement("div", { className: "my-6 p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: "text-xs font-semibold text-slate-500 mb-4 px-2" }, config.title), /* @__PURE__ */ React5.createElement(
+      return /* @__PURE__ */ React5.createElement("div", { className: `${isCompact ? "my-4 p-3" : "my-6 p-4"} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden` }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2` }, config.title), hasDescription && /* @__PURE__ */ React5.createElement("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React5.createElement(
         DynamicChart,
         {
           config: {
             type: config.chartType || "bar",
-            data: config.data
+            data: config.data,
+            xAxisKey: config.xAxisKey,
+            dataKeys: config.dataKeys,
+            colors: config.colors
           },
           primaryColor,
-          accentColor
+          accentColor,
+          viewportSize
         }
-      ));
+      ), hasInsights && /* @__PURE__ */ React5.createElement("div", { className: "mt-4 flex flex-wrap gap-2 px-2" }, (_a = config.insights) == null ? void 0 : _a.map((insight) => /* @__PURE__ */ React5.createElement(
+        "span",
+        {
+          key: insight,
+          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
+      ))));
     case "carousel":
-      return /* @__PURE__ */ React5.createElement("div", { className: "my-4" }, /* @__PURE__ */ React5.createElement(ProductCarousel, { products: config.data.map((item) => {
-        var _a;
+      return /* @__PURE__ */ React5.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ React5.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React5.createElement(ProductCarousel, { products: config.data.map((item) => {
+        var _a2;
         return __spreadProps(__spreadValues({}, item), {
-          image: (_a = item.image) != null ? _a : typeof resolveImage === "function" ? resolveImage(item) : void 0
+          image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
         });
-      }) }));
+      }), primaryColor, onAddToCart }));
     case "table":
-      return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto max-h-[400px]" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: "text-xs font-semibold text-slate-500 mb-2" }, config.title), /* @__PURE__ */ React5.createElement(DataTable, { config: { type: "table", data: config.data } }));
+      return /* @__PURE__ */ React5.createElement("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto` }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ React5.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React5.createElement(DataTable, { config: {
+        type: "table",
+        title: config.title,
+        description: config.description,
+        columns: config.columns,
+        dataKeys: config.dataKeys,
+        xAxisKey: config.xAxisKey,
+        data: config.data
+      }, viewportSize }));
     default:
       return null;
   }
@@ -467,10 +565,17 @@ function MessageBubble({
   isStreaming = false,
   primaryColor = "#6366f1",
   accentColor = "#8b5cf6",
-  onAddToCart
+  onAddToCart,
+  viewportSize = "large"
 }) {
   const isUser = message.role === "user";
+  const isCompact = viewportSize === "compact";
+  const isMedium = viewportSize === "medium";
   const [showSources, setShowSources] = React5.useState(false);
+  const hasStructuredProductBlock = React5.useMemo(
+    () => /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|type)"\s*:\s*"(?:carousel|products)"/i.test(message.content),
+    [message.content]
+  );
   const productsFromSources = React5.useMemo(() => {
     if (isUser || !sources) return [];
     return sources.filter((s) => {
@@ -641,7 +746,9 @@ ${match.trim()}
               rawContent: String(children != null ? children : "").trim(),
               primaryColor,
               accentColor,
-              isStreaming
+              isStreaming,
+              onAddToCart,
+              viewportSize
             }
           );
         }
@@ -654,7 +761,9 @@ ${match.trim()}
                 rawContent: content,
                 primaryColor,
                 accentColor,
-                isStreaming
+                isStreaming,
+                onAddToCart,
+                viewportSize
               }
             );
           }
@@ -665,23 +774,23 @@ ${match.trim()}
         return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),
-    [primaryColor, accentColor, isStreaming]
+    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
   );
-  return /* @__PURE__ */ React5.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React5.createElement(
     "div",
     {
-      className: `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
+      className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
       style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
     },
-    isUser ? /* @__PURE__ */ React5.createElement(User, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ React5.createElement(Bot, { className: "w-4 h-4" })
-  ), /* @__PURE__ */ React5.createElement("div", { className: `flex flex-col gap-1 max-w-[90%] ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ React5.createElement(
+    isUser ? /* @__PURE__ */ React5.createElement(User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ React5.createElement(Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
+  ), /* @__PURE__ */ React5.createElement("div", { className: `flex flex-col gap-1 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ React5.createElement(
     "div",
     {
-      className: `relative px-4 py-3 rounded-2xl text-sm leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
+      className: `relative ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
       style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
     },
-    isStreaming && !message.content ? /* @__PURE__ */ React5.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ React5.createElement("div", { className: `prose prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ React5.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React5.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
-  ), !isUser && allProducts.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
+    isStreaming && !message.content ? /* @__PURE__ */ React5.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ React5.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ React5.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React5.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__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
     ProductCarousel,
     {
       products: allProducts,
@@ -963,6 +1072,8 @@ function ChatWindow({
   const { ui, projectId } = useConfig();
   const [input, setInput] = useState4("");
   const [mounted, setMounted] = useState4(false);
+  const [viewportSize, setViewportSize] = useState4("large");
+  const windowRef = useRef3(null);
   const bottomRef = useRef3(null);
   const inputRef = useRef3(null);
   const { messages, send, clear, isLoading, error } = useRagChat(projectId, {
@@ -1021,6 +1132,22 @@ function ChatWindow({
   useEffect4(() => {
     setMounted(true);
   }, []);
+  useEffect4(() => {
+    const element = windowRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const resolveViewportSize = (width) => {
+      if (width < 420) return "compact";
+      if (width < 640) return "medium";
+      return "large";
+    };
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      setViewportSize(resolveViewportSize(entry.contentRect.width));
+    });
+    setViewportSize(resolveViewportSize(element.getBoundingClientRect().width));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
   useEffect4(() => {
     var _a2;
     if (messages.length > 0 || isLoading) {
@@ -1084,6 +1211,7 @@ function ChatWindow({
   return /* @__PURE__ */ React8.createElement(
     "div",
     {
+      ref: windowRef,
       className: `relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${isGlass ? "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl" : "bg-white dark:bg-[#0f0f1a]"} ${className}`,
       style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style)
     },
@@ -1180,7 +1308,8 @@ function ChatWindow({
         isStreaming: isLoading && index === messages.length - 1 && msg.role === "assistant",
         primaryColor: ui.primaryColor,
         accentColor: ui.accentColor,
-        onAddToCart
+        onAddToCart,
+        viewportSize
       }
     )), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ React8.createElement(
       MessageBubble,
@@ -1189,7 +1318,8 @@ function ChatWindow({
         isStreaming: true,
         primaryColor: ui.primaryColor,
         accentColor: ui.accentColor,
-        onAddToCart
+        onAddToCart,
+        viewportSize
       }
     ), error && /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3" }, /* @__PURE__ */ React8.createElement(TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ React8.createElement("span", null, error)), /* @__PURE__ */ React8.createElement("div", { ref: bottomRef })),
     /* @__PURE__ */ React8.createElement("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}` }, (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ React8.createElement("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300" }, suggestions.map((suggestion) => /* @__PURE__ */ React8.createElement(

package/dist/server.js

@@ -3913,23 +3913,70 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- UI_PROTOCOL_V3 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V5 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### UNIVERSAL UI PROTOCOL:
-You have a specialized UI system. For any structured data (charts, product lists, or tables), you MUST use a single \`\`\`ui\`\`\` block.
-1. DECIDE the best "view" for the user's query:
-   - "chart": For statistics, distributions, or comparisons. (Requires "chartType": "pie" | "bar" | "line")
-   - "carousel": For browsing specific product items.
-   - "table": For detailed raw data comparisons.
-2. OUTPUT a \`\`\`ui\`\`\` block with this schema:
+### UNIVERSAL UI PROTOCOL
+When the user asks for a visual representation, comparison, distribution, breakdown, table, list, catalog, products, carousel, stock view, or category summary, you MUST include exactly one \`\`\`ui\`\`\` block.
+
+1. VIEW SELECTION
+   - Use "chart" for distributions, percentages, counts, comparisons, trends, or "show me in a chart".
+   - Use "carousel" for browseable product recommendations or when the user asks to see products/items/cards.
+   - Use "table" for tabular/raw detail, explicit table/list requests, or when there are many attributes to compare.
+
+2. REQUIRED JSON SHAPE
    {
      "view": "chart" | "carousel" | "table",
-     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
-     "data": [ ... objects ... ]
+     "title": "Short heading",
+     "description": "One sentence describing the view",
+     "chartType": "pie" | "bar" | "line",
+     "xAxisKey": "label",
+     "dataKeys": ["value"],
+     "columns": ["name", "category", "price", "stockStatus"],
+     "insights": ["Short takeaway 1", "Short takeaway 2"],
+     "data": []
    }
-3. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
+
+3. DATA RULES
+   - Build the UI payload from retrieved context only. Do not invent products, categories, or stock values.
+   - Aggregate raw product rows when the user asks for a chart.
+   - For charts, every row in "data" must be flat JSON with primitive values only.
+   - Prefer { "label": "...", "value": number } for pie charts.
+   - If stock information exists, preserve it in each row with fields like "inStock", "inStockCount", "outOfStockCount", or "stockStatus".
+   - If the user asks to highlight what is in stock, include those stock-related fields in the chart data and mention the pattern in "insights".
+   - For carousel rows, include product-friendly fields such as id, name, brand, price, image, link, category, stockStatus.
+   - For tables, keep "data" row-oriented and include "columns" when possible.
+
+4. FORMAT RULES
+   - Never use ASCII art, markdown tables as the primary answer, or text-only fake charts when a UI block is requested.
+   - Put any short natural-language explanation before or after the \`\`\`ui\`\`\` block, but keep it concise.
+   - Return valid JSON inside the \`\`\`ui\`\`\` block.
+   - If the user explicitly asks for a pie chart, return "view": "chart" with "chartType": "pie", not a table fallback.
+   - Do not prefix the JSON with labels like "Table View", "Alternative", or explanatory text inside the code block.
+
+5. EXAMPLE
+User: "provide me the distribution of products across categories and highlight which ones are in stock in a pie chart"
+Assistant:
+\`\`\`ui
+{
+  "view": "chart",
+  "title": "Product Distribution Across Categories",
+  "description": "Pie chart showing product count by category with stock signals preserved per slice.",
+  "chartType": "pie",
+  "xAxisKey": "label",
+  "dataKeys": ["value"],
+  "insights": [
+    "Beauty has the highest product count.",
+    "Electronics has the largest number of in-stock products."
+  ],
+  "data": [
+    { "label": "Beauty", "value": 12, "inStockCount": 9, "outOfStockCount": 3 },
+    { "label": "Electronics", "value": 8, "inStockCount": 7, "outOfStockCount": 1 },
+    { "label": "Home", "value": 5, "inStockCount": 2, "outOfStockCount": 3 }
+  ]
+}
+\`\`\``;
     if (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
     }

package/dist/server.mjs

@@ -39,7 +39,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "./chunk-BLLMNP77.mjs";
+} from "./chunk-ID2Q4CF7.mjs";
 import "./chunk-YLTMFW4M.mjs";
 import {
   PineconeProvider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "MIT",

package/src/app/api/chat/route.ts

@@ -1,4 +1,4 @@
-import { createChatHandler } from '@/handlers';
+import { createStreamHandler } from '@/handlers';
 import { getRagConfig } from '@/config/serverConfig';
 
-export const POST = createChatHandler(getRagConfig());
+export const POST = createStreamHandler(getRagConfig());

package/src/components/ChatWindow.tsx

@@ -65,6 +65,8 @@ export function ChatWindow({
   const { ui, projectId } = useConfig();
   const [input, setInput] = useState('');
   const [mounted, setMounted] = useState(false);
+  const [viewportSize, setViewportSize] = useState<'compact' | 'medium' | 'large'>('large');
+  const windowRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const { messages, send, clear, isLoading, error } = useRagChat(projectId, {
@@ -136,6 +138,27 @@ export function ChatWindow({
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    const element = windowRef.current;
+    if (!element || typeof ResizeObserver === 'undefined') return;
+
+    const resolveViewportSize = (width: number) => {
+      if (width < 420) return 'compact';
+      if (width < 640) return 'medium';
+      return 'large';
+    };
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      setViewportSize(resolveViewportSize(entry.contentRect.width));
+    });
+
+    setViewportSize(resolveViewportSize(element.getBoundingClientRect().width));
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, []);
+
   // Scroll to bottom on new message (but not on initial mount with empty messages)
   useEffect(() => {
     if (messages.length > 0 || isLoading) {
@@ -206,6 +229,7 @@ export function ChatWindow({
 
   return (
     <div
+      ref={windowRef}
       className={`relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${
         isGlass 
           ? 'bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl' 
@@ -344,6 +368,7 @@ export function ChatWindow({
               primaryColor={ui.primaryColor}
               accentColor={ui.accentColor}
               onAddToCart={onAddToCart}
+              viewportSize={viewportSize}
             />
           ))
         )}
@@ -356,6 +381,7 @@ export function ChatWindow({
             primaryColor={ui.primaryColor}
             accentColor={ui.accentColor}
             onAddToCart={onAddToCart}
+            viewportSize={viewportSize}
           />
         )}