@banbox/chat 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/chat/SinglePopup.tsx

@@ -49,6 +49,16 @@ function toRef(m: Message): MessageRef {
   };
 }
 
+/** Maps the first letter of a name to a deterministic background colour. */
+const avatarBgByInitial: Record<string, string> = {
+  a: "#FFE4E4", b: "#E4F0FF", c: "#E4FFE9", d: "#FFF4E4", e: "#F4E4FF",
+  f: "#FFE4F4", g: "#E4FFFF", h: "#FFFFE4", i: "#E4E4FF", j: "#FFE9E4",
+  k: "#E4FFE4", l: "#FFE4EA", m: "#E8E4FF", n: "#E4F8FF", o: "#FFF0E4",
+  p: "#F0FFE4", q: "#FFE4F8", r: "#E4FFEC", s: "#FFEEE4", t: "#E4EAFF",
+  u: "#F8FFE4", v: "#FFE4EE", w: "#E4FFFA", x: "#FFF8E4", y: "#EAE4FF",
+  z: "#E4FFF0",
+};
+
 
 
 export type SinglePopupProps = {
@@ -95,12 +105,26 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
     title?: string;
     online?: boolean;
     subtitle?: string;
+    avatarSrc?: string;
   };
 
-  const initialSrc = activeThread?.avatarSrc ?? "/shop/ban-box.png";
+  // ── Avatar resolution (priority: meta > thread) ──────────────────────
+  // If there is no src, fall through to the initial-letter avatar instead
+  // of rendering a broken image (never hardcode a host-app-specific path).
+  const avatarSrc: string | undefined =
+    meta.avatarSrc ?? activeThread?.avatarSrc;
+
+  const initial = (
+    meta.initial ??
+    activeThread?.avatarText ??
+    (activeThread?.title ?? meta.title ?? "?").charAt(0).toUpperCase()
+  );
+  const avatarBg =
+    avatarBgByInitial[initial.toLowerCase()] ?? "#E4F0FF";
+
   const title = meta.title ?? activeThread?.title ?? "Unknown";
-  const online = meta.online ?? activeThread?.online ?? true;
-  const subtitle = meta.subtitle ?? "Customer";
+  const online = meta.online ?? activeThread?.online ?? false;
+  const subtitle = meta.subtitle ?? activeThread?.subTitle ?? "Customer";
 
   const [messages, setMessages] = React.useState<Message[]>(() =>
     activeId ? adapter.messages.list(activeId) : [],
@@ -175,15 +199,28 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
           <div className="h-[64px] shrink-0">
             <ChatHeader
               left={
-                <ChatIdentity
-                  variant="avatar"
-                  src={initialSrc}
-                  online={online}
-                  title={title}
-                  subtitle={subtitle}
-                  verified={isVerified}
-                  subtitleVariant="muted"
-                />
+                avatarSrc ? (
+                  <ChatIdentity
+                    variant="avatar"
+                    src={avatarSrc}
+                    online={online}
+                    title={title}
+                    subtitle={subtitle}
+                    verified={isVerified}
+                    subtitleVariant="muted"
+                  />
+                ) : (
+                  <ChatIdentity
+                    variant="initial"
+                    initial={initial}
+                    bg={avatarBg}
+                    online={online}
+                    title={title}
+                    subtitle={subtitle}
+                    verified={isVerified}
+                    subtitleVariant="muted"
+                  />
+                )
               }
               right={
                 <div className="flex items-center gap-1">