@realtimexsco/live-chat 1.3.3 → 1.4.0

package/dist/index.mjs

@@ -2,15 +2,17 @@ import { io } from 'socket.io-client';
 import axios from 'axios';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import React2, { createContext, useMemo, useContext, useState, useCallback, useRef, useEffect, useLayoutEffect, useSyncExternalStore } from 'react';
+import * as React2 from 'react';
+import React2__default, { createContext, useMemo, useContext, useState, useCallback, useRef, useEffect, useLayoutEffect, useSyncExternalStore } from 'react';
 import { Tooltip as Tooltip$1, Slot, Avatar as Avatar$1, ScrollArea as ScrollArea$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Dialog as Dialog$1, Switch as Switch$1, AlertDialog as AlertDialog$1 } from 'radix-ui';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { flushSync } from 'react-dom';
-import { Sun, Moon, Search, X, Loader2, UserPlus, ChevronDown, ArrowLeft, Users, WifiOff, Wifi, Sparkles, MessageSquareText, ChevronRight, Pin, Star, Phone, Video, MoreVertical, Info, UserKey, ShieldUser, Paperclip, Clock, MessageSquareX, Trash2, LogOut, Ban, CheckCheck, Check, Camera, Save, Pencil, Mail, CornerUpLeft, CheckSquare, Smile, MessageCircleMore, History, Shield, Send, AlertCircle, ShieldCheck, UserMinus, MessageCircle, ChevronRightIcon, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, ArrowRight, MoreHorizontal, PinOff, StarOff, XIcon, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, Eye, Captions } from 'lucide-react';
+import { Sun, Moon, Search, X, Loader2, UserPlus, ChevronDown, ArrowLeft, Users, WifiOff, Wifi, Sparkles, MessageSquareText, ChevronRight, Pin, Star, Phone, Video, MoreVertical, Info, UserKey, ShieldUser, Paperclip, Clock, MessageSquareX, Trash2, LogOut, Ban, CheckCheck, Check, Camera, Save, Pencil, Mail, CornerUpLeft, CheckSquare, Smile, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, MessageCircleMore, History, Shield, Send, AlertCircle, ShieldCheck, UserMinus, MessageCircle, ExternalLink, Download, ChevronLeft, ZoomOut, ZoomIn, RotateCcw, Music, ArrowRight, MoreHorizontal, PinOff, StarOff, XIcon, ImageIcon, Film, Play, Pause, FileText, FileSpreadsheet, FileIcon, Eye, Captions } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import EmojiPicker, { Theme } from 'emoji-picker-react';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import { toast } from 'react-hot-toast';
 
 var __defProp = Object.defineProperty;
