@droppii-org/chat-sdk 0.1.96 → 0.2.0

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

@@ -0,0 +1,7 @@
+interface ComposeNewMessageModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare const ComposeNewMessageModal: ({ open, onClose, }: ComposeNewMessageModalProps) => import("react/jsx-runtime").JSX.Element;
+export default ComposeNewMessageModal;
+//# sourceMappingURL=ComposeNewMessageModal.d.ts.map

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

@@ -0,0 +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,4CAwI7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/compose/ComposeNewMessageModal.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDebounce } from "ahooks";
+import { Avatar, Empty, Input, Modal, Spin } from "antd";
+import { useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { SessionType } from "@droppii-org/wasm-client-sdk";
+import { Icon } from "../../components/icon";
+import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
+import { DChatSDK } from "../../constants/sdk";
+import useConversationStore from "../../store/conversation";
+import CreateGroupForm from "../../components/group/CreateGroupForm";
+const ComposeNewMessageModal = ({ open, onClose, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const [step, setStep] = useState("compose");
+    const [search, setSearch] = useState("");
+    const [openingUserID, setOpeningUserID] = useState(null);
+    const debouncedSearch = useDebounce(search, { wait: 300 });
+    const { accounts, isLoading } = useEligibleAccounts(debouncedSearch, open);
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const handleClose = () => {
+        setSearch("");
+        setStep("compose");
+        onClose();
+    };
+    const handleAfterClose = () => {
+        // Reset only after the close animation finishes so the outgoing
+        // content doesn't visibly swap mid-transition.
+        setStep("compose");
+    };
+    const handleOpenDirectMessage = async (account) => {
+        if (openingUserID)
+            return;
+        setOpeningUserID(account.userID);
+        try {
+            const { data: conversation } = await DChatSDK.getOneConversation({
+                sourceID: account.userID,
+                sessionType: SessionType.Single,
+            });
+            setConversationData(conversation);
+            setSelectedConversationId(conversation.conversationID);
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.set("threadId", conversation.conversationID);
+            newSearchParams.delete("userId");
+            newSearchParams.delete("groupId");
+            newSearchParams.delete("botId");
+            router.push(`${pathname}?${newSearchParams.toString()}`);
+            handleClose();
+        }
+        finally {
+            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-[#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/ConversationByGroupItem.d.ts

@@ -0,0 +1,7 @@
+import { GroupItem } from "@droppii-org/wasm-client-sdk";
+interface ConversationByGroupItemProps {
+    group: GroupItem;
+}
+declare const ConversationByGroupItem: ({ group }: ConversationByGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationByGroupItem;
+//# sourceMappingURL=ConversationByGroupItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAe,MAAM,8BAA8B,CAAC;AAMtE,UAAU,4BAA4B;IACpC,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,uBAAuB,GAAI,WAAW,4BAA4B,4CAiEvE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation/ConversationByGroupItem.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Avatar } from "antd";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { SessionType } from "@droppii-org/wasm-client-sdk";
+import useConversationStore from "../../store/conversation";
+import { DChatSDK } from "../../constants/sdk";
+import { formatTimestamp } from "../../utils/common";
+import ThreadCard from "./ThreadCard";
+const ConversationByGroupItem = ({ group }) => {
+    var _a;
+    const { t } = useTranslation();
+    const [isOpening, setIsOpening] = useState(false);
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const updateConversationList = useConversationStore((state) => state.updateConversationList);
+    const isSelected = useConversationStore((state) => state.selectedSourceId === group.groupID);
+    const handleClick = async () => {
+        if (isOpening)
+            return;
+        setIsOpening(true);
+        try {
+            const { data: conversation } = await DChatSDK.getOneConversation({
+                sourceID: group.groupID,
+                sessionType: SessionType.Group,
+            });
+            setConversationData(conversation);
+            updateConversationList([conversation], "filter");
+            setSelectedConversationId(conversation.conversationID);
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.set("threadId", conversation.conversationID);
+            newSearchParams.delete("userId");
+            newSearchParams.delete("groupId");
+            newSearchParams.delete("botId");
+            router.push(`${pathname}?${newSearchParams.toString()}`);
+        }
+        finally {
+            setIsOpening(false);
+        }
+    };
+    return (_jsx(ThreadCard, { onClick: handleClick, isSelected: isSelected, preview: t("member_count", { count: group.memberCount }), time: group.createTime
+            ? formatTimestamp(group.createTime, { hasTime: true })
+            : undefined, avatar: _jsx(Avatar, { size: 48, src: group.faceURL, children: ((_a = group.groupName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "G" }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: group.groupName }) }));
+};
+export default ConversationByGroupItem;

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

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,oBAAoB,+CAgNzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,oBAAoB,+CAwRzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -11,18 +11,22 @@ import SearchConversation from "../../components/search-conversation";
 import useSessionStore from "../../store/session";
 import InfiniteScroll from "react-infinite-scroll-component";
 import ConversationBySessionItem from "./ConversationBySessionItem";
+import ConversationByGroupItem from "./ConversationByGroupItem";
 import { useGetSession } from "../../hooks/session/useGetSession";
 import { useSortedSessions } from "../../hooks/session/useSortedSessions";
 import { useSessionLatestPreview } from "../../hooks/session/useSessionLatestPreview";
 import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionSummary";
+import { useJoinedGroups } from "../../hooks/group/useJoinedGroups";
 import { DChatSDK } from "../../constants/sdk";
 import emitter from "../../utils/events";
-import { getFilterConfig } from "../../components/session/sessionMenuItems";
+import { ALL_GROUPS_KEY, getFilterConfig, } from "../../components/session/sessionMenuItems";
+import ComposeNewMessageModal from "../../components/compose/ComposeNewMessageModal";
 const DeskConversationList = () => {
     var _a, _b;
     const searchInputRef = useRef(null);
     const { t } = useTranslation();
     const [search, setSearch] = useState("");
+    const [isComposeOpen, setIsComposeOpen] = useState(false);
     const [showSearch, { setTrue: setShowSearchTrue, setFalse: setShowSearchFalse },] = useBoolean(false);
     const searchParams = useSearchParams();
     const setConversationData = useConversationStore((state) => state.setConversationData);
@@ -30,11 +34,16 @@ const DeskConversationList = () => {
     const conversationList = useConversationStore((state) => state.conversationList);
     const updateConversationList = useConversationStore((state) => state.updateConversationList);
     const filterSummary = useSessionStore((state) => state.filterSummary);
+    const viewMode = useSessionStore((state) => state.viewMode);
+    const isAllGroupsView = viewMode === "allGroups";
     const { data: teamSummaries } = useGetTeamSessionSummary();
-    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, } = useGetSession({ filter: filterSummary });
+    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, } = useGetSession({ filter: filterSummary, options: { isEnabled: !isAllGroupsView } });
+    const { groups: joinedGroups, fetchNextPage: fetchNextGroupsPage, hasNextPage: hasNextGroupsPage, isLoading: isJoinedGroupsLoading, } = useJoinedGroups({ enabled: isAllGroupsView });
     const latestPreviewMap = useSessionLatestPreview(rawSessions);
     const sessions = useSortedSessions(rawSessions, latestPreviewMap);
-    const currentFilterKey = filterSummary.status || filterSummary.tag || "";
+    const currentFilterKey = isAllGroupsView
+        ? ALL_GROUPS_KEY
+        : filterSummary.status || filterSummary.tag || "";
     const filterConfig = getFilterConfig(currentFilterKey);
     const pathName = filterSummary.teamId
         ? ((_a = teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.find((team) => team.teamId === filterSummary.teamId)) === null || _a === void 0 ? void 0 : _a.teamName) || ""
@@ -91,14 +100,14 @@ const DeskConversationList = () => {
                                         setShowSearchTrue();
                                     }
                                     setSearch(e.target.value);
-                                }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch && (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] }), _jsxs("div", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] }))] })] }), _jsxs("div", { id: "scrollableConversationsDiv", style: {
+                                }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch ? (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) })) : (_jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: () => setIsComposeOpen(true), variant: "outlined", className: "p-0 w-[36px] h-[36px] shrink-0 text-gray-500", children: _jsx(Icon, { icon: "edit-b", size: 20 }) }))] }), _jsxs("div", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), isAllGroupsView ? (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: "user-three-o", size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t("all_groups") })] })) : (filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] })))] })] }), _jsxs("div", { id: "scrollableConversationsDiv", style: {
                     height: "100%",
                     overflow: showSearch ? "hidden" : "auto",
                     position: "relative",
-                }, children: [_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: (sessions === null || sessions === void 0 ? void 0 : sessions.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_conversation") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId) }, session.conversationId)))) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
+                }, children: [isAllGroupsView ? (isJoinedGroupsLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spin, {}) })) : !(joinedGroups === null || joinedGroups === void 0 ? void 0 : joinedGroups.length) ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_conversation") }) })) : (_jsx(InfiniteScroll, { dataLength: joinedGroups.length, next: fetchNextGroupsPage, hasMore: !!hasNextGroupsPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: joinedGroups.map((group) => (_jsx(ConversationByGroupItem, { group: group }, group.groupID))) }))) : (_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: (sessions === null || sessions === void 0 ? void 0 : sessions.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_conversation") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId) }, session.conversationId)))) })), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
                             body: {
                                 padding: 0,
                             },
