@retrivora-ai/rag-engine 1.4.3 → 1.4.4

package/dist/index.js

@@ -538,9 +538,21 @@ function MessageBubble({
     });
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = import_react5.default.useMemo(() => {
-    const raw = cleanContent || message.content;
-    return raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
-  }, [cleanContent, message.content]);
+    let raw = cleanContent || message.content;
+    raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
+    if (isStreaming) {
+      raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
+        return `
+
+\`\`\`table-loading
+${match.trim()}
+\`\`\`
+
+`;
+      });
+    }
+    return raw;
+  }, [cleanContent, message.content, isStreaming]);
   const markdownComponents = import_react5.default.useMemo(
     () => ({
       // Wrap in not-prose so Tailwind Typography resets don't clobber our styles.
@@ -622,6 +634,9 @@ function MessageBubble({
             }
           );
         }
+        if (!inline && lang === "table-loading") {
+          return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-4 h-4 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 italic animate-pulse" }, "Generating data table..."));
+        }
         return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),

package/dist/index.mjs

@@ -501,9 +501,21 @@ function MessageBubble({
     });
   }, [productsFromSources, productsFromContent, message.content]);
   const processedMarkdown = React5.useMemo(() => {
-    const raw = cleanContent || message.content;
-    return raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
-  }, [cleanContent, message.content]);
+    let raw = cleanContent || message.content;
+    raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
+    if (isStreaming) {
+      raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
+        return `
+
+\`\`\`table-loading
+${match.trim()}
+\`\`\`
+
+`;
+      });
+    }
+    return raw;
+  }, [cleanContent, message.content, isStreaming]);
   const markdownComponents = React5.useMemo(
     () => ({
       // Wrap in not-prose so Tailwind Typography resets don't clobber our styles.
@@ -585,6 +597,9 @@ function MessageBubble({
             }
           );
         }
+        if (!inline && lang === "table-loading") {
+          return /* @__PURE__ */ React5.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ React5.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
+        }
         return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),

package/package.json

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

@@ -357,15 +357,22 @@ export function MessageBubble({
     });
   }, [productsFromSources, productsFromContent, message.content]);
 
-  // ── Markdown source fixer ──────────────────────────────────────────────────
-  // GFM tables require a blank line before the | row when preceded by text,
-  // but MUST NOT have blank lines between rows. LLMs often add extra newlines.
   const processedMarkdown = React.useMemo(() => {
-    const raw = cleanContent || message.content;
-    return raw
-      .replace(/([^\n])\n\|/g, '$1\n\n|') // Ensure blank line before table
-      .replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, '$1\n'); // Remove blank lines between rows
-  }, [cleanContent, message.content]);
+    let raw = cleanContent || message.content;
+    
+    // 1. Structural fixes
+    raw = raw.replace(/([^\n])\n\|/g, '$1\n\n|') // Ensure blank line before table
+             .replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, '$1\n'); // Remove blank lines between rows
+
+    // 2. HIJACKING: If streaming, hide table-like content to prevent raw markdown flashing.
+    if (isStreaming) {
+      raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
+        return `\n\n\`\`\`table-loading\n${match.trim()}\n\`\`\`\n\n`;
+      });
+    }
+
+    return raw;
+  }, [cleanContent, message.content, isStreaming]);
 
   // ── Markdown component overrides ───────────────────────────────────────────
   const markdownComponents = React.useMemo(
@@ -445,6 +452,17 @@ export function MessageBubble({
           );
         }
 
+        if (!inline && lang === 'table-loading') {
+          return (
+            <div className="my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none">
+              <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+              <p className="text-xs text-slate-500 font-medium italic animate-pulse">
+                Generating data table...
+              </p>
+            </div>
+          );
+        }
+
         return (
           <code className={className} {...props}>
             {typeof children === 'string' || typeof children === 'number'