@retrivora-ai/rag-engine 1.5.9 → 1.6.1

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

@@ -247,10 +247,19 @@ function DynamicChart({
   const isTiny = containerWidth > 0 && containerWidth < 300;
   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 pieCanvasMaxWidthClass = isTiny ? "max-w-[11rem]" : isCompact ? "max-w-[14rem]" : isMedium ? "max-w-[16rem]" : "max-w-[18rem]";
-  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 chartHeight = (() => {
+    if (type === "pie") {
+      if (containerWidth <= 0) return isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280;
+      return Math.max(180, Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280));
+    }
+    if (containerWidth <= 0) return isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300;
+    return Math.max(190, Math.min(Math.round(containerWidth * 0.7), isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300));
+  })();
+  const pieOuterRadius = (() => {
+    if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
+    const squareSize = Math.min(containerWidth, chartHeight);
+    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) => {
@@ -358,41 +367,58 @@ 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("div", { className: `mx-auto h-full w-full ${pieCanvasMaxWidthClass}` }, /* @__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,
+    return /* @__PURE__ */ import_react4.default.createElement(
+      "div",
       {
-        data: sanitizedData,
-        dataKey: pieDataKey,
-        nameKey: finalXKey,
-        cx: "50%",
-        cy: "50%",
-        outerRadius: pieOuterRadius,
-        label: isTiny ? false : pieLabel
+        ref: containerRef,
+        className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
+        style: { height: chartHeight }
       },
-      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 }, verticalAlign: "bottom" })))));
+      /* @__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,
+          dataKey: pieDataKey,
+          nameKey: finalXKey,
+          cx: "50%",
+          cy: "50%",
+          outerRadius: pieOuterRadius,
+          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 && !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,
-    {
-      key,
-      dataKey: key,
-      fill: colors[index % colors.length],
-      radius: [4, 4, 0, 0],
-      barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
-    }
-  ))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { 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) }), 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.Line,
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "div",
     {
-      key,
-      type: "monotone",
-      dataKey: key,
-      stroke: colors[index % colors.length],
-      strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
-      dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
-      activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
-    }
-  )))));
+      ref: containerRef,
+      className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
+      style: { height: chartHeight }
+    },
+    /* @__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,
+      {
+        key,
+        dataKey: key,
+        fill: colors[index % colors.length],
+        radius: [4, 4, 0, 0],
+        barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
+      }
+    ))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { 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) }), 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.Line,
+      {
+        key,
+        type: "monotone",
+        dataKey: key,
+        stroke: colors[index % colors.length],
+        strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
+        dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
+        activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
+      }
+    ))))
+  );
 }
 
 // src/components/MessageBubble.tsx
@@ -466,6 +492,15 @@ function stripMarkdownTables(raw) {
     "\n\n"
   );
 }
+function stripStructuredUiLabels(raw) {
+  return raw.replace(
+    /(?:^|\n)\*\*(?:Chart Data|Table Data|Visualization|Visual Representation)\*\:\s*(?=\n|$)/gi,
+    "\n"
+  ).replace(
+    /(?:^|\n)(?:Chart Data|Table Data|Visualization|Visual Representation)\s*\:\s*(?=\n|$)/gi,
+    "\n"
+  );
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -482,23 +517,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) => {
@@ -506,26 +563,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" : "")));
 }
@@ -739,7 +796,7 @@ ${match.trim()}
       });
     }
     if (hasStructuredUiBlock) {
-      raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
+      raw = stripStructuredUiLabels(stripMarkdownTables(raw)).replace(/\n{3,}/g, "\n\n").trim();
     }
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
@@ -853,6 +910,22 @@ ${match.trim()}
             );
           }
         }
+        if (!inline) {
+          const content = String(children != null ? children : "").trim();
+          if (looksLikeStructuredPayload(content)) {
+            return /* @__PURE__ */ import_react5.default.createElement(
+              UIDispatcher,
+              {
+                rawContent: content,
+                primaryColor,
+                accentColor,
+                isStreaming,
+                onAddToCart,
+                viewportSize
+              }
+            );
+          }
+        }
         if (!inline && lang === "table-loading") {
           return /* @__PURE__ */ import_react5.default.createElement("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" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
         }

package/dist/index.mjs

@@ -210,10 +210,19 @@ function DynamicChart({
   const isTiny = containerWidth > 0 && containerWidth < 300;
   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 pieCanvasMaxWidthClass = isTiny ? "max-w-[11rem]" : isCompact ? "max-w-[14rem]" : isMedium ? "max-w-[16rem]" : "max-w-[18rem]";
-  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 chartHeight = (() => {
+    if (type === "pie") {
+      if (containerWidth <= 0) return isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280;
+      return Math.max(180, Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280));
+    }
+    if (containerWidth <= 0) return isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300;
+    return Math.max(190, Math.min(Math.round(containerWidth * 0.7), isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300));
+  })();
+  const pieOuterRadius = (() => {
+    if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
+    const squareSize = Math.min(containerWidth, chartHeight);
+    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) => {
@@ -321,41 +330,58 @@ 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("div", { className: `mx-auto h-full w-full ${pieCanvasMaxWidthClass}` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
-      Pie,
+    return /* @__PURE__ */ React4.createElement(
+      "div",
       {
-        data: sanitizedData,
-        dataKey: pieDataKey,
-        nameKey: finalXKey,
-        cx: "50%",
-        cy: "50%",
-        outerRadius: pieOuterRadius,
-        label: isTiny ? false : pieLabel
+        ref: containerRef,
+        className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
+        style: { height: chartHeight }
       },
-      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 }, verticalAlign: "bottom" })))));
+      /* @__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,
+          dataKey: pieDataKey,
+          nameKey: finalXKey,
+          cx: "50%",
+          cy: "50%",
+          outerRadius: pieOuterRadius,
+          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 && !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,
-    {
-      key,
-      dataKey: key,
-      fill: colors[index % colors.length],
-      radius: [4, 4, 0, 0],
-      barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
-    }
-  ))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
-    Line,
+  return /* @__PURE__ */ React4.createElement(
+    "div",
     {
-      key,
-      type: "monotone",
-      dataKey: key,
-      stroke: colors[index % colors.length],
-      strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
-      dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
-      activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
-    }
-  )))));
+      ref: containerRef,
+      className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
+      style: { height: chartHeight }
+    },
+    /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+      Bar,
+      {
+        key,
+        dataKey: key,
+        fill: colors[index % colors.length],
+        radius: [4, 4, 0, 0],
+        barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
+      }
+    ))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+      Line,
+      {
+        key,
+        type: "monotone",
+        dataKey: key,
+        stroke: colors[index % colors.length],
+        strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
+        dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
+        activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
+      }
+    ))))
+  );
 }
 
 // src/components/MessageBubble.tsx
