@banbox/chat 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -15,12 +15,15 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    }
+    },
+    "./dist/index.css": "./dist/index.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "src",
@@ -75,8 +78,11 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "tsup": "^8.5.0",
     "typescript": "~6.0.3"
   }

package/src/chat/ChatRoot.tsx

@@ -8,29 +8,33 @@ import { GalleryProvider } from "../contexts/GalleryProvider";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
 import InboxPopup from "./InboxPopup";
 import SinglePopup from "./SinglePopup";
+import type { ChatTheme } from "./InboxPopup";
 
 export type ChatRootProps = {
   /**
    * The unified data adapter — provides all threads, messages, and send logic.
-   *
-   * Implement this in your host app:
-   * ```ts
-   * const adapter = createDemoChatAdapter();  // or createApiChatAdapter(...)
-   * ```
    */
   adapter: ChatAdapter;
 
   /**
    * Optional UI callbacks — controls toast notifications, navigation,
    * and the kebab (⋮) menu renderer.
-   *
-   * These delegate UI side-effects back to the host app so the package
-   * stays decoupled from the host's routing and notification systems.
    */
   uiCallbacks?: ChatUICallbacks;
+
+  /**
+   * Visual theme:
+   * - "marketplace" (default) — orange primary (#ff5300)
+   * - "admin"                 — black primary (#1a1a1a)
+   * - custom object           — { primary, primaryActive, surfaceLow }
+   *
+   * @example
+   * <ChatRoot adapter={adapter} theme="admin" />
+   */
+  theme?: ChatTheme;
 };
 
