@retrivora-ai/rag-engine 1.2.9 → 1.3.1

package/dist/index.js

@@ -229,18 +229,35 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
   const firstItem = data[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) => firstItem[k] !== void 0) ? config.dataKeys : allKeys.filter((k) => k !== resolvedXKey && (typeof firstItem[k] === "number" || k.toLowerCase() === "value" || k.toLowerCase() === "count")).slice(0, 5);
-  if (resolvedDataKeys.length === 0 && allKeys.length > 1) {
-    resolvedDataKeys.push(allKeys.find((k) => k !== resolvedXKey) || allKeys[1]);
-  }
+  const resolvedDataKeys = config.dataKeys && config.dataKeys.every((k) => {
+    const val = firstItem[k];
+    return val !== void 0 && typeof val !== "object";
+  }) ? config.dataKeys : allKeys.filter((k) => {
+    const val = firstItem[k];
+    return k !== resolvedXKey && (typeof val === "number" || k.toLowerCase() === "value" || k.toLowerCase() === "count");
+  }).slice(0, 5);
+  const finalXKey = String(resolvedXKey);
+  const finalDataKeys = resolvedDataKeys.map(String).filter((k) => k !== "undefined");
+  const sanitizedData = import_react4.default.useMemo(() => {
+    return data.map((item) => {
+      const newItem = {};
+      Object.keys(item).forEach((k) => {
+        const val = item[k];
+        if (typeof val !== "object" || val === null) {
+          newItem[k] = val;
+        }
+      });
+      return newItem;
+    });
+  }, [data]);
   if (type === "pie") {
-    const pieDataKey = resolvedDataKeys[0] || "value";
+    const pieDataKey = finalDataKeys[0] || "value";
     return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "99%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.default.createElement(
       import_recharts.Pie,
       {
-        data,
+        data: sanitizedData,
         dataKey: pieDataKey,
-        nameKey: resolvedXKey,
+        nameKey: finalXKey,
         cx: "50%",
         cy: "50%",
         outerRadius: 80,
@@ -254,13 +271,13 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
       }
     ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null))));
   }
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "99%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: resolvedXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "99%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__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: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
     import_recharts.Tooltip,
     {
       contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
       cursor: { fill: "#f1f5f9" }
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), resolvedDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
     import_recharts.Bar,
     {
       key,
@@ -269,12 +286,12 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
       radius: [4, 4, 0, 0],
       barSize: Math.max(20, 60 / data.length)
     }
