@droppii-org/chat-sdk 0.3.7 → 0.4.0

package/dist/components/thread/GroupThreadInfo.js

@@ -22,11 +22,11 @@ const GroupThreadInfo = ({ onClose, config }) => {
     var _a, _b, _c, _d;
     const { t } = useTranslation();
     const conversationData = useConversationStore((state) => state.conversationData);
-    const currentGroupInfo = useConversationStore((state) => state.currentGroupInfo);
     const groupID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID) || "";
+    const currentGroupInfo = useConversationStore((state) => state.currentGroupInfo.get(groupID));
     const conversationID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
     const permissions = useGroupPermission(groupID);
-    const currentMemberInGroup = useConversationStore((state) => state.currentMemberInGroup);
+    const currentMemberInGroup = useConversationStore((state) => state.currentMemberInGroup.get(groupID));
     // Muted-chat-list and disband-group aren't part of the 11-permission
     // matrix in the spec — kept as a role check like before, not mocked
     // per-permission.
@@ -36,6 +36,9 @@ const GroupThreadInfo = ({ onClose, config }) => {
     // unlike other admin-manageable rows in this panel, admins may view but
     // not change this toggle.
     const isOwner = (currentMemberInGroup === null || currentMemberInGroup === void 0 ? void 0 : currentMemberInGroup.roleLevel) === GroupMemberRole.Owner;
+    // Non-member viewing an existing public group in view-only mode — no
+    // longer a member, so "Rời khỏi nhóm" (leave) doesn't apply.
+    const isViewOnlyMember = useConversationStore((state) => state.isViewOnlyMember);
     const [editingField, setEditingField] = useState(null);
     const [nameValue, setNameValue] = useState((_a = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName) !== null && _a !== void 0 ? _a : "");
     const [descriptionValue, setDescriptionValue] = useState((_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) !== null && _b !== void 0 ? _b : "");
@@ -213,9 +216,9 @@ const GroupThreadInfo = ({ onClose, config }) => {
     if (!groupID) {
         return null;
     }
-    return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative overflow-hidden", 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("thread_info_title") }), _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(GroupCompositeAvatar, { groupID: groupID, faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName, size: 56 }), isAvatarUploading && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-black/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), permissions.updateGroupAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: handleAvatarSelect }), _jsx("button", { type: "button", disabled: isAvatarUploading, onClick: handleAvatarClick, className: "absolute -bottom-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-black text-white", children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsx("div", { className: "flex-1 min-w-0", children: editingField !== "name" && (_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-base font-medium truncate", children: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName }), permissions.updateGroupName && (_jsx(Icon, { icon: "edit-o", size: 16, className: "shrink-0 cursor-pointer text-gray-500", onClick: startEditName }))] })) })] }), editingField === "name" && (_jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex flex-col gap-3 bg-[#f5f5f5] rounded-lg p-3", children: [_jsx(Input, { autoFocus: true, value: nameValue, onChange: (event) => setNameValue(event.target.value), maxLength: 255, showCount: true, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg border border-primary-500 text-primary-500 text-sm font-medium disabled:border-gray-200 disabled:text-gray-300", disabled: isSavingGroupInfo, onClick: cancelEditName, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg bg-primary-500 text-white text-sm font-medium disabled:bg-gray-100 disabled:text-gray-300", disabled: isSavingGroupInfo ||
+    return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative overflow-hidden", "data-cp-name": "GroupThreadInfo", 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("thread_info_title") }), _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(GroupCompositeAvatar, { groupID: groupID, faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName, size: 56 }), isAvatarUploading && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-black/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), permissions.updateGroupAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: handleAvatarSelect }), _jsx("button", { type: "button", disabled: isAvatarUploading, onClick: handleAvatarClick, className: "absolute -bottom-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-black text-white", children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsx("div", { className: "flex-1 min-w-0", children: editingField !== "name" && (_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-base font-medium truncate", children: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName }), permissions.updateGroupName && (_jsx(Icon, { icon: "edit-o", size: 16, className: "shrink-0 cursor-pointer text-gray-500", onClick: startEditName }))] })) })] }), editingField === "name" && (_jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex flex-col gap-3 bg-[#f5f5f5] rounded-lg p-3", children: [_jsx(Input, { autoFocus: true, value: nameValue, onChange: (event) => setNameValue(event.target.value), maxLength: 255, showCount: true, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg border border-primary-500 text-primary-500 text-sm font-medium disabled:border-gray-200 disabled:text-gray-300", disabled: isSavingGroupInfo, onClick: cancelEditName, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg bg-primary-500 text-white text-sm font-medium disabled:bg-gray-100 disabled:text-gray-300", disabled: isSavingGroupInfo ||
                                                 !nameValue.trim() ||
                                                 nameValue.trim() === ((_c = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName) !== null && _c !== void 0 ? _c : ""), onClick: saveName, children: t("save") })] })] }) })), _jsx("div", { className: "px-4 pb-4", children: editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-3 bg-[#f5f5f5] rounded-lg p-3", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-900", children: [_jsx(Icon, { icon: "info-circle-o", size: 18, className: "text-gray-500" }), t("description")] }), _jsx(Input.TextArea, { autoFocus: true, value: descriptionValue, onChange: (event) => setDescriptionValue(event.target.value), placeholder: t("enter_group_description"), autoSize: { minRows: 1, maxRows: 4 }, maxLength: 500, showCount: true, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg border border-primary-500 text-primary-500 text-sm font-medium disabled:border-gray-200 disabled:text-gray-300", disabled: isSavingGroupInfo, onClick: cancelEditDescription, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg bg-primary-500 text-white text-sm font-medium disabled:bg-gray-100 disabled:text-gray-300", disabled: isSavingGroupInfo ||
-                                                descriptionValue.trim() === ((_d = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) !== null && _d !== void 0 ? _d : ""), onClick: saveDescription, children: t("save") })] })] })) : (_jsxs("div", { className: "flex items-start justify-between gap-2 bg-[#f5f5f5] rounded-lg px-3 py-2.5", children: [_jsxs("div", { className: "flex items-start gap-2 flex-1 min-w-0", children: [_jsx(Icon, { icon: "info-circle-o", size: 18, className: "shrink-0 mt-0.5 text-gray-900" }), _jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: t("description") }), _jsx("p", { className: "text-sm text-gray-400 truncate", children: (currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) || t("no_description") })] })] }), permissions.updateGroupDescription && (_jsx(Icon, { icon: "edit-o", size: 16, className: "shrink-0 cursor-pointer text-gray-500", onClick: startEditDescription }))] })) }), _jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 rounded-lg overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-o", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }), (config === null || config === void 0 ? void 0 : config.showAllowSendMessage) && isOwner && (_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "user-check-o", size: 18 }), t("allow_send_message")] }), _jsx(Switch, { checked: allowSendMessage, onChange: handleToggleSendMessage, loading: isTogglingSendMessage })] })), isAdminOrOwner && (config === null || config === void 0 ? void 0 : config.showMutedChatList) && (_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("muted-chat-list"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-off-o", size: 18 }), t("muted_chat_list")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] })), isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("block-list"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t("block_list")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }))] }), permissions.configGroupPermission && (_jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: [_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("member-permission"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "shield-o", size: 18 }), t("member_permission_settings")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }), _jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("admin-permission"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "shield-done-o", size: 18 }), t("admin_permission_settings")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] })] })), _jsx("div", { className: "mx-4 mt-3 rounded-lg overflow-hidden bg-[#f5f5f5]", children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-3 py-3 text-left text-sm text-gray-400 cursor-not-allowed", disabled: true, title: t("invite_via_link_pending"), children: [_jsx(Icon, { icon: "link-alt-o", size: 18 }), t("invite_via_link")] }) }), _jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 mb-4 rounded-lg overflow-hidden", children: [isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("delete"), children: [_jsx(Icon, { icon: "trash-o", size: 18 }), t("delete_conversation")] })), _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("leave"), children: [_jsx(Icon, { icon: "logout-o", size: 18 }), t("leave_group")] }), isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("disband"), children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t("disband_group")] }))] })] }), _jsx(ConfirmModal, { open: confirmAction === "leave", onOk: handleConfirmLeave, onCancel: () => setConfirmAction(null), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(ConfirmModal, { open: confirmAction === "disband", onOk: handleConfirmDisband, onCancel: () => setConfirmAction(null), title: t("disband_group_confirm_title"), okText: t("disband_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDismissing, children: _jsx("p", { children: t("disband_group_confirm_message") }) }), _jsx(ConfirmModal, { open: confirmAction === "delete", onOk: handleConfirmDelete, onCancel: () => setConfirmAction(null), title: t("delete_conversation_confirm_title"), okText: t("delete_conversation"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) }), _jsx(MemberPermissionPanel, { open: activeRow === "member-permission", groupID: groupID, onClose: () => setActiveRow(null) }), _jsx(AdminPermissionModal, { open: activeRow === "admin-permission", groupID: groupID, onClose: () => setActiveRow(null), inline: true }), (activeRow === "muted-chat-list" || activeRow === "block-list") && (_jsx(Modal, { centered: true, open: true, footer: null, onCancel: () => setActiveRow(null), title: t(activeRow === "muted-chat-list" ? "muted_chat_list" : "block_list"), getContainer: false, forceRender: true, children: _jsx("p", { className: "text-sm text-gray-500", children: t("feature_coming_soon") }) }))] }));
+                                                descriptionValue.trim() === ((_d = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) !== null && _d !== void 0 ? _d : ""), onClick: saveDescription, children: t("save") })] })] })) : (_jsxs("div", { className: "flex items-start justify-between gap-2 bg-[#f5f5f5] rounded-lg px-3 py-2.5", children: [_jsxs("div", { className: "flex items-start gap-2 flex-1 min-w-0", children: [_jsx(Icon, { icon: "info-circle-o", size: 18, className: "shrink-0 mt-0.5 text-gray-900" }), _jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: t("description") }), _jsx("p", { className: "text-sm text-gray-400 truncate", children: (currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) || t("no_description") })] })] }), permissions.updateGroupDescription && (_jsx(Icon, { icon: "edit-o", size: 16, className: "shrink-0 cursor-pointer text-gray-500", onClick: startEditDescription }))] })) }), _jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 rounded-lg overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-o", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }), (config === null || config === void 0 ? void 0 : config.showAllowSendMessage) && isOwner && (_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "user-check-o", size: 18 }), t("allow_send_message")] }), _jsx(Switch, { checked: allowSendMessage, onChange: handleToggleSendMessage, loading: isTogglingSendMessage })] })), isAdminOrOwner && (config === null || config === void 0 ? void 0 : config.showMutedChatList) && (_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("muted-chat-list"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-off-o", size: 18 }), t("muted_chat_list")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] })), isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("block-list"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t("block_list")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }))] }), permissions.configGroupPermission && (_jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: [_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("member-permission"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "shield-o", size: 18 }), t("member_permission_settings")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }), _jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("admin-permission"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "shield-done-o", size: 18 }), t("admin_permission_settings")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] })] })), _jsx("div", { className: "mx-4 mt-3 rounded-lg overflow-hidden bg-[#f5f5f5]", children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-3 py-3 text-left text-sm text-gray-400 cursor-not-allowed", disabled: true, title: t("invite_via_link_pending"), children: [_jsx(Icon, { icon: "link-alt-o", size: 18 }), t("invite_via_link")] }) }), _jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 mb-4 rounded-lg overflow-hidden", children: [isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("delete"), children: [_jsx(Icon, { icon: "trash-o", size: 18 }), t("delete_conversation")] })), !isViewOnlyMember && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("leave"), children: [_jsx(Icon, { icon: "logout-o", size: 18 }), t("leave_group")] })), isOwner && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("disband"), children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t("disband_group")] }))] })] }), _jsx(ConfirmModal, { open: confirmAction === "leave", onOk: handleConfirmLeave, onCancel: () => setConfirmAction(null), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(ConfirmModal, { open: confirmAction === "disband", onOk: handleConfirmDisband, onCancel: () => setConfirmAction(null), title: t("disband_group_confirm_title"), okText: t("disband_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDismissing, children: _jsx("p", { children: t("disband_group_confirm_message") }) }), _jsx(ConfirmModal, { open: confirmAction === "delete", onOk: handleConfirmDelete, onCancel: () => setConfirmAction(null), title: t("delete_conversation_confirm_title"), okText: t("delete_conversation"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) }), _jsx(MemberPermissionPanel, { open: activeRow === "member-permission", groupID: groupID, onClose: () => setActiveRow(null) }), _jsx(AdminPermissionModal, { open: activeRow === "admin-permission", groupID: groupID, onClose: () => setActiveRow(null), inline: true }), (activeRow === "muted-chat-list" || activeRow === "block-list") && (_jsx(Modal, { centered: true, open: true, footer: null, onCancel: () => setActiveRow(null), title: t(activeRow === "muted-chat-list" ? "muted_chat_list" : "block_list"), getContainer: false, forceRender: true, children: _jsx("p", { className: "text-sm text-gray-500", children: t("feature_coming_soon") }) }))] }));
 };
 export default GroupThreadInfo;

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

@@ -1 +1 @@
-{"version":3,"file":"ManualAssignPopover.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ManualAssignPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBjD,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,wBAAwB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA8CD,QAAA,MAAM,mBAAmB,GAAI,6EAM1B,wBAAwB,4CA4O1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ManualAssignPopover.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ManualAssignPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBjD,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,wBAAwB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA+CD,QAAA,MAAM,mBAAmB,GAAI,6EAM1B,wBAAwB,4CA4O1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/thread/ManualAssignPopover.js

@@ -15,7 +15,7 @@ const SupporterItem = ({ supporter, onClick, isCurrentUser, }) => {
     var _a;
     const { t } = useTranslation();
     const isOnline = supporter.status === "ONLINE";
-    return (_jsxs("div", { role: "option", tabIndex: 0, className: "flex items-center gap-3 px-3 py-2 rounded-md transition-colors cursor-pointer hover:bg-[#f5f5f5]", onClick: () => onClick(supporter), children: [_jsx(Badge, { dot: true, color: isOnline ? "#52c41a" : "#d9d9d9", offset: [-2, 24], children: _jsx(Avatar, { src: supporter.avatar, size: 32, children: ((_a = supporter.displayName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "A" }) }), _jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [_jsx("span", { className: "text-sm truncate", children: supporter.displayName }), isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), _jsx("div", { className: "flex items-center gap-2 shrink-0", children: !!supporter.openSessionCount && supporter.openSessionCount > 0 && (_jsxs("span", { className: "flex items-center gap-0.5 bg-blue-500 text-white text-xs font-medium px-1.5 py-0.5 rounded-full", children: [_jsx(Icon, { icon: "chat-square-b", size: 11 }), supporter.openSessionCount] })) })] }));
+    return (_jsxs("div", { role: "option", tabIndex: 0, className: "flex items-center gap-3 px-3 py-2 rounded-md transition-colors cursor-pointer hover:bg-[#f5f5f5]", onClick: () => onClick(supporter), "data-cp-name": "SupporterItem", children: [_jsx(Badge, { dot: true, color: isOnline ? "#52c41a" : "#d9d9d9", offset: [-2, 24], children: _jsx(Avatar, { src: supporter.avatar, size: 32, children: ((_a = supporter.displayName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "A" }) }), _jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [_jsx("span", { className: "text-sm truncate", children: supporter.displayName }), isCurrentUser && (_jsx("span", { className: "text-xs text-blue-500 shrink-0", children: t("current_account") }))] }), _jsx("div", { className: "flex items-center gap-2 shrink-0", children: !!supporter.openSessionCount && supporter.openSessionCount > 0 && (_jsxs("span", { className: "flex items-center gap-0.5 bg-blue-500 text-white text-xs font-medium px-1.5 py-0.5 rounded-full", children: [_jsx(Icon, { icon: "chat-square-b", size: 11 }), supporter.openSessionCount] })) })] }));
 };
 const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser = false, }) => {
     var _a, _b;

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

@@ -1 +1 @@
-{"version":3,"file":"SessionSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionSection.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqB/D,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,4CAkNA,CAAC;AAiDF,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAqCnE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SessionSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionSection.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqB/D,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,4CAmNA,CAAC;AAiDF,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAqCnE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/thread/SessionSection.js

@@ -113,7 +113,7 @@ export const SessionDetailCard = ({ session, isActive, }) => {
         value: label.id,
         label: label.name,
     }));
-    return (_jsxs("div", { className: `p-3 border rounded-lg shadow-md ${isActive ? "border-blue-500" : "border-gray-300"}`, children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsx("p", { className: "font-semibold text-sm", children: t("session_label", { order: session.order }) })] }), _jsx("p", { className: "text-xs text-gray-400", children: formatSessionDate(session.closedDate || session.createdDate) })] }) }), isActive ? (_jsx(Tag, { color: "processing", children: t("session_active") })) : (_jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" }))] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Icon, { icon: "tag-o", size: 16, className: "mt-1" }), _jsx(Select, { mode: "multiple", loading: isLoadingLabels, className: "w-full", placeholder: t("session_add_tag_placeholder"), options: labelOptions, value: (_e = session.labels) === null || _e === void 0 ? void 0 : _e.map((label) => label.id), onChange: handleUpdateLabels, removeIcon: true })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "info-circle-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: issueDetailInput.value, onChange: (e) => setIssueDetailInput({
+    return (_jsxs("div", { className: `p-3 border rounded-lg shadow-md ${isActive ? "border-blue-500" : "border-gray-300"}`, "data-cp-name": "SessionDetailCard", children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsx("p", { className: "font-semibold text-sm", children: t("session_label", { order: session.order }) })] }), _jsx("p", { className: "text-xs text-gray-400", children: formatSessionDate(session.closedDate || session.createdDate) })] }) }), isActive ? (_jsx(Tag, { color: "processing", children: t("session_active") })) : (_jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" }))] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Icon, { icon: "tag-o", size: 16, className: "mt-1" }), _jsx(Select, { mode: "multiple", loading: isLoadingLabels, className: "w-full", placeholder: t("session_add_tag_placeholder"), options: labelOptions, value: (_e = session.labels) === null || _e === void 0 ? void 0 : _e.map((label) => label.id), onChange: handleUpdateLabels, removeIcon: true })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "info-circle-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: issueDetailInput.value, onChange: (e) => setIssueDetailInput({
                                     value: e.target.value,
                                     sessionId: session.id,
                                 }), placeholder: t("session_issue_detail_placeholder"), className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "paper-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: noteInput.value, onChange: (e) => setNoteInput({ value: e.target.value, sessionId: session.id }), placeholder: t("session_note_placeholder"), className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] })] }), isActive && (_jsxs("div", { className: "flex items-center gap-2 mt-4 border-t border-gray-200 pt-4", children: [session.status !== SessionStatus.UNASSIGNED &&
@@ -137,6 +137,6 @@ const SessionSection = ({ sessions, isLoading }) => {
     const handleToggleExpand = (sessionId) => {
         setExpandedSessionId((prevId) => (prevId === sessionId ? null : sessionId));
     };
-    return (_jsxs("div", { className: "flex flex-col border-b", children: [_jsx("div", { className: "flex items-center justify-between px-4 py-2 sticky top-0 bg-white z-10", children: _jsx("h3", { className: "font-bold text-gray-500 text-xs tracking-wider", children: t("sessions_heading") }) }), _jsx("div", { className: "px-4 pt-2 pb-4", children: isLoading ? (_jsx("div", { className: "text-center mt-4", children: _jsx(Spin, {}) })) : (_jsx("div", { className: "flex flex-col gap-1", children: sessions.map((session) => (_jsx(ClosedSessionItem, { session: session, expandedSessionId: expandedSessionId, onToggleExpand: handleToggleExpand }, session.id))) })) })] }));
+    return (_jsxs("div", { className: "flex flex-col border-b", "data-cp-name": "SessionSection", children: [_jsx("div", { className: "flex items-center justify-between px-4 py-2 sticky top-0 bg-white z-10", children: _jsx("h3", { className: "font-bold text-gray-500 text-xs tracking-wider", children: t("sessions_heading") }) }), _jsx("div", { className: "px-4 pt-2 pb-4", children: isLoading ? (_jsx("div", { className: "text-center mt-4", children: _jsx(Spin, {}) })) : (_jsx("div", { className: "flex flex-col gap-1", children: sessions.map((session) => (_jsx(ClosedSessionItem, { session: session, expandedSessionId: expandedSessionId, onToggleExpand: handleToggleExpand }, session.id))) })) })] }));
 };
 export default SessionSection;

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

@@ -1 +1 @@
-{"version":3,"file":"SingleThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SingleThreadInfo.tsx"],"names":[],"mappings":"AAaA,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,mDAiJ3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SingleThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SingleThreadInfo.tsx"],"names":[],"mappings":"AAaA,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,mDAoJ3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/SingleThreadInfo.js

@@ -66,6 +66,6 @@ const SingleThreadInfo = ({ onClose }) => {
     if (!conversationID) {
         return null;
     }
-    return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", 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("thread_info_title") }), _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsx(Avatar, { src: avatar, size: 56, className: "shrink-0", 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-1 min-w-0 flex items-center gap-2", children: [_jsx("p", { className: "text-base font-medium truncate", children: displayName }), isBot && (_jsx("span", { className: "shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold bg-orange-50 text-orange-500", children: t("bot_tag") }))] })] }), _jsx("div", { className: "bg-[#f5f5f5] mx-4 rounded-lg overflow-hidden", children: _jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-o", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }) }), _jsx("div", { className: "bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm w-full", onClick: handleToggleBlock, disabled: isTogglingBlock, children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t(isBlocked ? "unblock_user" : "block_user")] }) }), _jsx("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmDelete(true), children: [_jsx(Icon, { icon: "trash-o", size: 18 }), t("delete_conversation")] }) })] }), _jsx(ConfirmModal, { open: confirmDelete, onOk: handleConfirmDelete, onCancel: () => setConfirmDelete(false), title: t("delete_conversation_confirm_title"), okText: t("delete_conversation"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) })] }));
+    return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", "data-cp-name": "SingleThreadInfo", 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("thread_info_title") }), _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsx(Avatar, { src: avatar, size: 56, className: "shrink-0", 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-1 min-w-0 flex items-center gap-2", children: [_jsx("p", { className: "text-base font-medium truncate", children: displayName }), isBot && (_jsx("span", { className: "shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold bg-orange-50 text-orange-500", children: t("bot_tag") }))] })] }), _jsx("div", { className: "bg-[#f5f5f5] mx-4 rounded-lg overflow-hidden", children: _jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-o", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }) }), _jsx("div", { className: "bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm w-full", onClick: handleToggleBlock, disabled: isTogglingBlock, children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t(isBlocked ? "unblock_user" : "block_user")] }) }), _jsx("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmDelete(true), children: [_jsx(Icon, { icon: "trash-o", size: 18 }), t("delete_conversation")] }) })] }), _jsx(ConfirmModal, { open: confirmDelete, onOk: handleConfirmDelete, onCancel: () => setConfirmDelete(false), title: t("delete_conversation_confirm_title"), okText: t("delete_conversation"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) })] }));
 };
 export default SingleThreadInfo;

package/dist/components/thread/ThreadInfo.js

@@ -36,6 +36,6 @@ const ThreadInfo = ({ isOpen = true, onClose, groupConfig }) => {
     if (!isOpen && !isBot) {
         return null;
     }
-    return (_jsxs("div", { className: "h-full flex flex-row", children: [isOpen && _jsx(SingleThreadInfo, { onClose: onClose }), isBot && (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", children: [_jsxs("div", { className: `flex-grow overflow-y-auto ${activeSession ? "pb-60" : ""}`, children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 z-20 bg-white backdrop-blur-sm", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }) }))] }))] }));
+    return (_jsxs("div", { className: "h-full flex flex-row", "data-cp-name": "ThreadInfo", children: [isOpen && _jsx(SingleThreadInfo, { onClose: onClose }), isBot && (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", children: [_jsxs("div", { className: `flex-grow overflow-y-auto ${activeSession ? "pb-60" : ""}`, children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 z-20 bg-white backdrop-blur-sm", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }) }))] }))] }));
 };
 export default ThreadInfo;

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

@@ -1 +1 @@
-{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/UserSection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,WAAW,+CAwIhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/UserSection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,WAAW,+CA2IhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/thread/UserSection.js

@@ -66,7 +66,7 @@ const UserSection = () => {
         setNoteValue((_b = (_a = data === null || data === void 0 ? void 0 : data.note) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "");
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [(_e = data === null || data === void 0 ? void 0 : data.note) === null || _e === void 0 ? void 0 : _e.content, conversationId, userId]);
-    return (_jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: data === null || data === void 0 ? void 0 : data.avatar, className: "min-w-6 min-h-6", children: ((_g = (_f = data === null || data === void 0 ? void 0 : data.fullName) === null || _f === void 0 ? void 0 : _f.charAt) === null || _g === void 0 ? void 0 : _g.call(_f, 0)) || "A" }), _jsx("div", { className: "flex flex-col overflow-hidden flex-1", children: _jsxs("p", { className: "text-sm truncate", children: [(data === null || data === void 0 ? void 0 : data.fullName) || "", "(", data === null || data === void 0 ? void 0 : data.username, ")"] }) }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm flex items-center gap-3 flex-1 min-w-0", children: [" ", _jsx("span", { className: "font-light w-16 text-gray-400 flex-shrink-0", children: "User ID" }), _jsx("span", { className: "truncate", children: (data === null || data === void 0 ? void 0 : data.id) || "" }), " "] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {
+    return (_jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3", "data-cp-name": "UserSection", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: data === null || data === void 0 ? void 0 : data.avatar, className: "min-w-6 min-h-6", children: ((_g = (_f = data === null || data === void 0 ? void 0 : data.fullName) === null || _f === void 0 ? void 0 : _f.charAt) === null || _g === void 0 ? void 0 : _g.call(_f, 0)) || "A" }), _jsx("div", { className: "flex flex-col overflow-hidden flex-1", children: _jsxs("p", { className: "text-sm truncate", children: [(data === null || data === void 0 ? void 0 : data.fullName) || "", "(", data === null || data === void 0 ? void 0 : data.username, ")"] }) }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm flex items-center gap-3 flex-1 min-w-0", children: [" ", _jsx("span", { className: "font-light w-16 text-gray-400 flex-shrink-0", children: "User ID" }), _jsx("span", { className: "truncate", children: (data === null || data === void 0 ? void 0 : data.id) || "" }), " "] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {
                                     navigator.clipboard.writeText((data === null || data === void 0 ? void 0 : data.id) || "");
                                     message.success(t("copied_to_clipboard"));
                                 } })] }), _jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm truncate flex gap-3", children: [_jsx("span", { className: "font-light text-gray-400 w-16", children: "Username" }), (data === null || data === void 0 ? void 0 : data.username) || ""] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {

package/dist/components/video-player/VideoPlayerModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayerModal.d.ts","sourceRoot":"","sources":["../../../src/components/video-player/VideoPlayerModal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAQD,eAAO,MAAM,oBAAoB,GAC/B,OAAO,iBAAiB,EAAE,KACzB,iBAAiB,EAWhB,CAAC;AAEL,QAAA,MAAM,gBAAgB,GAAI,0CAKvB,qBAAqB,4CAsFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VideoPlayerModal.d.ts","sourceRoot":"","sources":["../../../src/components/video-player/VideoPlayerModal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAQD,eAAO,MAAM,oBAAoB,GAC/B,OAAO,iBAAiB,EAAE,KACzB,iBAAiB,EAWhB,CAAC;AAEL,QAAA,MAAM,gBAAgB,GAAI,0CAKvB,qBAAqB,4CAuFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/video-player/VideoPlayerModal.js

@@ -34,7 +34,7 @@ const VideoPlayerModal = ({ open, videos, initialIndex, onClose, }) => {
     const currentVideo = videos[currentIndex];
     const { snapshotWidth = 0, snapshotHeight = 0 } = currentVideo || {};
     const hasSnapshotSize = snapshotWidth > 0 && snapshotHeight > 0;
-    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, destroyOnHidden: true, getContainer: false, forceRender: true, closeIcon: _jsx("span", { className: CLOSE_BUTTON_CLASS, children: _jsx(Icon, { icon: "close-b", size: 18 }) }), styles: {
+    return (_jsx(Modal, { "data-cp-name": "VideoPlayerModal", open: open, onCancel: onClose, footer: null, centered: true, destroyOnHidden: true, getContainer: false, forceRender: true, closeIcon: _jsx("span", { className: CLOSE_BUTTON_CLASS, children: _jsx(Icon, { icon: "close-b", size: 18 }) }), styles: {
             content: {
                 padding: 0,
             },

package/dist/context/ChatContext.d.ts

@@ -2,5 +2,5 @@ import "../styles/global.css";
 import { ChatContextType, ChatProviderProps } from "../types/chat";
 export declare const ChatContext: import("react").Context<ChatContextType>;
 export declare const useChatContext: () => ChatContextType;
-export declare const ChatProvider: ({ children, config, renderCustomMessage, }: ChatProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChatProvider: ({ children, config, renderCustomMessage, onNavigate, renderGroupAccessModal, }: ChatProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatContext.d.ts.map

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAStB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,4CAI1B,iBAAiB,4CAsGnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAStB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,gFAM1B,iBAAiB,4CAwGnB,CAAC"}

package/dist/context/ChatContext.js

@@ -18,7 +18,7 @@ export const ChatContext = createContext({
     updateSyncStatus: () => { },
 });
 export const useChatContext = () => useContext(ChatContext);
-export const ChatProvider = ({ children, config, renderCustomMessage, }) => {
+export const ChatProvider = ({ children, config, renderCustomMessage, onNavigate, renderGroupAccessModal, }) => {
     const [connectStatus, setConnectStatus] = useState(ConnectStatus.Disconnected);
     const [syncStatus, setSyncStatus] = useState(SyncStatus.Success);
     const [user, setUser] = useState(null);
@@ -92,5 +92,7 @@ export const ChatProvider = ({ children, config, renderCustomMessage, }) => {
             updateConnectStatus,
             updateSyncStatus,
             renderCustomMessage,
+            onNavigate,
+            renderGroupAccessModal,
         }, children: _jsx(ConfigProvider, { getPopupContainer: (triggerNode) => document.body, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(MainLayout, { children: children }) }) }) }));
 };

package/dist/hooks/global/useGlobalEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AAwCA,eAAO,MAAM,cAAc,YA8a1B,CAAC"}
+{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,cAAc,YAmhB1B,CAAC"}

package/dist/hooks/global/useGlobalEvent.js

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useLatest } from "ahooks";
 import { DChatSDK } from "../../constants/sdk";
-import { CbEvents, MessageType, SessionType, } from "@droppii-org/wasm-client-sdk";
+import { CbEvents, GroupVisibility, MessageType, SessionType, } from "@droppii-org/wasm-client-sdk";
 import { BusinessNotificationType, ConnectStatus, CustomType, SyncStatus, } from "../../types/chat";
 import { pushNewMessage, updateOneMessage } from "../../hooks/message/useMessage";
 import { fetchPinnedMessages } from "../../hooks/message/usePinnedMessages";
@@ -14,19 +13,15 @@ import { useRefetchChatToken } from "../../hooks/init/useChatToken";
 import { updateSession } from "../../hooks/session/useUpdateSession";
 import { QUERY_KEYS } from "../../services/query";
 import { useQueryClient } from "@tanstack/react-query";
-import { isGroupSession } from "../../utils/imCommon";
+import { isGroupConversation } from "../../utils/imCommon";
 import { ignoreInternalLatestMessage } from "../../utils/common";
 import { invalidateSessionQueries } from "../../utils/queryHelpers";
 import emitter from "../../utils/events";
 const notPushType = [MessageType.TypingMessage, MessageType.RevokeMessage];
 export const useGlobalEvent = () => {
-    const { user } = useChatContext();
+    const { user, onNavigate } = useChatContext();
     const userRef = useLatest(user);
     const queryClient = useQueryClient();
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const searchParamsRef = useLatest(searchParams);
     const { updateConnectStatus, updateSyncStatus, getSelfUserInfo } = useChatContext();
     const updateConversationList = useConversationStore((state) => state.updateConversationList);
     const getConversationListByReq = useConversationStore((state) => state.getConversationListByReq);
@@ -42,8 +37,7 @@ export const useGlobalEvent = () => {
     });
     const refreshCurrentGroupState = async () => {
         const currentConversation = useConversationStore.getState().currentConversation;
-        if (!(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.groupID) ||
-            !isGroupSession(currentConversation.conversationType)) {
+        if (!(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.groupID) || !isGroupConversation(currentConversation)) {
             return;
         }
         await Promise.all([
@@ -54,6 +48,33 @@ export const useGlobalEvent = () => {
             getCurrentMemberInGroupByReq(currentConversation.groupID),
         ]);
     };
+    // For a groupID cache entry that isn't the currently-open conversation:
+    // evict rather than refetch (per the "no background refetch" decision) —
+    // the next time that group is reopened, updateCurrentConversation's
+    // cache-miss path fetches it fresh.
+    const evictGroupCache = (groupID) => {
+        useConversationStore.setState((state) => {
+            const groupInfo = new Map(state.currentGroupInfo);
+            groupInfo.delete(groupID);
+            const memberInGroup = new Map(state.currentMemberInGroup);
+            memberInGroup.delete(groupID);
+            return { currentGroupInfo: groupInfo, currentMemberInGroup: memberInGroup };
+        });
+    };
+    // Refetch when the change is for the group currently open (fresh data
+    // needed right now); evict when it's for a different cached group (no
+    // background refetch — just don't serve stale data on next reopen).
+    const refreshOrEvictGroupState = async (groupID) => {
+        const currentConversation = useConversationStore.getState().currentConversation;
+        const isCurrentGroupOpen = !!groupID && (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.groupID) === groupID;
+        if (isCurrentGroupOpen) {
+            await refreshCurrentGroupState();
+            return;
+        }
+        if (groupID) {
+            evictGroupCache(groupID);
+        }
+    };
     const revokedMessageHandler = ({ data }) => {
         applyRevokedMessage(data.clientMsgID);
     };
@@ -206,45 +227,99 @@ export const useGlobalEvent = () => {
                 break;
         }
     };
-    const groupMemberChangedHandler = () => {
-        void refreshCurrentGroupState();
+    // OnGroupMemberAdded's payload isn't in the SDK's typed EventDataMap —
+    // assumed to carry a GroupItem-shaped groupID, consistent with every
+    // other group event in this file that IS typed that way.
+    const groupMemberChangedHandler = ({ data }) => {
+        void refreshOrEvictGroupState(data === null || data === void 0 ? void 0 : data.groupID);
         emitter.emit("GROUP_MEMBERS_CHANGED");
     };
-    const groupInfoChangedHandler = () => {
-        void refreshCurrentGroupState();
+    // OnGroupInfoChanged's payload isn't in the SDK's typed EventDataMap —
+    // same assumption as groupMemberChangedHandler above.
+    const groupInfoChangedHandler = ({ data }) => {
+        void refreshOrEvictGroupState(data === null || data === void 0 ? void 0 : data.groupID);
     };
     // BE pushes this when a member's role/permissions change (DROPPII-30248
     // spec: actions must always check the LATEST permissions, not stale UI) —
-    // refetch so useGroupPermission picks up the new permissions[] right away.
-    const groupMemberInfoChangedHandler = () => {
-        void refreshCurrentGroupState();
+    // refetch so useGroupPermission picks up the new permissions[] right away
+    // if it's the open group; evict the cache entry otherwise.
+    const groupMemberInfoChangedHandler = ({ data }) => {
+        void refreshOrEvictGroupState(data.groupID);
     };
-    // Shared by OnGroupDismissed (group disbanded for everyone) and
-    // OnJoinedGroupDeleted (this client specifically removed from the group,
-    // e.g. kicked by an admin) — both leave the current user out of the group,
-    // so the local conversation state needs the same cleanup either way.
-    //
-    // Clearing the Zustand store alone isn't enough: both consumer screens
-    // (DeskConversationList for CRM, useActiveConversation for BIZ) re-derive
-    // the open conversation from the ?threadId= URL param on their own
-    // effects, so they'd immediately re-select the (now filtered-out) group
-    // unless the URL itself is cleared too — hence the router.replace below.
-    const leftGroupHandler = ({ data }) => {
-        var _a;
+    // OnGroupDismissed always blocks + navigates away (group is gone either
+    // way). OnJoinedGroupDeleted (kicked) branches by visibility: PRIVATE ->
+    // fully blocked, same as disbanded; PUBLIC -> stays open in view-only.
+    const leftGroupHandler = (data, reason) => {
         const currentConversation = useConversationStore.getState().currentConversation;
-        if ((currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.groupID) === data.groupID) {
+        const isCurrentGroupOpen = (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.groupID) === data.groupID;
+        const staysViewOnly = reason === "kicked" && data.visibility === GroupVisibility.Public;
+        // The kicked/disbanded group's own cached membership is stale the
+        // instant this event fires, whether or not it's currently open —
+        // nonMemberGroupID guards against a still-in-flight fetch resurrecting
+        // it (see the kick-guard in getCurrentMemberInGroupByReq/
+        // getSelfGroupPermissionByReq).
+        useConversationStore.setState((state) => {
+            const memberInGroup = new Map(state.currentMemberInGroup);
+            memberInGroup.delete(data.groupID);
+            return { currentMemberInGroup: memberInGroup, nonMemberGroupID: data.groupID };
+        });
+        if (isCurrentGroupOpen && staysViewOnly) {
+            useConversationStore.setState({ isViewOnlyMember: true });
+            void getCurrentGroupInfoByReq(data.groupID);
+        }
+        else if (isCurrentGroupOpen) {
             useConversationStore.getState().clearSelectedConversation();
-            const newSearchParams = new URLSearchParams((_a = searchParamsRef.current) === null || _a === void 0 ? void 0 : _a.toString());
+            // OnGroupDismissed also fires on the disbanding owner's own client —
+            // skip the modal for them, useDismissGroup already shows a toast.
+            const selfDisbandedGroupID = useConversationStore.getState().selfDisbandedGroupID;
+            if (selfDisbandedGroupID === data.groupID) {
+                useConversationStore.getState().setSelfDisbandedGroupID(null);
+            }
+            else {
+                useConversationStore.getState().showRemovedFromGroupModal();
+            }
+            const newSearchParams = new URLSearchParams(window.location.search);
             newSearchParams.delete("threadId");
             newSearchParams.delete("userId");
             newSearchParams.delete("groupId");
             newSearchParams.delete("botId");
             const query = newSearchParams.toString();
-            router.replace(query ? `${pathname}?${query}` : pathname);
+            const pathname = window.location.pathname;
+            onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(query ? `${pathname}?${query}` : pathname);
+        }
+        // Public groups the user can still view-only stay in conversationList;
+        // private-blocked/disbanded groups get dropped.
+        if (!staysViewOnly) {
+            useConversationStore.setState((state) => ({
+                conversationList: state.conversationList.filter((conversation) => conversation.groupID !== data.groupID),
+            }));
         }
-        useConversationStore.setState((state) => ({
-            conversationList: state.conversationList.filter((conversation) => conversation.groupID !== data.groupID),
-        }));
+    };
+    // Thin wrappers matching the SDK's fixed callback signature, forwarding
+    // to leftGroupHandler with the right reason.
+    const groupDismissedHandler = ({ data }) => {
+        leftGroupHandler(data, "disbanded");
+    };
+    const joinedGroupDeletedHandler = ({ data }) => {
+        leftGroupHandler(data, "kicked");
+    };
+    // Fires for every member add/remove in a group, including other people's
+    // — only treat it as "I lost access" when the removed member is myself.
+    // The event payload (GroupMemberItem) has no visibility field, so read it
+    // from currentGroupInfo — but only trust that if it's actually info for
+    // THIS group (currentGroupInfo tracks whatever conversation is open, not
+    // necessarily the group being removed from) — otherwise fail closed.
+    const groupMemberDeletedHandler = ({ data }) => {
+        var _a, _b;
+        if (data.userID !== ((_a = userRef.current) === null || _a === void 0 ? void 0 : _a.userID)) {
+            void refreshOrEvictGroupState(data.groupID);
+            emitter.emit("GROUP_MEMBERS_CHANGED");
+            return;
+        }
+        const visibility = (_b = useConversationStore
+            .getState()
+            .currentGroupInfo.get(data.groupID)) === null || _b === void 0 ? void 0 : _b.visibility;
+        leftGroupHandler({ groupID: data.groupID, visibility }, "kicked");
     };
     const blackListChangedHandler = () => {
         emitter.emit("BLACK_LIST_CHANGED");
@@ -256,8 +331,19 @@ export const useGlobalEvent = () => {
     // query are separate stages"). OnJoinedGroupAdded fires as soon as the
     // client is confirmed a member, so refetch here instead of waiting on the
     // conversation-side events to eventually catch up.
-    const joinedGroupAddedHandler = (_event) => {
+    const joinedGroupAddedHandler = ({ data }) => {
         loadConversationList();
+        // Re-added as a member of the group currently open in view-only mode —
+        // clear the flag and refetch so membership-gated UI (send box, Leave
+        // group button) comes back instead of staying stuck read-only.
+        const currentConversation = useConversationStore.getState().currentConversation;
+        if ((currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.groupID) === data.groupID) {
+            useConversationStore.setState({
+                isViewOnlyMember: false,
+                nonMemberGroupID: null,
+            });
+            void refreshCurrentGroupState();
+        }
     };
     const setIMListener = () => {
         //account
@@ -280,13 +366,13 @@ export const useGlobalEvent = () => {
         DChatSDK.on(CbEvents.OnNewConversation, newConversationHandler);
         // group members
         DChatSDK.on(CbEvents.OnGroupMemberAdded, groupMemberChangedHandler);
-        DChatSDK.on(CbEvents.OnGroupMemberDeleted, groupMemberChangedHandler);
+        DChatSDK.on(CbEvents.OnGroupMemberDeleted, groupMemberDeletedHandler);
         DChatSDK.on(CbEvents.OnJoinedGroupAdded, joinedGroupAddedHandler);
         // group info
         DChatSDK.on(CbEvents.OnGroupInfoChanged, groupInfoChangedHandler);
         DChatSDK.on(CbEvents.OnGroupMemberInfoChanged, groupMemberInfoChangedHandler);
-        DChatSDK.on(CbEvents.OnGroupDismissed, leftGroupHandler);
-        DChatSDK.on(CbEvents.OnJoinedGroupDeleted, leftGroupHandler);
+        DChatSDK.on(CbEvents.OnGroupDismissed, groupDismissedHandler);
+        DChatSDK.on(CbEvents.OnJoinedGroupDeleted, joinedGroupDeletedHandler);
         // black list
         DChatSDK.on(CbEvents.OnBlackAdded, blackListChangedHandler);
         DChatSDK.on(CbEvents.OnBlackDeleted, blackListChangedHandler);
@@ -314,13 +400,13 @@ export const useGlobalEvent = () => {
         DChatSDK.off(CbEvents.OnNewConversation, newConversationHandler);
         // group members
         DChatSDK.off(CbEvents.OnGroupMemberAdded, groupMemberChangedHandler);
-        DChatSDK.off(CbEvents.OnGroupMemberDeleted, groupMemberChangedHandler);
+        DChatSDK.off(CbEvents.OnGroupMemberDeleted, groupMemberDeletedHandler);
         DChatSDK.off(CbEvents.OnJoinedGroupAdded, joinedGroupAddedHandler);
         // group info
         DChatSDK.off(CbEvents.OnGroupInfoChanged, groupInfoChangedHandler);
         DChatSDK.off(CbEvents.OnGroupMemberInfoChanged, groupMemberInfoChangedHandler);
-        DChatSDK.off(CbEvents.OnGroupDismissed, leftGroupHandler);
-        DChatSDK.off(CbEvents.OnJoinedGroupDeleted, leftGroupHandler);
+        DChatSDK.off(CbEvents.OnGroupDismissed, groupDismissedHandler);
+        DChatSDK.off(CbEvents.OnJoinedGroupDeleted, joinedGroupDeletedHandler);
         // black list
         DChatSDK.off(CbEvents.OnBlackAdded, blackListChangedHandler);
         DChatSDK.off(CbEvents.OnBlackDeleted, blackListChangedHandler);

package/dist/hooks/group/useCreateGroup.js

@@ -1,12 +1,12 @@
 "use client";
 import { useCallback } from "react";
-import { useRouter } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import { message } from "antd";
 import { useTranslation } from "react-i18next";
 import { GroupType, GroupVerificationType, GroupVisibility, SessionType } from "@droppii-org/wasm-client-sdk";
 import { DChatSDK } from "../../constants/sdk";
 import useAuthStore from "../../store/auth";
+import { useChatContext } from "../../context/ChatContext";
 import { generateDefaultGroupName } from "../../utils/groupName";
 import { QUERY_KEYS } from "../../services/query";
 const GET_CONVERSATION_RETRY_COUNT = 4;
@@ -43,7 +43,7 @@ const getOneConversationWithRetry = async (groupID) => {
 export const useCreateGroup = () => {
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation();
-    const router = useRouter();
+    const { onNavigate } = useChatContext();
     const queryClient = useQueryClient();
     const userID = useAuthStore((state) => state.userID);
     const createGroup = useCallback(async ({ groupName, isPublic, members, faceURL }) => {
@@ -78,9 +78,9 @@ export const useCreateGroup = () => {
             void queryClient.invalidateQueries({
                 queryKey: [QUERY_KEYS.GET_CONVERSATION_GROUPS],
             });
-            const searchParams = new URLSearchParams();
+            const searchParams = new URLSearchParams(window.location.search);
             searchParams.set("threadId", conversation.conversationID);
-            router.push(`/chat?${searchParams.toString()}`);
+            onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(`${window.location.pathname}?${searchParams.toString()}`);
             return conversation;
         }
         catch (error) {
@@ -88,6 +88,6 @@ export const useCreateGroup = () => {
             message.error(errorMessage);
             throw error;
         }
-    }, [router, t, tCommon, userID, queryClient]);
+    }, [onNavigate, t, tCommon, userID, queryClient]);
     return { createGroup };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useDismissGroup.d.ts","sourceRoot":"","sources":["../../../src/hooks/group/useDismissGroup.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,eAAe;aAEmB,MAAM;WAYpD,CAAC"}
+{"version":3,"file":"useDismissGroup.d.ts","sourceRoot":"","sources":["../../../src/hooks/group/useDismissGroup.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe;aAImB,MAAM;WA6BpD,CAAC"}

package/dist/hooks/group/useDismissGroup.js

@@ -5,9 +5,14 @@ import useConversationStore from "../../store/conversation";
 import useSessionStore from "../../store/session";
 import { SessionStatus } from "../../types/chat";
 import emitter from "../../utils/events";
+import { useChatContext } from "../../context/ChatContext";
 export const useDismissGroup = () => {
+    const { onNavigate } = useChatContext();
     return useMutation({
         mutationFn: async ({ groupID }) => {
+            // Set before the request — OnGroupDismissed also fires on our own
+            // client, with no ordering guarantee vs. this promise resolving.
+            useConversationStore.getState().setSelfDisbandedGroupID(groupID);
             const { data } = await DChatSDK.dismissGroup(groupID);
             emitter.emit("GROUP_MEMBERS_CHANGED");
             return data;
@@ -17,6 +22,19 @@ export const useDismissGroup = () => {
             useSessionStore
                 .getState()
                 .setFilterSummary({ status: SessionStatus.IN_PROCESS });
+            // Clearing the store alone won't navigate away — URL threadId must
+            // also clear, or DeskConversationList re-selects it (see PR #226).
+            const newSearchParams = new URLSearchParams(window.location.search);
+            newSearchParams.delete("threadId");
+            newSearchParams.delete("userId");
+            newSearchParams.delete("groupId");
+            newSearchParams.delete("botId");
+            const query = newSearchParams.toString();
+            const pathname = window.location.pathname;
+            onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(query ? `${pathname}?${query}` : pathname);
+        },
+        onError: () => {
+            useConversationStore.getState().setSelfDisbandedGroupID(null);
         },
     });
 };