@droppii-org/chat-sdk 0.3.0 → 0.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAMxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CA2D9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAOxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CA8D9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation/ConversationByGroupItem.js

@@ -1,14 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar } from "antd";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useChatContext } from "../../context/ChatContext";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import ThreadCard from "./ThreadCard";
 const ConversationByGroupItem = ({ group, latestPreview, }) => {
-    var _a;
     const { t } = useTranslation();
     const user = useChatContext().user;
     const router = useRouter();
@@ -35,6 +34,6 @@ const ConversationByGroupItem = ({ group, latestPreview, }) => {
             showName: conversation.showName,
         }), time: latestMsgSendTime > 0
             ? formatTimestamp(latestMsgSendTime, { hasTime: true })
-            : undefined, avatar: _jsx(Avatar, { size: 48, src: conversation.faceURL, children: ((_a = conversation.showName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "G" }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: conversation.showName }) }));
+            : undefined, avatar: _jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: 48 }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: conversation.showName }) }));
 };
 export default ConversationByGroupItem;

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

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

package/dist/components/conversation/ConversationBySessionItem.js

@@ -7,6 +7,8 @@ import { Avatar } from "antd";
 import { useChatContext } from "../../context/ChatContext";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import { isGroupSession } from "../../utils/imCommon";
+import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import ThreadCard from "./ThreadCard";
 const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
     var _a;
@@ -43,6 +45,6 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
             showName: conversation.showName,
         }), time: latestMsgSendTime > 0
             ? formatTimestamp(latestMsgSendTime, { hasTime: true })
-            : undefined, avatar: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: displayName }) }));
+            : undefined, avatar: isGroupSession(conversation.conversationType) ? (_jsx(GroupCompositeAvatar, { groupID: conversation.groupID, faceURL: avatar, groupName: displayName, size: 48 })) : (_jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" })), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: displayName }) }));
 };
 export default ConversationBySessionItem;

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":"AA4BA,QAAA,MAAM,oBAAoB,+CA+RzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,oBAAoB,+CAgSzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -109,6 +109,6 @@ const DeskConversationList = () => {
                             body: {
                                 padding: 0,
                             },
-                        }, getContainer: false, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] }), _jsx(ComposeNewMessageModal, { open: isComposeOpen, onClose: () => setIsComposeOpen(false) })] }));
+                        }, getContainer: false, forceRender: true, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] }), _jsx(ComposeNewMessageModal, { open: isComposeOpen, onClose: () => setIsComposeOpen(false) })] }));
 };
 export default DeskConversationList;

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

@@ -1 +1 @@
-{"version":3,"file":"PinnedMessagesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinnedMessagesPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,GAAI,mBAAmB,wBAAwB,4CAkGvE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"PinnedMessagesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinnedMessagesPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,GAAI,mBAAmB,wBAAwB,4CAmGvE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -46,6 +46,6 @@ const PinnedMessagesPanel = ({ open, onClose }) => {
                 borderTopRightRadius: 16,
                 overflow: "hidden",
             },
-        }, getContainer: false, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex items-center gap-4 border-b border-gray-25 px-3 py-4", children: [_jsx("span", { className: "flex-1 text-lg font-bold text-gray-900", children: t("pinned_panel_title") }), _jsx(Button, { type: "text", shape: "default", className: "h-6 w-6 p-0 text-gray-900", onClick: onClose, "aria-label": t("pinned_panel_title"), children: _jsx(Icon, { icon: "close-b", size: 24 }) })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto py-3", children: [_jsx("p", { className: "px-3 text-sm leading-[160%] text-gray-600", children: t("pinned_panel_hint") }), pinnedMessageList.map((message) => (_jsx(PinnedMessageItem, { message: message, contextMenuOpen: openContextMenuId === message.clientMsgID, onContextMenuOpenChange: (isOpen) => setOpenContextMenuId(isOpen ? message.clientMsgID : null), onUnpin: handleUnpin, onJump: handleJump }, message.clientMsgID)))] })] }) }));
+        }, getContainer: false, forceRender: true, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex items-center gap-4 border-b border-gray-25 px-3 py-4", children: [_jsx("span", { className: "flex-1 text-lg font-bold text-gray-900", children: t("pinned_panel_title") }), _jsx(Button, { type: "text", shape: "default", className: "h-6 w-6 p-0 text-gray-900", onClick: onClose, "aria-label": t("pinned_panel_title"), children: _jsx(Icon, { icon: "close-b", size: 24 }) })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto py-3", children: [_jsx("p", { className: "px-3 text-sm leading-[160%] text-gray-600", children: t("pinned_panel_hint") }), pinnedMessageList.map((message) => (_jsx(PinnedMessageItem, { message: message, contextMenuOpen: openContextMenuId === message.clientMsgID, onContextMenuOpenChange: (isOpen) => setOpenContextMenuId(isOpen ? message.clientMsgID : null), onUnpin: handleUnpin, onJump: handleJump }, message.clientMsgID)))] })] }) }));
 };
 export default PinnedMessagesPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadProfilePanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ThreadProfilePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAW7E,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACzD;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAKzB,uBAAuB,4CAiEzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ThreadProfilePanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ThreadProfilePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAW7E,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACzD;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAKzB,uBAAuB,4CAkEzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -16,6 +16,6 @@ const ThreadProfilePanel = ({ open, conversation, onClose, onSelectResource, })
     const badgeLabel = resolvePeerBadgeLabel(peerType, t);
     return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", styles: {
             body: { padding: 0 },
