@droppii-org/chat-sdk 0.6.43 → 0.6.45

package/dist/components/conversation/ConversationBySessionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAYhD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDA+EhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAahD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAyFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -8,11 +8,12 @@ import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 import { isGroupSession } from "../../utils/imCommon";
+import { resolveBotSessionOwnerIdentity } from "../../utils/conversation";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import ThreadCard from "./ThreadCard";
 import MentionIndicatorIcon from "./MentionIndicatorIcon";
 const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
-    var _a;
+    var _a, _b;
     const { t } = useTranslation();
     const { user } = useChatContext();
     const onNavigate = useChatNavigate();
@@ -35,6 +36,8 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
         setSelectedConversationId(conversation.conversationID);
     };
     const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
+    const ownerIdentity = resolveBotSessionOwnerIdentity(conversation, sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.owner, user === null || user === void 0 ? void 0 : user.userID);
+    const title = (_a = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _a !== void 0 ? _a : displayName;
     const latestMsg = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsg) || "";
     const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;
     if (!conversation)
@@ -45,6 +48,6 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
             showName: conversation.showName,
         }), mentionIndicator: _jsx(MentionIndicatorIcon, { groupAtType: conversation.groupAtType }), time: latestMsgSendTime > 0
             ? formatTimestamp(latestMsgSendTime, { hasTime: true })
-            : undefined, avatar: isGroupSession(conversation.conversationType) ? (_jsx(GroupCompositeAvatar, { groupID: conversation.groupID, faceURL: avatar, groupName: displayName, size: 48 })) : (_jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" })), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: displayName }) }));
+            : undefined, avatar: ownerIdentity ? (_jsx(Avatar, { size: 48, src: ownerIdentity.avatarUrl, children: title.charAt(0) })) : isGroupSession(conversation.conversationType) ? (_jsx(GroupCompositeAvatar, { groupID: conversation.groupID, faceURL: avatar, groupName: displayName, size: 48 })) : (_jsx(Avatar, { size: 48, src: avatar, children: ((_b = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _b === void 0 ? void 0 : _b.call(displayName, 0)) || "A" })), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: title }) }));
 };
 export default ConversationBySessionItem;

package/dist/components/conversation-detail/ConversationMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBzE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,uBAAuB,GAAI,4DAI9B,4BAA4B,4CAsO9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBzE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,uBAAuB,GAAI,4DAI9B,4BAA4B,4CAmQ9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationMessageList.js

@@ -8,6 +8,7 @@ import { useChatContext } from "../../context/ChatContext";
 import MessageInfiniteScroll from "../../components/message/MessageInfiniteScroll";
 import { useMessage } from "../../hooks/message/useMessage";
 import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
+import { useUnreadMessageIndicator } from "../../hooks/message/useUnreadMessageIndicator";
 import { usePinMessage } from "../../hooks/message/usePinMessage";
 import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
 import { useGroupPermission } from "../../hooks/group/useGroupPermission";
@@ -16,6 +17,7 @@ import useAuthStore from "../../store/auth";
 import { isGroupChat as resolveIsGroupChat, isSupportSessionAgentView, } from "../../utils/conversation";
 import emitter from "../../utils/events";
 import MessageItem from "../../components/message/item";
+import UnreadMessageJumpButton from "../../components/message/UnreadMessageJumpButton";
 import PinLimitModal from "./PinLimitModal";
 const ConversationMessageList = ({ bottomSlot, onCopyMessageLink, onSearchMessageRevoked, }) => {
     const { t } = useTranslation("conversation-inbox");
@@ -38,7 +40,12 @@ const ConversationMessageList = ({ bottomSlot, onCopyMessageLink, onSearchMessag
     // agent handling someone else's session needs — load the full history.
     const useAppHistory = !isSupportSessionAgentView(Object.assign(Object.assign({}, conversation), { conversationID: conversationId }), viewerUserID);
     const messageController = useMessage(conversationId, searchClientMsgID, true, useAppHistory, onSearchMessageRevoked);
-    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: viewerUserID, isGroupChat }, messageController));
+    const { isResolved: isUnreadLookupResolved, firstUnreadMessageId, unreadDividerMessageId, showJumpButton, markDividerSeen, } = useUnreadMessageIndicator({
+        conversationId,
+        searchClientMsgID,
+        messageList: messageController.loadState.messageList,
+    });
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: viewerUserID, isGroupChat, markAsReadBlocked: !isUnreadLookupResolved }, messageController));
     const { loadState, moreOldLoading } = messageController;
     const isMessageLoading = !conversationId || loadState.initLoading;
     const [openToolboxMessageId, setOpenToolboxMessageId] = useState(null);