-  ))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: resolvedXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
+  ))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__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: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
     import_recharts.Tooltip,
     {
       contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), resolvedDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
     import_recharts.Line,
     {
       key,
@@ -397,30 +414,30 @@ function MessageBubble({
             return /* @__PURE__ */ import_react5.default.createElement("thead", __spreadValues({ className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, props));
           },
           th: (_c) => {
-            var props = __objRest(_c, []);
-            return /* @__PURE__ */ import_react5.default.createElement("th", __spreadValues({ className: "p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" }, props));
+            var _d = _c, { children } = _d, props = __objRest(_d, ["children"]);
+            return /* @__PURE__ */ import_react5.default.createElement("th", __spreadValues({ className: "p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" }, props), typeof children === "object" && children !== null && !Array.isArray(children) && !children.$$typeof ? JSON.stringify(children) : children);
           },
-          td: (_d) => {
-            var props = __objRest(_d, []);
-            return /* @__PURE__ */ import_react5.default.createElement("td", __spreadValues({ className: "p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" }, props));
+          td: (_e) => {
+            var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
+            return /* @__PURE__ */ import_react5.default.createElement("td", __spreadValues({ className: "p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" }, props), typeof children === "object" && children !== null && !Array.isArray(children) && !children.$$typeof ? JSON.stringify(children) : children);
           },
-          code(_e) {
-            var _f = _e, { inline, className, children } = _f, props = __objRest(_f, ["inline", "className", "children"]);
+          code(_g) {
+            var _h = _g, { inline, className, children } = _h, props = __objRest(_h, ["inline", "className", "children"]);
             const match = /language-(\w+)/.exec(className || "");
             const isChart = match && match[1] === "chart";
             if (!inline && isChart) {
-              const rawContent = String(children).trim();
+              const rawContent = String(children || "").trim();
+              if (!rawContent || rawContent === "undefined") {
+                return null;
+              }
               const sanitizeJson = (json) => {
                 return json.replace(/:\s*(\d+(\.\d+)?)\s*([\+\-\*\/])\s*(\d+(\.\d+)?)/g, (_, n1, __, op, n2) => {
+                  var _a;
                   const v1 = parseFloat(n1);
                   const v2 = parseFloat(n2);
-                  let res = v1;
-                  if (op === "+") res = v1 + v2;
-                  if (op === "-") res = v1 - v2;
-                  if (op === "*") res = v1 * v2;
-                  if (op === "/") res = v1 / v2;
-                  return `: ${res}`;
-                }).replace(/([{,])\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1 "$2":').replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"').replace(/,\s*([\]}])/g, "$1").replace(/}\s*{/g, "},{").replace(/]\s*\[/g, "],[").replace(/\/\/.*$/gm, "").replace(/,\s*""\s*,/g, ",").replace(/\{\s*""\s*,/g, "{").replace(/,\s*""\s*\}/g, "}");
+                  const ops = { "+": v1 + v2, "-": v1 - v2, "*": v1 * v2, "/": v1 / v2 };
+                  return `: ${(_a = ops[op]) != null ? _a : v1}`;
+                }).replace(/([{,])\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1 "$2":').replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"').replace(/,\s*([\]}])/g, "$1").replace(/}\s*{/g, "},{").replace(/]\s*\[/g, "],[").replace(/\/\/.*$/gm, "").replace(/([{,])\s*""\s*([,}])/g, "$1$2");
               };
               try {
                 const sanitized = sanitizeJson(rawContent);
@@ -438,7 +455,7 @@ function MessageBubble({
                 return /* @__PURE__ */ import_react5.default.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "font-medium mb-1" }, "Failed to render chart"), /* @__PURE__ */ import_react5.default.createElement("p", { className: "opacity-70 text-xs" }, "The generated configuration is invalid. Check console for details."));
               }
             }
-            return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), children);
+            return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
           }
         }
       },

package/dist/index.mjs

@@ -192,18 +192,35 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
   const firstItem = data[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) => firstItem[k] !== void 0) ? config.dataKeys : allKeys.filter((k) => k !== resolvedXKey && (typeof firstItem[k] === "number" || k.toLowerCase() === "value" || k.toLowerCase() === "count")).slice(0, 5);
-  if (resolvedDataKeys.length === 0 && allKeys.length > 1) {
-    resolvedDataKeys.push(allKeys.find((k) => k !== resolvedXKey) || allKeys[1]);
-  }
+  const resolvedDataKeys = config.dataKeys && config.dataKeys.every((k) => {
+    const val = firstItem[k];
+    return val !== void 0 && typeof val !== "object";
+  }) ? config.dataKeys : allKeys.filter((k) => {
+    const val = firstItem[k];
+    return k !== resolvedXKey && (typeof val === "number" || k.toLowerCase() === "value" || k.toLowerCase() === "count");
+  }).slice(0, 5);
+  const finalXKey = String(resolvedXKey);
+  const finalDataKeys = resolvedDataKeys.map(String).filter((k) => k !== "undefined");
+  const sanitizedData = React4.useMemo(() => {
+    return data.map((item) => {
+      const newItem = {};
+      Object.keys(item).forEach((k) => {
+        const val = item[k];
+        if (typeof val !== "object" || val === null) {
+          newItem[k] = val;
+        }
+      });
+      return newItem;
+    });
+  }, [data]);
   if (type === "pie") {
-    const pieDataKey = resolvedDataKeys[0] || "value";
+    const pieDataKey = finalDataKeys[0] || "value";
     return /* @__PURE__ */ React4.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
       Pie,
       {
-        data,
+        data: sanitizedData,
         dataKey: pieDataKey,
-        nameKey: resolvedXKey,
+        nameKey: finalXKey,
         cx: "50%",
         cy: "50%",
         outerRadius: 80,
@@ -217,13 +234,13 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
       }
     ), /* @__PURE__ */ React4.createElement(Legend, null))));
   }