-        }, getContainer: false, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-gray-25", children: [_jsxs("div", { className: "flex w-full items-center bg-white p-2", children: [_jsx("button", { type: "button", "data-testid": "thread-profile-back", 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("thread_detail.options_title") })] }), _jsxs("div", { className: "flex flex-col items-center gap-2 bg-white px-0 py-2", children: [_jsxs("div", { className: "relative h-24 w-24 shrink-0", children: [_jsx(Avatar, { size: PROFILE_AVATAR_SIZE, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badgeLabel && (_jsx("span", { className: clsx("absolute bottom-1 right-0 flex h-[17px] items-center justify-center rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel }))] }), _jsx("p", { className: "w-full truncate text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: displayName })] }), _jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx(MediaEntryCard, { onSelect: onSelectResource }) })] }) }));
+        }, getContainer: false, forceRender: true, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-gray-25", children: [_jsxs("div", { className: "flex w-full items-center bg-white p-2", children: [_jsx("button", { type: "button", "data-testid": "thread-profile-back", 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("thread_detail.options_title") })] }), _jsxs("div", { className: "flex flex-col items-center gap-2 bg-white px-0 py-2", children: [_jsxs("div", { className: "relative h-24 w-24 shrink-0", children: [_jsx(Avatar, { size: PROFILE_AVATAR_SIZE, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badgeLabel && (_jsx("span", { className: clsx("absolute bottom-1 right-0 flex h-[17px] items-center justify-center rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel }))] }), _jsx("p", { className: "w-full truncate text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: displayName })] }), _jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx(MediaEntryCard, { onSelect: onSelectResource }) })] }) }));
 };
 export default ThreadProfilePanel;

package/dist/components/conversation-detail/bot/BotMenuSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BotMenuSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/BotMenuSheet.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,QAAA,MAAM,YAAY,GAAI,+CAMnB,iBAAiB,4CAgEnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BotMenuSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/bot/BotMenuSheet.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,QAAA,MAAM,YAAY,GAAI,+CAMnB,iBAAiB,4CAiEnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/conversation-detail/bot/BotMenuSheet.js

@@ -17,7 +17,7 @@ const BotMenuSheet = ({ open, items, disabled, onClose, onSelect, }) => {
             body: { padding: "16px 16px 32px" },
             mask: { backgroundColor: "rgba(0, 0, 0, 0.8)" },
             content: { background: "transparent", boxShadow: "none" },
-        }, getContainer: false, children: _jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl bg-white", children: [_jsxs("div", { className: "flex items-center gap-4 border-b border-gray-25 px-3 py-4", children: [_jsx("span", { className: "flex-1 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.bot.menu.title") }), _jsx(Button, { type: "text", shape: "default", className: "h-6 w-6 p-0 text-gray-900", onClick: onClose, "aria-label": t("thread_detail.bot.menu.title"), children: _jsx(Icon, { icon: "close-b", size: 24 }) })] }), _jsx("div", { className: "flex flex-col", children: items.map((item) => (_jsxs("button", { type: "button", disabled: disabled, onClick: () => handleSelect(item), className: "flex items-center gap-4 border-b border-gray-25 px-3 py-3 text-left transition-colors last:border-b-0 disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx("span", { className: "flex-1 text-[16px] font-medium leading-[1.6] text-gray-900", children: item.id === BOT_DEFAULT_BUTTON_ID
+        }, getContainer: false, forceRender: true, children: _jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl bg-white", children: [_jsxs("div", { className: "flex items-center gap-4 border-b border-gray-25 px-3 py-4", children: [_jsx("span", { className: "flex-1 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.bot.menu.title") }), _jsx(Button, { type: "text", shape: "default", className: "h-6 w-6 p-0 text-gray-900", onClick: onClose, "aria-label": t("thread_detail.bot.menu.title"), children: _jsx(Icon, { icon: "close-b", size: 24 }) })] }), _jsx("div", { className: "flex flex-col", children: items.map((item) => (_jsxs("button", { type: "button", disabled: disabled, onClick: () => handleSelect(item), className: "flex items-center gap-4 border-b border-gray-25 px-3 py-3 text-left transition-colors last:border-b-0 disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx("span", { className: "flex-1 text-[16px] font-medium leading-[1.6] text-gray-900", children: item.id === BOT_DEFAULT_BUTTON_ID
                                     ? t("thread_detail.bot.restart")
                                     : item.label }), _jsx(Icon, { icon: "angle-right-o", size: CHEVRON_SIZE, className: "text-gray-900" })] }, item.id))) })] }) }));
 };

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