@@ -99,6 +106,12 @@ const ConversationMessageList = ({ bottomSlot, onCopyMessageLink, onSearchMessag
             setSearchClientMsgID(clientMsgID);
         }
     }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
+    const handleJumpToFirstUnread = useCallback(() => {
+        if (!firstUnreadMessageId)
+            return;
+        markDividerSeen();
+        onPressQuoteMessage(firstUnreadMessageId);
+    }, [firstUnreadMessageId, markDividerSeen, onPressQuoteMessage]);
     // MessageItem only knows its own clientMsgID — bind the conversation here,
     // and keep the callback undefined when the host gave us none so MessageItem
     // can drop the menu entry instead of rendering a no-op.
@@ -119,6 +132,7 @@ const ConversationMessageList = ({ bottomSlot, onCopyMessageLink, onSearchMessag
         target: scrollRef,
         enable: !!openToolboxMessageId,
     });
-    return (_jsxs("div", { "data-testid": "conversation-message-list", "data-cp-name": "ConversationMessageList", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: handleRevokeMessage, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, onCopyMessageLink: handleCopyMessageLink, enableLongPress: true }, message.clientMsgID)))] })), _jsx(PinLimitModal, { open: pinLimitModalOpen, max: pinnedTotalCount, onClose: () => setPinLimitModalOpen(false) })] }));
+    return (_jsxs("div", { "data-testid": "conversation-message-list", "data-cp-name": "ConversationMessageList", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: handleRevokeMessage, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, onCopyMessageLink: handleCopyMessageLink, showUnreadDivider: !!unreadDividerMessageId &&
+                            message.clientMsgID === unreadDividerMessageId, onUnreadDividerSeen: markDividerSeen, enableLongPress: true }, message.clientMsgID)))] })), !isMessageLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-2 z-10", onClick: handleJumpToFirstUnread })), _jsx(PinLimitModal, { open: pinLimitModalOpen, max: pinnedTotalCount, onClose: () => setPinLimitModalOpen(false) })] }));
 };
 export default ConversationMessageList;

package/dist/components/group/AdminPermissionModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPermissionModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AdminPermissionModal.tsx"],"names":[],"mappings":"AAcA,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;IAKjB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IAKpC,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5E;AA6DD,QAAA,MAAM,oBAAoB,GAAI,uEAO3B,yBAAyB,mDA2M3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"AdminPermissionModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AdminPermissionModal.tsx"],"names":[],"mappings":"AAaA,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IAKpC,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5E;AA6DD,QAAA,MAAM,oBAAoB,GAAI,uEAO3B,yBAAyB,mDA2K3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/group/AdminPermissionModal.js

