@droppii-org/chat-sdk 0.7.13 → 0.7.14

package/dist/components/conversation-inbox/contact-search/ContactSearchMessageResultItem.d.ts

@@ -0,0 +1,10 @@
+import type { AppSearchMessageItem } from "../../../types/dto";
+interface ContactSearchMessageResultItemProps {
+    item: AppSearchMessageItem;
+    selfUserID: string;
+    searchTerm: string;
+    onSelect: (item: AppSearchMessageItem) => void;
+}
+declare const ContactSearchMessageResultItem: ({ item, selfUserID, searchTerm, onSelect, }: ContactSearchMessageResultItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchMessageResultItem;
+//# sourceMappingURL=ContactSearchMessageResultItem.d.ts.map

package/dist/components/conversation-inbox/contact-search/ContactSearchMessageResultItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchMessageResultItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchMessageResultItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAKxD,UAAU,mCAAmC;IAC3C,IAAI,EAAE,oBAAoB,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAChD;AAID,QAAA,MAAM,8BAA8B,GAAI,6CAKrC,mCAAmC,4CA+ErC,CAAC;AAEF,eAAe,8BAA8B,CAAC"}

package/dist/components/conversation-inbox/contact-search/ContactSearchMessageResultItem.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import ConversationPeerAvatar from "../../../components/conversation-inbox/ConversationPeerAvatar";
+import { getSearchHitText } from "../../../components/conversation-detail/thread-search/utils";
+import { PeerType } from "../../../types/conversation";
+import { formatTimestamp, splitHighlight } from "../../../utils/common";
+import { resolvePeerBadgeLabel } from "../../../utils/conversation";
+import { isGroupSession } from "../../../utils/imCommon";
+// One message hit: the thread it belongs to on top, the matched text below,
+// prefixed with its sender the way biz-mobile's global search does.
+const ContactSearchMessageResultItem = ({ item, selfUserID, searchTerm, onSelect, }) => {
+    var _a;
+    const { t } = useTranslation("conversation-inbox");
+    const { chatLog, conversation } = item;
+    const peerType = (_a = conversation === null || conversation === void 0 ? void 0 : conversation.peerType) !== null && _a !== void 0 ? _a : (isGroupSession(chatLog.sessionType) ? PeerType.GROUP : PeerType.USER);
+    const isGroup = peerType === PeerType.GROUP;
+    const name = (conversation === null || conversation === void 0 ? void 0 : conversation.showName) || "";
+    // 1-1 and bot threads already name the other side in the title.
+    const sender = !!selfUserID && chatLog.sendID === selfUserID
+        ? t("thread_detail.search.you")
+        : isGroup
+            ? chatLog.senderNickname || ""
+            : "";
+    const text = getSearchHitText(chatLog);
+    const parts = splitHighlight(text, searchTerm.trim());
+    return (_jsxs("button", { type: "button", "data-cp-name": "ContactSearchMessageResultItem", "data-testid": "contact-search-message-result", className: "flex w-full items-center gap-3 border-b border-gray-25 px-3 py-2.5 text-left hover:bg-gray-10", onClick: () => onSelect(item), children: [_jsx(ConversationPeerAvatar, { peerType: peerType, displayName: name, avatarUrl: (conversation === null || conversation === void 0 ? void 0 : conversation.faceURL) || null, badgeLabel: resolvePeerBadgeLabel(peerType, t) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [isGroup && (_jsx(Icon, { icon: "user-three-b", size: 16, className: "shrink-0 text-gray-900", "aria-hidden": true })), _jsx("span", { className: "min-w-0 flex-1 truncate text-[16px] font-medium leading-[1.6] text-black", children: name }), _jsx("span", { className: "shrink-0 pl-2 text-[12px] leading-[1.6] text-gray-400", children: formatTimestamp(chatLog.sendTime, { hasTime: true }) })] }), _jsxs("span", { "data-testid": "contact-search-message-preview", className: "flex min-w-0 text-[14px] leading-[1.6] tracking-[0.14px] text-gray-600", children: [sender && (_jsxs(_Fragment, { children: [_jsx("span", { className: "max-w-[50%] shrink-0 truncate", children: sender }), _jsx("span", { className: "shrink-0 whitespace-pre", children: ": " })] })), _jsx("span", { className: "min-w-0 truncate", children: parts ? (_jsxs(_Fragment, { children: [parts.before, _jsx("span", { className: "text-[var(--dc-color-primary)]", children: parts.match }), parts.after] })) : (text) })] })] })] }));
+};
+export default ContactSearchMessageResultItem;

package/dist/components/conversation-inbox/contact-search/ContactSearchMessageSection.d.ts