@@ -1 +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,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,6BAIrB,mBAAmB,4CA2LrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"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,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,6BAIrB,mBAAmB,4CA4LrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/group/AddMemberModal.js

@@ -60,7 +60,7 @@ const AddMemberModal = ({ open, groupID, onClose, }) => {
             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) => {
+    return (_jsx(Modal, { centered: true, open: open, onCancel: handleClose, footer: null, title: t("add_member.title"), getContainer: false, forceRender: true, 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"

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

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

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

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

package/dist/components/group/AdminPermissionModal.js

@@ -4,53 +4,108 @@ import { useEffect, useState } from "react";
 import { ConfigProvider, Modal, Switch, message } from "antd";
 import { useTranslation } from "react-i18next";
 import { useGroupPermission } from "../../hooks/group/useGroupPermission";
+import { useSetGroupMemberPermissions } from "../../hooks/group/useGroupMemberActions";
 import { Icon } from "../../components/icon";
 import { PERMISSION_SWITCH_COLOR } from "../../constants";
+import { GROUP_PERMISSION_KEY } from "../../constants/im";
 import useGroupPermissionOverridesStore from "../../store/groupPermissionOverrides";
+const permissionListToOverrides = (permissionList) => ({
+    sendMessage: permissionList.includes(GROUP_PERMISSION_KEY.sendMessage),
+    pinMessage: permissionList.includes(GROUP_PERMISSION_KEY.pinMessage),
+    viewMemberInformation: permissionList.includes(GROUP_PERMISSION_KEY.viewMemberInformation),
+    addMember: permissionList.includes(GROUP_PERMISSION_KEY.addMember),
+    removeMember: permissionList.includes(GROUP_PERMISSION_KEY.removeMember),
+    updateGroupInfo: permissionList.includes(GROUP_PERMISSION_KEY.updateGroupName),
+});
+const overridesToPermissionList = (overrides, currentPermissionList) => {
+    const desired = {
+        [GROUP_PERMISSION_KEY.sendMessage]: overrides.sendMessage,
+        [GROUP_PERMISSION_KEY.pinMessage]: overrides.pinMessage,
+        [GROUP_PERMISSION_KEY.viewMemberInformation]: overrides.viewMemberInformation,
+        [GROUP_PERMISSION_KEY.addMember]: overrides.addMember,
+        [GROUP_PERMISSION_KEY.removeMember]: overrides.removeMember,
+        [GROUP_PERMISSION_KEY.updateGroupName]: overrides.updateGroupInfo,
+    };
+    const managedKeys = new Set(Object.keys(desired));
+    const untouched = currentPermissionList.filter((permission) => !managedKeys.has(permission));
+    const enabled = Object.entries(desired)
+        .filter(([, isEnabled]) => isEnabled)
+        .map(([permission]) => permission);
+    return [...untouched, ...enabled];
+};
 // 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, }) => {
+// when used group-wide (no `member`, e.g. from GroupThreadInfo) — applies
+// to the whole Admin role in the group, no BE persistence yet, committed to
+// the in-memory override store on "Lưu" only. When `member` is passed
+// (from the member list's per-row menu), it instead patches that member's
+// own permission list via the same setGroupMemberInfo call used to mute a
+// member — real BE persistence, scoped to that user.
+const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member, onMemberPermissionsSaved, }) => {
     const { t } = useTranslation();
-    const permissions = useGroupPermission(groupID);
+    const groupPermissions = useGroupPermission(groupID);
     const setAdminOverrides = useGroupPermissionOverridesStore((state) => state.setAdminOverrides);
+    const { mutateAsync: setMemberPermissions } = useSetGroupMemberPermissions();
     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,
-    });
+    const initialOverrides = () => member
+        ? permissionListToOverrides(member.permissions)
+        : {
+            sendMessage: groupPermissions.sendMessage,
+            pinMessage: groupPermissions.pinMessage,
+            viewMemberInformation: groupPermissions.viewMemberInformation,
+            addMember: groupPermissions.addMember,
+            removeMember: groupPermissions.removeMember,
+            updateGroupInfo: groupPermissions.updateGroupName,
+        };
+    const [pending, setPending] = useState(initialOverrides);
     useEffect(() => {
         if (!open)
             return;
-        setPending({
-            sendMessage: permissions.sendMessage,
-            pinMessage: permissions.pinMessage,
-            viewMemberInformation: permissions.viewMemberInformation,
-            addMember: permissions.addMember,
-            removeMember: permissions.removeMember,
-            updateGroupInfo: permissions.updateGroupName,
-        });
+        setPending(initialOverrides());
         // 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;
+    }, [open, member === null || member === void 0 ? void 0 : member.userID]);
+    const baseline = member
+        ? permissionListToOverrides(member.permissions)
+        : {
+            sendMessage: groupPermissions.sendMessage,
+            pinMessage: groupPermissions.pinMessage,
+            viewMemberInformation: groupPermissions.viewMemberInformation,
+            addMember: groupPermissions.addMember,
+            removeMember: groupPermissions.removeMember,
+            updateGroupInfo: groupPermissions.updateGroupName,
+        };
+    const hasChanges = pending.sendMessage !== baseline.sendMessage ||
+        pending.pinMessage !== baseline.pinMessage ||
+        pending.viewMemberInformation !== baseline.viewMemberInformation ||
+        pending.addMember !== baseline.addMember ||
+        pending.removeMember !== baseline.removeMember ||
+        pending.updateGroupInfo !== baseline.updateGroupInfo;
     const handleSave = async () => {
+        var _a, _b;
         if (!groupID)
             return;
         setIsSaving(true);
-        setAdminOverrides(groupID, pending);
-        message.success(t("update_admin_permissions_success"));
-        setIsSaving(false);
-        onClose();
+        try {
+            if (member) {
+                const nextPermissions = overridesToPermissionList(pending, member.permissions);
+                await setMemberPermissions({
+                    groupID,
+                    userID: member.userID,
+                    permissions: nextPermissions,
+                });
+                onMemberPermissionsSaved === null || onMemberPermissionsSaved === void 0 ? void 0 : onMemberPermissionsSaved(member.userID, nextPermissions);
+            }
+            else {
+                setAdminOverrides(groupID, pending);
+            }
+            message.success(t("update_admin_permissions_success"));
+            onClose();
+        }
+        catch (error) {
+            message.error(((_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("update_group_info_failed"));
+        }
+        finally {
+            setIsSaving(false);
+        }
     };
     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) {
@@ -58,6 +113,6 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, }) => {
             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 }) }));
