@droppii-org/chat-sdk 0.1.97 → 0.2.1

package/dist/components/compose/ComposeNewMessageModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAeA,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAyI7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAeA,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAwI7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/compose/ComposeNewMessageModal.js

@@ -56,6 +56,6 @@ const ComposeNewMessageModal = ({ open, onClose, }) => {
             setOpeningUserID(null);
         }
     };
-    return (_jsx(Modal, { title: step === "create-group" ? t("create_group.title") : t("compose.title"), open: open, onCancel: handleClose, afterClose: handleAfterClose, footer: null, centered: true, forceRender: true, width: step === "create-group" ? 720 : undefined, getContainer: false, children: step === "compose" ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Input, { size: "large", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }) }), _jsxs("button", { type: "button", className: "flex items-center gap-3 rounded-xl bg-primary-50 px-4 py-3.5 text-left transition-colors hover:bg-primary-100", onClick: () => setStep("create-group"), children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white", children: _jsx(Icon, { icon: "user-three-b", size: 22, className: "text-primary-400" }) }), _jsx("span", { className: "flex-1 text-base font-semibold text-gray-900", children: t("compose.create_group") }), _jsx(Icon, { icon: "angle-right-o", size: 18, className: "text-gray-400" })] }), !debouncedSearch && (_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: "shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("compose.recent_suggestions") }), _jsx("span", { className: "h-px flex-1 bg-gray-100" })] })), _jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("compose.no_member_found") })) : (accounts.map((account) => (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 border-b border-gray-50 px-1 py-3 transition-colors last:border-b-0 hover:bg-gray-50", onClick: () => handleOpenDirectMessage(account), children: [_jsx(Avatar, { src: account.avatar, size: 44, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }, account.userID)))) })] })) : (_jsx(CreateGroupForm, { onBack: () => setStep("compose"), onDone: handleClose })) }));
+    return (_jsx(Modal, { title: step === "create-group" ? t("create_group.title") : t("compose.title"), open: open, onCancel: handleClose, afterClose: handleAfterClose, footer: null, centered: true, forceRender: true, width: step === "create-group" ? 720 : undefined, getContainer: false, children: step === "compose" ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Input, { size: "large", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }) }), _jsxs("button", { type: "button", className: "flex items-center gap-3 rounded-xl bg-primary-50 px-4 py-3.5 text-left transition-colors hover:bg-primary-100", onClick: () => setStep("create-group"), children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white", children: _jsx(Icon, { icon: "user-three-b", size: 22, className: "text-primary-400" }) }), _jsx("span", { className: "flex-1 text-base font-semibold text-gray-900", children: t("compose.create_group") }), _jsx(Icon, { icon: "angle-right-o", size: 18, className: "text-gray-400" })] }), !debouncedSearch && (_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: "shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("compose.recent_suggestions") }), _jsx("span", { className: "h-px flex-1 bg-gray-100" })] })), _jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("compose.no_member_found") })) : (accounts.map((account) => (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 border-b border-gray-50 px-1 py-3 transition-colors last:border-b-0 hover:bg-[#f5f5f5]", onClick: () => handleOpenDirectMessage(account), children: [_jsx(Avatar, { src: account.avatar, size: 44, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }, account.userID)))) })] })) : (_jsx(CreateGroupForm, { onDone: handleClose })) }));
 };
 export default ComposeNewMessageModal;

package/dist/components/conversation/SwipeActionButton.d.ts

@@ -0,0 +1,11 @@
+export declare const SWIPE_ACTION_WIDTH = 76;
+export interface SwipeActionButtonProps {
+    icon: string;
+    label: string;
+    onClick: () => void;
+    className?: string;
+    testId?: string;
+}
+declare const SwipeActionButton: ({ icon, label, onClick, className, testId, }: SwipeActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SwipeActionButton;
+//# sourceMappingURL=SwipeActionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/SwipeActionButton.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,GAAI,8CAMxB,sBAAsB,4CAgBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/conversation/SwipeActionButton.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+export const SWIPE_ACTION_WIDTH = 76;
+const SwipeActionButton = ({ icon, label, onClick, className, testId, }) => (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("flex h-full shrink-0 flex-col items-center justify-center gap-1 p-2 text-white", className), style: { width: SWIPE_ACTION_WIDTH }, children: [_jsx(Icon, { icon: icon, size: 16 }), _jsx("span", { className: "text-center text-[10px] font-[510] leading-[1.6]", children: label })] }));
+export default SwipeActionButton;

package/dist/components/conversation/SwipeableRow.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface SwipeableRowProps {
+    children: ReactNode;
+    actions: (close: () => void) => ReactNode;
+    actionsWidth: number;
+    disabled?: boolean;
+}
+declare const SwipeableRow: ({ children, actions, actionsWidth, disabled, }: SwipeableRowProps) => import("react/jsx-runtime").JSX.Element;
+export default SwipeableRow;
+//# sourceMappingURL=SwipeableRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/SwipeableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAOnD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,gDAKnB,iBAAiB,4CA4FnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/conversation/SwipeableRow.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useDrag } from "@use-gesture/react";
+import clsx from "clsx";
+const OPEN_THRESHOLD_RATIO = 0.5;
+const DIRECTION_LOCK_DISTANCE = 8;
+const SwipeableRow = ({ children, actions, actionsWidth, disabled = false, }) => {
+    const [offset, setOffset] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const containerRef = useRef(null);
+    const shouldSuppressClickRef = useRef(false);
+    const close = () => setOffset(0);
+    useEffect(() => {
+        if (offset === 0)
+            return;
+        const handleOutsidePointerDown = (event) => {
+            const container = containerRef.current;
+            if (!container)
+                return;
+            if (container.contains(event.target))
+                return;
+            close();
+        };
+        document.addEventListener("pointerdown", handleOutsidePointerDown);
+        return () => document.removeEventListener("pointerdown", handleOutsidePointerDown);
+    }, [offset, close]);
+    const bind = useDrag(({ active, offset: [ox], last, tap }) => {
+        if (tap)
+            return;
+        setOffset(-ox);
+        if (active) {
+            setIsDragging(true);
+            shouldSuppressClickRef.current = true;
+            return;
+        }
+        setIsDragging(false);
+        if (last) {
+            setOffset((current) => current > actionsWidth * OPEN_THRESHOLD_RATIO ? actionsWidth : 0);
+        }
+    }, {
+        enabled: !disabled,
+        axis: "lock",
+        axisThreshold: { mouse: DIRECTION_LOCK_DISTANCE, touch: DIRECTION_LOCK_DISTANCE },
+        bounds: { left: -actionsWidth, right: 0 },
+        from: () => [-offset, 0],
+        filterTaps: true,
+    });
+    const isOpen = offset > 0;
+    const handleContentClickCapture = (event) => {
+        const wasDragging = shouldSuppressClickRef.current;
+        shouldSuppressClickRef.current = false;
+        if (!wasDragging && !isOpen)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (!wasDragging)
+            close();
+    };
+    return (_jsxs("div", Object.assign({ ref: containerRef }, bind(), { className: "relative w-full touch-pan-y overflow-hidden", children: [_jsx("div", { "aria-hidden": !isOpen, className: "absolute inset-y-0 right-0 flex", style: { width: actionsWidth }, children: actions(close) }), _jsx("div", { className: clsx("relative bg-white transition-transform duration-200 ease-out", isDragging && "select-none transition-none"), style: { transform: `translate3d(-${offset}px, 0, 0)` }, onClickCapture: handleContentClickCapture, children: children })] })));
+};
+export default SwipeableRow;

package/dist/components/conversation/ThreadCard.d.ts

@@ -8,7 +8,8 @@ export interface ThreadCardProps {
     isSelected?: boolean;
     onClick: () => void;
     testId?: string;
+    muteIndicator?: ReactNode;
 }
-declare const ThreadCard: ({ avatar, title, preview, time, unreadCount, isSelected, onClick, testId, }: ThreadCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThreadCard: ({ avatar, title, preview, time, unreadCount, isSelected, onClick, testId, muteIndicator, }: ThreadCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ThreadCard;
 //# sourceMappingURL=ThreadCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,GAAI,6EASjB,eAAe,4CA4CjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,GAAI,4FAUjB,eAAe,4CA6CjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/conversation/ThreadCard.js

@@ -7,9 +7,9 @@ const UnreadBadge = ({ count }) => {
     const isWide = label.length > 1;
     return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-gradient-danger-light px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), children: label }));
 };