-  return /* @__PURE__ */ React4.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: resolvedXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ React4.createElement(YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: "w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "99%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ React4.createElement(YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(
     Tooltip,
     {
       contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
       cursor: { fill: "#f1f5f9" }
     }
-  ), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 } }), resolvedDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Bar,
     {
       key,
@@ -232,12 +249,12 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
       radius: [4, 4, 0, 0],
       barSize: Math.max(20, 60 / data.length)
     }
-  ))) : /* @__PURE__ */ React4.createElement(LineChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: resolvedXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ React4.createElement(YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(
+  ))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ React4.createElement(YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(
     Tooltip,
     {
       contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
     }
-  ), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 } }), resolvedDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
     Line,
     {
       key,
@@ -360,30 +377,30 @@ function MessageBubble({
             return /* @__PURE__ */ React5.createElement("thead", __spreadValues({ className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, props));
           },
           th: (_c) => {
-            var props = __objRest(_c, []);
-            return /* @__PURE__ */ React5.createElement("th", __spreadValues({ className: "p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" }, props));
+            var _d = _c, { children } = _d, props = __objRest(_d, ["children"]);
+            return /* @__PURE__ */ React5.createElement("th", __spreadValues({ className: "p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" }, props), typeof children === "object" && children !== null && !Array.isArray(children) && !children.$$typeof ? JSON.stringify(children) : children);
           },
-          td: (_d) => {
-            var props = __objRest(_d, []);
-            return /* @__PURE__ */ React5.createElement("td", __spreadValues({ className: "p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" }, props));
+          td: (_e) => {
+            var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
+            return /* @__PURE__ */ React5.createElement("td", __spreadValues({ className: "p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" }, props), typeof children === "object" && children !== null && !Array.isArray(children) && !children.$$typeof ? JSON.stringify(children) : children);
           },
-          code(_e) {
-            var _f = _e, { inline, className, children } = _f, props = __objRest(_f, ["inline", "className", "children"]);
+          code(_g) {
+            var _h = _g, { inline, className, children } = _h, props = __objRest(_h, ["inline", "className", "children"]);
             const match = /language-(\w+)/.exec(className || "");
             const isChart = match && match[1] === "chart";
             if (!inline && isChart) {
-              const rawContent = String(children).trim();
+              const rawContent = String(children || "").trim();
+              if (!rawContent || rawContent === "undefined") {
+                return null;
+              }
               const sanitizeJson = (json) => {
                 return json.replace(/:\s*(\d+(\.\d+)?)\s*([\+\-\*\/])\s*(\d+(\.\d+)?)/g, (_, n1, __, op, n2) => {
+                  var _a;
                   const v1 = parseFloat(n1);
                   const v2 = parseFloat(n2);
-                  let res = v1;
-                  if (op === "+") res = v1 + v2;
-                  if (op === "-") res = v1 - v2;
-                  if (op === "*") res = v1 * v2;
-                  if (op === "/") res = v1 / v2;
-                  return `: ${res}`;
-                }).replace(/([{,])\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1 "$2":').replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"').replace(/,\s*([\]}])/g, "$1").replace(/}\s*{/g, "},{").replace(/]\s*\[/g, "],[").replace(/\/\/.*$/gm, "").replace(/,\s*""\s*,/g, ",").replace(/\{\s*""\s*,/g, "{").replace(/,\s*""\s*\}/g, "}");
+                  const ops = { "+": v1 + v2, "-": v1 - v2, "*": v1 * v2, "/": v1 / v2 };
+                  return `: ${(_a = ops[op]) != null ? _a : v1}`;
+                }).replace(/([{,])\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1 "$2":').replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"').replace(/,\s*([\]}])/g, "$1").replace(/}\s*{/g, "},{").replace(/]\s*\[/g, "],[").replace(/\/\/.*$/gm, "").replace(/([{,])\s*""\s*([,}])/g, "$1$2");
               };
               try {
                 const sanitized = sanitizeJson(rawContent);
@@ -401,7 +418,7 @@ function MessageBubble({
                 return /* @__PURE__ */ React5.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30" }, /* @__PURE__ */ React5.createElement("p", { className: "font-medium mb-1" }, "Failed to render chart"), /* @__PURE__ */ React5.createElement("p", { className: "opacity-70 text-xs" }, "The generated configuration is invalid. Check console for details."));
               }
             }
-            return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), children);
+            return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
           }
         }
       },

