@retrivora-ai/rag-engine 1.3.8 → 1.4.0

package/dist/index.js

@@ -381,14 +381,65 @@ function resolveImage(data) {
   }
   return void 0;
 }
+function normaliseChild(children) {
+  if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react5.default.isValidElement(children)) {
+    return JSON.stringify(children);
+  }
+  return children;
+}
+function DataTable({ config }) {
+  const keys = import_react5.default.useMemo(() => {
+    if (Array.isArray(config.columns) && config.columns.length) {
+      return config.columns;
+    }
+    if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
+      if (config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)) {
+        return [config.xAxisKey, ...config.dataKeys];
+      }
+      return config.dataKeys;
+    }
+    if (config.data.length > 0) return Object.keys(config.data[0]);
+    return [];
+  }, [config]);
+  if (!config.data.length || !keys.length) {
+    return /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-xs text-slate-400 italic my-2" }, "No data to display.");
+  }
+  const formatCell = (val) => {
+    if (val === null || val === void 0) return "\u2014";
+    if (typeof val === "boolean") return val ? "\u2713" : "\u2717";
+    return String(val);
+  };
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ import_react5.default.createElement("div", { className: "px-4 py-2.5 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", { className: "w-full text-left border-collapse min-w-[320px] text-sm" }, /* @__PURE__ */ import_react5.default.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, keys.map((k) => /* @__PURE__ */ import_react5.default.createElement(
+    "th",
+    {
+      key: k,
+      className: "px-4 py-3 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
+    },
+    k
+  )))), /* @__PURE__ */ import_react5.default.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ import_react5.default.createElement(
+    "tr",
+    {
+      key: ri,
+      className: "border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
+    },
+    keys.map((k) => /* @__PURE__ */ import_react5.default.createElement(
+      "td",
+      {
+        key: k,
+        className: "px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap"
+      },
+      formatCell(row[k])
+    ))
+  ))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
+}
 function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
   const result = import_react5.default.useMemo(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === "undefined") return { error: "Empty chart config." };
+    if (!rawContent || rawContent === "undefined") return { error: "Empty visualization config." };
     try {
       const sanitized = sanitizeJson(rawContent);
-      const config = JSON.parse(sanitized);
-      return { config };
+      const config2 = JSON.parse(sanitized);
+      return { config: config2 };
     } catch (err) {
       const sanitized = sanitizeJson(rawContent);
       console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
@@ -396,12 +447,23 @@ function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 select-none" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-6 h-6 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 animate-pulse" }, "Preparing data visualization..."));
+    return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 select-none" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-6 h-6 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 animate-pulse" }, "Preparing data visualization\u2026"));
   }
   if ("error" in result) {
-    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 the console for details."));
+    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 visualization"), /* @__PURE__ */ import_react5.default.createElement("p", { className: "opacity-70 text-xs" }, "The generated configuration is invalid. Check the console for details."));
   }
-  return /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement(DynamicChart, { config: result.config, primaryColor, accentColor }));
+  const { config } = result;
+  if (config.type === "table") {
+    return /* @__PURE__ */ import_react5.default.createElement(DataTable, { config });
+  }
+  return /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement(
+    DynamicChart,
+    {
+      config,
+      primaryColor,
+      accentColor
+    }
+  ));
 }
 function MessageBubble({
   message,
@@ -475,18 +537,22 @@ function MessageBubble({
       return false;
     });
   }, [productsFromSources, productsFromContent, message.content]);
+  const processedMarkdown = import_react5.default.useMemo(() => {
+    const raw = cleanContent || message.content;
+    return raw.replace(/([^\n])\n\|/g, "$1\n\n|");
+  }, [cleanContent, message.content]);
   const markdownComponents = import_react5.default.useMemo(
     () => ({
       table: (_a) => {
         var props = __objRest(_a, []);
-        return /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ import_react5.default.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px]" }, props)));
+        return /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-hidden my-6 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px] text-sm" }, props))));
       },
       thead: (_b) => {
         var props = __objRest(_b, []);
         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"
+            className: "bg-slate-50/80 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
           }, props)
         );
       },
@@ -495,7 +561,7 @@ function MessageBubble({
         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"
+            className: "px-4 py-3.5 font-bold text-slate-800 dark:text-white uppercase text-[11px] tracking-wider"
           }, props),
           normaliseChild(children)
         );
@@ -505,7 +571,7 @@ function MessageBubble({
         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"
+            className: "px-4 py-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70 hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors"
           }, props),
           normaliseChild(children)
         );
