@retrivora-ai/rag-engine 1.4.2 → 1.4.4

package/dist/index.js

@@ -538,15 +538,30 @@ 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|");
-  }, [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.
       // prose applies display:block and padding:0 to table/th/td — not-prose opts out.
       table: (_a) => {
         var props = __objRest(_a, []);
+        if (isStreaming) {
+          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("div", { className: "not-prose overflow-hidden my-5 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({
@@ -619,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,15 +501,30 @@ function MessageBubble({
     });
   }, [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]);
+    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.
       // prose applies display:block and padding:0 to table/th/td — not-prose opts out.
       table: (_a) => {
         var props = __objRest(_a, []);
+        if (isStreaming) {
+          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("div", { className: "not-prose overflow-hidden my-5 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({
@@ -582,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.2",
+  "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,28 +357,51 @@ 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]);
+    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(
     () => ({
       // Wrap in not-prose so Tailwind Typography resets don't clobber our styles.
       // prose applies display:block and padding:0 to table/th/td — not-prose opts out.
-      table: ({ ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-        <div className="not-prose overflow-hidden my-5 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="!table w-full text-left border-collapse min-w-[400px] text-sm"
-              {...props}
-            />
+      table: ({ ...props }: React.HTMLAttributes<HTMLTableElement>) => {
+        if (isStreaming) {
+          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 (
+          <div className="not-prose overflow-hidden my-5 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="!table w-full text-left border-collapse min-w-[400px] text-sm"
+                {...props}
+              />
+            </div>
           </div>
-        </div>
-      ),
+        );
+      },
       thead: ({ ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
         <thead
           className="!table-header-group bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
@@ -429,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'