@@ -4,97 +4,72 @@ import { useEffect, useState } from "react";
 import { ConfigProvider, Modal, Switch, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
-import { useGroupPermission } from "../../hooks/group/useGroupPermission";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
 import { useSetGroupMemberPermissions } from "../../hooks/group/useGroupMemberActions";
 import { Icon } from "../../components/icon";
 import { ANTD_PRIMARY_COLOR_VAR } from "../../constants";
 import { GROUP_PERMISSION_KEY } from "../../constants/im";
 // "Cập nhật thông tin nhóm" is one switch in the UI but bundles 3 BE
-// permission keys (name/avatar/description) — DROPPII-30533 fix: reading
-// only checked UPDATE_GROUP_NAME, so turning the switch off only ever
-// stripped that one key, leaving avatar/description at the role default.
+// permission keys (name/avatar/description), so it maps to all three.
 const UPDATE_GROUP_INFO_KEYS = [
     GROUP_PERMISSION_KEY.updateGroupName,
     GROUP_PERMISSION_KEY.updateGroupAvatar,
     GROUP_PERMISSION_KEY.updateGroupDescription,
 ];
-const permissionListToOverrides = (permissionList) => ({
-    sendMessage: permissionList.includes(GROUP_PERMISSION_KEY.sendMessage),
-    pinMessage: permissionList.includes(GROUP_PERMISSION_KEY.pinMessage),
-    viewMemberInformation: permissionList.includes(GROUP_PERMISSION_KEY.viewMemberInformation),
-    addMember: permissionList.includes(GROUP_PERMISSION_KEY.addMember),
-    removeMember: permissionList.includes(GROUP_PERMISSION_KEY.removeMember),
-    updateGroupInfo: UPDATE_GROUP_INFO_KEYS.every((key) => permissionList.includes(key)),
-});
-const overridesToPermissionList = (overrides, currentPermissionList) => {
-    const desired = {
-        [GROUP_PERMISSION_KEY.sendMessage]: overrides.sendMessage,
-        [GROUP_PERMISSION_KEY.pinMessage]: overrides.pinMessage,
-        [GROUP_PERMISSION_KEY.viewMemberInformation]: overrides.viewMemberInformation,
-        [GROUP_PERMISSION_KEY.addMember]: overrides.addMember,
-        [GROUP_PERMISSION_KEY.removeMember]: overrides.removeMember,
-        [GROUP_PERMISSION_KEY.updateGroupName]: overrides.updateGroupInfo,
-        [GROUP_PERMISSION_KEY.updateGroupAvatar]: overrides.updateGroupInfo,
-        [GROUP_PERMISSION_KEY.updateGroupDescription]: overrides.updateGroupInfo,
+const SWITCH_PERMISSION_KEYS = {
+    sendMessage: [GROUP_PERMISSION_KEY.sendMessage],
+    pinMessage: [GROUP_PERMISSION_KEY.pinMessage],
+    viewMemberInformation: [GROUP_PERMISSION_KEY.viewMemberInformation],
+    addMember: [GROUP_PERMISSION_KEY.addMember],
+    removeMember: [GROUP_PERMISSION_KEY.removeMember],
+    updateGroupInfo: UPDATE_GROUP_INFO_KEYS,
+};
+const SWITCHES = Object.keys(SWITCH_PERMISSION_KEYS);
+// A switch reads on only when every given permission list grants all of its keys.
+const commonOverrides = (permissionLists) => {
+    const grants = (name) => permissionLists.length > 0 &&
+        permissionLists.every((list) => SWITCH_PERMISSION_KEYS[name].every((key) => list.includes(key)));
+    return {
+        sendMessage: grants("sendMessage"),
+        pinMessage: grants("pinMessage"),
+        viewMemberInformation: grants("viewMemberInformation"),
+        addMember: grants("addMember"),
+        removeMember: grants("removeMember"),
+        updateGroupInfo: grants("updateGroupInfo"),
     };
-    const managedKeys = new Set(Object.keys(desired));
-    const untouched = currentPermissionList.filter((permission) => !managedKeys.has(permission));
-    const enabled = Object.entries(desired)
-        .filter(([, isEnabled]) => isEnabled)
-        .map(([permission]) => permission);
-    return [...untouched, ...enabled];
 };
-// "Configure Admin Permissions" (DROPPII-30248 follow-up). When `member` is
-// passed (from the member list's per-row menu), it patches that one
-// member's permission list via setGroupMemberInfo. When used group-wide (no
-// `member`, e.g. from GroupThreadInfo's group settings), "Lưu" applies the
-// same permission set to every current Admin in the group (DROPPII-30529/
-// 30531 fix) — there is no separate BE endpoint for a role-wide default, so
-// this fans out the existing per-member call to each current Admin instead
-// of only writing to a local override store.
+// Rewrites only the switches that changed; every other key in the list stays as is.
+const applySwitchChanges = (permissionList, changes) => Object.entries(changes).reduce((list, [name, enabled]) => {
+    const keys = SWITCH_PERMISSION_KEYS[name];
+    const without = list.filter((permission) => !keys.includes(permission));
+    return enabled ? [...without, ...keys] : without;
+}, permissionList);
+const isSamePermissionSet = (a, b) => a.length === b.length && a.every((permission) => b.includes(permission));
+// "Configure Admin Permissions". With `member` (a member row's … menu) it edits
+// that one Admin. Without it (the group info panel) it edits every current
+// Admin at once: switches start from what the Admins already share, and "Lưu"
+// writes only the switches the user flipped, so each Admin keeps the rest.
 const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member, onMemberPermissionsSaved, }) => {
     const { t } = useTranslation();
-    const groupPermissions = useGroupPermission(groupID);
     const { members: groupMembers } = useGroupMembers(member ? undefined : groupID);
     const { mutateAsync: setMemberPermissions } = useSetGroupMemberPermissions();
     const [isSaving, setIsSaving] = useState(false);
-    const isGroupInfoEditable = groupPermissions.updateGroupName &&
-        groupPermissions.updateGroupAvatar &&
-        groupPermissions.updateGroupDescription;
-    const initialOverrides = () => member
-        ? permissionListToOverrides(member.permissions)
-        : {
-            sendMessage: groupPermissions.sendMessage,
-            pinMessage: groupPermissions.pinMessage,
-            viewMemberInformation: groupPermissions.viewMemberInformation,
-            addMember: groupPermissions.addMember,
-            removeMember: groupPermissions.removeMember,
-            updateGroupInfo: isGroupInfoEditable,
-        };
-    const [pending, setPending] = useState(initialOverrides);
+    const [edits, setEdits] = useState({});
     useEffect(() => {
-        if (!open)
-            return;
-        setPending(initialOverrides());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if (open)
+            setEdits({});
     }, [open, member === null || member === void 0 ? void 0 : member.userID]);
+    const admins = groupMembers.filter((groupMember) => groupMember.roleLevel === GroupMemberRole.Admin);
     const baseline = member
-        ? permissionListToOverrides(member.permissions)
-        : {
-            sendMessage: groupPermissions.sendMessage,
-            pinMessage: groupPermissions.pinMessage,
-            viewMemberInformation: groupPermissions.viewMemberInformation,
-            addMember: groupPermissions.addMember,
-            removeMember: groupPermissions.removeMember,
-            updateGroupInfo: isGroupInfoEditable,
-        };
-    const hasChanges = pending.sendMessage !== baseline.sendMessage ||
-        pending.pinMessage !== baseline.pinMessage ||
-        pending.viewMemberInformation !== baseline.viewMemberInformation ||
-        pending.addMember !== baseline.addMember ||
-        pending.removeMember !== baseline.removeMember ||
-        pending.updateGroupInfo !== baseline.updateGroupInfo;
+        ? commonOverrides([member.permissions])
+        : commonOverrides(admins.map((admin) => { var _a; return (_a = admin.permissions) !== null && _a !== void 0 ? _a : []; }));
+    const pending = Object.assign(Object.assign({}, baseline), edits);
+    const changes = Object.fromEntries(SWITCHES.filter((name) => pending[name] !== baseline[name]).map((name) => [
+        name,
+        pending[name],
+    ]));
+    const hasChanges = Object.keys(changes).length > 0;
+    const setSwitch = (name, checked) => setEdits((prev) => (Object.assign(Object.assign({}, prev), { [name]: checked })));
     const handleSave = async () => {
         var _a, _b;
         if (!groupID)
@@ -102,7 +77,7 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member,
         setIsSaving(true);
         try {
             if (member) {
-                const nextPermissions = overridesToPermissionList(pending, member.permissions);
+                const nextPermissions = applySwitchChanges(member.permissions, changes);
                 await setMemberPermissions({
                     groupID,
                     userID: member.userID,
@@ -111,13 +86,16 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member,
                 onMemberPermissionsSaved === null || onMemberPermissionsSaved === void 0 ? void 0 : onMemberPermissionsSaved(member.userID, nextPermissions);
             }
             else {
-                const admins = groupMembers.filter((groupMember) => groupMember.roleLevel === GroupMemberRole.Admin);
                 await Promise.all(admins.map((admin) => {
                     var _a;
+                    const current = (_a = admin.permissions) !== null && _a !== void 0 ? _a : [];
+                    const nextPermissions = applySwitchChanges(current, changes);
+                    if (isSamePermissionSet(current, nextPermissions))
+                        return undefined;
                     return setMemberPermissions({
                         groupID,
                         userID: admin.userID,
-                        permissions: overridesToPermissionList(pending, (_a = admin.permissions) !== null && _a !== void 0 ? _a : []),
+                        permissions: nextPermissions,
                     });
                 }));
             }
@@ -131,7 +109,7 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member,
             setIsSaving(false);
         }
     };
-    const rows = (_jsx(ConfigProvider, { theme: { token: { colorPrimary: ANTD_PRIMARY_COLOR_VAR } }, children: _jsxs("div", { className: "flex flex-col py-2", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_send_message") }), _jsx(Switch, { checked: pending.sendMessage, onChange: (checked) => setPending((prev) => (Object.assign(Object.assign({}, prev), { sendMessage: checked }))) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_pin_unpin_message") }), _jsx(Switch, { checked: pending.pinMessage, onChange: (checked) => setPending((prev) => (Object.assign(Object.assign({}, prev), { pinMessage: checked }))) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_view_member_info") }), _jsx(Switch, { checked: pending.viewMemberInformation, onChange: (checked) => setPending((prev) => (Object.assign(Object.assign({}, prev), { viewMemberInformation: checked }))) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_add_member") }), _jsx(Switch, { checked: pending.addMember, onChange: (checked) => setPending((prev) => (Object.assign(Object.assign({}, prev), { addMember: checked }))) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_remove_member") }), _jsx(Switch, { checked: pending.removeMember, onChange: (checked) => setPending((prev) => (Object.assign(Object.assign({}, prev), { removeMember: checked }))) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_update_group_info") }), _jsx(Switch, { checked: pending.updateGroupInfo, onChange: (checked) => setPending((prev) => (Object.assign(Object.assign({}, prev), { updateGroupInfo: checked }))) })] })] }) }));
+    const rows = (_jsx(ConfigProvider, { theme: { token: { colorPrimary: ANTD_PRIMARY_COLOR_VAR } }, children: _jsxs("div", { className: "flex flex-col py-2", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_send_message") }), _jsx(Switch, { checked: pending.sendMessage, onChange: (checked) => setSwitch("sendMessage", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_pin_unpin_message") }), _jsx(Switch, { checked: pending.pinMessage, onChange: (checked) => setSwitch("pinMessage", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_view_member_info") }), _jsx(Switch, { checked: pending.viewMemberInformation, onChange: (checked) => setSwitch("viewMemberInformation", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_add_member") }), _jsx(Switch, { checked: pending.addMember, onChange: (checked) => setSwitch("addMember", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_remove_member") }), _jsx(Switch, { checked: pending.removeMember, onChange: (checked) => setSwitch("removeMember", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_update_group_info") }), _jsx(Switch, { checked: pending.updateGroupInfo, onChange: (checked) => setSwitch("updateGroupInfo", checked) })] })] }) }));
     if (inline) {
         if (!open)
             return null;

package/dist/components/message/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,0DAKpB,kBAAkB,4CA6OpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAgB/C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,0DAKpB,kBAAkB,4CA+QpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -16,17 +16,30 @@ import { isGroupSession, isGroupConversation } from "../../utils/imCommon";
 import { useGroupPermission } from "../../hooks/group/useGroupPermission";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import GroupMembersDrawer from "./GroupMembersDrawer";
+import { useGroupMembers } from "../../hooks/group/useGroupMembers";
+import { useGetUserSideInfo } from "../../hooks/session/useGetUserSideInfo";
+import { PeerType } from "../../types/conversation";
+import { isSupportSessionAgentView, resolveBotSessionOwnerIdentity, resolveSupportSessionOwnerId, } from "../../utils/conversation";
 const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const { t } = useTranslation();
     const isCx = useAuthStore((state) => state.isCx);
     const isCrm = useAuthStore((state) => state.isCrm);
+    const selfUserID = useAuthStore((state) => state.userID);
     const conversationData = useConversationStore((state) => state.conversationData);
     const groupID = conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID;
     const currentGroupInfo = useConversationStore((state) => groupID ? state.currentGroupInfo.get(groupID) : undefined);
     const { mutate: updateSession } = useUpdateSession();
     const permissions = useGroupPermission(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID);
     const { avatar, displayName } = useConversationDisplayData(conversationData);
+    // Same chat-service user record as the desk list's session owner.
+    const botSessionOwnerId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.BOT &&
+        isSupportSessionAgentView(conversationData, selfUserID)
+        ? resolveSupportSessionOwnerId(conversationData)
+        : "";
+    const { data: botSessionOwner } = useGetUserSideInfo((_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) !== null && _a !== void 0 ? _a : "", botSessionOwnerId);
+    const ownerIdentity = resolveBotSessionOwnerIdentity(conversationData, botSessionOwner, selfUserID);
+    const headerName = (_b = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _b !== void 0 ? _b : displayName;
     const shouldShowMemberCount = isGroupSession(conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType);
     // A "real" group (peerType GROUP) vs a CX support thread that happens to
     // use a Group/WorkingGroup session under the hood (e.g. a multi-agent
@@ -38,6 +51,13 @@ const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, })
     // may view the member list, so it's bypassed there. The member list
     // button itself still shows for both (shouldShowMemberCount).
     const isRealGroup = isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
