@droppii-org/chat-sdk 0.1.97 → 0.2.1

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"}

package/dist/components/group/MemberPermissionPanel.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ConfigProvider, 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 Member Permissions")
+// — renders inline within the "Thông tin" sidebar (back arrow, no gray
+// background) per the reference recording, not as a Modal popup. No BE
+// persistence yet, committed to the in-memory override store on "Lưu" only.
+const MemberPermissionPanel = ({ open, groupID, onClose }) => {
+    const { t } = useTranslation();
+    const permissions = useGroupPermission(groupID);
+    const setMemberOverrides = useGroupPermissionOverridesStore((state) => state.setMemberOverrides);
+    const [isSaving, setIsSaving] = useState(false);
+    const [pending, setPending] = useState({
+        sendMessage: permissions.sendMessage,
+        addMember: permissions.addMember,
+        pinMessage: permissions.pinMessage,
+        viewMemberInformation: permissions.viewMemberInformation,
+    });
+    useEffect(() => {
+        if (!open)
+            return;
+        setPending({
+            sendMessage: permissions.sendMessage,
+            addMember: permissions.addMember,
+            pinMessage: permissions.pinMessage,
+            viewMemberInformation: permissions.viewMemberInformation,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const hasChanges = pending.sendMessage !== permissions.sendMessage ||
+        pending.addMember !== permissions.addMember ||
+        pending.pinMessage !== permissions.pinMessage ||
+        pending.viewMemberInformation !== permissions.viewMemberInformation;
+    const handleSave = async () => {
+        if (!groupID)
+            return;
+        setIsSaving(true);
+        setMemberOverrides(groupID, pending);
+        message.success(t("update_member_permissions_success"));
+        setIsSaving(false);
+        onClose();
+    };
+    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("member_permission_settings") })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _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_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_pin_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-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") })] })] }));
+};
+export default MemberPermissionPanel;

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

@@ -11,7 +11,7 @@ const FileResourceList = () => {
     return (_jsx(ResourceScrollContainer, Object.assign({}, containerProps, { itemCount: items.length, children: _jsx("div", { className: "flex flex-col gap-2 p-3", children: items.map((item) => {
                 var _a, _b;
                 const fileContent = parseMessageContent((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content);
-                return (_jsxs("div", { className: "flex w-full cursor-pointer items-center gap-2 rounded-[12px] bg-gray-50/20 p-3", onClick: () => downloadFileFromUrl((fileContent === null || fileContent === void 0 ? void 0 : fileContent.sourceUrl) || "", (fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || ""), children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-auto", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[16px] font-medium leading-[1.6] text-gray-900", children: shortenFileName(fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) }), _jsx("span", { className: "text-[13px] font-normal leading-[1.6] text-gray-400", children: renderFileSize((fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileSize) || 0) })] })] }, (_b = item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID));
+                return (_jsxs("div", { className: "flex w-full cursor-pointer items-center gap-2 rounded-[12px] bg-[#f5f5f5]/20 p-3", onClick: () => downloadFileFromUrl((fileContent === null || fileContent === void 0 ? void 0 : fileContent.sourceUrl) || "", (fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || ""), children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-auto", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[16px] font-medium leading-[1.6] text-gray-900", children: shortenFileName(fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) }), _jsx("span", { className: "text-[13px] font-normal leading-[1.6] text-gray-400", children: renderFileSize((fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileSize) || 0) })] })] }, (_b = item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID));
             }) }) })));
 };
 export default FileResourceList;

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

@@ -17,6 +17,6 @@ const LinkResourceItem = ({ url, messageMetadata }) => {
     const handleOpen = () => {
         openLink(url, t);
     };
-    return (_jsxs("div", { "data-testid": "link-resource-item", className: "flex w-full cursor-pointer items-center gap-2 rounded-[12px] bg-gray-50/20 p-3", onClick: handleOpen, children: [_jsx("div", { className: "flex h-[76px] w-[76px] shrink-0 items-center justify-center", children: shouldShowImage ? (_jsx("img", { src: imageUrl, alt: "", className: "h-full w-full rounded-[8px] object-cover", onError: () => setFailedImageUrl(imageUrl) })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center rounded-[12px] bg-gray-200", children: _jsx(Icon, { icon: "link-b", size: 24, color: "white" }) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [_jsx("p", { className: "truncate text-[14px] font-normal leading-[1.6] tracking-[-0.14px] text-gray-600", children: stripProtocol(url) }), _jsx("p", { className: "line-clamp-2 text-[16px] font-medium leading-[1.6] text-gray-900", children: title || url })] })] }));
+    return (_jsxs("div", { "data-testid": "link-resource-item", className: "flex w-full cursor-pointer items-center gap-2 rounded-[12px] bg-[#f5f5f5]/20 p-3", onClick: handleOpen, children: [_jsx("div", { className: "flex h-[76px] w-[76px] shrink-0 items-center justify-center", children: shouldShowImage ? (_jsx("img", { src: imageUrl, alt: "", className: "h-full w-full rounded-[8px] object-cover", onError: () => setFailedImageUrl(imageUrl) })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center rounded-[12px] bg-gray-200", children: _jsx(Icon, { icon: "link-b", size: 24, color: "white" }) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [_jsx("p", { className: "truncate text-[14px] font-normal leading-[1.6] tracking-[-0.14px] text-gray-600", children: stripProtocol(url) }), _jsx("p", { className: "line-clamp-2 text-[16px] font-medium leading-[1.6] text-gray-900", children: title || url })] })] }));
 };
 export default LinkResourceItem;

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":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/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;AAsCD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA0OzB,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;AAe/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;AA4CD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CAuezB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/GroupMembersDrawer.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
-import { Avatar, Button, Drawer, Dropdown, Empty, message, Modal, Spin } from "antd";
+import { Avatar, Button, Drawer, Dropdown, Empty, Input, message, Modal, Spin } from "antd";
 import { useEffect, useMemo, useState } from "react";
+import { useDebounce } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { usePathname, useRouter } from "next/navigation";
 import useAuthStore from "../../store/auth";
 import useConversationStore from "../../store/conversation";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
+import { useSearchGroupMembers } from "../../hooks/group/useSearchGroupMembers";
 import { useLeaveConversation } from "../../hooks/session/useLeaveConversation";
+import { useGroupPermission } from "../../hooks/group/useGroupPermission";
+import { useKickGroupMember, useMuteGroupMember, useSetGroupMemberRole, useTransferGroupOwner, } from "../../hooks/group/useGroupMemberActions";
 import { Icon } from "../../components/icon";
+import AddMemberModal from "../../components/group/AddMemberModal";
+import AdminPermissionModal from "../../components/group/AdminPermissionModal";
+const isMemberMuted = (member) => Boolean(member.muteEndTime) && member.muteEndTime * 1000 > Date.now();
 const getMemberDisplayName = (member) => {
     return member.nickname || member.userID || "";
 };
@@ -29,10 +36,24 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     const pathname = usePathname();
     const [isOpen, setIsOpen] = useState(false);
     const [showLeaveConfirm, setShowLeaveConfirm] = useState(false);
+    const [showAddMember, setShowAddMember] = useState(false);
+    const [showAdminPermission, setShowAdminPermission] = useState(false);
+    const [confirmMemberAction, setConfirmMemberAction] = useState(null);
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, { wait: 300 });
     const authUserID = useAuthStore((state) => state.userID);
     const conversationData = useConversationStore((state) => state.conversationData);
+    const currentMemberInGroup = useConversationStore((state) => state.currentMemberInGroup);
     const { members, isLoading, error, refetch } = useGroupMembers(groupID);
+    const { results: searchResults, isSearching } = useSearchGroupMembers(groupID, debouncedSearch);
     const { mutateAsync: leaveConversation, isPending: isLeaving } = useLeaveConversation();
+    const permissions = useGroupPermission(groupID);
+    const { mutateAsync: muteMember } = useMuteGroupMember();
+    const { mutateAsync: kickMember } = useKickGroupMember();
+    const { mutateAsync: setMemberRole } = useSetGroupMemberRole();
+    const { mutateAsync: transferOwner } = useTransferGroupOwner();
+    const canAddMember = (currentMemberInGroup === null || currentMemberInGroup === void 0 ? void 0 : currentMemberInGroup.roleLevel) === GroupMemberRole.Admin ||
+        (currentMemberInGroup === null || currentMemberInGroup === void 0 ? void 0 : currentMemberInGroup.roleLevel) === GroupMemberRole.Owner;
     let customerUserID = "";
     try {
         const exConversationInfo = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}");
@@ -41,21 +62,33 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     catch (error) {
         console.error("Error parsing conversation extra info:", error);
     }
+    const isSearchActive = debouncedSearch.trim().length > 0;
+    const sourceMembers = isSearchActive ? searchResults : members;
     const sortedMembers = useMemo(() => {
-        return [...members]
-            .map((member) => ({
-            userID: member.userID,
-            nickname: getMemberDisplayName(member),
-            faceURL: member.faceURL,
-            isCustomer: Boolean(customerUserID) && member.userID === customerUserID,
-            isCurrentUser: member.userID === authUserID,
-            roleLabel: getMemberRoleLabel({
-                member,
-                customerUserID,
-                t,
-            }),
-        }))
+        return [...sourceMembers]
+            .map((member) => {
+            const isOwner = member.userID === customerUserID ||
+                member.roleLevel === GroupMemberRole.Owner;
+            return {
+                userID: member.userID,
+                nickname: getMemberDisplayName(member),
+                faceURL: member.faceURL,
+                isCustomer: Boolean(customerUserID) && member.userID === customerUserID,
+                isCurrentUser: member.userID === authUserID,
+                isOwner,
+                isAdmin: member.roleLevel === GroupMemberRole.Admin,
+                isMuted: isMemberMuted(member),
+                // Mockup only shows a role label under the owner/creator row —
+                // Admin/Member rows show name only.
+                roleLabel: isOwner
+                    ? getMemberRoleLabel({ member, customerUserID, t })
+                    : "",
+            };
+        })
             .sort((memberA, memberB) => {
+            if (memberA.isCurrentUser !== memberB.isCurrentUser) {
+                return memberA.isCurrentUser ? -1 : 1;
+            }
             if (memberA.isCustomer !== memberB.isCustomer) {
                 return memberA.isCustomer ? -1 : 1;
             }
@@ -63,7 +96,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                 sensitivity: "base",
             });
         });
-    }, [authUserID, members, customerUserID, t]);
+    }, [authUserID, sourceMembers, customerUserID, t]);
     const handleOpenDrawer = () => {
         if (!groupID || disabled) {
             return;
@@ -86,6 +119,79 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
         }
         setShowLeaveConfirm(true);
     };
+    const handleToggleMuteMember = async (member) => {
+        var _a, _b;
+        if (!groupID)
+            return;
+        try {
+            await muteMember({
+                groupID,
+                userID: member.userID,
+                mute: !member.isMuted,
+            });
+            message.success(member.isMuted
+                ? t("unmute_member_success")
+                : t("mute_member_success"));
+            void refetch();
+        }
+        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"));
+        }
+    };
+    const handleConfirmRemoveMember = async () => {
+        var _a, _b;
+        if (!groupID || (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) !== "remove")
+            return;
+        try {
+            await kickMember({ groupID, userID: confirmMemberAction.member.userID });
+            message.success(t("remove_member_success"));
+            void refetch();
+        }
+        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("remove_member_failed"));
+        }
+        finally {
+            setConfirmMemberAction(null);
+        }
+    };
+    const handleToggleAdminRole = async (member) => {
+        var _a, _b;
+        if (!groupID)
+            return;
+        try {
+            await setMemberRole({
+                groupID,
+                userID: member.userID,
+                roleLevel: member.isAdmin ? GroupMemberRole.Normal : GroupMemberRole.Admin,
+            });
+            message.success(member.isAdmin
+                ? t("remove_from_admin_success")
+                : t("assign_as_admin_success"));
+            void refetch();
+        }
+        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"));
+        }
+    };
+    const handleConfirmTransferOwner = async () => {
+        var _a, _b;
+        if (!groupID || (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) !== "transfer-owner")
+            return;
+        try {
+            await transferOwner({
+                groupID,
+                newOwnerUserID: confirmMemberAction.member.userID,
+            });
+            message.success(t("transfer_owner_success"));
+            void refetch();
+        }
+        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 {
+            setConfirmMemberAction(null);
+        }
+    };
     const handleConfirmLeave = async () => {
         var _a, _b;
         if (!conversationId || !groupID)
@@ -106,26 +212,98 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
         setIsOpen(false);
     }, [groupID]);
     const renderContent = () => {
-        if (isLoading) {
+        if (isLoading || (isSearchActive && isSearching)) {
             return (_jsx("div", { className: "flex items-center justify-center h-full min-h-40", children: _jsx(Spin, {}) }));
         }
         if (error) {
             return (_jsx("div", { className: "flex items-center justify-center h-full min-h-40 px-6 text-center text-sm text-gray-500", children: t(error) }));
         }
         if (!sortedMembers.length) {
-            return _jsx(Empty, { description: t("no_group_members") });
+            return (_jsx(Empty, { description: isSearchActive ? t("no_member_found") : t("no_group_members") }));
         }
         return (_jsx("div", { className: "flex flex-col", children: sortedMembers.map((member) => {
-                const menuItems = [
-                    {
-                        key: "leave-group",
-                        label: t("leave_group"),
-                        icon: _jsx(Icon, { icon: "logout-b", size: 16 }),
-                        onClick: handleLeaveGroup,
-                        danger: true,
-                    },
-                ];
-                return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-gray-100", children: [_jsx(Avatar, { src: member.faceURL, size: 40, className: "shrink-0", children: member.nickname.charAt(0) || "A" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: member.nickname }), member.isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), _jsx("p", { className: "text-sm text-gray-500 truncate", children: member.roleLabel })] }), member.isCurrentUser && (_jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: (event) => event.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) }))] }, member.userID));
+                // Send message / Remove and block are not wired yet (no confirmed
+                // SDK flow for member-scoped block) — kept disabled per scope.
+                const menuItems = member.isCurrentUser
+                    ? [
+                        {
+                            key: "mute",
+                            label: t("mute_member"),
+                            icon: _jsx(Icon, { icon: "bell-off-b", size: 16 }),
+                            disabled: true,
+                        },
+                        {
+                            key: "leave-group",
+                            label: t("leave_group"),
+                            icon: _jsx(Icon, { icon: "logout-b", size: 16 }),
+                            onClick: handleLeaveGroup,
+                            danger: true,
+                        },
+                    ]
+                    : [
+                        {
+                            key: "send-message",
+                            label: t("send_message"),
+                            icon: _jsx(Icon, { icon: "send-b", size: 16 }),
+                            disabled: true,
+                        },
+                        {
+                            key: "mute",
+                            label: member.isMuted ? t("unmute_member") : t("mute_member"),
+                            icon: _jsx(Icon, { icon: "bell-off-b", size: 16 }),
+                            disabled: !permissions.removeMember,
+                            onClick: () => void handleToggleMuteMember(member),
+                        },
+                        {
+                            key: "transfer-owner",
+                            label: t("transfer_owner"),
+                            icon: _jsx(Icon, { icon: "key-b", size: 16 }),
+                            disabled: !permissions.transferOwnership,
+                            onClick: () => setConfirmMemberAction({ type: "transfer-owner", member }),
+                        },
+                        ...(member.isAdmin
+                            ? [
+                                {
+                                    key: "configure-admin-permission",
+                                    label: t("admin_permission_settings"),
+                                    icon: _jsx(Icon, { icon: "shield-o", size: 16 }),
+                                    disabled: !permissions.transferOwnership,
+                                    onClick: () => setShowAdminPermission(true),
+                                },
+                                {
+                                    key: "remove-admin",
+                                    label: t("remove_from_admin"),
+                                    icon: _jsx(Icon, { icon: "shield-fail-b", size: 16 }),
+                                    disabled: !permissions.addAdmin,
+                                    onClick: () => void handleToggleAdminRole(member),
+                                },
+                            ]
+                            : [
+                                {
+                                    key: "assign-admin",
+                                    label: t("assign_as_admin"),
+                                    icon: _jsx(Icon, { icon: "shield-b", size: 16 }),
+                                    disabled: !permissions.addAdmin,
+                                    onClick: () => void handleToggleAdminRole(member),
+                                },
+                            ]),
+                        {
+                            key: "remove-member",
+                            label: t("remove_from_group"),
+                            icon: _jsx(Icon, { icon: "user-del-b", size: 16 }),
+                            danger: true,
+                            disabled: !permissions.removeMember,
+                            onClick: () => setConfirmMemberAction({ type: "remove", member }),
+                        },
+                        {
+                            key: "remove-and-block",
+                            label: t("remove_and_block"),
+                            icon: _jsx(Icon, { icon: "user-octagon-b", size: 16 }),
+                            danger: true,
+                            disabled: true,
+                        },
+                    ];
+                return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-2", children: [_jsx(Avatar, { src: member.faceURL, size: 40, className: "shrink-0", children: member.nickname.charAt(0) || "A" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-sm font-semibold text-gray-900 truncate", children: member.nickname }), member.isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), member.roleLabel && (_jsx("p", { className: "text-sm text-gray-500 truncate", children: member.roleLabel }))] }), _jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: (event) => event.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) })] }, member.userID));
             }) }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleOpenDrawer, disabled: disabled || !groupID, children: _jsx(Icon, { icon: "user-two-check-b", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: handleCloseDrawer, mask: false, closeIcon: false, styles: {
@@ -133,6 +311,10 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                         padding: 0,
                         height: "100%",
                     },
-                }, getContainer: false, width: 360, children: _jsxs("div", { className: "flex flex-col h-full bg-white", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("members") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleCloseDrawer, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: renderContent() })] }) }), _jsx(Modal, { centered: true, open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, getContainer: false, children: _jsx("p", { children: t("leave_group_confirm_message") }) })] }));
+                }, getContainer: false, width: 360, children: _jsxs("div", { className: "flex flex-col h-full bg-white py-2", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("members") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleCloseDrawer, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }), className: "h-10" }), canAddMember && (_jsx(Button, { type: "primary", shape: "default", className: "w-10 h-10 p-0 shrink-0 flex items-center justify-center rounded-lg", onClick: () => setShowAddMember(true), children: _jsx(Icon, { icon: "user-add-b", size: 18 }) }))] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: renderContent() })] }) }), _jsx(Modal, { centered: true, open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, getContainer: false, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(Modal, { centered: true, open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "remove", onOk: handleConfirmRemoveMember, onCancel: () => setConfirmMemberAction(null), title: t("remove_member_confirm_title"), okText: t("remove_from_group"), cancelText: t("cancel"), okType: "danger", getContainer: false, children: _jsx("p", { children: t("remove_member_confirm_message", {
+                        name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
+                    }) }) }), _jsx(Modal, { centered: true, open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "transfer-owner", onOk: handleConfirmTransferOwner, onCancel: () => setConfirmMemberAction(null), title: t("transfer_owner_confirm_title"), okText: t("transfer_owner"), cancelText: t("cancel"), okType: "danger", getContainer: false, children: _jsx("p", { children: t("transfer_owner_confirm_message", {
+                        name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
+                    }) }) }), groupID && (_jsx(AddMemberModal, { open: showAddMember, groupID: groupID, existingMemberIDs: members.map((member) => member.userID), onClose: () => setShowAddMember(false) })), groupID && (_jsx(AdminPermissionModal, { open: showAdminPermission, groupID: groupID, onClose: () => setShowAdminPermission(false) }))] }));
 };
 export default GroupMembersDrawer;

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

@@ -4,6 +4,7 @@ interface MessageHeaderProps {
     onClose?: () => void;
     currentSession?: ISessionResponse;
     isJoined?: boolean | null;
+    onOpenThreadInfo?: () => void;
 }
 type SelectSessionValueType = SessionStatus | SessionTag;
 export interface SelectSessionOption {
@@ -13,6 +14,6 @@ export interface SelectSessionOption {
     tintColorClassnameBg: string;
     bgTintColorClassname: string;
 }
-declare const MessageHeader: ({ onClose, currentSession, isJoined, }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageHeader: ({ onClose, currentSession, isJoined, onOpenThreadInfo, }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageHeader;
 //# sourceMappingURL=MessageHeader.d.ts.map

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

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

package/dist/components/message/MessageHeader.js

@@ -13,8 +13,9 @@ import { useUpdateSession } from "../../hooks/session/useUpdateSession";
 import useAuthStore from "../../store/auth";
 import SearchDrawer from "../../components/search-conversation/SearchDrawer";
 import { isGroupSession } from "../../utils/imCommon";
+import { useGroupPermission } from "../../hooks/group/useGroupPermission";
 import GroupMembersDrawer from "./GroupMembersDrawer";
-const MessageHeader = ({ onClose, currentSession, isJoined, }) => {
+const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, }) => {
     var _a, _b;
     const { t } = useTranslation();
     const isCx = useAuthStore((state) => state.isCx);
@@ -22,6 +23,7 @@ const MessageHeader = ({ onClose, currentSession, isJoined, }) => {
     const conversationData = useConversationStore((state) => state.conversationData);
     const currentGroupInfo = useConversationStore((state) => state.currentGroupInfo);
     const { mutate: updateSession } = useUpdateSession();
+    const permissions = useGroupPermission(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID);
     const { avatar, displayName } = useConversationDisplayData(conversationData);
     const shouldShowMemberCount = isGroupSession(conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType);
     const [currentSessionStatus, setCurrentSessionStatus] = useState(SessionStatus.UNASSIGNED);
@@ -127,6 +129,9 @@ const MessageHeader = ({ onClose, currentSession, isJoined, }) => {
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), shouldShowMemberCount && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: (_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _b !== void 0 ? _b : 0 }) }))] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), shouldShowMemberCount && isJoined === true && isCrm && (_jsx(GroupMembersDrawer, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, conversationId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, currentSession: currentSession })), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), shouldShowMemberCount && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: (_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _b !== void 0 ? _b : 0 }) }))] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), shouldShowMemberCount &&
+                        isJoined === true &&
+                        isCrm &&
+                        permissions.viewMemberInformation && (_jsx(GroupMembersDrawer, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, conversationId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, currentSession: currentSession })), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onOpenThreadInfo, children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

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

@@ -4,6 +4,7 @@ interface MessageListProps {
     className?: string;
     onClose?: () => void;
     openCreateCannedModal?: () => void;
+    onOpenThreadInfo?: () => void;
 }
 declare const MessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageList;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAyBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA0N3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AA2BA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAuO3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -19,13 +19,18 @@ import { useChatContext } from "../../context/ChatContext";
 import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
 import { useConversationSessionState } from "../../hooks/session/useConversationSessionState";
 import { useJoinGroupFlow } from "../../hooks/session/useJoinGroupFlow";
+import { useGroupPermission } from "../../hooks/group/useGroupPermission";
+import { isGroupSession } from "../../utils/imCommon";
 import { ConnectStatus, SessionStatus } from "../../types/chat";
 dayjs.extend(isToday);
 const MessageList = (props) => {
     const { t } = useTranslation();
     const { user, connectStatus } = useChatContext();
-    const { onClose, conversationId, searchClientMsgID, openCreateCannedModal } = props;
+    const { onClose, conversationId, searchClientMsgID, openCreateCannedModal, onOpenThreadInfo, } = props;
     const conversationData = useConversationStore((state) => state.conversationData);
+    const permissions = useGroupPermission(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID);
+    const isGroupChat = isGroupSession(conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType);
+    const canSendMessage = !isGroupChat || permissions.sendMessage;
     const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
     const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
     const [openMenuId, setOpenMenuId] = useState(null);
@@ -102,6 +107,6 @@ const MessageList = (props) => {
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: connectStatus !== ConnectStatus.Connected ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 bg-white", style: { overflowX: "hidden" }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined }), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), isCheckingMembership ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : (_jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 bg-white", style: { overflowX: "hidden" }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo }), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), isCheckingMembership ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : !canSendMessage ? (_jsx("div", { className: "border-t bg-[#f5f5f5] py-3 flex items-center justify-center", children: _jsx("p", { className: "text-sm text-gray-500", children: t("send_message_disabled") }) })) : (_jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
 };
 export default MessageList;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAwDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAmEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/SelectSession.js

@@ -5,7 +5,7 @@ import { Icon } from "../../components/icon";
 import clsx from "clsx";
 const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, }) => {
     const selectedOption = options.find((option) => option.value === value);
-    const renderOptionLabel = (option) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs truncate flex-1", option.tintColorClassname), children: option.label })] }));
+    const renderOptionLabel = (option, truncateLabel = false) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full shrink-0", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs whitespace-nowrap", truncateLabel && "truncate", option.tintColorClassname), children: option.label })] }));
     const filteredOptions = options.filter((option) => option.value === value || !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value)));
     const selectOptions = filteredOptions.map((option) => ({
         label: renderOptionLabel(option),
@@ -14,10 +14,10 @@ const SelectSession = ({ options, value, onChange, excludeOptions, placeholder,
     const handleSelect = (val) => {
         onChange(val);
     };
-    return (_jsx("div", { className: "relative", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
+    return (_jsx("div", { className: "relative shrink-0", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, popupMatchSelectWidth: false, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
                 ? placeholder
                 : selectedOption
-                    ? renderOptionLabel(selectedOption)
+                    ? renderOptionLabel(selectedOption, true)
                     : undefined }) }));
 };
 export default SelectSession;

package/dist/components/session/DeskTeamInbox.js

@@ -7,7 +7,7 @@ import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionS
 import useSessionStore from "../../store/session";
 import emitter from "../../utils/events";
 import SessionFilterMenu from "./SessionFilterMenu";
-const TeamGroup = memo(({ team, isExpanded, isSelected, selectedFilter, onToggle, onFilterSelect, }) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-gray-50", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate flex-1", children: team.teamName }), _jsx(Icon, { icon: isExpanded ? "angle-up-o" : "angle-down-o", size: 16, className: "text-gray-400 shrink-0" })] }), isExpanded && (_jsx(SessionFilterMenu, { summary: team.summary, isActive: isSelected, filterSummary: selectedFilter, onFilterSelect: onFilterSelect, includeUnassigned: true, activeCount: team.summary.activeSessionCount }))] })));
+const TeamGroup = memo(({ team, isExpanded, isSelected, selectedFilter, onToggle, onFilterSelect, }) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-[#f5f5f5]", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate flex-1", children: team.teamName }), _jsx(Icon, { icon: isExpanded ? "angle-up-o" : "angle-down-o", size: 16, className: "text-gray-400 shrink-0" })] }), isExpanded && (_jsx(SessionFilterMenu, { summary: team.summary, isActive: isSelected, filterSummary: selectedFilter, onFilterSelect: onFilterSelect, includeUnassigned: true, activeCount: team.summary.activeSessionCount }))] })));
 const DeskTeamInbox = () => {
     const { t } = useTranslation();
     const { data: teamSummaries, refetch } = useGetTeamSessionSummary();

package/dist/components/thread/GroupThreadInfo.d.ts

@@ -0,0 +1,11 @@
+export interface GroupThreadInfoConfig {
+    showAllowSendMessage?: boolean;
+    showMutedChatList?: boolean;
+}
+interface GroupThreadInfoProps {
+    onClose?: () => void;
+    config?: GroupThreadInfoConfig;
+}
+declare const GroupThreadInfo: ({ onClose, config }: GroupThreadInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+export default GroupThreadInfo;
+//# sourceMappingURL=GroupThreadInfo.d.ts.map

package/dist/components/thread/GroupThreadInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupThreadInfo.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAID,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,mDAmcjE,CAAC;AAEF,eAAe,eAAe,CAAC"}