@retrivora-ai/rag-engine 1.4.7 → 1.4.8

package/dist/index.js

@@ -235,13 +235,21 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
               Object.keys(subItem).forEach((sk) => {
                 const subVal = subItem[sk];
                 if (typeof subVal !== "object" || subVal === null) {
-                  newItem[sk] = subVal;
+                  if (typeof subVal === "string" && !isNaN(Number(subVal)) && subVal.trim() !== "") {
+                    newItem[sk] = Number(subVal);
+                  } else {
+                    newItem[sk] = subVal;
+                  }
                 }
               });
             }
           });
         } else if (typeof val !== "object" || val === null) {
-          newItem[k] = val;
+          if (typeof val === "string" && !isNaN(Number(val)) && val.trim() !== "") {
+            newItem[k] = Number(val);
+          } else {
+            newItem[k] = val;
+          }
         }
       });
       return newItem;
@@ -250,7 +258,7 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
   if (!data || data.length === 0) {
     return /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
   }
-  const firstItem = data[0];
+  const firstItem = sanitizedData[0];
   const allKeys = Object.keys(firstItem);
   const resolvedXKey = config.xAxisKey && firstItem[config.xAxisKey] !== void 0 ? config.xAxisKey : allKeys.find((k) => k.toLowerCase() === "name" || k.toLowerCase() === "label" || k.toLowerCase() === "category") || allKeys.find((k) => typeof firstItem[k] === "string") || allKeys[0];
   const resolvedDataKeys = config.dataKeys && config.dataKeys.every((k) => {
@@ -497,6 +505,9 @@ function MessageBubble({
   }, [sources, isUser]);
   const { productsFromContent, cleanContent } = import_react5.default.useMemo(() => {
     if (isUser) return { productsFromContent: [], cleanContent: message.content };
+    if (message.content.includes("```chart")) {
+      return { productsFromContent: [], cleanContent: message.content };
+    }
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
     const products = [];
     let content = message.content;

package/dist/index.mjs

@@ -198,13 +198,21 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
               Object.keys(subItem).forEach((sk) => {
                 const subVal = subItem[sk];
                 if (typeof subVal !== "object" || subVal === null) {
-                  newItem[sk] = subVal;
+                  if (typeof subVal === "string" && !isNaN(Number(subVal)) && subVal.trim() !== "") {
+                    newItem[sk] = Number(subVal);
+                  } else {
+                    newItem[sk] = subVal;
+                  }
                 }
               });
             }
           });
         } else if (typeof val !== "object" || val === null) {
-          newItem[k] = val;
+          if (typeof val === "string" && !isNaN(Number(val)) && val.trim() !== "") {
+            newItem[k] = Number(val);
+          } else {
+            newItem[k] = val;
+          }
         }
       });
       return newItem;
@@ -213,7 +221,7 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
   if (!data || data.length === 0) {
     return /* @__PURE__ */ React4.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
   }
-  const firstItem = data[0];
+  const firstItem = sanitizedData[0];
   const allKeys = Object.keys(firstItem);
   const resolvedXKey = config.xAxisKey && firstItem[config.xAxisKey] !== void 0 ? config.xAxisKey : allKeys.find((k) => k.toLowerCase() === "name" || k.toLowerCase() === "label" || k.toLowerCase() === "category") || allKeys.find((k) => typeof firstItem[k] === "string") || allKeys[0];
   const resolvedDataKeys = config.dataKeys && config.dataKeys.every((k) => {
@@ -460,6 +468,9 @@ function MessageBubble({
   }, [sources, isUser]);
   const { productsFromContent, cleanContent } = React5.useMemo(() => {
     if (isUser) return { productsFromContent: [], cleanContent: message.content };
+    if (message.content.includes("```chart")) {
+      return { productsFromContent: [], cleanContent: message.content };
+    }
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
     const products = [];
     let content = message.content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "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

@@ -29,6 +29,8 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
   // CRITICAL: Sanitize the data array to remove any non-primitive values (objects/arrays)
   // This prevents the "Objects are not valid as a React child" error in Tooltips/Legends
   // This hook MUST be called before any early returns to satisfy React rules
+  // CRITICAL: Sanitize the data array to remove any non-primitive values (objects/arrays)
+  // Also ensures numeric strings are converted to actual numbers for Recharts.
   const sanitizedData = React.useMemo(() => {
     if (!data) return [];
     return data.map(item => {
@@ -36,19 +38,28 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
       Object.keys(item).forEach(k => {
         const val = item[k];
         if (Array.isArray(val)) {
-          // If the LLM output nested arrays, attempt to flatten them
           val.forEach(subItem => {
             if (typeof subItem === 'object' && subItem !== null) {
               Object.keys(subItem).forEach(sk => {
                 const subVal = (subItem as Record<string, unknown>)[sk];
                 if (typeof subVal !== 'object' || subVal === null) {
-                  newItem[sk] = subVal as string | number | null;
+                  // Auto-convert numeric strings
+                  if (typeof subVal === 'string' && !isNaN(Number(subVal)) && subVal.trim() !== '') {
+                    newItem[sk] = Number(subVal);
+                  } else {
+                    newItem[sk] = subVal as string | number | null;
+                  }
                 }
               });
             }
           });
         } else if (typeof val !== 'object' || val === null) {
-          newItem[k] = val as string | number | null;
+          // Auto-convert numeric strings
+          if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+            newItem[k] = Number(val);
+          } else {
+            newItem[k] = val as string | number | null;
+          }
         }
       });
       return newItem;
@@ -60,7 +71,7 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
   }
 
   // Smart key resolution: if the provided keys don't exist in the data, try to guess them
-  const firstItem = data[0];
+  const firstItem = sanitizedData[0];
   const allKeys = Object.keys(firstItem);
   
   // Resolve xAxisKey: use provided, fallback to 'name', 'label', 'category', or the first string key
@@ -71,7 +82,6 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
       || allKeys[0];
 
   // Resolve dataKeys: use provided, fallback to 'value', 'count', 'amount', or all numeric keys
-  // CRITICAL: Filter out any keys that point to objects/arrays to prevent React render errors
   const resolvedDataKeys = config.dataKeys && config.dataKeys.every(k => {
     const val = firstItem[k];
     return val !== undefined && typeof val !== 'object';

package/src/components/MessageBubble.tsx

@@ -313,6 +313,11 @@ export function MessageBubble({
   const { productsFromContent, cleanContent } = React.useMemo(() => {
     if (isUser) return { productsFromContent: [] as Product[], cleanContent: message.content };
 
+    // If the message contains a chart, suppress the product carousel to keep focus on visualization
+    if (message.content.includes('```chart')) {
+      return { productsFromContent: [] as Product[], cleanContent: message.content };
+    }
+
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
     const products: Product[] = [];
     let content = message.content;