@retrivora-ai/rag-engine 1.3.3 → 1.3.5

package/dist/index.js

@@ -335,10 +335,9 @@ function sanitizeJson(raw) {
   s = s.replace(/,\s*([}\]])/g, "$1");
   s = s.replace(/([{,])\s*""\s*(?=[,}])/g, "$1");
   {
+    const stack = [];
     let inString = false;
     let escape = false;
-    let braces = 0;
-    let brackets = 0;
     for (const ch of s) {
       if (escape) {
         escape = false;
@@ -353,23 +352,21 @@ function sanitizeJson(raw) {
         continue;
       }
       if (inString) continue;
-      if (ch === "{") braces++;
-      else if (ch === "}") braces--;
-      else if (ch === "[") brackets++;
-      else if (ch === "]") brackets--;
+      if (ch === "{" || ch === "[") {
+        stack.push(ch);
+      } else if (ch === "}") {
+        if (stack[stack.length - 1] === "{") stack.pop();
+      } else if (ch === "]") {
+        if (stack[stack.length - 1] === "[") stack.pop();
+      }
     }
     if (inString) s += '"';
-    while (brackets > 0) {
-      s += "]";
-      brackets--;
-    }
-    while (braces > 0) {
-      s += "}";
-      braces--;
+    for (let i = stack.length - 1; i >= 0; i--) {
+      s += stack[i] === "{" ? "}" : "]";
     }
   }
   const lastClose = Math.max(s.lastIndexOf("}"), s.lastIndexOf("]"));
-  if (lastClose !== -1 && lastClose < s.length - 1) {
+  if (lastClose !== -1 && lastClose < s.length - 1 && /\S/.test(s.slice(lastClose + 1))) {
     s = s.substring(0, lastClose + 1);
   }
   return s;
@@ -384,8 +381,9 @@ function resolveImage(data) {
   }
   return void 0;
 }
-function ChartBlock({ rawContent, primaryColor, accentColor }) {
+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." };
     try {
       const sanitized = sanitizeJson(rawContent);
@@ -396,7 +394,10 @@ function ChartBlock({ rawContent, primaryColor, accentColor }) {
       console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
       return { error: String(err) };
     }
-  }, [rawContent]);
+  }, [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..."));
+  }
   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."));
   }
@@ -527,14 +528,15 @@ function MessageBubble({
             {
               rawContent: String(children != null ? children : "").trim(),
               primaryColor,
-              accentColor
+              accentColor,
+              isStreaming
             }
           );
         }
         return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),