+    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, forceRender: true, children: _jsx("div", { className: "mt-2", children: rows }) }));
 };
 export default AdminPermissionModal;

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;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,YAAY,oBAAoB,4CAqKxD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CreateGroupForm.d.ts","sourceRoot":"","sources":["../../../src/components/group/CreateGroupForm.tsx"],"names":[],"mappings":"AAeA,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,YAAY,oBAAoB,4CAsNxD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/group/CreateGroupForm.js

@@ -1,32 +1,66 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Upload } from "antd";
+import { Button, Input, Upload, message } from "antd";
 import clsx from "clsx";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../components/icon";
 import { useCreateGroup } from "../../hooks/group/useCreateGroup";
+import { useUploadFile } from "../../hooks/common/useUploadFile";
+import { validateFile } from "../../utils/fileValidation";
 import GroupMemberPicker from "./GroupMemberPicker";
 const GROUP_NAME_MAX_LENGTH = 255;
 const CreateGroupForm = ({ onDone }) => {
     const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation("common");
     const { createGroup } = useCreateGroup();
+    const { mutate: uploadFile, isPending: isAvatarUploading } = useUploadFile();
     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);
+    // Local blob URL for instant preview while the real upload is in flight.
     const [avatarPreviewUrl, setAvatarPreviewUrl] = useState("");