-const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, }) => {
+const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, muteIndicator, }) => {
     const hasUnread = unreadCount > 0;
-    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-gray-25 p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-chat-ring", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
+    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-gray-25 p-3 text-left transition-colors hover:bg-[#f5f5f5] focus:outline-none focus-visible:ring-2 focus-visible:ring-chat-ring", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), muteIndicator, time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
                                     ? "font-[510] text-black"
                                     : "font-normal tracking-[0.14px] text-gray-600"), children: preview }), hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
 };

package/dist/components/conversation-inbox/ConversationInboxItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationInboxItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAYjE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC/C;AAQD,QAAA,MAAM,qBAAqB,GAAI,mBAAmB,0BAA0B,4CA2C3E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ConversationInboxItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAkBjE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC/C;AAQD,QAAA,MAAM,qBAAqB,GAAI,mBAAmB,0BAA0B,4CA4E3E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/conversation-inbox/ConversationInboxItem.js

@@ -6,9 +6,15 @@ import useAuthStore from "../../store/auth";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 import { resolvePeerBadgeLabel, resolveConversationDisplayName, } from "../../utils/conversation";
 import { useConversationAvatarUrl } from "../../hooks/conversation/useConversationAvatarUrl";
+import { useIsJoinedGroup } from "../../hooks/session/useIsJoinedGroup";
+import { isConversationMuted } from "../../hooks/session/useMuteConversation";
 import ThreadCard from "../../components/conversation/ThreadCard";