@@ -0,0 +1,12 @@
+import type { AppSearchMessageItem } from "../../../types/dto";
+interface ContactSearchMessageSectionProps {
+    items: AppSearchMessageItem[];
+    hasMore: boolean;
+    searchTerm: string;
+    selfUserID: string;
+    onSelect: (item: AppSearchMessageItem) => void;
+    onViewAll: () => void;
+}
+declare const ContactSearchMessageSection: ({ items, hasMore, searchTerm, selfUserID, onSelect, onViewAll, }: ContactSearchMessageSectionProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchMessageSection;
+//# sourceMappingURL=ContactSearchMessageSection.d.ts.map

package/dist/components/conversation-inbox/contact-search/ContactSearchMessageSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchMessageSection.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchMessageSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAMxD,UAAU,gCAAgC;IACxC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,QAAA,MAAM,2BAA2B,GAAI,kEAOlC,gCAAgC,4CAqBlC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/conversation-inbox/contact-search/ContactSearchMessageSection.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ContactSearchMessageResultItem from "./ContactSearchMessageResultItem";
+import ContactSearchSectionHeader from "./ContactSearchSectionHeader";
+import ContactSearchViewMoreBar from "./ContactSearchViewMoreBar";
+import { CONTACT_SEARCH_PREVIEW_LIMIT } from "./constants";
+// `Tất cả` preview of the `Tin nhắn` tab. No count: the search API always
+// reports a total of 0.
+const ContactSearchMessageSection = ({ items, hasMore, searchTerm, selfUserID, onSelect, onViewAll, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsxs("section", { "data-cp-name": "ContactSearchMessageSection", children: [_jsx(ContactSearchSectionHeader, { title: t("contact_search.tabs.messages"), onSelect: onViewAll }), items.slice(0, CONTACT_SEARCH_PREVIEW_LIMIT).map((item) => (_jsx(ContactSearchMessageResultItem, { item: item, selfUserID: selfUserID, searchTerm: searchTerm, onSelect: onSelect }, item.chatLog.clientMsgID))), hasMore && _jsx(ContactSearchViewMoreBar, { onSelect: onViewAll })] }));
+};
+export default ContactSearchMessageSection;

package/dist/components/conversation-inbox/contact-search/ContactSearchMessagesTab.d.ts

@@ -0,0 +1,11 @@
+import type { useSearchGlobalMessages } from "../../../hooks/search/useSearchGlobalMessages";
+import type { AppSearchMessageItem } from "../../../types/dto";
+interface ContactSearchMessagesTabProps {
+    searchTerm: string;
+    search: ReturnType<typeof useSearchGlobalMessages>;
+    selfUserID: string;
+    onSelect: (item: AppSearchMessageItem) => void;
+}
+declare const ContactSearchMessagesTab: ({ searchTerm, search, selfUserID, onSelect, }: ContactSearchMessagesTabProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchMessagesTab;
+//# sourceMappingURL=ContactSearchMessagesTab.d.ts.map

package/dist/components/conversation-inbox/contact-search/ContactSearchMessagesTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchMessagesTab.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchMessagesTab.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAMxD,UAAU,6BAA6B;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAChD;AAID,QAAA,MAAM,wBAAwB,GAAI,+CAK/B,6BAA6B,4CA6D/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/conversation-inbox/contact-search/ContactSearchMessagesTab.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spin } from "antd";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useTranslation } from "react-i18next";
+import ContactSearchMessageResultItem from "./ContactSearchMessageResultItem";
+import ContactSearchStateMessage from "./ContactSearchStateMessage";
+const SCROLL_TARGET_ID = "contact-search-messages-scroll";
+// Full `Tin nhắn` list. The query lives in the panel so `Tất cả` and this
+// tab share one cache entry.
+const ContactSearchMessagesTab = ({ searchTerm, search, selfUserID, onSelect, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { results, isLoading, isError, hasNextPage, isFetchNextPageError } = search;
+    if (!searchTerm) {
+        return (_jsx(ContactSearchStateMessage, { testId: "contact-search-messages-initial", children: t("contact_search.initial") }));
+    }
+    if (isLoading) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) }));
+    }
+    if (isError && results.length === 0) {
+        return (_jsx(ContactSearchStateMessage, { testId: "contact-search-messages-failed", children: t("contact_search.failed") }));
+    }
+    // The message search spec dropped the helper line under the title.
+    if (results.length === 0) {
+        return (_jsx(ContactSearchStateMessage, { testId: "contact-search-messages-no-result", children: t("contact_search.no_result_title") }));
+    }
+    return (_jsx("div", { id: SCROLL_TARGET_ID, className: "flex-1 overflow-y-auto", children: _jsx(InfiniteScroll, { dataLength: results.length, next: search.fetchNextPage, 
+            // A failed page would otherwise leave the loader spinning for good.
+            hasMore: !!hasNextPage && !isFetchNextPageError, scrollableTarget: SCROLL_TARGET_ID, loader: _jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) }), children: results.map((item) => (_jsx(ContactSearchMessageResultItem, { item: item, selfUserID: selfUserID, searchTerm: searchTerm, onSelect: onSelect }, item.chatLog.clientMsgID))) }) }));
+};
+export default ContactSearchMessagesTab;

package/dist/components/conversation-inbox/contact-search/ContactSearchPanel.d.ts

@@ -1,7 +1,11 @@
 interface ContactSearchPanelProps {
     open: boolean;
     onClose: () => void;
+    /** Searches messages in `Tất cả` and the `Tin nhắn` tab; off keeps the tab's placeholder. */
+    showMessageSearch?: boolean;
+    /** Host toast for a revoked message hit; the SDK toast shows otherwise. */
+    onSearchMessageRevoked?: () => void;
 }
