@banbox/chat 1.0.3 → 1.0.5

package/dist/index.js

@@ -2,7 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import React10, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx18, { clsx } from 'clsx';
+import clsx16, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import _Lottie from 'lottie-react';
 
@@ -457,7 +457,7 @@ var ChatTranslateSettingsModal = ({
   const content = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         isSingle ? "fixed inset-0 z-9999 flex" : "absolute inset-0 z-50 flex items-center justify-center"
       ),
       onClick: () => onClose(),
@@ -470,7 +470,7 @@ var ChatTranslateSettingsModal = ({
             "aria-modal": "true",
             "aria-labelledby": "translate-settings-title",
             onClick: (e) => e.stopPropagation(),
-            className: clsx18(
+            className: clsx16(
               isSingle ? "fixed bottom-6 right-6 w-[500px] max-w-[95vw]" : "relative w-[500px] max-w-[95vw]",
               "z-10000 overflow-visible rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
               className
@@ -553,7 +553,7 @@ var extColor = (ext) => {
 var FilePreviewChip = ({ name, sizeMB, ext, onRemove }) => /* @__PURE__ */ jsxs("div", { className: "mr-2 inline-flex items-center gap-3 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]", children: [
   /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor(ext)) }),
+      /* @__PURE__ */ jsx(FileIcon, { className: clsx16("h-[18px] w-[18px]", extColor(ext)) }),
       " ",
       /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-normal text-black", children: name })
     ] }),
@@ -704,7 +704,7 @@ var ChatComposerBar = ({
               {
                 type: "button",
                 onClick: sendText,
-                className: clsx18(
+                className: clsx16(
                   "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]"
                 ),
                 title: hasAttachments ? "Send attachments" : "Send",
@@ -720,7 +720,7 @@ var ChatComposerBar = ({
                 type: "button",
                 onClick: sendAttachments,
                 disabled: !hasAttachments,
-                className: clsx18(
+                className: clsx16(
                   "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
                   hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]"
                 ),
@@ -745,7 +745,7 @@ var ChatComposerBar = ({
         children: /* @__PURE__ */ jsx(
           RecordMicIcon,
           {
-            className: clsx18(
+            className: clsx16(
               "h-6 w-6",
               seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]"
             )
@@ -1042,7 +1042,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
       ref: panelRef,
       role: "dialog",
       "aria-label": "Emoji picker",
-      className: clsx18("emoji-dropup", className),
+      className: clsx16("emoji-dropup", className),
       style: {
         zIndex: "9999",
         width: WIDTH2,
@@ -1186,7 +1186,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
     "div",
     {
       onClick: clickToJump,
-      className: clsx18(
+      className: clsx16(
         widthClamp,
         "relative rounded-md bg-[#f8f8f8] px-3",
         "border-l-2 border-[#FF5300]",
@@ -1505,7 +1505,7 @@ var ChatFooter = ({
     }
     setSeconds(0);
   };
-  return /* @__PURE__ */ jsxs("div", { className: clsx18("border-t border-[#ededed] bg-white p-3.5", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx16("border-t border-[#ededed] bg-white p-3.5", className), children: [
     replyTo && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ReplyCard_default, { refMsg: replyTo, onClose: clearReply }) }),
     /* @__PURE__ */ jsx(
       AttachmentPreviewStrip_default,
@@ -1605,10 +1605,10 @@ var ChatFooter = ({
 var ChatFooter_default = ChatFooter;
 function ChatHeader({ left, right, below, className }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: clsx18("border-b border-[#e1e1e1] h-[64px]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-4 pt-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: `border-b border-[#e1e1e1] h-[64px] flex items-start justify-between px-4 pt-2.5${className ? ` ${className}` : ""}`, children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-start gap-3", children: left }),
       right
-    ] }) }),
+    ] }),
     below && /* @__PURE__ */ jsx(Fragment, { children: below })
   ] });
 }
@@ -1626,11 +1626,11 @@ var ChatIdentity = (props) => {
     size = 46,
     className
   } = props;
-  const subtitleClass = clsx18(
+  const subtitleClass = clsx16(
     "text-[10px] font-medium",
     subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]"
   );
-  return /* @__PURE__ */ jsxs("div", { className: clsx18("flex items-start gap-3", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx16("flex items-start gap-3", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
       props.variant === "avatar" && /* @__PURE__ */ jsx(
         "img",
@@ -1643,7 +1643,7 @@ var ChatIdentity = (props) => {
       props.variant === "initial" && /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx18(
+          className: clsx16(
             "grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
             props.textClassName
           ),
@@ -1718,7 +1718,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         "flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
         className
       ),
@@ -1764,9 +1764,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
     };
   }, [searching]);
   React10.useEffect(() => {
-    if (!searching) {
-      return;
-    }
+    if (!searching) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
         setSearching(false);
@@ -1785,90 +1783,84 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
     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 /* @__PURE__ */ jsx("div", { className: clsx18("h-[64px] border-b border-[#ededed]", className), children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? (
-    // NORMAL (title) — appears from left when closing search
-    /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        className: "flex w-full items-center justify-between",
-        initial: { opacity: 0, x: -24 },
-        animate: "inFromLeft",
-        exit: "outToLeft",
-        variants,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "text-[#2c2c2c] flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(MessageIcon, { className: "w-6 h-6" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "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",
-                children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                title: "Close",
-                onClick: onClose,
-                className: "h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center",
-                children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-6 h-6" })
-              }
-            )
-          ] })
-        ]
-      },
-      "normal"
-    )
-  ) : (
-    // SEARCH — enters from right, exits to right
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: "flex w-full items-center gap-3",
-        initial: { opacity: 0, x: 24 },
-        animate: "inFromRight",
-        exit: "outToRight",
-        variants,
-        children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
-            /* @__PURE__ */ jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]", children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
-            /* @__PURE__ */ jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                value: q,
-                onChange: (e) => {
-                  setQ(e.target.value);
-                  onSearchChange?.(e.target.value);
-                },
-                placeholder: "Search",
-                className: "h-full w-full flex-1 bg-transparent text-[15px] outline-none placeholder:text-[#9C9C9C]"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: `h-[64px] border-b border-[#ededed]${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "flex w-full items-center justify-between",
+      initial: { opacity: 0, x: -24 },
+      animate: "inFromLeft",
+      exit: "outToLeft",
+      variants,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "text-[#2c2c2c] flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(MessageIcon, { className: "w-6 h-6" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
             "button",
             {
-              title: "Close search",
-              onClick: () => {
-                setSearching(false);
-                setQ("");
-                onSearchChange?.("");
+              title: "Close",
+              onClick: onClose,
+              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",
+              children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-6 h-6" })
+            }
+          )
+        ] })
+      ]
+    },
+    "normal"
+  ) : /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "flex w-full items-center gap-3",
+      initial: { opacity: 0, x: 24 },
+      animate: "inFromRight",
+      exit: "outToRight",
+      variants,
+      children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
+          /* @__PURE__ */ jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]", children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
+          /* @__PURE__ */ jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              value: q,
+              onChange: (e) => {
+                setQ(e.target.value);
+                onSearchChange?.(e.target.value);
               },
-              className: "grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5",
-              children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-5 h-5" })
+              placeholder: "Search",
+              className: "h-full w-full flex-1 bg-transparent text-[15px] outline-none placeholder:text-[#9C9C9C] border-none"
             }
-          ) })
-        ] }) })
-      },
-      "search"
-    )
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-5 h-5" })
+          }
+        )
+      ] }) })
+    },
+    "search"
   ) }) }) });
 };
 var ChatListHeader_default = ChatListHeader;
@@ -1927,7 +1919,7 @@ var ChatAddressCard = ({ mine, card, className }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         "w-[340px] rounded-md bg-[#f8f8f8] p-2",
         mine ? "ml-auto" : "mr-auto",
         className
@@ -2075,7 +2067,7 @@ var ChatBubbleAudio = ({ mine, audio }) => {
           type: "button",
           "aria-label": playing ? "Pause" : "Play",
           onClick: toggle,
-          className: clsx18(
+          className: clsx16(
             "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
             mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
           ),
@@ -2146,7 +2138,7 @@ var extColor2 = (ext) => {
 var FileChip = ({ file }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2", children: [
   /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor2(file.ext)) }),
+      /* @__PURE__ */ jsx(FileIcon, { className: clsx16("h-[18px] w-[18px]", extColor2(file.ext)) }),
       " ",
       /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
     ] }),
@@ -2261,14 +2253,14 @@ var ChatBubbleText = ({ mine, text }) => {
   const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
   const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
   const textFormatting = "whitespace-pre-wrap break-words";
-  return /* @__PURE__ */ jsx("div", { className: clsx18(base, color, corner, textFormatting), children: text });
+  return /* @__PURE__ */ jsx("div", { className: clsx16(base, color, corner, textFormatting), children: text });
 };
 var ChatBubbleText_default = ChatBubbleText;
 var ChatBusinessCard = ({ mine, card }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx18(
+      className: clsx16(
         "relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
         "shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
         mine ? "ml-auto" : "mr-auto"
@@ -2328,13 +2320,13 @@ var MessageHoverActions = ({
   const showTranslate = !isItemButton || isItemButton.includes("translate");
   const hasAny = showReplay || showTranslate;
   const isActive = (k) => !!activeButtons?.includes(k);
-  return /* @__PURE__ */ jsxs("div", { className: clsx18("relative inline-flex group/message", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx16("relative inline-flex group/message", className), children: [
     children,
     hasAny && /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": true,
-        className: clsx18(
+        className: clsx16(
           "absolute inset-y-0 w-2",
           mine ? "right-full" : "left-full",
           "pointer-events-auto"
@@ -2344,7 +2336,7 @@ var MessageHoverActions = ({
     hasAny && /* @__PURE__ */ jsx(
       "div",
       {
-        className: clsx18(
+        className: clsx16(
           "absolute bottom-0 pointer-events-auto transition-opacity",
           sidePos,
           railNudge,
@@ -2364,7 +2356,7 @@ var MessageHoverActions = ({
                   e.stopPropagation();
                   onReply?.();
                 },
-                className: clsx18(
+                className: clsx16(
                   "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
                   isActive("replay") && "bg-[#636363] text-white"
                 ),
@@ -2385,7 +2377,7 @@ var MessageHoverActions = ({
                   e.stopPropagation();
                   onTranslate?.();
                 },
-                className: clsx18(
+                className: clsx16(
                   "inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
                   isActive("translate") && "!bg-[#636363] text-white"
                 ),
@@ -2441,7 +2433,7 @@ var ChatMessageItem = ({
     setTranslated((v) => !v);
     onTranslate?.();
   };
-  return /* @__PURE__ */ jsx("div", { className: clsx18("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx18("flex items-end gap-3", mine && "justify-end"), children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx16("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx16("flex items-end gap-3", mine && "justify-end"), children: [
     !mine && /* @__PURE__ */ jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
       /* @__PURE__ */ jsx(
         "img",
@@ -2463,19 +2455,19 @@ var ChatMessageItem = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full"), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx16("flex flex-col gap-1 w-full"), children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: clsx18(
+          className: clsx16(
             " text-xs font-light text-[#636363]",
             mine ? "text-right" : "text-left"
           ),
           children: time
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
-        /* @__PURE__ */ jsx("div", { className: clsx18("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
+      /* @__PURE__ */ jsxs("div", { className: clsx16("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
+        /* @__PURE__ */ jsx("div", { className: clsx16("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
         businessCard ? /* @__PURE__ */ jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
         addressCard ? /* @__PURE__ */ jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
         images?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleImages_default, { images }) }) : null,
@@ -2492,7 +2484,7 @@ var ChatMessageItem = ({
             children: /* @__PURE__ */ jsx(ChatBubbleText_default, { mine, text: displayText })
           }
         ) : null,
-        showStatus && /* @__PURE__ */ jsx("div", { className: clsx18("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
+        showStatus && /* @__PURE__ */ jsx("div", { className: clsx16("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
       ] })
     ] })
   ] }) });
@@ -2502,15 +2494,14 @@ var ChatScroll = ({
   top,
   children,
   className,
+  style,
   bottomAlignWhenShort = false,
   scrollKey
 }) => {
   const ref = React10.useRef(null);
   const scrollToBottom = React10.useCallback(() => {
     const el = ref.current;
-    if (!el) {
-      return;
-    }
+    if (!el) return;
     el.scrollTop = el.scrollHeight;
   }, []);
   React10.useEffect(() => {
@@ -2523,17 +2514,12 @@ var ChatScroll = ({
     {
       ref,
       "data-chat-scroll": true,
-      className: clsx18(
-        "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
-        className
-      ),
+      className: `h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`,
+      style,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: clsx18(
-            "min-h-full flex flex-col",
-            bottomAlignWhenShort ? "justify-end" : "justify-start"
-          ),
+          className: `min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`,
           children: [
             top,
             children
@@ -2580,7 +2566,7 @@ var ChatThreadItem = ({
     "button",
     {
       onClick,
-      className: clsx18(
+      className: clsx16(
         "relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
         active && "bg-[#f8f8f8]",
         className
@@ -2633,19 +2619,20 @@ var ChatThreadItem_default = ChatThreadItem;
 var typingdotanimation2_default = { v: "5.12.1", fr: 25, ip: 0, op: 59, w: 400, h: 100, nm: "Composizione 1", ddd: 0, assets: [{ id: "comp_0", nm: "barra", fr: 25, layers: [{ ddd: 0, ind: 1, ty: 4, nm: "barra contorni", sr: 1, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 0, k: 0, ix: 10 }, p: { a: 1, k: [{ i: { x: 0.541, y: 1 }, o: { x: 0.158, y: 0 }, t: 0, s: [47, 189.5, 0], to: [48.333, 0, 0], ti: [-48.333, 0, 0] }, { t: 60, s: [337, 189.5, 0] }], ix: 2, l: 2 }, a: { a: 0, k: [57.25, 4.75, 0], ix: 1, l: 2 }, s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 } }, ao: 0, shapes: [{ ty: "gr", it: [{ ind: 0, ty: "sh", ix: 1, ks: { a: 0, k: { i: [[2.485, 0], [0, 0], [0, 2.485], [-2.485, 0], [0, 0], [0, -2.485]], o: [[0, 0], [-2.485, 0], [0, -2.485], [0, 0], [2.485, 0], [0, 2.485]], v: [[52.5, 4.5], [-52.5, 4.5], [-57, 0], [-52.5, -4.5], [52.5, -4.5], [57, 0]], c: true }, ix: 2 }, nm: "Path 1", mn: "ADBE Vector Shape - Group", hd: false }, { ty: "fl", c: { a: 1, k: [{ i: { x: [0.833], y: [1] }, o: { x: [0.167], y: [0] }, t: 0, s: [0.058823529631, 0.800000011921, 0.807843148708, 1] }, { i: { x: [0.833], y: [0.999] }, o: { x: [0.167], y: [1e-3] }, t: 23, s: [0, 0.419607847929, 0.470588237047, 1] }, { t: 49, s: [0.376470595598, 0.435294121504, 0.482352942228, 1] }], ix: 4 }, o: { a: 0, k: 100, ix: 5 }, r: 1, bm: 0, nm: "Riempimento 1", mn: "ADBE Vector Graphic - Fill", hd: false }, { ty: "tr", p: { a: 0, k: [57.25, 4.75], ix: 2 }, a: { a: 0, k: [0, 0], ix: 1 }, s: { a: 0, k: [100, 100], ix: 3 }, r: { a: 0, k: 0, ix: 6 }, o: { a: 0, k: 100, ix: 7 }, sk: { a: 0, k: 0, ix: 4 }, sa: { a: 0, k: 0, ix: 5 }, nm: "Transform" }], nm: "Gruppo 1", np: 2, cix: 2, bm: 0, ix: 1, mn: "ADBE Vector Group", hd: false }], ip: 0, op: 250, st: 0, ct: 1, bm: 0 }] }], layers: [{ ddd: 0, ind: 1, ty: 0, nm: "barra", refId: "comp_0", sr: 0.89999997615814, ks: { o: { a: 0, k: 100, ix: 11 }, r: { a: 0, k: 0, ix: 10 }, p: { a: 0, k: [201, 50, 0], ix: 2, l: 2 }, a: { a: 0, k: [190, 190, 0], ix: 1, l: 2 }, s: { a: 0, k: [120, 120, 100], ix: 6, l: 2 } }, ao: 0, hasMask: true, masksProperties: [{ inv: false, mode: "a", pt: { a: 0, k: { i: [[2.347, 0], [0, 0], [0, -2.347], [-2.347, 0], [0, 0], [0, 2.347]], o: [[0, 0], [-2.347, 0], [0, 2.347], [0, 0], [2.347, 0], [0, -2.347]], v: [[270.25, 185], [108.75, 185], [104.5, 189.25], [108.75, 193.5], [270.25, 193.5], [274.5, 189.25]], c: true }, ix: 1 }, o: { a: 0, k: 100, ix: 3 }, x: { a: 0, k: 0, ix: 4 }, nm: "Mask 1" }], w: 380, h: 380, ip: 0, op: 59, st: 0, bm: 0 }], markers: [], props: {} };
 var Lottie2 = _Lottie.default ?? _Lottie;
 var TypingIndicator = ({
-  size = 18,
   loop = true,
   autoplay = true,
   className,
   ariaLabel = "Typing\u2026",
-  avatarSize = 40
+  avatarSize = 40,
+  style
 }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("relative flex items-end gap-[6px]", className),
       role: "status",
       "aria-label": ariaLabel,
+      className: `relative flex items-end gap-[6px]${className ? ` ${className}` : ""}`,
+      style,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -2661,7 +2648,7 @@ var TypingIndicator = ({
                   className: "h-full w-full rounded-full object-cover"
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "absolute bottom-[0px] right-[0px] h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
+              /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
             ]
           }
         ),
@@ -2879,7 +2866,21 @@ var avatarBgByInitial = {
   B: "#F0EDEB",
   b: "#F0EDEB"
 };
-var InboxPopup = ({ adapter, uiCallbacks }) => {
+var 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) {
+  if (!theme || theme === "marketplace") return "marketplace";
+  if (theme === "admin") return "admin";
+  return "custom";
+}
+function getThemeVars(theme) {
+  if (!theme || theme === "marketplace" || theme === "admin") return {};
+  const vars = {};
+  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;
+}
+var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
   const { close, selectThread, selectedThreadId, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
   const [threads, setThreads] = useState(() => adapter.threads.list(reference));
@@ -2924,16 +2925,12 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
   const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : void 0;
   const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? void 0;
   const [showDelete, setShowDelete] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const scrollKey = `${activeId}-${messages.length}-${rev}`;
-  const prevActiveIdRef = React10.useRef(activeId);
+  const prevActiveIdRef = useRef(activeId);
   useEffect(() => {
     if (prevActiveIdRef.current !== activeId) {
       prevActiveIdRef.current = activeId;
-      setIsLoading(true);
-      const t = setTimeout(() => setIsLoading(false), 300);
       if (activeId) adapter.threads.markRead?.(activeId);
-      return () => clearTimeout(t);
     }
   }, [activeId, adapter]);
   const toRef2 = (m) => ({
@@ -2955,19 +2952,21 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
     if (nextId) selectThread(nextId);
     setReplyTo(void 0);
     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);
+  });
   return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
     /* @__PURE__ */ jsx(
       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 },
@@ -2979,12 +2978,14 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
       {
         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 },
@@ -2997,7 +2998,7 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
             style: { overscrollBehavior: "contain" },
             children: [
               /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" }),
-              /* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_350px]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_310px]", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
                   /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
                     ChatHeader,
@@ -3074,13 +3075,9 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
                     activeId
                   ) })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "h-full min-h-0", children: [
-                  /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }),
-                  /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto custom-scroll", children: 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) => {
+                /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }) }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto custom-scroll", children: filteredThreads.map((t) => {
                     const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
                     return /* @__PURE__ */ jsx(
                       ChatThreadItem_default,
@@ -3115,6 +3112,7 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
   ] });
 };
 var InboxPopup_default = InboxPopup;
+var GRADIENT_BORDER2 = "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, threads) {
   const referenceId = reference?.id;
   if (reference?.kind === "quotation") {
@@ -3133,7 +3131,20 @@ function toRef(m) {
     audio: m.audio
   };
 }
-var SinglePopup = ({ adapter, uiCallbacks }) => {
+function getThemeAttr2(theme) {
+  if (!theme || theme === "marketplace") return "marketplace";
+  if (theme === "admin") return "admin";
+  return "custom";
+}
+function getThemeVars2(theme) {
+  if (!theme || theme === "marketplace" || theme === "admin") return {};
+  const vars = {};
+  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;
+}
+var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
   const { close, reference } = useChatUI();
   const threads = adapter.threads.list(reference);
   const initialThreadId = React10.useMemo(
@@ -3167,7 +3178,6 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
     setScrollKey(Date.now());
     setReplyTo(void 0);
   }, [activeId, adapter]);
-  const statusText = activeThread?.status?.kind === "seen" ? "Seen" : "Delivered";
   return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
     /* @__PURE__ */ jsx(
       motion.button,
@@ -3175,6 +3185,7 @@ var SinglePopup = ({ 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 },
@@ -3186,10 +3197,12 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
       {
         role: "dialog",
         "aria-modal": "true",
-        className: "relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
+        "data-theme": getThemeAttr2(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_BORDER2,
+          ...getThemeVars2(theme)
         },
         initial: { x: "110%" },
         animate: { x: 0 },
@@ -3221,40 +3234,48 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
                     {
                       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",
                       children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
                     }
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(ChatScroll_default, { className: "h-full", bottomAlignWhenShort: false, scrollKey, children: [
-                messages.map((m, idx) => {
-                  const mine = m.author === "you";
-                  const isLast = idx === messages.length - 1;
-                  return /* @__PURE__ */ jsx(
-                    ChatMessageItem_default,
-                    {
-                      id: m.id,
-                      mine,
-                      time: m.time ?? "",
-                      authorInitial: typeof m.author === "string" ? m.author : "U",
-                      text: m.text ?? m.content,
-                      businessCard: m.businessCard,
-                      addressCard: m.addressCard,
-                      images: m.images,
-                      files: m.files,
-                      audio: m.audio,
-                      replyTo: m.replyTo,
-                      initialSrc: m.avatarSrc,
-                      showStatus: isLast,
-                      status: statusText,
-                      onReply: () => setReplyTo(toRef(m))
-                    },
-                    m.id
-                  );
-                }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) })
-              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(
+                ChatScroll_default,
+                {
+                  className: "h-full",
+                  bottomAlignWhenShort: false,
+                  scrollKey,
+                  children: [
+                    messages.map((m, idx) => {
+                      const mine = m.author === "you";
+                      const isLast = idx === messages.length - 1;
+                      return /* @__PURE__ */ jsx(
+                        ChatMessageItem_default,
+                        {
+                          id: m.id,
+                          mine,
+                          time: m.time ?? "",
+                          authorInitial: typeof m.author === "string" ? m.author : "U",
+                          text: m.text ?? m.content,
+                          businessCard: m.businessCard,
+                          addressCard: m.addressCard,
+                          images: m.images,
+                          files: m.files,
+                          audio: m.audio,
+                          replyTo: m.replyTo,
+                          initialSrc: m.avatarSrc,
+                          showStatus: isLast,
+                          status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
+                          onReply: () => setReplyTo(toRef(m))
+                        },
+                        m.id
+                      );
+                    }),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) })
+                  ]
+                }
+              ) }),
               /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
                 ChatFooter_default,
                 {
@@ -3275,7 +3296,7 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
   ] });
 };
 var SinglePopup_default = SinglePopup;
-function ChatRoot({ adapter, uiCallbacks }) {
+function ChatRoot({ adapter, uiCallbacks, theme }) {
   const { isOpen, variant } = useChatUI();
   useDisableBodyScroll(isOpen);
   if (typeof window === "undefined") {
@@ -3283,19 +3304,20 @@ function ChatRoot({ adapter, uiCallbacks }) {
   }
   return createPortal(
     // GalleryProvider is scoped to the chat only.
-    // It is completely separate from the host app's own gallery context.
     /* @__PURE__ */ jsx(GalleryProvider, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && (variant === "inbox" ? /* @__PURE__ */ jsx(
       InboxPopup_default,
       {
         adapter,
-        uiCallbacks
+        uiCallbacks,
+        theme
       },
       "inbox"
     ) : /* @__PURE__ */ jsx(
       SinglePopup_default,
       {
         adapter,
-        uiCallbacks
+        uiCallbacks,
+        theme
       },
       "single"
     )) }) }),