@banbox/chat 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
   "type": "module",
   "license": "UNLICENSED",
@@ -58,17 +58,20 @@
   ],
   "peerDependencies": {
     "framer-motion": ">=10",
+    "lottie-react": ">=2",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "framer-motion": {
       "optional": false
+    },
+    "lottie-react": {
+      "optional": false
     }
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "lottie-react": "^2.4.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {

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,19 +17,16 @@ 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";
 
 /* =======================
    Props
 ======================= */
 export type InboxPopupProps = {
-  /** The unified data adapter — provides threads, messages, and send */
   adapter: ChatAdapter;
-  /** UI-level callbacks (toast, navigation, kebab menu) */
   uiCallbacks?: ChatUICallbacks;
 };
 
@@ -37,9 +34,16 @@ export type InboxPopupProps = {
    Constants
 ======================= */
 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%)";
+
 /* =======================
    Component
 ======================= */
@@ -47,7 +51,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
   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,11 +59,13 @@ 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);
-    return () => { cancelAnimationFrame(rafId); unsub(); };
+    return () => {
+      cancelAnimationFrame(rafId);
+      unsub();
+    };
   }, [adapter, reference, refreshThreads]);
 
   /* ─── Active thread & messages ─── */
@@ -74,12 +80,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 +92,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 ?? "";
@@ -96,28 +100,31 @@ 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;
 
-  /* ─── Loading state ─── */
   const [showDelete, setShowDelete] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const scrollKey = `${activeId}-${messages.length}-${rev}`;
 
-  const prevActiveIdRef = React.useRef(activeId);
+  /* mark read on switch */
+  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 ─── */
+  /* ─── Helpers ─── */
   const toRef = (m: Message): MessageRef => ({
     id: m.id,
     author: typeof m.author === "string" ? m.author : "U",
@@ -128,9 +135,11 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     audio: m.audio,
   });
 
-  /* ─── Delete ─── */
   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);
@@ -143,66 +152,125 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
     });
   };
 
+  /* ─── Filtered threads ─── */
+  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]">
+    <div style={{ position: "fixed", bottom: 16, right: 16, zIndex: 10002 }}>
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        className="fixed inset-0"
+        style={{ position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ type: "tween", duration: 0.25 }}
       />
 
-      {/* Popup wrapper */}
+      {/* Outer gradient border wrapper */}
       <motion.div
         role="dialog"
         aria-modal="true"
-        className="relative rounded-[20px] p-[3px]"
         style={{
+          position: "relative",
           width: 800,
           height: 650,
+          borderRadius: 20,
+          padding: 3,
           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,
         }}
         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" }}
+          style={{
+            position: "relative",
+            height: "100%",
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: 18,
+            backgroundColor: "#fff",
+            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 */}
-            <div className="flex h-full min-h-0 flex-col border-r border-[#9BBCCF]">
-              <div className="h-[64px] shrink-0">
+          {/* ── 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 }}>
                 <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
                   }
                 />
               </div>
 
+              {/* Optional inquiry bar */}
               {idValue && (
-                <div className="shrink-0">
+                <div style={{ flexShrink: 0 }}>
                   <ChatInquiryBar
                     id={idValue}
                     label={idLabel}
@@ -215,47 +283,66 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
                 </div>
               )}
 
-              <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>
+              {/* 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>
 
-                  <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>
+                {/* 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" }} />
                 </div>
               </div>
 
-              <div className="shrink-0">
+              {/* Chat footer — shrinks to content height */}
+              <div style={{ flexShrink: 0 }}>
                 <ChatFooter
                   key={activeId}
                   replyTo={replyTo}
@@ -268,45 +355,51 @@ 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 style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
+              {/* List header — 64px fixed */}
+              <div style={{ flexShrink: 0 }}>
+                <ChatListHeader onClose={close} onSearchChange={(val) => setSearchQuery(val)} />
+              </div>
+
+              {/* Scrollable thread list */}
+              <div style={{ flex: 1, minHeight: 0, overflowY: "auto" }}>
+                {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>
 
-          <ChatConfirmModal open={showDelete} onClose={() => setShowDelete(false)} onConfirm={handleConfirmDelete} />
+          {/* Modals */}
+          <ChatConfirmModal
+            open={showDelete}
+            onClose={() => setShowDelete(false)}
+            onConfirm={handleConfirmDelete}
+          />
           <ChatImagePreviewModal isOpen={isGalleryOpen} onClose={closeGallery} />
         </div>
       </motion.div>