-declare const ContactSearchPanel: ({ open, onClose }: ContactSearchPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContactSearchPanel: ({ open, onClose, showMessageSearch, onSearchMessageRevoked, }: ContactSearchPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default ContactSearchPanel;
 //# sourceMappingURL=ContactSearchPanel.d.ts.map

package/dist/components/conversation-inbox/contact-search/ContactSearchPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactSearchPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchPanel.tsx"],"names":[],"mappings":"AAgCA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,mBAAmB,uBAAuB,4CA2TrE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ContactSearchPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchPanel.tsx"],"names":[],"mappings":"AAgDA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6FAA6F;IAC7F,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2EAA2E;IAC3E,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,kBAAkB,GAAI,+DAKzB,uBAAuB,4CA6XzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/conversation-inbox/contact-search/ContactSearchPanel.js

@@ -1,17 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Drawer, Input, Spin } from "antd";
+import { Drawer, Input, Spin, message as toastMessage, } from "antd";
 import { useDebounce } from "ahooks";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useTranslation } from "react-i18next";
+import { MessageType } from "@droppii-org/wasm-client-sdk";
 import { Icon } from "../../../components/icon";
 import { useChatNavigate } from "../../../hooks/conversation/useChatNavigate";
 import { useSearchContacts } from "../../../hooks/search/useSearchContacts";
+import { useSearchGlobalMessages } from "../../../hooks/search/useSearchGlobalMessages";
 import { useSearchPublicGroups } from "../../../hooks/search/useSearchPublicGroups";
+import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
+import { getConversationIdFromMessage } from "../../../utils/conversation";
 import ContactSearchCommunitySection from "./ContactSearchCommunitySection";
 import ContactSearchFilters from "./ContactSearchFilters";
+import ContactSearchMessageSection from "./ContactSearchMessageSection";
+import ContactSearchMessagesTab from "./ContactSearchMessagesTab";
 import ContactSearchResultItem from "./ContactSearchResultItem";
 import ContactSearchSectionHeader from "./ContactSearchSectionHeader";
 import ContactSearchStateMessage from "./ContactSearchStateMessage";
