@banbox/chat 1.0.4 → 1.0.5

package/dist/index.js

@@ -1603,27 +1603,12 @@ var ChatFooter = ({
   ] });
 };
 var ChatFooter_default = ChatFooter;
-function ChatHeader({ left, right, below }) {
+function ChatHeader({ left, right, below, className }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          borderBottom: "1px solid #e1e1e1",
-          height: 64,
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "space-between",
-          paddingLeft: 16,
-          paddingRight: 16,
-          paddingTop: 10
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: left }),
-          right
-        ]
-      }
-    ),
+    /* @__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 })
   ] });
 }
@@ -1766,7 +1751,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
   );
 };
 var ChatInquiryBar_default = ChatInquiryBar;
-var ChatListHeader = ({ onClose, onSearchChange }) => {
+var ChatListHeader = ({ className, onClose, onSearchChange }) => {
   const [searching, setSearching] = React10.useState(false);
   const [q, setQ] = React10.useState("");
   const inputRef = React10.useRef(null);
@@ -1798,117 +1783,85 @@ var ChatListHeader = ({ 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] } }
   };
-  const btnStyle = {
-    height: 36,
-    width: 36,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "50%",
-    border: "none",
-    background: "transparent",
-    cursor: "pointer"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
+  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,
     {
-      style: {
-        height: 64,
-        borderBottom: "1px solid #ededed",
-        display: "flex",
-        alignItems: "center",
-        paddingLeft: 20,
-        paddingRight: 20
-      },
-      children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          style: { display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between" },
-          initial: { opacity: 0, x: -24 },
-          animate: "inFromLeft",
-          exit: "outToLeft",
-          variants,
-          children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, color: "#2c2c2c" }, children: [
-              /* @__PURE__ */ jsx(MessageIcon, { className: "w-6 h-6" }),
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 22, fontWeight: 600 }, children: "Messenger" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              /* @__PURE__ */ jsx("button", { title: "Search", onClick: () => setSearching(true), style: btnStyle, children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
-              /* @__PURE__ */ jsx("button", { title: "Close", onClick: onClose, style: btnStyle, children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-6 h-6" }) })
-            ] })
-          ]
-        },
-        "normal"
-      ) : /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          style: { display: "flex", width: "100%", alignItems: "center", gap: 12 },
-          initial: { opacity: 0, x: 24 },
-          animate: "inFromRight",
-          exit: "outToRight",
-          variants,
-          children: /* @__PURE__ */ jsxs(
-            "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",
+              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",
             {
-              style: {
-                display: "flex",
-                flex: 1,
-                height: 40,
-                alignItems: "center",
-                borderRadius: 9999,
-                border: "1px solid #6A6A6A",
-                backgroundColor: "#fff",
-                padding: "0 4px",
-                gap: 6
+              ref: inputRef,
+              value: q,
+              onChange: (e) => {
+                setQ(e.target.value);
+                onSearchChange?.(e.target.value);
               },
-              children: [
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: 12 }, children: [
-                  /* @__PURE__ */ jsx("span", { style: { marginRight: 8, color: "#929292", flexShrink: 0 }, children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
-                  /* @__PURE__ */ jsx("span", { style: { marginRight: 8, height: 24, width: 1, flexShrink: 0, backgroundColor: "#e1e1e1" } }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ref: inputRef,
-                      value: q,
-                      onChange: (e) => {
-                        setQ(e.target.value);
-                        onSearchChange?.(e.target.value);
-                      },
-                      placeholder: "Search",
-                      style: {
-                        flex: 1,
-                        height: "100%",
-                        background: "transparent",
-                        fontSize: 15,
-                        outline: "none",
-                        border: "none",
-                        color: "#2c2c2c"
-                      }
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    title: "Close search",
-                    onClick: () => {
-                      setSearching(false);
-                      setQ("");
-                      onSearchChange?.("");
-                    },
-                    style: { ...btnStyle, height: 32, width: 32 },
-                    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;
 var Row = ({ icon, label, value, highlight }) => {
@@ -2540,6 +2493,7 @@ var ChatMessageItem_default = ChatMessageItem;
 var ChatScroll = ({
   top,
   children,
+  className,
   style,
   bottomAlignWhenShort = false,
   scrollKey
@@ -2547,9 +2501,7 @@ var ChatScroll = ({
   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(() => {
@@ -2562,26 +2514,12 @@ var ChatScroll = ({
     {
       ref,
       "data-chat-scroll": true,
-      style: {
-        height: "100%",
-        minHeight: 0,
-        overflowY: "auto",
-        backgroundColor: "#fff",
-        padding: 16,
-        // custom scrollbar — hide track for clean look
-        scrollbarWidth: "thin",
-        scrollbarColor: "#d1d5db transparent",
-        ...style
-      },
+      className: `h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`,
+      style,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          style: {
-            minHeight: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: bottomAlignWhenShort ? "flex-end" : "flex-start"
-          },
+          className: `min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`,
           children: [
             top,
             children
@@ -2683,6 +2621,7 @@ var Lottie2 = _Lottie.default ?? _Lottie;
 var TypingIndicator = ({
   loop = true,
   autoplay = true,
+  className,
   ariaLabel = "Typing\u2026",
   avatarSize = 40,
   style
@@ -2692,53 +2631,28 @@ var TypingIndicator = ({
     {
       role: "status",
       "aria-label": ariaLabel,
-      style: {
-        position: "relative",
-        display: "flex",
-        alignItems: "flex-end",
-        gap: 6,
-        ...style
-      },
+      className: `relative flex items-end gap-[6px]${className ? ` ${className}` : ""}`,
+      style,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              borderRadius: "50%",
-              border: "1px solid #F1F1F1",
-              width: avatarSize,
-              height: avatarSize
-            },
+            className: "relative shrink-0 rounded-full border border-[#F1F1F1]",
+            style: { width: avatarSize, height: avatarSize },
             children: [
               /* @__PURE__ */ jsx(
                 "img",
                 {
                   src: "/chat/img/girl_support.png",
                   alt: "avatar image",
-                  style: { height: "100%", width: "100%", borderRadius: "50%", objectFit: "cover" }
+                  className: "h-full w-full rounded-full object-cover"
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    bottom: 0,
-                    right: 0,
-                    height: 11.25,
-                    width: 11.25,
-                    borderRadius: "50%",
-                    backgroundColor: "#328545",
-                    outline: "2px solid #fff"
-                  }
-                }
-              )
+              /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx("span", { style: { position: "absolute", bottom: -13, left: 30 }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("span", { className: "absolute bottom-[-13px] left-[30px]", children: /* @__PURE__ */ jsx(
           Lottie2,
           {
             animationData: typingdotanimation2_default,
@@ -2953,7 +2867,20 @@ var avatarBgByInitial = {
   b: "#F0EDEB"
 };
 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%)";
-var InboxPopup = ({ adapter, uiCallbacks }) => {
+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));
@@ -3025,24 +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", { style: { position: "fixed", bottom: 16, right: 16, zIndex: 10002 }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
         "aria-label": "Close chat",
         onClick: close,
-        style: { position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" },
+        className: "fixed inset-0 cursor-auto!",
+        style: { background: "transparent", border: "none" },
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -3054,14 +2978,14 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
       {
         role: "dialog",
         "aria-modal": "true",
+        "data-theme": getThemeAttr(theme),
+        className: "banbox-chat-root relative rounded-[20px] p-[3px]",
         style: {
-          position: "relative",
           width: 800,
           height: 650,
-          borderRadius: 20,
-          padding: 3,
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background: GRADIENT_BORDER
+          background: GRADIENT_BORDER,
+          ...getThemeVars(theme)
         },
         initial: { x: "110%" },
         animate: { x: 0 },
@@ -3070,192 +2994,115 @@ var InboxPopup = ({ adapter, uiCallbacks }) => {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            style: {
-              position: "relative",
-              height: "100%",
-              width: "100%",
-              overflow: "hidden",
-              borderRadius: 18,
-              backgroundColor: "#fff",
-              overscrollBehavior: "contain"
-            },
+            className: "relative h-full w-full overflow-hidden rounded-[18px] bg-white",
+            style: { overscrollBehavior: "contain" },
             children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 310px",
-                    height: "100%",
-                    minHeight: 0
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          flexDirection: "column",
-                          height: "100%",
-                          minHeight: 0,
-                          borderRight: "1px solid #9BBCCF"
+              /* @__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_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,
+                    {
+                      left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "avatar", src: activeThread.avatarSrc, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }) : /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "initial", initial, bg: avatarBg, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }),
+                      right: uiCallbacks?.renderKebabMenu?.({
+                        pinned: Boolean(activeThread?.pinned),
+                        onPinToggle: () => {
+                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
                         },
-                        children: [
-                          /* @__PURE__ */ jsx("div", { style: { height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsx(
-                            ChatHeader,
-                            {
-                              left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(
-                                ChatIdentity_default,
-                                {
-                                  variant: "avatar",
-                                  src: activeThread.avatarSrc,
-                                  online,
-                                  title,
-                                  subtitle,
-                                  verified: isVerified,
-                                  subtitleVariant: "muted"
-                                }
-                              ) : /* @__PURE__ */ jsx(
-                                ChatIdentity_default,
-                                {
-                                  variant: "initial",
-                                  initial,
-                                  bg: avatarBg,
-                                  online,
-                                  title,
-                                  subtitle,
-                                  verified: isVerified,
-                                  subtitleVariant: "muted"
-                                }
-                              ),
-                              right: uiCallbacks?.renderKebabMenu?.({
-                                pinned: Boolean(activeThread?.pinned),
-                                onPinToggle: () => {
-                                  if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
-                                },
-                                onDelete: () => setShowDelete(true)
-                              }) ?? null
-                            }
-                          ) }),
-                          idValue && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
-                            ChatInquiryBar_default,
-                            {
-                              id: idValue,
-                              label: idLabel,
-                              buttonLabel: idButtonLabel,
-                              onView: () => {
-                                const type = activeThread?.orderId ? "order" : "inquiry";
-                                uiCallbacks?.onNavigate?.({ type, id: idValue });
-                              }
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: [
-                            /* @__PURE__ */ jsx(
-                              ChatScroll_default,
-                              {
-                                className: "h-full pb-10",
-                                bottomAlignWhenShort: false,
-                                scrollKey,
-                                style: { height: "100%", overflowY: "auto" },
-                                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",
-                                      avatarBg,
-                                      text: m.text ?? m.content,
-                                      businessCard: m.businessCard,
-                                      addressCard: m.addressCard,
-                                      images: m.images,
-                                      files: m.files,
-                                      audio: m.audio,
-                                      replyTo: m.replyTo,
-                                      showStatus: isLast,
-                                      status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
-                                      onReply: () => setReplyTo(toRef2(m)),
-                                      initialSrc: m.avatarSrc
-                                    },
-                                    m.id
-                                  );
-                                })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "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"
-                                },
-                                children: /* @__PURE__ */ jsx(TypingIndicator_default, { style: { pointerEvents: "auto" } })
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
-                            ChatFooter_default,
+                        onDelete: () => setShowDelete(true)
+                      }) ?? null
+                    }
+                  ) }),
+                  idValue && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+                    ChatInquiryBar_default,
+                    {
+                      id: idValue,
+                      label: idLabel,
+                      buttonLabel: idButtonLabel,
+                      onView: () => {
+                        const type = activeThread?.orderId ? "order" : "inquiry";
+                        uiCallbacks?.onNavigate?.({ type, id: idValue });
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "relative h-full min-h-0", children: [
+                    /* @__PURE__ */ jsx(
+                      ChatScroll_default,
+                      {
+                        className: "h-full pb-10",
+                        bottomAlignWhenShort: false,
+                        scrollKey,
+                        children: messages.map((m, idx) => {
+                          const mine = m.author === "you";
+                          const isLast = idx === messages.length - 1;
+                          return /* @__PURE__ */ jsx(
+                            ChatMessageItem_default,
                             {
-                              replyTo,
-                              clearReply: () => setReplyTo(void 0),
-                              onAfterSend: () => setRev((v) => v + 1),
-                              onSend: (payload) => {
-                                if (activeId) adapter.messages.send(activeId, payload);
-                              }
+                              id: m.id,
+                              mine,
+                              time: m.time ?? "",
+                              authorInitial: typeof m.author === "string" ? m.author : "U",
+                              avatarBg,
+                              text: m.text ?? m.content,
+                              businessCard: m.businessCard,
+                              addressCard: m.addressCard,
+                              images: m.images,
+                              files: m.files,
+                              audio: m.audio,
+                              replyTo: m.replyTo,
+                              showStatus: isLast,
+                              status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
+                              onReply: () => setReplyTo(toRef2(m)),
+                              initialSrc: m.avatarSrc
                             },
-                            activeId
-                          ) })
-                        ]
+                            m.id
+                          );
+                        })
                       }
                     ),
-                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-                      /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }) }),
-                      /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, 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,
-                          {
-                            onClick: () => {
-                              setReplyTo(void 0);
-                              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,
-                            avatarText: t.avatarText ?? "",
-                            avatarSrc: t.avatarSrc
-                          },
-                          t.id
-                        );
-                      }) })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ChatConfirmModal,
-                {
-                  open: showDelete,
-                  onClose: () => setShowDelete(false),
-                  onConfirm: handleConfirmDelete
-                }
-              ),
+                    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-start px-4 pb-2 pt-1 bg-white", children: /* @__PURE__ */ jsx(TypingIndicator_default, { className: "pointer-events-auto" }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+                    ChatFooter_default,
+                    {
+                      replyTo,
+                      clearReply: () => setReplyTo(void 0),
+                      onAfterSend: () => setRev((v) => v + 1),
+                      onSend: (payload) => {
+                        if (activeId) adapter.messages.send(activeId, payload);
+                      }
+                    },
+                    activeId
+                  ) })
+                ] }),
+                /* @__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,
+                      {
+                        onClick: () => {
+                          setReplyTo(void 0);
+                          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,
+                        avatarText: t.avatarText ?? "",
+                        avatarSrc: t.avatarSrc
+                      },
+                      t.id
+                    );
+                  }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(ChatConfirmModal, { open: showDelete, onClose: () => setShowDelete(false), onConfirm: handleConfirmDelete }),
               /* @__PURE__ */ jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
             ]
           }
@@ -3284,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(
@@ -3318,13 +3178,14 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
     setScrollKey(Date.now());
     setReplyTo(void 0);
   }, [activeId, adapter]);
-  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", bottom: 16, right: 16, zIndex: 10002 }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-[10002]", children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
         "aria-label": "Close chat",
         onClick: close,
-        style: { position: "fixed", inset: 0, background: "transparent", border: "none", cursor: "auto" },
+        className: "fixed inset-0 cursor-auto!",
+        style: { background: "transparent", border: "none" },
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -3336,14 +3197,12 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
       {
         role: "dialog",
         "aria-modal": "true",
+        "data-theme": getThemeAttr2(theme),
+        className: "banbox-chat-root relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
         style: {
-          position: "relative",
-          height: 650,
-          width: 450,
-          borderRadius: 20,
-          padding: 2,
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background: GRADIENT_BORDER2
+          background: GRADIENT_BORDER2,
+          ...getThemeVars2(theme)
         },
         initial: { x: "110%" },
         animate: { x: 0 },
@@ -3352,18 +3211,10 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              height: "100%",
-              width: "100%",
-              overflow: "hidden",
-              borderRadius: 18,
-              backgroundColor: "#fff",
-              overscrollBehavior: "contain"
-            },
+            className: "flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white",
+            style: { overscrollBehavior: "contain" },
             children: [
-              /* @__PURE__ */ jsx("div", { style: { height: 64, flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
                 ChatHeader,
                 {
                   left: /* @__PURE__ */ jsx(
@@ -3383,30 +3234,18 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
                     {
                       type: "button",
                       onClick: close,
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        height: 34,
-                        width: 34,
-                        borderRadius: "50%",
-                        backgroundColor: "#fff",
-                        color: "#000",
-                        border: "none",
-                        boxShadow: "0px 2px 4px 0px #A5A3AE4D",
-                        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", { style: { flex: 1, minHeight: 0, position: "relative" }, children: /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(
                 ChatScroll_default,
                 {
+                  className: "h-full",
                   bottomAlignWhenShort: false,
                   scrollKey,
-                  style: { height: "100%", overflowY: "auto" },
                   children: [
                     messages.map((m, idx) => {
                       const mine = m.author === "you";
@@ -3433,11 +3272,11 @@ var SinglePopup = ({ adapter, uiCallbacks }) => {
                         m.id
                       );
                     }),
-                    /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) })
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
                 ChatFooter_default,
                 {
                   variant: "single",
@@ -3457,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") {
@@ -3465,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"
     )) }) }),