@banbox/chat 1.0.7 → 1.0.8

package/package.json

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

package/src/chat/InboxPopup.tsx

@@ -31,13 +31,16 @@ export type ChatTheme =
 export type InboxPopupProps = {
   adapter: ChatAdapter;
   uiCallbacks?: ChatUICallbacks;
-  /** Dynamic theme: "marketplace" (orange), "admin" (black), or custom object */
   theme?: ChatTheme;
 };
 
 /* ─── Helpers ─── */
 const avatarBgByInitial: Record<string, string> = {
-  K: "#FFE7DB", A: "#FFE5DA", F: "#E8F7FF", B: "#F0EDEB", b: "#F0EDEB",
+  K: "#FFE7DB",
+  A: "#FFF1EC",
+  F: "#E8F7FF",
+  B: "#F0EDEB",
+  b: "#F0EDEB",
 };
 
 const GRADIENT_BORDER =
@@ -51,7 +54,6 @@ function getThemeAttr(theme?: ChatTheme): string {
 
 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;
@@ -77,7 +79,10 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
     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 ─── */
@@ -111,9 +116,18 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
   const online = Boolean(activeThread?.online);
   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 initialSrc = activeThread?.avatarSrc ?? "/chat/banbox_chat_logo.png";
+
+  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);
@@ -138,13 +152,20 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
   });
 
   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.",
