@xbrain-swe/nova-chat-widget 0.1.7 → 0.1.8

package/dist/index.cjs

@@ -1552,6 +1552,28 @@ function XbNovaChat({
     nudgeNodeId: activeNudgeNodeId,
     onDismissSheet: () => setOpen(false)
   });
+  const effectiveBotId = activeBotId ?? botId;
+  const [cachedBranding, setCachedBranding] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    try {
+      const raw = window.localStorage.getItem(`xbnova_branding:${effectiveBotId}`);
+      setCachedBranding(raw ? JSON.parse(raw) : null);
+    } catch {
+      setCachedBranding(null);
+    }
+  }, [effectiveBotId]);
+  (0, import_react9.useEffect)(() => {
+    if (!onboarding?.branding) return;
+    try {
+      window.localStorage.setItem(
+        `xbnova_branding:${effectiveBotId}`,
+        JSON.stringify({ logo_url: onboarding.branding.logo_url, avatar_text: onboarding.branding.avatar_text })
+      );
+    } catch {
+    }
+  }, [onboarding?.branding, effectiveBotId]);
+  const branding = onboarding?.branding ?? cachedBranding ?? void 0;
+  const brandingReady = Boolean(onboarding) || cachedBranding !== null || Boolean(error);
   (0, import_react9.useEffect)(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -1679,7 +1701,8 @@ function XbNovaChat({
                         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           Avatar,
                           {
-                            branding: onboarding?.branding,
+                            branding,
+                            ready: brandingReady,
                             size: avatarSize,
                             className: "shadow-md",
                             gradient: avatarGradientStyle
@@ -1728,7 +1751,8 @@ function XbNovaChat({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Avatar,
               {
-                branding: onboarding?.branding,
+                branding,
+                ready: brandingReady,
                 size: headerAvatarSize,
                 className: "shrink-0",
                 gradient: avatarGradientStyle
@@ -1848,6 +1872,7 @@ function XbNovaChat({
 }
 function Avatar({
   branding,
+  ready,
   size,
   className = "",
   gradient
@@ -1855,27 +1880,26 @@ function Avatar({
   const box = { width: size, height: size };
   const logoUrl = branding?.logo_url?.trim() ?? "";
   const [failedUrl, setFailedUrl] = (0, import_react9.useState)("");
+  const [loadedUrl, setLoadedUrl] = (0, import_react9.useState)("");
+  const base = `${className} relative flex flex-none items-center justify-center overflow-hidden rounded-full font-bold text-white`;
+  if (!ready) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: base, style: { ...gradient, ...box }, "aria-hidden": true });
+  }
   if (logoUrl && failedUrl !== logoUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: base, style: { ...gradient, ...box }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "img",
       {
         src: logoUrl,
         alt: "",
+        onLoad: () => setLoadedUrl(logoUrl),
         onError: () => setFailedUrl(logoUrl),
-        style: box,
-        className: `${className} flex-none rounded-full bg-white object-cover`
+        className: "absolute inset-0 h-full w-full rounded-full bg-white object-cover transition-opacity duration-200",
+        style: { opacity: loadedUrl === logoUrl ? 1 : 0 }
       }
-    );
+    ) });
   }
   const text = branding?.avatar_text?.trim() || "AI";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "span",
-    {
-      className: `${className} flex flex-none items-center justify-center rounded-full font-bold text-white`,
-      style: { ...gradient, ...box, fontSize: Math.max(10, Math.round(size * 0.4)) },
-      children: text
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: base, style: { ...gradient, ...box, fontSize: Math.max(10, Math.round(size * 0.4)) }, children: text });
 }
 function Bubble({ role, children }) {
   const mine = role === "user";