@@ -22,10 +28,13 @@ import { CONTACT_SEARCH_DEBOUNCE_MS, CONTACT_SEARCH_ICON_SIZE, CONTACT_SEARCH_PR
 import { buildContactSearchParams, resolveContactSearchTarget } from "./utils";
 const SCROLL_TARGET_ID = "contact-search-scroll";
 const COMMUNITY_SCROLL_TARGET_ID = "contact-search-community-scroll";
-const ContactSearchPanel = ({ open, onClose }) => {
+const ContactSearchPanel = ({ open, onClose, showMessageSearch = false, onSearchMessageRevoked, }) => {
     const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation();
     const onNavigate = useChatNavigate();
+    const selfUserID = useAuthStore((state) => state.userID);
     const setPendingResolveTarget = useConversationStore((state) => state.setPendingResolveTarget);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const [keyword, setKeyword] = useState("");
     const [activeType, setActiveType] = useState();
     const [activeTab, setActiveTab] = useState(ContactSearchTab.All);
@@ -54,6 +63,14 @@ const ContactSearchPanel = ({ open, onClose }) => {
             (activeTab === ContactSearchTab.All ||
                 activeTab === ContactSearchTab.Community),
     });
+    // Same sharing between `Tất cả` and `Tin nhắn`.
+    const messages = useSearchGlobalMessages({
+        searchTerm: trimmedKeyword,
+        enabled: open &&
+            showMessageSearch &&
+            (activeTab === ContactSearchTab.All ||
+                activeTab === ContactSearchTab.Messages),
+    });
     const handleOpenGroup = (groupID) => {
         const target = { groupId: groupID };
         setPendingResolveTarget(target);
@@ -68,6 +85,26 @@ const ContactSearchPanel = ({ open, onClose }) => {
         onClose();
         onNavigate(`${window.location.pathname}?${params.toString()}`);
     };
+    // A hit opens like a copied message link: the thread from the URL, then a
+    // jump to the message.
+    const handleSelectMessage = ({ chatLog, conversation }) => {
+        if (chatLog.isRevoked || chatLog.contentType === MessageType.RevokeMessage) {
+            if (onSearchMessageRevoked)
+                onSearchMessageRevoked();
+            else
+                toastMessage.info(tCommon("message_revoked_or_deleted"));
+            return;
+        }
+        const threadId = (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID) || getConversationIdFromMessage(chatLog);
+        if (!threadId)
+            return;
+        const params = buildContactSearchParams({});
+        params.set("threadId", threadId);
+        params.set("messageId", chatLog.clientMsgID);
+        setSelectedConversationId(threadId);
+        onClose();
+        onNavigate(`${window.location.pathname}?${params.toString()}`);
+    };
     // Filters belong to the `Liên hệ` tab only, so leaving it drops the active
     // type — `Tất cả` always previews every contact type.
     const handleChangeTab = (tab) => {
@@ -93,23 +130,31 @@ const ContactSearchPanel = ({ open, onClose }) => {
             return renderNoResultState();
         return null;
     };
-    // `Tất cả` previews contacts, then public groups; the message section
-    // belongs to the message-search ticket and goes between the two.
+    // `Tất cả` previews contacts, then messages, then public groups.
     const renderAllTab = () => {
         if (!trimmedKeyword)
             return renderInitialState();
-        if (isLoading || publicGroups.isLoading)
+        if (isLoading || publicGroups.isLoading || messages.isLoading) {
             return renderLoadingState();
-        if (isError && publicGroups.isError)
+        }
+        // A failed next page keeps the hits already loaded.
+        const messagesFailed = !showMessageSearch ||
+            (messages.isError && messages.results.length === 0);
+        if (isError && publicGroups.isError && messagesFailed) {
             return renderFailedState();
+        }
         // A source that failed drops its own section instead of the whole tab.
         const showContacts = !isError && contacts.length > 0;
+        const showMessages = !messagesFailed && messages.results.length > 0;
         const showGroups = !publicGroups.isError && publicGroups.groups.length > 0;
-        if (!showContacts && !showGroups)
+        if (!showContacts && !showMessages && !showGroups) {
             return renderNoResultState();
+        }
         const hasMoreContacts = contacts.length > CONTACT_SEARCH_PREVIEW_LIMIT || !!hasNextPage;
         const openContactsTab = () => handleChangeTab(ContactSearchTab.Contacts);
-        return (_jsxs("div", { className: "flex-1 overflow-y-auto", children: [showContacts && (_jsxs("section", { children: [_jsx(ContactSearchSectionHeader, { title: t("contact_search.tabs.contacts"), count: totalElements || undefined, onSelect: openContactsTab }), renderContactItems(contacts.slice(0, CONTACT_SEARCH_PREVIEW_LIMIT)), hasMoreContacts && (_jsx(ContactSearchViewMoreBar, { onSelect: openContactsTab }))] })), showGroups && (_jsx(ContactSearchCommunitySection, { groups: publicGroups.groups, total: publicGroups.total, onOpenGroup: handleOpenGroup, onViewAll: () => handleChangeTab(ContactSearchTab.Community) }))] }));
+        // The design separates the sections with a 4px gray-5 band.
+        return (_jsxs("div", { className: "flex-1 overflow-y-auto [&>section+section]:border-t-4 [&>section+section]:border-gray-5", children: [showContacts && (_jsxs("section", { children: [_jsx(ContactSearchSectionHeader, { title: t("contact_search.tabs.contacts"), count: totalElements || undefined, onSelect: openContactsTab }), renderContactItems(contacts.slice(0, CONTACT_SEARCH_PREVIEW_LIMIT)), hasMoreContacts && (_jsx(ContactSearchViewMoreBar, { onSelect: openContactsTab }))] })), showMessages && (_jsx(ContactSearchMessageSection, { items: messages.results, hasMore: messages.results.length > CONTACT_SEARCH_PREVIEW_LIMIT ||
+                        !!messages.hasNextPage, searchTerm: trimmedKeyword, selfUserID: selfUserID, onSelect: handleSelectMessage, onViewAll: () => handleChangeTab(ContactSearchTab.Messages) })), showGroups && (_jsx(ContactSearchCommunitySection, { groups: publicGroups.groups, total: publicGroups.total, onOpenGroup: handleOpenGroup, onViewAll: () => handleChangeTab(ContactSearchTab.Community) }))] }));
     };
     const renderContactList = () => (_jsx("div", { id: SCROLL_TARGET_ID, className: "flex-1 overflow-y-auto", children: _jsx(InfiniteScroll, { dataLength: contacts.length, next: fetchNextPage, hasMore: !!hasNextPage, scrollableTarget: SCROLL_TARGET_ID, loader: isFetchingNextPage ? (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) })) : null, children: renderContactItems(contacts) }) }));
     const renderCommunityTab = () => {
@@ -145,7 +190,7 @@ const ContactSearchPanel = ({ open, onClose }) => {
         {
             key: ContactSearchTab.Messages,
             label: t("contact_search.tabs.messages"),
-            children: (_jsx(ContactSearchStateMessage, { testId: "contact-search-messages", children: t("contact_search.messages_not_available") })),
+            children: showMessageSearch ? (_jsx(ContactSearchMessagesTab, { searchTerm: trimmedKeyword, search: messages, selfUserID: selfUserID, onSelect: handleSelectMessage })) : (_jsx(ContactSearchStateMessage, { testId: "contact-search-messages", children: t("contact_search.messages_not_available") })),
         },
         {
             key: ContactSearchTab.Community,

package/dist/components/conversation-inbox/contact-search/constants.js

@@ -2,8 +2,8 @@ import { ContactSearchType } from "../../../types/dto";
 export const CONTACT_SEARCH_DEBOUNCE_MS = 300;
 export const CONTACT_SEARCH_ICON_SIZE = 18;
 export const CONTACT_SEARCH_AVATAR_SIZE = 48;
-// `Tất cả` caps each section's preview (contacts, public groups) before handing
-// the seller over to the full `Liên hệ` / `Cộng đồng` tab.
+// `Tất cả` caps each section's preview (contacts, messages, public groups)
+// before handing the seller over to the full tab.
 export const CONTACT_SEARCH_PREVIEW_LIMIT = 5;
 export var ContactSearchTab;
 (function (ContactSearchTab) {

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

@@ -1 +1 @@
-{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAwB/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA4oBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AA6B/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA6rBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/GroupMembersDrawer.js

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
 import useAuthStore from "../../store/auth";
 import useConversationStore from "../../store/conversation";
+import { PeerType } from "../../types/conversation";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
 import { useSearchGroupMembers } from "../../hooks/group/useSearchGroupMembers";
 import { useLeaveConversation } from "../../hooks/session/useLeaveConversation";
@@ -25,6 +26,9 @@ import useDeskPanelHostStore from "../../store/deskPanelHost";
 import DeskSidePanel from "../../components/common/DeskSidePanel";
 import GroupMembersPanelCrm from "./GroupMembersPanelCrm";
 import { buildCrmMemberMenu } from "./groupMemberMenuCrm";
+// A group's list loads page by page as the reader scrolls.
+const MEMBER_PAGE_SIZE = 50;
+const LOAD_MORE_THRESHOLD_PX = 80;
 const getMemberDisplayName = (member) => {
     return member.nickname || member.userID || "";
 };
@@ -61,7 +65,14 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     // relation to who may manage "members", so those actions are hidden
     // entirely rather than shown disabled.
     const isRealGroup = isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
-    const { members, isLoading, error, refetch, patchMemberRole, patchMemberPermissions } = useGroupMembers(groupID);
+    // Same split as the header count: a group pages its list and takes its
+    // head-count from group info; other threads load and count the whole list.
+    const isPagedList = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.GROUP;
+    const groupMemberCount = useConversationStore((state) => { var _a; return groupID ? (_a = state.currentGroupInfo.get(groupID)) === null || _a === void 0 ? void 0 : _a.memberCount : undefined; });
+    const { members, isLoading, isLoadingMore, hasMore, loadMore, error, refetch, patchMemberRole, patchMemberPermissions, } = useGroupMembers(groupID, {
+        pageSize: isPagedList ? MEMBER_PAGE_SIZE : undefined,
+    });
+    const totalCount = isPagedList ? groupMemberCount !== null && groupMemberCount !== void 0 ? groupMemberCount : 0 : members.length;
     const { results: searchResults, isSearching } = useSearchGroupMembers(groupID, debouncedSearch);
     const { mutateAsync: leaveConversation, isPending: isLeaving } = useLeaveConversation();
     const permissions = useGroupPermission(groupID);
@@ -69,7 +80,8 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     // granularity — BE still rejects an Admin removing another Admin/Owner
     // (role hierarchy), so the FE must gate per-target here too, or the user
     // reaches the confirm flow and only then sees a rejection toast.
-    const actingMemberRoleLevel = useConversationStore((state) => { var _a; return groupID ? (_a = state.currentMemberInGroup.get(groupID)) === null || _a === void 0 ? void 0 : _a.roleLevel : undefined; });
+    const actingMember = useConversationStore((state) => groupID ? state.currentMemberInGroup.get(groupID) : undefined);
+    const actingMemberRoleLevel = actingMember === null || actingMember === void 0 ? void 0 : actingMember.roleLevel;
     const actingIsOwner = actingMemberRoleLevel === GroupMemberRole.Owner;
     const { mutateAsync: setMemberPermissions } = useSetGroupMemberPermissions();
     const { mutateAsync: kickMember } = useKickGroupMember();
@@ -85,7 +97,13 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
         console.error("Error parsing conversation extra info:", error);
     }
     const isSearchActive = debouncedSearch.trim().length > 0;
-    const sourceMembers = isSearchActive ? searchResults : members;
+    // "Me" leads its role group even before paging reaches my row.
+    const listedMembers = useMemo(() => isPagedList &&
+        actingMember &&
+        !members.some((member) => member.userID === actingMember.userID)
+        ? [actingMember, ...members]
+        : members, [isPagedList, actingMember, members]);
+    const sourceMembers = isSearchActive ? searchResults : listedMembers;
     const sortedMembers = useMemo(() => {
         return [...sourceMembers]
             .map((member) => {
@@ -123,11 +141,22 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
             if (memberA.isCustomer !== memberB.isCustomer) {
                 return memberA.isCustomer ? -1 : 1;
             }
+            // Paged rows keep core's join order so a new page only appends below.
+            if (isPagedList && !isSearchActive)
+                return 0;
             return memberA.nickname.localeCompare(memberB.nickname, "vi", {
                 sensitivity: "base",
             });
         });
-    }, [authUserID, sourceMembers, customerUserID, t]);
+    }, [authUserID, sourceMembers, customerUserID, t, isPagedList, isSearchActive]);
+    const handleListScroll = (event) => {
+        if (isSearchActive || !hasMore || isLoadingMore)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        if (scrollHeight - scrollTop - clientHeight < LOAD_MORE_THRESHOLD_PX) {
+            void loadMore();
+        }
+    };
     const handleOpenDrawer = () => {
         if (!groupID || disabled) {
             return;
@@ -279,7 +308,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     useEffect(() => {
         closePanel();
     }, [groupID]);
-    const renderCrmPanel = (closeOnEscape) => (_jsx(GroupMembersPanelCrm, { totalCount: members.length, members: sortedMembers.map((member) => isRealGroup ? member : Object.assign(Object.assign({}, member), { roleLabel: "" })), isRealGroup: isRealGroup, isLoading: isLoading || (isSearchActive && isSearching), error: error, isSearchActive: isSearchActive, search: search, onSearchChange: setSearch, canAddMember: canAddMember, onAddMember: () => setShowAddMember(true), onClose: handleCloseDrawer, closeOnEscape: closeOnEscape, buildMenu: (member) => buildCrmMemberMenu({
+    const renderCrmPanel = (closeOnEscape) => (_jsx(GroupMembersPanelCrm, { totalCount: totalCount, members: sortedMembers.map((member) => isRealGroup ? member : Object.assign(Object.assign({}, member), { roleLabel: "" })), isRealGroup: isRealGroup, isLoading: isLoading || (isSearchActive && isSearching), isLoadingMore: isLoadingMore && !isSearchActive, onListScroll: handleListScroll, error: error, isSearchActive: isSearchActive, search: search, onSearchChange: setSearch, canAddMember: canAddMember, onAddMember: () => setShowAddMember(true), onClose: handleCloseDrawer, closeOnEscape: closeOnEscape, buildMenu: (member) => buildCrmMemberMenu({
             member,
             isRealGroup,
             permissions,
@@ -409,7 +438,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                         padding: 0,
                         height: "100%",
                     },
-                }, getContainer: false, destroyOnHidden: true, width: 360, children: _jsxs("div", { className: "flex flex-col h-full bg-white", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("members") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleCloseDrawer, "aria-label": t("close"), children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }), className: "h-10" }), canAddMember && (_jsx(Button, { type: "primary", shape: "default", className: "w-10 h-10 p-0 shrink-0 flex items-center justify-center rounded-lg", onClick: () => setShowAddMember(true), children: _jsx(Icon, { icon: "user-add-b", size: 18 }) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: renderContent() })] }) })), groupID && (_jsx(AddMemberModal, { open: showAddMember, groupID: groupID, onClose: () => setShowAddMember(false) })), groupID && (_jsx(AdminPermissionModal, { open: Boolean(adminPermissionMember), groupID: groupID, onClose: () => setAdminPermissionMember(null), member: adminPermissionMember
+                }, getContainer: false, destroyOnHidden: true, width: 360, children: _jsxs("div", { className: "flex flex-col h-full bg-white", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("members") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleCloseDrawer, "aria-label": t("close"), children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }), className: "h-10" }), canAddMember && (_jsx(Button, { type: "primary", shape: "default", className: "w-10 h-10 p-0 shrink-0 flex items-center justify-center rounded-lg", onClick: () => setShowAddMember(true), children: _jsx(Icon, { icon: "user-add-b", size: 18 }) }))] }), _jsxs("div", { className: "flex-1 overflow-y-auto", onScroll: handleListScroll, children: [renderContent(), isLoadingMore && !isSearchActive && (_jsx("div", { className: "flex justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })] }) })), groupID && (_jsx(AddMemberModal, { open: showAddMember, groupID: groupID, onClose: () => setShowAddMember(false) })), groupID && (_jsx(AdminPermissionModal, { open: Boolean(adminPermissionMember), groupID: groupID, onClose: () => setAdminPermissionMember(null), member: adminPermissionMember
                     ? {
                         userID: adminPermissionMember.userID,
                         nickname: adminPermissionMember.nickname,

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

@@ -1,11 +1,15 @@
+import type { UIEvent } from "react";
 import type { MenuProps } from "antd";
 import type { MemberDisplayItem } from "./groupMemberTypes";
 interface GroupMembersPanelCrmProps {
+    /** Whole-thread head-count; `members` may be only the pages loaded so far. */
     totalCount: number;
     members: MemberDisplayItem[];
     /** Real groups split owners/admins from members; support threads show one list. */
     isRealGroup: boolean;
     isLoading: boolean;
+    isLoadingMore: boolean;
+    onListScroll: (event: UIEvent<HTMLDivElement>) => void;
     error?: string;
     isSearchActive: boolean;
     search: string;
@@ -18,6 +22,6 @@ interface GroupMembersPanelCrmProps {
     buildMenu: (member: MemberDisplayItem) => MenuProps["items"];
 }
 /** CRM members panel: search + add, owners/admins and members lists, per-member action menu. */
-declare const GroupMembersPanelCrm: ({ totalCount, members, isRealGroup, isLoading, error, isSearchActive, search, onSearchChange, canAddMember, onAddMember, onClose, closeOnEscape, buildMenu, }: GroupMembersPanelCrmProps) => import("react/jsx-runtime").JSX.Element;
+declare const GroupMembersPanelCrm: ({ totalCount, members, isRealGroup, isLoading, isLoadingMore, onListScroll, error, isSearchActive, search, onSearchChange, canAddMember, onAddMember, onClose, closeOnEscape, buildMenu, }: GroupMembersPanelCrmProps) => import("react/jsx-runtime").JSX.Element;
 export default GroupMembersPanelCrm;
 //# sourceMappingURL=GroupMembersPanelCrm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupMembersPanelCrm.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersPanelCrm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAMtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,yBAAyB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9D;AAQD,gGAAgG;AAChG,QAAA,MAAM,oBAAoB,GAAI,+JAc3B,yBAAyB,4CA0H3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"GroupMembersPanelCrm.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersPanelCrm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA4B,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAMtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,yBAAyB;IACjC,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9D;AAQD,gGAAgG;AAChG,QAAA,MAAM,oBAAoB,GAAI,4LAgB3B,yBAAyB,4CAiI3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/message/GroupMembersPanelCrm.js

@@ -10,7 +10,7 @@ import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
 const CHIP = "inline-flex h-[22px] shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 text-xs font-medium";
 const SectionTitle = ({ children }) => (_jsx("h3", { className: "m-0 px-2 pb-1 pt-3 text-xs font-medium text-gray-600", children: children }));
 /** CRM members panel: search + add, owners/admins and members lists, per-member action menu. */
-const GroupMembersPanelCrm = ({ totalCount, members, isRealGroup, isLoading, error, isSearchActive, search, onSearchChange, canAddMember, onAddMember, onClose, closeOnEscape, buildMenu, }) => {
+const GroupMembersPanelCrm = ({ totalCount, members, isRealGroup, isLoading, isLoadingMore, onListScroll, error, isSearchActive, search, onSearchChange, canAddMember, onAddMember, onClose, closeOnEscape, buildMenu, }) => {
     const { t } = useTranslation();
     const rootRef = useRef(null);
     useEffect(() => {
@@ -26,6 +26,10 @@ const GroupMembersPanelCrm = ({ totalCount, members, isRealGroup, isLoading, err
     };
     const privileged = isRealGroup ? members.filter((m) => m.isOwner || m.isAdmin) : [];
     const regular = isRealGroup ? members.filter((m) => !m.isOwner && !m.isAdmin) : members;
+    // Owners and admins come first in core's order, so the rest of the head-count is regular members.
+    const regularCount = isSearchActive
+        ? regular.length
+        : Math.max(totalCount - privileged.length, regular.length);
     const renderRow = (member) => {
         const items = isRealGroup || member.isCurrentUser ? buildMenu(member) : undefined;
         const roleChip = !isRealGroup && member.isOwner
@@ -48,8 +52,8 @@ const GroupMembersPanelCrm = ({ totalCount, members, isRealGroup, isLoading, err
         if (!members.length) {
             return _jsx(Empty, { description: isSearchActive ? t("no_member_found") : t("no_group_members") });
         }
-        return (_jsxs(_Fragment, { children: [privileged.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: t("members_owner_admin_section") }), renderList(privileged)] })), regular.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: t("members_regular_section", { count: regular.length }) }), renderList(regular)] }))] }));
+        return (_jsxs(_Fragment, { children: [privileged.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: t("members_owner_admin_section") }), renderList(privileged)] })), regular.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: t("members_regular_section", { count: regularCount }) }), renderList(regular)] }))] }));
     };