package/package.json

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

@@ -42,28 +42,49 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
       || allKeys[0];
 
   // Resolve dataKeys: use provided, fallback to 'value', 'count', 'amount', or all numeric keys
-  const resolvedDataKeys = config.dataKeys && config.dataKeys.every(k => firstItem[k] !== undefined)
+  // 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';
+  })
     ? config.dataKeys
-    : allKeys.filter(k => k !== resolvedXKey && (typeof firstItem[k] === 'number' || k.toLowerCase() === 'value' || k.toLowerCase() === 'count'))
+    : allKeys.filter(k => {
+        const val = firstItem[k];
+        return k !== resolvedXKey && (typeof val === 'number' || k.toLowerCase() === 'value' || k.toLowerCase() === 'count');
+      })
       .slice(0, 5); // Limit to 5 series for sanity
   
-  if (resolvedDataKeys.length === 0 && allKeys.length > 1) {
-    // Last resort: just use the second key
-    resolvedDataKeys.push(allKeys.find(k => k !== resolvedXKey) || allKeys[1]);
-  }
+  // Final sanity check: ensure all keys are strings
+  const finalXKey = String(resolvedXKey);
+  const finalDataKeys = resolvedDataKeys.map(String).filter(k => k !== 'undefined');
+
+  // 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
+  const sanitizedData = React.useMemo(() => {
+    return data.map(item => {
+      const newItem: Record<string, any> = {};
+      Object.keys(item).forEach(k => {
+        const val = item[k];
+        if (typeof val !== 'object' || val === null) {
+          newItem[k] = val;
+        }
+      });
+      return newItem;
+    });
+  }, [data]);
 
   // Handle Pie Chart separately as it has a different structure
   if (type === 'pie') {
-    const pieDataKey = resolvedDataKeys[0] || 'value';
+    const pieDataKey = finalDataKeys[0] || 'value';
     
     return (
       <div className="w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden">
         <ResponsiveContainer width="99%" height="100%">
           <PieChart>
             <Pie
-              data={data}
+              data={sanitizedData}
               dataKey={pieDataKey}
-              nameKey={resolvedXKey}
+              nameKey={finalXKey}
               cx="50%"
               cy="50%"
               outerRadius={80}
@@ -88,16 +109,16 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
     <div className="w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden">
       <ResponsiveContainer width="99%" height="100%">
         {type === 'bar' ? (
-          <BarChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+          <BarChart data={sanitizedData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
             <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
-            <XAxis dataKey={resolvedXKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
+            <XAxis dataKey={finalXKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
             <YAxis tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={false} />
             <Tooltip 
               contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
               cursor={{ fill: '#f1f5f9' }}
             />
             <Legend wrapperStyle={{ fontSize: 12 }} />
-            {resolvedDataKeys.map((key, index) => (
+            {finalDataKeys.map((key, index) => (
               <Bar 
                 key={key} 
                 dataKey={key} 
@@ -108,15 +129,15 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
             ))}
           </BarChart>
         ) : (
-          <LineChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+          <LineChart data={sanitizedData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
             <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
-            <XAxis dataKey={resolvedXKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
+            <XAxis dataKey={finalXKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
             <YAxis tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={false} />
             <Tooltip 
               contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
             />
             <Legend wrapperStyle={{ fontSize: 12 }} />
-            {resolvedDataKeys.map((key, index) => (
+            {finalDataKeys.map((key, index) => (
               <Line 
                 key={key} 
                 type="monotone" 

package/src/components/MessageBubble.tsx

@@ -167,51 +167,46 @@ export function MessageBubble({
                   thead: ({...props}) => (
                     <thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" {...props} />
                   ),
-                  th: ({...props}) => (
-                    <th className="p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" {...props} />
+                  th: ({children, ...props}) => (
+                    <th className="p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" {...props}>
+                      {typeof children === 'object' && children !== null && !Array.isArray(children) && !(children as any).$$typeof ? JSON.stringify(children) : children}
+                    </th>
                   ),
-                  td: ({...props}) => (
-                    <td className="p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" {...props} />
+                  td: ({children, ...props}) => (
+                    <td className="p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" {...props}>
+                      {typeof children === 'object' && children !== null && !Array.isArray(children) && !(children as any).$$typeof ? JSON.stringify(children) : children}
+                    </td>
                   ),
                   code({ inline, className, children, ...props }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
                     const match = /language-(\w+)/.exec(className || '');
                     const isChart = match && match[1] === 'chart';
                     
                     if (!inline && isChart) {
-                      const rawContent = String(children).trim();
+                      const rawContent = String(children || '').trim();
                       
-                      // Sanitization helper to handle LLM quirks
+                      if (!rawContent || rawContent === 'undefined') {
+                        return null;
+                      }
+                      
+                      // Optimized sanitization helper to handle LLM quirks
                       const sanitizeJson = (json: string) => {
                         return json
                           // 1. Resolve arithmetic: "value": 495 / 1000 => "value": 0.495
-                          // Matches : number op number
                           .replace(/:\s*(\d+(\.\d+)?)\s*([\+\-\*\/])\s*(\d+(\.\d+)?)/g, (_, n1, __, op, n2) => {
-                            const v1 = parseFloat(n1);
-                            const v2 = parseFloat(n2);
-                            let res = v1;
-                            if (op === '+') res = v1 + v2;
-                            if (op === '-') res = v1 - v2;
-                            if (op === '*') res = v1 * v2;
-                            if (op === '/') res = v1 / v2;
-                            return `: ${res}`;
+                            const v1 = parseFloat(n1); const v2 = parseFloat(n2);
+                            const ops: Record<string, number> = { '+': v1 + v2, '-': v1 - v2, '*': v1 * v2, '/': v1 / v2 };
+                            return `: ${ops[op] ?? v1}`;
                           })
-                          // 2. Quote unquoted keys: { Category: "val" } => { "Category": "val" }
-                          // Matches a word followed by a colon, but not inside a string
+                          // 2. Quote unquoted keys and fix single quotes
                           .replace(/([{,])\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1 "$2":')
-                          // 3. Convert single quotes to double quotes (for delimiters)
-                          // This is a heuristic that replaces ' with " when it looks like a JSON string
                           .replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"')
-                          // 4. Remove trailing commas: [1, 2, 3,] => [1, 2, 3]
+                          // 3. Syntax cleanup: trailing/missing commas and comments
                           .replace(/,\s*([\]}])/g, '$1')
-                          // 5. Fix missing commas between objects: {}{ } => {},{ }
                           .replace(/}\s*{/g, '},{')
                           .replace(/]\s*\[/g, '],[')
-                          // 6. Remove JS-style comments: // something
                           .replace(/\/\/.*$/gm, '')
-                          // 7. Remove dangling empty strings
-                          .replace(/,\s*""\s*,/g, ',')
-                          .replace(/\{\s*""\s*,/g, '{')
-                          .replace(/,\s*""\s*\}/g, '}');
+                          // 4. Remove dangling empty strings
+                          .replace(/([{,])\s*""\s*([,}])/g, '$1$2');
                       };
 
                       try {
@@ -238,7 +233,7 @@ export function MessageBubble({
                     }
                     return (
                       <code className={className} {...props}>
-                        {children}
+                        {typeof children === 'string' || typeof children === 'number' ? children : JSON.stringify(children)}
                       </code>
                     );
                   }