+    // Real, server-hosted URL — this is what actually gets sent as faceURL.
+    const [avatarFaceURL, setAvatarFaceURL] = useState("");
     const [selectedMembers, setSelectedMembers] = useState([]);
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const canSubmit = selectedMembers.length > 0 && !isSubmitting;
+    const avatarPreviewUrlRef = useRef("");
+    useEffect(() => {
+        avatarPreviewUrlRef.current = avatarPreviewUrl;
+    }, [avatarPreviewUrl]);
+    // Revoke whatever blob URL is live when the modal unmounts.
+    useEffect(() => () => {
+        if (avatarPreviewUrlRef.current) {
+            URL.revokeObjectURL(avatarPreviewUrlRef.current);
+        }
+    }, []);
+    const isGroupNameValid = groupName.trim().length > 0;
+    const canSubmit = isGroupNameValid &&
+        selectedMembers.length > 0 &&
+        !isSubmitting &&
+        !isAvatarUploading;
     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 validation = validateFile(file, tCommon);
+        if (!validation.isValid) {
+            message.error(validation.error);
+            return false;
+        }
         const previewUrl = URL.createObjectURL(file);
+        if (avatarPreviewUrlRef.current) {
+            URL.revokeObjectURL(avatarPreviewUrlRef.current);
+        }
         setAvatarPreviewUrl(previewUrl);
-        setAvatarFile({ uid: file.name, name: file.name });
+        setAvatarFaceURL("");
+        uploadFile(file, {
+            onSuccess: (uploaded) => {
+                setAvatarFaceURL((uploaded === null || uploaded === void 0 ? void 0 : uploaded.publicUrl) || "");
+            },
+            onError: () => {
+                message.error(t("create_group.avatar_upload_failed"));
+                setAvatarPreviewUrl("");
+            },
+        });
         return false;
     };
     const handleSubmit = async () => {
@@ -38,7 +72,7 @@ const CreateGroupForm = ({ onDone }) => {
                 groupName,
                 isPublic,
                 members: selectedMembers,
-                faceURL: avatarPreviewUrl,
+                faceURL: avatarFaceURL,
             });
             onDone();
         }
@@ -65,7 +99,7 @@ const CreateGroupForm = ({ onDone }) => {
     ], [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
+                                        _jsx("img", { src: avatarPreviewUrl, alt: "", className: clsx("h-full w-full rounded-2xl object-cover", isAvatarUploading && "opacity-50") })) : (_jsx(Icon, { icon: "user-three-b", size: 32, className: "text-primary-400" })), isAvatarUploading && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-black/10", children: _jsx("span", { className: "h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), _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"

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