+    // Group info is only fetched for peerType GROUP; other threads count the
+    // same member list the drawer shows, so the two never disagree.
+    const usesGroupInfoCount = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.GROUP;
+    const { members: threadMembers } = useGroupMembers(shouldShowMemberCount && !usesGroupInfoCount ? groupID : undefined);
+    const memberCount = usesGroupInfoCount
+        ? ((_c = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _c !== void 0 ? _c : 0)
+        : threadMembers.length;
     const canViewMemberList = shouldShowMemberCount &&
         isJoined === true &&
         isCrm &&
@@ -145,6 +165,6 @@ const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, })
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", "data-cp-name": "MessageHeader", children: [shouldShowMemberCount ? (_jsx(GroupCompositeAvatar, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, faceURL: avatar, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: displayName, size: 40, className: "min-w-10 min-h-10" })) : (_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" })), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), shouldShowMemberCount && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: (_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _b !== void 0 ? _b : 0 }) }))] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), canViewMemberList && (_jsx(GroupMembersDrawer, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, conversationId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, currentSession: currentSession })), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: onOpenThreadInfo, children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", "data-cp-name": "MessageHeader", children: [ownerIdentity ? (_jsx(Avatar, { src: ownerIdentity.avatarUrl, size: "large", className: "min-w-10 min-h-10", children: ((_d = headerName === null || headerName === void 0 ? void 0 : headerName.charAt) === null || _d === void 0 ? void 0 : _d.call(headerName, 0)) || "A" })) : shouldShowMemberCount ? (_jsx(GroupCompositeAvatar, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, faceURL: avatar, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: displayName, size: 40, className: "min-w-10 min-h-10" })) : (_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_e = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _e === void 0 ? void 0 : _e.call(displayName, 0)) || "A" })), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: headerName || "" }), shouldShowMemberCount && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: memberCount }) }))] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), canViewMemberList && (_jsx(GroupMembersDrawer, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, conversationId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, currentSession: currentSession })), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: onOpenThreadInfo, children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAkCA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAuX3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAoCA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAsZ3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -9,6 +9,7 @@ import { GroupMemberRole, GroupStatus } from "@droppii-org/wasm-client-sdk";
 import emitter from "../../utils/events";
 import MessageItem from "./item";
 import MessageInfiniteScroll from "./MessageInfiniteScroll";
