@banbox/chat 1.0.14 → 1.0.16

package/package.json

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

package/src/chat/SinglePopup.tsx

@@ -161,7 +161,7 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
   }, [activeId, adapter, uiCallbacks, close]);
 
   return (
-    <div className="fixed bottom-4 right-4 z-[10002]">
+    <div className="fixed bottom-4 right-4 z-10002">
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
@@ -223,33 +223,13 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
                 )
               }
               right={
-                <div className="flex items-center gap-1">
-                  {uiCallbacks?.renderKebabMenu
-                    ? uiCallbacks.renderKebabMenu({
-                        pinned: Boolean(activeThread?.pinned),
-                        onPinToggle: () => {
-                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
-                        },
-                        onDelete: () => setShowDelete(true),
-                      })
-                    : (
-                      <ChatKebabMenu
-                        pinned={Boolean(activeThread?.pinned)}
-                        onPinToggle={() => {
-                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
-                        }}
-                        onDelete={() => setShowDelete(true)}
-                      />
-                    )
-                  }
-                  <button
-                    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-[var(--color-banbox-warning)] cursor-pointer border-none"
-                  >
-                    <ChatXIcon className="h-6 w-6" />
-                  </button>
-                </div>
+                <button
+                  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-(--color-banbox-warning) cursor-pointer border-none"
+                >
+                  <ChatXIcon className="h-6 w-6" />
+                </button>
               }
             />
           </div>

package/src/modals/ChatAddressModal.tsx

@@ -540,12 +540,12 @@ const DeleteConfirm: React.FC<{
   onConfirm: () => void;
   onCancel: () => void;
 }> = ({ onConfirm, onCancel }) => (
-  <div className="fixed inset-0 z-[10010] flex items-center justify-center" onClick={onCancel}>
+  <div className="fixed inset-0 z-10010 flex items-center justify-center" onClick={onCancel}>
     <div className="fixed inset-0 bg-black/40" />
     <div
       role="dialog"
       aria-modal="true"
-      className="relative z-[10011] w-[420px] max-w-[95vw] rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] overflow-hidden"
+      className="relative z-10011 w-[420px] max-w-[95vw] rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] overflow-hidden"
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex h-[44px] items-center bg-[#f8f8f8] px-6">
@@ -701,8 +701,8 @@ const ChatAddressModal: React.FC<Props> = ({
       <div
         className={clsx(
           isSingle
-            ? "fixed inset-0 z-[10003] flex"
-            : "absolute inset-0 z-[70] flex items-center justify-center",
+            ? "fixed inset-0 z-10003 flex"
+            : "absolute inset-0 z-70 flex items-center justify-center",
         )}
         onClick={(e) => { e.stopPropagation(); onClose(); }}
       >
@@ -719,12 +719,12 @@ const ChatAddressModal: React.FC<Props> = ({
             isSingle
               ? "fixed bottom-6 right-6 w-[700px] max-w-[95vw]"
               : "relative w-[700px] max-w-[95vw]",
-            "overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] z-[10004]",
+            "overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] z-10004",
             className,
           )}
         >
           {/* Header */}
-          <div className="h-[44px] px-8 py-[7px] flex items-center w-full bg-[var(--color-banbox-f8,#f8f8f8)] rounded-t-md">
+          <div className="h-[44px] px-8 py-[7px] flex items-center w-full bg-(--color-banbox-f8,#f8f8f8) rounded-t-md">
             {renderHeader()}
           </div>
 
@@ -757,7 +757,7 @@ const ChatAddressModal: React.FC<Props> = ({
           </div>
 
           {/* Footer */}
-          <div className="h-[52px] bg-[var(--color-banbox-primary-container,#f0f4ff)] w-full px-6 py-2 flex justify-end items-center gap-6 rounded-b-[6px]">
+          <div className="h-[52px] bg-(--color-banbox-primary-container,#f0f4ff) w-full px-6 py-2 flex justify-end items-center gap-6 rounded-b-[6px]">
             <div className="flex items-center justify-end gap-3">
               {mode === "list" && (
                 <>

package/src/modals/ChatTranslateSettingsModal.tsx

@@ -88,7 +88,7 @@ const ChatTranslateSettingsModal: React.FC<Props> = ({
   return (
     <div
       className={clsx(
-        "absolute inset-0 z-[9999] flex items-center justify-center",
+        "absolute inset-0 z-9999 flex items-center justify-center",
         variant === "single" && "rounded-[inherit]",
       )}
       onClick={(e) => {

package/src/ui/ChatFooter.tsx

@@ -483,7 +483,7 @@ const ChatFooter: React.FC<Props> = ({
       {/* Business card edit modal — simple inline form */}
       {showBizEdit && (
         <div
-          className="fixed inset-0 z-[10003] flex items-center justify-center"
+          className="fixed inset-0 z-10003 flex items-center justify-center"
           onClick={() => setShowBizEdit(false)}
         >
           <div className="fixed inset-0 bg-black/30" />
@@ -491,7 +491,7 @@ const ChatFooter: React.FC<Props> = ({
             role="dialog"
             aria-modal="true"
             onClick={(e) => e.stopPropagation()}
-            className="relative z-[10004] w-[480px] max-w-[95vw] overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]"
+            className="relative z-10004 w-[480px] max-w-[95vw] overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]"
           >
             <div className="flex h-[44px] items-center justify-between bg-[#f8f8f8] px-6">
               <h2 className="text-xl font-semibold text-black">Business Info</h2>

package/src/ui/ChatIdentity.tsx

@@ -132,7 +132,7 @@ const ChatIdentity: React.FC<ChatIdentityProps> = (props) => {
         </div>
         {subtitle &&
           (title === "banbox.com" ? (
-            <div className="flex items-center -ml-[5px]">
+            <div className="flex items-center ml-[-5px]">
               <Lottie
                 animationData={globe}
                 loop={true}

package/src/ui/ChatKebabMenu.tsx

@@ -81,7 +81,7 @@ const ChatKebabMenu: React.FC<ChatKebabMenuProps> = ({
           className="absolute right-0 z-10 mt-2 w-44 rounded-xs bg-white py-1 shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
         >
           {/* Speech-bubble caret */}
-          <div className="pointer-events-none absolute -z-[1] -top-[6px] right-4 h-3 w-3 rotate-45 bg-white" />
+          <div className="pointer-events-none absolute z-[-1] top-[-6px] right-4 h-3 w-3 rotate-45 bg-white" />
 
           {/* Pin / Unpin */}
           <button

package/src/ui/MessageHoverActions.tsx

@@ -119,7 +119,7 @@ const MessageHoverActions: React.FC<Props> = ({
                   }}
                   className={clsx(
                     "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",
+                    isActive("translate") && "bg-[#636363]! text-white",
                   )}
                 >
                   <NewLanguageIcon className="h-[14px] w-[14px]" />