-    return (_jsxs("div", { ref: rootRef, tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": t("members"), className: "flex h-full flex-col bg-white outline-none", "data-cp-name": "GroupMembersPanelCrm", children: [_jsx(GroupPanelHeader, { title: t("members_panel_title", { count: totalCount }), onClose: onClose }), _jsxs("div", { className: "flex gap-2 px-4 pb-1 pt-3", children: [_jsxs("label", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg bg-gray-5 px-2.5 text-gray-600 focus-within:outline focus-within:outline-2 focus-within:outline-primary-200", children: [_jsx("span", { className: "sr-only", children: t("members_search_label") }), _jsx(Icon, { icon: "search-o", size: 16, className: "shrink-0" }), _jsx("input", { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), placeholder: t("members_search_label"), className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" })] }), canAddMember && (_jsx(Button, { type: "primary", className: "h-9 shrink-0 px-3", icon: _jsx(Icon, { icon: "user-add-o", size: 16 }), onClick: onAddMember, children: t("members_add") }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-2 pb-2", children: renderBody() })] }));
+    return (_jsxs("div", { ref: rootRef, tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": t("members"), className: "flex h-full flex-col bg-white outline-none", "data-cp-name": "GroupMembersPanelCrm", children: [_jsx(GroupPanelHeader, { title: t("members_panel_title", { count: totalCount }), onClose: onClose }), _jsxs("div", { className: "flex gap-2 px-4 pb-1 pt-3", children: [_jsxs("label", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg bg-gray-5 px-2.5 text-gray-600 focus-within:outline focus-within:outline-2 focus-within:outline-primary-200", children: [_jsx("span", { className: "sr-only", children: t("members_search_label") }), _jsx(Icon, { icon: "search-o", size: 16, className: "shrink-0" }), _jsx("input", { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), placeholder: t("members_search_label"), className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" })] }), canAddMember && (_jsx(Button, { type: "primary", className: "h-9 shrink-0 px-3", icon: _jsx(Icon, { icon: "user-add-o", size: 16 }), onClick: onAddMember, children: t("members_add") }))] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-2 pb-2", onScroll: onListScroll, children: [renderBody(), isLoadingMore && _jsx("div", { className: "flex justify-center py-3", children: _jsx(Spin, { size: "small" }) })] })] }));
 };
 export default GroupMembersPanelCrm;

package/dist/components/message/footer/mention/useMentionOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMentionOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/useMentionOptions.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAe7C,eAAO,MAAM,iBAAiB,GAC5B,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO,MAAM,KACZ,aAAa,EAyCf,CAAC"}
+{"version":3,"file":"useMentionOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/useMentionOptions.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAoB7C,eAAO,MAAM,iBAAiB,GAC5B,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO,MAAM,KACZ,aAAa,EA2Df,CAAC"}

package/dist/components/message/footer/mention/useMentionOptions.js

@@ -1,8 +1,13 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useGroupMembers } from "../../../../hooks/group/useGroupMembers";
+import { useSearchGroupMembers } from "../../../../hooks/group/useSearchGroupMembers";
 import useAuthStore from "../../../../store/auth";
 export const ALL_MEMBERS_USER_ID = "__all__";
+// Typing a name loads a big group's remaining members up to this many.
+const MENTION_MEMBER_LOAD_LIMIT = 10000;
+// The menu never renders more rows than one member page.
+const MENTION_OPTION_LIMIT = 999;
 // Prefix matches rank above mid-string matches, then alphabetical — matches
 // the "closest match first" ranking spec'd for this feature (not just a
 // plain filter). No keyword: falls back to plain A-Z (AC-Open default).
@@ -18,13 +23,28 @@ const matchRank = (displayName, keyword) => {
 // left to handle here.
 export const useMentionOptions = (groupID, query) => {
     const { t } = useTranslation();
-    const { members } = useGroupMembers(groupID);
+    const { members, hasMore, isLoadingMore, loadMore } = useGroupMembers(groupID);
+    // Core keeps only part of a big group locally, so its search alone misses
+    // members; typing a name also loads the rest, merged in as pages arrive.
+    const { results: searchResults } = useSearchGroupMembers(groupID, hasMore ? query : "");
     const currentUserID = useAuthStore((state) => state.userID);
+    const hasKeyword = query.trim().length > 0;
+    useEffect(() => {
+        if (!hasKeyword || !hasMore || isLoadingMore)
+            return;
+        if (members.length >= MENTION_MEMBER_LOAD_LIMIT)
+            return;
+        void loadMore();
+    }, [hasKeyword, hasMore, isLoadingMore, members.length, loadMore]);
     return useMemo(() => {
         const keyword = query.trim().toLowerCase();
+        const loadedIDs = new Set(members.map((member) => member.userID));
+        const candidates = keyword
+            ? [...members, ...searchResults.filter((member) => !loadedIDs.has(member.userID))]
+            : members;
         // Self-tagging isn't a useful mention target — the sender already
         // knows who they are — so the current user is filtered out entirely.
-        const memberOptions = members
+        const memberOptions = candidates
             .filter((member) => member.userID !== currentUserID)
             .map((member) => ({
             userID: member.userID,
@@ -40,7 +60,8 @@ export const useMentionOptions = (groupID, query) => {
             return rankDiff !== 0
                 ? rankDiff
                 : a.displayName.localeCompare(b.displayName);
-        });
+        })
+            .slice(0, MENTION_OPTION_LIMIT);
         const allOption = {
             userID: ALL_MEMBERS_USER_ID,
             displayName: t("mention.all_members"),
@@ -48,5 +69,5 @@ export const useMentionOptions = (groupID, query) => {
         };
         const matchesAll = !keyword || allOption.displayName.toLowerCase().includes(keyword);
         return matchesAll ? [allOption, ...memberOptions] : memberOptions;
-    }, [members, query, t, currentUserID]);
+    }, [members, searchResults, query, t, currentUserID]);
 };