+    });
   };
 
   const filteredThreads = threads.filter((t) => {
@@ -167,7 +188,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        className="fixed inset-0 cursor-auto!"
+        className="fixed inset-0"
         style={{ background: "transparent", border: "none" }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -200,8 +221,8 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
         >
           <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]">
+          {/* TWO-COLUMN GRID — exact marketplace: grid-cols-[1fr_350px] */}
+          <div className="grid h-full min-h-0 grid-cols-[1fr_350px]">
 
             {/* ════ LEFT — chat ════ */}
             <div className="flex h-full min-h-0 flex-col border-r border-[#9BBCCF]">
@@ -211,15 +232,34 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
                 <ChatHeader
                   left={
                     activeThread?.avatarSrc ? (
-                      <ChatIdentity variant="avatar" src={activeThread.avatarSrc} online={online} title={title} subtitle={subtitle} verified={isVerified} subtitleVariant="muted" />
+                      <ChatIdentity
+                        variant="avatar"
+                        src={initialSrc}
+                        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
                   }
@@ -261,8 +301,12 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
                           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"]}
+                          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}
@@ -297,19 +341,23 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
               </div>
             </div>
 
-            {/* ════ 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">
+            {/* ════ RIGHT — thread list (exact marketplace: h-full min-h-0 only) ════ */}
+            <div className="h-full min-h-0">
+              <ChatListHeader onClose={close} onSearchChange={(val) => setSearchQuery(val)} />
+              <div className="h-full overflow-y-auto custom-scroll py-0">
                 {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}
@@ -328,7 +376,11 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
           </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>

package/src/ui/chat/ChatHeader.tsx

@@ -1,4 +1,5 @@
 "use client";
+import clsx from "clsx";
 import React from "react";
 
 type Props = {
@@ -10,10 +11,12 @@ type Props = {
 
 export default function ChatHeader({ left, right, below, className }: Props) {
   return (
-    <div className={`border-b border-[#ededed] h-[64px]${className ? ` ${className}` : ""}`}>
-      <div className="flex items-center justify-between px-4 h-full">
-        <div className="flex items-center gap-3">{left}</div>
-        {right}
+    <div>
+      <div className={clsx("border-b border-[#ededed] h-[64px]", className)}>
+        <div className="flex items-center justify-between px-4 pt-2.5">
+          <div className="flex items-center gap-3">{left}</div>
+          {right}
+        </div>
       </div>
       {below && <>{below}</>}
     </div>

package/src/ui/chat/ChatListHeader.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import clsx from "clsx";
 import type { Variants } from "framer-motion";
 import { AnimatePresence, motion } from "framer-motion";
 import React from "react";
@@ -9,22 +10,34 @@ type Props = {
   className?: string;
   onClose?: () => void;
   onSearchChange?: (value: string) => void;
+  hideSearch?: boolean;
 };
 
-const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange }) => {
+const ChatListHeader: React.FC<Props> = ({
+  className,
+  onClose,
+  onSearchChange,
+  hideSearch = false,
+}) => {
   const [searching, setSearching] = React.useState(false);
   const [q, setQ] = React.useState("");
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
     const timer = searching
-      ? setTimeout(() => { inputRef.current?.focus(); }, 220)
+      ? setTimeout(() => {
+          inputRef.current?.focus();
+        }, 220)
       : undefined;
-    return () => { clearTimeout(timer); };
+    return () => {
+      clearTimeout(timer);
+    };
   }, [searching]);
 
   React.useEffect(() => {
-    if (!searching) return;
+    if (!searching) {
+      return;
+    }
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         setSearching(false);
@@ -33,18 +46,20 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
       }
     };
     window.addEventListener("keydown", onKey);
-    return () => { window.removeEventListener("keydown", onKey); };
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
   }, [searching, onSearchChange]);
 
   const variants: Variants = {
     inFromRight: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
-    outToLeft:   { opacity: 0, x: -24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
-    inFromLeft:  { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
-    outToRight:  { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
+    outToLeft: { opacity: 0, x: -24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
+    inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
+    outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
   };
 
   return (
-    <div className={`h-[64px] border-b border-[#ededed]${className ? ` ${className}` : ""}`}>
+    <div className={clsx("h-[64px] border-b border-[#ededed]", className)}>
       <div className="flex h-full items-center px-[20px]">
         <AnimatePresence initial={false} mode="wait">
           {!searching ? (
@@ -64,13 +79,16 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
               </div>
 
               <div className="flex items-center gap-2">
-                <button
-                  title="Search"
-                  onClick={() => setSearching(true)}
-                  className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center cursor-pointer border-none bg-transparent"
-                >
-                  <ChatSearchIcon className="w-5 h-5" />
-                </button>
+                {!hideSearch && (
+                  <button
+                    title="Search"
+                    onClick={() => setSearching(true)}
+                    className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center cursor-pointer border-none bg-transparent"
+                  >
+                    <ChatSearchIcon className="w-5 h-5" />
+                  </button>
+                )}
+
                 <button
                   title="Close"
                   onClick={onClose}
@@ -95,7 +113,7 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
                     <span className="mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]">
                       <ChatSearchIcon className="w-5 h-5" />
                     </span>
-                    <span className="mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" />
+
                     <input
                       ref={inputRef}
                       value={q}
@@ -108,13 +126,19 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
                     />
                   </div>
 
-                  <button
-                    title="Close search"
-                    onClick={() => { setSearching(false); setQ(""); onSearchChange?.(""); }}
-                    className="grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent"
-                  >
-                    <ChatXIcon className="w-5 h-5" />
-                  </button>
+                  <div>
+                    <button
+                      title="Close search"
+                      onClick={() => {
+                        setSearching(false);
+                        setQ("");
+                        onSearchChange?.("");
+                      }}
+                      className="grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent"
+                    >
+                      <ChatXIcon className="w-5 h-5" />
+                    </button>
+                  </div>
                 </div>
               </div>
             </motion.div>

package/src/ui/chat/ChatScroll.tsx

@@ -1,4 +1,6 @@
+// components/ui/chat/ChatScroll.tsx
 "use client";
+import clsx from "clsx";
 import React from "react";
 
 type Props = {
@@ -6,47 +8,52 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  /** set true if you want short threads anchored at the bottom */
   bottomAlignWhenShort?: boolean;
+  /** when this value changes, we auto-scroll to the bottom */
   scrollKey?: string | number;
 };
 
-const ChatScroll: React.FC<Props> = ({
-  top,
-  children,
-  className,
-  style,
-  bottomAlignWhenShort = false,
-  scrollKey,
-}) => {
+const ChatScroll = React.forwardRef<HTMLDivElement, Props>(function ChatScroll(
+  { top, children, className, bottomAlignWhenShort = false, scrollKey },
+  _,
+) {
   const ref = React.useRef<HTMLDivElement>(null);
 
   const scrollToBottom = React.useCallback(() => {
     const el = ref.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     el.scrollTop = el.scrollHeight;
   }, []);
 
-  React.useEffect(() => {
+  // On mount & when scrollKey changes — useLayoutEffect guarantees synchronous scroll before paint!
+  React.useLayoutEffect(() => {
     scrollToBottom();
-    const id = window.setTimeout(scrollToBottom, 0);
-    return () => window.clearTimeout(id);
   }, [scrollKey, scrollToBottom]);
 
   return (
     <div
       ref={ref}
       data-chat-scroll
-      className={`h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`}
-      style={style}
+      className={clsx(
+        "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
+        className,
+      )}
     >
+      {/* This wrapper ensures content is at least as tall as the scroll area */}
       <div
-        className={`min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`}
+        className={clsx(
+          "min-h-full flex flex-col",
+          bottomAlignWhenShort ? "justify-end" : "justify-between",
+        )}
       >
         {top}
         {children}
       </div>
     </div>
   );
-};
+});
 
 export default ChatScroll;

package/src/ui/chat/ChatThreadItem.tsx

@@ -16,14 +16,13 @@ type Props = {
   verified?: boolean;
 
   title: string;
-  preview: string; // last message snippet
-  time: string; // "29 Jul 2025 16:51"
+  preview: string;
+  time: string;
   status: ChatThreadStatus;
 
-  avatarText: string; // e.g. "A"
-  avatarSrc?: string; // e.g. "A"
-  _size?: number;
-  avatarBg?: string; // default soft peach
+  avatarText: string;
+  avatarSrc?: string;
+  avatarBg?: string;
   className?: string;
   onClick?: () => void;
 };
@@ -39,28 +38,22 @@ const ChatThreadItem: React.FC<Props> = ({
   status,
   avatarText,
   avatarSrc,
-  _size = 46,
   avatarBg = "#FFF1EC",
   className,
   onClick,
 }) => {
-  const count = status.kind === "new" ? String(Math.max(0, status.count)).padStart(2, "0") : "";
-
   const statusEl = (() => {
     switch (status.kind) {
       case "seen":
         return <span className="text-[#0D5EA8]">Seen</span>;
-
       case "delivered":
         return <span className="text-[#B7B7B7]">Delivered</span>;
-
       case "new":
         return (
           <span className="text-[#E63946]">
-            {count} New
+            {String(Math.max(0, status.count)).padStart(2, "0")} New
           </span>
         );
-
       default:
         return null;
     }
@@ -81,10 +74,10 @@ const ChatThreadItem: React.FC<Props> = ({
       )}
 
       <div className="flex items-start gap-3 border-b border-[#f8f8f8] pb-2">
-        {/* Avatar + online */}
+        {/* Avatar + online dot */}
         <div className="relative mt-[2px]">
           {avatarSrc ? (
-            <div className="grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1] relative overflow-hidden">
+            <div className="grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]">
               <img
                 src={avatarSrc}
                 alt={title}