-                        }, getContainer: false, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] })] }));
+                        }, getContainer: false, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] }), _jsx(ComposeNewMessageModal, { open: isComposeOpen, onClose: () => setIsComposeOpen(false) })] }));
 };
 export default DeskConversationList;

package/dist/components/conversation/ThreadCard.js

@@ -9,7 +9,7 @@ const UnreadBadge = ({ count }) => {
 };
 const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, }) => {
     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 }), 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/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

@@ -0,0 +1,6 @@
+interface CreateGroupFormProps {
+    onDone: () => void;
+}
+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

@@ -0,0 +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;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,YAAY,oBAAoB,4CAqKxD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/group/CreateGroupForm.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Upload } from "antd";
+import clsx from "clsx";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { useCreateGroup } from "../../hooks/group/useCreateGroup";
+import GroupMemberPicker from "./GroupMemberPicker";
+const GROUP_NAME_MAX_LENGTH = 255;
+const CreateGroupForm = ({ onDone }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { createGroup } = useCreateGroup();
+    const [groupName, setGroupName] = useState("");
+    // AC-Privacy1: only set at creation time, not editable after — no need
+    // for an "update privacy" path anywhere else in this modal.
+    const [isPublic, setIsPublic] = useState(false);
+    const [avatarFile, setAvatarFile] = useState(null);
+    const [avatarPreviewUrl, setAvatarPreviewUrl] = useState("");
+    const [selectedMembers, setSelectedMembers] = useState([]);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const canSubmit = selectedMembers.length > 0 && !isSubmitting;
+    const handleAvatarSelect = (file) => {
+        // Local preview only — there's no dedicated avatar-upload endpoint yet.
+        // faceURL falls back to this object URL until BE provides one; group
+        // creation itself doesn't block on it (Q3/Q4-style non-block gap).
+        const previewUrl = URL.createObjectURL(file);
+        setAvatarPreviewUrl(previewUrl);
+        setAvatarFile({ uid: file.name, name: file.name });
+        return false;
+    };
+    const handleSubmit = async () => {
+        if (!canSubmit)
+            return;
+        setIsSubmitting(true);
+        try {
+            await createGroup({
+                groupName,
+                isPublic,
+                members: selectedMembers,
+                faceURL: avatarPreviewUrl,
+            });
+            onDone();
+        }
+        catch (_a) {
+            // Error already surfaced via message.error inside useCreateGroup.
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const privacyOptions = useMemo(() => [
+        {
+            value: false,
+            icon: "lock-b",
+            label: t("create_group.privacy_private"),
+            description: t("create_group.privacy_private_desc"),
+        },
+        {
+            value: true,
+            icon: "globe-b",
+            label: t("create_group.privacy_public"),
+            description: t("create_group.privacy_public_desc"),
+        },
+    ], [t]);
+    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-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-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

@@ -0,0 +1,8 @@
+import type { EligibleAccountItem } from "../../hooks/group/useEligibleAccounts";
+interface GroupMemberPickerProps {
+    selectedMembers: EligibleAccountItem[];
+    onChangeSelectedMembers: (members: EligibleAccountItem[]) => void;
+}
+declare const GroupMemberPicker: ({ selectedMembers, onChangeSelectedMembers, }: GroupMemberPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupMemberPicker;
+//# sourceMappingURL=GroupMemberPicker.d.ts.map

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

@@ -0,0 +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,4CAoJxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/group/GroupMemberPicker.js

@@ -0,0 +1,44 @@
+"use client";
+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";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
+const GroupMemberPicker = ({ selectedMembers, onChangeSelectedMembers, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, { wait: 300 });
+    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)) {
+            onChangeSelectedMembers(selectedMembers.filter((member) => member.userID !== account.userID));
+            return;
+        }
+        onChangeSelectedMembers([...selectedMembers, account]);
+    };
+    const handleRemoveMember = (userID) => {
+        onChangeSelectedMembers(selectedMembers.filter((member) => member.userID !== userID));
+    };
+    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", 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;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MemberPermissionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/group/MemberPermissionPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD,QAAA,MAAM,qBAAqB,GAAI,4BAA4B,0BAA0B,mDAqHpF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}