@realtimexsco/live-chat 1.4.17 → 1.4.18

package/README.md

@@ -2,9 +2,9 @@
 
 > Drop-in real-time chat UI for React and Next.js — direct messages, group chats, reactions, replies, forwarding, pinned/starred messages, and more. Built on Socket.IO, Zustand, Tailwind CSS v4, and Radix UI.
 
-[npm version](https://www.npmjs.com/package/@realtimexsco/live-chat)
-[npm downloads](https://www.npmjs.com/package/@realtimexsco/live-chat)
-[license](#license)
+[![npm version](https://img.shields.io/npm/v/@realtimexsco/live-chat.svg)](https://www.npmjs.com/package/@realtimexsco/live-chat)
+[![npm downloads](https://img.shields.io/npm/dm/@realtimexsco/live-chat.svg)](https://www.npmjs.com/package/@realtimexsco/live-chat)
+[![License: MIT](https://img.shields.io/npm/l/@realtimexsco/live-chat.svg)](#license)
 
 
 |              |                                                                                    |

package/dist/index.cjs

@@ -9823,10 +9823,10 @@ function AudioAttachmentPlayer({
     "div",
     {
       className: cn(
-        "chat-audio-player w-full min-w-[220px] max-w-[280px] rounded-xl border p-2.5",
+        "chat-audio-player w-full min-w-[220px] max-w-[280px] rounded-xl border p-2.5 transition-shadow duration-150",
         onThemeBubble && "chat-audio-player-on-dark border-white/20 bg-white/12 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-[2px]",
-        onIncomingBubble && "border-(--chat-border)/70 bg-(--chat-elevated) text-(--chat-text) shadow-sm [.dark_&]:bg-(--chat-surface)",
-        !inBubble && "border-(--chat-border) bg-(--chat-elevated) text-(--chat-text) shadow-sm",
+        onIncomingBubble && "border-(--chat-border)/70 bg-(--chat-elevated) text-(--chat-text) shadow-sm hover:shadow-md [.dark_&]:bg-(--chat-surface)",
+        !inBubble && "border-(--chat-border) bg-(--chat-elevated) text-(--chat-text) shadow-sm hover:shadow-md",
         className
       ),
       children: [
@@ -9862,7 +9862,7 @@ function AudioAttachmentPlayer({
               onClick: () => void togglePlay(),
               disabled: !url,
               className: cn(
-                "flex size-8 shrink-0 items-center justify-center rounded-full border transition-colors",
+                "flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-150 hover:scale-105",
                 onThemeBubble ? "border-white/30 bg-white/10 text-white hover:bg-white/15" : "border-(--chat-border) bg-(--chat-input-bg) text-(--chat-text) hover:bg-(--chat-hover)",
                 !url && "opacity-40"
               ),
@@ -9916,10 +9916,10 @@ function getMediaCardClasses(inBubble, isSender) {
   const onThemeBubble = inBubble && isSender;
   const onIncomingBubble = inBubble && !isSender;
   return cn(
-    "w-full min-w-[220px] max-w-[280px] rounded-xl border p-2.5",
+    "w-full min-w-[220px] max-w-[280px] rounded-xl border p-2.5 transition-shadow duration-150",
     onThemeBubble && "border-white/20 bg-white/12 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-[2px]",
-    onIncomingBubble && "border-(--chat-border)/70 bg-(--chat-elevated) text-(--chat-text) shadow-sm [.dark_&]:bg-(--chat-surface)",
-    !inBubble && "border-(--chat-border) bg-(--chat-elevated) text-(--chat-text) shadow-sm"
+    onIncomingBubble && "border-(--chat-border)/70 bg-(--chat-elevated) text-(--chat-text) shadow-sm hover:shadow-md [.dark_&]:bg-(--chat-surface)",
+    !inBubble && "border-(--chat-border) bg-(--chat-elevated) text-(--chat-text) shadow-sm hover:shadow-md"
   );
 }
 function VideoAttachmentPlayer({
@@ -10043,10 +10043,10 @@ function VideoAttachmentPlayer({
                 {
                   type: "button",
                   onClick: () => void togglePlay(),
-                  className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors hover:bg-black/30",
+                  className: "group/play absolute inset-0 flex items-center justify-center bg-black/20 transition-colors hover:bg-black/30",
                   "aria-label": `Play ${name}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "flex items-center justify-center rounded-full shadow-md",
+                    "flex items-center justify-center rounded-full shadow-md transition-transform duration-150 group-hover/play:scale-110",
                     compact ? "size-9" : "size-11",
                     onThemeBubble ? "bg-white/95 text-(--chat-theme)" : "bg-(--chat-surface)/95 text-(--chat-text)"
                   ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { size: compact ? 15 : 18, className: "ml-0.5 fill-current" }) })
@@ -10089,13 +10089,13 @@ function getAttachmentIcon(fileName, type, className, size = 20) {
 }
 function getAttachmentIconBoxClass(fileName, type) {
   const ext = fileName.split(".").pop()?.toLowerCase() || "";
-  if (["mp3", "wav", "ogg", "m4a"].includes(ext)) return "bg-violet-500";
-  if (["mp4", "mov", "webm"].includes(ext)) return "bg-pink-500";
-  if (ext === "pdf") return "bg-red-500";
-  if (["doc", "docx"].includes(ext)) return "bg-blue-500";
-  if (["xls", "xlsx", "csv"].includes(ext)) return "bg-emerald-600";
-  if (["ppt", "pptx"].includes(ext)) return "bg-orange-500";
-  return "bg-slate-500";
+  if (["mp3", "wav", "ogg", "m4a"].includes(ext)) return "bg-linear-to-br from-violet-500 to-fuchsia-500";
+  if (["mp4", "mov", "webm"].includes(ext)) return "bg-linear-to-br from-pink-500 to-rose-500";
+  if (ext === "pdf") return "bg-linear-to-br from-red-500 to-rose-600";
+  if (["doc", "docx"].includes(ext)) return "bg-linear-to-br from-blue-500 to-indigo-500";
+  if (["xls", "xlsx", "csv"].includes(ext)) return "bg-linear-to-br from-emerald-500 to-teal-600";
+  if (["ppt", "pptx"].includes(ext)) return "bg-linear-to-br from-orange-500 to-amber-500";
+  return "bg-linear-to-br from-slate-500 to-slate-600";
 }
 var MessageStatus = ({ status, isPending, className }) => {
   const resolvedStatus = status || "sent";
@@ -11245,28 +11245,28 @@ function ImageTile({ att, className, fill, embeddedInBubble, showImageCaption, o
     {
       type: "button",
       className: cn(
-        "relative block w-full overflow-hidden bg-(--chat-elevated)",
+        "group relative block w-full overflow-hidden bg-(--chat-elevated)",
         fill ? "h-full min-h-0" : "",
         className
       ),
       onClick: onOpen,
       "aria-label": `Open ${att.name || "image"}`,
       children: [
-        mediaUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element -- remote chat attachment URLs are dynamic/user-supplied
+        mediaUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
               src: mediaUrl,
               alt: att.name || "Image",
               className: cn(
-                "block",
+                "block transition-transform duration-300 ease-out group-hover:scale-[1.04]",
                 fill || embeddedInBubble ? "size-full object-cover" : "max-h-[300px] w-full rounded-xl object-contain"
               ),
               loading: "lazy"
             }
-          )
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full min-h-[80px] items-center justify-center text-xs text-(--chat-muted)", children: "Image unavailable" }),
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 bg-black/0 transition-colors duration-200 group-hover:bg-black/10", "aria-hidden": true })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full min-h-[80px] items-center justify-center text-xs text-(--chat-muted)", children: "Image unavailable" }),
         showImageCaption && imageCaption ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-linear-to-t from-black/75 via-black/35 to-transparent px-1.5 pb-1 pt-5 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-3 text-[10px] leading-snug text-white", children: imageCaption }) }) : null
       ]
     }
@@ -11701,14 +11701,14 @@ function FileAttachmentRow({
     "div",
     {
       className: cn(
-        "group w-full transition-opacity",
+        "group w-full transition-all duration-150",
         !stacked && "flex min-w-[220px] items-center gap-2",
         stacked && "py-1.5",
         stacked && showDivider && (onThemeBubble ? "border-t border-white/15" : "border-t border-(--chat-border)/35"),
         !stacked && "rounded-xl border p-2.5",
-        !stacked && onThemeBubble && "border-white/20 bg-white/12 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-[2px]",
-        !stacked && onIncomingBubble && "border-(--chat-border)/70 bg-(--chat-elevated) text-(--chat-text) shadow-sm [.dark_&]:bg-(--chat-surface)",
-        !stacked && !inBubble && "border-(--chat-border) bg-(--chat-surface) shadow-sm",
+        !stacked && onThemeBubble && "border-white/20 bg-white/12 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-[2px] hover:bg-white/16",
+        !stacked && onIncomingBubble && "border-(--chat-border)/70 bg-(--chat-elevated) text-(--chat-text) shadow-sm hover:border-(--chat-theme)/30 hover:shadow-md [.dark_&]:bg-(--chat-surface)",
+        !stacked && !inBubble && "border-(--chat-border) bg-(--chat-surface) shadow-sm hover:border-(--chat-theme)/30 hover:shadow-md",
         !fileUrl && "pointer-events-none opacity-60",
         isCaptionActive && "opacity-90"
       ),
@@ -11723,7 +11723,7 @@ function FileAttachmentRow({
               className: "flex min-w-0 flex-1 items-center gap-2.5 text-left disabled:cursor-default",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-                  "flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
+                  "flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-150 group-hover:scale-105",
                   getAttachmentIconBoxClass(rawName)
                 ), children: getAttachmentIcon(rawName, "file", "text-white", 18) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [