@retrivora-ai/rag-engine 1.3.1 → 1.3.3

package/dist/index.mjs

@@ -186,6 +186,30 @@ var DEFAULT_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#e
 function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6" }) {
   const { type, data } = config;
   const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+  const sanitizedData = React4.useMemo(() => {
+    if (!data) return [];
+    return data.map((item) => {
+      const newItem = {};
+      Object.keys(item).forEach((k) => {
+        const val = item[k];
+        if (Array.isArray(val)) {
+          val.forEach((subItem) => {
+            if (typeof subItem === "object" && subItem !== null) {
+              Object.keys(subItem).forEach((sk) => {
+                const subVal = subItem[sk];
+                if (typeof subVal !== "object" || subVal === null) {
+                  newItem[sk] = subVal;
+                }
+              });
+            }
+          });
+        } else if (typeof val !== "object" || val === null) {
+          newItem[k] = val;
+        }
+      });
+      return newItem;
+    });
+  }, [data]);
   if (!data || data.length === 0) {
     return /* @__PURE__ */ React4.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
   }
@@ -201,18 +225,6 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
   }).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 = 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(
@@ -269,6 +281,90 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
 }
 
 // src/components/MessageBubble.tsx
+function sanitizeJson(raw) {
+  let s = raw.trim();
+  s = s.replace(
+    /:\s*(-?\d+(?:\.\d+)?)\s*([+\-*/])\s*(-?\d+(?:\.\d+)?)/g,
+    (_, a, op, b) => {
+      const n1 = parseFloat(a);
+      const n2 = parseFloat(b);
+      const result = op === "+" ? n1 + n2 : op === "-" ? n1 - n2 : op === "*" ? n1 * n2 : n2 !== 0 ? n1 / n2 : n1;
+      return `: ${result}`;
+    }
+  );
+  s = s.replace(/\/\/[^\n]*/g, "");
+  s = s.replace(/([{,]\s*)([A-Za-z_$][A-Za-z0-9_$]*)\s*:/g, '$1"$2":');
+  s = s.replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"');
+  s = s.replace(/,\s*([}\]])/g, "$1");
+  s = s.replace(/([{,])\s*""\s*(?=[,}])/g, "$1");
+  {
+    let inString = false;
+    let escape = false;
+    let braces = 0;
+    let brackets = 0;
+    for (const ch of s) {
+      if (escape) {
+        escape = false;
+        continue;
+      }
+      if (ch === "\\" && inString) {
+        escape = true;
+        continue;
+      }
+      if (ch === '"') {
+        inString = !inString;
+        continue;
+      }
+      if (inString) continue;
+      if (ch === "{") braces++;
+      else if (ch === "}") braces--;
+      else if (ch === "[") brackets++;
+      else if (ch === "]") brackets--;
+    }
+    if (inString) s += '"';
+    while (brackets > 0) {
+      s += "]";
+      brackets--;
+    }
+    while (braces > 0) {
+      s += "}";
+      braces--;
+    }
+  }
+  const lastClose = Math.max(s.lastIndexOf("}"), s.lastIndexOf("]"));
+  if (lastClose !== -1 && lastClose < s.length - 1) {
+    s = s.substring(0, lastClose + 1);
+  }
+  return s;
+}
+function resolveImage(data) {
+  for (const key of ["image", "img", "thumbnail"]) {
+    const v = data[key];
+    if (typeof v === "string" && v) return v;
+  }
+  if (Array.isArray(data.images) && typeof data.images[0] === "string") {
+    return data.images[0];
+  }
+  return void 0;
+}
+function ChartBlock({ rawContent, primaryColor, accentColor }) {
+  const result = React5.useMemo(() => {
+    if (!rawContent || rawContent === "undefined") return { error: "Empty chart config." };
+    try {
+      const sanitized = sanitizeJson(rawContent);
+      const config = JSON.parse(sanitized);
+      return { config };
+    } catch (err) {
+      const sanitized = sanitizeJson(rawContent);
+      console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
+      return { error: String(err) };
+    }
+  }, [rawContent]);
+  if ("error" in result) {
+    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 the console for details."));
+  }
+  return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ React5.createElement(DynamicChart, { config: result.config, primaryColor, accentColor }));
+}
 function MessageBubble({
   message,
   sources,
@@ -279,28 +375,18 @@ function MessageBubble({
 }) {
   const isUser = message.role === "user";
   const [showSources, setShowSources] = React5.useState(false);
-  const resolveImage = (data) => {
-    if (!data) return void 0;
-    const singleFields = ["image", "img", "thumbnail"];
-    for (const field of singleFields) {
-      const val = data[field];
-      if (typeof val === "string" && val) return val;
-    }
-    if (Array.isArray(data.images) && data.images.length > 0) {
-      if (typeof data.images[0] === "string") return data.images[0];
-    }
-    return void 0;
-  };
   const productsFromSources = React5.useMemo(() => {
     if (isUser || !sources) return [];
     return sources.filter((s) => {
-      const m = s.metadata || {};
+      var _a;
+      const m = (_a = s.metadata) != null ? _a : {};
       return m.price || m.image || m.img || m.thumbnail || m.images || m.brand || m.type === "product";
     }).map((s) => {
-      const m = s.metadata || {};
+      var _a, _b, _c, _d;
+      const m = (_a = s.metadata) != null ? _a : {};
       return {
         id: s.id,
-        name: m.name || m.title || s.content.split("\n")[0] || "Unknown Product",
+        name: (_d = (_c = (_b = m.name) != null ? _b : m.title) != null ? _c : s.content.split("\n")[0]) != null ? _d : "Unknown Product",
         brand: m.brand,
         price: m.price,
         image: resolveImage(m),
@@ -315,16 +401,19 @@ function MessageBubble({
     const products = [];
     let content = message.content;
     if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
-      const matches = Array.from(content.matchAll(jsonRegex));
-      for (const m of matches) {
+      for (const match of content.matchAll(jsonRegex)) {
         try {
-          const data = JSON.parse(m[1]);
+          const data = JSON.parse(match[1]);
           if (data.type === "products" && Array.isArray(data.items)) {
-            const formattedItems = data.items.map((item) => __spreadProps(__spreadValues({}, item), {
-              image: item.image || resolveImage(item)
-            }));
-            products.push(...formattedItems);
-            content = content.replace(m[0], "");
+            products.push(
+              ...data.items.map((item) => {
+                var _a;
+                return __spreadProps(__spreadValues({}, item), {
+                  image: (_a = item.image) != null ? _a : resolveImage(item)
+                });
+              })
+            );
+            content = content.replace(match[0], "");
           }
         } catch (e) {
         }
@@ -334,22 +423,82 @@ function MessageBubble({
   }, [message.content, isUser]);
   const allProducts = React5.useMemo(() => {
     if (productsFromContent.length > 0) return productsFromContent;
-    const uniqueProducts = [];
-    const seenIds = /* @__PURE__ */ new Set();
+    const seen = /* @__PURE__ */ new Set();
     const contentLower = message.content.toLowerCase();
-    for (const p of productsFromSources) {
-      const identifier = p.id || p.name;
-      if (seenIds.has(identifier)) continue;
-      const nameMatch = contentLower.includes(p.name.toLowerCase());
-      const brandMatch = p.brand ? contentLower.includes(p.brand.toLowerCase()) : false;
-      if (nameMatch || brandMatch) {
-        seenIds.add(identifier);
-        uniqueProducts.push(p);
+    return productsFromSources.filter((p) => {
+      var _a;
+      const id = String((_a = p.id) != null ? _a : p.name);
+      if (seen.has(id)) return false;
+      const mentioned = contentLower.includes(p.name.toLowerCase()) || (p.brand ? contentLower.includes(p.brand.toLowerCase()) : false);
+      if (mentioned) {
+        seen.add(id);
+        return true;
       }
-    }
-    return uniqueProducts;
+      return false;
+    });
   }, [productsFromSources, productsFromContent, message.content]);
-  const hasProducts = allProducts.length > 0;
+  const markdownComponents = React5.useMemo(
+    () => ({
+      table: (_a) => {
+        var props = __objRest(_a, []);
+        return /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ React5.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px]" }, props)));
+      },
+      thead: (_b) => {
+        var props = __objRest(_b, []);
+        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 _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),
+          normaliseChild(children)
+        );
+      },
+      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),
+          normaliseChild(children)
+        );
+      },
+      code(_g) {
+        var _h = _g, {
+          inline,
+          className,
+          children
+        } = _h, props = __objRest(_h, [
+          "inline",
+          "className",
+          "children"
+        ]);
+        var _a;
+        const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
+        if (!inline && lang === "chart") {
+          return /* @__PURE__ */ React5.createElement(
+            ChartBlock,
+            {
+              rawContent: String(children != null ? children : "").trim(),
+              primaryColor,
+              accentColor
+            }
+          );
+        }
+        return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
+      }
+    }),
+    [primaryColor, accentColor]
+  );
   return /* @__PURE__ */ React5.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React5.createElement(
     "div",
     {
@@ -363,68 +512,8 @@ function MessageBubble({
       className: `relative px-4 py-3 rounded-2xl text-sm 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 prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ React5.createElement(
-      ReactMarkdown,
-      {
-        remarkPlugins: [remarkGfm],
-        components: {
-          table: (_a) => {
-            var props = __objRest(_a, []);
-            return /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ React5.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px]" }, props)));
-          },
-          thead: (_b) => {
-            var props = __objRest(_b, []);
-            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 _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: (_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(_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();
-              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);
-                  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);
-                const config = JSON.parse(sanitized);
-                return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ React5.createElement(
-                  DynamicChart,
-                  {
-                    config,
-                    primaryColor,
-                    accentColor
-                  }
-                ));
-              } catch (err) {
-                console.error("[MessageBubble] Chart parsing failed:", err, "\nSanitized content:", sanitizeJson(rawContent));
-                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), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
-          }
-        }
-      },
-      cleanContent || message.content
-    ), 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 && hasProducts && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
+    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 prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ React5.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, cleanContent || message.content), 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 && allProducts.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
     ProductCarousel,
     {
       products: allProducts,
@@ -444,6 +533,12 @@ function MessageBubble({
     " used"
   ), showSources && /* @__PURE__ */ React5.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ React5.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
 }
+function normaliseChild(children) {
+  if (typeof children === "object" && children !== null && !Array.isArray(children) && !React5.isValidElement(children)) {
+    return JSON.stringify(children);
+  }
+  return children;
+}
 
 // src/components/ConfigProvider.tsx
 import React6, { createContext, useContext } from "react";

package/dist/server.js

@@ -3357,7 +3357,8 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   1. Use ONLY valid JSON (double quotes, no trailing commas).
   2. NO math expressions (e.g., use 100, NOT 50+50).
   3. dataKeys MUST exactly match the property names in the data objects.
-  4. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
+  4. data objects MUST be FLAT (no nested objects or arrays).
+  5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",
@@ -3919,7 +3920,8 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   1. Use ONLY valid JSON (double quotes, no trailing commas).
   2. NO math expressions (e.g., use 100, NOT 50+50).
   3. dataKeys MUST exactly match the property names in the data objects.
-  4. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
+  4. data objects MUST be FLAT (no nested objects or arrays).
+  5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",

package/dist/server.mjs

@@ -39,7 +39,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "./chunk-AYOQ4LF4.mjs";
+} from "./chunk-FQ7OYZLF.mjs";
 import "./chunk-YLTMFW4M.mjs";
 import {
   PineconeProvider

package/package.json

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

@@ -26,6 +26,35 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
   const { type, data } = config;
   const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
 
+  // 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
+  const sanitizedData = React.useMemo(() => {
+    if (!data) return [];
+    return data.map(item => {
+      const newItem: Record<string, string | number | null> = {};
+      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;
+                }
+              });
+            }
+          });
+        } else if (typeof val !== 'object' || val === null) {
+          newItem[k] = val as string | number | null;
+        }
+      });
+      return newItem;
+    });
+  }, [data]);
+
   if (!data || data.length === 0) {
     return <div className="p-4 text-sm text-slate-500">No data available for chart.</div>;
   }
@@ -58,21 +87,6 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
   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 = finalDataKeys[0] || 'value';