@retrivora-ai/rag-engine 1.6.0 → 1.6.2

package/dist/index.js

@@ -247,12 +247,7 @@ 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 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 pieOuterRadius = isTiny ? "54%" : isCompact ? "60%" : isMedium ? "66%" : "72%";
   const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
   const showLegend = !isTiny;
   const truncateAxisLabel = (value) => {
@@ -360,7 +355,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("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(
+    return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__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,
@@ -375,7 +370,7 @@ function DynamicChart({
       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(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__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,
@@ -395,7 +390,7 @@ function DynamicChart({
       dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
       activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
     }
-  )))));
+  ))))));
 }
 
 // src/components/MessageBubble.tsx
@@ -469,6 +464,72 @@ 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 extractBareJsonObject(raw) {
+  const start = raw.indexOf("{");
+  if (start === -1) return null;
+  let depth = 0;
+  let inString = false;
+  let escape = false;
+  for (let i = start; i < raw.length; i += 1) {
+    const ch = raw[i];
+    if (escape) {
+      escape = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escape = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") depth += 1;
+    if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return raw.slice(start, i + 1);
+      }
+    }
+  }
+  return null;
+}
+function extractStructuredPayload(raw) {
+  var _a, _b;
+  let working = raw;
+  const fenceRegex = /```(?:[a-z]+)?\s*([\s\S]*?)```/gi;
+  for (const match of raw.matchAll(fenceRegex)) {
+    const body = (_b = (_a = match[1]) == null ? void 0 : _a.trim()) != null ? _b : "";
+    if (!looksLikeStructuredPayload(body)) continue;
+    working = working.replace(match[0], "");
+    return {
+      payload: body,
+      text: stripStructuredUiLabels(working).replace(/\n{3,}/g, "\n\n").trim()
+    };
+  }
+  const bareJson = extractBareJsonObject(raw);
+  if (bareJson && looksLikeStructuredPayload(bareJson)) {
+    working = working.replace(bareJson, "");
+    return {
+      payload: bareJson,
+      text: stripStructuredUiLabels(working).replace(/\n{3,}/g, "\n\n").trim()
+    };
+  }
+  return {
+    payload: null,
+    text: stripStructuredUiLabels(raw).replace(/\n{3,}/g, "\n\n").trim()
+  };
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -681,6 +742,10 @@ function MessageBubble({
     () => /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|type)"\s*:\s*"(?:carousel|products)"/i.test(message.content),
     [message.content]
   );
+  const structuredContent = import_react5.default.useMemo(
+    () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
+    [isUser, message.content]
+  );
   const productsFromSources = import_react5.default.useMemo(() => {
     if (isUser || !sources) return [];
     return sources.filter((s) => {
@@ -705,13 +770,31 @@ function MessageBubble({
     if (isUser) {
       return { productsFromContent: [], cleanContent: message.content };
     }
-    const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
+    const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
     const products = [];
-    let content = message.content;
+    let content = structuredContent.text;
+    const payloadCandidates = [structuredContent.payload, ...content.matchAll(jsonRegex).map((match) => match[1])].filter(Boolean);
+    for (const candidate of payloadCandidates) {
+      try {
+        const data = JSON.parse(sanitizeJson(candidate));
+        const itemSet = Array.isArray(data.items) ? data.items : Array.isArray(data.products) ? data.products : null;
+        if ((data.type === "products" || data.view === "carousel" || data.view === "table" || Array.isArray(data.products)) && itemSet) {
+          products.push(
+            ...itemSet.map((item) => {
+              var _a;
+              return __spreadProps(__spreadValues({}, item), {
+                image: (_a = item.image) != null ? _a : resolveImage(item)
+              });
+            })
+          );
+        }
+      } catch (e) {
+      }
+    }
     if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
       for (const match of content.matchAll(jsonRegex)) {
         try {
-          const data = JSON.parse(match[1]);
+          const data = JSON.parse(sanitizeJson(match[1]));
           if (data.type === "products" && Array.isArray(data.items)) {
             products.push(
               ...data.items.map((item) => {
@@ -728,7 +811,7 @@ function MessageBubble({
       }
     }
     return { productsFromContent: products, cleanContent: content.trim() };
-  }, [message.content, isUser]);
+  }, [message.content, isUser, structuredContent]);
   const allProducts = import_react5.default.useMemo(() => {
     if (productsFromContent.length > 0) return productsFromContent;
     const seen = /* @__PURE__ */ new Set();
@@ -746,8 +829,8 @@ 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);
+    let raw = structuredContent.payload ? structuredContent.text : cleanContent || message.content;
+    const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
     if (!isStreaming) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
@@ -764,7 +847,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) => {
@@ -778,7 +861,7 @@ ${match.trim()}
       });
     }
     return raw;
-  }, [cleanContent, message.content, isStreaming]);
+  }, [cleanContent, message.content, isStreaming, structuredContent]);
   const markdownComponents = import_react5.default.useMemo(
     () => ({
       // Wrap in not-prose so Tailwind Typography resets don't clobber our styles.
@@ -878,6 +961,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..."));
         }
@@ -899,7 +998,17 @@ ${match.trim()}
       className: `relative ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
       style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
     },
-    isStreaming && !message.content ? /* @__PURE__ */ import_react5.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ import_react5.default.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ import_react5.default.createElement(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ import_react5.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
+    isStreaming && !message.content ? /* @__PURE__ */ import_react5.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ import_react5.default.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, !isUser && structuredContent.payload && /* @__PURE__ */ import_react5.default.createElement(
+      UIDispatcher,
+      {
+        rawContent: structuredContent.payload,
+        primaryColor,
+        accentColor,
+        isStreaming,
+        onAddToCart,
+        viewportSize
+      }
+    ), /* @__PURE__ */ import_react5.default.createElement(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ import_react5.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
   ), !isUser && !hasStructuredProductBlock && allProducts.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react5.default.createElement(
     ProductCarousel,
     {

package/dist/index.mjs

@@ -210,12 +210,7 @@ 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 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 pieOuterRadius = isTiny ? "54%" : isCompact ? "60%" : isMedium ? "66%" : "72%";
   const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
   const showLegend = !isTiny;
   const truncateAxisLabel = (value) => {
@@ -323,7 +318,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("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(
+    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
       Pie,
       {
         data: sanitizedData,
@@ -338,7 +333,7 @@ function DynamicChart({
       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(
+  return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Bar,
     {
       key,
@@ -358,7 +353,7 @@ function DynamicChart({
       dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
       activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
     }
-  )))));
+  ))))));
 }
 
 // src/components/MessageBubble.tsx
@@ -432,6 +427,72 @@ 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 extractBareJsonObject(raw) {
+  const start = raw.indexOf("{");
+  if (start === -1) return null;
+  let depth = 0;
+  let inString = false;
+  let escape = false;
+  for (let i = start; i < raw.length; i += 1) {
+    const ch = raw[i];
+    if (escape) {
+      escape = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escape = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") depth += 1;
+    if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return raw.slice(start, i + 1);
+      }
+    }
+  }
+  return null;
+}
+function extractStructuredPayload(raw) {
+  var _a, _b;
+  let working = raw;
+  const fenceRegex = /```(?:[a-z]+)?\s*([\s\S]*?)```/gi;
+  for (const match of raw.matchAll(fenceRegex)) {
+    const body = (_b = (_a = match[1]) == null ? void 0 : _a.trim()) != null ? _b : "";
+    if (!looksLikeStructuredPayload(body)) continue;
+    working = working.replace(match[0], "");
+    return {
+      payload: body,
+      text: stripStructuredUiLabels(working).replace(/\n{3,}/g, "\n\n").trim()
+    };
+  }
+  const bareJson = extractBareJsonObject(raw);
+  if (bareJson && looksLikeStructuredPayload(bareJson)) {
+    working = working.replace(bareJson, "");
+    return {
+      payload: bareJson,
+      text: stripStructuredUiLabels(working).replace(/\n{3,}/g, "\n\n").trim()
+    };
+  }
+  return {
+    payload: null,
+    text: stripStructuredUiLabels(raw).replace(/\n{3,}/g, "\n\n").trim()
+  };
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -644,6 +705,10 @@ function MessageBubble({
     () => /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|type)"\s*:\s*"(?:carousel|products)"/i.test(message.content),
     [message.content]
   );
+  const structuredContent = React5.useMemo(
+    () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
+    [isUser, message.content]
+  );
   const productsFromSources = React5.useMemo(() => {
     if (isUser || !sources) return [];
     return sources.filter((s) => {
@@ -668,13 +733,31 @@ function MessageBubble({
     if (isUser) {
       return { productsFromContent: [], cleanContent: message.content };
     }
-    const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
+    const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
     const products = [];
-    let content = message.content;
+    let content = structuredContent.text;
+    const payloadCandidates = [structuredContent.payload, ...content.matchAll(jsonRegex).map((match) => match[1])].filter(Boolean);
+    for (const candidate of payloadCandidates) {
+      try {
+        const data = JSON.parse(sanitizeJson(candidate));
+        const itemSet = Array.isArray(data.items) ? data.items : Array.isArray(data.products) ? data.products : null;
+        if ((data.type === "products" || data.view === "carousel" || data.view === "table" || Array.isArray(data.products)) && itemSet) {
+          products.push(
+            ...itemSet.map((item) => {
+              var _a;
+              return __spreadProps(__spreadValues({}, item), {
+                image: (_a = item.image) != null ? _a : resolveImage(item)
+              });
+            })
+          );
+        }
+      } catch (e) {
+      }
+    }
     if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
       for (const match of content.matchAll(jsonRegex)) {
         try {
-          const data = JSON.parse(match[1]);
+          const data = JSON.parse(sanitizeJson(match[1]));
           if (data.type === "products" && Array.isArray(data.items)) {
             products.push(
               ...data.items.map((item) => {
@@ -691,7 +774,7 @@ function MessageBubble({
       }
     }
     return { productsFromContent: products, cleanContent: content.trim() };
-  }, [message.content, isUser]);
+  }, [message.content, isUser, structuredContent]);
   const allProducts = React5.useMemo(() => {
     if (productsFromContent.length > 0) return productsFromContent;
     const seen = /* @__PURE__ */ new Set();
@@ -709,8 +792,8 @@ 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);
+    let raw = structuredContent.payload ? structuredContent.text : cleanContent || message.content;
+    const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
     if (!isStreaming) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
@@ -727,7 +810,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) => {
@@ -741,7 +824,7 @@ ${match.trim()}
       });
     }
     return raw;
-  }, [cleanContent, message.content, isStreaming]);
+  }, [cleanContent, message.content, isStreaming, structuredContent]);
   const markdownComponents = React5.useMemo(
     () => ({
       // Wrap in not-prose so Tailwind Typography resets don't clobber our styles.
@@ -841,6 +924,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..."));
         }
@@ -862,7 +961,17 @@ ${match.trim()}
       className: `relative ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
       style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
     },
-    isStreaming && !message.content ? /* @__PURE__ */ React5.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ React5.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ React5.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React5.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
+    isStreaming && !message.content ? /* @__PURE__ */ React5.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ React5.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ React5.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, !isUser && structuredContent.payload && /* @__PURE__ */ React5.createElement(
+      UIDispatcher,
+      {
+        rawContent: structuredContent.payload,
+        primaryColor,
+        accentColor,
+        isStreaming,
+        onAddToCart,
+        viewportSize
+      }
+    ), /* @__PURE__ */ React5.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React5.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
   ), !isUser && !hasStructuredProductBlock && allProducts.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
     ProductCarousel,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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,18 +57,7 @@ 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 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 pieOuterRadius = isTiny ? '54%' : isCompact ? '60%' : isMedium ? '66%' : '72%';
   const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: '#64748b' };
   const showLegend = !isTiny;
   const truncateAxisLabel = (value: string | number) => {
@@ -232,8 +221,8 @@ 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 aspect-square max-w-full">
+      <div ref={containerRef} className="w-full min-w-0 mt-4 mb-2 select-none overflow-hidden">
+        <div className="mx-auto w-full max-w-full aspect-square">
           <ResponsiveContainer width="100%" height="100%">
             <PieChart>
               <Pie
@@ -261,7 +250,8 @@ 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">
+      <div className="w-full aspect-[4/3]">
       <ResponsiveContainer width="100%" height="100%">
         {type === 'bar' ? (
           <BarChart data={sanitizedData} margin={chartMargin}>
@@ -301,6 +291,7 @@ export function DynamicChart({
           </LineChart>
         )}
       </ResponsiveContainer>
+      </div>
     </div>
   );
 }

package/src/components/MessageBubble.tsx

@@ -113,6 +113,86 @@ 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',
+  );
+}
+
+function extractBareJsonObject(raw: string): string | null {
+  const start = raw.indexOf('{');
+  if (start === -1) return null;
+
+  let depth = 0;
+  let inString = false;
+  let escape = false;
+
+  for (let i = start; i < raw.length; i += 1) {
+    const ch = raw[i];
+
+    if (escape) {
+      escape = false;
+      continue;
+    }
+
+    if (ch === '\\' && inString) {
+      escape = true;
+      continue;
+    }
+
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+
+    if (inString) continue;
+
+    if (ch === '{') depth += 1;
+    if (ch === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        return raw.slice(start, i + 1);
+      }
+    }
+  }
+
+  return null;
+}
+
+function extractStructuredPayload(raw: string): { payload: string | null; text: string } {
+  let working = raw;
+  const fenceRegex = /```(?:[a-z]+)?\s*([\s\S]*?)```/gi;
+
+  for (const match of raw.matchAll(fenceRegex)) {
+    const body = match[1]?.trim() ?? '';
+    if (!looksLikeStructuredPayload(body)) continue;
+
+    working = working.replace(match[0], '');
+    return {
+      payload: body,
+      text: stripStructuredUiLabels(working).replace(/\n{3,}/g, '\n\n').trim(),
+    };
+  }
+
+  const bareJson = extractBareJsonObject(raw);
+  if (bareJson && looksLikeStructuredPayload(bareJson)) {
+    working = working.replace(bareJson, '');
+    return {
+      payload: bareJson,
+      text: stripStructuredUiLabels(working).replace(/\n{3,}/g, '\n\n').trim(),
+    };
+  }
+
+  return {
+    payload: null,
+    text: stripStructuredUiLabels(raw).replace(/\n{3,}/g, '\n\n').trim(),
+  };
+}
+
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
@@ -500,6 +580,10 @@ export function MessageBubble({
     () => /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|type)"\s*:\s*"(?:carousel|products)"/i.test(message.content),
     [message.content],
   );