+import SwipeableRow from "../../components/conversation/SwipeableRow";
+import { SWIPE_ACTION_WIDTH } from "../../components/conversation/SwipeActionButton";
+import { Icon } from "../../components/icon";
 import ConversationPeerAvatar from "./ConversationPeerAvatar";
 import ConversationInboxTitle from "./ConversationInboxTitle";
+import ConversationMuteSwipeAction from "./ConversationMuteSwipeAction";
 const formatLatestMessageTime = (sendTime) => {
     if (!sendTime)
         return "";
@@ -26,6 +32,13 @@ const ConversationInboxItem = ({ item, onClick }) => {
     const latestMessagePreview = parseLatestMessage(item.latestMsg, currentUserId, tCommon, { peerType: item.peerType, showName: item.showName });
     const latestMessageTime = formatLatestMessageTime(item.latestMsgSendTime || null);
     const unreadCount = (_a = item.unreadCount) !== null && _a !== void 0 ? _a : 0;
-    return (_jsx(ThreadCard, { testId: "conversation-inbox-thread-card", onClick: () => onClick(item), unreadCount: unreadCount, time: latestMessageTime, preview: latestMessagePreview, avatar: _jsx(ConversationPeerAvatar, { peerType: item.peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), title: _jsx(ConversationInboxTitle, { peerType: item.peerType, displayName: displayName, hasUnread: unreadCount > 0 }) }));
+    const isMuted = isConversationMuted(item.recvMsgOpt);
+    const { isJoined } = useIsJoinedGroup(item.groupID);
+    const hasLostGroupAccess = Boolean(item.groupID) && isJoined !== true;
+    const threadCard = (_jsx(ThreadCard, { testId: "conversation-inbox-thread-card", onClick: () => onClick(item), unreadCount: unreadCount, time: latestMessageTime, preview: latestMessagePreview, muteIndicator: isMuted ? (_jsx(Icon, { icon: "bell-off-b", size: 16, "aria-label": t("thread_card.mute.muted_icon_label"), className: "shrink-0 text-gray-400" })) : null, avatar: _jsx(ConversationPeerAvatar, { peerType: item.peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), title: _jsx(ConversationInboxTitle, { peerType: item.peerType, displayName: displayName, hasUnread: unreadCount > 0 }) }));
+    if (hasLostGroupAccess) {
+        return threadCard;
+    }
+    return (_jsx(SwipeableRow, { actionsWidth: SWIPE_ACTION_WIDTH, actions: (closeSwipe) => (_jsx(ConversationMuteSwipeAction, { conversationID: item.conversationID, isMuted: isMuted, onClose: closeSwipe })), children: threadCard }));
 };
 export default ConversationInboxItem;

package/dist/components/conversation-inbox/ConversationMuteSwipeAction.d.ts

@@ -0,0 +1,8 @@
+export interface ConversationMuteSwipeActionProps {
+    conversationID: string;
+    isMuted: boolean;
+    onClose: () => void;
+}
+declare const ConversationMuteSwipeAction: ({ conversationID, isMuted, onClose, }: ConversationMuteSwipeActionProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationMuteSwipeAction;
+//# sourceMappingURL=ConversationMuteSwipeAction.d.ts.map

package/dist/components/conversation-inbox/ConversationMuteSwipeAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationMuteSwipeAction.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationMuteSwipeAction.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,gCAAgC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,2BAA2B,GAAI,uCAIlC,gCAAgC,4CAwDlC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/conversation-inbox/ConversationMuteSwipeAction.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SwipeActionButton from "../../components/conversation/SwipeActionButton";
+import { useMuteConversation } from "../../hooks/session/useMuteConversation";
+import MuteConversationConfirmModal from "./MuteConversationConfirmModal";
+const ConversationMuteSwipeAction = ({ conversationID, isMuted, onClose, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { muteConversation, unmuteConversation, isPending } = useMuteConversation();
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const stopPropagation = (event) => {
+        event.stopPropagation();
+    };
+    const handleClick = () => {
+        onClose();
+        if (isMuted) {
+            unmuteConversation(conversationID);
+            return;
+        }
+        setIsConfirmOpen(true);
+    };
+    const handleConfirmMute = () => {
+        setIsConfirmOpen(false);
+        muteConversation(conversationID);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(SwipeActionButton, { testId: "conversation-inbox-mute-action", icon: isMuted ? "bell-b" : "bell-off-b", label: t(isMuted
+                    ? "thread_card.mute.unmute_action"
+                    : "thread_card.mute.mute_action"), onClick: handleClick, className: "bg-gray-400" }), _jsx("span", { role: "presentation", onPointerDown: stopPropagation, onPointerMove: stopPropagation, onPointerUp: stopPropagation, onClick: stopPropagation, children: _jsx(MuteConversationConfirmModal, { open: isConfirmOpen, loading: isPending, onCancel: () => setIsConfirmOpen(false), onConfirm: handleConfirmMute }) })] }));
+};
+export default ConversationMuteSwipeAction;

package/dist/components/conversation-inbox/MuteConversationConfirmModal.d.ts

@@ -0,0 +1,9 @@
+export interface MuteConversationConfirmModalProps {
+    open: boolean;
+    loading: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+declare const MuteConversationConfirmModal: ({ open, loading, onCancel, onConfirm, }: MuteConversationConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+export default MuteConversationConfirmModal;
+//# sourceMappingURL=MuteConversationConfirmModal.d.ts.map

package/dist/components/conversation-inbox/MuteConversationConfirmModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuteConversationConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/MuteConversationConfirmModal.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,4BAA4B,GAAI,yCAKnC,iCAAiC,4CAmEnC,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/components/conversation-inbox/MuteConversationConfirmModal.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button } from "antd";
+import { Trans, useTranslation } from "react-i18next";
+import { images } from "../../constants/images";
+const MuteConversationConfirmModal = ({ open, loading, onCancel, onConfirm, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx(Modal, { open: open, onCancel: onCancel, footer: null, closable: false, centered: true, width: 400, maskClosable: !loading, keyboard: !loading, styles: {
+            content: { padding: 0, overflow: "hidden" },
+            body: { padding: 0 },
+        }, children: _jsxs("div", { role: "alertdialog", "aria-label": t("thread_card.mute.confirm_title"), className: "flex flex-col", children: [_jsx("div", { className: "border-b border-gray-25 p-4", children: _jsx("p", { className: "text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_card.mute.confirm_title") }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: _jsx("img", { src: images.muteNotificationWarning, alt: "", "aria-hidden": "true", className: "h-[144px] w-[120px]" }) }), _jsx("p", { className: "px-4 pb-4 text-[16px] leading-[1.6] text-gray-900", children: _jsx(Trans, { t: t, i18nKey: "thread_card.mute.confirm_desc", components: { bold: _jsx("strong", { className: "font-bold" }) } }) }), _jsx("div", { className: "border-t border-gray-25" }), _jsxs("div", { className: "flex gap-2 p-4", children: [_jsx(Button, { className: "h-12 flex-1 !rounded-lg !border-gray-25 !bg-gray-25 !text-[16px] !font-medium !text-gray-900", onClick: onCancel, disabled: loading, children: t("thread_card.mute.confirm_secondary") }), _jsx(Button, { type: "primary", className: "h-12 flex-1 !rounded-lg !border-primary-400 !bg-primary-400 !text-[16px] !font-medium !text-white hover:!border-primary-300 hover:!bg-primary-300", onClick: onConfirm, loading: loading, children: t("thread_card.mute.confirm_primary") })] })] }) }));
+};
+export default MuteConversationConfirmModal;

package/dist/components/conversation-inbox/index.d.ts

@@ -7,4 +7,8 @@ export { default as ConversationInboxItem } from "./ConversationInboxItem";
 export type { ConversationInboxItemProps } from "./ConversationInboxItem";
 export { default as ConversationInboxList } from "./ConversationInboxList";
 export type { ConversationInboxListProps } from "./ConversationInboxList";
+export { default as ConversationMuteSwipeAction } from "./ConversationMuteSwipeAction";
+export type { ConversationMuteSwipeActionProps } from "./ConversationMuteSwipeAction";
+export { default as MuteConversationConfirmModal } from "./MuteConversationConfirmModal";
+export type { MuteConversationConfirmModalProps } from "./MuteConversationConfirmModal";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/conversation-inbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AACzF,YAAY,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/components/conversation-inbox/index.js

@@ -3,3 +3,5 @@ export { default as ConversationPeerAvatar } from "./ConversationPeerAvatar";
 export { default as ConversationInboxTitle } from "./ConversationInboxTitle";
 export { default as ConversationInboxItem } from "./ConversationInboxItem";
 export { default as ConversationInboxList } from "./ConversationInboxList";
+export { default as ConversationMuteSwipeAction } from "./ConversationMuteSwipeAction";
+export { default as MuteConversationConfirmModal } from "./MuteConversationConfirmModal";

package/dist/components/group/AddMemberModal.d.ts

@@ -0,0 +1,9 @@
+interface AddMemberModalProps {
+    open: boolean;
+    groupID: string;
+    existingMemberIDs: string[];
+    onClose: () => void;
+}
+declare const AddMemberModal: ({ open, groupID, existingMemberIDs, onClose, }: AddMemberModalProps) => import("react/jsx-runtime").JSX.Element;
+export default AddMemberModal;
+//# sourceMappingURL=AddMemberModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddMemberModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AddMemberModal.tsx"],"names":[],"mappings":"AAYA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,gDAKrB,mBAAmB,4CA2LrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/group/AddMemberModal.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDebounce } from "ahooks";
+import { Avatar, Button, Empty, Input, Modal, Spin, message } from "antd";
+import clsx from "clsx";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { useEligibleAccountsForGroup } from "../../hooks/group/useEligibleAccountsForGroup";
+import { useAddGroupMember } from "../../hooks/group/useAddGroupMember";
+const AddMemberModal = ({ open, groupID, existingMemberIDs, onClose, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation();
+    const [search, setSearch] = useState("");
+    const [selectedMembers, setSelectedMembers] = useState([]);
+    const debouncedSearch = useDebounce(search, { wait: 300 });
+    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useEligibleAccountsForGroup(debouncedSearch, existingMemberIDs, open);
+    const { mutateAsync: addGroupMember, isPending: isSubmitting } = useAddGroupMember();
+    const selectedIds = new Set(selectedMembers.map((member) => member.userID));
+    const toggleMember = (account) => {
+        if (selectedIds.has(account.userID)) {
+            setSelectedMembers((prev) => prev.filter((member) => member.userID !== account.userID));
+            return;
+        }
+        setSelectedMembers((prev) => [...prev, account]);
+    };
+    const handleRemoveMember = (userID) => {
+        setSelectedMembers((prev) => prev.filter((member) => member.userID !== userID));
+    };
+    const handleClearAll = () => {
+        setSelectedMembers([]);
+    };
+    const handleClose = () => {
+        setSearch("");
+        setSelectedMembers([]);
+        onClose();
+    };
+    const handleListScroll = (event) => {
+        if (!hasNextPage || isFetchingNextPage)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        if (scrollHeight - scrollTop - clientHeight < 80) {
+            void fetchNextPage();
+        }
+    };
+    const handleSubmit = async () => {
+        var _a, _b;
+        if (!groupID || selectedMembers.length === 0)
+            return;
+        try {
+            await addGroupMember({
+                groupID,
+                userIDList: selectedMembers.map((member) => member.userID),
+            });
+            message.success(t("add_member.add_member_success"));
+            handleClose();
+        }
+        catch (error) {
+            const errorMessage = ((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || t("add_member.add_member_failed");
+            message.error(errorMessage);
+        }
+    };
+    return (_jsx(Modal, { centered: true, open: open, onCancel: handleClose, footer: null, title: t("add_member.title"), getContainer: false, children: _jsxs("div", { className: "flex flex-col gap-3 pt-2", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-primary-400 hover:text-primary-500 hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), selectedMembers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedMembers.map((member) => (_jsxs("span", { className: "flex items-center gap-1.5 rounded-full bg-gray-100 pl-1 pr-2 py-1", children: [_jsx(Avatar, { src: member.avatar, size: 20, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "max-w-[120px] truncate text-sm text-gray-900", children: member.displayName }), _jsx(Icon, { icon: "close-b", size: 12, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID))) })), _jsx("div", { className: "max-h-72 overflow-y-auto", onScroll: handleListScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs(_Fragment, { children: [accounts.map((account) => {
+                                const isSelected = selectedIds.has(account.userID);
+                                return (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors duration-150 hover:bg-[#f5f5f5]", onClick: () => toggleMember(account), children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
+                                                ? "border-primary-400 bg-primary-400"
+                                                : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }, account.userID));
+                            }), isFetchingNextPage && (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { onClick: handleClose, children: tCommon("cancel") }), _jsx(Button, { type: "primary", disabled: selectedMembers.length === 0, loading: isSubmitting, onClick: handleSubmit, children: t("add_member.confirm") })] })] }) }));
+};
+export default AddMemberModal;

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

@@ -0,0 +1,9 @@
+interface AdminPermissionModalProps {
+    open: boolean;
+    groupID: string;
+    onClose: () => void;
+    inline?: boolean;
+}
+declare const AdminPermissionModal: ({ open, groupID, onClose, inline, }: AdminPermissionModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AdminPermissionModal;
+//# sourceMappingURL=AdminPermissionModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdminPermissionModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AdminPermissionModal.tsx"],"names":[],"mappings":"AAYA,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD,QAAA,MAAM,oBAAoB,GAAI,qCAK3B,yBAAyB,mDA0J3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/group/AdminPermissionModal.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ConfigProvider, Modal, Switch, message } from "antd";
+import { useTranslation } from "react-i18next";
+import { useGroupPermission } from "../../hooks/group/useGroupPermission";
+import { Icon } from "../../components/icon";
+import { PERMISSION_SWITCH_COLOR } from "../../constants";
+import useGroupPermissionOverridesStore from "../../store/groupPermissionOverrides";
+// Mocked config UI (DROPPII-30248 follow-up, "Configure Admin Permissions")
+// — applies to the whole Admin role in the group, not a per-member override
+// (confirmed with PO). No BE persistence yet, committed to the in-memory
+// override store on "Lưu" only.
+const AdminPermissionModal = ({ open, groupID, onClose, inline = false, }) => {
+    const { t } = useTranslation();
+    const permissions = useGroupPermission(groupID);
+    const setAdminOverrides = useGroupPermissionOverridesStore((state) => state.setAdminOverrides);
+    const [isSaving, setIsSaving] = useState(false);
+    const [pending, setPending] = useState({
+        sendMessage: permissions.sendMessage,
+        pinMessage: permissions.pinMessage,
+        viewMemberInformation: permissions.viewMemberInformation,
+        addMember: permissions.addMember,
+        removeMember: permissions.removeMember,
+        updateGroupInfo: permissions.updateGroupName,
+    });
+    useEffect(() => {
+        if (!open)
+            return;
+        setPending({
+            sendMessage: permissions.sendMessage,
+            pinMessage: permissions.pinMessage,
+            viewMemberInformation: permissions.viewMemberInformation,
+            addMember: permissions.addMember,
+            removeMember: permissions.removeMember,
+            updateGroupInfo: permissions.updateGroupName,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const hasChanges = pending.sendMessage !== permissions.sendMessage ||
+        pending.pinMessage !== permissions.pinMessage ||
+        pending.viewMemberInformation !== permissions.viewMemberInformation ||
+        pending.addMember !== permissions.addMember ||
+        pending.removeMember !== permissions.removeMember ||
+        pending.updateGroupInfo !== permissions.updateGroupName;
+    const handleSave = async () => {
+        if (!groupID)
+            return;
+        setIsSaving(true);
+        setAdminOverrides(groupID, pending);
+        message.success(t("update_admin_permissions_success"));
+        setIsSaving(false);
+        onClose();
+    };
+    const rows = (_jsx(ConfigProvider, { theme: { token: { colorPrimary: PERMISSION_SWITCH_COLOR } }, 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 }))) })] })] }) }));
+    if (inline) {
+        if (!open)
+            return null;
+        return (_jsxs("div", { className: "absolute inset-0 bg-white flex flex-col z-10", children: [_jsxs("div", { className: "flex w-full items-center border-b border-gray-100 p-2", children: [_jsx("button", { type: "button", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("admin_permission_settings") })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [rows, _jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full border border-gray-300 text-gray-700 text-sm font-medium", onClick: onClose, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full bg-primary-400 text-white text-sm font-medium disabled:bg-gray-200 disabled:text-gray-400", disabled: !hasChanges || isSaving, onClick: handleSave, children: t("save") })] })] })] }));
+    }
+    return (_jsx(Modal, { centered: true, open: open, onOk: handleSave, onCancel: onClose, title: t("admin_permission_settings"), okText: t("save"), cancelText: t("cancel"), confirmLoading: isSaving, okButtonProps: { disabled: !hasChanges }, getContainer: false, children: _jsx("div", { className: "mt-2", children: rows }) }));
+};
+export default AdminPermissionModal;

