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

package/dist/index.d.cts

@@ -148,7 +148,7 @@ type ViewRenderer = (props: {
 }) => React.ReactNode;
 type ViewRendererMap = Partial<Record<ViewKind, ViewRenderer>>;
 
-declare function XbNovaChat({ viewRenderers, botId, barStyle, panelStyle, backdropStyle, defaultOpen, idleText, onVerdictAction, }: {
+declare function XbNovaChat({ viewRenderers, botId, barStyle, panelStyle, backdropStyle, defaultOpen, idleText, avatarSize, onVerdictAction, }: {
     /** 특정 view만 자체 컴포넌트로 덮어쓰고 싶을 때 — 지정 안 한 view는 기본 렌더러를 쓴다. */
     viewRenderers?: ViewRendererMap;
     /** Provider의 기본 봇 대신 다른 봇과 고정적으로 대화하고 싶을 때. 힌트를 눌러 열면
@@ -167,6 +167,9 @@ declare function XbNovaChat({ viewRenderers, botId, barStyle, panelStyle, backdr
     defaultOpen?: boolean;
     /** 기본(idle) 상태 바 문구. */
     idleText?: string;
+    /** 바(AI 버튼)의 동그란 아바타 지름(px), 기본 28. 바의 접힌 원은 52px이라 44~48이면 원을 거의 채운다.
+     * 채팅 헤더의 아바타는 이 값에 맞춰 24~36px로 따라 커진다. */
+    avatarSize?: number;
     /** 판단 카드의 행동 버튼을 눌렀을 때 — 실제 동작(상담신청 폼 열기, 섹션 스크롤 등)은
      * 소비자가 정한다. SDK는 버튼에 적힌 `action` 문자열을 그대로 넘겨줄 뿐 뜻을 모른다. */
     onVerdictAction?: (action: string) => void;

package/dist/index.d.ts

@@ -148,7 +148,7 @@ type ViewRenderer = (props: {
 }) => React.ReactNode;
 type ViewRendererMap = Partial<Record<ViewKind, ViewRenderer>>;
 
-declare function XbNovaChat({ viewRenderers, botId, barStyle, panelStyle, backdropStyle, defaultOpen, idleText, onVerdictAction, }: {
+declare function XbNovaChat({ viewRenderers, botId, barStyle, panelStyle, backdropStyle, defaultOpen, idleText, avatarSize, onVerdictAction, }: {
     /** 특정 view만 자체 컴포넌트로 덮어쓰고 싶을 때 — 지정 안 한 view는 기본 렌더러를 쓴다. */
     viewRenderers?: ViewRendererMap;
     /** Provider의 기본 봇 대신 다른 봇과 고정적으로 대화하고 싶을 때. 힌트를 눌러 열면
@@ -167,6 +167,9 @@ declare function XbNovaChat({ viewRenderers, botId, barStyle, panelStyle, backdr
     defaultOpen?: boolean;
     /** 기본(idle) 상태 바 문구. */
     idleText?: string;
+    /** 바(AI 버튼)의 동그란 아바타 지름(px), 기본 28. 바의 접힌 원은 52px이라 44~48이면 원을 거의 채운다.
+     * 채팅 헤더의 아바타는 이 값에 맞춰 24~36px로 따라 커진다. */
+    avatarSize?: number;
     /** 판단 카드의 행동 버튼을 눌렀을 때 — 실제 동작(상담신청 폼 열기, 섹션 스크롤 등)은
      * 소비자가 정한다. SDK는 버튼에 적힌 `action` 문자열을 그대로 넘겨줄 뿐 뜻을 모른다. */
     onVerdictAction?: (action: string) => void;

package/dist/index.js

@@ -1476,6 +1476,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();
@@ -1483,6 +1484,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))"
   };
@@ -1503,6 +1505,28 @@ function XbNovaChat({
     nudgeNodeId: activeNudgeNodeId,
     onDismissSheet: () => setOpen(false)
   });
+  const effectiveBotId = activeBotId ?? botId;
+  const [cachedBranding, setCachedBranding] = useState4(null);
+  useEffect8(() => {
+    try {
+      const raw = window.localStorage.getItem(`xbnova_branding:${effectiveBotId}`);
+      setCachedBranding(raw ? JSON.parse(raw) : null);
+    } catch {
+      setCachedBranding(null);
+    }
+  }, [effectiveBotId]);
+  useEffect8(() => {
+    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);
   useEffect8(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -1630,8 +1654,10 @@ function XbNovaChat({
                         children: /* @__PURE__ */ jsx7(
                           Avatar,
                           {
-                            branding: onboarding?.branding,
-                            className: "h-7 w-7 text-[11px] shadow-md",
+                            branding,
+                            ready: brandingReady,
+                            size: avatarSize,
+                            className: "shadow-md",
                             gradient: avatarGradientStyle
                           }
                         )
@@ -1678,8 +1704,10 @@ function XbNovaChat({
             /* @__PURE__ */ jsx7(
               Avatar,
               {
-                branding: onboarding?.branding,
-                className: "h-6 w-6 shrink-0 text-[10px]",
+                branding,
+                ready: brandingReady,
+                size: headerAvatarSize,
+                className: "shrink-0",
                 gradient: avatarGradientStyle
               }
             ),
@@ -1797,31 +1825,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] = useState4("");
+  const [loadedUrl, setLoadedUrl] = useState4("");
+  const base = `${className} relative flex flex-none items-center justify-center overflow-hidden rounded-full font-bold text-white`;
+  if (!ready) {
+    return /* @__PURE__ */ jsx7("span", { className: base, style: { ...gradient, ...box }, "aria-hidden": true });
+  }
   if (logoUrl && failedUrl !== logoUrl) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx7("span", { className: base, style: { ...gradient, ...box }, children: /* @__PURE__ */ jsx7(
       "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__ */ jsx7(
-    "span",
-    {
-      className: `${className} flex items-center justify-center rounded-full font-bold text-white`,
-      style: gradient,
-      children: text
-    }
-  );
+  return /* @__PURE__ */ jsx7("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";