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

package/dist/index.cjs

@@ -1523,6 +1523,7 @@ function XbNovaChat({
   backdropStyle,
   defaultOpen = false,
   idleText = "AI\uC5D0\uAC8C \uC774 \uCC28 \uBB3C\uC5B4\uBCF4\uAE30",
+  avatarSize = 28,
   onVerdictAction
 }) {
   const { auth, trackRegistry, factsRegistry, visitorId, clientActionHandlers, theme } = useXbNovaInternal();
@@ -1530,6 +1531,7 @@ function XbNovaChat({
     "--xbnova-accent-1": theme.accentFrom,
     "--xbnova-accent-2": theme.accentTo
   };
+  const headerAvatarSize = Math.min(36, Math.max(24, Math.round(avatarSize * 0.8)));
   const avatarGradientStyle = {
     background: "linear-gradient(135deg, var(--xbnova-accent-1), var(--xbnova-accent-2))"
   };
@@ -1550,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]);
@@ -1677,8 +1701,10 @@ function XbNovaChat({
                         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           Avatar,
                           {
-                            branding: onboarding?.branding,
-                            className: "h-7 w-7 text-[11px] shadow-md",
+                            branding,
+                            ready: brandingReady,
+                            size: avatarSize,
+                            className: "shadow-md",
                             gradient: avatarGradientStyle
                           }
                         )
@@ -1725,8 +1751,10 @@ function XbNovaChat({
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Avatar,
               {
-                branding: onboarding?.branding,
-                className: "h-6 w-6 shrink-0 text-[10px]",
+                branding,
+                ready: brandingReady,
+                size: headerAvatarSize,
+                className: "shrink-0",
                 gradient: avatarGradientStyle
               }
             ),
@@ -1844,31 +1872,34 @@ function XbNovaChat({
 }
 function Avatar({
   branding,
-  className,
+  ready,
+  size,
+  className = "",
   gradient
 }) {
+  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),
-        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 items-center justify-center rounded-full font-bold text-white`,
-      style: gradient,
-      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";