@@ -551,7 +617,7 @@ 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__ */ 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 prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ import_react5.default.createElement(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components: markdownComponents }, cleanContent || message.content), 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 prose-sm max-w-none ${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" }))
   ), !isUser && allProducts.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react5.default.createElement(
     ProductCarousel,
     {
@@ -572,12 +638,6 @@ function MessageBubble({
     " used"
   ), showSources && /* @__PURE__ */ import_react5.default.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ import_react5.default.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
 }
-function normaliseChild(children) {
-  if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react5.default.isValidElement(children)) {
-    return JSON.stringify(children);
-  }
-  return children;
-}
 
 // src/components/ConfigProvider.tsx
 var import_react6 = __toESM(require("react"));

package/dist/index.mjs

@@ -344,14 +344,65 @@ function resolveImage(data) {
   }
   return void 0;
 }
+function normaliseChild(children) {
+  if (typeof children === "object" && children !== null && !Array.isArray(children) && !React5.isValidElement(children)) {
+    return JSON.stringify(children);
+  }
+  return children;
+}
+function DataTable({ config }) {
+  const keys = React5.useMemo(() => {
+    if (Array.isArray(config.columns) && config.columns.length) {
+      return config.columns;
+    }
+    if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
+      if (config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)) {
+        return [config.xAxisKey, ...config.dataKeys];
+      }
+      return config.dataKeys;
+    }
+    if (config.data.length > 0) return Object.keys(config.data[0]);
+    return [];
+  }, [config]);
+  if (!config.data.length || !keys.length) {
+    return /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-400 italic my-2" }, "No data to display.");
+  }
+  const formatCell = (val) => {
+    if (val === null || val === void 0) return "\u2014";
+    if (typeof val === "boolean") return val ? "\u2713" : "\u2717";
+    return String(val);
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2.5 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React5.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: "w-full text-left border-collapse min-w-[320px] text-sm" }, /* @__PURE__ */ React5.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React5.createElement("tr", null, keys.map((k) => /* @__PURE__ */ React5.createElement(
+    "th",
+    {
+      key: k,
+      className: "px-4 py-3 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
+    },
+    k
+  )))), /* @__PURE__ */ React5.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ React5.createElement(
+    "tr",
+    {
+      key: ri,
+      className: "border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
+    },
+    keys.map((k) => /* @__PURE__ */ React5.createElement(
+      "td",
+      {
+        key: k,
+        className: "px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap"
+      },
+      formatCell(row[k])
+    ))
+  ))))), /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
+}
 function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
   const result = React5.useMemo(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === "undefined") return { error: "Empty chart config." };
+    if (!rawContent || rawContent === "undefined") return { error: "Empty visualization config." };
     try {
       const sanitized = sanitizeJson(rawContent);
-      const config = JSON.parse(sanitized);
-      return { config };
+      const config2 = JSON.parse(sanitized);
+      return { config: config2 };
     } catch (err) {
       const sanitized = sanitizeJson(rawContent);
       console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
@@ -359,12 +410,23 @@ function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 select-none" }, /* @__PURE__ */ React5.createElement("div", { className: "w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium animate-pulse" }, "Preparing data visualization..."));
+    return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 select-none" }, /* @__PURE__ */ React5.createElement("div", { className: "w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium animate-pulse" }, "Preparing data visualization\u2026"));
   }
   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: "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 visualization"), /* @__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 }));
+  const { config } = result;
+  if (config.type === "table") {
+    return /* @__PURE__ */ React5.createElement(DataTable, { config });
+  }
+  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
+    }
+  ));
 }
 function MessageBubble({
   message,
@@ -438,18 +500,22 @@ function MessageBubble({
       return false;
     });
   }, [productsFromSources, productsFromContent, message.content]);
+  const processedMarkdown = React5.useMemo(() => {
+    const raw = cleanContent || message.content;
+    return raw.replace(/([^\n])\n\|/g, "$1\n\n|");
+  }, [cleanContent, message.content]);
   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)));
+        return /* @__PURE__ */ React5.createElement("div", { className: "overflow-hidden my-6 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50" }, /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px] text-sm" }, 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"
+            className: "bg-slate-50/80 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
           }, props)
         );
       },
@@ -458,7 +524,7 @@ function MessageBubble({
         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"
+            className: "px-4 py-3.5 font-bold text-slate-800 dark:text-white uppercase text-[11px] tracking-wider"
           }, props),
           normaliseChild(children)
         );
@@ -468,7 +534,7 @@ function MessageBubble({
         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"
+            className: "px-4 py-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70 hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors"
           }, props),
           normaliseChild(children)
         );
