@banbox/chat 1.0.17 → 1.0.18

package/package.json

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

package/src/chat/ChatImagePreviewModal.tsx

@@ -18,14 +18,17 @@ interface ChatImagePreviewModalProps {
 /* =======================
    Slide direction variants
 ======================= */
+// Percentage-based so the slide distance always matches the container width exactly.
+// Both exit and enter run simultaneously (no mode="wait"), giving a natural
+// cross-slide feel without the jerk caused by a sequential pause.
 const slideVariants = {
   enter: (dir: number) => ({
-    x: dir > 0 ? 300 : -300,
+    x: dir > 0 ? "100%" : "-100%",
     opacity: 0,
   }),
   center: { x: 0, opacity: 1 },
   exit: (dir: number) => ({
-    x: dir > 0 ? -300 : 300,
+    x: dir > 0 ? "-100%" : "100%",
     opacity: 0,
   }),
 };
@@ -80,7 +83,7 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
       <AnimatePresence>
         {isOpen && total > 0 && (
           <motion.div
-            className="fixed inset-0 z-999 flex items-center justify-center"
+            className="fixed inset-0 z-[10010] flex items-center justify-center"
             initial={{ opacity: 0, backgroundColor: "rgba(0,0,0,0)" }}
             animate={{ opacity: 1, backgroundColor: "rgba(0,0,0,0.55)" }}
             exit={{ opacity: 0, backgroundColor: "rgba(0,0,0,0)" }}
@@ -96,13 +99,13 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
               transition={{ duration: 0.25, ease: "easeInOut" }}
               onClick={(e) => e.stopPropagation()}
             >
-              {/* Fixed 850×850 frame */}
+              {/* Fixed 953×679 frame — image adapts dynamically inside */}
               <div
                 className="relative flex items-center justify-center overflow-hidden rounded-[6px] bg-white"
-                style={{ width: 850, height: 850 }}
+                style={{ width: 953, height: 679 }}
               >
-                {/* Sliding image */}
-                <AnimatePresence mode="wait" initial={false} custom={direction}>
+                {/* Sliding image — both exit and enter animate together (no mode="wait") */}
+                <AnimatePresence initial={false} custom={direction}>
                   <motion.img
                     key={current}
                     custom={direction}
@@ -110,53 +113,58 @@ const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
                     initial="enter"
                     animate="center"
                     exit="exit"
-                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                    transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
                     src={currentImage?.url}
                     alt={currentImage?.altText ?? `Image ${current + 1}`}
-                    className="w-full rounded-[6px] object-contain"
+                    className="absolute inset-0 w-full h-full rounded-[6px] object-contain"
                     draggable={false}
                   />
                 </AnimatePresence>
 
-                {/* Left arrow — always visible, disabled when no prev */}
-                <button
-                  type="button"
-                  onClick={goPrev}
-                  disabled={!hasPrev}
-                  className={`absolute left-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tr-[3px] rounded-br-[3px] p-[7px] backdrop-blur-[2px] shadow-[3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasPrev ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`}
-                  style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
-                  aria-label="Previous image"
-                >
-                  <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M15 18L9 12L15 6"
-                      stroke="#2C2C2C"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </button>
+                {/* Arrows — only shown when there are multiple images */}
+                {total > 1 && (
+                  <>
+                    {/* Left arrow */}
+                    <button
+                      type="button"
+                      onClick={goPrev}
+                      disabled={!hasPrev}
+                      className={`absolute left-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tr-[3px] rounded-br-[3px] p-[7px] backdrop-blur-[2px] shadow-[3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasPrev ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`}
+                      style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
+                      aria-label="Previous image"
+                    >
+                      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+                        <path
+                          d="M15 18L9 12L15 6"
+                          stroke="#2C2C2C"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
 
-                {/* Right arrow — always visible, disabled when no next */}
-                <button
-                  type="button"
-                  onClick={goNext}
-                  disabled={!hasNext}
-                  className={`absolute right-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tl-[3px] rounded-bl-[3px] p-[7px] backdrop-blur-[2px] shadow-[-3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasNext ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`}
-                  style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
-                  aria-label="Next image"
-                >
-                  <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M9 18L15 12L9 6"
-                      stroke="#2C2C2C"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </button>
+                    {/* Right arrow */}
+                    <button
+                      type="button"
+                      onClick={goNext}
+                      disabled={!hasNext}
+                      className={`absolute right-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tl-[3px] rounded-bl-[3px] p-[7px] backdrop-blur-[2px] shadow-[-3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasNext ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`}
+                      style={{ backgroundColor: "rgba(255,255,255,0.7)" }}
+                      aria-label="Next image"
+                    >
+                      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+                        <path
+                          d="M9 18L15 12L9 6"
+                          stroke="#2C2C2C"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </>
+                )}
               </div>
 
               {/* Close button — top-right outside the image */}

package/src/chat/SinglePopup.tsx

@@ -190,9 +190,12 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme,
         exit={{ x: "110%" }}
         transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
       >
-        {/* Inner white card */}
+        {/* Inner white card — `relative` is required so that ChatTranslateSettingsModal's
+            `absolute inset-0` overlay is contained here rather than escaping to an outer
+            positioned ancestor. Combined with `overflow-hidden` this clips the backdrop
+            to the rounded corners of the popup. */}
         <div
-          className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
+          className="relative flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white"
           style={{ overscrollBehavior: "contain" }}
         >
           {/* Header — 64px */}

package/src/modals/ChatTranslateSettingsModal.tsx

@@ -97,7 +97,7 @@ const ChatTranslateSettingsModal: React.FC<Props> = ({
       }}
     >
       {/* Semi-transparent backdrop over the chat panel */}
-      <div className="absolute inset-0 bg-black/30 rounded-[inherit]" />
+      <div className="absolute inset-0 bg-black/30 rounded-[inherit] overflow-hidden" />
 
       {/* Modal card */}
       <div
@@ -107,7 +107,7 @@ const ChatTranslateSettingsModal: React.FC<Props> = ({
         onClick={(e) => e.stopPropagation()}
         className={clsx(
           "relative w-[460px] max-w-[95%]",
-          "overflow-clip rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
+          "rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
           className,
         )}
       >

package/src/ui/ChatFooter.tsx

@@ -225,13 +225,23 @@ const ChatFooter: React.FC<Props> = ({
   const previewFilesToPayload = (files: PreviewFile[]) =>
     files.map((f) => ({ name: f.name, sizeMB: f.sizeMB, ext: f.ext, href: f.href, downloadName: f.downloadName }));
 
-  const clearAttachments = () => {
+  // Used by the preview strip's ✕ / remove buttons — safe to revoke because
+  // the user is cancelling the attachment (it will never appear in a message).
+  const cancelAttachments = () => {
     imgPreviews.forEach((u) => u.startsWith("blob:") && URL.revokeObjectURL(u));
     filePreviews.forEach((f) => f.href?.startsWith("blob:") && URL.revokeObjectURL(f.href));
     setImgPreviews([]);
     setFilePreviews([]);
   };
 
+  // Used after a successful send — do NOT revoke blobs here.
+  // The sent message object already holds these blob URLs and ChatMessageItem
+  // needs them to render the image. Revoking immediately makes <img src> fail.
+  const dismissAttachments = () => {
+    setImgPreviews([]);
+    setFilePreviews([]);
+  };
+
   /* ─────── Send handlers — all delegate to the single onSend prop ─────── */
 
   const sendText = async () => {
@@ -248,7 +258,7 @@ const ChatFooter: React.FC<Props> = ({
         images: imgPreviews,
         replyTo,
       });
-      clearAttachments();
+      dismissAttachments(); // ← do NOT revoke — blob URLs are now in the message
     } else {
       onSend({ type: "text", text: t, replyTo });
     }
@@ -268,7 +278,7 @@ const ChatFooter: React.FC<Props> = ({
       files: previewFilesToPayload(filePreviews),
       replyTo,
     });
-    clearAttachments();
+    dismissAttachments(); // ← do NOT revoke — blob URLs are now in the message
     clearReply?.();
     onAfterSend?.();
   };
@@ -432,9 +442,9 @@ const ChatFooter: React.FC<Props> = ({
       </div>
 
       {micError && (
-        <div className="mb-2 flex items-start gap-2 rounded-sm bg-[#f8f8f8] px-2 py-1.5 text-xs text-[#ff5301]">
-          <span><ChatInfoIcon className="mt-0.5 h-3.5 w-3.5" /></span>
-          <span>{micError}</span>
+        <div className="mb-2 flex items-center gap-2 rounded-sm bg-[#f8f8f8] px-2 py-1.5 text-xs text-[#ff5301]">
+          <span><ChatInfoIcon className="h-3.5 w-3.5 shrink-0" /></span>
+          <span className="flex-1">{micError}</span>
           <span className="pointer flex cursor-pointer items-center justify-center rounded-full p-1 hover:bg-black/10" onClick={() => setMicError("")}>
             <ChatXIcon className="h-3.5 w-3.5" />
           </span>