+  const structuredContent = React.useMemo(
+    () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
+    [isUser, message.content],
+  );
 
   // ── Products from sources ──────────────────────────────────────────────────
   const productsFromSources = React.useMemo<Product[]>(() => {
@@ -529,14 +613,40 @@ export function MessageBubble({
       return { productsFromContent: [] as Product[], cleanContent: message.content };
     }
 
-    const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
+    const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
     const products: Product[] = [];
-    let content = message.content;
+    let content = structuredContent.text;
+
+    const payloadCandidates = [structuredContent.payload, ...content.matchAll(jsonRegex).map((match) => match[1])].filter(Boolean) as string[];
+
+    for (const candidate of payloadCandidates) {
+      try {
+        const data = JSON.parse(sanitizeJson(candidate));
+        const itemSet =
+          Array.isArray(data.items) ? data.items
+            : Array.isArray(data.products) ? data.products
+              : null;
+
+        if (
+          (data.type === 'products' || data.view === 'carousel' || data.view === 'table' || Array.isArray(data.products)) &&
+          itemSet
+        ) {
+          products.push(
+            ...itemSet.map((item: Record<string, unknown>) => ({
+              ...item,
+              image: (item.image as string) ?? resolveImage(item),
+            })) as Product[],
+          );
+        }
+      } catch {
+        // Ignore malformed product payloads
+      }
+    }
 
     if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
       for (const match of content.matchAll(jsonRegex)) {
         try {
-          const data = JSON.parse(match[1]);
+          const data = JSON.parse(sanitizeJson(match[1]));
           if (data.type === 'products' && Array.isArray(data.items)) {
             products.push(
               ...data.items.map((item: Record<string, unknown>) => ({
@@ -553,7 +663,7 @@ export function MessageBubble({
     }
 
     return { productsFromContent: products, cleanContent: content.trim() };
-  }, [message.content, isUser]);
+  }, [message.content, isUser, structuredContent]);
 
   // ── Merge & deduplicate products ───────────────────────────────────────────
   const allProducts = React.useMemo<Product[]>(() => {
@@ -574,8 +684,8 @@ export function MessageBubble({
   }, [productsFromSources, productsFromContent, message.content]);
 
   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);
+    let raw = structuredContent.payload ? structuredContent.text : (cleanContent || message.content);
+    const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?: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
@@ -599,7 +709,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();
     }
@@ -612,7 +722,7 @@ export function MessageBubble({
     }
 
     return raw;
-  }, [cleanContent, message.content, isStreaming]);
+  }, [cleanContent, message.content, isStreaming, structuredContent]);
 
   // ── Markdown component overrides ───────────────────────────────────────────
   const markdownComponents = React.useMemo(
@@ -710,6 +820,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">
@@ -766,6 +892,17 @@ export function MessageBubble({
             </span>
           ) : (
             <div className={`prose ${isCompact ? 'prose-xs' : 'prose-sm'} max-w-none break-words ${isUser ? 'prose-invert' : 'dark:prose-invert'}`}>
+              {!isUser && structuredContent.payload && (
+                <UIDispatcher
+                  rawContent={structuredContent.payload}
+                  primaryColor={primaryColor}
+                  accentColor={accentColor}
+                  isStreaming={isStreaming}
+                  onAddToCart={onAddToCart}
+                  viewportSize={viewportSize}
+                />
+              )}
+
               <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
                 {processedMarkdown}
               </ReactMarkdown>