@@ -560,7 +562,7 @@ var init_message_helpers = __esm({
   "src/store/helpers/message.helpers.ts"() {
     getMessageSenderId = (message) => String(message?.sender?._id || message?.sender?.id || message?.senderId || message?.fromUserId || message?.sender || "");
     extractMessageData = (payload) => {
-      const messageId = payload.messageId || payload._id || payload.message?._id || payload.message?.id;
+      const messageId2 = payload.messageId || payload._id || payload.message?._id || payload.message?.id;
       const content = payload.content || payload.message?.content;
       const conversationId = payload.conversationId || payload.conversation_id || payload.message?.conversationId || payload.message?.conversation_id;
       const status = payload.status || payload.message?.status;
@@ -568,7 +570,7 @@ var init_message_helpers = __esm({
       const isStarred = payload.isStarred ?? payload.message?.isStarred;
       const attachmentId = payload.attachmentId || payload.unpinAttachmentId || null;
       const caption = payload.caption ?? payload.message?.caption ?? null;
-      return { messageId, content, conversationId, status, isPinned, isStarred, attachmentId, caption };
+      return { messageId: messageId2, content, conversationId, status, isPinned, isStarred, attachmentId, caption };
     };
     statusRank = { sent: 0, delivered: 1, read: 2 };
     preferHigherStatus = (base, incoming) => {
@@ -799,15 +801,15 @@ var init_conversation_helpers = __esm({
     init_message_helpers();
     init_participant_helpers();
     init_unread_helpers();
-    findConversationIdByMessageId = (messagesByConversation, messageId) => {
+    findConversationIdByMessageId = (messagesByConversation, messageId2) => {
       return Object.keys(messagesByConversation).find(
         (cid) => messagesByConversation[cid].some(
-          (m) => String(m._id || m.id) === String(messageId)
+          (m) => String(m._id || m.id) === String(messageId2)
         )
       );
     };
-    applyMessageStatusToStore = (state, messageId, status, conversationId) => {
-      const normalizedMessageId = String(messageId);
+    applyMessageStatusToStore = (state, messageId2, status, conversationId) => {
+      const normalizedMessageId = String(messageId2);
       const resolvedConversationId = conversationId ? String(conversationId) : findConversationIdByMessageId(state.messagesByConversation, normalizedMessageId) || findConversationIdByLastMessageId(state.conversations, normalizedMessageId) || null;
       const nextConversations = state.conversations.map((conversation) => {
         const lastMessageId = String(
@@ -850,6 +852,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,
@@ -857,7 +862,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) => {
@@ -929,9 +937,9 @@ var init_conversation_helpers = __esm({
       if (!conversationId) return void 0;
       return conversations.find((c) => String(c._id) === String(conversationId));
     };
-    findConversationIdByLastMessageId = (conversations, messageId) => {
-      if (!messageId) return null;
-      const normalizedMessageId = String(messageId);
+    findConversationIdByLastMessageId = (conversations, messageId2) => {
+      if (!messageId2) return null;
+      const normalizedMessageId = String(messageId2);
       const match = conversations.find(
         (conversation) => String(conversation?.lastMessage?._id || conversation?.lastMessage?.id || "") === normalizedMessageId
       );
@@ -1350,7 +1358,7 @@ var init_api_constants = __esm({
         ADD_REMOVE_MEMBERS: "/conversation/group/participants/add-remove",
         ADD_REMOVE_ADMINS: "/conversation/group/admins/add-remove",
         SEARCH_MESSAGES: "/message/search-messages",
-        SEARCH_MESSAGES_CONTEXT: (messageId) => `/message/searched-message/context?messageId=${messageId}`,
+        SEARCH_MESSAGES_CONTEXT: (messageId2) => `/message/searched-message/context?messageId=${messageId2}`,
         BLOCK_UNBLOCK_USER: "/user/block-unblock"
       }
     };
@@ -1494,9 +1502,9 @@ var init_messages_api = __esm({
         throw error;
       }
     };
-    searchMessagesContext = async (messageId) => {
+    searchMessagesContext = async (messageId2) => {
       try {
-        const response = await apiClient.get(API_ENDPOINTS.GROUP.SEARCH_MESSAGES_CONTEXT(messageId));
+        const response = await apiClient.get(API_ENDPOINTS.GROUP.SEARCH_MESSAGES_CONTEXT(messageId2));
         return response.data;
       } catch (error) {
         console.error("Search messages context failed:", error);
@@ -1622,24 +1630,24 @@ var init_forwardPending_store = __esm({
   "src/store/forwardPending.store.ts"() {
     pendingForwards = /* @__PURE__ */ new Map();
     lastPendingMessageId = null;
-    setPendingForward = (messageId, meta) => {
-      if (!messageId) return;
-      const key = String(messageId);
+    setPendingForward = (messageId2, meta) => {
+      if (!messageId2) return;
+      const key = String(messageId2);
       pendingForwards.set(key, meta);
       lastPendingMessageId = key;
     };
-    peekPendingForward = (messageId) => {
-      if (!messageId) return void 0;
-      return pendingForwards.get(String(messageId));
+    peekPendingForward = (messageId2) => {
+      if (!messageId2) return void 0;
+      return pendingForwards.get(String(messageId2));
     };
     peekMostRecentPendingForward = () => {
       if (!lastPendingMessageId) return void 0;
       return pendingForwards.get(lastPendingMessageId);
     };
     getLastPendingForwardMessageId = () => lastPendingMessageId;
-    clearPendingForward = (messageId) => {
-      if (messageId) {
-        const key = String(messageId);
+    clearPendingForward = (messageId2) => {
+      if (messageId2) {
+        const key = String(messageId2);
         pendingForwards.delete(key);
         if (lastPendingMessageId === key) lastPendingMessageId = null;
         return;
@@ -2109,14 +2117,14 @@ var init_group_reaction_handlers = __esm({
       return Array.from(map.values());
     };
     handleGroupReactionAddReceive = (set, get, payload) => {
-      const messageId = payload.messageId || payload._id;
+      const messageId2 = payload.messageId || payload._id;
       const conversationId = payload.conversationId;
-      if (!messageId) return;
+      if (!messageId2) return;
       set((state) => {
-        const cid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId);
+        const cid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId2);
         if (!cid) return state;
         const messages = state.messagesByConversation[cid] || [];
-        const idx = messages.findIndex((m) => String(m._id || m.id) === String(messageId));
+        const idx = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
         if (idx === -1) return state;
         const nextMessages = [...messages];
         const currentMsg = { ...nextMessages[idx] };
@@ -2134,20 +2142,20 @@ var init_group_reaction_handlers = __esm({
         }
         nextMessages[idx] = currentMsg;
         return {
-          lastReactionUpdate: { ...payload, messageId, action: "add", _v: Date.now() },
+          lastReactionUpdate: { ...payload, messageId: messageId2, action: "add", _v: Date.now() },
           messagesByConversation: { ...state.messagesByConversation, [cid]: nextMessages }
         };
       });
     };
     handleGroupReactionRemoveReceive = (set, get, payload) => {
-      const messageId = payload.messageId || payload._id;
+      const messageId2 = payload.messageId || payload._id;
       const conversationId = payload.conversationId;
-      if (!messageId) return;
+      if (!messageId2) return;
       set((state) => {
-        const cid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId);
+        const cid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId2);
         if (!cid) return state;
         const messages = state.messagesByConversation[cid] || [];
-        const idx = messages.findIndex((m) => String(m._id || m.id) === String(messageId));
+        const idx = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
         if (idx === -1) return state;
         const nextMessages = [...messages];
         const currentMsg = { ...nextMessages[idx] };
@@ -2164,7 +2172,7 @@ var init_group_reaction_handlers = __esm({
         }
         nextMessages[idx] = currentMsg;
         return {
-          lastReactionUpdate: { ...payload, messageId, action: "remove", _v: Date.now() },
+          lastReactionUpdate: { ...payload, messageId: messageId2, action: "remove", _v: Date.now() },
           messagesByConversation: { ...state.messagesByConversation, [cid]: nextMessages }
         };
       });
@@ -2194,14 +2202,14 @@ function removeMessageAttachment(message, attachmentId) {
   if (attachments.length === message.attachments.length) return message;
   return { ...message, attachments };
 }
-function pinKey(messageId, attachmentId) {
-  return attachmentId ? `${messageId}:${attachmentId}` : String(messageId);
+function pinKey(messageId2, attachmentId) {
+  return attachmentId ? `${messageId2}:${attachmentId}` : String(messageId2);
 }
-function matchesPinEntry(entry, messageId, attachmentId) {
+function matchesPinEntry(entry, messageId2, attachmentId) {
   const entryMessageId = String(
     entry?.messageId?._id || entry?.messageId || entry?._id || entry?.id || ""
   );
-  if (entryMessageId !== String(messageId)) return false;
+  if (entryMessageId !== String(messageId2)) return false;
   const entryAttachmentId = entry?.attachmentId ? String(entry.attachmentId) : null;
   const targetAttachmentId = attachmentId ? String(attachmentId) : null;
   return entryAttachmentId === targetAttachmentId;
@@ -2216,13 +2224,13 @@ function applyPinnedListToMessages(messages, pinnedMessage) {
     )
   );
   return messages.map((message) => {
-    const messageId = String(message._id || message.id);
-    const hasWholeMessagePin = pinnedKeys.has(pinKey(messageId, null));
+    const messageId2 = String(message._id || message.id);
+    const hasWholeMessagePin = pinnedKeys.has(pinKey(messageId2, null));
     const attachments = (message.attachments || []).map((att) => {
       const attId = getAttachmentId(att);
       return {
         ...att,
-        isPinned: attId ? pinnedKeys.has(pinKey(messageId, attId)) : !!att.isPinned
+        isPinned: attId ? pinnedKeys.has(pinKey(messageId2, attId)) : !!att.isPinned
       };
     });
     return {
@@ -2284,13 +2292,13 @@ var init_pin_handlers = __esm({
         });
         return;
       }
-      const { messageId, conversationId, isPinned, attachmentId } = extractMessageData(payload);
-      if (!messageId || !conversationId) return;
+      const { messageId: messageId2, conversationId, isPinned, attachmentId } = extractMessageData(payload);
+      if (!messageId2 || !conversationId) return;
       set((state) => {
-        const sid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId);
+        const sid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId2);
         if (!sid) return state;
         const messages = state.messagesByConversation[sid] || [];
-        const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId));
+        const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
         let newMessagesByConversation = state.messagesByConversation;
         const msg = index !== -1 ? messages[index] : null;
         const wasPinned = attachmentId ? !!msg?.attachments?.some(
@@ -2312,9 +2320,9 @@ var init_pin_handlers = __esm({
         const newPinnedByConv = { ...state.pinnedMessagesByConversation };
         if (isPinned) {
           const currentPinned = newPinnedByConv[sid] || [];
-          if (!currentPinned.some((m) => matchesPinEntry(m, messageId, attachmentId || null))) {
+          if (!currentPinned.some((m) => matchesPinEntry(m, messageId2, attachmentId || null))) {
             const fullMsg = msg ? attachmentId ? {
-              messageId,
+              messageId: messageId2,
               attachmentId,
               attachment: msg.attachments?.find(
                 (att) => getAttachmentId(att) === String(attachmentId)
@@ -2326,7 +2334,7 @@ var init_pin_handlers = __esm({
           }
         } else {
           newPinnedByConv[sid] = (newPinnedByConv[sid] || []).filter(
-            (m) => !matchesPinEntry(m, messageId, attachmentId || payload.unpinAttachmentId || null)
+            (m) => !matchesPinEntry(m, messageId2, attachmentId || payload.unpinAttachmentId || null)
           );
         }
         const conversation = get().conversations?.find((c) => String(c._id) === String(sid));
@@ -2341,8 +2349,8 @@ var init_pin_handlers = __esm({
           pinnedCount = payload.totalCount;
         }
         const newPendingActions = { ...state.messagePendingActions };
-        if (newPendingActions[messageId]) {
-          delete newPendingActions[messageId];
+        if (newPendingActions[messageId2]) {
+          delete newPendingActions[messageId2];
         }
         return {
           lastPinUpdate: payload,
@@ -2373,13 +2381,13 @@ var init_star_handlers = __esm({
     init_attachment_helpers();
     handleStarUpdate = (set, get, payload) => {
       if (payload.starredBy && Array.isArray(payload.starredBy)) {
-        const { messageId: messageId2, attachmentId } = extractMessageData(payload);
+        const { messageId: messageId3, attachmentId } = extractMessageData(payload);
         const { starredBy } = payload;
-        if (!messageId2) return;
+        if (!messageId3) return;
         set((state) => {
-          const sid = payload.conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId2);
+          const sid = payload.conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId3);
           const newPendingActions = { ...state.messagePendingActions };
-          const pendingKey = String(messageId2);
+          const pendingKey = String(messageId3);
           if (newPendingActions[pendingKey]) {
             delete newPendingActions[pendingKey];
           }
@@ -2389,7 +2397,7 @@ var init_star_handlers = __esm({
           const loggedUserId = String(get().loggedUserDetails?._id || state.loggedUserDetails?._id || "");
           const isStarred2 = starredBy.some((id) => String(id?._id || id) === loggedUserId) || loggedUserId === "" && starredBy.length > 0;
           const messages = state.messagesByConversation[sid] || [];
-          const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
+          const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId3));
           let newMessagesByConversation = state.messagesByConversation;
           if (index !== -1) {
             const newMessages = [...messages];
@@ -2416,9 +2424,9 @@ var init_star_handlers = __esm({
           const newStarredByConv = { ...state.starredMessagesByConversation };
           const currentStarred = newStarredByConv[sid] || [];
           const exists = attachmentId ? currentStarred.some(
-            (m) => m.isAttachment && String(m.messageId) === String(messageId2) && String(m.attachmentId) === String(attachmentId)
+            (m) => m.isAttachment && String(m.messageId) === String(messageId3) && String(m.attachmentId) === String(attachmentId)
           ) : currentStarred.some(
-            (m) => !m.isAttachment && String(m.messageId?._id || m.messageId || m._id || m.id) === String(messageId2)
+            (m) => !m.isAttachment && String(m.messageId?._id || m.messageId || m._id || m.id) === String(messageId3)
           );
           const conversation = get().conversations?.find((c) => String(c._id) === String(sid));
           const existingCount = state.liveConversationCounts[sid]?.starredCount ?? conversation?.starredCount ?? 0;
@@ -2426,21 +2434,21 @@ var init_star_handlers = __esm({
           if (isStarred2 && !exists) {
             const fullMessage = attachmentId ? {
               _id: attachmentId,
-              messageId: messageId2,
+              messageId: messageId3,
               attachmentId,
               isAttachment: true,
               attachment: index !== -1 ? newMessagesByConversation[sid][index]?.attachments?.find(
                 (att) => getAttachmentId(att) === String(attachmentId)
               ) : payload.attachment,
               createdAt: payload.createdAt || (/* @__PURE__ */ new Date()).toISOString()
-            } : index !== -1 ? newMessagesByConversation[sid][index] : { ...payload, _id: messageId2 };
+            } : index !== -1 ? newMessagesByConversation[sid][index] : { ...payload, _id: messageId3 };
             newStarredByConv[sid] = [...currentStarred, fullMessage];
             starredCount = existingCount + 1;
           } else if (!isStarred2 && exists) {
             newStarredByConv[sid] = attachmentId ? currentStarred.filter(
-              (m) => !(m.isAttachment && String(m.messageId) === String(messageId2) && String(m.attachmentId) === String(attachmentId))
+              (m) => !(m.isAttachment && String(m.messageId) === String(messageId3) && String(m.attachmentId) === String(attachmentId))
             ) : currentStarred.filter(
-              (m) => String(m.messageId?._id || m.messageId || m._id || m.id) !== String(messageId2)
+              (m) => String(m.messageId?._id || m.messageId || m._id || m.id) !== String(messageId3)
             );
             starredCount = Math.max(0, existingCount - 1);
           }
@@ -2466,13 +2474,13 @@ var init_star_handlers = __esm({
         });
         return;
       }
-      const { messageId, isStarred, conversationId } = extractMessageData(payload);
-      if (!messageId) return;
+      const { messageId: messageId2, isStarred, conversationId } = extractMessageData(payload);
+      if (!messageId2) return;
       set((state) => {
-        const sid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId);
+        const sid = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId2);
         if (!sid) return { lastStarUpdate: payload };
         const messages = state.messagesByConversation[sid] || [];
-        const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId));
+        const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
         let newMessagesByConversation = state.messagesByConversation;
         const msg = index !== -1 ? messages[index] : null;
         const wasStarred = msg ? !!msg.isStarred : false;
@@ -2488,13 +2496,13 @@ var init_star_handlers = __esm({
         const newStarredByConv = { ...state.starredMessagesByConversation };
         if (isStarred) {
           const currentStarred = newStarredByConv[sid] || [];
-          if (!currentStarred.some((m) => String(m?._id || m?.id || m.messageId?._id || m.messageId?.id) === String(messageId))) {
+          if (!currentStarred.some((m) => String(m?._id || m?.id || m.messageId?._id || m.messageId?.id) === String(messageId2))) {
             const fullMsg = msg ? { ...msg, isStarred: true } : payload;
             newStarredByConv[sid] = [...currentStarred, fullMsg];
           }
         } else {
           newStarredByConv[sid] = (newStarredByConv[sid] || []).filter(
-            (m) => String(m?._id || m?.id || m.messageId?._id || m.messageId?.id) !== String(messageId)
+            (m) => String(m?._id || m?.id || m.messageId?._id || m.messageId?.id) !== String(messageId2)
           );
         }
         const conversation = get().conversations?.find((c) => String(c._id) === String(sid));
@@ -2509,7 +2517,7 @@ var init_star_handlers = __esm({
           starredCount = payload.totalCount;
         }
         const newPendingActions = { ...state.messagePendingActions };
-        const pendingKey = String(messageId);
+        const pendingKey = String(messageId2);
         if (newPendingActions[pendingKey]) {
           delete newPendingActions[pendingKey];
         }
@@ -2630,15 +2638,15 @@ var init_emit_actions = __esm({
         socket_service_default.emit("dm_unpin", p);
       },
       emitDmStar: (p) => {
-        const messageId = String(p.messageId);
-        handleStarUpdate(set, get, { ...p, messageId, isStarred: true });
-        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId]: ["star"] } }));
+        const messageId2 = String(p.messageId);
+        handleStarUpdate(set, get, { ...p, messageId: messageId2, isStarred: true });
+        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId2]: ["star"] } }));
         socket_service_default.emit("dm_star", p);
       },
       emitDmUnstar: (p) => {
-        const messageId = String(p.messageId);
-        handleStarUpdate(set, get, { ...p, messageId, isStarred: false });
-        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId]: ["unstar"] } }));
+        const messageId2 = String(p.messageId);
+        handleStarUpdate(set, get, { ...p, messageId: messageId2, isStarred: false });
+        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId2]: ["unstar"] } }));
         socket_service_default.emit("dm_unstar", p);
       },
       emitDmForward: (p) => {
@@ -2690,15 +2698,15 @@ var init_emit_actions = __esm({
         socket_service_default.emitGroupUnpin(p);
       },
       emitGroupStar: (p) => {
-        const messageId = String(p.messageId);
-        handleStarUpdate(set, get, { ...p, messageId, isStarred: true });
-        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId]: ["star"] } }));
+        const messageId2 = String(p.messageId);
+        handleStarUpdate(set, get, { ...p, messageId: messageId2, isStarred: true });
+        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId2]: ["star"] } }));
         socket_service_default.emitGroupStar(p);
       },
       emitGroupUnstar: (p) => {
-        const messageId = String(p.messageId);
-        handleStarUpdate(set, get, { ...p, messageId, isStarred: false });
-        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId]: ["unstar"] } }));
+        const messageId2 = String(p.messageId);
+        handleStarUpdate(set, get, { ...p, messageId: messageId2, isStarred: false });
+        set((state) => ({ messagePendingActions: { ...state.messagePendingActions, [messageId2]: ["unstar"] } }));
         socket_service_default.emitGroupUnstar(p);
       },
       emitGroupForward: (p) => {
@@ -2717,8 +2725,8 @@ var init_emit_actions = __esm({
           ...p.attachmentId ? { attachmentId: String(p.attachmentId) } : {}
         });
       },
-      clearForwardPending: (messageId) => {
-        clearForwardPendingActions(set, messageId);
+      clearForwardPending: (messageId2) => {
+        clearForwardPendingActions(set, messageId2);
       },
       emitConversationUpdate: (p) => socket_service_default.emitConversationUpdate(p),
       emitGroupLeave: (p) => socket_service_default.emitGroupLeave(p),
@@ -2743,7 +2751,7 @@ var init_message_handlers = __esm({
         get().conversations,
         loggedUserId
       );
-      const { messageId } = extractMessageData(lastDM);
+      const { messageId: messageId2 } = extractMessageData(lastDM);
       const tempId = lastDM.tempId;
       const isFromSelf = loggedUserDetails && String(lastDM.sender?._id || lastDM.sender) === String(loggedUserDetails._id);
       const activeConversationId = get().activeConversationId;
@@ -2753,14 +2761,14 @@ var init_message_handlers = __esm({
         const newPendingActions = { ...state.messagePendingActions };
         if (conversationId) {
           const current = nextMessagesByConversation[conversationId] || [];
-          let matchedId = messageId;
+          let matchedId = messageId2;
           if (tempId && state.messagePendingActions[tempId]) {
             matchedId = tempId;
           }
-          const exists = current.some((m) => String(m._id || m.id) === String(messageId));
+          const exists = current.some((m) => String(m._id || m.id) === String(messageId2));
           if (matchedId && matchedId === tempId) {
             nextMessagesByConversation[conversationId] = current.map(
-              (m) => String(m.id || m._id) === String(matchedId) ? { ...m, _id: messageId, id: messageId, status: messageWithStatus.status } : m
+              (m) => String(m.id || m._id) === String(matchedId) ? { ...m, _id: messageId2, id: messageId2, status: messageWithStatus.status } : m
             );
             delete newPendingActions[matchedId];
           } else if (!exists) {
@@ -2793,8 +2801,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
           },
           {
@@ -2816,27 +2823,27 @@ var init_message_handlers = __esm({
       }
     };
     handleEditDM = (set, get, payload) => {
-      const { messageId, content, conversationId, attachmentId, caption } = extractMessageData(payload);
-      if (!messageId) return;
+      const { messageId: messageId2, content, conversationId, attachmentId, caption } = extractMessageData(payload);
+      if (!messageId2) return;
       const captionText = caption ?? content ?? "";
       set((state) => {
         let searchConversationId = conversationId;
         if (!searchConversationId) {
-          searchConversationId = findConversationIdByMessageId(state.messagesByConversation, messageId);
+          searchConversationId = findConversationIdByMessageId(state.messagesByConversation, messageId2);
         }
         if (!searchConversationId) {
           searchConversationId = state.conversations.find(
-            (c) => String(c.lastMessage?._id || c.lastMessage?.id) === String(messageId)
+            (c) => String(c.lastMessage?._id || c.lastMessage?.id) === String(messageId2)
           )?._id;
         }
-        const normalizedEditPayload = { ...payload, messageId, content, conversationId: searchConversationId, _v: Date.now() };
+        const normalizedEditPayload = { ...payload, messageId: messageId2, content, conversationId: searchConversationId, _v: Date.now() };
         const newPendingActions = { ...state.messagePendingActions };
-        if (newPendingActions[messageId]) {
-          delete newPendingActions[messageId];
+        if (newPendingActions[messageId2]) {
+          delete newPendingActions[messageId2];
         }
         if (searchConversationId) {
           const messages = state.messagesByConversation[searchConversationId] || [];
-          const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId));
+          const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
           if (index !== -1) {
             const newMessages = [...messages];
             if (attachmentId) {
@@ -2862,15 +2869,15 @@ var init_message_handlers = __esm({
       });
     };
     handleDeleteDM = (set, get, payload, type) => {
-      const { messageId, conversationId, attachmentId } = extractMessageData(payload);
-      if (!messageId) return;
+      const { messageId: messageId2, conversationId, attachmentId } = extractMessageData(payload);
+      if (!messageId2) return;
       set((state) => {
-        const searchConversationId = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId);
+        const searchConversationId = conversationId || findConversationIdByMessageId(state.messagesByConversation, messageId2);
         const messageTombstoned = payload.messageTombstoned === true;
         let updatedConversations = state.conversations;
         if (searchConversationId && !attachmentId) {
           updatedConversations = state.conversations.map((c) => {
-            if (String(c._id) === String(searchConversationId) && String(c.lastMessage?._id || c.lastMessage?.id) === String(messageId)) {
+            if (String(c._id) === String(searchConversationId) && String(c.lastMessage?._id || c.lastMessage?.id) === String(messageId2)) {
               return { ...c, lastMessage: type === "me" ? { ...c.lastMessage, content: "" } : { ...c.lastMessage, isDeletedForEveryone: true, content: "This message has been deleted" } };
             }
             return c;
@@ -2881,7 +2888,7 @@ var init_message_handlers = __esm({
         if (searchConversationId) {
           if (attachmentId) {
             const updatedMessages = messages.map((m) => {
-              if (String(m._id || m.id) !== String(messageId)) return m;
+              if (String(m._id || m.id) !== String(messageId2)) return m;
               if (messageTombstoned || type === "everyone" && payload.content) {
                 return {
                   ...m,
@@ -2920,22 +2927,22 @@ var init_message_handlers = __esm({
               [searchConversationId]: updatedMessages
             };
           } else if (type === "me") {
-            nextMessagesByConversation = { ...state.messagesByConversation, [searchConversationId]: messages.filter((m) => String(m._id || m.id) !== String(messageId)) };
+            nextMessagesByConversation = { ...state.messagesByConversation, [searchConversationId]: messages.filter((m) => String(m._id || m.id) !== String(messageId2)) };
           } else {
             nextMessagesByConversation = {
               ...state.messagesByConversation,
-              [searchConversationId]: messages.map((m) => String(m._id || m.id) === String(messageId) ? { ...m, isDeletedForEveryone: true, content: "" } : m)
+              [searchConversationId]: messages.map((m) => String(m._id || m.id) === String(messageId2) ? { ...m, isDeletedForEveryone: true, content: "" } : m)
             };
           }
         }
         const newPendingActions = { ...state.messagePendingActions };
-        if (newPendingActions[messageId]) {
-          delete newPendingActions[messageId];
+        if (newPendingActions[messageId2]) {
+          delete newPendingActions[messageId2];
         }
-        const shouldMarkWholeMessageDeleted = type === "me" && !attachmentId && !state.deletedForMeIds.includes(messageId);
+        const shouldMarkWholeMessageDeleted = type === "me" && !attachmentId && !state.deletedForMeIds.includes(messageId2);
         return {
           lastDeleteDM: { ...payload, deleteType: type },
-          deletedForMeIds: shouldMarkWholeMessageDeleted ? [...state.deletedForMeIds, messageId] : state.deletedForMeIds,
+          deletedForMeIds: shouldMarkWholeMessageDeleted ? [...state.deletedForMeIds, messageId2] : state.deletedForMeIds,
           messagesByConversation: nextMessagesByConversation,
           conversations: updatedConversations,
           messagePendingActions: newPendingActions
@@ -3009,15 +3016,15 @@ var init_dm_actions = __esm({
       },
       receivedStatusUpdate: (payload) => {
         const data = extractMessageData(payload);
-        const { messageId, status } = data;
+        const { messageId: messageId2, status } = data;
         let { conversationId } = data;
-        if (!messageId || !status) return;
+        if (!messageId2 || !status) return;
         set({ lastStatusUpdate: payload });
         if (!conversationId) {
-          conversationId = findConversationIdByMessageId(get().messagesByConversation, messageId) || findConversationIdByLastMessageId(get().conversations, messageId) || void 0;
+          conversationId = findConversationIdByMessageId(get().messagesByConversation, messageId2) || findConversationIdByLastMessageId(get().conversations, messageId2) || void 0;
         }
         set((state) => ({
-          ...applyMessageStatusToStore(state, String(messageId), status, conversationId)
+          ...applyMessageStatusToStore(state, String(messageId2), status, conversationId)
         }));
       },
       receivedDMMarkRead: (payload) => {
@@ -3074,7 +3081,7 @@ var init_group_handlers = __esm({
         get().conversations,
         loggedUserId
       );
-      const { messageId } = extractMessageData(lastDM);
+      const { messageId: messageId2 } = extractMessageData(lastDM);
       const tempId = lastDM.tempId;
       const activeConversationId = get().activeConversationId;
       const isOpenConversation = conversationId && String(conversationId) === String(activeConversationId);
@@ -3111,23 +3118,23 @@ var init_group_handlers = __esm({
               );
               if (optimisticMsg) matchedTempId = optimisticMsg.id;
             }
-            const messageExists = current.some((m) => String(m._id || m.id) === String(messageId));
+            const messageExists = current.some((m) => String(m._id || m.id) === String(messageId2));
             if (!messageExists) {
               nextMessagesByConversation[conversationId] = [...current, {
                 ...lastDM,
-                _id: messageId,
-                id: messageId,
+                _id: messageId2,
+                id: messageId2,
                 status: lastDM.status || "sent"
               }];
             } else {
               nextMessagesByConversation[conversationId] = current.map(
-                (m) => String(m._id || m.id) === String(messageId) ? { ...m, status: lastDM.status || "sent" } : m
+                (m) => String(m._id || m.id) === String(messageId2) ? { ...m, status: lastDM.status || "sent" } : m
               );
             }
             if (matchedTempId) {
               delete newPendingActions[matchedTempId];
               nextMessagesByConversation[conversationId] = nextMessagesByConversation[conversationId].map(
-                (m) => String(m.id || m._id) === String(matchedTempId) ? { ...m, _id: messageId, id: messageId, status: lastDM.status || "sent" } : m
+                (m) => String(m.id || m._id) === String(matchedTempId) ? { ...m, _id: messageId2, id: messageId2, status: lastDM.status || "sent" } : m
               );
             }
           }
@@ -3137,8 +3144,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)
             },
             {
@@ -3176,8 +3185,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)
           },
           {
@@ -3196,10 +3207,10 @@ var init_group_handlers = __esm({
           (c) => String(c._id) === String(conversationId)
         );
         const isGroupChat = isGroupConversation(targetConv);
-        if (loggedUserDetails?._id && messageId && isGroupChat) {
+        if (loggedUserDetails?._id && messageId2 && isGroupChat) {
           get().emitGroupMessageDelivered({
             conversationId,
-            messageId,
+            messageId: messageId2,
             userId: loggedUserDetails._id
           });
         }
@@ -3277,15 +3288,15 @@ var init_group_actions2 = __esm({
       receivedGroupStatusUpdate: (payload) => {
         const data = extractMessageData(payload);
         let { conversationId } = data;
-        const { messageId, status } = data;
+        const { messageId: messageId2, status } = data;
         set({ lastStatusUpdate: payload });
         if (!status) return;
-        if (messageId) {
+        if (messageId2) {
           if (!conversationId) {
-            conversationId = findConversationIdByMessageId(get().messagesByConversation, messageId) || findConversationIdByLastMessageId(get().conversations, messageId) || void 0;
+            conversationId = findConversationIdByMessageId(get().messagesByConversation, messageId2) || findConversationIdByLastMessageId(get().conversations, messageId2) || void 0;
           }
           set((state) => ({
-            ...applyMessageStatusToStore(state, String(messageId), status, conversationId)
+            ...applyMessageStatusToStore(state, String(messageId2), status, conversationId)
           }));
           return;
         }
@@ -3501,7 +3512,7 @@ var init_receive = __esm({
           };
         });
       },
-      markDeletedForMe: (messageId) => set((state) => ({ deletedForMeIds: [...state.deletedForMeIds, messageId] }))
+      markDeletedForMe: (messageId2) => set((state) => ({ deletedForMeIds: [...state.deletedForMeIds, messageId2] }))
     });
     createReceiveActions = (set, get) => ({
       ...createDmReceiveActions(set, get),
@@ -3526,13 +3537,13 @@ var init_search_actions = __esm({
     init_api_service();
     init_store_helpers();
     createSearchActions = (set, _get) => ({
-      fetchSearchMessageContext: async (messageId, options) => {
+      fetchSearchMessageContext: async (messageId2, options) => {
         const searchMode = options?.searchMode !== false;
-        set({ isSearchActive: searchMode, searchedMessageId: messageId, isFetchingMessages: true });
+        set({ isSearchActive: searchMode, searchedMessageId: messageId2, isFetchingMessages: true });
         try {
-          const response = await searchMessagesContext(messageId);
+          const response = await searchMessagesContext(messageId2);
           const data = response.data?.list || response.data?.messages || response.messages || response.data || [];
-          const highlightId = response.data?.highlightMessageId || messageId;
+          const highlightId = response.data?.highlightMessageId || messageId2;
           if (data.length > 0) {
             const conversationId = data[0].conversationId;
             if (conversationId) {
@@ -3561,7 +3572,7 @@ var init_search_actions = __esm({
         }
       },
       setSearchActive: (active) => set({ isSearchActive: active }),
-      setSearchedMessageId: (messageId) => set({ searchedMessageId: messageId })
+      setSearchedMessageId: (messageId2) => set({ searchedMessageId: messageId2 })
     });
   }
 });
@@ -3928,6 +3939,7 @@ var buildIncomingMessageFromDM = (lastDM, loggedUserId, conversations) => {
     content: lastDM.content || lastDM.message?.content || "",
     sender: lastDM.sender?.name || lastDM.fromUserId || (isMe ? "Me" : "User"),
     senderId: String(lastDM.sender?._id || lastDM.sender || lastDM.fromUserId || ""),
+    senderImage: lastDM.sender?.image,
     timestamp: lastDM.createdAt || (/* @__PURE__ */ new Date()).toISOString(),
     isOwnMessage: isMe,
     channelId,
@@ -4085,9 +4097,9 @@ var syncLocalMessagesOnPinUpdate = (prev, lastPinUpdate) => {
   return next;
 };
 var syncLocalMessagesOnStarUpdate = (prev, lastStarUpdate, loggedUserId) => {
-  const messageId = lastStarUpdate.messageId || lastStarUpdate._id;
-  if (!messageId) return null;
-  const mid = String(messageId);
+  const messageId2 = lastStarUpdate.messageId || lastStarUpdate._id;
+  if (!messageId2) return null;
+  const mid = String(messageId2);
   let isStarred;
   if (typeof lastStarUpdate.isStarred === "boolean") {
     isStarred = lastStarUpdate.isStarred;
@@ -4106,9 +4118,9 @@ var syncLocalMessagesOnStarUpdate = (prev, lastStarUpdate, loggedUserId) => {
   return next;
 };
 var syncLocalMessagesOnReactionUpdate = (prev, lastReactionUpdate, messagesByConversation) => {
-  const messageId = lastReactionUpdate.messageId || lastReactionUpdate._id;
-  if (!messageId) return prev;
-  const mid = String(messageId);
+  const messageId2 = lastReactionUpdate.messageId || lastReactionUpdate._id;
+  if (!messageId2) return prev;
+  const mid = String(messageId2);
   let storeReactions;
   for (const msgs of Object.values(messagesByConversation)) {
     const found = msgs.find((m) => String(m._id || m.id) === mid);
@@ -4159,7 +4171,7 @@ var syncLocalMessagesOnReactionUpdate = (prev, lastReactionUpdate, messagesByCon
   return changed ? next : prev;
 };
 var syncLocalMessagesOnDelete = (prev, lastDeleteDM) => {
-  const messageId = lastDeleteDM.messageId || lastDeleteDM._id;
+  const messageId2 = lastDeleteDM.messageId || lastDeleteDM._id;
   const deleteType = lastDeleteDM.deleteType || "everyone";
   const attachmentId = lastDeleteDM.attachmentId ? String(lastDeleteDM.attachmentId) : null;
   const messageTombstoned = lastDeleteDM.messageTombstoned === true;
@@ -4167,7 +4179,7 @@ var syncLocalMessagesOnDelete = (prev, lastDeleteDM) => {
   Object.keys(next).forEach((channelId) => {
     if (attachmentId) {
       next[channelId] = next[channelId].map((message) => {
-        if (String(message._id || message.id) !== String(messageId)) {
+        if (String(message._id || message.id) !== String(messageId2)) {
           return message;
         }
         return applyLocalAttachmentDelete(
@@ -4181,26 +4193,26 @@ var syncLocalMessagesOnDelete = (prev, lastDeleteDM) => {
     }
     if (deleteType === "me") {
       next[channelId] = next[channelId].filter(
-        (m) => String(m._id || m.id) !== String(messageId)
+        (m) => String(m._id || m.id) !== String(messageId2)
       );
     } else {
       next[channelId] = next[channelId].map(
-        (m) => String(m._id || m.id) === String(messageId) ? { ...m, isDeletedForEveryone: true } : m
+        (m) => String(m._id || m.id) === String(messageId2) ? { ...m, isDeletedForEveryone: true } : m
       );
     }
   });
   return next;
 };
 var syncLocalMessagesOnEdit = (prev, lastEditDM) => {
-  const messageId = lastEditDM.messageId || lastEditDM._id;
+  const messageId2 = lastEditDM.messageId || lastEditDM._id;
   const content = lastEditDM.content;
   const attachmentId = lastEditDM.attachmentId ? String(lastEditDM.attachmentId) : null;
   const caption = lastEditDM.caption ?? content;
-  if (!messageId) return null;
+  if (!messageId2) return null;
   const next = { ...prev };
   Object.keys(next).forEach((channelId) => {
     const messages = next[channelId];
-    const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId));
+    const index = messages.findIndex((m) => String(m._id || m.id) === String(messageId2));
     if (index !== -1) {
       const updated = [...messages];
       const current = updated[index];
@@ -4470,7 +4482,7 @@ var Chat = ({
   const status = useStore((s) => s.status);
   const error = useStore((s) => s.error);
   useChatSync();
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     const clientId = client?.id;
     const initializeChat = async () => {
       if (!clientId || !loggedUserDetails) return;
@@ -4559,28 +4571,28 @@ var Chat = ({
     queryParamApis: queryParamApis ?? ["get"],
     queryParamsByApi: queryParamsByApi ?? {}
   });
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     setChatQueryParams(queryParams);
     setChatQueryParamApis(queryParamApis);
     setChatQueryParamsByApi(queryParamsByApi);
   }, [queryConfigKey]);
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     if (lastDM && onMessageReceived) {
       onMessageReceived(lastDM);
     }
   }, [lastDM, onMessageReceived]);
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     if (status === "connected" && onSocketConnected) {
       const socketId = useStore.getState().socketId;
       if (socketId) onSocketConnected(socketId);
     }
   }, [status, onSocketConnected]);
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     if (status === "error" && error && onSocketError) {
       onSocketError(error);
     }
   }, [status, error, onSocketError]);
-  const contextValue = React2.useMemo(
+  const contextValue = React2__default.useMemo(
     () => ({
       onSendMessage,
       client,
@@ -4600,7 +4612,7 @@ var Chat = ({
       messagesData
     ]
   );
-  const customization = React2.useMemo(
+  const customization = React2__default.useMemo(
     () => ({
       components: uiConfig.components,
       classNames: uiConfig.classNames,
@@ -6695,20 +6707,35 @@ init_chat_constants();
 // src/chat/lib/last-message-preview.ts
 init_store_helpers();
 
-// src/chat/lib/chat-attachment-display.ts
-init_chat_constants();
-function cleanAttachmentDisplayName(filename, fallback = "Attachment") {
-  const trimmed = filename.trim();
-  if (!trimmed) return fallback;
-  let name = trimmed;
-  const prefixPattern = new RegExp(`^\\d{${ATTACHMENT_FILENAME_TIMESTAMP_LENGTH}}_`);
-  while (prefixPattern.test(name)) {
-    name = name.slice(ATTACHMENT_FILENAME_TIMESTAMP_LENGTH + 1);
+// src/chat/lib/attachment-preview-labels.ts
+function getAttachmentTypePreviewLabel(type) {
+  switch (String(type || "").toLowerCase()) {
+    case "image":
+      return "Photo";
+    case "video":
+      return "Video";
+    case "audio":
+      return "Audio";
+    case "file":
+    case "document":
+    case "spreadsheet":
+      return "Attachment";
+    default:
+      return "Attachment";
   }
-  if (name.length > ATTACHMENT_FILENAME_TIMESTAMP_LENGTH && /^\d+$/.test(name.slice(0, ATTACHMENT_FILENAME_TIMESTAMP_LENGTH)) && name[ATTACHMENT_FILENAME_TIMESTAMP_LENGTH] !== "_") {
-    name = name.slice(ATTACHMENT_FILENAME_TIMESTAMP_LENGTH);
+}
+function getAttachmentCountPreviewLabel(type, count) {
+  if (count <= 1) return getAttachmentTypePreviewLabel(type);
+  switch (String(type).toLowerCase()) {
+    case "image":
+      return `${count} photos`;
+    case "video":
+      return `${count} videos`;
+    case "audio":
+      return `${count} audio files`;
+    default:
+      return `${count} attachments`;
   }
-  return name.trim() || trimmed;
 }
 
 // src/chat/lib/last-message-preview.ts
@@ -6716,21 +6743,30 @@ function getAttachmentOnlyPreviewText(attachments) {
   const images = attachments.filter((att2) => att2.type === "image" && att2.url);
   const videos = attachments.filter((att2) => att2.type === "video" && att2.url);
   const audios = attachments.filter((att2) => att2.type === "audio" && att2.url);
-  if (images.length > 1) return `${images.length} photos`;
+  const files = attachments.filter(
+    (att2) => att2.url && !["image", "video", "audio"].includes(att2.type)
+  );
+  if (images.length > 1) return getAttachmentCountPreviewLabel("image", images.length);
   if (images.length === 1) {
-    return images[0].caption?.trim() || "Photo";
+    return images[0].caption?.trim() || getAttachmentTypePreviewLabel("image");
   }
-  if (videos.length > 1) return `${videos.length} videos`;
+  if (videos.length > 1) return getAttachmentCountPreviewLabel("video", videos.length);
   if (videos.length === 1) {
-    return videos[0].caption?.trim() || "Video";
+    return videos[0].caption?.trim() || getAttachmentTypePreviewLabel("video");
   }
-  if (audios.length > 1) return `${audios.length} audio files`;
+  if (audios.length > 1) return getAttachmentCountPreviewLabel("audio", audios.length);
   if (audios.length === 1) {
-    return audios[0].caption?.trim() || "Audio";
+    return audios[0].caption?.trim() || getAttachmentTypePreviewLabel("audio");
+  }
+  if (files.length > 1) return getAttachmentCountPreviewLabel("file", files.length);
+  if (files.length === 1) {
+    return files[0].caption?.trim() || getAttachmentTypePreviewLabel(files[0].type);
+  }
+  if (attachments.length > 1) {
+    return getAttachmentCountPreviewLabel("file", attachments.length);
   }
-  if (attachments.length > 1) return `${attachments.length} files`;
   const att = attachments[0];
-  return att.caption?.trim() || cleanAttachmentDisplayName(att.name || "", "Attachment");
+  return att?.caption?.trim() || getAttachmentTypePreviewLabel(att?.type);
 }
 function getLastMessageSidebarPreview(message) {
   const content = String(message?.content || "").trim();
@@ -6744,6 +6780,10 @@ function getLastMessageSidebarPreview(message) {
   if (attachments.length > 0) {
     return getAttachmentOnlyPreviewText(attachments);
   }
+  const messageType = String(message?.type || "").toLowerCase();
+  if (messageType && messageType !== "text") {
+    return getAttachmentTypePreviewLabel(messageType);
+  }
   return "No messages yet";
 }
 function getMessagePreviewText(message, fallback = "Message") {
@@ -6755,6 +6795,10 @@ function getMessagePreviewText(message, fallback = "Message") {
   if (attachments.length > 0) {
     return getAttachmentOnlyPreviewText(attachments);
   }
+  const messageType = String(message?.type || "").toLowerCase();
+  if (messageType && messageType !== "text") {
+    return getAttachmentTypePreviewLabel(messageType);
+  }
   return fallback;
 }
 
@@ -7396,7 +7440,7 @@ function highlightSearchMatch(text, query) {
         children: part
       },
       `${part}-${index}`
-    ) : /* @__PURE__ */ jsx(React2.Fragment, { children: part }, `${part}-${index}`)
+    ) : /* @__PURE__ */ jsx(React2__default.Fragment, { children: part }, `${part}-${index}`)
   );
 }
 function getMessagePreview(message) {
@@ -7811,11 +7855,11 @@ function buildAttachmentSummary(attachments) {
     else fileCount += 1;
   }
   const parts = [];
-  if (imageCount) parts.push(`${imageCount} photo${imageCount > 1 ? "s" : ""}`);
-  if (videoCount) parts.push(`${videoCount} video${videoCount > 1 ? "s" : ""}`);
-  if (audioCount) parts.push(`${audioCount} audio file${audioCount > 1 ? "s" : ""}`);
-  if (fileCount) parts.push(`${fileCount} file${fileCount > 1 ? "s" : ""}`);
-  return parts.join(", ") || "Attachment";
+  if (imageCount) parts.push(getAttachmentCountPreviewLabel("image", imageCount));
+  if (videoCount) parts.push(getAttachmentCountPreviewLabel("video", videoCount));
+  if (audioCount) parts.push(getAttachmentCountPreviewLabel("audio", audioCount));
+  if (fileCount) parts.push(getAttachmentCountPreviewLabel("file", fileCount));
+  return parts.join(", ") || getAttachmentTypePreviewLabel("file");
 }
 function mapSavedMessageAttachments(msg, messageObj, ctx) {
   const loggedUserId = String(ctx.loggedUserDetails?._id || "");
@@ -7877,11 +7921,19 @@ function resolveSavedMessageContent(messageObj, msg) {
     }
     return { content: filename, messageType: "file", previewUrl: void 0 };
   }
-  if (messageType === "image") return { content: "Photo", messageType, previewUrl: void 0 };
-  if (messageType === "video") return { content: "Video", messageType, previewUrl: void 0 };
-  if (messageType === "audio") return { content: "Audio", messageType, previewUrl: void 0 };
-  if (messageType === "file") return { content: "File", messageType, previewUrl: void 0 };
-  return { content: "Attachment", messageType, previewUrl: void 0 };
+  if (messageType === "image") {
+    return { content: getAttachmentTypePreviewLabel("image"), messageType, previewUrl: void 0 };
+  }
+  if (messageType === "video") {
+    return { content: getAttachmentTypePreviewLabel("video"), messageType, previewUrl: void 0 };
+  }
+  if (messageType === "audio") {
+    return { content: getAttachmentTypePreviewLabel("audio"), messageType, previewUrl: void 0 };
+  }
+  if (messageType === "file") {
+    return { content: getAttachmentTypePreviewLabel("file"), messageType, previewUrl: void 0 };
+  }
+  return { content: getAttachmentTypePreviewLabel("file"), messageType, previewUrl: void 0 };
 }
 function getMessageId(msg) {
   if (msg?.messageId && typeof msg.messageId === "object") {
@@ -7915,7 +7967,7 @@ function readSenderFromRecord(record) {
 }
 function resolveSenderName(msg, ctx) {
   const messageObj = getMessageObject(msg);
-  const messageId = getMessageId(msg);
+  const messageId2 = getMessageId(msg);
   const loggedId = String(ctx.loggedUserDetails?._id || "");
   const tryRecord = (record) => {
     const parsed = readSenderFromRecord(record);
@@ -7932,9 +7984,9 @@ function resolveSenderName(msg, ctx) {
     const hit = tryRecord(record);
     if (hit) return hit;
   }
-  if (messageId && ctx.conversationMessages?.length) {
+  if (messageId2 && ctx.conversationMessages?.length) {
     const found = ctx.conversationMessages.find(
-      (m) => String(m._id || m.id) === String(messageId)
+      (m) => String(m._id || m.id) === String(messageId2)
     );
     if (found) {
       const hit = tryRecord(found);
@@ -7985,7 +8037,7 @@ function parseSavedMessage(msg, ctx = {}) {
   const mode = ctx.mode || "pinned";
   const prefs = ctx.dateTimePrefs ?? {};
   if (msg?.isAttachment) {
-    const messageId2 = String(msg.messageId || "");
+    const messageId3 = String(msg.messageId || "");
     const attachmentId2 = String(msg.attachmentId || msg._id || "");
     const attachments2 = mapSavedMessageAttachments(msg, null, ctx);
     const { content: content2, previewUrl: previewUrl2, messageType: messageType2 } = resolveSavedMessageContent(null, msg);
@@ -7993,8 +8045,8 @@ function parseSavedMessage(msg, ctx = {}) {
     const actionAt2 = msg?.createdAt || msg?.updatedAt || "";
     const bodyText2 = String(msg.attachment?.caption || "").trim() || void 0;
     return {
-      id: attachmentId2 || messageId2,
-      messageId: messageId2,
+      id: attachmentId2 || messageId3,
+      messageId: messageId3,
       attachmentId: attachmentId2 || void 0,
       content: content2,
       bodyText: bodyText2,
@@ -8013,7 +8065,7 @@ function parseSavedMessage(msg, ctx = {}) {
   }
   const messageObj = getMessageObject(msg);
   const id = getMessageId(msg);
-  const messageId = id;
+  const messageId2 = id;
   const attachmentId = msg?.attachmentId ? String(msg.attachmentId) : void 0;
   const attachments = mapSavedMessageAttachments(msg, messageObj, ctx);
   const rawContent = messageObj?.content ?? msg?.content ?? msg?.messageId?.content ?? "";
@@ -8035,8 +8087,8 @@ function parseSavedMessage(msg, ctx = {}) {
     metaLabel = "Starred by you";
   }
   return {
-    id: attachmentId ? `${messageId}:${attachmentId}` : id,
-    messageId,
+    id: attachmentId ? `${messageId2}:${attachmentId}` : id,
+    messageId: messageId2,
     attachmentId,
     content: displayContent,
     bodyText,
@@ -8066,6 +8118,22 @@ function groupSavedMessages(items) {
   }));
 }
 
+// src/chat/lib/chat-attachment-display.ts
+init_chat_constants();
+function cleanAttachmentDisplayName(filename, fallback = "Attachment") {
+  const trimmed = filename.trim();
+  if (!trimmed) return fallback;
+  let name = trimmed;
+  const prefixPattern = new RegExp(`^\\d{${ATTACHMENT_FILENAME_TIMESTAMP_LENGTH}}_`);
+  while (prefixPattern.test(name)) {
+    name = name.slice(ATTACHMENT_FILENAME_TIMESTAMP_LENGTH + 1);
+  }
+  if (name.length > ATTACHMENT_FILENAME_TIMESTAMP_LENGTH && /^\d+$/.test(name.slice(0, ATTACHMENT_FILENAME_TIMESTAMP_LENGTH)) && name[ATTACHMENT_FILENAME_TIMESTAMP_LENGTH] !== "_") {
+    name = name.slice(ATTACHMENT_FILENAME_TIMESTAMP_LENGTH);
+  }
+  return name.trim() || trimmed;
+}
+
 // src/chat/header/saved-message/saved-message-utils.ts
 var AVATAR_PALETTES = [
   "bg-violet-500/15 text-violet-600 dark:text-violet-300",
@@ -8487,6 +8555,18 @@ var MessageStatus = ({ status, isPending, className }) => {
   ) });
 };
 var MessageStatus_default = MessageStatus;
+function GroupSenderName({ name, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "block max-w-full truncate text-[13px] font-semibold leading-[1.15] tracking-tight text-(--chat-incoming-text)",
+        className
+      ),
+      children: name
+    }
+  );
+}
 function ForwardDoubleIcon({ className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -8524,22 +8604,10 @@ function MessageForwardedLabel({ isSender, className, overlay }) {
     }
   );
 }
-function GroupSenderName({ name, className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "block max-w-full truncate text-[13px] font-semibold leading-[1.15] tracking-tight text-(--chat-incoming-text)",
-        className
-      ),
-      children: name
-    }
-  );
-}
 
 // src/chat/lib/chat-message-bubble.ts
-function getBubbleCornerClasses() {
-  return "rounded-tl-[18px] rounded-tr-[18px] rounded-br-[18px] rounded-bl-none";
+function getBubbleCornerClasses(isSender) {
+  return isSender ? "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-none" : "rounded-tl-[18px] rounded-tr-[18px] rounded-br-[18px] rounded-bl-none";
 }
 function getChatBubbleClasses({
   isSender = false,
@@ -8550,7 +8618,7 @@ function getChatBubbleClasses({
   const isNeutral = resolvedSurface === "neutral";
   return cn(
     "relative",
-    getBubbleCornerClasses(),
+    getBubbleCornerClasses(isSender),
     resolvedSurface === "sent" && "chat-bubble-sent bg-(--chat-theme) text-white",
     resolvedSurface === "received" && "chat-bubble-received border border-(--chat-border)/60 bg-(--chat-incoming-bubble) text-(--chat-incoming-text)",
     isNeutral && "chat-bubble-received border border-(--chat-border)/60 bg-(--chat-incoming-bubble) text-(--chat-incoming-text)",
@@ -8848,7 +8916,7 @@ function MessageAttachmentsCaptionBar({
   onCancelEdit
 }) {
   if (isStandaloneMetaOnly) {
-    return /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-0.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1.5 pb-0.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
       /* @__PURE__ */ jsx(
         MessageCornerBadges,
         {
@@ -10059,6 +10127,8 @@ function FileAttachmentRow({
     }
     window.open(fileUrl, "_blank", "noopener,noreferrer");
   };
+  const onThemeBubble = inBubble && isSender;
+  const onIncomingBubble = inBubble && !isSender;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -10066,8 +10136,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"
       ),
@@ -10079,36 +10152,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__ */ 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__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(Eye, { size: stacked ? 13 : 14 })
+                    children: /* @__PURE__ */ jsx(Eye, { size: 14 })
                   }
                 )
               ]
@@ -10119,13 +10187,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__ */ 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
       ]
     }
@@ -10244,17 +10312,30 @@ function MessageAttachmentsNonImageSection({
       att.id
     );
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: nonImageGroups.map((group) => {
+  return /* @__PURE__ */ 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__ */ 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__ */ 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);
@@ -10327,7 +10408,8 @@ function MessageAttachmentsView({
   isGroupedWithPrev = false,
   isGroupedWithNext = false,
   showSenderLabel = false,
-  senderName
+  senderName,
+  senderId
 }) {
   const [documentPreview, setDocumentPreview] = useState(null);
   const visibleAttachments = getVisibleAttachments(attachments);
@@ -10368,7 +10450,10 @@ function MessageAttachmentsView({
                 isSender,
                 surface: bubbleSurface,
                 className: cn(
-                  isImageOnlyBubble ? "overflow-hidden p-0" : isForwarded || canShowSenderName ? "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"
+                  )
                 )
               })
             ),
@@ -10381,7 +10466,13 @@ function MessageAttachmentsView({
                     isImageOnlyBubble ? "px-2.5 pt-1.5 pb-1" : "px-0.5 pb-0.5"
                   ),
                   children: [
-                    canShowSenderName ? /* @__PURE__ */ jsx(GroupSenderName, { name: senderName }) : null,
+                    canShowSenderName ? /* @__PURE__ */ jsx(
+                      GroupSenderName,
+                      {
+                        name: senderName,
+                        colorSeed: senderId || senderName
+                      }
+                    ) : null,
                     showForwardedInHeader ? /* @__PURE__ */ jsx(
                       MessageForwardedLabel,
                       {
@@ -10395,7 +10486,7 @@ function MessageAttachmentsView({
               isBubbleLayout && replySnippet ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-1", children: replySnippet }) : null,
               /* @__PURE__ */ jsxs("div", { className: cn(
                 "flex w-full flex-col",
-                !isImageOnlyBubble && "gap-0",
+                !isImageOnlyBubble && (images.length > 0 && nonImages.length > 0 ? "gap-1.5" : "gap-0"),
                 isImageOnlyBubble && "relative overflow-hidden"
               ), children: [
                 /* @__PURE__ */ jsx(
@@ -10925,7 +11016,7 @@ function collectConversationAttachments(messages) {
   const items = [];
   for (const message of messages) {
     if (message?.isDeletedForEveryone) continue;
-    const messageId = String(message._id || message.id || "");
+    const messageId2 = String(message._id || message.id || "");
     const createdAt = message.createdAt || message.timestamp;
     const messageType = message.type || "text";
     for (const attachment of message.attachments || []) {
@@ -10943,13 +11034,35 @@ function collectConversationAttachments(messages) {
         url,
         name,
         type: resolveFileCategory(name, fileType, resolvedType),
-        messageId,
+        messageId: messageId2,
         createdAt,
         size: typeof attachment.size === "number" ? attachment.size : void 0,
         duration: typeof attachment.duration === "number" ? attachment.duration : void 0,
         fileType
       });
     }
+    if ((message.attachments || []).length === 0) {
+      const rootUrl = message.url || message.fileUrl || message.attachmentUrl || message.public_link || message.publicLink || "";
+      if (!rootUrl) continue;
+      const name = message.filename || message.fileName || message.name || "Attachment";
+      const fileType = message.fileType || message.mimeType || "";
+      const dedupeKey = `${rootUrl}|${name}`;
+      if (seen.has(dedupeKey)) continue;
+      seen.add(dedupeKey);
+      const baseType = inferAttachmentType(fileType, name);
+      const resolvedType = messageType === "image" && baseType === "file" ? "image" : baseType;
+      items.push({
+        id: String(message.attachmentId || message.fileId || dedupeKey),
+        url: rootUrl,
+        name,
+        type: resolveFileCategory(name, fileType, resolvedType),
+        messageId: messageId2,
+        createdAt,
+        size: typeof message.size === "number" ? message.size : void 0,
+        duration: typeof message.duration === "number" ? message.duration : void 0,
+        fileType
+      });
+    }
   }
   return items.sort(
     (a, b) => new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime()
@@ -11160,9 +11273,13 @@ function AttachmentSection({
 }
 var AttachmentsDrawer = ({ isOpen, onOpenChange, conversationId }) => {
   const messagesByConversation = useStore((s) => s.messagesByConversation);
+  const messagesMetadata = useStore((s) => s.messagesMetadata);
+  const fetchMessages2 = useStore((s) => s.fetchMessages);
   const [sectionVisibleCount, setSectionVisibleCount] = useState({});
   const [documentPreview, setDocumentPreview] = useState(null);
   const [imageLightboxIndex, setImageLightboxIndex] = useState(null);
+  const hasLoadedMessages = conversationId ? Boolean(messagesMetadata[conversationId]?.isFirstPage) : false;
+  const isLoading = isOpen && !!conversationId && !hasLoadedMessages;
   useEffect(() => {
     if (!isOpen) {
       setSectionVisibleCount({});
@@ -11173,6 +11290,10 @@ var AttachmentsDrawer = ({ isOpen, onOpenChange, conversationId }) => {
   useEffect(() => {
     setSectionVisibleCount({});
   }, [conversationId]);
+  useEffect(() => {
+    if (!isOpen || !conversationId || hasLoadedMessages) return;
+    fetchMessages2(conversationId);
+  }, [isOpen, conversationId, hasLoadedMessages, fetchMessages2]);
   const attachments = useMemo(() => {
     if (!conversationId) return [];
     const messages = messagesByConversation[conversationId] || [];
@@ -11224,7 +11345,11 @@ var AttachmentsDrawer = ({ isOpen, onOpenChange, conversationId }) => {
         ] }),
         /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-(--chat-muted)", children: "Shared media and files" })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "chat-message-scroll flex-1 overflow-y-auto bg-(--chat-main-bg) px-2.5 py-2", children: attachments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "chat-saved-empty flex min-h-[220px] flex-col items-center justify-center px-4 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "chat-message-scroll flex-1 overflow-y-auto bg-(--chat-main-bg) px-2.5 py-2", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-[220px] flex-col items-center justify-center px-4 text-center", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "mb-3 size-8 animate-spin text-(--chat-theme)" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-(--chat-text)", children: "Loading attachments..." }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-(--chat-muted)", children: "Fetching shared files for this chat" })
+      ] }) : attachments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "chat-saved-empty flex min-h-[220px] flex-col items-center justify-center px-4 text-center", children: [
         /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("div", { className: "chat-saved-empty-icon-wrap", children: /* @__PURE__ */ jsx(Paperclip, { size: 22, className: cn("chat-saved-empty-icon !text-(--chat-theme)") }) }) }),
         /* @__PURE__ */ jsx("p", { className: "text-[14px] font-semibold text-(--chat-text)", children: "No attachments" }),
         /* @__PURE__ */ jsx("p", { className: "mt-1.5 max-w-[240px] text-[12px] leading-relaxed text-(--chat-muted)", children: "Shared files will show up here." })
@@ -11607,7 +11732,7 @@ var ChannelDetailsDrawer = (props) => {
             {
               type: "button",
               onClick: () => fileInputRef.current?.click(),
-              className: "absolute -bottom-0.5 -right-0.5 flex size-6 items-center justify-center rounded-full border border-(--chat-border) bg-(--chat-surface) text-(--chat-muted) shadow-sm hover:text-(--chat-text)",
+              className: "absolute -bottom-0.5 -right-0.5 flex size-6 items-center justify-center rounded-full border border-(--chat-border) bg-(--chat-surface) text-(--chat-theme) shadow-sm hover:bg-(--chat-theme-10)",
               title: "Change group avatar",
               children: /* @__PURE__ */ jsx(Camera, { size: 12 })
             }
@@ -11646,7 +11771,7 @@ var ChannelDetailsDrawer = (props) => {
               {
                 variant: "outline",
                 size: "sm",
-                className: "h-8 flex-1 text-[12px]",
+                className: "h-8 flex-1 border-(--chat-border) bg-(--chat-surface) text-[12px] text-(--chat-text) hover:bg-(--chat-hover)",
                 onClick: () => setIsEditing(false),
                 children: [
                   /* @__PURE__ */ jsx(X, { className: "mr-1 size-3" }),
@@ -11658,7 +11783,7 @@ var ChannelDetailsDrawer = (props) => {
               Button,
               {
                 size: "sm",
-                className: "h-8 flex-1 text-[12px]",
+                className: "h-8 flex-1 border border-(--chat-theme) bg-(--chat-theme) text-[12px] text-white hover:opacity-90 disabled:opacity-50",
                 onClick: handleSave,
                 disabled: isSaving || imageUploadStatus === "uploading",
                 children: isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -11676,7 +11801,7 @@ var ChannelDetailsDrawer = (props) => {
             {
               variant: "ghost",
               size: "sm",
-              className: "mt-2 h-7 gap-1 px-2 text-[11px] text-(--chat-muted) hover:text-(--chat-text)",
+              className: "mt-2 h-7 gap-1 px-2 text-[11px] text-(--chat-theme) hover:bg-(--chat-theme-10) hover:text-(--chat-theme)",
               onClick: () => setIsEditing(true),
               children: [
                 /* @__PURE__ */ jsx(Pencil, { className: "size-3" }),
@@ -12534,8 +12659,8 @@ function useChannelHeader({
       }
     }
   };
-  const handleSelectSearchResult = async (messageId) => {
-    await fetchSearchMessageContext(messageId);
+  const handleSelectSearchResult = async (messageId2) => {
+    await fetchSearchMessageContext(messageId2);
     handleCloseSearch();
   };
   const handleSearchOpenChange = (open) => {
@@ -12571,6 +12696,14 @@ function useChannelHeader({
       fetchStarredMessages2(conversationId);
     }
   }, [state.isFavoriteOpen, conversationId, fetchStarredMessages2]);
+  useEffect(() => {
+    if (state.isAttachmentsOpen && conversationId) {
+      const meta = useStore.getState().messagesMetadata[conversationId];
+      if (!meta?.isFirstPage) {
+        fetchMessagesStore(conversationId);
+      }
+    }
+  }, [state.isAttachmentsOpen, conversationId, fetchMessagesStore]);
   const pinnedCount = liveCounts?.pinnedCount ?? activeChannel?.pinnedCount ?? 0;
   const starredCount = liveCounts?.starredCount ?? activeChannel?.starredCount ?? 0;
   const handleClearChat = () => {
@@ -12616,14 +12749,14 @@ function useChannelHeader({
       updateState({ isBlockAlertOpen: false });
     }
   };
-  const handleUnpin = (messageId, attachmentId) => {
+  const handleUnpin = (messageId2, attachmentId) => {
     if (!loggedUserDetails?._id || !conversationId || !activeChannel) return;
-    const loadingKey = attachmentId ? `${messageId}:${attachmentId}` : messageId;
+    const loadingKey = attachmentId ? `${messageId2}:${attachmentId}` : messageId2;
     updateState({ loadingIds: new Set(state.loadingIds).add(loadingKey) });
     const basePayload = {
       conversationId,
       sender: loggedUserDetails._id,
-      messageId,
+      messageId: messageId2,
       receiver: activeChannel.id,
       ...attachmentId ? { attachmentId } : {}
     };
@@ -12643,12 +12776,12 @@ function useChannelHeader({
     if (!dateStr) return "";
     return formatLongDate(dateStr);
   };
-  const handleUnstar = (messageId, attachmentId) => {
+  const handleUnstar = (messageId2, attachmentId) => {
     if (!loggedUserDetails?._id || !conversationId || !activeChannel) return;
-    const loadingKey = attachmentId ? `${messageId}:${attachmentId}` : messageId;
+    const loadingKey = attachmentId ? `${messageId2}:${attachmentId}` : messageId2;
     updateState({ loadingIds: new Set(state.loadingIds).add(loadingKey) });
     const basePayload = {
-      messageId,
+      messageId: messageId2,
       sender: loggedUserDetails._id,
       conversationId,
       receiver: activeChannel.id,
@@ -12918,7 +13051,7 @@ var MessageReactions = ({
         {
           onClick: () => onReactionClick(emoji),
           className: cn(
-            "flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border shadow-sm transition-all shadow-black/5 outline-none",
+            "flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[11px] border shadow-[0_1px_3px_rgba(15,23,42,0.08)] transition-all outline-none",
             isReactedByMe ? "bg-(--chat-theme-10) border-(--chat-theme-20) text-(--chat-theme)" : "bg-(--chat-surface) border-(--chat-border) text-(--chat-text) hover:bg-(--chat-hover)"
           ),
           children: [
@@ -12972,7 +13105,7 @@ var MessageToolbar = ({
     "div",
     {
       className: cn(
-        "absolute -top-8 z-40 flex items-center gap-0.5 rounded-full border border-(--chat-border) p-0.5 shadow-md backdrop-blur-sm",
+        "absolute -top-8 z-50 flex items-center gap-0.5 rounded-full border border-(--chat-border) p-0.5 shadow-md backdrop-blur-sm",
         "bg-(--chat-toolbar-bg) text-(--chat-text)",
         isSender ? "right-0" : "left-0"
       ),
@@ -13248,8 +13381,8 @@ init_useStore();
 
 // src/chat/lib/chat-selection.ts
 init_attachment_helpers();
-function buildSelectionKey(messageId, attachmentId) {
-  return pinKey(messageId, attachmentId || null);
+function buildSelectionKey(messageId2, attachmentId) {
+  return pinKey(messageId2, attachmentId || null);
 }
 function parseSelectionKey(key) {
   const colonIndex = key.indexOf(":");
@@ -13264,8 +13397,8 @@ function parseSelectionKey(key) {
 function messageUsesAttachmentSelection(message) {
   return getVisibleAttachments(message.attachments).length > 1;
 }
-function getSelectedAttachmentIdsForMessage(selectedKeys, messageId) {
-  const prefix = `${messageId}:`;
+function getSelectedAttachmentIdsForMessage(selectedKeys, messageId2) {
+  const prefix = `${messageId2}:`;
   const ids = /* @__PURE__ */ new Set();
   selectedKeys.forEach((key) => {
     if (key.startsWith(prefix)) {
@@ -13274,14 +13407,14 @@ function getSelectedAttachmentIdsForMessage(selectedKeys, messageId) {
   });
   return ids;
 }
-function isMessageWhollySelected(selectedKeys, messageId) {
-  return selectedKeys.has(messageId);
+function isMessageWhollySelected(selectedKeys, messageId2) {
+  return selectedKeys.has(messageId2);
 }
 function resolveForwardItems(selectedKeys, messages) {
   const items = [];
   selectedKeys.forEach((key) => {
-    const { messageId, attachmentId } = parseSelectionKey(key);
-    const message = messages.find((entry) => String(entry._id || entry.id) === messageId);
+    const { messageId: messageId2, attachmentId } = parseSelectionKey(key);
+    const message = messages.find((entry) => String(entry._id || entry.id) === messageId2);
     if (!message) return;
     items.push({ message, attachmentId });
   });
@@ -13307,7 +13440,7 @@ function useMessageItemActions({
   message,
   createdAt,
   attachments,
-  messageId,
+  messageId: messageId2,
   receiver,
   isDeletedForEveryone,
   reactions,
@@ -13359,10 +13492,10 @@ function useMessageItemActions({
   const allUsers = useStore((s) => s.allUsers);
   const loggedUserDetails = useStore((s) => s.loggedUserDetails);
   const pinnedMessagesByConversation = useStore((s) => s.pinnedMessagesByConversation);
-  const mid = String(messageId || "");
+  const mid = String(messageId2 || "");
   const pendingActions = mid ? messagePendingActions[mid] || [] : [];
   const isPending = Boolean(
-    isSender && (String(messageId || "").startsWith("temp-") || mid && (messagePendingActions[mid] || []).includes("send"))
+    isSender && (String(messageId2 || "").startsWith("temp-") || mid && (messagePendingActions[mid] || []).includes("send"))
   );
   const isEditPending = pendingActions.includes("edit");
   const isDeletePending = pendingActions.includes("delete");
@@ -13400,13 +13533,13 @@ function useMessageItemActions({
   };
   const handleSaveAttachmentCaption = (caption, attachment) => {
     const target = attachment ?? state.captionModalAttachment;
-    if (!messageId || !loggedUserDetails || !target) return;
+    if (!messageId2 || !loggedUserDetails || !target) return;
     const attachmentId = target.id;
     if (isGroup) {
       if (!conversationId) return;
       emitGroupEdit({
         content: caption,
-        messageId,
+        messageId: messageId2,
         sender: loggedUserDetails._id,
         conversationId,
         attachmentId
@@ -13415,7 +13548,7 @@ function useMessageItemActions({
       if (!receiver) return;
       emitDmEdit({
         content: caption,
-        messageId,
+        messageId: messageId2,
         sender: loggedUserDetails._id,
         receiver,
         attachmentId
@@ -13432,12 +13565,12 @@ function useMessageItemActions({
     onEnterSelectionMode?.();
   };
   const handleSaveEdit = () => {
-    if (!messageId || !loggedUserDetails) return;
+    if (!messageId2 || !loggedUserDetails) return;
     if (isGroup) {
       if (!conversationId) return;
       emitGroupEdit({
         content: state.editValue.trim(),
-        messageId,
+        messageId: messageId2,
         sender: loggedUserDetails._id,
         conversationId
       });
@@ -13445,7 +13578,7 @@ function useMessageItemActions({
       if (!receiver) return;
       emitDmEdit({
         content: state.editValue.trim(),
-        messageId,
+        messageId: messageId2,
         sender: loggedUserDetails._id,
         receiver
       });
@@ -13456,7 +13589,7 @@ function useMessageItemActions({
     updateState({ isEditing: false, editValue: message });
   };
   const handleDeleteMessage = (deleteType) => {
-    if (!messageId || !loggedUserDetails) return;
+    if (!messageId2 || !loggedUserDetails) return;
     if (deleteType === "everyone" && !isSender) return;
     if (deleteType === "everyone" && !isWithinEditWindow()) return;
     const attachmentIds = hasAttachments ? deleteAttachmentIds : [];
@@ -13464,7 +13597,7 @@ function useMessageItemActions({
       if (isGroup) {
         if (!conversationId) return;
         emitGroupDelete({
-          messageId,
+          messageId: messageId2,
           sender: loggedUserDetails._id,
           deleteType,
           conversationId,
@@ -13473,7 +13606,7 @@ function useMessageItemActions({
       } else {
         if (!receiver) return;
         emitDmDelete({
-          messageId,
+          messageId: messageId2,
           sender: loggedUserDetails._id,
           receiver,
           deleteType,
@@ -13495,7 +13628,7 @@ function useMessageItemActions({
     onForward?.();
   };
   const handleReactionClick = (emojiObject) => {
-    if (!messageId || !loggedUserDetails) return;
+    if (!messageId2 || !loggedUserDetails) return;
     const reaction = typeof emojiObject === "string" ? emojiObject : emojiObject.emoji || emojiObject.native;
     const hasReacted = reactions?.some(
       (r) => r.reaction === reaction && String(r.addedBy?._id || r.addedBy || r.sender?._id || r.sender) === String(loggedUserDetails._id)
@@ -13504,7 +13637,7 @@ function useMessageItemActions({
       if (isGroup) {
         if (!conversationId) return;
         emitGroupReactionRemove({
-          messageId,
+          messageId: messageId2,
           sender: loggedUserDetails._id,
           reaction,
           conversationId
@@ -13512,7 +13645,7 @@ function useMessageItemActions({
       } else {
         if (!receiver) return;
         emitDmReactionRemove({
-          messageId,
+          messageId: messageId2,
           sender: loggedUserDetails._id,
           receiver,
           reaction,
@@ -13523,7 +13656,7 @@ function useMessageItemActions({
       if (isGroup) {
         if (!conversationId) return;
         emitGroupReactionAdd({
-          messageId,
+          messageId: messageId2,
           sender: loggedUserDetails._id,
           reaction,
           conversationId
@@ -13531,7 +13664,7 @@ function useMessageItemActions({
       } else {
         if (!receiver) return;
         emitDmReactionAdd({
-          messageId,
+          messageId: messageId2,
           sender: loggedUserDetails._id,
           receiver,
           reaction,
@@ -13541,7 +13674,7 @@ function useMessageItemActions({
     }
   };
   const handlePinClick = () => {
-    if (!messageId || !loggedUserDetails) return;
+    if (!messageId2 || !loggedUserDetails) return;
     if (isPinned) {
       if (!isPinnedByMe) return;
       if (isGroup) {
@@ -13549,14 +13682,14 @@ function useMessageItemActions({
         emitGroupUnpin({
           conversationId,
           sender: loggedUserDetails._id,
-          messageId,
+          messageId: messageId2,
           receiver: ""
         });
       } else {
         emitDmUnpin({
           conversationId,
           sender: loggedUserDetails._id,
-          messageId,
+          messageId: messageId2,
           receiver: receiver || ""
         });
       }
@@ -13566,32 +13699,32 @@ function useMessageItemActions({
         emitGroupPin({
           conversationId,
           sender: loggedUserDetails._id,
-          messageId,
+          messageId: messageId2,
           receiver: ""
         });
       } else {
         emitDmPin({
           conversationId,
           sender: loggedUserDetails._id,
-          messageId,
+          messageId: messageId2,
           receiver: receiver || ""
         });
       }
     }
   };
   const handleStarClick = () => {
-    if (!messageId || !loggedUserDetails || !conversationId) return;
+    if (!messageId2 || !loggedUserDetails || !conversationId) return;
     if (isStarred) {
       if (isGroup) {
-        emitGroupUnstar({ messageId, sender: loggedUserDetails._id, conversationId });
+        emitGroupUnstar({ messageId: messageId2, sender: loggedUserDetails._id, conversationId });
       } else {
-        emitDmUnstar({ messageId, sender: loggedUserDetails._id, conversationId });
+        emitDmUnstar({ messageId: messageId2, sender: loggedUserDetails._id, conversationId });
       }
     } else {
       if (isGroup) {
-        emitGroupStar({ messageId, sender: loggedUserDetails._id, conversationId });
+        emitGroupStar({ messageId: messageId2, sender: loggedUserDetails._id, conversationId });
       } else {
-        emitDmStar({ messageId, sender: loggedUserDetails._id, conversationId });
+        emitDmStar({ messageId: messageId2, sender: loggedUserDetails._id, conversationId });
       }
     }
   };
@@ -13813,6 +13946,7 @@ function MessageItemTextBubble({
   isForwarded,
   showSenderLabel,
   senderName,
+  senderId,
   replyTo,
   loggedUserDetails,
   allUsers,
@@ -13851,7 +13985,13 @@ function MessageItemTextBubble({
       ),
       children: [
         (canShowSenderName || isForwarded) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          canShowSenderName ? /* @__PURE__ */ jsx(GroupSenderName, { name: senderName }) : null,
+          canShowSenderName ? /* @__PURE__ */ jsx(
+            GroupSenderName,
+            {
+              name: senderName,
+              colorSeed: senderId || senderName
+            }
+          ) : null,
           isForwarded ? /* @__PURE__ */ jsx(MessageForwardedLabel, { isSender, className: "px-0 pt-0 pb-0" }) : null
         ] }),
         /* @__PURE__ */ jsx(
@@ -13902,7 +14042,7 @@ function MessageItemTextBubble({
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
           hasText && /* @__PURE__ */ jsxs("p", { className: "whitespace-pre-wrap break-words leading-snug", children: [
             message,
             isEdited && /* @__PURE__ */ jsx(
@@ -13960,6 +14100,7 @@ function MessageItemAttachmentBubble({
   isGroupedWithNext,
   showSenderLabel,
   senderName,
+  senderId,
   formattedTime,
   status,
   isPending,
@@ -14008,6 +14149,7 @@ function MessageItemAttachmentBubble({
           isGroupedWithNext,
           showSenderLabel,
           senderName,
+          senderId,
           formattedTime,
           status,
           isPending,
@@ -14067,6 +14209,7 @@ function MessageItemView(props) {
     isGroup,
     isHighlighted,
     senderName,
+    senderId,
     senderImage,
     showSenderLabel,
     senderAvatarImage,
@@ -14243,6 +14386,7 @@ function MessageItemView(props) {
                           isGroupedWithNext,
                           showSenderLabel,
                           senderName,
+                          senderId,
                           formattedTime,
                           status,
                           isPending,
@@ -14284,6 +14428,7 @@ function MessageItemView(props) {
                           isForwarded,
                           showSenderLabel,
                           senderName,
+                          senderId,
                           replyTo,
                           loggedUserDetails,
                           allUsers,
@@ -14474,6 +14619,28 @@ function MessageSelectionBar({
 
 // src/chat/active-channel-messages/utils.ts
 var getMessageSenderId2 = (msg) => msg ? String(msg.senderId || msg.sender?._id || "") : "";
+var isLikelyObjectId = (value) => /^[a-f\d]{24}$/i.test(value);
+function resolveGroupSenderDisplay(message, allUsers = [], participants = []) {
+  const senderId = getMessageSenderId2(message);
+  if (senderId) {
+    const fromUsers = allUsers.find((user) => String(user._id) === senderId);
+    if (fromUsers?.name?.trim()) {
+      return { name: fromUsers.name.trim(), image: fromUsers.image };
+    }
+    const fromParticipants = participants.find((participant) => {
+      const id = typeof participant === "string" ? participant : participant?._id;
+      return String(id) === senderId;
+    });
+    if (fromParticipants && typeof fromParticipants === "object" && fromParticipants.name?.trim()) {
+      return { name: fromParticipants.name.trim(), image: fromParticipants.image };
+    }
+  }
+  const sender = message.sender;
+  if (typeof sender === "string" && sender.trim() && !isLikelyObjectId(sender.trim())) {
+    return { name: sender.trim(), image: message.senderImage };
+  }
+  return { name: "User", image: void 0 };
+}
 var isSameMessageSide = (a, b, isGroupChat) => {
   if (!!a.isOwnMessage !== !!b.isOwnMessage) return false;
   if (a.isOwnMessage) return true;
@@ -14487,8 +14654,8 @@ function canDeleteSelectionForEveryone(selectedKeys, messages, isGroup) {
   const parsed = [...selectedKeys].map((key) => parseSelectionKey(key));
   const messageIds = new Set(parsed.map((entry) => entry.messageId));
   if (messageIds.size !== 1) return false;
-  const messageId = [...messageIds][0];
-  const message = messages.find((entry) => String(entry._id || entry.id) === messageId);
+  const messageId2 = [...messageIds][0];
+  const message = messages.find((entry) => String(entry._id || entry.id) === messageId2);
   if (!message?.isOwnMessage) return false;
   if (!isWithinMessageEditWindow(message.timestamp, isGroup)) return false;
   const hasAttachmentKey = parsed.some((entry) => entry.attachmentId);
@@ -14502,6 +14669,9 @@ function canDeleteSelectionForEveryone(selectedKeys, messages, isGroup) {
   });
 }
 
+// src/chat/active-channel-messages/ActiveChannelMessagesView.tsx
+init_useStore();
+
 // src/chat/active-channel-messages/useActiveChannelMessages.ts
 init_useStore();
 init_store_helpers();
@@ -14517,6 +14687,7 @@ function mapApiMessage(m, activeChannel, conversationId, loggedUserId, activeCon
     content: m.content,
     sender: m.sender?.name || "User",
     senderId: String(m.sender?._id || m.sender || ""),
+    senderImage: m.sender?.image,
     receiver: activeChannel?.id,
     timestamp: m.createdAt,
     isOwnMessage: isOwn,
@@ -14544,7 +14715,101 @@ function mapApiMessage(m, activeChannel, conversationId, loggedUserId, activeCon
   };
 }
 
+// src/chat/active-channel-messages/jump-to-date.ts
+function startOfLocalDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function toDateInputValue(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function clampJumpDate(picked, minDay, maxDay) {
+  if (!Number.isFinite(minDay) || !Number.isFinite(maxDay) || minDay > maxDay) return null;
+  const at = startOfLocalDay(picked);
+  const clamped = Math.min(Math.max(at, minDay), maxDay);
+  return new Date(clamped);
+}
+function resolveJumpDateBounds(createdAt, oldestMessageTimestamp, now = /* @__PURE__ */ new Date()) {
+  const today = startOfLocalDay(now);
+  const createdDay = createdAt ? startOfLocalDay(new Date(createdAt)) : null;
+  const oldestDay = oldestMessageTimestamp ? startOfLocalDay(new Date(oldestMessageTimestamp)) : null;
+  let minDay = today;
+  if (createdDay != null && oldestDay != null) {
+    minDay = Math.max(createdDay, oldestDay);
+  } else if (oldestDay != null) {
+    minDay = oldestDay;
+  } else if (createdDay != null) {
+    minDay = createdDay;
+  }
+  return { minDay: Math.min(minDay, today), maxDay: today };
+}
+function resolveJumpPreset(preset, now = /* @__PURE__ */ new Date()) {
+  const day = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  if (preset === "today") return day.getTime();
+  if (preset === "yesterday") {
+    day.setDate(day.getDate() - 1);
+    return day.getTime();
+  }
+  if (preset === "lastWeek") {
+    day.setDate(day.getDate() - 7);
+    return day.getTime();
+  }
+  day.setMonth(day.getMonth() - 1);
+  return day.getTime();
+}
+function messageId(m) {
+  return String(m._id || m.id);
+}
+function findNearestMessageByDay(messages, targetDay) {
+  let best = messages[0];
+  let bestDist = Infinity;
+  let bestDay = startOfLocalDay(new Date(best.timestamp));
+  for (const m of messages) {
+    const day = startOfLocalDay(new Date(m.timestamp));
+    const dist = Math.abs(day - targetDay);
+    if (dist < bestDist || dist === bestDist && day < bestDay) {
+      best = m;
+      bestDist = dist;
+      bestDay = day;
+    }
+  }
+  return best;
+}
+function resolveJumpStep(messages, pending, hasMore) {
+  if (messages.length === 0) {
+    return hasMore ? { action: "loadOlder" } : { action: "done" };
+  }
+  if (pending.kind === "beginning") {
+    if (hasMore) return { action: "loadOlder" };
+    return { action: "scroll", messageId: messageId(messages[0]) };
+  }
+  const oldestDay = startOfLocalDay(new Date(messages[0].timestamp));
+  if (hasMore && oldestDay > pending.at) {
+    return { action: "loadOlder" };
+  }
+  const onDay = messages.find(
+    (m) => startOfLocalDay(new Date(m.timestamp)) === pending.at
+  );
+  if (onDay) {
+    return { action: "scroll", messageId: messageId(onDay) };
+  }
+  const nearest = findNearestMessageByDay(messages, pending.at);
+  return { action: "scroll", messageId: messageId(nearest) };
+}
+function smoothScrollToMessage(container, messageEl) {
+  const containerRect = container.getBoundingClientRect();
+  const messageRect = messageEl.getBoundingClientRect();
+  const delta = messageRect.top - containerRect.top - Math.min(120, container.clientHeight * 0.25);
+  container.scrollTo({
+    top: Math.max(0, container.scrollTop + delta),
+    behavior: "smooth"
+  });
+}
+
 // src/chat/active-channel-messages/useActiveChannelMessages.ts
+var MAX_JUMP_OLDER_PAGES = 40;
 function useActiveChannelMessages({
   activeChannel,
   loggedUserId,
@@ -14567,6 +14832,11 @@ function useActiveChannelMessages({
   const previousMessageCountRef = useRef(0);
   const previousLastMessageIdRef = useRef(null);
   const [enteringMessageIds, setEnteringMessageIds] = useState(/* @__PURE__ */ new Set());
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  const stickToBottomRef = useRef(true);
+  const pendingJumpRef = useRef(null);
+  const jumpPagesRef = useRef(0);
+  const [jumpNonce, setJumpNonce] = useState(0);
   const { fetchMessages: fetchMessages2, messagesMetadata, deletedForMeIds, searchedMessageId, isSearchActive, setSearchActive, setSearchedMessageId, fetchSearchMessageContext } = useStore();
   const loggedUserImage = useStore((s) => s.loggedUserDetails?.image);
   const conversations = useStore((s) => s.conversations);
@@ -14590,6 +14860,13 @@ function useActiveChannelMessages({
     })),
     [displayMessages, messagesById, loggedUserId]
   );
+  const jumpDateBounds = useMemo(
+    () => resolveJumpDateBounds(
+      conversationInfo?.createdAt,
+      displayMessages[0]?.timestamp
+    ),
+    [conversationInfo?.createdAt, displayMessages]
+  );
   useEffect(() => {
     const messages = messagesWithResolvedReplies;
     const lastMessage = messages[messages.length - 1];
@@ -14627,6 +14904,10 @@ function useActiveChannelMessages({
     previousMessageCountRef.current = 0;
     previousLastMessageIdRef.current = null;
     setEnteringMessageIds(/* @__PURE__ */ new Set());
+    pendingJumpRef.current = null;
+    jumpPagesRef.current = 0;
+    stickToBottomRef.current = true;
+    setShowScrollToBottom(false);
   }, [conversationId, clearSelection]);
   const onSelectionModeChangeRef = useRef(onSelectionModeChange);
   useEffect(() => {
@@ -14636,10 +14917,10 @@ function useActiveChannelMessages({
     onSelectionModeChangeRef.current?.(selectionMode);
   }, [selectionMode]);
   const toggleSelection = useCallback((message, attachmentId) => {
-    const messageId = String(message._id || message.id);
-    if (!messageId) return;
+    const messageId2 = String(message._id || message.id);
+    if (!messageId2) return;
     const useAttachmentSelection = messageUsesAttachmentSelection(message);
-    const key = useAttachmentSelection && attachmentId ? buildSelectionKey(messageId, attachmentId) : messageId;
+    const key = useAttachmentSelection && attachmentId ? buildSelectionKey(messageId2, attachmentId) : messageId2;
     setSelectedKeys((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -14649,17 +14930,17 @@ function useActiveChannelMessages({
     });
   }, []);
   const enterSelectionMode = useCallback((message, attachmentId) => {
-    const messageId = String(message._id || message.id);
-    if (!messageId) return;
+    const messageId2 = String(message._id || message.id);
+    if (!messageId2) return;
     setSelectionMode(true);
     const useAttachmentSelection = messageUsesAttachmentSelection(message);
     if (useAttachmentSelection) {
       if (attachmentId) {
-        setSelectedKeys((prev) => new Set(prev).add(buildSelectionKey(messageId, attachmentId)));
+        setSelectedKeys((prev) => new Set(prev).add(buildSelectionKey(messageId2, attachmentId)));
       }
       return;
     }
-    setSelectedKeys((prev) => new Set(prev).add(messageId));
+    setSelectedKeys((prev) => new Set(prev).add(messageId2));
   }, []);
   const selectedForwardItems = resolveForwardItems(selectedKeys, displayMessages);
   const canDeleteForEveryone = useMemo(
@@ -14678,14 +14959,14 @@ function useActiveChannelMessages({
       }
       const isGroupChat = !!activeChannel?.isGroup;
       selectedKeys.forEach((key) => {
-        const { messageId, attachmentId } = parseSelectionKey(key);
-        if (!messageId || messageId.startsWith("temp-")) return;
-        const message = displayMessages.find((entry) => String(entry._id || entry.id) === messageId);
+        const { messageId: messageId2, attachmentId } = parseSelectionKey(key);
+        if (!messageId2 || messageId2.startsWith("temp-")) return;
+        const message = displayMessages.find((entry) => String(entry._id || entry.id) === messageId2);
         if (isGroupChat) {
           const convId = String(message?.conversationId || conversationId || "");
           if (!convId) return;
           emitGroupDelete({
-            messageId,
+            messageId: messageId2,
             sender: loggedUserDetails._id,
             deleteType,
             conversationId: convId,
@@ -14695,7 +14976,7 @@ function useActiveChannelMessages({
           const receiver = message?.receiver || activeChannel?.id;
           if (!receiver) return;
           emitDmDelete({
-            messageId,
+            messageId: messageId2,
             sender: loggedUserDetails._id,
             receiver: String(receiver),
             deleteType,
@@ -14734,43 +15015,138 @@ function useActiveChannelMessages({
       fetchMessages2(conversationId);
     }
   };
-  const handleReplyTargetClick = async (messageId) => {
-    if (!messageId) return;
-    if (messagesById.has(messageId)) {
-      setSearchedMessageId(messageId);
+  const handleReplyTargetClick = async (messageId2) => {
+    if (!messageId2) return;
+    stickToBottomRef.current = false;
+    if (messagesById.has(messageId2)) {
+      setSearchedMessageId(messageId2);
       return;
     }
-    await fetchSearchMessageContext(messageId, { searchMode: false });
+    await fetchSearchMessageContext(messageId2, { searchMode: false });
   };
+  const handleJumpTo = useCallback((preset, specificDate) => {
+    stickToBottomRef.current = false;
+    if (preset === "beginning") {
+      pendingJumpRef.current = { kind: "beginning" };
+    } else if (preset === "specific") {
+      if (!specificDate) return;
+      const clamped = clampJumpDate(
+        specificDate,
+        jumpDateBounds.minDay,
+        jumpDateBounds.maxDay
+      );
+      if (!clamped) return;
+      pendingJumpRef.current = { kind: "date", at: startOfLocalDay(clamped) };
+    } else {
+      const raw = resolveJumpPreset(preset);
+      const at = Math.min(Math.max(raw, jumpDateBounds.minDay), jumpDateBounds.maxDay);
+      pendingJumpRef.current = { kind: "date", at };
+    }
+    jumpPagesRef.current = 0;
+    setJumpNonce((n) => n + 1);
+  }, [jumpDateBounds.minDay, jumpDateBounds.maxDay]);
+  useEffect(() => {
+    const pending = pendingJumpRef.current;
+    if (!pending || isLoading) return;
+    const step = resolveJumpStep(
+      messagesWithResolvedReplies,
+      pending,
+      !!currentMeta?.hasMore
+    );
+    if (step.action === "loadOlder") {
+      if (!conversationId || !currentMeta?.nextCursor || jumpPagesRef.current >= MAX_JUMP_OLDER_PAGES) {
+        pendingJumpRef.current = null;
+        const fallback = messagesWithResolvedReplies[0];
+        if (fallback) setSearchedMessageId(String(fallback._id || fallback.id));
+        return;
+      }
+      jumpPagesRef.current += 1;
+      const prevScrollHeight = scrollContainerRef.current?.scrollHeight ?? 0;
+      fetchMessages2(conversationId, DEFAULT_MESSAGES_LIMIT, currentMeta.nextCursor).then(() => {
+        if (scrollContainerRef.current && prevScrollHeight) {
+          scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight - prevScrollHeight;
+        }
+      });
+      return;
+    }
+    pendingJumpRef.current = null;
+    if (step.action === "scroll") {
+      setSearchedMessageId(null);
+      requestAnimationFrame(() => setSearchedMessageId(step.messageId));
+    }
+  }, [
+    jumpNonce,
+    isLoading,
+    messagesWithResolvedReplies,
+    currentMeta?.hasMore,
+    currentMeta?.nextCursor,
+    conversationId,
+    fetchMessages2,
+    setSearchedMessageId
+  ]);
+  const updateScrollToBottomVisibility = useCallback((el) => {
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    const nearBottom = distanceFromBottom <= 96;
+    stickToBottomRef.current = nearBottom;
+    setShowScrollToBottom(!nearBottom);
+  }, []);
+  const handleScrollToBottom = useCallback(() => {
+    stickToBottomRef.current = true;
+    if (isSearchActive) {
+      setSearchActive(false);
+      setSearchedMessageId(null);
+      if (conversationId) fetchMessages2(conversationId);
+      setShowScrollToBottom(false);
+      return;
+    }
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    setShowScrollToBottom(false);
+  }, [isSearchActive, conversationId, setSearchActive, setSearchedMessageId, fetchMessages2]);
   const handleScroll = (e) => {
     const target = e.currentTarget;
+    updateScrollToBottomVisibility(target);
+    if (pendingJumpRef.current) return;
     if (target.scrollTop === 0 && currentMeta?.hasMore && !isLoading && conversationId && currentMeta.nextCursor) {
       const prevScrollHeight = target.scrollHeight;
       fetchMessages2(conversationId, DEFAULT_MESSAGES_LIMIT, currentMeta.nextCursor).then(() => {
         if (scrollContainerRef.current) {
           const newScrollHeight = scrollContainerRef.current.scrollHeight;
           scrollContainerRef.current.scrollTop = newScrollHeight - prevScrollHeight;
+          updateScrollToBottomVisibility(scrollContainerRef.current);
         }
       });
     }
   };
   useLayoutEffect(() => {
-    if (!isInitialLoading && currentMeta?.isFirstPage && !searchedMessageId) {
+    if (!isInitialLoading && stickToBottomRef.current && !pendingJumpRef.current) {
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
     }
-  }, [messagesWithResolvedReplies.length, isInitialLoading, currentMeta?.isFirstPage, searchedMessageId]);
+  }, [messagesWithResolvedReplies.length, isInitialLoading]);
   useEffect(() => {
     if (searchedMessageId && !isLoading) {
+      stickToBottomRef.current = false;
+      const container = scrollContainerRef.current;
       const element = document.getElementById(`message-${searchedMessageId}`);
-      if (element) {
-        element.scrollIntoView({ behavior: "smooth", block: "center" });
+      if (container && element) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            smoothScrollToMessage(container, element);
+            updateScrollToBottomVisibility(container);
+          });
+        });
       }
       if (!isSearchActive) {
         const timer = window.setTimeout(() => setSearchedMessageId(null), 2500);
         return () => window.clearTimeout(timer);
       }
     }
-  }, [searchedMessageId, isLoading, messagesWithResolvedReplies.length, isSearchActive, setSearchedMessageId]);
+  }, [
+    searchedMessageId,
+    isLoading,
+    isSearchActive,
+    setSearchedMessageId,
+    updateScrollToBottomVisibility
+  ]);
   return {
     activeChannel,
     conversationId,
@@ -14796,11 +15172,297 @@ function useActiveChannelMessages({
     canDeleteForEveryone,
     handleResetToNormal,
     handleReplyTargetClick,
+    handleJumpTo,
+    jumpDateBounds,
+    showScrollToBottom,
+    handleScrollToBottom,
     handleScroll
   };
 }
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(
+              ChevronRightIcon,
+              {
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+var PRESETS = [
+  { preset: "today", label: "Today" },
+  { preset: "yesterday", label: "Yesterday" },
+  { preset: "lastWeek", label: "Last week" },
+  { preset: "lastMonth", label: "Last month" },
+  { preset: "beginning", label: "The very beginning" }
+];
+function ChatDateJumpMenu({ label, minDay, maxDay, onJump }) {
+  const { scopeClassName } = useChatTheme();
+  const [open, setOpen] = useState(false);
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [calendarMonth, setCalendarMonth] = useState(() => new Date(maxDay));
+  const minDate = new Date(minDay);
+  const maxDate = new Date(maxDay);
+  useEffect(() => {
+    if (showCalendar) setCalendarMonth(new Date(maxDay));
+  }, [showCalendar, maxDay]);
+  const queueJump = (preset, specificDate) => {
+    window.setTimeout(() => onJump(preset, specificDate), 0);
+  };
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (!next) setShowCalendar(false);
+  };
+  const handlePreset = (preset) => {
+    setOpen(false);
+    setShowCalendar(false);
+    queueJump(preset);
+  };
+  const handleDateSelect = (date) => {
+    if (!date) return;
+    const clamped = clampJumpDate(date, minDay, maxDay);
+    if (!clamped) return;
+    setOpen(false);
+    setShowCalendar(false);
+    queueJump("specific", clamped);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "chat-date-divider-pill chat-date-divider-pill--interactive",
+        "aria-label": `Jump to date, currently ${label}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "chat-date-divider-chevron", "aria-hidden": true })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "center",
+        sideOffset: 8,
+        className: cn(
+          scopeClassName,
+          chatPopoverContentClass,
+          "w-auto overflow-hidden rounded-2xl p-0",
+          showCalendar ? "min-w-[300px]" : "min-w-[220px]"
+        ),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        children: showCalendar ? /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            month: calendarMonth,
+            onMonthChange: setCalendarMonth,
+            startMonth: minDate,
+            endMonth: maxDate,
+            showOutsideDays: false,
+            disabled: { before: minDate, after: maxDate },
+            onSelect: handleDateSelect,
+            className: "chat-jump-calendar rounded-xl bg-transparent p-1 [--cell-size:2.125rem]"
+          }
+        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3 pt-3 pb-2", children: [
+            /* @__PURE__ */ jsx("p", { className: chatOptionsMenuLabelClass, children: "Jump to\u2026" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col", children: PRESETS.map(({ preset, label: itemLabel }) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn(chatOptionsMenuItemClass, "w-full border-0 bg-transparent text-left"),
+                onClick: () => handlePreset(preset),
+                children: itemLabel
+              },
+              preset
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn(chatOptionsMenuSeparatorClass, "mx-3") }),
+          /* @__PURE__ */ jsx("div", { className: "px-1 pb-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(chatOptionsMenuItemClass, "w-full border-0 bg-transparent text-left"),
+              onClick: () => setShowCalendar(true),
+              children: "Jump to a specific date"
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+}
 var ActiveChannelMessagesView = (props) => {
   const { formatDateDivider } = useChatLocale();
+  const allUsers = useStore((s) => s.allUsers);
   const {
     activeChannel,
     conversationId,
@@ -14826,6 +15488,10 @@ var ActiveChannelMessagesView = (props) => {
     canDeleteForEveryone,
     handleResetToNormal,
     handleReplyTargetClick,
+    handleJumpTo,
+    jumpDateBounds,
+    showScrollToBottom,
+    handleScrollToBottom,
     handleScroll
   } = useActiveChannelMessages(props);
   const { onReply, onForward } = props;
@@ -14838,7 +15504,7 @@ var ActiveChannelMessagesView = (props) => {
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "chat-message-canvas relative flex h-full min-h-0 flex-col overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "chat-message-canvas relative flex h-full flex-col", children: [
     isSearchActive && /* @__PURE__ */ jsx("div", { className: "absolute top-6 left-1/2 -translate-x-1/2 z-40 animate-in slide-in-from-top-4 duration-500", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center overflow-hidden rounded-2xl border border-(--chat-border) bg-(--chat-surface) shadow-lg ring-4 ring-(--chat-surface)", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-(--chat-theme) px-4 py-2.5", children: [
         /* @__PURE__ */ jsx(History, { className: "size-3.5 animate-pulse text-white" }),
@@ -14875,11 +15541,20 @@ var ActiveChannelMessagesView = (props) => {
               return groups;
             }, {})
           ).map(([date, messages]) => /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-col", children: [
-            /* @__PURE__ */ jsx("div", { className: "chat-date-divider", children: /* @__PURE__ */ jsx("span", { className: "chat-date-divider-pill", children: date }) }),
+            /* @__PURE__ */ jsx("div", { className: "sticky top-1.5 z-20 mb-2 flex justify-center py-1", children: /* @__PURE__ */ jsx(
+              ChatDateJumpMenu,
+              {
+                label: date,
+                minDay: jumpDateBounds.minDay,
+                maxDay: jumpDateBounds.maxDay,
+                onJump: handleJumpTo
+              }
+            ) }),
             messages.map((m, msgIndex) => {
-              const senderLabel = typeof m.sender === "string" ? m.sender : "User";
-              const senderImage = !m.isOwnMessage ? activeChannel?.isGroup ? void 0 : activeChannel?.image : void 0;
               const isGroupChat = !!activeChannel?.isGroup;
+              const participants = conversationInfo?.participants ?? [];
+              const { name: senderLabel, image: groupSenderImage } = isGroupChat && !m.isOwnMessage ? resolveGroupSenderDisplay(m, allUsers, participants) : { name: typeof m.sender === "string" ? m.sender : "User", image: void 0 };
+              const senderImage = !m.isOwnMessage ? isGroupChat ? groupSenderImage : activeChannel?.image : void 0;
               const prevMessage = msgIndex > 0 ? messages[msgIndex - 1] : null;
               const nextMessage = msgIndex < messages.length - 1 ? messages[msgIndex + 1] : null;
               const isGroupedWithPrev = !!prevMessage && isSameMessageSide(prevMessage, m, isGroupChat);
@@ -14926,6 +15601,7 @@ var ActiveChannelMessagesView = (props) => {
                       conversationInfo,
                       isHighlighted: String(m._id || m.id) === String(searchedMessageId),
                       senderName: senderLabel,
+                      senderId: getMessageSenderId2(m),
                       senderImage,
                       showSenderName,
                       showSenderLabel,
@@ -14966,6 +15642,16 @@ var ActiveChannelMessagesView = (props) => {
         onForward: handleBatchForward
       }
     ),
+    showScrollToBottom && !selectionMode && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleScrollToBottom,
+        className: "chat-scroll-to-bottom",
+        "aria-label": "Scroll to latest messages",
+        children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-5", strokeWidth: 2.25 })
+      }
+    ),
     isInitialLoading && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute bottom-6 left-1/2 z-30 flex -translate-x-1/2 animate-in items-center gap-3 rounded-2xl border border-(--chat-border) bg-(--chat-surface)/80 px-5 py-2.5 shadow-xl backdrop-blur-md duration-400 fade-in slide-in-from-bottom-2", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-(--chat-theme)" }),
       /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold uppercase tracking-[0.15em] text-(--chat-muted)", children: "Loading messages..." })
@@ -15589,10 +16275,10 @@ function useChannelMessageBox({
   const composerDisabledReason = conversationId ? composerDisabledByConversation[conversationId] : void 0;
   const fileInputRef = useRef(null);
   const attachmentsCountRef = useRef(0);
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     attachmentsCountRef.current = state.attachments.length;
   }, [state.attachments.length]);
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     const draft = {
       messageInput: state.messageInput,
       attachments: state.attachments
@@ -15600,7 +16286,7 @@ function useChannelMessageBox({
     syncComposerRef(draft);
     updateConversationDraft(conversationIdRef.current, draft);
   }, [state.messageInput, state.attachments, syncComposerRef]);
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     if (typingTimeoutRef.current) {
       clearTimeout(typingTimeoutRef.current);
       typingTimeoutRef.current = null;
@@ -16151,10 +16837,10 @@ function useForwardModal({ isOpen, onClose, items, onForwardComplete }) {
     targetChannelRef.current = channel;
     const targetConversationIds = [String(channel.conversationId)];
     items.forEach((item) => {
-      const messageId = String(item.message._id || item.message.id || "");
-      if (!messageId) return;
+      const messageId2 = String(item.message._id || item.message.id || "");
+      if (!messageId2) return;
       const payload = {
-        messageId,
+        messageId: messageId2,
         sender: String(loggedUserDetails._id),
         sourceConversationId: item.message.conversationId ? String(item.message.conversationId) : void 0,
         targetConversationIds,
@@ -16631,8 +17317,8 @@ var ChatMain = ({
   viewportHeight = "full",
   viewportClassName
 }) => {
-  const clientObj = React2.useMemo(() => ({ id: clientId }), [clientId]);
-  const uiConfigObj = React2.useMemo(
+  const clientObj = React2__default.useMemo(() => ({ id: clientId }), [clientId]);
+  const uiConfigObj = React2__default.useMemo(
     () => ({
       ...uiConfig || {},
       components: { ...uiConfig?.components, ...components },
@@ -17067,6 +17753,6 @@ var packageDefaultComponents = {
 // src/index.ts
 var index_default = ChatMain_default;
 
-export { CHAT_API_KEYS, CHAT_GET_API_KEYS, Channel, ChannelHeaderView_default as ChannelHeader, ChannelListView_default as ChannelList, ChannelListItem_default as ChannelListItem, Chat, ChatAlertsProvider, ChatAvatar_default as ChatAvatar, ChatCustomizationProvider, ChatLayout_default as ChatLayout, ChatLocaleProvider, ChatMain_default as ChatMain, ChatThemeProvider, ChatViewport, DefaultChannelListItem, DefaultChatAvatar, DefaultChatLayout_default as DefaultChatLayout, ForwardModalView as ForwardModal, HeaderCallActions_default as HeaderCallActions, LoggedUserDetails_default as LoggedUserDetails, ChannelMessageBoxView_default as MessageInput, MessageItemView as MessageItem, ActiveChannelMessagesView_default as MessageList, capitalizeFirst, index_default as default, defaultChatClassNames, defaultChatComponents, defaultChatFeatures, defaultChatLayoutConfig, downloadFile, getChatBaseUrl, getChatQueryParamApis, getChatQueryParams, getChatQueryParamsByApi, getChatSocketUrl, getFirstAndLastNameOneCharacter, getResponsiveWidth, getSocketConfig, isEmpty, mergeChatCustomization, mergeChatLayoutConfig, packageDefaultComponents, resolveApiUrl, resolveChatApiKey, resolveSocketUrl, setChatAccessToken, setChatBaseURL, setChatClientId, setChatQueryParamApis, setChatQueryParams, setChatQueryParamsByApi, setChatSocketUrl, showNotification, socket_service_default as socketService, uniqueList, useChatAlerts, useChatContext, useChatController, useChatCustomization, useChatCustomizationOptional, useChatFeatures, useChatFeaturesOptional, useChatLocale, useStore as useChatStore, useChatTheme };
+export { CHAT_API_KEYS, CHAT_GET_API_KEYS, Calendar, CalendarDayButton, Channel, ChannelHeaderView_default as ChannelHeader, ChannelListView_default as ChannelList, ChannelListItem_default as ChannelListItem, Chat, ChatAlertsProvider, ChatAvatar_default as ChatAvatar, ChatCustomizationProvider, ChatDateJumpMenu, ChatLayout_default as ChatLayout, ChatLocaleProvider, ChatMain_default as ChatMain, ChatThemeProvider, ChatViewport, DefaultChannelListItem, DefaultChatAvatar, DefaultChatLayout_default as DefaultChatLayout, ForwardModalView as ForwardModal, HeaderCallActions_default as HeaderCallActions, LoggedUserDetails_default as LoggedUserDetails, ChannelMessageBoxView_default as MessageInput, MessageItemView as MessageItem, ActiveChannelMessagesView_default as MessageList, capitalizeFirst, clampJumpDate, index_default as default, defaultChatClassNames, defaultChatComponents, defaultChatFeatures, defaultChatLayoutConfig, downloadFile, getChatBaseUrl, getChatQueryParamApis, getChatQueryParams, getChatQueryParamsByApi, getChatSocketUrl, getFirstAndLastNameOneCharacter, getResponsiveWidth, getSocketConfig, isEmpty, mergeChatCustomization, mergeChatLayoutConfig, packageDefaultComponents, resolveApiUrl, resolveChatApiKey, resolveJumpDateBounds, resolveJumpPreset, resolveJumpStep, resolveSocketUrl, setChatAccessToken, setChatBaseURL, setChatClientId, setChatQueryParamApis, setChatQueryParams, setChatQueryParamsByApi, setChatSocketUrl, showNotification, smoothScrollToMessage, socket_service_default as socketService, startOfLocalDay, toDateInputValue, uniqueList, useChatAlerts, useChatContext, useChatController, useChatCustomization, useChatCustomizationOptional, useChatFeatures, useChatFeaturesOptional, useChatLocale, useStore as useChatStore, useChatTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map