@retrivora-ai/rag-engine 1.5.8 → 1.6.0

package/dist/{chunk-ID2Q4CF7.mjs → chunk-5K7EU4KW.mjs}

@@ -2279,7 +2279,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "chartType": "pie" | "bar" | "line",
      "xAxisKey": "label",
      "dataKeys": ["value"],
-     "columns": ["name", "category", "price", "stockStatus"],
+     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
      "insights": ["Short takeaway 1", "Short takeaway 2"],
      "data": []
    }
@@ -2292,7 +2292,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
    - 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.
+   - For tables, keep "data" row-oriented and include "columns" only as dynamic field keys/order hints from the fetched data, never as hardcoded UI labels.
 
 4. FORMAT RULES
    - Never use ASCII art, markdown tables as the primary answer, or text-only fake charts when a UI block is requested.

package/dist/handlers/index.js

@@ -3842,7 +3842,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "chartType": "pie" | "bar" | "line",
      "xAxisKey": "label",
      "dataKeys": ["value"],
-     "columns": ["name", "category", "price", "stockStatus"],
+     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
      "insights": ["Short takeaway 1", "Short takeaway 2"],
      "data": []
    }
@@ -3855,7 +3855,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
    - 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.
+   - For tables, keep "data" row-oriented and include "columns" only as dynamic field keys/order hints from the fetched data, never as hardcoded UI labels.
 
 4. FORMAT RULES
    - Never use ASCII art, markdown tables as the primary answer, or text-only fake charts when a UI block is requested.

package/dist/handlers/index.mjs

@@ -9,7 +9,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "../chunk-ID2Q4CF7.mjs";
+} from "../chunk-5K7EU4KW.mjs";
 import "../chunk-YLTMFW4M.mjs";
 import "../chunk-X4TOT24V.mjs";
 export {

package/dist/index.js

@@ -248,8 +248,11 @@ function DynamicChart({
   const isCompact = viewportSize === "compact" || containerWidth > 0 && containerWidth < 420;
   const isMedium = !isCompact && (viewportSize === "medium" || containerWidth > 0 && containerWidth < 640);
   const chartHeightClass = isTiny ? "h-48 min-h-[180px]" : isCompact ? "h-56 min-h-[220px]" : isMedium ? "h-64 min-h-[250px]" : "h-72 min-h-[280px]";
-  const pieOuterRadius = isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
-  const pieLabel = ({ name, percent }) => isTiny ? "" : isCompact ? `${name}` : `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%`;
+  const pieOuterRadius = (() => {
+    if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
+    const squareSize = Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280);
+    return Math.max(36, Math.floor(squareSize * 0.28));
+  })();
   const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
   const showLegend = !isTiny;
   const truncateAxisLabel = (value) => {
@@ -357,7 +360,7 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mx-auto h-full aspect-square max-w-full" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.default.createElement(
       import_recharts.Pie,
       {
         data: sanitizedData,
@@ -366,10 +369,11 @@ function DynamicChart({
         cx: "50%",
         cy: "50%",
         outerRadius: pieOuterRadius,
-        label: isTiny ? false : pieLabel
+        label: false,
+        labelLine: false
       },
       sanitizedData.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
-    ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }))));
+    ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
   }
   return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
     import_recharts.Bar,