@@ -429,6 +455,15 @@ function stripMarkdownTables(raw) {
     "\n\n"
   );
 }
+function stripStructuredUiLabels(raw) {
+  return raw.replace(
+    /(?:^|\n)\*\*(?:Chart Data|Table Data|Visualization|Visual Representation)\*\:\s*(?=\n|$)/gi,
+    "\n"
+  ).replace(
+    /(?:^|\n)(?:Chart Data|Table Data|Visualization|Visual Representation)\s*\:\s*(?=\n|$)/gi,
+    "\n"
+  );
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -445,23 +480,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) => {
@@ -469,26 +526,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" : "")));
 }
@@ -702,7 +759,7 @@ ${match.trim()}
       });
     }
     if (hasStructuredUiBlock) {
-      raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
+      raw = stripStructuredUiLabels(stripMarkdownTables(raw)).replace(/\n{3,}/g, "\n\n").trim();
     }
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
@@ -816,6 +873,22 @@ ${match.trim()}
             );
           }
         }
+        if (!inline) {
+          const content = String(children != null ? children : "").trim();
+          if (looksLikeStructuredPayload(content)) {
+            return /* @__PURE__ */ React5.createElement(
+              UIDispatcher,
+              {
+                rawContent: content,
+                primaryColor,
+                accentColor,
+                isStreaming,
+                onAddToCart,
+                viewportSize
+              }
+            );
+          }
+        }
         if (!inline && lang === "table-loading") {
           return /* @__PURE__ */ React5.createElement("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" }, /* @__PURE__ */ React5.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
         }

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.9",
+  "version": "1.6.1",
   "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

@@ -57,27 +57,20 @@ export function DynamicChart({
   const isTiny = containerWidth > 0 && containerWidth < 300;
   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 pieCanvasMaxWidthClass = isTiny
-    ? 'max-w-[11rem]'
-    : isCompact
-      ? 'max-w-[14rem]'
-      : isMedium
-        ? 'max-w-[16rem]'
-        : 'max-w-[18rem]';
-  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 chartHeight = (() => {
+    if (type === 'pie') {
+      if (containerWidth <= 0) return isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280;
+      return Math.max(180, Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280));
+    }
+
+    if (containerWidth <= 0) return isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300;
+    return Math.max(190, Math.min(Math.round(containerWidth * 0.7), isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300));
+  })();
+  const pieOuterRadius = (() => {
+    if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
+    const squareSize = Math.min(containerWidth, chartHeight);
+    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) => {
@@ -241,8 +234,12 @@ export function DynamicChart({
   // Handle Pie Chart separately as it has a different structure
   if (type === 'pie') {
     return (
-      <div ref={containerRef} className={`w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden`}>
-        <div className={`mx-auto h-full w-full ${pieCanvasMaxWidthClass}`}>
+      <div
+        ref={containerRef}
+        className="w-full min-w-0 mt-4 mb-2 select-none overflow-hidden"
+        style={{ height: chartHeight }}
+      >
+        <div className="mx-auto h-full aspect-square max-w-full">
           <ResponsiveContainer width="100%" height="100%">
             <PieChart>
               <Pie
@@ -252,14 +249,15 @@ export function DynamicChart({
                 cx="50%"
                 cy="50%"
                 outerRadius={pieOuterRadius}
-                label={isTiny ? false : pieLabel}
+                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 && <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} verticalAlign="bottom" />}
+              {showLegend && !isCompact && <Legend wrapperStyle={{ fontSize: 12 }} verticalAlign="bottom" />}
             </PieChart>
           </ResponsiveContainer>
         </div>
@@ -269,7 +267,11 @@ export function DynamicChart({
 
   // Bar and Line charts
   return (
-    <div ref={containerRef} className={`w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden`}>
+    <div
+      ref={containerRef}
+      className="w-full min-w-0 mt-4 mb-2 select-none overflow-hidden"
+      style={{ height: chartHeight }}
+    >
       <ResponsiveContainer width="100%" height="100%">
         {type === 'bar' ? (
           <BarChart data={sanitizedData} margin={chartMargin}>

package/src/components/MessageBubble.tsx

@@ -113,6 +113,16 @@ function stripMarkdownTables(raw: string): string {
   );
 }
 
+function stripStructuredUiLabels(raw: string): string {
+  return raw.replace(
+    /(?:^|\n)\*\*(?:Chart Data|Table Data|Visualization|Visual Representation)\*\:\s*(?=\n|$)/gi,
+    '\n',
+  ).replace(
+    /(?:^|\n)(?:Chart Data|Table Data|Visualization|Visual Representation)\s*\:\s*(?=\n|$)/gi,
+    '\n',
+  );
+}
+
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
@@ -139,6 +149,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).
@@ -156,24 +179,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>;
   }
 
@@ -197,12 +242,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>
@@ -213,12 +258,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>
@@ -564,7 +609,7 @@ 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)
+      raw = stripStructuredUiLabels(stripMarkdownTables(raw))
         .replace(/\n{3,}/g, '\n\n')
         .trim();
     }
@@ -675,6 +720,22 @@ export function MessageBubble({
           }
         }
 
+        if (!inline) {
+          const content = String(children ?? '').trim();
+          if (looksLikeStructuredPayload(content)) {
+            return (
+              <UIDispatcher
+                rawContent={content}
+                primaryColor={primaryColor}
+                accentColor={accentColor}
+                isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
+                viewportSize={viewportSize}
+              />
+            );
+          }
+        }
+
         if (!inline && lang === 'table-loading') {
           return (
             <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">

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.