@banbox/chat 1.0.1 → 1.0.2

package/package.json

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

package/src/chat/InboxPopup.tsx

@@ -144,36 +144,41 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
   };
 
   return (
-    <div className="fixed bottom-4 right-[40px] z-50">
+    <div className="fixed bottom-4 right-4 z-[10002]">
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        className="fixed inset-0 bg-black/20"
+        className="fixed inset-0"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        transition={{ duration: 0.3 }}
+        transition={{ type: "tween", duration: 0.25 }}
       />
 
       {/* Popup wrapper */}
       <motion.div
         role="dialog"
         aria-modal="true"
-        className="relative rounded-[16px]"
-        style={{ width: 800, height: 650, boxShadow: "0px 2px 12px 0px rgba(59,51,51,0.1)" }}
-        initial={{ x: "100%", opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: "100%", opacity: 0 }}
-        transition={{ type: "tween", duration: 0.4, ease: "easeOut" }}
+        className="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%)",
+        }}
+        initial={{ x: "110%" }}
+        animate={{ x: 0 }}
+        exit={{ x: "110%" }}
+        transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
         <div
-          className="relative h-full w-full overflow-hidden rounded-[16px]"
-          style={{
-            border: "2px solid transparent",
-            background: "linear-gradient(white, white) padding-box, 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%) border-box",
-          }}
+          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 */}
             <div className="flex h-full min-h-0 flex-col border-r border-[#9BBCCF]">
@@ -212,39 +217,39 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
 
               <div className="flex-1 min-h-0">
                 <div className="relative h-full min-h-0">
-                  {isLoading ? (
-                    <ChatSpinner className="h-full min-h-[200px]" />
-                  ) : (
-                    <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>
-                  )}
+                  <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>
 
-                  <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center px-4 pb-2 pt-1 bg-white">
+                  <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>

package/src/chat/SinglePopup.tsx

@@ -11,7 +11,6 @@ import ChatHeader from "../ui/chat/ChatHeader";
 import ChatIdentity from "../ui/chat/ChatIdentity";
 import ChatMessageItem from "../ui/chat/ChatMessageItem";
 import ChatScroll from "../ui/chat/ChatScroll";
-import ChatSpinner from "../ui/chat/ChatSpinner";
 import TypingIndicator from "../ui/chat/TypingIndicator";
 
 import type { Thread, Message, MessageRef, Reference } from "../types";
@@ -82,7 +81,7 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
     subtitle?: string;
   };
 
-  const initial = meta.initial ?? activeThread?.avatarText ?? "A";
+  const initialSrc = activeThread?.avatarSrc ?? "/shop/ban-box.png";
   const title = meta.title ?? activeThread?.title ?? "Unknown";
   const online = meta.online ?? activeThread?.online ?? true;
   const subtitle = meta.subtitle ?? "Customer";
@@ -91,15 +90,8 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
   const [messages, setMessages] = React.useState<Message[]>(() =>
     activeId ? adapter.messages.list(activeId) : [],
   );
-  const [scrollKey, setScrollKey] = React.useState<number>(0);
+  const [scrollKey, setScrollKey] = React.useState<number>(Date.now());
   const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(undefined);
-  const [isLoading, setIsLoading] = React.useState(true);
-
-  // Brief loading flash on initial open
-  React.useEffect(() => {
-    const t = setTimeout(() => setIsLoading(false), 300);
-    return () => clearTimeout(t);
-  }, []);
 
   // Subscribe to real-time updates
   React.useEffect(() => {
@@ -123,16 +115,16 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
   void uiCallbacks;
 
   return (
-    <div className="fixed bottom-4 right-[40px] z-50">
+    <div className="fixed bottom-4 right-4 z-[10002]">
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
         onClick={close}
-        className="fixed inset-0 bg-black/20 cursor-auto!"
+        className="fixed inset-0 cursor-auto!"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        transition={{ duration: 0.3 }}
+        transition={{ type: "tween", duration: 0.25 }}
       />
 
       {/* Outer gradient wrapper */}
@@ -142,23 +134,26 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
         className="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:
+            "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%)",
         }}
-        initial={{ x: "100%", opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: "100%", opacity: 0 }}
-        transition={{ type: "tween", duration: 0.4, ease: "easeOut" }}
+        initial={{ x: "110%" }}
+        animate={{ x: 0 }}
+        exit={{ x: "110%" }}
+        transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
         {/* Inner card */}
-        <div className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white">
+        <div
+          className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
+          style={{ overscrollBehavior: "contain" }}
+        >
           {/* Header */}
           <div className="h-[64px] shrink-0">
             <ChatHeader
               left={
                 <ChatIdentity
-                  variant="initial"
-                  initial={initial}
-                  bg="#FFE5DA"
+                  variant="avatar"
+                  src={initialSrc}
                   online={online}
                   title={title}
                   subtitle={subtitle}
@@ -179,44 +174,38 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
           </div>
 
           {/* Messages */}
-          <div className="relative flex-1 min-h-0">
-            {isLoading ? (
-              <ChatSpinner className="h-full" />
-            ) : (
-              <ChatScroll className="h-full" 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"}
-                      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}
-                      initialSrc={m.avatarSrc}
-                      showStatus={isLast}
-                      status={statusText}
-                      onReply={() => setReplyTo(toRef(m))}
-                    />
-                  );
-                })}
-              </ChatScroll>
-            )}
-
-            {/* Typing indicator */}
-            <div className="pointer-events-none absolute bottom-0 left-0 w-full bg-white px-4 pb-2">
-              <div className="pointer-events-auto flex items-center justify-start">
+          <div className="flex-1 min-h-0">
+            <ChatScroll className="h-full" 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"}
+                    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}
+                    initialSrc={m.avatarSrc}
+                    showStatus={isLast}
+                    status={statusText}
+                    onReply={() => setReplyTo(toRef(m))}
+                  />
+                );
+              })}
+
+              {/* Typing */}
+              <div className="flex items-center justify-start">
                 <TypingIndicator />
               </div>
-            </div>
+            </ChatScroll>
           </div>
 
           {/* Footer */}