package/dist/components/group/CreateGroupForm.d.ts

@@ -1,7 +1,6 @@
 interface CreateGroupFormProps {
-    onBack: () => void;
     onDone: () => void;
 }
-declare const CreateGroupForm: ({ onBack, onDone }: CreateGroupFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const CreateGroupForm: ({ onDone }: CreateGroupFormProps) => import("react/jsx-runtime").JSX.Element;
 export default CreateGroupForm;
 //# sourceMappingURL=CreateGroupForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreateGroupForm.d.ts","sourceRoot":"","sources":["../../../src/components/group/CreateGroupForm.tsx"],"names":[],"mappings":"AAcA,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,oBAAoB,oBAAoB,4CA8KhE,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CreateGroupForm.d.ts","sourceRoot":"","sources":["../../../src/components/group/CreateGroupForm.tsx"],"names":[],"mappings":"AAcA,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,YAAY,oBAAoB,4CAqKxD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/group/CreateGroupForm.js

@@ -8,7 +8,7 @@ import { Icon } from "../../components/icon";
 import { useCreateGroup } from "../../hooks/group/useCreateGroup";
 import GroupMemberPicker from "./GroupMemberPicker";
 const GROUP_NAME_MAX_LENGTH = 255;
-const CreateGroupForm = ({ onBack, onDone }) => {
+const CreateGroupForm = ({ onDone }) => {
     const { t } = useTranslation("conversation-inbox");
     const { createGroup } = useCreateGroup();
     const [groupName, setGroupName] = useState("");
@@ -63,12 +63,12 @@ const CreateGroupForm = ({ onBack, onDone }) => {
             description: t("create_group.privacy_public_desc"),
         },
     ], [t]);
-    return (_jsxs("div", { className: "flex max-h-[70vh] flex-col", children: [_jsxs("button", { type: "button", onClick: onBack, className: "mb-3 flex w-fit items-center gap-1 text-sm text-gray-500 hover:text-gray-700", children: [_jsx(Icon, { icon: "angle-left-o", size: 16 }), t("create_group.back")] }), _jsxs("div", { className: "flex flex-col overflow-y-auto pr-1", children: [_jsxs("div", { className: "flex items-center gap-4 pb-6", children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg", showUploadList: false, beforeUpload: handleAvatarSelect, children: _jsxs("div", { className: "relative flex h-20 w-20 shrink-0 cursor-pointer items-center justify-center rounded-2xl bg-primary-50", children: [avatarPreviewUrl ? (
+    return (_jsxs("div", { className: "flex max-h-[70vh] flex-col", children: [_jsxs("div", { className: "flex flex-col overflow-y-auto pr-1", children: [_jsxs("div", { className: "flex items-center gap-4 py-6", children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg", showUploadList: false, beforeUpload: handleAvatarSelect, children: _jsxs("div", { className: "relative flex h-20 w-20 shrink-0 cursor-pointer items-center justify-center rounded-2xl bg-primary-50", children: [avatarPreviewUrl ? (
                                         // eslint-disable-next-line @next/next/no-img-element
-                                        _jsx("img", { src: avatarPreviewUrl, alt: "", className: "h-full w-full rounded-2xl object-cover" })) : (_jsx(Icon, { icon: "user-three-b", size: 32, className: "text-primary-400" })), _jsx("span", { className: "absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-gray-500", children: _jsx(Icon, { icon: "camera-b", size: 14, className: "text-white" }) })] }) }), _jsx(Input, { size: "large", value: groupName, onChange: (event) => setGroupName(event.target.value.slice(0, GROUP_NAME_MAX_LENGTH)), maxLength: GROUP_NAME_MAX_LENGTH, placeholder: t("create_group.name_placeholder"), className: "flex-1 text-base" })] }), _jsxs("div", { className: "flex flex-col gap-3 border-t border-gray-100 py-6", children: [_jsx("span", { className: "text-base font-semibold text-gray-900", children: t("create_group.privacy_label") }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: privacyOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => setIsPublic(option.value), className: clsx("rounded-xl border-2 p-4 text-left transition-colors", isPublic === option.value
+                                        _jsx("img", { src: avatarPreviewUrl, alt: "", className: "h-full w-full rounded-2xl object-cover" })) : (_jsx(Icon, { icon: "user-three-b", size: 32, className: "text-primary-400" })), _jsx("span", { className: "absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-gray-500", children: _jsx(Icon, { icon: "camera-b", size: 14, className: "text-white" }) })] }) }), _jsx(Input, { size: "large", value: groupName, onChange: (event) => setGroupName(event.target.value.slice(0, GROUP_NAME_MAX_LENGTH)), maxLength: GROUP_NAME_MAX_LENGTH, placeholder: t("create_group.name_placeholder"), className: "flex-1 text-base" })] }), _jsxs("div", { className: "flex flex-col gap-3 border-t border-gray-100 py-6", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("create_group.privacy_label") }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: privacyOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => setIsPublic(option.value), className: clsx("rounded-xl border-2 p-4 text-left transition-colors", isPublic === option.value
                                         ? "border-primary-400 bg-primary-50"
                                         : "border-gray-200 bg-white"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: option.icon, size: 18, className: isPublic === option.value
                                                         ? "text-primary-400"
-                                                        : "text-gray-400" }), _jsx("span", { className: "text-base font-semibold text-gray-900", children: option.label })] }), _jsx("p", { className: "mt-1.5 text-sm text-gray-500", children: option.description })] }, String(option.value)))) })] }), _jsx("div", { className: "border-t border-gray-100 pt-6", children: _jsx(GroupMemberPicker, { selectedMembers: selectedMembers, onChangeSelectedMembers: setSelectedMembers }) })] }), _jsxs("div", { className: "flex shrink-0 justify-end gap-2 pt-4", children: [_jsx(Button, { onClick: onDone, children: t("create_group.cancel") }), _jsx(Button, { type: "primary", disabled: !canSubmit, loading: isSubmitting, onClick: handleSubmit, children: t("create_group.submit") })] })] }));
+                                                        : "text-gray-400" }), _jsx("span", { className: "text-base font-semibold text-gray-900", children: option.label })] }), _jsx("p", { className: "mt-2 text-sm text-gray-500", children: option.description })] }, String(option.value)))) })] }), _jsx("div", { className: "border-t border-gray-100 py-6", children: _jsx(GroupMemberPicker, { selectedMembers: selectedMembers, onChangeSelectedMembers: setSelectedMembers }) })] }), _jsxs("div", { className: "flex shrink-0 justify-end gap-2 pt-4", children: [_jsx(Button, { onClick: onDone, children: t("create_group.cancel") }), _jsx(Button, { type: "primary", disabled: !canSubmit, loading: isSubmitting, onClick: handleSubmit, children: t("create_group.submit") })] })] }));
 };
 export default CreateGroupForm;

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