+import UnreadMessageJumpButton from "./UnreadMessageJumpButton";
 import MessageHeader from "./MessageHeader";
 import MessageFooter from "./footer";
 import UnassignedSessionFooter from "./UnassignedSessionFooter";
@@ -16,6 +17,7 @@ import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useBoolean } from "ahooks";
 import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
+import { useUnreadMessageIndicator } from "../../hooks/message/useUnreadMessageIndicator";
 import { useChatContext } from "../../context/ChatContext";
 import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
 import { usePinMessage } from "../../hooks/message/usePinMessage";
@@ -107,7 +109,12 @@ const MessageList = (props) => {
     }, [isConfirmedGroup, isJoined, isViewOnlyMember, setIsViewOnlyMember]);
     const messageController = useMessage(conversationId, searchClientMsgID, true, false, onSearchMessageRevoked);
     const { loadState, moreOldLoading, moreNewLoading } = messageController;
-    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID, isGroupChat }, messageController));
+    const { isResolved: isUnreadLookupResolved, firstUnreadMessageId, unreadDividerMessageId, showJumpButton, markDividerSeen, } = useUnreadMessageIndicator({
+        conversationId,
+        searchClientMsgID,
+        messageList: loadState.messageList,
+    });
+    const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottom, scrollToMessage, } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID, isGroupChat, markAsReadBlocked: !isUnreadLookupResolved }, messageController));
     const handleOpenRevoke = useCallback((clientMsgID) => {
         setSelectedItem(clientMsgID);
         openConfirmRevoke();
@@ -134,6 +141,12 @@ const MessageList = (props) => {
             setSearchClientMsgID(clientMsgID);
         }
     }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
+    const handleJumpToFirstUnread = useCallback(() => {
+        if (!firstUnreadMessageId)
+            return;
+        markDividerSeen();
+        onPressQuoteMessage(firstUnreadMessageId);
+    }, [firstUnreadMessageId, markDividerSeen, onPressQuoteMessage]);
     const handlePinMessage = useCallback(async (message) => {
         if (pinnedRemainingCount <= 0 && pinnedTotalCount > 0) {
             setPinLimitModalOpen(true);
@@ -168,7 +181,7 @@ const MessageList = (props) => {
             emitter.off("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
             emitter.off("CHAT_LIST_SCROLL_TO_MESSAGE", scrollToMessage);
         };
-    }, []);
+    }, [scrollToBottom, scrollToMessage]);
     useEffect(() => {
         const handler = (sessionUpdated) => {
             if (sessionUpdated.conversationId === conversationId) {
@@ -193,7 +206,8 @@ const MessageList = (props) => {
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: connectStatus !== ConnectStatus.Connected ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 overflow-hidden bg-white", "data-cp-name": "MessageList", children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo }), showPinnedMessageBar && (_jsx(PinnedMessageBar, { genericSubtitle: true, canUnpin: canPinMessage })), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onCopyMessageLink: handleCopyMessageLink }, message.clientMsgID))) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), (Boolean(rawGroupId) && isCheckingMembership) || !isGroupStateFresh ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : !isConfirmedGroup && shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", "data-cp-name": "JoinGroupRequired", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : isViewOnlyMember ? (
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 overflow-hidden bg-white", "data-cp-name": "MessageList", children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo }), showPinnedMessageBar && (_jsx(PinnedMessageBar, { genericSubtitle: true, canUnpin: canPinMessage })), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [!loadState.initLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-2 z-10", onClick: handleJumpToFirstUnread })), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onCopyMessageLink: handleCopyMessageLink, showUnreadDivider: !!unreadDividerMessageId &&
+                                message.clientMsgID === unreadDividerMessageId, onUnreadDividerSeen: markDividerSeen }, message.clientMsgID))) })] }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), (Boolean(rawGroupId) && isCheckingMembership) || !isGroupStateFresh ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : !isConfirmedGroup && shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", "data-cp-name": "JoinGroupRequired", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : isViewOnlyMember ? (
             // Brief fallback while isJoined catches up after the kick event.
             _jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })) : !canSendMessage ? (_jsx("div", { className: "border-t bg-[#f5f5f5] py-3 flex items-center justify-center", children: _jsx("p", { className: "text-sm text-gray-500", children: t(isRestrictedByGroupMute
                         ? "send_message_disabled_group_mute"

package/dist/components/message/UnreadMessageDivider.d.ts

@@ -0,0 +1,7 @@
+interface UnreadMessageDividerProps {
+    /** Fires once, the first time the divider scrolls into view. */
+    onSeen?: () => void;
+}
+declare const UnreadMessageDivider: ({ onSeen }: UnreadMessageDividerProps) => import("react/jsx-runtime").JSX.Element;
+export default UnreadMessageDivider;
+//# sourceMappingURL=UnreadMessageDivider.d.ts.map

package/dist/components/message/UnreadMessageDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadMessageDivider.d.ts","sourceRoot":"","sources":["../../../src/components/message/UnreadMessageDivider.tsx"],"names":[],"mappings":"AAMA,UAAU,yBAAyB;IACjC,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,oBAAoB,GAAI,YAAY,yBAAyB,4CAkClE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/message/UnreadMessageDivider.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useLatest } from "ahooks";
+import { useTranslation } from "react-i18next";
+const UnreadMessageDivider = ({ onSeen }) => {
+    const { t } = useTranslation();
+    const dividerRef = useRef(null);
+    const onSeenRef = useLatest(onSeen);
+    useEffect(() => {
+        const element = dividerRef.current;
+        if (!element || typeof IntersectionObserver === "undefined")
+            return;
+        // No explicit root: intersection is still clipped by the scrolling
+        // timeline, so scrolled-out-of-view does not count as seen.
+        const observer = new IntersectionObserver((entries) => {
+            var _a;
+            if (entries.some((entry) => entry.isIntersecting)) {
+                (_a = onSeenRef.current) === null || _a === void 0 ? void 0 : _a.call(onSeenRef);
+                observer.disconnect();
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [onSeenRef]);
+    return (_jsxs("div", { ref: dividerRef, "data-testid": "unread-message-divider", className: "flex items-center gap-4 py-1", children: [_jsx("span", { className: "h-px flex-1 bg-[#393E40]/10" }), _jsx("span", { className: "shrink-0 text-xs font-bold uppercase text-[#A8ADAF]", children: t("unread_message_divider") }), _jsx("span", { className: "h-px flex-1 bg-[#393E40]/10" })] }));
+};
+export default UnreadMessageDivider;

package/dist/components/message/UnreadMessageJumpButton.d.ts

@@ -0,0 +1,7 @@
+interface UnreadMessageJumpButtonProps {
+    onClick: () => void;
+    className?: string;
+}
+declare const UnreadMessageJumpButton: ({ onClick, className, }: UnreadMessageJumpButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default UnreadMessageJumpButton;
+//# sourceMappingURL=UnreadMessageJumpButton.d.ts.map

package/dist/components/message/UnreadMessageJumpButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadMessageJumpButton.d.ts","sourceRoot":"","sources":["../../../src/components/message/UnreadMessageJumpButton.tsx"],"names":[],"mappings":"AAKA,UAAU,4BAA4B;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,QAAA,MAAM,uBAAuB,GAAI,yBAG9B,4BAA4B,4CAiB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/message/UnreadMessageJumpButton.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+const DoubleAngleUpIcon = () => (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: "shrink-0", children: _jsx("path", { d: "M3 7l4-4 4 4M3 11l4-4 4 4", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const UnreadMessageJumpButton = ({ onClick, className, }) => {
+    const { t } = useTranslation();
+    return (_jsxs("button", { type: "button", "data-testid": "unread-message-jump-button", onClick: onClick, className: clsx("flex items-center gap-0.5 rounded-l-[10px] border border-r-0 border-white bg-[#F1F3F8] px-1.5 py-0.5 text-xs font-medium text-[#393E40]", className), children: [_jsx(DoubleAngleUpIcon, {}), _jsx("span", { children: t("unread_message_jump") })] }));
+};
+export default UnreadMessageJumpButton;

package/dist/components/message/item/index.d.ts

@@ -17,7 +17,10 @@ interface MessageItemProps {
     /** Called on bubble tap to toggle this message as the revealed one. */
     onToggleTimeReveal?: (clientMsgID: string) => void;
     onCopyMessageLink?: (clientMsgID: string) => void;
+    /** Renders the "unread messages" divider above this message. */
+    showUnreadDivider?: boolean;
+    onUnreadDividerSeen?: () => void;
 }
-declare const MessageItem: ({ message, allMessages, isGroupChat, forceHideTip, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, onPinMessage, onUnpinMessage, enableLongPress, timeRevealed, onToggleTimeReveal, onCopyMessageLink, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageItem: ({ message, allMessages, isGroupChat, forceHideTip, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, onPinMessage, onUnpinMessage, enableLongPress, timeRevealed, onToggleTimeReveal, onCopyMessageLink, showUnreadDivider, onUnreadDividerSeen, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MessageItem;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/message/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,8BAA8B,CAAC;AA0CtC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAkCD,QAAA,MAAM,WAAW,GAAI,0PAgBlB,gBAAgB,mDAoXlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,8BAA8B,CAAC;AA2CtC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAkCD,QAAA,MAAM,WAAW,GAAI,kSAkBlB,gBAAgB,mDAmYlB,CAAC;AAEF,eAAe,WAAW,CAAC"}