-export default function ChatRoot({ adapter, uiCallbacks }: ChatRootProps) {
+export default function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps) {
   const { isOpen, variant } = useChatUI();
 
   // Lock page scroll whenever the chat is open
@@ -42,7 +46,6 @@ export default function ChatRoot({ adapter, uiCallbacks }: ChatRootProps) {
 
   return createPortal(
     // GalleryProvider is scoped to the chat only.
-    // It is completely separate from the host app's own gallery context.
     <GalleryProvider>
       <AnimatePresence mode="wait">
         {isOpen && (
@@ -51,12 +54,14 @@ export default function ChatRoot({ adapter, uiCallbacks }: ChatRootProps) {
               key="inbox"
               adapter={adapter}
               uiCallbacks={uiCallbacks}
+              theme={theme}
             />
           ) : (
             <SinglePopup
               key="single"
               adapter={adapter}
               uiCallbacks={uiCallbacks}
+              theme={theme}
             />
           )
         )}

package/src/chat/InboxPopup.tsx

@@ -2,11 +2,11 @@
 "use client";
 
 import { motion } from "framer-motion";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import ChatConfirmModal from "../modals/chat/ChatConfirmModal";
 import { useChatUI } from "../contexts/ChatUIContext";
 import { useGallery } from "../contexts/GalleryContext";
+import ChatConfirmModal from "../modals/chat/ChatConfirmModal";
 import ChatFooter from "../ui/chat/ChatFooter";
 import ChatHeader from "../ui/chat/ChatHeader";
 import ChatIdentity from "../ui/chat/ChatIdentity";
@@ -17,37 +17,56 @@ import ChatScroll from "../ui/chat/ChatScroll";
 import type { ChatThreadStatus } from "../ui/chat/ChatThreadItem";
 import ChatThreadItem from "../ui/chat/ChatThreadItem";
 import TypingIndicator from "../ui/chat/TypingIndicator";
-import ChatSpinner from "../ui/chat/ChatSpinner";
 import ChatImagePreviewModal from "./ChatImagePreviewModal";
 
-import type { Thread, Message, MessageRef } from "../types";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
+import type { Message, MessageRef, Thread } from "../types";
+
+/* ─── Types ─── */
+export type ChatTheme =
+  | "marketplace"
+  | "admin"
+  | { primary?: string; primaryActive?: string; surfaceLow?: string };
 
-/* =======================
-   Props
-======================= */
 export type InboxPopupProps = {
-  /** The unified data adapter — provides threads, messages, and send */
   adapter: ChatAdapter;
-  /** UI-level callbacks (toast, navigation, kebab menu) */
   uiCallbacks?: ChatUICallbacks;
+  /** Dynamic theme: "marketplace" (orange), "admin" (black), or custom object */
+  theme?: ChatTheme;
 };
 
-/* =======================
-   Constants
-======================= */
+/* ─── Helpers ─── */
 const avatarBgByInitial: Record<string, string> = {
   K: "#FFE7DB", A: "#FFE5DA", F: "#E8F7FF", B: "#F0EDEB", b: "#F0EDEB",
 };
 
-/* =======================
+const GRADIENT_BORDER =
+  "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
+
+function getThemeAttr(theme?: ChatTheme): string {
+  if (!theme || theme === "marketplace") return "marketplace";
+  if (theme === "admin") return "admin";
+  return "custom";
+}
+
+function getThemeVars(theme?: ChatTheme): React.CSSProperties {
+  if (!theme || theme === "marketplace" || theme === "admin") return {};
+  // Custom theme object — set CSS vars directly
+  const vars: Record<string, string> = {};
+  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
+  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
+  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
+  return vars as React.CSSProperties;
+}
+
+/* ══════════════════════════════════════════════════
    Component
-======================= */
-const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
+══════════════════════════════════════════════════ */
+const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme }) => {
   const { close, selectThread, selectedThreadId, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
 
-  /* ─── Thread list ─── */
+  /* ─── Threads ─── */
   const [threads, setThreads] = useState<Thread[]>(() => adapter.threads.list(reference));
   const refreshThreads = useCallback(
     () => setThreads(adapter.threads.list(reference)),
@@ -55,7 +74,6 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
   );
 
   useEffect(() => {
-    // Immediate sync on mount / reference change
     let rafId = 0;
     rafId = requestAnimationFrame(refreshThreads);
     const unsub = adapter.threads.subscribe(refreshThreads);
@@ -74,12 +92,10 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     activeId ? adapter.messages.list(activeId) : [],
   );
 
-  // Refresh messages when active thread changes or rev bumps
   useEffect(() => {
     if (activeId) setMessages(adapter.messages.list(activeId));
   }, [activeId, rev, adapter]);
 
-  // Subscribe to real-time message updates for the active thread
   useEffect(() => {
     if (!activeId || !adapter.messages.subscribe) return;
     const unsub = adapter.messages.subscribe(activeId, () => {
@@ -88,7 +104,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     return unsub;
   }, [activeId, adapter]);
 
-  /* ─── Derived UI values ─── */
+  /* ─── Derived ─── */
   const initial = activeThread?.avatarText ?? "U";
   const title = activeThread?.title ?? "Unknown";
   const subtitle = activeThread?.subTitle ?? "";
@@ -100,24 +116,17 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
   const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : undefined;
   const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? undefined;
 
-  /* ─── Loading state ─── */
   const [showDelete, setShowDelete] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const scrollKey = `${activeId}-${messages.length}-${rev}`;
 
-  const prevActiveIdRef = React.useRef(activeId);
+  const prevActiveIdRef = useRef(activeId);
   useEffect(() => {
     if (prevActiveIdRef.current !== activeId) {
       prevActiveIdRef.current = activeId;
-      setIsLoading(true);
-      const t = setTimeout(() => setIsLoading(false), 300);
-      // Mark thread as read when switching to it
       if (activeId) adapter.threads.markRead?.(activeId);
-      return () => clearTimeout(t);
     }
   }, [activeId, adapter]);
 
-  /* ─── Reply helper ─── */
   const toRef = (m: Message): MessageRef => ({
     id: m.id,
     author: typeof m.author === "string" ? m.author : "U",
@@ -128,7 +137,6 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     audio: m.audio,
   });
 
-  /* ─── Delete ─── */
   const handleConfirmDelete = () => {
     if (!activeId) { setShowDelete(false); return; }
     adapter.threads.delete(activeId);
@@ -136,52 +144,69 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     if (nextId) selectThread(nextId);
     setReplyTo(undefined);
     setShowDelete(false);
-    uiCallbacks?.showToast?.({
-      type: "success",
-      title: "Chat Deleted",
-      message: "The chat has been deleted successfully.",
-    });
+    uiCallbacks?.showToast?.({ type: "success", title: "Chat Deleted", message: "The chat has been deleted successfully." });
   };
 
+  const filteredThreads = threads.filter((t) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      t.title.toLowerCase().includes(q) ||
+      t.last?.toLowerCase().includes(q) ||
+      t.orderId?.toLowerCase().includes(q) ||
+      t.inquiryId?.toLowerCase().includes(q)
+    );
+  });
+
+  /* ══════════════════════════════════════════════════
+     RENDER
+  ══════════════════════════════════════════════════ */
   return (
     <div className="fixed bottom-4 right-4 z-[10002]">
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        className="fixed inset-0"
+        className="fixed inset-0 cursor-auto!"
+        style={{ background: "transparent", border: "none" }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ type: "tween", duration: 0.25 }}
       />
 
-      {/* Popup wrapper */}
+      {/* Outer gradient border + theme root */}
       <motion.div
         role="dialog"
         aria-modal="true"
-        className="relative rounded-[20px] p-[3px]"
+        data-theme={getThemeAttr(theme)}
+        className="banbox-chat-root relative rounded-[20px] p-[3px]"
         style={{
           width: 800,
           height: 650,
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background:
-            "linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%)",
+          background: GRADIENT_BORDER,
+          ...getThemeVars(theme),
         }}
         initial={{ x: "110%" }}
         animate={{ x: 0 }}
         exit={{ x: "110%" }}
         transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
+        {/* Inner white card */}
         <div
           className="relative h-full w-full overflow-hidden rounded-[18px] bg-white"
           style={{ overscrollBehavior: "contain" }}
         >
           <div className="pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" />
 
-          <div className="grid h-full min-h-0 grid-cols-[1fr_350px]">
-            {/* LEFT — Message area */}
+          {/* TWO-COLUMN GRID */}
+          <div className="grid h-full min-h-0 grid-cols-[1fr_310px]">
+
+            {/* ════ LEFT — chat ════ */}
             <div className="flex h-full min-h-0 flex-col border-r border-[#9BBCCF]">
+
+              {/* Header */}
               <div className="h-[64px] shrink-0">
                 <ChatHeader
                   left={
@@ -201,6 +226,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
                 />
               </div>
 
+              {/* Optional inquiry bar */}
               {idValue && (
                 <div className="shrink-0">
                   <ChatInquiryBar
@@ -215,6 +241,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
                 </div>
               )}
 
+              {/* Messages + typing */}
               <div className="flex-1 min-h-0">
                 <div className="relative h-full min-h-0">
                   <ChatScroll
@@ -249,12 +276,14 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
                     })}
                   </ChatScroll>
 
+                  {/* Typing indicator — pinned at bottom */}
                   <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-start px-4 pb-2 pt-1 bg-white">
                     <TypingIndicator className="pointer-events-auto" />
                   </div>
                 </div>
               </div>
 
+              {/* Footer */}
               <div className="shrink-0">
                 <ChatFooter
                   key={activeId}
@@ -268,44 +297,37 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
               </div>
             </div>
 
-            {/* RIGHT — Thread list */}
-            <div className="h-full min-h-0">
-              <ChatListHeader onClose={close} onSearchChange={(val) => setSearchQuery(val)} />
-              <div className="h-full overflow-y-auto custom-scroll">
-                {threads
-                  .filter((t) => {
-                    if (!searchQuery.trim()) return true;
-                    const q = searchQuery.toLowerCase();
-                    return (
-                      t.title.toLowerCase().includes(q) ||
-                      t.last?.toLowerCase().includes(q) ||
-                      t.orderId?.toLowerCase().includes(q) ||
-                      t.inquiryId?.toLowerCase().includes(q)
-                    );
-                  })
-                  .map((t) => {
-                    const status: ChatThreadStatus = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
-                    return (
-                      <ChatThreadItem
-                        key={t.id}
-                        onClick={() => { setReplyTo(undefined); selectThread(t.id); }}
-                        active={t.id === activeId}
-                        pinned={Boolean(t.pinned)}
-                        online={t.online}
-                        verified={Boolean(t.badge)}
-                        title={t.title}
-                        preview={t.last ?? ""}
-                        time={t.time ?? ""}
-                        status={status}
-                        avatarText={t.avatarText ?? ""}
-                        avatarSrc={t.avatarSrc}
-                      />
-                    );
-                  })}
+            {/* ════ RIGHT — thread list ════ */}
+            <div className="flex h-full min-h-0 flex-col">
+              <div className="shrink-0">
+                <ChatListHeader onClose={close} onSearchChange={(val) => setSearchQuery(val)} />
+              </div>
+              <div className="flex-1 min-h-0 overflow-y-auto custom-scroll">
+                {filteredThreads.map((t) => {
+                  const status: ChatThreadStatus =
+                    t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
+                  return (
+                    <ChatThreadItem
+                      key={t.id}
+                      onClick={() => { setReplyTo(undefined); selectThread(t.id); }}
+                      active={t.id === activeId}
+                      pinned={Boolean(t.pinned)}
+                      online={t.online}
+                      verified={Boolean(t.badge)}
+                      title={t.title}
+                      preview={t.last ?? ""}
+                      time={t.time ?? ""}
+                      status={status}
+                      avatarText={t.avatarText ?? ""}
+                      avatarSrc={t.avatarSrc}
+                    />
+                  );
+                })}
               </div>
             </div>
           </div>
 
+          {/* Modals */}
           <ChatConfirmModal open={showDelete} onClose={() => setShowDelete(false)} onConfirm={handleConfirmDelete} />
           <ChatImagePreviewModal isOpen={isGalleryOpen} onClose={closeGallery} />
         </div>

package/src/chat/SinglePopup.tsx

@@ -13,12 +13,13 @@ import ChatMessageItem from "../ui/chat/ChatMessageItem";
 import ChatScroll from "../ui/chat/ChatScroll";
 import TypingIndicator from "../ui/chat/TypingIndicator";
 
-import type { Thread, Message, MessageRef, Reference } from "../types";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
+import type { Message, MessageRef, Reference, Thread } from "../types";
+import type { ChatTheme } from "./InboxPopup";
 
-/* ─────────────────────────────────────────────────────────────
-   Helpers
-────────────────────────────────────────────────────────────── */
+/* ─── Helpers ─── */
+const GRADIENT_BORDER =
+  "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
 
 function coalesceThreadId(reference: Reference | undefined, threads: Thread[]): string {
   const referenceId = reference?.id;
@@ -45,22 +46,31 @@ function toRef(m: Message): MessageRef {
   };
 }
 
-/* ─────────────────────────────────────────────────────────────
-   Props
-────────────────────────────────────────────────────────────── */
+function getThemeAttr(theme?: ChatTheme): string {
+  if (!theme || theme === "marketplace") return "marketplace";
+  if (theme === "admin") return "admin";
+  return "custom";
+}
+
+function getThemeVars(theme?: ChatTheme): React.CSSProperties {
+  if (!theme || theme === "marketplace" || theme === "admin") return {};
+  const vars: Record<string, string> = {};
+  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
+  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
+  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
+  return vars as React.CSSProperties;
+}
 
 export type SinglePopupProps = {
-  /** The unified data adapter */
   adapter: ChatAdapter;
-  /** UI-level callbacks (toast, navigation) */
   uiCallbacks?: ChatUICallbacks;
+  theme?: ChatTheme;
 };
 
-/* ─────────────────────────────────────────────────────────────
+/* ══════════════════════════════════════════════════
    Component
-────────────────────────────────────────────────────────────── */
-
-const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
+══════════════════════════════════════════════════ */
+const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }) => {
   const { close, reference } = useChatUI();
 
   const threads = adapter.threads.list(reference);
@@ -86,14 +96,12 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
   const online = meta.online ?? activeThread?.online ?? true;
   const subtitle = meta.subtitle ?? "Customer";
 
-  /* ─── Messages ─── */
   const [messages, setMessages] = React.useState<Message[]>(() =>
     activeId ? adapter.messages.list(activeId) : [],
   );
   const [scrollKey, setScrollKey] = React.useState<number>(Date.now());
   const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(undefined);
 
-  // Subscribe to real-time updates
   React.useEffect(() => {
     if (!activeId || !adapter.messages.subscribe) return;
     const unsub = adapter.messages.subscribe(activeId, () => {
@@ -109,9 +117,6 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
     setReplyTo(undefined);
   }, [activeId, adapter]);
 
-  const statusText = activeThread?.status?.kind === "seen" ? "Seen" : "Delivered";
-
-  /* ─── Unused callbacks acknowledged ─── */
   void uiCallbacks;
 
   return (
@@ -121,33 +126,35 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
         aria-label="Close chat"
         onClick={close}
         className="fixed inset-0 cursor-auto!"
+        style={{ background: "transparent", border: "none" }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ type: "tween", duration: 0.25 }}
       />
 
-      {/* Outer gradient wrapper */}
+      {/* Outer gradient border + theme root */}
       <motion.div
         role="dialog"
         aria-modal="true"
-        className="relative h-[650px] w-[450px] rounded-[20px] p-[2px]"
+        data-theme={getThemeAttr(theme)}
+        className="banbox-chat-root relative h-[650px] w-[450px] rounded-[20px] p-[2px]"
         style={{
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background:
-            "linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%)",
+          background: GRADIENT_BORDER,
+          ...getThemeVars(theme),
         }}
         initial={{ x: "110%" }}
         animate={{ x: 0 }}
         exit={{ x: "110%" }}
         transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
-        {/* Inner card */}
+        {/* Inner white card */}
         <div
           className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
           style={{ overscrollBehavior: "contain" }}
         >
-          {/* Header */}
+          {/* Header — 64px */}
           <div className="h-[64px] shrink-0">
             <ChatHeader
               left={
@@ -165,7 +172,7 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
                 <button
                   type="button"
                   onClick={close}
-                  className="flex h-[34px] w-[34px] items-center justify-center rounded-full bg-white text-black shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5 hover:text-[#ff5301] cursor-pointer"
+                  className="flex h-[34px] w-[34px] items-center justify-center rounded-full bg-white text-black shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5 hover:text-[var(--color-banbox-warning)] cursor-pointer border-none"
                 >
                   <ChatXIcon className="h-6 w-6" />
                 </button>
@@ -173,9 +180,13 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
             />
           </div>
 
-          {/* Messages */}
+          {/* Messages — flex-1 */}
           <div className="flex-1 min-h-0">
-            <ChatScroll className="h-full" bottomAlignWhenShort={false} scrollKey={scrollKey}>
+            <ChatScroll
+              className="h-full"
+              bottomAlignWhenShort={false}
+              scrollKey={scrollKey}
+            >
               {messages.map((m, idx) => {
                 const mine = m.author === "you";
                 const isLast = idx === messages.length - 1;
@@ -195,13 +206,13 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
                     replyTo={m.replyTo}
                     initialSrc={m.avatarSrc}
                     showStatus={isLast}
-                    status={statusText}
+                    status={activeThread?.status?.kind === "seen" ? "Seen" : "Delivered"}
                     onReply={() => setReplyTo(toRef(m))}
                   />
                 );
               })}
 
-              {/* Typing */}
+              {/* Typing indicator */}
               <div className="flex items-center justify-start">
                 <TypingIndicator />
               </div>

package/src/index.ts

@@ -8,6 +8,9 @@
 export { default as ChatRoot } from "./chat/ChatRoot";
 export type { ChatRootProps } from "./chat/ChatRoot";
 
+// ── Theme type ────────────────────────────────────────────────────────────────
+export type { ChatTheme } from "./chat/InboxPopup";
+
 // ── Adapter interfaces (implement these in your host app) ─────────────────────
 export type { ChatAdapter, ChatUICallbacks, KebabMenuOpts, ToastOpts } from "./adapter/types";