-    [primaryColor, accentColor]
+    [primaryColor, accentColor, isStreaming]
   );
   return /* @__PURE__ */ import_react5.default.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react5.default.createElement(
     "div",

package/dist/index.mjs

@@ -298,10 +298,9 @@ function sanitizeJson(raw) {
   s = s.replace(/,\s*([}\]])/g, "$1");
   s = s.replace(/([{,])\s*""\s*(?=[,}])/g, "$1");
   {
+    const stack = [];
     let inString = false;
     let escape = false;
-    let braces = 0;
-    let brackets = 0;
     for (const ch of s) {
       if (escape) {
         escape = false;
@@ -316,23 +315,21 @@ function sanitizeJson(raw) {
         continue;
       }
       if (inString) continue;
-      if (ch === "{") braces++;
-      else if (ch === "}") braces--;
-      else if (ch === "[") brackets++;
-      else if (ch === "]") brackets--;
+      if (ch === "{" || ch === "[") {
+        stack.push(ch);
+      } else if (ch === "}") {
+        if (stack[stack.length - 1] === "{") stack.pop();
+      } else if (ch === "]") {
+        if (stack[stack.length - 1] === "[") stack.pop();
+      }
     }
     if (inString) s += '"';
-    while (brackets > 0) {
-      s += "]";
-      brackets--;
-    }
-    while (braces > 0) {
-      s += "}";
-      braces--;
+    for (let i = stack.length - 1; i >= 0; i--) {
+      s += stack[i] === "{" ? "}" : "]";
     }
   }
   const lastClose = Math.max(s.lastIndexOf("}"), s.lastIndexOf("]"));
-  if (lastClose !== -1 && lastClose < s.length - 1) {
+  if (lastClose !== -1 && lastClose < s.length - 1 && /\S/.test(s.slice(lastClose + 1))) {
     s = s.substring(0, lastClose + 1);
   }
   return s;
@@ -347,8 +344,9 @@ function resolveImage(data) {
   }
   return void 0;
 }
-function ChartBlock({ rawContent, primaryColor, accentColor }) {
+function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
   const result = React5.useMemo(() => {
+    if (isStreaming) return { loading: true };
     if (!rawContent || rawContent === "undefined") return { error: "Empty chart config." };
     try {
       const sanitized = sanitizeJson(rawContent);
@@ -359,7 +357,10 @@ function ChartBlock({ rawContent, primaryColor, accentColor }) {
       console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
       return { error: String(err) };
     }
-  }, [rawContent]);
+  }, [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..."));
+  }
   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."));
   }
@@ -490,14 +491,15 @@ function MessageBubble({
             {
               rawContent: String(children != null ? children : "").trim(),
               primaryColor,
-              accentColor
+              accentColor,
+              isStreaming
             }
           );
         }
         return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),
-    [primaryColor, accentColor]
+    [primaryColor, accentColor, isStreaming]
   );
   return /* @__PURE__ */ React5.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React5.createElement(
     "div",

package/package.json

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

@@ -46,36 +46,45 @@ function sanitizeJson(raw: string): string {
   // 6. Remove completely empty key-value pairs left by prior cleanup
   s = s.replace(/([{,])\s*""\s*(?=[,}])/g, '$1');
 
-  // 7. Balance braces/brackets: walk char-by-char, track depth, append closers
-  //    Do this BEFORE the lastValidIndex trim so we don't cut valid JSON.
+  // 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 {..., [..., {...}]}.
   {
+    const stack: ('{' | '[')[] = [];
     let inString = false;
     let escape = false;
-    let braces = 0;
-    let brackets = 0;
 
     for (const ch of s) {
       if (escape) { escape = false; continue; }
       if (ch === '\\' && inString) { escape = true; continue; }
       if (ch === '"') { inString = !inString; continue; }
       if (inString) continue;
-      if (ch === '{') braces++;
-      else if (ch === '}') braces--;
-      else if (ch === '[') brackets++;
-      else if (ch === ']') brackets--;
+
+      if (ch === '{' || ch === '[') {
+        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();
+      }
     }
 
-    // Close any unclosed string first
+    // Close any unterminated string literal first
     if (inString) s += '"';
-    // Then close structures in the correct order
-    while (brackets > 0) { s += ']'; brackets--; }
-    while (braces > 0) { s += '}'; braces--; }
+
+    // Close every unclosed opener in reverse (innermost first)
+    for (let i = stack.length - 1; i >= 0; i--) {
+      s += stack[i] === '{' ? '}' : ']';
+    }
   }
 
-  // 8. Trim to the last valid closing char only if there is trailing garbage
-  //    (e.g. a partial second object after the first one ends)
+  // 8. Trim trailing garbage that appears after the outermost closing char.
+  //    Only fires when something non-whitespace follows the last } or ].
   const lastClose = Math.max(s.lastIndexOf('}'), s.lastIndexOf(']'));
-  if (lastClose !== -1 && lastClose < s.length - 1) {
+  if (lastClose !== -1 && lastClose < s.length - 1 && /\S/.test(s.slice(lastClose + 1))) {
     s = s.substring(0, lastClose + 1);
   }
 
@@ -101,10 +110,12 @@ interface ChartBlockProps {
   rawContent: string;
   primaryColor: string;
   accentColor: string;
+  isStreaming?: boolean;
 }
 
-function ChartBlock({ rawContent, primaryColor, accentColor }: ChartBlockProps) {
-  const result = React.useMemo<{ config: ChartConfig } | { error: string }>(() => {
+function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }: ChartBlockProps) {
+  const result = React.useMemo<{ config: ChartConfig } | { error: string } | { loading: boolean }>(() => {
+    if (isStreaming) return { loading: true };
     if (!rawContent || rawContent === 'undefined') return { error: 'Empty chart config.' };
     try {
       const sanitized = sanitizeJson(rawContent);
@@ -115,7 +126,16 @@ function ChartBlock({ rawContent, primaryColor, accentColor }: ChartBlockProps)
       console.error('[ChartBlock] Parsing failed.\nError:', err, '\nSanitized:\n', sanitized);
       return { error: String(err) };
     }
-  }, [rawContent]);
+  }, [rawContent, isStreaming]);
+
+  if ('loading' in result) {
+    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>
+      </div>
+    );
+  }
 
   if ('error' in result) {
     return (
@@ -211,10 +231,7 @@ export function MessageBubble({
       const mentioned =
         contentLower.includes(p.name.toLowerCase()) ||
         (p.brand ? contentLower.includes(p.brand.toLowerCase()) : false);
-      if (mentioned) {
-        seen.add(id);
-        return true;
-      }
+      if (mentioned) { seen.add(id); return true; }
       return false;
     });
   }, [productsFromSources, productsFromContent, message.content]);
@@ -263,6 +280,7 @@ export function MessageBubble({
               rawContent={String(children ?? '').trim()}
               primaryColor={primaryColor}
               accentColor={accentColor}
+              isStreaming={isStreaming}
             />
           );
         }
@@ -276,7 +294,7 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor],
+    [primaryColor, accentColor, isStreaming],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────