package/dist/hooks/group/useGroupMembers.d.ts

@@ -1,12 +1,19 @@
 import { GroupMemberItem, GroupMemberRole } from "@droppii-org/wasm-client-sdk";
+interface UseGroupMembersOptions {
+    /** Rows per getGroupMemberList call; callers that never loadMore get one page. */
+    pageSize?: number;
+}
 interface UseGroupMembersResult {
     members: GroupMemberItem[];
     isLoading: boolean;
+    isLoadingMore: boolean;
+    hasMore: boolean;
     error?: string;
     refetch: () => Promise<void>;
+    loadMore: () => Promise<void>;
     patchMemberRole: (userID: string, roleLevel: GroupMemberRole) => void;
     patchMemberPermissions: (userID: string, permissions: string[]) => void;
 }
-export declare const useGroupMembers: (groupID?: string) => UseGroupMembersResult;
+export declare const useGroupMembers: (groupID?: string, { pageSize }?: UseGroupMembersOptions) => UseGroupMembersResult;
 export {};
 //# sourceMappingURL=useGroupMembers.d.ts.map

package/dist/hooks/group/useGroupMembers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGroupMembers.d.ts","sourceRoot":"","sources":["../../../src/hooks/group/useGroupMembers.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,eAAe,EAAE,eAAe,EAA4B,MAAM,8BAA8B,CAAC;AAMpH,UAAU,qBAAqB;IAC7B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACtE,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzE;AAED,eAAO,MAAM,eAAe,GAC1B,UAAU,MAAM,KACf,qBAyGF,CAAC"}
+{"version":3,"file":"useGroupMembers.d.ts","sourceRoot":"","sources":["../../../src/hooks/group/useGroupMembers.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,eAAe,EAAE,eAAe,EAA4B,MAAM,8BAA8B,CAAC;AAKpH,UAAU,sBAAsB;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,qBAAqB;IAC7B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACtE,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzE;AAOD,eAAO,MAAM,eAAe,GAC1B,UAAU,MAAM,EAChB,eAAkC,sBAA2B,KAC5D,qBAyKF,CAAC"}