@@ -459,6 +463,12 @@ function extractLikelyJsonBlock(raw) {
 function looksLikeStructuredPayload(raw) {
   return /"(view|chartType|type|data|items|rows|products|results)"\s*:/.test(raw);
 }
+function stripMarkdownTables(raw) {
+  return raw.replace(
+    /(?:^|\n)\|[^\n]+\|\n\|(?:\s*:?-+:?\s*\|)+\n(?:\|[^\n]*\|\n?)*/g,
+    "\n\n"
+  );
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -475,23 +485,45 @@ function normaliseChild(children) {
   }
   return children;
 }
+function normaliseFieldName(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function formatColumnLabel(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
+}
 function DataTable({ config, viewportSize = "large" }) {
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
-  const keys = import_react5.default.useMemo(() => {
+  const columns = import_react5.default.useMemo(() => {
+    const rowKeys = Array.from(
+      new Set(
+        config.data.flatMap((row) => Object.keys(row))
+      )
+    );
+    const findAccessor = (label) => {
+      const exact = rowKeys.find((key) => key === label);
+      if (exact) return exact;
+      const normalisedLabel = normaliseFieldName(label);
+      const normalisedMatch = rowKeys.find((key) => normaliseFieldName(key) === normalisedLabel);
+      if (normalisedMatch) return normalisedMatch;
+      return label;
+    };
     if (Array.isArray(config.columns) && config.columns.length) {
-      return config.columns;
+      return config.columns.map((label) => ({
+        label: formatColumnLabel(label),
+        accessor: findAccessor(label)
+      }));
     }
     if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
-      if (config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)) {
-        return [config.xAxisKey, ...config.dataKeys];
-      }
-      return config.dataKeys;
+      const keys = config.xAxisKey && !config.dataKeys.includes(config.xAxisKey) ? [config.xAxisKey, ...config.dataKeys] : config.dataKeys;
+      return keys.map((key) => ({
+        label: formatColumnLabel(key),
+        accessor: findAccessor(key)
+      }));
     }
-    if (config.data.length > 0) return Object.keys(config.data[0]);
-    return [];
+    return rowKeys.map((key) => ({ label: formatColumnLabel(key), accessor: key }));
   }, [config]);
-  if (!config.data.length || !keys.length) {
+  if (!config.data.length || !columns.length) {
     return /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-xs text-slate-400 italic my-2" }, "No data to display.");
   }
   const formatCell = (val) => {
@@ -499,26 +531,26 @@ function DataTable({ config, viewportSize = "large" }) {
     if (typeof val === "boolean") return val ? "\u2713" : "\u2717";
     return String(val);
   };
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, keys.map((k) => /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, columns.map((column) => /* @__PURE__ */ import_react5.default.createElement(
     "th",
     {
-      key: k,
+      key: column.label,
       className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap`
     },
-    k
+    column.label
   )))), /* @__PURE__ */ import_react5.default.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ import_react5.default.createElement(
     "tr",
     {
       key: ri,
       className: "border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
     },
-    keys.map((k) => /* @__PURE__ */ import_react5.default.createElement(
+    columns.map((column) => /* @__PURE__ */ import_react5.default.createElement(
       "td",
       {
-        key: k,
-        className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} text-slate-600 dark:text-white/70 whitespace-nowrap`
+        key: column.label,
+        className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} text-slate-600 dark:text-white/70 ${column.accessor.toLowerCase().includes("description") ? "whitespace-normal break-words" : "whitespace-nowrap"}`
       },
-      formatCell(row[k])
+      formatCell(row[column.accessor])
     ))
   ))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
 }
@@ -715,6 +747,7 @@ function MessageBubble({
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = import_react5.default.useMemo(() => {
     let raw = cleanContent || message.content;
+    const hasStructuredUiBlock = /```(?: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) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
@@ -730,6 +763,9 @@ ${match.trim()}
 `;
       });
     }
+    if (hasStructuredUiBlock) {
+      raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
+    }
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
         return `

package/dist/index.mjs

@@ -211,8 +211,11 @@ function DynamicChart({
   const isCompact = viewportSize === "compact" || containerWidth > 0 && containerWidth < 420;
   const isMedium = !isCompact && (viewportSize === "medium" || containerWidth > 0 && containerWidth < 640);
   const chartHeightClass = isTiny ? "h-48 min-h-[180px]" : isCompact ? "h-56 min-h-[220px]" : isMedium ? "h-64 min-h-[250px]" : "h-72 min-h-[280px]";
-  const pieOuterRadius = isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
-  const pieLabel = ({ name, percent }) => isTiny ? "" : isCompact ? `${name}` : `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%`;
+  const pieOuterRadius = (() => {
+    if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
+    const squareSize = Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280);
+    return Math.max(36, Math.floor(squareSize * 0.28));
+  })();
   const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
   const showLegend = !isTiny;
   const truncateAxisLabel = (value) => {
@@ -320,7 +323,7 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement("div", { className: "mx-auto h-full aspect-square max-w-full" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
       Pie,
       {
         data: sanitizedData,
@@ -329,10 +332,11 @@ function DynamicChart({
         cx: "50%",
         cy: "50%",
         outerRadius: pieOuterRadius,
-        label: isTiny ? false : pieLabel
+        label: false,
+        labelLine: false
       },
       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) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }))));
+    ), /* @__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__ */ React4.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__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,
@@ -422,6 +426,12 @@ function extractLikelyJsonBlock(raw) {
 function looksLikeStructuredPayload(raw) {
   return /"(view|chartType|type|data|items|rows|products|results)"\s*:/.test(raw);
 }
+function stripMarkdownTables(raw) {
+  return raw.replace(
+    /(?:^|\n)\|[^\n]+\|\n\|(?:\s*:?-+:?\s*\|)+\n(?:\|[^\n]*\|\n?)*/g,
+    "\n\n"
+  );
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -438,23 +448,45 @@ function normaliseChild(children) {
   }
   return children;
 }
+function normaliseFieldName(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function formatColumnLabel(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
+}
 function DataTable({ config, viewportSize = "large" }) {
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
-  const keys = React5.useMemo(() => {
+  const columns = React5.useMemo(() => {
+    const rowKeys = Array.from(
+      new Set(
+        config.data.flatMap((row) => Object.keys(row))
+      )
+    );
+    const findAccessor = (label) => {
+      const exact = rowKeys.find((key) => key === label);
+      if (exact) return exact;
+      const normalisedLabel = normaliseFieldName(label);
+      const normalisedMatch = rowKeys.find((key) => normaliseFieldName(key) === normalisedLabel);
+      if (normalisedMatch) return normalisedMatch;
+      return label;
+    };
     if (Array.isArray(config.columns) && config.columns.length) {
-      return config.columns;
+      return config.columns.map((label) => ({
+        label: formatColumnLabel(label),
+        accessor: findAccessor(label)
+      }));
     }
     if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
-      if (config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)) {
-        return [config.xAxisKey, ...config.dataKeys];
-      }
-      return config.dataKeys;
+      const keys = config.xAxisKey && !config.dataKeys.includes(config.xAxisKey) ? [config.xAxisKey, ...config.dataKeys] : config.dataKeys;
+      return keys.map((key) => ({
+        label: formatColumnLabel(key),
+        accessor: findAccessor(key)
+      }));
     }
-    if (config.data.length > 0) return Object.keys(config.data[0]);
-    return [];
+    return rowKeys.map((key) => ({ label: formatColumnLabel(key), accessor: key }));
   }, [config]);
-  if (!config.data.length || !keys.length) {
+  if (!config.data.length || !columns.length) {
     return /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-400 italic my-2" }, "No data to display.");
   }
   const formatCell = (val) => {
@@ -462,26 +494,26 @@ function DataTable({ config, viewportSize = "large" }) {
     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 ${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(
+  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, columns.map((column) => /* @__PURE__ */ React5.createElement(
     "th",
     {
-      key: k,
+      key: column.label,
       className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap`
     },
-    k
+    column.label
   )))), /* @__PURE__ */ React5.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ React5.createElement(
     "tr",
     {
       key: ri,
       className: "border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
     },
-    keys.map((k) => /* @__PURE__ */ React5.createElement(
+    columns.map((column) => /* @__PURE__ */ React5.createElement(
       "td",
       {
-        key: k,
-        className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} text-slate-600 dark:text-white/70 whitespace-nowrap`
+        key: column.label,
+        className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} text-slate-600 dark:text-white/70 ${column.accessor.toLowerCase().includes("description") ? "whitespace-normal break-words" : "whitespace-nowrap"}`
       },
-      formatCell(row[k])
+      formatCell(row[column.accessor])
     ))
   ))))), /* @__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" : "")));
 }
@@ -678,6 +710,7 @@ function MessageBubble({
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = React5.useMemo(() => {
     let raw = cleanContent || message.content;
+    const hasStructuredUiBlock = /```(?: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) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
@@ -693,6 +726,9 @@ ${match.trim()}
 `;
       });
     }
+    if (hasStructuredUiBlock) {
+      raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
+    }
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
         return `

package/dist/server.js

@@ -3933,7 +3933,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "chartType": "pie" | "bar" | "line",
      "xAxisKey": "label",
      "dataKeys": ["value"],
-     "columns": ["name", "category", "price", "stockStatus"],
+     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
      "insights": ["Short takeaway 1", "Short takeaway 2"],
      "data": []
    }
@@ -3946,7 +3946,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
    - 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.
+   - For tables, keep "data" row-oriented and include "columns" only as dynamic field keys/order hints from the fetched data, never as hardcoded UI labels.
 
 4. FORMAT RULES
    - Never use ASCII art, markdown tables as the primary answer, or text-only fake charts when a UI block is requested.

package/dist/server.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.5.8",
+  "version": "1.6.0",
   "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/components/DynamicChart.tsx

@@ -64,13 +64,11 @@ export function DynamicChart({
       : isMedium
         ? 'h-64 min-h-[250px]'
         : 'h-72 min-h-[280px]';
-  const pieOuterRadius = isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
-  const pieLabel = ({ name, percent }: { name?: string; percent?: number }) =>
-    isTiny
-      ? ''
-      : isCompact
-      ? `${name}`
-      : `${name} ${((percent ?? 0) * 100).toFixed(0)}%`;
+  const pieOuterRadius = (() => {
+    if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
+    const squareSize = Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280);
+    return Math.max(36, Math.floor(squareSize * 0.28));
+  })();
   const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: '#64748b' };
   const showLegend = !isTiny;
   const truncateAxisLabel = (value: string | number) => {
@@ -235,25 +233,28 @@ export function DynamicChart({
   if (type === 'pie') {
     return (
       <div ref={containerRef} className={`w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden`}>
-        <ResponsiveContainer width="100%" height="100%">
-          <PieChart>
-            <Pie
-              data={sanitizedData}
-              dataKey={pieDataKey}
-              nameKey={finalXKey}
-              cx="50%"
-              cy="50%"
-              outerRadius={pieOuterRadius}
-              label={isTiny ? false : pieLabel}
-            >
-              {sanitizedData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={stockAwareColor(entry, index)} />
-              ))}
-            </Pie>
-            <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} />
-            {showLegend && <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} />}
-          </PieChart>
-        </ResponsiveContainer>
+        <div className="mx-auto h-full aspect-square max-w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={sanitizedData}
+                dataKey={pieDataKey}
+                nameKey={finalXKey}
+                cx="50%"
+                cy="50%"
+                outerRadius={pieOuterRadius}
+                label={false}
+                labelLine={false}
+              >
+                {sanitizedData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={stockAwareColor(entry, index)} />
+                ))}
+              </Pie>
+              <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} />
+              {showLegend && !isCompact && <Legend wrapperStyle={{ fontSize: 12 }} verticalAlign="bottom" />}
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
       </div>
     );
   }

package/src/components/MessageBubble.tsx

@@ -106,6 +106,13 @@ function looksLikeStructuredPayload(raw: string): boolean {
   return /"(view|chartType|type|data|items|rows|products|results)"\s*:/.test(raw);
 }
 
+function stripMarkdownTables(raw: string): string {
+  return raw.replace(
+    /(?:^|\n)\|[^\n]+\|\n\|(?:\s*:?-+:?\s*\|)+\n(?:\|[^\n]*\|\n?)*/g,
+    '\n\n',
+  );
+}
+
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
@@ -132,6 +139,19 @@ function normaliseChild(children: React.ReactNode): React.ReactNode {
   return children;
 }
 
+function normaliseFieldName(value: string): string {
+  return value.toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+
+function formatColumnLabel(value: string): string {
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
 // ─── Inline data table renderer ───────────────────────────────────────────────
 // Handles chart configs where type === "table". The LLM may emit any of:
 //   columns, dataKeys (+optional xAxisKey), or no key hints (auto-detect from row).
@@ -149,24 +169,46 @@ interface TableConfig {
 function DataTable({ config, viewportSize = 'large' }: { config: TableConfig; viewportSize?: ChatViewportSize }) {
   const isCompact = viewportSize === 'compact';
   const isMedium = viewportSize === 'medium';
-  const keys = React.useMemo<string[]>(() => {
-    // Priority 1: explicit columns list
+  const columns = React.useMemo<Array<{ label: string; accessor: string }>>(() => {
+    const rowKeys = Array.from(
+      new Set(
+        config.data.flatMap((row) => Object.keys(row)),
+      ),
+    );
+
+    const findAccessor = (label: string) => {
+      const exact = rowKeys.find((key) => key === label);
+      if (exact) return exact;
+
+      const normalisedLabel = normaliseFieldName(label);
+      const normalisedMatch = rowKeys.find((key) => normaliseFieldName(key) === normalisedLabel);
+      if (normalisedMatch) return normalisedMatch;
+
+      return label;
+    };
+
     if (Array.isArray(config.columns) && config.columns.length) {
-      return config.columns;
+      return config.columns.map((label) => ({
+        label: formatColumnLabel(label),
+        accessor: findAccessor(label),
+      }));
     }
-    // Priority 2: dataKeys, with xAxisKey prepended if not already present
+
     if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
-      if (config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)) {
-        return [config.xAxisKey, ...config.dataKeys];
-      }
-      return config.dataKeys;
+      const keys = config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)
+        ? [config.xAxisKey, ...config.dataKeys]
+        : config.dataKeys;
+
+      return keys.map((key) => ({
+        label: formatColumnLabel(key),
+        accessor: findAccessor(key),
+      }));
     }
-    // Priority 3: auto-detect from first data row
-    if (config.data.length > 0) return Object.keys(config.data[0]);
-    return [];
+
+    return rowKeys.map((key) => ({ label: formatColumnLabel(key), accessor: key }));
   }, [config]);
 
-  if (!config.data.length || !keys.length) {
+  if (!config.data.length || !columns.length) {
     return <p className="text-xs text-slate-400 italic my-2">No data to display.</p>;
   }
 
@@ -190,12 +232,12 @@ function DataTable({ config, viewportSize = 'large' }: { config: TableConfig; vi
         <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'}`}>
           <thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
             <tr>
-              {keys.map(k => (
+              {columns.map((column) => (
                 <th
-                  key={k}
+                  key={column.label}
                   className={`${isCompact ? 'px-2.5 py-2' : 'px-4 py-3'} font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap`}
                 >
-                  {k}
+                  {column.label}
                 </th>
               ))}
             </tr>
@@ -206,12 +248,12 @@ function DataTable({ config, viewportSize = 'large' }: { config: TableConfig; vi
                 key={ri}
                 className="border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
               >
-                {keys.map(k => (
+                {columns.map((column) => (
                   <td
-                    key={k}
-                    className={`${isCompact ? 'px-2.5 py-2' : 'px-4 py-3'} text-slate-600 dark:text-white/70 whitespace-nowrap`}
+                    key={column.label}
+                    className={`${isCompact ? 'px-2.5 py-2' : 'px-4 py-3'} text-slate-600 dark:text-white/70 ${column.accessor.toLowerCase().includes('description') ? 'whitespace-normal break-words' : 'whitespace-nowrap'}`}
                   >
-                    {formatCell(row[k])}
+                    {formatCell(row[column.accessor])}
                   </td>
                 ))}
               </tr>
@@ -533,6 +575,7 @@ export function MessageBubble({
 
   const processedMarkdown = React.useMemo(() => {
     let raw = cleanContent || message.content;
+    const hasStructuredUiBlock = /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     
     // 1. Structural fixes
     raw = raw.replace(/([^\n])\n\|/g, '$1\n\n|') // Ensure blank line before table
@@ -553,6 +596,14 @@ export function MessageBubble({
       });
     }
 
+    // 2b. If the model already provided a structured UI block, suppress duplicated
+    // markdown tables that often follow as a fallback explanation.
+    if (hasStructuredUiBlock) {
+      raw = stripMarkdownTables(raw)
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    }
+
     // 3. HIJACKING: If streaming, hide table-like content to prevent raw markdown flashing.
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {

package/src/core/Pipeline.ts

@@ -119,7 +119,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "chartType": "pie" | "bar" | "line",
      "xAxisKey": "label",
      "dataKeys": ["value"],
-     "columns": ["name", "category", "price", "stockStatus"],
+     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
      "insights": ["Short takeaway 1", "Short takeaway 2"],
      "data": []
    }
@@ -132,7 +132,7 @@ When the user asks for a visual representation, comparison, distribution, breakd
    - 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.
+   - For tables, keep "data" row-oriented and include "columns" only as dynamic field keys/order hints from the fetched data, never as hardcoded UI labels.
 
 4. FORMAT RULES
    - Never use ASCII art, markdown tables as the primary answer, or text-only fake charts when a UI block is requested.