@@ -0,0 +1,11 @@
+interface GroupCompositeAvatarProps {
+    groupID?: string;
+    faceURL?: string;
+    ownerUserID?: string;
+    groupName?: string;
+    size?: number;
+    className?: string;
+}
+declare const GroupCompositeAvatar: ({ groupID, faceURL, ownerUserID, groupName, size, className, }: GroupCompositeAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupCompositeAvatar;
+//# sourceMappingURL=GroupCompositeAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupCompositeAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupCompositeAvatar.tsx"],"names":[],"mappings":"AAOA,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,QAAA,MAAM,oBAAoB,GAAI,gEAO3B,yBAAyB,4CA2E3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/group/GroupCompositeAvatar.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from "antd";
+import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
+import { useMemo } from "react";
+import { useGroupMembers } from "../../hooks/group/useGroupMembers";
+// AC-Default2 (DROPPII-29976): when a group is created without a picked
+// avatar, show two overlapping avatars (owner bottom-left, first-joined
+// non-owner member top-right) instead of a static placeholder image —
+// resolved client-side so it always reflects current member avatars,
+// no image compositing/upload needed.
+const GroupCompositeAvatar = ({ groupID, faceURL, ownerUserID, groupName, size = 56, className, }) => {
+    var _a, _b;
+    const shouldLoadMembers = !faceURL && Boolean(groupID);
+    const { members } = useGroupMembers(shouldLoadMembers ? groupID : undefined);
+    const { ownerFaceURL, ownerLetter, hasFirstMember, firstMemberFaceURL, firstMemberLetter } = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if (!members.length) {
+            return {
+                ownerFaceURL: undefined,
+                ownerLetter: undefined,
+                hasFirstMember: false,
+                firstMemberFaceURL: undefined,
+                firstMemberLetter: undefined,
+            };
+        }
+        // Prefer the explicit ownerUserID when the caller has it (e.g. GroupItem);
+        // otherwise fall back to roleLevel, which every member list already carries.
+        const owner = (_a = members.find((member) => member.userID === ownerUserID)) !== null && _a !== void 0 ? _a : members.find((member) => member.roleLevel === GroupMemberRole.Owner);
+        const firstMember = [...members]
+            .filter((member) => member.userID !== (owner === null || owner === void 0 ? void 0 : owner.userID))
+            .sort((a, b) => a.joinTime - b.joinTime)[0];
+        return {
+            ownerFaceURL: owner === null || owner === void 0 ? void 0 : owner.faceURL,
+            ownerLetter: (_c = (_b = owner === null || owner === void 0 ? void 0 : owner.nickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0),
+            hasFirstMember: Boolean(firstMember),
+            firstMemberFaceURL: firstMember === null || firstMember === void 0 ? void 0 : firstMember.faceURL,
+            firstMemberLetter: (_e = (_d = firstMember === null || firstMember === void 0 ? void 0 : firstMember.nickname) === null || _d === void 0 ? void 0 : _d.charAt) === null || _e === void 0 ? void 0 : _e.call(_d, 0),
+        };
+    }, [members, ownerUserID]);
+    if (faceURL) {
+        return (_jsx(Avatar, { src: faceURL, size: size, className: className, children: ((_a = groupName === null || groupName === void 0 ? void 0 : groupName.charAt) === null || _a === void 0 ? void 0 : _a.call(groupName, 0)) || "G" }));
+    }
+    // Not enough members yet to compose two avatars (still loading, or a
+    // solo group with no other member) — fall back to a single placeholder.
+    if (!shouldLoadMembers || !hasFirstMember) {
+        return (_jsx(Avatar, { size: size, className: className, children: ownerLetter || ((_b = groupName === null || groupName === void 0 ? void 0 : groupName.charAt) === null || _b === void 0 ? void 0 : _b.call(groupName, 0)) || "G" }));
+    }
+    const subSize = Math.round(size * 0.62);
+    return (_jsxs("div", { className: className, style: { position: "relative", width: size, height: size, flexShrink: 0 }, children: [_jsx(Avatar, { src: ownerFaceURL, size: subSize, style: { position: "absolute", left: 0, bottom: 0, border: "2px solid white" }, children: ownerLetter || "A" }), _jsx(Avatar, { src: firstMemberFaceURL, size: subSize, style: { position: "absolute", right: 0, top: 0, border: "2px solid white" }, children: firstMemberLetter || "A" })] }));
+};
+export default GroupCompositeAvatar;

package/dist/components/media-collection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-collection/index.tsx"],"names":[],"mappings":"AAaA,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,eAAe,+CA8EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-collection/index.tsx"],"names":[],"mappings":"AAaA,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,eAAe,+CA+EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/media-collection/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBoolean } from "ahooks";
 import { Button, Drawer, Tabs } from "antd";
 import { Icon } from "../../components/icon";
@@ -47,11 +47,11 @@ const MediaCollection = () => {
             },
         ];
     }, [isOpen, t]);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
+    return (_jsxs("div", { className: "inline-flex shrink-0", children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
                     body: {
                         padding: 0,
                         height: "100%",
                     },
-                }, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
+                }, getContainer: false, forceRender: true, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
 };
 export default MediaCollection;

package/dist/components/media-resources/MediaResourcePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaResourcePanel.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/MediaResourcePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,gCAIzB,uBAAuB,4CAoCzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MediaResourcePanel.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/MediaResourcePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,gCAIzB,uBAAuB,4CAqCzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/media-resources/MediaResourcePanel.js

@@ -8,6 +8,6 @@ const MediaResourcePanel = ({ open, initialTab, onClose, }) => {
     const { t } = useTranslation();
     return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", styles: {
             body: { padding: 0 },
-        }, getContainer: false, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex w-full items-center p-2", children: [_jsx("button", { type: "button", "data-testid": "media-resource-back", 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("media_resources_title") })] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(MediaResourceTabs, { initialTab: initialTab }) })] }) }));
+        }, getContainer: false, forceRender: true, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex w-full items-center p-2", children: [_jsx("button", { type: "button", "data-testid": "media-resource-back", 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("media_resources_title") })] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(MediaResourceTabs, { initialTab: initialTab }) })] }) }));
 };
 export default MediaResourcePanel;

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

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