@@ -1 +1 @@
-{"version":3,"file":"GroupMemberPicker.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupMemberPicker.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,UAAU,sBAAsB;IAC9B,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,uBAAuB,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnE;AAED,QAAA,MAAM,iBAAiB,GAAI,+CAGxB,sBAAsB,4CAoIxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"GroupMemberPicker.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupMemberPicker.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,UAAU,sBAAsB;IAC9B,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,uBAAuB,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACnE;AAED,QAAA,MAAM,iBAAiB,GAAI,+CAGxB,sBAAsB,4CAoJxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/group/GroupMemberPicker.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDebounce } from "ahooks";
 import { Avatar, Empty, Input, Spin } from "antd";
 import clsx from "clsx";
@@ -11,7 +11,15 @@ const GroupMemberPicker = ({ selectedMembers, onChangeSelectedMembers, }) => {
     const { t } = useTranslation("conversation-inbox");
     const [search, setSearch] = useState("");
     const debouncedSearch = useDebounce(search, { wait: 300 });
-    const { accounts, isLoading } = useEligibleAccounts(debouncedSearch);
+    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useEligibleAccounts(debouncedSearch);
+    const handleListScroll = (event) => {
+        if (!hasNextPage || isFetchingNextPage)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        if (scrollHeight - scrollTop - clientHeight < 80) {
+            void fetchNextPage();
+        }
+    };
     const selectedIds = new Set(selectedMembers.map((member) => member.userID));
     const toggleMember = (account) => {
         if (selectedIds.has(account.userID)) {
@@ -26,11 +34,11 @@ const GroupMemberPicker = ({ selectedMembers, onChangeSelectedMembers, }) => {
     const handleClearAll = () => {
         onChangeSelectedMembers([]);
     };
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (accounts.map((account) => {
-                            const isSelected = selectedIds.has(account.userID);
-                            return (_jsxs("div", { className: clsx("flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors", isSelected ? "bg-primary-50" : "hover:bg-gray-50"), onClick: () => toggleMember(account), children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
-                                            ? "border-primary-400 bg-primary-400"
-                                            : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }, account.userID));
-                        })) })] }), _jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-primary-400 hover:text-primary-500 hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: selectedMembers.length === 0 ? (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center gap-2 text-center", children: [_jsx(Icon, { icon: "user-three-b", size: 28, className: "text-gray-300" }), _jsx("span", { className: "text-sm text-gray-400", children: t("create_group.no_member_selected") })] })) : (selectedMembers.map((member) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-3", children: [_jsx(Avatar, { src: member.avatar, size: 40, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: member.displayName }), _jsx(Icon, { icon: "close-b", size: 14, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID)))) })] })] }));
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsx("div", { className: "max-h-64 overflow-y-auto", onScroll: handleListScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs(_Fragment, { children: [accounts.map((account) => {
+                                    const isSelected = selectedIds.has(account.userID);
+                                    return (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors duration-150 hover:bg-[#f5f5f5]", onClick: () => toggleMember(account), children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
+                                                    ? "border-primary-400 bg-primary-400"
+                                                    : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }, account.userID));
+                                }), isFetchingNextPage && (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })) })] }), _jsxs("div", { className: "flex flex-col gap-2 rounded-xl border border-gray-200 p-3", children: [_jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-primary-400 hover:text-primary-500 hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: selectedMembers.length === 0 ? (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center gap-2 text-center", children: [_jsx(Icon, { icon: "user-three-b", size: 28, className: "text-gray-300" }), _jsx("span", { className: "text-sm text-gray-400", children: t("create_group.no_member_selected") })] })) : (selectedMembers.map((member) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-3", children: [_jsx(Avatar, { src: member.avatar, size: 40, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: member.displayName }), _jsx(Icon, { icon: "close-b", size: 14, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID)))) })] })] }));
 };
 export default GroupMemberPicker;