@retrivora-ai/rag-engine 1.3.7 → 1.3.9

package/dist/{chunk-NVXFI7HX.mjs → chunk-FQ7OYZLF.mjs}

@@ -1705,8 +1705,6 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",
@@ -2270,8 +2268,6 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",

package/dist/handlers/index.js

@@ -3274,8 +3274,6 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",
@@ -3833,8 +3831,6 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",

package/dist/handlers/index.mjs

@@ -9,7 +9,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "../chunk-NVXFI7HX.mjs";
+} from "../chunk-FQ7OYZLF.mjs";
 import "../chunk-YLTMFW4M.mjs";
 import "../chunk-X4TOT24V.mjs";
 export {

package/dist/index.js

@@ -320,10 +320,6 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
 // src/components/MessageBubble.tsx
 function sanitizeJson(raw) {
   let s = raw.trim();
-  const firstOpener = s.search(/[\{\[]/);
-  if (firstOpener !== -1) {
-    s = s.substring(firstOpener);
-  }
   s = s.replace(
     /:\s*(-?\d+(?:\.\d+)?)\s*([+\-*/])\s*(-?\d+(?:\.\d+)?)/g,
     (_, a, op, b) => {
@@ -385,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);
@@ -400,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."));
+  }
+  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: result.config, primaryColor, accentColor }));
+  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,
@@ -479,6 +537,10 @@ 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) => {
@@ -499,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 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
           }, props),
           normaliseChild(children)
         );
@@ -509,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 whitespace-nowrap"
           }, props),
           normaliseChild(children)
         );
@@ -555,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,
     {
@@ -576,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

@@ -283,10 +283,6 @@ function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6
 // src/components/MessageBubble.tsx
 function sanitizeJson(raw) {
   let s = raw.trim();
-  const firstOpener = s.search(/[\{\[]/);
-  if (firstOpener !== -1) {
-    s = s.substring(firstOpener);
-  }
   s = s.replace(
     /:\s*(-?\d+(?:\.\d+)?)\s*([+\-*/])\s*(-?\d+(?:\.\d+)?)/g,
     (_, a, op, b) => {
@@ -348,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);
@@ -363,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."));
+  }
+  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: result.config, primaryColor, accentColor }));
+  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,
@@ -442,6 +500,10 @@ 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) => {
@@ -462,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 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
           }, props),
           normaliseChild(children)
         );
@@ -472,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 whitespace-nowrap"
           }, props),
           normaliseChild(children)
         );
@@ -518,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,
     {
@@ -539,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/dist/server.js

@@ -3359,8 +3359,6 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",
@@ -3924,8 +3922,6 @@ When presenting structured data, statistics, or comparisons, decide if it is bes
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",

package/dist/server.mjs

@@ -39,7 +39,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "./chunk-NVXFI7HX.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.7",
+  "version": "1.3.9",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "MIT",

package/src/components/MessageBubble.tsx

@@ -15,12 +15,6 @@ import { DynamicChart, ChartConfig } from './DynamicChart';
 function sanitizeJson(raw: string): string {
   let s = raw.trim();
 
-  // 0. Find the first '{' or '[' and trim everything before it (e.g. markdown fences)
-  const firstOpener = s.search(/[\{\[]/);
-  if (firstOpener !== -1) {
-    s = s.substring(firstOpener);
-  }
-
   // 1. Evaluate simple arithmetic expressions in values  e.g.  "v": 495 / 1000
   s = s.replace(
     /:\s*(-?\d+(?:\.\d+)?)\s*([+\-*/])\s*(-?\d+(?:\.\d+)?)/g,
@@ -55,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;
@@ -72,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();
       }
@@ -110,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;
@@ -120,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);
@@ -138,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>
     );
   }
@@ -146,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,
@@ -242,6 +357,13 @@ 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(
     () => ({
@@ -258,7 +380,7 @@ export function MessageBubble({
       ),
       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 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
           {...props}
         >
           {normaliseChild(children)}
@@ -266,7 +388,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 whitespace-nowrap"
           {...props}
         >
           {normaliseChild(children)}
@@ -309,8 +431,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})` } : {}}
       >
@@ -321,8 +443,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})` } : {}
@@ -337,7 +459,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 && (
@@ -381,19 +503,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;
 }

package/src/core/LangChainAgent.ts

@@ -59,8 +59,6 @@ export class LangChainAgent {
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",

package/src/core/Pipeline.ts

@@ -109,8 +109,6 @@ export class Pipeline {
   3. dataKeys MUST exactly match the property names in the data objects.
   4. data objects MUST be FLAT (no nested objects or arrays).
   5. DO NOT output naked JSON; it MUST be wrapped in \`\`\`chart ... \`\`\`.
-  6. The UI HAS a built-in charting engine. NEVER provide Python, Plotly, or Matplotlib code.
-  7. NEVER apologize or claim you cannot render charts. Simply use the \`\`\`chart\`\`\` block.
 \`\`\`chart
 {
   "type": "bar" | "line" | "pie",