@retrivora-ai/rag-engine 1.3.4 → 1.3.5

package/dist/index.js

@@ -381,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);
@@ -393,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."));
   }
@@ -524,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

@@ -344,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);
@@ -356,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."));
   }
@@ -487,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.4",
+  "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

@@ -110,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);
@@ -124,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 (
@@ -269,6 +280,7 @@ export function MessageBubble({
               rawContent={String(children ?? '').trim()}
               primaryColor={primaryColor}
               accentColor={accentColor}
+              isStreaming={isStreaming}
             />
           );
         }
@@ -282,7 +294,7 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor],
+    [primaryColor, accentColor, isStreaming],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────