@@ -514,7 +580,7 @@ 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: 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" }))
+    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 }, 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 && allProducts.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
     ProductCarousel,
     {
@@ -535,12 +601,6 @@ 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/package.json

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

@@ -49,8 +49,8 @@ function sanitizeJson(raw: string): string {
   // 7. Stack-based structure balancer.
   //    Walk every character, maintain a stack of openers so we close each
   //    unclosed structure with its exact matching closer — in the right order.
-  //    This is the critical fix: a flat counter approach appends all ]'s then
-  //    all }'s, which corrupts nested structures like {..., [..., {...}]}.
+  //    A flat counter approach appends all ]'s then all }'s, which corrupts
+  //    nested structures like {..., [..., {...}]}.
   {
     const stack: ('{' | '[')[] = [];
     let inString = false;
@@ -66,7 +66,6 @@ function sanitizeJson(raw: string): string {
         stack.push(ch);
       } else if (ch === '}') {
         if (stack[stack.length - 1] === '{') stack.pop();
-        // mismatched closer — leave stack alone (sanitize step 5 handles trailing commas)
       } else if (ch === ']') {
         if (stack[stack.length - 1] === '[') stack.pop();
       }
@@ -104,7 +103,116 @@ function resolveImage(data: Record<string, unknown>): string | undefined {
   return undefined;
 }
 
-// ─── Chart code block renderer ────────────────────────────────────────────────
+/** Safely render table cell children that might be plain objects. */
+function normaliseChild(children: React.ReactNode): React.ReactNode {
+  if (
+    typeof children === 'object' &&
+    children !== null &&
+    !Array.isArray(children) &&
+    !React.isValidElement(children)
+  ) {
+    return JSON.stringify(children);
+  }
+  return children;
+}
+
+// ─── Inline data table renderer ───────────────────────────────────────────────
+// Handles chart configs where type === "table". The LLM may emit any of:
+//   columns, dataKeys (+optional xAxisKey), or no key hints (auto-detect from row).
+
+interface TableConfig {
+  type: 'table';
+  title?: string;
+  columns?: string[];   // preferred: explicit ordered column labels
+  dataKeys?: string[];  // fallback column keys (may omit xAxisKey)
+  xAxisKey?: string;    // row-label key to prepend when using dataKeys
+  data: Record<string, unknown>[];
+}
+
+function DataTable({ config }: { config: TableConfig }) {
+  const keys = React.useMemo<string[]>(() => {
+    // Priority 1: explicit columns list
+    if (Array.isArray(config.columns) && config.columns.length) {
+      return config.columns;
+    }
+    // Priority 2: dataKeys, with xAxisKey prepended if not already present
+    if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
+      if (config.xAxisKey && !config.dataKeys.includes(config.xAxisKey)) {
+        return [config.xAxisKey, ...config.dataKeys];
+      }
+      return config.dataKeys;
+    }
+    // Priority 3: auto-detect from first data row
+    if (config.data.length > 0) return Object.keys(config.data[0]);
+    return [];
+  }, [config]);
+
+  if (!config.data.length || !keys.length) {
+    return <p className="text-xs text-slate-400 italic my-2">No data to display.</p>;
+  }
+
+  const formatCell = (val: unknown): string => {
+    if (val === null || val === undefined) return '—';
+    if (typeof val === 'boolean') return val ? '✓' : '✗';
+    return String(val);
+  };
+
+  return (
+    <div className="my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden">
+      {config.title && (
+        <div className="px-4 py-2.5 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
+          <p className="text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide">
+            {config.title}
+          </p>
+        </div>
+      )}
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-left border-collapse min-w-[320px] text-sm">
+          <thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
+            <tr>
+              {keys.map(k => (
+                <th
+                  key={k}
+                  className="px-4 py-3 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
+                >
+                  {k}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {config.data.map((row, ri) => (
+              <tr
+                key={ri}
+                className="border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
+              >
+                {keys.map(k => (
+                  <td
+                    key={k}
+                    className="px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap"
+                  >
+                    {formatCell(row[k])}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5">
+        <p className="text-[11px] text-slate-400 dark:text-white/30">
+          {config.data.length} row{config.data.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Chart / table code block dispatcher ─────────────────────────────────────
+
+type ParsedConfig = ChartConfig | TableConfig;
 
 interface ChartBlockProps {
   rawContent: string;
@@ -114,12 +222,14 @@ interface ChartBlockProps {
 }
 
 function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }: ChartBlockProps) {
-  const result = React.useMemo<{ config: ChartConfig } | { error: string } | { loading: boolean }>(() => {
+  const result = React.useMemo<
+    { config: ParsedConfig } | { error: string } | { loading: true }
+  >(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === 'undefined') return { error: 'Empty chart config.' };
+    if (!rawContent || rawContent === 'undefined') return { error: 'Empty visualization config.' };
     try {
       const sanitized = sanitizeJson(rawContent);
-      const config = JSON.parse(sanitized) as ChartConfig;
+      const config = JSON.parse(sanitized) as ParsedConfig;
       return { config };
     } catch (err) {
       const sanitized = sanitizeJson(rawContent);
@@ -132,7 +242,7 @@ function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }: Char
     return (
       <div className="my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 select-none">
         <div className="w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
-        <p className="text-xs text-slate-500 font-medium animate-pulse">Preparing data visualization...</p>
+        <p className="text-xs text-slate-500 font-medium animate-pulse">Preparing data visualization…</p>
       </div>
     );
   }
@@ -140,20 +250,31 @@ function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }: Char
   if ('error' in result) {
     return (
       <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">
-        <p className="font-medium mb-1">Failed to render chart</p>
+        <p className="font-medium mb-1">Failed to render visualization</p>
         <p className="opacity-70 text-xs">The generated configuration is invalid. Check the console for details.</p>
       </div>
     );
   }
 
+  const { config } = result;
+
+  // Route table type to dedicated renderer; everything else goes to DynamicChart
+  if (config.type === 'table') {
+    return <DataTable config={config as TableConfig} />;
+  }
+
   return (
     <div className="my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
-      <DynamicChart config={result.config} primaryColor={primaryColor} accentColor={accentColor} />
+      <DynamicChart
+        config={config as ChartConfig}
+        primaryColor={primaryColor}
+        accentColor={accentColor}
+      />
     </div>
   );
 }
 
-// ─── Component ────────────────────────────────────────────────────────────────
+// ─── Main component ───────────────────────────────────────────────────────────
 
 export function MessageBubble({
   message,
@@ -236,23 +357,32 @@ export function MessageBubble({
     });
   }, [productsFromSources, productsFromContent, message.content]);
 
+  // ── Markdown source fixer ──────────────────────────────────────────────────
+  // GFM tables require a blank line before the | row when preceded by text.
+  const processedMarkdown = React.useMemo(() => {
+    const raw = cleanContent || message.content;
+    return raw.replace(/([^\n])\n\|/g, '$1\n\n|');
+  }, [cleanContent, message.content]);
+
   // ── Markdown component overrides ───────────────────────────────────────────
   const markdownComponents = React.useMemo(
     () => ({
       table: ({ ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-        <div className="overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
-          <table className="w-full text-left border-collapse min-w-[400px]" {...props} />
+        <div className="overflow-hidden my-6 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50">
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse min-w-[400px] text-sm" {...props} />
+          </div>
         </div>
       ),
       thead: ({ ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
         <thead
-          className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
+          className="bg-slate-50/80 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
           {...props}
         />
       ),
       th: ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
         <th
-          className="p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl"
+          className="px-4 py-3.5 font-bold text-slate-800 dark:text-white uppercase text-[11px] tracking-wider"
           {...props}
         >
           {normaliseChild(children)}
@@ -260,7 +390,7 @@ export function MessageBubble({
       ),
       td: ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
         <td
-          className="p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70"
+          className="px-4 py-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70 hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors"
           {...props}
         >
           {normaliseChild(children)}
@@ -303,8 +433,8 @@ export function MessageBubble({
       {/* Avatar */}
       <div
         className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-lg ${isUser
-          ? 'text-white'
-          : 'bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80'
+            ? 'text-white'
+            : 'bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80'
           }`}
         style={isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}}
       >
@@ -315,8 +445,8 @@ export function MessageBubble({
         {/* Bubble */}
         <div
           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'
+              ? '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})` } : {}
@@ -331,7 +461,7 @@ export function MessageBubble({
           ) : (
             <div className={`prose prose-sm max-w-none ${isUser ? 'prose-invert' : 'dark:prose-invert'}`}>
               <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
-                {cleanContent || message.content}
+                {processedMarkdown}
               </ReactMarkdown>
 
               {isStreaming && message.content && (
@@ -375,19 +505,4 @@ export function MessageBubble({
       </div>
     </div>
   );
-}
-
-// ─── Util ─────────────────────────────────────────────────────────────────────
-
-/** Safely render table cell children that might be plain objects. */
-function normaliseChild(children: React.ReactNode): React.ReactNode {
-  if (
-    typeof children === 'object' &&
-    children !== null &&
-    !Array.isArray(children) &&
-    !React.isValidElement(children)
-  ) {
-    return JSON.stringify(children);
-  }
-  return children;
 }