@realtimexsco/live-chat 1.3.2 → 1.3.4

package/README.md

@@ -4,14 +4,15 @@
 
 [![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](https://img.shields.io/npm/l/@realtimexsco/live-chat.svg)](./LICENSE)
+[![license](https://img.shields.io/npm/l/@realtimexsco/live-chat.svg)](https://bitbucket.org/software-co/realtimex-npm-package/src/1d8b3426735c2d080ded2ba67255bc43f5035f4b/LICENSE)
 
 | | |
 |---|---|
 | **Package** | [`@realtimexsco/live-chat`](https://www.npmjs.com/package/@realtimexsco/live-chat) |
 | **Styles** | `@realtimexsco/live-chat/styles.css` |
 | **Requires** | React 17+, Tailwind CSS **v4**, Zustand 4+ |
-| **License** | [MIT](./LICENSE) |
+| **Docs** | [realtimex.softwareco.com](https://realtimex.softwareco.com/) |
+| **License** | [MIT](https://bitbucket.org/software-co/realtimex-npm-package/src/1d8b3426735c2d080ded2ba67255bc43f5035f4b/LICENSE) |
 
 Socket.IO, REST client, Zustand store, Radix UI, emoji picker, and chat UI are **bundled**. Your app only installs peer dependencies.
 
@@ -58,16 +59,12 @@ DMs · groups · Socket.IO · reactions · replies · forward · edit/delete ·
 
 | Topic | Link |
 |-------|------|
-| Full setup guide (Tailwind, Vite, Next.js, config) | [docs/full-guide.md](./docs/full-guide.md) |
-| Customization (`components`, `classNames`, `features`) | [Customization](./docs/full-guide.md#customization--three-ways) |
-| ChatMain props & API | [Props reference](./docs/full-guide.md#chatmain-props-reference) |
-| Hooks & store | [Hooks & store](./docs/full-guide.md#hooks--store) |
-| Dev proxy (CORS) | [Dev proxy](./docs/full-guide.md#dev-proxy-cors) |
+| Full setup & docs | [https://realtimex.softwareco.com/](https://realtimex.softwareco.com/) |
 | npm package | [npmjs.com/package/@realtimexsco/live-chat](https://www.npmjs.com/package/@realtimexsco/live-chat) |
-| License | [MIT License](./LICENSE) |
+| License | [MIT](https://bitbucket.org/software-co/realtimex-npm-package/src/1d8b3426735c2d080ded2ba67255bc43f5035f4b/LICENSE) |
 
 ---
 
 ## License
 
-[MIT](./LICENSE) © RealtimeX
+[MIT](https://bitbucket.org/software-co/realtimex-npm-package/src/1d8b3426735c2d080ded2ba67255bc43f5035f4b/LICENSE) © RealtimeX

package/dist/index.cjs

@@ -860,6 +860,9 @@ var init_conversation_helpers = __esm({
       const mergedParticipants = conversation.participants !== void 0 ? mergeConversationParticipants(existing?.participants, conversation.participants) : existing?.participants ?? conversation.participants;
       const isGroup = isGroupConversation(conversation) || isGroupConversation(existing);
       const resolvedGroupImage = resolveGroupImage(conversation) || resolveGroupImage(existing);
+      const incomingGroupName = typeof conversation.groupName === "string" && conversation.groupName.trim() || typeof conversation.name === "string" && conversation.name.trim() || "";
+      const existingGroupName = typeof existing?.groupName === "string" && existing.groupName.trim() || typeof existing?.name === "string" && existing.name.trim() || "";
+      const resolvedGroupName = incomingGroupName || existingGroupName || void 0;
       return {
         ...existing,
         ...conversation,
@@ -867,7 +870,10 @@ var init_conversation_helpers = __esm({
         isGroup,
         isBlocked: resolvedBlocked,
         lastMessage: mergeLastMessage(existing?.lastMessage, conversation.lastMessage),
-        ...isGroup && resolvedGroupImage ? { image: resolvedGroupImage, groupImage: resolvedGroupImage } : {}
+        ...isGroup ? {
+          ...resolvedGroupName ? { groupName: resolvedGroupName, name: resolvedGroupName } : {},
+          ...resolvedGroupImage ? { image: resolvedGroupImage, groupImage: resolvedGroupImage } : {}
+        } : {}
       };
     };
     resolveConversationLastMessage = (conversation, messagesByConversation) => {
@@ -2803,8 +2809,7 @@ var init_message_handlers = __esm({
             conversationType: lastDM.conversationType || "individual",
             isGroup: false,
             ...shouldIncludeParticipants ? { participants: participantSeed } : {},
-            groupName: lastDM.groupName,
-            name: lastDM.groupName,
+            ...lastDM.groupName ? { groupName: lastDM.groupName, name: lastDM.groupName } : {},
             owner: existingConv?.owner ?? lastDM.owner
           },
           {
@@ -3147,8 +3152,10 @@ var init_group_handlers = __esm({
               _id: conversationId,
               conversationType: "group",
               isGroup: true,
-              groupName: lastDM.groupName,
-              name: lastDM.groupName,
+              ...lastDM.groupName || lastDM.name ? {
+                groupName: lastDM.groupName || lastDM.name,
+                name: lastDM.groupName || lastDM.name
+              } : {},
               participants: buildParticipantsFromMessagePayload(lastDM, loggedUserId)
             },
             {
@@ -3186,8 +3193,10 @@ var init_group_handlers = __esm({
             _id: conversationId,
             conversationType: "group",
             isGroup: true,
-            groupName: lastDM.groupName,
-            name: lastDM.groupName,
+            ...lastDM.groupName || lastDM.name ? {
+              groupName: lastDM.groupName || lastDM.name,
+              name: lastDM.groupName || lastDM.name
+            } : {},
             participants: buildParticipantsFromMessagePayload(lastDM, loggedUserId)
           },
           {
@@ -8858,7 +8867,7 @@ function MessageAttachmentsCaptionBar({
   onCancelEdit
 }) {
   if (isStandaloneMetaOnly) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-0.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1.5 pb-0.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         MessageCornerBadges,
         {
@@ -10069,6 +10078,8 @@ function FileAttachmentRow({
     }
     window.open(fileUrl, "_blank", "noopener,noreferrer");
   };
+  const onThemeBubble = inBubble && isSender;
+  const onIncomingBubble = inBubble && !isSender;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -10076,8 +10087,11 @@ function FileAttachmentRow({
         "group w-full transition-opacity",
         !stacked && "flex min-w-[220px] items-center gap-2",
         stacked && "py-1.5",
-        stacked && showDivider && (inBubble && isSender ? "border-t border-white/15" : "border-t border-(--chat-border)/35"),
-        !stacked && !inBubble && "rounded-2xl border border-(--chat-border) bg-(--chat-surface) p-2 shadow-sm",
+        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",
         !fileUrl && "pointer-events-none opacity-60",
         isCaptionActive && "opacity-90"
       ),
@@ -10089,36 +10103,31 @@ function FileAttachmentRow({
               type: "button",
               onClick: handleFileOpen,
               disabled: !fileUrl || selectionMode,
-              className: "flex min-w-0 flex-1 items-center gap-2 text-left disabled:cursor-default",
+              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 shrink-0 items-center justify-center rounded-lg text-white",
-                  stacked ? "size-9" : "size-10 rounded-xl shadow-sm",
+                  "flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
                   getAttachmentIconBoxClass(rawName)
-                ), children: getAttachmentIcon(rawName, "file", "text-white", stacked ? 18 : 20) }),
+                ), children: getAttachmentIcon(rawName, "file", "text-white", 18) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "block truncate text-xs font-medium leading-tight",
-                    inBubble && isSender ? "text-white" : "text-(--chat-text)"
+                    "block truncate text-[12px] font-semibold leading-tight",
+                    onThemeBubble ? "text-white" : "text-(--chat-text)"
                   ), children: displayName }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "mt-0.5 block truncate text-[10px] leading-tight uppercase",
-                    inBubble && isSender ? "text-white/60" : "text-(--chat-muted)"
+                    "mt-0.5 block truncate text-[10px] font-medium leading-tight uppercase tracking-wide",
+                    onThemeBubble ? "text-white/70" : "text-(--chat-muted)"
                   ), children: subtitle })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: cn(
-                      "flex shrink-0 items-center justify-center transition-colors",
-                      stacked ? "size-6 text-(--chat-muted) group-hover:text-(--chat-theme)" : cn(
-                        "size-7 rounded-lg border",
-                        inBubble && isSender ? "border-white/15 bg-white/10 text-white/80 group-hover:bg-white/15 group-hover:text-white" : "border-(--chat-border) bg-(--chat-elevated) text-(--chat-muted) group-hover:text-(--chat-theme)"
-                      ),
-                      stacked && inBubble && isSender && "text-white/70 group-hover:text-white"
+                      "flex size-8 shrink-0 items-center justify-center rounded-full transition-colors",
+                      onThemeBubble ? "text-white/80 group-hover:bg-white/10 group-hover:text-white" : "text-(--chat-muted) group-hover:bg-(--chat-hover) group-hover:text-(--chat-theme)"
                     ),
                     "aria-hidden": true,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: stacked ? 13 : 14 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 14 })
                   }
                 )
               ]
@@ -10129,13 +10138,13 @@ function FileAttachmentRow({
             {
               onClick: onEditCaption,
               label: `${attachmentCaption ? "Edit" : "Add"} caption for ${displayName}`,
-              className: inBubble && isSender ? "text-white/60 hover:text-white" : void 0
+              className: onThemeBubble ? "text-white/60 hover:text-white" : void 0
             }
           )
         ] }),
         stacked && attachmentCaption ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
-          "mt-1 whitespace-pre-wrap break-words pl-11 pr-7 text-[11px] leading-snug",
-          inBubble && isSender ? "text-white/85" : "text-(--chat-text-secondary)"
+          "mt-1 whitespace-pre-wrap break-words pl-12 pr-8 text-[11px] leading-snug",
+          onThemeBubble ? "text-white/85" : "text-(--chat-text-secondary)"
         ), children: attachmentCaption }) : null
       ]
     }
@@ -10254,17 +10263,30 @@ function MessageAttachmentsNonImageSection({
       att.id
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: nonImageGroups.map((group) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1.5", children: nonImageGroups.map((group) => {
     if (group.kind === "file-run") {
       if (group.items.length === 1) {
         return renderFileAttachmentFrame(group.items[0]);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-[220px]", children: group.items.map(
-        (att2, index) => renderFileAttachmentFrame(att2, {
-          stacked: true,
-          showDivider: index > 0
-        })
-      ) }, `file-run-${group.items.map((item) => item.id).join("-")}`);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "w-full min-w-[220px]",
+            isBubbleLayout && "rounded-xl border p-2",
+            isBubbleLayout && isSender && "border-white/20 bg-white/12 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-[2px]",
+            isBubbleLayout && !isSender && "border-(--chat-border)/70 bg-(--chat-elevated) shadow-sm [.dark_&]:bg-(--chat-surface)",
+            !isBubbleLayout && "rounded-xl border border-(--chat-border) bg-(--chat-surface) p-2 shadow-sm"
+          ),
+          children: group.items.map(
+            (att2, index) => renderFileAttachmentFrame(att2, {
+              stacked: true,
+              showDivider: index > 0
+            })
+          )
+        },
+        `file-run-${group.items.map((item) => item.id).join("-")}`
+      );
     }
     const att = group.item;
     const type = resolveAttachmentType(att);
@@ -10354,11 +10376,12 @@ function MessageAttachmentsView({
   const isImageOnlyBubble = isBubbleLayout && nonImages.length === 0 && images.length > 0;
   const showImageMetaOverlay = isImageOnlyBubble && !hasMessageCaption && !anyImageHasCaption && !attachmentSelectionMode;
   const showCaptionBar = showBottomBar && (!isImageOnlyBubble || hasMessageCaption);
-  const bubbleSurface = !isBubbleLayout ? void 0 : isImageOnlyBubble && !hasMessageCaption && !anyImageHasCaption ? "media" : isSender ? "sent" : "received";
+  const canShowSenderName = !!isGroup && !isSender && !!showSenderLabel && !!senderName;
+  const showForwardedInHeader = isBubbleLayout && isForwarded;
+  const bubbleSurface = !isBubbleLayout ? void 0 : isImageOnlyBubble && !hasMessageCaption && !anyImageHasCaption && !isForwarded && !canShowSenderName ? "media" : isSender ? "sent" : "received";
   const metaTimeClass = showImageMetaOverlay ? "text-white/90" : isSender ? "text-white/70" : "text-(--chat-muted)";
   const metaBorderClass = isSender ? "border-white/15" : "border-(--chat-border)/40";
   const metaBadgeVariant = showImageMetaOverlay || isBubbleLayout && isSender ? "on-dark" : "default";
-  const isForwardedImageOnly = isBubbleLayout && isForwarded && isImageOnlyBubble;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -10377,29 +10400,39 @@ function MessageAttachmentsView({
                 isSender,
                 surface: bubbleSurface,
                 className: cn(
-                  isImageOnlyBubble ? "p-0" : isForwarded ? "px-2 py-0.5" : "px-2.5 py-1"
+                  isImageOnlyBubble ? "overflow-hidden p-0" : isForwarded || canShowSenderName ? "px-2 py-1" : cn(
+                    "px-2.5",
+                    nonImages.length > 1 || images.length > 0 && nonImages.length > 0 ? "py-1.5" : "py-1"
+                  )
                 )
               })
             ),
             children: [
-              !isSender && showSenderLabel && senderName && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-0.5 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(GroupSenderName, { name: senderName }) }),
-              isBubbleLayout && isForwarded && !isForwardedImageOnly && /* @__PURE__ */ jsxRuntime.jsx(MessageForwardedLabel, { isSender, className: "px-0 pt-0 pb-0" }),
+              (canShowSenderName || showForwardedInHeader) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative z-10 flex min-w-0 flex-col gap-0.5",
+                    isImageOnlyBubble ? "px-2.5 pt-1.5 pb-1" : "px-0.5 pb-0.5"
+                  ),
+                  children: [
+                    canShowSenderName ? /* @__PURE__ */ jsxRuntime.jsx(GroupSenderName, { name: senderName }) : null,
+                    showForwardedInHeader ? /* @__PURE__ */ jsxRuntime.jsx(
+                      MessageForwardedLabel,
+                      {
+                        isSender,
+                        className: "px-0 pt-0 pb-0"
+                      }
+                    ) : null
+                  ]
+                }
+              ),
               isBubbleLayout && replySnippet ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1", children: replySnippet }) : null,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
                 "flex w-full flex-col",
-                !isImageOnlyBubble && "gap-0",
-                isImageOnlyBubble && "relative overflow-hidden rounded-[inherit]"
+                !isImageOnlyBubble && (images.length > 0 && nonImages.length > 0 ? "gap-1.5" : "gap-0"),
+                isImageOnlyBubble && "relative overflow-hidden"
               ), children: [
-                isForwardedImageOnly && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "pointer-events-none absolute inset-x-0 top-0 z-20 px-2 py-0.5",
-                      isSender ? "bg-linear-to-b from-(--chat-theme)/95 via-(--chat-theme)/55 to-transparent" : "bg-linear-to-b from-(--chat-incoming-bubble)/95 via-(--chat-incoming-bubble)/55 to-transparent"
-                    ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(MessageForwardedLabel, { isSender, overlay: true, className: "px-0 pt-0 pb-0" })
-                  }
-                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   MessageAttachmentsImageSection,
                   {
@@ -13837,6 +13870,7 @@ function MessageItemTextBubble({
     isSender,
     className: extra
   });
+  const canShowSenderName = !!isGroup && !isSender && !!showSenderLabel && !!senderName;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -13844,15 +13878,17 @@ function MessageItemTextBubble({
         bubbleClasses(
           cn(
             "flex min-w-[72px] flex-col transition-all duration-200",
-            isForwarded ? "gap-0.5 px-2.5 py-1.5 text-[13px]" : "gap-1 px-3.5 py-2.5 text-[14px]"
+            canShowSenderName ? "gap-0.5 px-2.5 py-1.5 text-[14px]" : isForwarded ? "gap-0.5 px-2.5 py-1.5 text-[13px]" : "gap-1 px-3.5 py-2.5 text-[14px]"
           )
         ),
         isPending && "opacity-70",
         isHighlighted && (isSender ? "ring-2 ring-amber-300/60" : "ring-2 ring-amber-200/60")
       ),
       children: [
-        isForwarded && /* @__PURE__ */ jsxRuntime.jsx(MessageForwardedLabel, { isSender, className: "px-0 pt-0 pb-0" }),
-        !isSender && showSenderLabel && senderName && /* @__PURE__ */ jsxRuntime.jsx(GroupSenderName, { name: senderName, className: "mb-0.5" }),
+        (canShowSenderName || isForwarded) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          canShowSenderName ? /* @__PURE__ */ jsxRuntime.jsx(GroupSenderName, { name: senderName }) : null,
+          isForwarded ? /* @__PURE__ */ jsxRuntime.jsx(MessageForwardedLabel, { isSender, className: "px-0 pt-0 pb-0" }) : null
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MessageReplySnippet_default,
           {