@retrivora-ai/rag-engine 1.5.8 → 1.5.9

package/dist/index.js

@@ -248,6 +248,7 @@ function DynamicChart({
   const isCompact = viewportSize === "compact" || containerWidth > 0 && containerWidth < 420;
   const isMedium = !isCompact && (viewportSize === "medium" || containerWidth > 0 && containerWidth < 640);
   const chartHeightClass = isTiny ? "h-48 min-h-[180px]" : isCompact ? "h-56 min-h-[220px]" : isMedium ? "h-64 min-h-[250px]" : "h-72 min-h-[280px]";
+  const 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 axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
@@ -357,7 +358,7 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ import_react4.default.createElement("div", { className: `mx-auto h-full 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,
       {
         data: sanitizedData,
@@ -369,7 +370,7 @@ function DynamicChart({
         label: isTiny ? false : pieLabel
       },
       sanitizedData.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
-    ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }))));
+    ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 }, verticalAlign: "bottom" })))));
   }
   return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
     import_recharts.Bar,
@@ -459,6 +460,12 @@ function extractLikelyJsonBlock(raw) {
 function looksLikeStructuredPayload(raw) {
   return /"(view|chartType|type|data|items|rows|products|results)"\s*:/.test(raw);
 }
+function stripMarkdownTables(raw) {
+  return raw.replace(
+    /(?:^|\n)\|[^\n]+\|\n\|(?:\s*:?-+:?\s*\|)+\n(?:\|[^\n]*\|\n?)*/g,
+    "\n\n"
+  );
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -715,6 +722,7 @@ function MessageBubble({
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = import_react5.default.useMemo(() => {
     let raw = cleanContent || message.content;
+    const hasStructuredUiBlock = /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
     if (!isStreaming) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
@@ -730,6 +738,9 @@ ${match.trim()}
 `;
       });
     }
+    if (hasStructuredUiBlock) {
+      raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
+    }
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
         return `

package/dist/index.mjs

@@ -211,6 +211,7 @@ function DynamicChart({
   const isCompact = viewportSize === "compact" || containerWidth > 0 && containerWidth < 420;
   const isMedium = !isCompact && (viewportSize === "medium" || containerWidth > 0 && containerWidth < 640);
   const chartHeightClass = isTiny ? "h-48 min-h-[180px]" : isCompact ? "h-56 min-h-[220px]" : isMedium ? "h-64 min-h-[250px]" : "h-72 min-h-[280px]";
+  const 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 axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
@@ -320,7 +321,7 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement("div", { className: `mx-auto h-full w-full ${pieCanvasMaxWidthClass}` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
       Pie,
       {
         data: sanitizedData,
@@ -332,7 +333,7 @@ function DynamicChart({
         label: isTiny ? false : pieLabel
       },
       sanitizedData.map((entry, index) => /* @__PURE__ */ React4.createElement(Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
-    ), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }))));
+    ), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 }, verticalAlign: "bottom" })))));
   }
   return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: `w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden` }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Bar,
@@ -422,6 +423,12 @@ function extractLikelyJsonBlock(raw) {
 function looksLikeStructuredPayload(raw) {
   return /"(view|chartType|type|data|items|rows|products|results)"\s*:/.test(raw);
 }
+function stripMarkdownTables(raw) {
+  return raw.replace(
+    /(?:^|\n)\|[^\n]+\|\n\|(?:\s*:?-+:?\s*\|)+\n(?:\|[^\n]*\|\n?)*/g,
+    "\n\n"
+  );
+}
 function resolveImage(data) {
   for (const key of ["image", "img", "thumbnail"]) {
     const v = data[key];
@@ -678,6 +685,7 @@ function MessageBubble({
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = React5.useMemo(() => {
     let raw = cleanContent || message.content;
+    const hasStructuredUiBlock = /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
     if (!isStreaming) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
@@ -693,6 +701,9 @@ ${match.trim()}
 `;
       });
     }
+    if (hasStructuredUiBlock) {
+      raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
+    }
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
         return `

package/package.json

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

package/src/components/DynamicChart.tsx

@@ -64,6 +64,13 @@ export function DynamicChart({
       : 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
@@ -235,25 +242,27 @@ export function DynamicChart({
   if (type === 'pie') {
     return (
       <div ref={containerRef} className={`w-full min-w-0 ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden`}>
-        <ResponsiveContainer width="100%" height="100%">
-          <PieChart>
-            <Pie
-              data={sanitizedData}
-              dataKey={pieDataKey}
-              nameKey={finalXKey}
-              cx="50%"
-              cy="50%"
-              outerRadius={pieOuterRadius}
-              label={isTiny ? false : pieLabel}
-            >
-              {sanitizedData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={stockAwareColor(entry, index)} />
-              ))}
-            </Pie>
-            <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} />
-            {showLegend && <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} />}
-          </PieChart>
-        </ResponsiveContainer>
+        <div className={`mx-auto h-full w-full ${pieCanvasMaxWidthClass}`}>
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={sanitizedData}
+                dataKey={pieDataKey}
+                nameKey={finalXKey}
+                cx="50%"
+                cy="50%"
+                outerRadius={pieOuterRadius}
+                label={isTiny ? false : pieLabel}
+              >
+                {sanitizedData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={stockAwareColor(entry, index)} />
+                ))}
+              </Pie>
+              <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} />
+              {showLegend && <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} verticalAlign="bottom" />}
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
       </div>
     );
   }

package/src/components/MessageBubble.tsx

@@ -106,6 +106,13 @@ function looksLikeStructuredPayload(raw: string): boolean {
   return /"(view|chartType|type|data|items|rows|products|results)"\s*:/.test(raw);
 }
 
+function stripMarkdownTables(raw: string): string {
+  return raw.replace(
+    /(?:^|\n)\|[^\n]+\|\n\|(?:\s*:?-+:?\s*\|)+\n(?:\|[^\n]*\|\n?)*/g,
+    '\n\n',
+  );
+}
+
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
@@ -533,6 +540,7 @@ export function MessageBubble({
 
   const processedMarkdown = React.useMemo(() => {
     let raw = cleanContent || message.content;
+    const hasStructuredUiBlock = /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     
     // 1. Structural fixes
     raw = raw.replace(/([^\n])\n\|/g, '$1\n\n|') // Ensure blank line before table
@@ -553,6 +561,14 @@ export function MessageBubble({
       });
     }
 
+    // 2b. If the model already provided a structured UI block, suppress duplicated
+    // markdown tables that often follow as a fallback explanation.
+    if (hasStructuredUiBlock) {
+      raw = stripMarkdownTables(raw)
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    }
+
     // 3. HIJACKING: If streaming, hide table-like content to prevent raw markdown flashing.
     if (isStreaming) {
       raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {