@banbox/chat 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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

@@ -22,32 +22,47 @@ import ChatImagePreviewModal from "./ChatImagePreviewModal";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
 import type { Message, MessageRef, Thread } from "../types";
 
-/* =======================
-   Props
-======================= */
+/* ─── Types ─── */
+export type ChatTheme =
+  | "marketplace"
+  | "admin"
+  | { primary?: string; primaryActive?: string; surfaceLow?: string };
+
 export type InboxPopupProps = {
   adapter: ChatAdapter;
   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",
+  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();
 
@@ -62,10 +77,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     let rafId = 0;
     rafId = requestAnimationFrame(refreshThreads);
     const unsub = adapter.threads.subscribe(refreshThreads);
-    return () => {
-      cancelAnimationFrame(rafId);
-      unsub();
-    };
+    return () => { cancelAnimationFrame(rafId); unsub(); };
   }, [adapter, reference, refreshThreads]);
 
   /* ─── Active thread & messages ─── */
@@ -100,22 +112,13 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
   const isVerified = Boolean(activeThread?.badge);
   const avatarBg = avatarBgByInitial[initial] ?? "#FFF1EC";
 
-  const idLabel = activeThread?.orderId
-    ? "Order ID"
-    : activeThread?.inquiryId
-      ? "Inquiry ID"
-      : undefined;
-  const idButtonLabel = activeThread?.orderId
-    ? "View Order"
-    : activeThread?.inquiryId
-      ? "View Inquiry"
-      : undefined;
+  const idLabel = activeThread?.orderId ? "Order ID" : activeThread?.inquiryId ? "Inquiry ID" : undefined;
+  const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : undefined;
   const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? undefined;
 
   const [showDelete, setShowDelete] = useState(false);
   const scrollKey = `${activeId}-${messages.length}-${rev}`;
 
-  /* mark read on switch */
   const prevActiveIdRef = useRef(activeId);
   useEffect(() => {
     if (prevActiveIdRef.current !== activeId) {
@@ -124,7 +127,6 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     }
   }, [activeId, adapter]);
 
-  /* ─── Helpers ─── */
   const toRef = (m: Message): MessageRef => ({
     id: m.id,
     author: typeof m.author === "string" ? m.author : "U",
@@ -136,23 +138,15 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
   });
 
   const handleConfirmDelete = () => {
-    if (!activeId) {
-      setShowDelete(false);
-      return;
-    }
+    if (!activeId) { setShowDelete(false); return; }
     adapter.threads.delete(activeId);
     const nextId = threads.filter((t) => t.id !== activeId)[0]?.id;
     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." });
   };
 
-  /* ─── Filtered threads ─── */
   const filteredThreads = threads.filter((t) => {
     if (!searchQuery.trim()) return true;
     const q = searchQuery.toLowerCase();
@@ -168,30 +162,31 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
      RENDER
   ══════════════════════════════════════════════════ */
   return (
-    <div style={{ position: "fixed", bottom: 16, right: 16, zIndex: 10002 }}>
+    <div className="fixed bottom-4 right-4 z-[10002]">
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        style={{ position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" }}
+        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 border wrapper */}
+      {/* Outer gradient border + theme root */}
       <motion.div
         role="dialog"
         aria-modal="true"
+        data-theme={getThemeAttr(theme)}
+        className="banbox-chat-root relative rounded-[20px] p-[3px]"
         style={{
-          position: "relative",
           width: 800,
           height: 650,
-          borderRadius: 20,
-          padding: 3,
           boxShadow: "0px 2px 12px 0px #3B33331A",
           background: GRADIENT_BORDER,
+          ...getThemeVars(theme),
         }}
         initial={{ x: "110%" }}
         animate={{ x: 0 }}
@@ -200,68 +195,31 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
       >
         {/* Inner white card */}
         <div
-          style={{
-            position: "relative",
-            height: "100%",
-            width: "100%",
-            overflow: "hidden",
-            borderRadius: 18,
-            backgroundColor: "#fff",
-            overscrollBehavior: "contain",
-          }}
+          className="relative h-full w-full overflow-hidden rounded-[18px] bg-white"
+          style={{ overscrollBehavior: "contain" }}
         >
-          {/* ── TWO-COLUMN GRID: LEFT chat | RIGHT thread list ── */}
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 310px",
-              height: "100%",
-              minHeight: 0,
-            }}
-          >
-            {/* ════════ LEFT — chat area ════════ */}
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                height: "100%",
-                minHeight: 0,
-                borderRight: "1px solid #9BBCCF",
-              }}
-            >
-              {/* Chat header — 64px fixed */}
-              <div style={{ height: 64, flexShrink: 0 }}>
+          <div className="pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" />
+
+          {/* 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={
                     activeThread?.avatarSrc ? (
-                      <ChatIdentity
-                        variant="avatar"
-                        src={activeThread.avatarSrc}
-                        online={online}
-                        title={title}
-                        subtitle={subtitle}
-                        verified={isVerified}
-                        subtitleVariant="muted"
-                      />
+                      <ChatIdentity variant="avatar" src={activeThread.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"
-                      />
+                      <ChatIdentity variant="initial" initial={initial} bg={avatarBg} online={online} title={title} subtitle={subtitle} verified={isVerified} subtitleVariant="muted" />
                     )
                   }
                   right={
                     uiCallbacks?.renderKebabMenu?.({
                       pinned: Boolean(activeThread?.pinned),
-                      onPinToggle: () => {
-                        if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
-                      },
+                      onPinToggle: () => { if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned); },
                       onDelete: () => setShowDelete(true),
                     }) ?? null
                   }
@@ -270,7 +228,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
 
               {/* Optional inquiry bar */}
               {idValue && (
-                <div style={{ flexShrink: 0 }}>
+                <div className="shrink-0">
                   <ChatInquiryBar
                     id={idValue}
                     label={idLabel}
@@ -283,66 +241,50 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
                 </div>
               )}
 
-              {/* Messages area — fills remaining space */}
-              <div style={{ flex: 1, minHeight: 0, position: "relative" }}>
-                <ChatScroll
-                  className="h-full pb-10"
-                  bottomAlignWhenShort={false}
-                  scrollKey={scrollKey}
-                  style={{ height: "100%", overflowY: "auto" }}
-                >
-                  {messages.map((m, idx) => {
-                    const mine = m.author === "you";
-                    const isLast = idx === messages.length - 1;
-                    return (
-                      <ChatMessageItem
-                        key={m.id}
-                        id={m.id}
-                        mine={mine}
-                        time={m.time ?? ""}
-                        authorInitial={typeof m.author === "string" ? m.author : "U"}
-                        avatarBg={avatarBg}
-                        text={m.text ?? m.content}
-                        businessCard={
-                          m.businessCard as Parameters<typeof ChatMessageItem>[0]["businessCard"]
-                        }
-                        addressCard={
-                          m.addressCard as Parameters<typeof ChatMessageItem>[0]["addressCard"]
-                        }
-                        images={m.images}
-                        files={m.files}
-                        audio={m.audio}
-                        replyTo={m.replyTo}
-                        showStatus={isLast}
-                        status={activeThread?.status?.kind === "seen" ? "Seen" : "Delivered"}
-                        onReply={() => setReplyTo(toRef(m))}
-                        initialSrc={m.avatarSrc}
-                      />
-                    );
-                  })}
-                </ChatScroll>
-
-                {/* Typing indicator — pinned at bottom of messages */}
-                <div
-                  style={{
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-start",
-                    padding: "4px 16px 8px",
-                    background: "#fff",
-                    pointerEvents: "none",
-                  }}
-                >
-                  <TypingIndicator style={{ pointerEvents: "auto" }} />
+              {/* Messages + typing */}
+              <div className="flex-1 min-h-0">
+                <div className="relative h-full min-h-0">
+                  <ChatScroll
+                    className="h-full pb-10"
+                    bottomAlignWhenShort={false}
+                    scrollKey={scrollKey}
+                  >
+                    {messages.map((m, idx) => {
+                      const mine = m.author === "you";
+                      const isLast = idx === messages.length - 1;
+                      return (
+                        <ChatMessageItem
+                          key={m.id}
+                          id={m.id}
+                          mine={mine}
+                          time={m.time ?? ""}
+                          authorInitial={typeof m.author === "string" ? m.author : "U"}
+                          avatarBg={avatarBg}
+                          text={m.text ?? m.content}
+                          businessCard={m.businessCard as Parameters<typeof ChatMessageItem>[0]["businessCard"]}
+                          addressCard={m.addressCard as Parameters<typeof ChatMessageItem>[0]["addressCard"]}
+                          images={m.images}
+                          files={m.files}
+                          audio={m.audio}
+                          replyTo={m.replyTo}
+                          showStatus={isLast}
+                          status={activeThread?.status?.kind === "seen" ? "Seen" : "Delivered"}
+                          onReply={() => setReplyTo(toRef(m))}
+                          initialSrc={m.avatarSrc}
+                        />
+                      );
+                    })}
+                  </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>
 
-              {/* Chat footer — shrinks to content height */}
-              <div style={{ flexShrink: 0 }}>
+              {/* Footer */}
+              <div className="shrink-0">
                 <ChatFooter
                   key={activeId}
                   replyTo={replyTo}
@@ -355,28 +297,19 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
               </div>
             </div>
 
-            {/* ════════ RIGHT — thread list ════════ */}
-            <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
-              {/* List header — 64px fixed */}
-              <div style={{ flexShrink: 0 }}>
+            {/* ════ 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>
-
-              {/* Scrollable thread list */}
-              <div style={{ flex: 1, minHeight: 0, overflowY: "auto" }}>
+              <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" });
+                    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);
-                      }}
+                      onClick={() => { setReplyTo(undefined); selectThread(t.id); }}
                       active={t.id === activeId}
                       pinned={Boolean(t.pinned)}
                       online={t.online}
@@ -395,11 +328,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
           </div>
 
           {/* Modals */}
-          <ChatConfirmModal
-            open={showDelete}
-            onClose={() => setShowDelete(false)}
-            onConfirm={handleConfirmDelete}
-          />
+          <ChatConfirmModal open={showDelete} onClose={() => setShowDelete(false)} onConfirm={handleConfirmDelete} />
           <ChatImagePreviewModal isOpen={isGalleryOpen} onClose={closeGallery} />
         </div>
       </motion.div>