@droppii-org/chat-sdk 0.6.56 → 0.7.0

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

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

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

@@ -1,15 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBoolean } from "ahooks";
+import { headerIconButtonClass, HeaderIcon } from "../../components/message/headerIconButton";
+import useAuthStore from "../../store/auth";
+import { useSidePanel } from "../../hooks/common/useSidePanel";
 import { Button, Drawer, Tabs } from "antd";
 import { Icon } from "../../components/icon";
 import { useTranslation } from "react-i18next";
 import ImageCollection from "./ImageCollection";
 import VideoCollection from "./VideoCollection";
 import { useIsMobile } from "../../hooks/common/useIsMobile";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import FileCollection from "./FileCollection";
 import LinkCollection from "./LinkCollection";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
+import DeskSidePanel from "../../components/common/DeskSidePanel";
+import GroupPanelHeader from "../../components/group/GroupPanelHeader";
 export var MediaCollectionTabKey;
 (function (MediaCollectionTabKey) {
     MediaCollectionTabKey["Image"] = "image";
@@ -19,8 +24,18 @@ export var MediaCollectionTabKey;
 })(MediaCollectionTabKey || (MediaCollectionTabKey = {}));
 const MediaCollection = () => {
     const { t } = useTranslation();
-    const [isOpen, { toggle }] = useBoolean(false);
+    const { isOpen, toggle } = useSidePanel("media");
+    const isCrm = useAuthStore((state) => state.isCrm);
     const isMobile = useIsMobile();
+    const triggerRef = useRef(null);
+    // CRM desk: opens like the members panel, inline or as a drawer over the workspace.
+    const hasDeskHost = useDeskPanelHostStore((state) => !!(state.workspace || state.slot));
+    // Drawer renders in-place, so focus is handed back to the trigger explicitly.
+    const handleClose = () => {
+        var _a;
+        toggle();
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     const items = useMemo(() => {
         if (!isOpen)
             return [];
@@ -47,11 +62,12 @@ const MediaCollection = () => {
             },
         ];
     }, [isOpen, t]);
-    return (_jsxs("div", { "data-cp-name": "MediaCollection", className: "inline-flex shrink-0", children: [_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
+    const tabs = (_jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }));
+    return (_jsxs("div", { "data-cp-name": "MediaCollection", className: "inline-flex shrink-0", children: [_jsx(Button, { ref: triggerRef, type: "text", shape: "default", className: headerIconButtonClass(isCrm, isOpen), onClick: toggle, "aria-label": t("media_library_open"), title: t("media_library_open"), children: _jsx(HeaderIcon, { isCrm: isCrm, stroke: "folder", font: "folder-o" }) }), isCrm && hasDeskHost ? (_jsx(DeskSidePanel, { open: isOpen, label: t("media_library_open"), onClose: handleClose, children: () => (_jsxs("div", { className: "flex h-full flex-col bg-white", "data-cp-name": "MediaLibraryPanel", children: [_jsx(GroupPanelHeader, { title: t("library"), onClose: handleClose }), _jsx("div", { className: "flex-1 overflow-hidden", children: tabs })] })) })) : (_jsx(Drawer, { "aria-label": t("media_library_open"), open: isOpen, onClose: handleClose, mask: false, closeIcon: false, styles: {
                     body: {
                         padding: 0,
                         height: "100%",
                     },
-                }, getContainer: false, forceRender: true, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
+                }, getContainer: false, destroyOnHidden: true, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleClose, "aria-label": t("close"), children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: tabs })] }) }))] }));
 };
 export default MediaCollection;

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":"AAWA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAiB/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CAwjBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAwB/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;AA6BD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA4oBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/GroupMembersDrawer.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
 import { Avatar, Button, Drawer, Dropdown, Empty, Input, message, Spin } from "antd";
 import ConfirmModal from "../../components/common/ConfirmModal";
-import { useEffect, useMemo, useState } from "react";
+import DisableSendPermissionConfirm from "../../components/group/DisableSendPermissionConfirm";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useDebounce } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
@@ -18,6 +19,12 @@ import { Icon } from "../../components/icon";
 import AddMemberModal from "../../components/group/AddMemberModal";
 import AdminPermissionModal from "../../components/group/AdminPermissionModal";
 import { isGroupConversation } from "../../utils/imCommon";
+import { useSidePanel } from "../../hooks/common/useSidePanel";
+import { headerIconButtonClass, HeaderIcon } from "./headerIconButton";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
+import DeskSidePanel from "../../components/common/DeskSidePanel";
+import GroupMembersPanelCrm from "./GroupMembersPanelCrm";
+import { buildCrmMemberMenu } from "./groupMemberMenuCrm";
 const getMemberDisplayName = (member) => {
     return member.nickname || member.userID || "";
 };
@@ -35,7 +42,10 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     var _a, _b;
     const { t } = useTranslation();
     const onNavigate = useChatNavigate();
-    const [isOpen, setIsOpen] = useState(false);
+    const { isOpen, open: openPanel, close: closePanel } = useSidePanel("members");
+    const triggerRef = useRef(null);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const host = useDeskPanelHostStore();
     const [showLeaveConfirm, setShowLeaveConfirm] = useState(false);
     const [showAddMember, setShowAddMember] = useState(false);
     const [adminPermissionMember, setAdminPermissionMember] = useState(null);
@@ -122,17 +132,23 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
         if (!groupID || disabled) {
             return;
         }
-        setIsOpen(true);
+        openPanel();
         void refetch();
     };
+    // Drawer renders in-place, so focus is handed back to the trigger explicitly.
     const handleCloseDrawer = () => {
-        setIsOpen(false);
+        var _a;
+        closePanel();
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const isCurrentUserAssigneeOfActiveSession = useMemo(() => {
         if (!currentSession || currentSession.isClosed)
             return false;
         return currentSession.supporterId === authUserID;
     }, [currentSession, authUserID]);
+    const leaveBlockedReason = isCurrentUserAssigneeOfActiveSession
+        ? t("leave_group_assignee_reason")
+        : undefined;
     const handleLeaveGroup = () => {
         if (isCurrentUserAssigneeOfActiveSession) {
             message.error(t("leave_group_assignee_error"));
@@ -163,6 +179,13 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
             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 handleConfirmMuteMember = async () => {
+        if ((confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) !== "mute-member")
+            return;
+        const { member } = confirmMemberAction;
+        setConfirmMemberAction(null);
+        await handleToggleMemberSendMessage(member);
+    };
     const handleConfirmRemoveMember = async () => {
         var _a, _b;
         if (!groupID || (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) !== "remove")
@@ -246,7 +269,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
             message.success(t("leave_group_success"));
             onNavigate(window.location.pathname);
             setShowLeaveConfirm(false);
-            setIsOpen(false);
+            closePanel();
         }
         catch (error) {
             const errorMessage = ((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) || t("leave_group_failed");
@@ -254,8 +277,27 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
         }
     };
     useEffect(() => {
-        setIsOpen(false);
+        closePanel();
     }, [groupID]);
+    const renderCrmPanel = (closeOnEscape) => (_jsx(GroupMembersPanelCrm, { totalCount: members.length, members: sortedMembers.map((member) => isRealGroup ? member : Object.assign(Object.assign({}, member), { roleLabel: "" })), isRealGroup: isRealGroup, isLoading: isLoading || (isSearchActive && isSearching), error: error, isSearchActive: isSearchActive, search: search, onSearchChange: setSearch, canAddMember: canAddMember, onAddMember: () => setShowAddMember(true), onClose: handleCloseDrawer, closeOnEscape: closeOnEscape, buildMenu: (member) => buildCrmMemberMenu({
+            member,
+            isRealGroup,
+            permissions,
+            actingIsOwner,
+            leaveBlockedReason,
+            t,
+            handlers: {
+                onToggleMute: (m) => void handleToggleMemberSendMessage(m),
+                onAskMute: (m) => setConfirmMemberAction({ type: "mute-member", member: m }),
+                onAskTransfer: (m) => setConfirmMemberAction({ type: "transfer-owner", member: m }),
+                onConfigureAdmin: setAdminPermissionMember,
+                onRemoveAdmin: (m) => void handleToggleAdminRole(m),
+                onAskAssignAdmin: (m) => setConfirmMemberAction({ type: "assign-admin", member: m }),
+                onAskRemove: (m) => setConfirmMemberAction({ type: "remove", member: m }),
+                onLeave: handleLeaveGroup,
+            },
+        }) }));
+    const renderCrmHost = () => (_jsx(DeskSidePanel, { open: isOpen, label: t("members"), onClose: handleCloseDrawer, children: renderCrmPanel }));
     const renderContent = () => {
         if (isLoading || (isSearchActive && isSearching)) {
             return (_jsx("div", { className: "flex items-center justify-center h-full min-h-40", children: _jsx(Spin, {}) }));
@@ -302,7 +344,9 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                                 : t("mute_member"),
                             icon: _jsx(Icon, { icon: "bell-off-o", size: 16 }),
                             disabled: !permissions.removeMember,
-                            onClick: () => void handleToggleMemberSendMessage(member),
+                            onClick: () => member.isSendMessageDisabled
+                                ? void handleToggleMemberSendMessage(member)
+                                : setConfirmMemberAction({ type: "mute-member", member }),
                         },
                         {
                             key: "transfer-owner",
@@ -357,24 +401,27 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                             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 }))] }), (isRealGroup || 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));
+                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 }))] }), (isRealGroup || member.isCurrentUser) && (_jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", "aria-label": t("member_actions"), title: t("member_actions"), 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("div", { className: "inline-flex shrink-0", "data-cp-name": "GroupMembersDrawer", children: [_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: handleOpenDrawer, disabled: disabled || !groupID, children: _jsx(Icon, { icon: "user-two-check-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: handleCloseDrawer, mask: false, closeIcon: false, styles: {
+    return (_jsxs("div", { className: "inline-flex shrink-0", "data-cp-name": "GroupMembersDrawer", children: [_jsx(Button, { ref: triggerRef, type: "text", shape: "default", className: headerIconButtonClass(isCrm, isOpen), onClick: handleOpenDrawer, disabled: disabled || !groupID, "aria-label": t("members"), title: t("members"), children: _jsx(HeaderIcon, { isCrm: isCrm, stroke: "users", font: "user-two-check-o" }) }), isCrm && (host.workspace || host.slot) ? (renderCrmHost()) : (_jsx(Drawer, { open: isOpen, "aria-label": t("members"), onClose: handleCloseDrawer, mask: false, closeIcon: false, styles: {
                     body: {
                         padding: 0,
                         height: "100%",
                     },
-                }, getContainer: false, forceRender: true, 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-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() })] }) }), groupID && (_jsx(AddMemberModal, { open: showAddMember, groupID: groupID, onClose: () => setShowAddMember(false) })), groupID && (_jsx(AdminPermissionModal, { open: Boolean(adminPermissionMember), groupID: groupID, onClose: () => setAdminPermissionMember(null), member: adminPermissionMember
+                }, getContainer: false, destroyOnHidden: true, 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-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, "aria-label": t("close"), 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() })] }) })), groupID && (_jsx(AddMemberModal, { open: showAddMember, groupID: groupID, onClose: () => setShowAddMember(false) })), groupID && (_jsx(AdminPermissionModal, { open: Boolean(adminPermissionMember), groupID: groupID, onClose: () => setAdminPermissionMember(null), member: adminPermissionMember
                     ? {
                         userID: adminPermissionMember.userID,
+                        nickname: adminPermissionMember.nickname,
                         permissions: adminPermissionMember.permissions,
                     }
-                    : undefined, onMemberPermissionsSaved: patchMemberPermissions })), _jsx(ConfirmModal, { open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), 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: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "remove", onOk: handleConfirmRemoveMember, onCancel: () => setConfirmMemberAction(null), title: t("remove_member_confirm_title"), okText: t("agree"), cancelText: t("cancel"), okType: "danger", children: _jsx("p", { children: t("remove_member_confirm_message", {
+                    : undefined, onMemberPermissionsSaved: patchMemberPermissions })), _jsx(ConfirmModal, { open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t(isCrm ? "action_cancel" : "cancel"), okType: "danger", confirmLoading: isLeaving, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(DisableSendPermissionConfirm, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "mute-member", title: t("disable_send_permission_title_member", {
+                    name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
+                }), onConfirm: handleConfirmMuteMember, onCancel: () => setConfirmMemberAction(null) }), _jsx(ConfirmModal, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "remove", onOk: handleConfirmRemoveMember, onCancel: () => setConfirmMemberAction(null), title: t("remove_member_confirm_title"), okText: t("agree"), cancelText: t(isCrm ? "action_cancel" : "cancel"), okType: "danger", children: _jsx("p", { children: t("remove_member_confirm_message", {
                         name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
-                    }) }) }), _jsx(ConfirmModal, { 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", children: _jsx("p", { children: t("transfer_owner_confirm_message", {
+                    }) }) }), _jsx(ConfirmModal, { 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(isCrm ? "action_cancel" : "cancel"), okType: "danger", children: _jsx("p", { children: t("transfer_owner_confirm_message", {
                         name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
-                    }) }) }), _jsx(ConfirmModal, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "assign-admin", onOk: handleConfirmAssignAdmin, onCancel: () => setConfirmMemberAction(null), title: t("assign_admin_confirm_title"), okText: t("agree"), cancelText: t("cancel"), children: _jsx("p", { children: t("assign_admin_confirm_message", {
+                    }) }) }), _jsx(ConfirmModal, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "assign-admin", onOk: handleConfirmAssignAdmin, onCancel: () => setConfirmMemberAction(null), title: t("assign_admin_confirm_title"), okText: t("agree"), cancelText: t(isCrm ? "action_cancel" : "cancel"), children: _jsx("p", { children: t("assign_admin_confirm_message", {
                         name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
                     }) }) })] }));
 };

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

@@ -0,0 +1,23 @@
+import type { MenuProps } from "antd";
+import type { MemberDisplayItem } from "./groupMemberTypes";
+interface GroupMembersPanelCrmProps {
+    totalCount: number;
+    members: MemberDisplayItem[];
+    /** Real groups split owners/admins from members; support threads show one list. */
+    isRealGroup: boolean;
+    isLoading: boolean;
+    error?: string;
+    isSearchActive: boolean;
+    search: string;
+    onSearchChange: (value: string) => void;
+    canAddMember: boolean;
+    onAddMember: () => void;
+    onClose: () => void;
+    /** Esc closes the panel when it is not inside an overlay drawer. */
+    closeOnEscape: boolean;
+    buildMenu: (member: MemberDisplayItem) => MenuProps["items"];
+}
+/** CRM members panel: search + add, owners/admins and members lists, per-member action menu. */
+declare const GroupMembersPanelCrm: ({ totalCount, members, isRealGroup, isLoading, error, isSearchActive, search, onSearchChange, canAddMember, onAddMember, onClose, closeOnEscape, buildMenu, }: GroupMembersPanelCrmProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupMembersPanelCrm;
+//# sourceMappingURL=GroupMembersPanelCrm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMembersPanelCrm.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersPanelCrm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAMtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,UAAU,yBAAyB;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC;CAC9D;AAQD,gGAAgG;AAChG,QAAA,MAAM,oBAAoB,GAAI,+JAc3B,yBAAyB,4CA0H3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/message/GroupMembersPanelCrm.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Button, Dropdown, Empty, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { CrmIcon as Icon } from "../../components/group/crmIcon";
+import GroupPanelHeader from "../../components/group/GroupPanelHeader";
+import PersonAvatar from "../../components/group/PersonAvatar";
+import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
+const CHIP = "inline-flex h-[22px] shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 text-xs font-medium";
+const SectionTitle = ({ children }) => (_jsx("h3", { className: "m-0 px-2 pb-1 pt-3 text-xs font-medium text-gray-600", children: children }));
+/** CRM members panel: search + add, owners/admins and members lists, per-member action menu. */
+const GroupMembersPanelCrm = ({ totalCount, members, isRealGroup, isLoading, error, isSearchActive, search, onSearchChange, canAddMember, onAddMember, onClose, closeOnEscape, buildMenu, }) => {
+    const { t } = useTranslation();
+    const rootRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (closeOnEscape)
+            (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [closeOnEscape]);
+    const handleKeyDown = (event) => {
+        if (closeOnEscape && event.key === "Escape" && !event.defaultPrevented) {
+            event.stopPropagation();
+            onClose();
+        }
+    };
+    const privileged = isRealGroup ? members.filter((m) => m.isOwner || m.isAdmin) : [];
+    const regular = isRealGroup ? members.filter((m) => !m.isOwner && !m.isAdmin) : members;
+    const renderRow = (member) => {
+        const items = isRealGroup || member.isCurrentUser ? buildMenu(member) : undefined;
+        const roleChip = !isRealGroup && member.isOwner
+            ? null
+            : member.isOwner
+                ? _jsx("span", { className: `${CHIP} bg-primary-25 text-primary-500`, children: t("group_owner_chip") })
+                : member.isAdmin
+                    ? _jsx("span", { className: `${CHIP} bg-gray-25 text-gray-900`, children: t("group_admin") })
+                    : null;
+        return (_jsxs("li", { className: "flex items-center gap-2.5 rounded-lg p-2", children: [_jsx(PersonAvatar, { name: member.nickname, src: member.faceURL, size: 36 }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1 text-sm font-medium text-gray-900", children: [_jsx("span", { className: "truncate", title: member.nickname, children: member.nickname }), member.isCurrentUser && (_jsxs("span", { className: "shrink-0 text-xs font-normal text-gray-600", children: ["(", t("you"), ")"] }))] }), roleChip, member.isSendMessageDisabled && !member.isOwner && (_jsxs("span", { className: `${CHIP} bg-warning-25 text-warning-800`, children: [_jsx(Icon, { icon: "bell-off-o", size: 12 }), t("send_disabled_chip")] })), items && items.length > 0 && (_jsx(Dropdown, { menu: { items, style: { width: 260 } }, trigger: ["click"], placement: "bottomRight", children: _jsx("button", { type: "button", "aria-label": t("member_actions_for", { name: member.nickname }), title: t("member_actions_for", { name: member.nickname }), className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 aria-expanded:bg-gray-25 aria-expanded:text-gray-900 ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "more-horizontal-b", size: 18 }) }) }))] }, member.userID));
+    };
+    const renderList = (list) => (_jsx("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", children: list.map(renderRow) }));
+    const renderBody = () => {
+        if (isLoading) {
+            return _jsx("div", { className: "flex min-h-40 items-center justify-center", children: _jsx(Spin, {}) });
+        }
+        if (error) {
+            return _jsx("div", { className: "flex min-h-40 items-center justify-center px-6 text-center text-sm text-gray-600", children: t(error) });
+        }
+        if (!members.length) {
+            return _jsx(Empty, { description: isSearchActive ? t("no_member_found") : t("no_group_members") });
+        }
+        return (_jsxs(_Fragment, { children: [privileged.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: t("members_owner_admin_section") }), renderList(privileged)] })), regular.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { children: t("members_regular_section", { count: regular.length }) }), renderList(regular)] }))] }));
+    };
+    return (_jsxs("div", { ref: rootRef, tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": t("members"), className: "flex h-full flex-col bg-white outline-none", "data-cp-name": "GroupMembersPanelCrm", children: [_jsx(GroupPanelHeader, { title: t("members_panel_title", { count: totalCount }), onClose: onClose }), _jsxs("div", { className: "flex gap-2 px-4 pb-1 pt-3", children: [_jsxs("label", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg bg-gray-5 px-2.5 text-gray-600 focus-within:outline focus-within:outline-2 focus-within:outline-primary-200", children: [_jsx("span", { className: "sr-only", children: t("members_search_label") }), _jsx(Icon, { icon: "search-o", size: 16, className: "shrink-0" }), _jsx("input", { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), placeholder: t("members_search_label"), className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" })] }), canAddMember && (_jsx(Button, { type: "primary", className: "h-9 shrink-0 px-3", icon: _jsx(Icon, { icon: "user-add-o", size: 16 }), onClick: onAddMember, children: t("members_add") }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-2 pb-2", children: renderBody() })] }));
+};
+export default GroupMembersPanelCrm;

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;AAgB/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,4CA+QpB,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;AASzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAgB/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,4CAuZpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -5,41 +5,46 @@ import { Icon } from "../../components/icon";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import useConversationStore from "../../store/conversation";
 import MediaCollection from "../../components/media-collection";
-import { useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SessionStatus, SessionTag } from "../../types/chat";
 import SelectSession from "./SelectSession";
 import { useUpdateSession } from "../../hooks/session/useUpdateSession";
+import { useEndSession } from "../../hooks/session/useEndSession";
+import { useFlushPendingCloseOnLeave, useIsSessionClosePending, } from "../../hooks/session/usePendingSessionClose";
+import EndSessionConfirm from "../../components/thread/EndSessionConfirm";
 import useAuthStore from "../../store/auth";
+import { headerIconButtonClass, HeaderIcon } from "./headerIconButton";
+import { useSidePanel } from "../../hooks/common/useSidePanel";
 import SearchDrawer from "../../components/search-conversation/SearchDrawer";
 import { isGroupSession, isGroupConversation } from "../../utils/imCommon";
 import { useGroupPermission } from "../../hooks/group/useGroupPermission";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import GroupMembersDrawer from "./GroupMembersDrawer";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
-import { useGetUserSideInfo } from "../../hooks/session/useGetUserSideInfo";
+import { useBotSessionOwnerIdentity } from "../../hooks/session/useBotSessionOwnerIdentity";
 import { PeerType } from "../../types/conversation";
-import { isSupportSessionAgentView, resolveBotSessionOwnerIdentity, resolveSupportSessionOwnerId, } from "../../utils/conversation";
+import { shouldShowHeaderMemberCount } from "../../utils/headerMemberCount";
+import TintedAvatar from "../../components/common/TintedAvatar";
+import { splitDisplayName } from "../../components/conversation/rowDisplayName";
 const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const { t } = useTranslation();
     const isCx = useAuthStore((state) => state.isCx);
     const isCrm = useAuthStore((state) => state.isCrm);
-    const selfUserID = useAuthStore((state) => state.userID);
+    const { isOpen: isInfoOpenState } = useSidePanel("info");
+    const isInfoPanelOpen = isInfoOpenState;
+    const handleInfoToggle = () => onOpenThreadInfo === null || onOpenThreadInfo === void 0 ? void 0 : onOpenThreadInfo();
     const conversationData = useConversationStore((state) => state.conversationData);
     const groupID = conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID;
     const currentGroupInfo = useConversationStore((state) => groupID ? state.currentGroupInfo.get(groupID) : undefined);
     const { mutate: updateSession } = useUpdateSession();
     const permissions = useGroupPermission(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID);
     const { avatar, displayName } = useConversationDisplayData(conversationData);
-    // Same chat-service user record as the desk list's session owner.
-    const botSessionOwnerId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.BOT &&
-        isSupportSessionAgentView(conversationData, selfUserID)
-        ? resolveSupportSessionOwnerId(conversationData)
-        : "";
-    const { data: botSessionOwner } = useGetUserSideInfo((_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) !== null && _a !== void 0 ? _a : "", botSessionOwnerId);
-    const ownerIdentity = resolveBotSessionOwnerIdentity(conversationData, botSessionOwner, selfUserID);
-    const headerName = (_b = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _b !== void 0 ? _b : displayName;
+    const { identity: ownerIdentity, owner: botSessionOwner, isLoading: isOwnerLoading, } = useBotSessionOwnerIdentity(conversationData);
+    // Avoids flashing the bot group's avatar and name before the customer arrives.
+    const showOwnerPlaceholder = isCrm && isOwnerLoading;
+    const headerName = (_a = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _a !== void 0 ? _a : displayName;
     const shouldShowMemberCount = isGroupSession(conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType);
     // A "real" group (peerType GROUP) vs a CX support thread that happens to
     // use a Group/WorkingGroup session under the hood (e.g. a multi-agent
@@ -51,17 +56,41 @@ const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, })
     // may view the member list, so it's bypassed there. The member list
     // button itself still shows for both (shouldShowMemberCount).
     const isRealGroup = isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
+    // CRM shows a customer's name alone; the username sits in the sub-line. Group names stay whole.
+    const { name: headerShortName, username: headerUsername } = isRealGroup
+        ? { name: headerName !== null && headerName !== void 0 ? headerName : "", username: undefined }
+        : splitDisplayName(headerName !== null && headerName !== void 0 ? headerName : "");
     // Group info is only fetched for peerType GROUP; other threads count the
     // same member list the drawer shows, so the two never disagree.
     const usesGroupInfoCount = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.GROUP;
-    const { members: threadMembers } = useGroupMembers(shouldShowMemberCount && !usesGroupInfoCount ? groupID : undefined);
+    const showMemberCountLine = shouldShowHeaderMemberCount({
+        isCrm,
+        isGroupSession: shouldShowMemberCount,
+        isRealGroup,
+    });
+    const { members: threadMembers } = useGroupMembers(showMemberCountLine && !usesGroupInfoCount ? groupID : undefined);
     const memberCount = usesGroupInfoCount
-        ? ((_c = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _c !== void 0 ? _c : 0)
+        ? (_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount) !== null && _b !== void 0 ? _b : 0
         : threadMembers.length;
     const canViewMemberList = shouldShowMemberCount &&
         isJoined === true &&
         isCrm &&
         (!isRealGroup || permissions.viewMemberInformation);
+    // 1-1 and support threads show "username · Phiên N" instead of a head-count.
+    const metaParts = [];
+    if (!showMemberCountLine) {
+        const username = (botSessionOwner === null || botSessionOwner === void 0 ? void 0 : botSessionOwner.username) || headerUsername;
+        if (username) {
+            metaParts.push(_jsx("span", { className: "min-w-[48px] truncate", title: username, children: username }));
+        }
+        if (currentSession === null || currentSession === void 0 ? void 0 : currentSession.order) {
+            metaParts.push(_jsx("span", { className: "shrink-0 whitespace-nowrap", children: t("session_label", { order: currentSession.order }) }));
+        }
+    }
+    const endSession = useEndSession();
+    const isEnding = useIsSessionClosePending(currentSession === null || currentSession === void 0 ? void 0 : currentSession.id);
+    const [isEndConfirmOpen, setIsEndConfirmOpen] = useState(false);
+    useFlushPendingCloseOnLeave(conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, isCrm);
     const [currentSessionStatus, setCurrentSessionStatus] = useState(SessionStatus.UNASSIGNED);
     const [currentSessionTag, setCurrentSessionTag] = useState(SessionTag.NONE);
     const statusOptions = useMemo(() => {
@@ -70,65 +99,73 @@ const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, })
                 label: t("unassigned"),
                 value: SessionStatus.UNASSIGNED,
                 tintColorClassname: "!text-amber-500",
-                tintColorClassnameBg: "!bg-amber-500",
+                tintColorClassnameBg: isCrm ? "!bg-warning-400" : "!bg-amber-500",
                 bgTintColorClassname: "!bg-amber-100",
             },
             {
                 label: t("waiting_process"),
                 value: SessionStatus.WAITING_PROCESS,
                 tintColorClassname: "!text-orange-500",
-                tintColorClassnameBg: "!bg-orange-500",
+                tintColorClassnameBg: isCrm ? "!bg-warning-400" : "!bg-orange-500",
                 bgTintColorClassname: "!bg-orange-100",
             },
             {
                 label: t("in_process"),
                 value: SessionStatus.IN_PROCESS,
                 tintColorClassname: "!text-blue-500",
-                tintColorClassnameBg: "!bg-blue-500",
+                tintColorClassnameBg: isCrm ? "!bg-primary-400" : "!bg-blue-500",
                 bgTintColorClassname: "!bg-blue-100",
             },
             {
                 label: t("completed"),
                 value: SessionStatus.COMPLETED,
                 tintColorClassname: "!text-green-500",
-                tintColorClassnameBg: "!bg-green-500",
+                tintColorClassnameBg: isCrm ? "!bg-success-400" : "!bg-green-500",
                 bgTintColorClassname: "!bg-green-100",
             },
         ];
-    }, [t]);
+    }, [t, isCrm]);
     const tagOptions = useMemo(() => {
         return [
             {
-                label: t("select_tag"),
+                label: t(isCrm ? "reply_status_placeholder" : "select_tag"),
                 value: SessionTag.NONE,
                 tintColorClassname: "!text-gray-500",
-                tintColorClassnameBg: "!bg-gray-500",
+                tintColorClassnameBg: isCrm ? "!bg-gray-400" : "!bg-gray-500",
                 bgTintColorClassname: "!bg-gray-100",
             },
             {
                 label: t("awaiting_reply"),
                 value: SessionTag.AWAITING_REPLY,
                 tintColorClassname: "!text-purple-500",
-                tintColorClassnameBg: "!bg-purple-500",
+                tintColorClassnameBg: isCrm ? "!bg-secondary-400" : "!bg-purple-500",
                 bgTintColorClassname: "!bg-purple-100",
             },
             {
                 label: t("slow_processing"),
                 value: SessionTag.SLOW_PROCESSING,
                 tintColorClassname: "!text-red-500",
-                tintColorClassnameBg: "!bg-red-500",
+                tintColorClassnameBg: isCrm ? "!bg-danger-600" : "!bg-red-500",
                 bgTintColorClassname: "!bg-red-100",
             },
             {
                 label: t("temporarily_paused"),
                 value: SessionTag.TEMPORARILY_PAUSED,
                 tintColorClassname: "!text-gray-500",
-                tintColorClassnameBg: "!bg-gray-500",
+                tintColorClassnameBg: isCrm ? "!bg-gray-400" : "!bg-gray-500",
                 bgTintColorClassname: "!bg-gray-100",
             },
         ];
-    }, [t]);
+    }, [t, isCrm]);
     const handleUpdateSession = (value, type, isSameValue) => {
+        // CRM: completing an in-process session is an end-session action with undo.
+        if (isCrm &&
+            type === "status" &&
+            value === SessionStatus.COMPLETED &&
+            (currentSession === null || currentSession === void 0 ? void 0 : currentSession.status) === SessionStatus.IN_PROCESS) {
+            setIsEndConfirmOpen(true);
+            return;
+        }
         let newValue = value;
         if (type === "tag" &&
             value === SessionTag.TEMPORARILY_PAUSED &&
@@ -165,6 +202,18 @@ const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, })
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", "data-cp-name": "MessageHeader", children: [ownerIdentity ? (_jsx(Avatar, { src: ownerIdentity.avatarUrl, size: "large", className: "min-w-10 min-h-10", children: ((_d = headerName === null || headerName === void 0 ? void 0 : headerName.charAt) === null || _d === void 0 ? void 0 : _d.call(headerName, 0)) || "A" })) : shouldShowMemberCount ? (_jsx(GroupCompositeAvatar, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, faceURL: avatar, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: displayName, size: 40, className: "min-w-10 min-h-10" })) : (_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_e = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _e === void 0 ? void 0 : _e.call(displayName, 0)) || "A" })), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: headerName || "" }), shouldShowMemberCount && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: memberCount }) }))] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), canViewMemberList && (_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-[var(--dc-color-header-icon)] 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-[var(--dc-color-header-icon)] 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 ${isCrm
+            ? "flex-nowrap border-gray-25 [container-type:inline-size]"
+            : "flex-wrap"}`, "data-cp-name": "MessageHeader", children: [showOwnerPlaceholder ? (_jsx("span", { "aria-hidden": true, className: "h-10 w-10 shrink-0 animate-pulse rounded-full bg-gray-25" })) : ownerIdentity ? (isCrm ? (_jsx(TintedAvatar, { name: headerShortName, src: ownerIdentity.avatarUrl, size: 40 })) : (_jsx(Avatar, { src: ownerIdentity.avatarUrl, size: "large", alt: "", className: "min-w-10 min-h-10", children: ((_c = headerName === null || headerName === void 0 ? void 0 : headerName.charAt) === null || _c === void 0 ? void 0 : _c.call(headerName, 0)) || "A" }))) : shouldShowMemberCount ? (_jsx(GroupCompositeAvatar, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, faceURL: avatar, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: displayName, size: 40, className: "min-w-10 min-h-10" })) : isCrm ? (_jsx(TintedAvatar, { name: headerShortName, src: avatar, size: 40 })) : (_jsx(Avatar, { src: avatar, size: "large", alt: "", className: "min-w-10 min-h-10", children: ((_d = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _d === void 0 ? void 0 : _d.call(displayName, 0)) || "A" })), _jsxs("div", { className: `flex flex-col overflow-hidden flex-1 ${isCrm ? "min-w-[96px]" : ""}`, children: [showOwnerPlaceholder ? (_jsxs("span", { "aria-hidden": true, className: "flex flex-col gap-1.5 py-0.5", children: [_jsx("span", { className: "h-4 w-36 animate-pulse rounded bg-gray-25" }), _jsx("span", { className: "h-3 w-24 animate-pulse rounded bg-gray-25" })] })) : (_jsx("p", { className: `text-base truncate ${isCrm ? "m-0 font-semibold leading-[normal] text-gray-900" : ""}`, title: headerName || undefined, children: (isCrm ? headerShortName : headerName) || "" })), showMemberCountLine && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: memberCount }) })), isCrm && !showOwnerPlaceholder && metaParts.length > 0 && (_jsx("p", { className: "m-0 flex min-w-0 items-center gap-1 overflow-hidden whitespace-nowrap text-xs text-gray-600 [container-type:inline-size]", "data-testid": "header-meta-line", children: metaParts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { "aria-hidden": true, className: "h-[3px] w-[3px] shrink-0 rounded-full bg-gray-200" })), part] }, index))) }))] }), _jsxs("div", { className: `flex items-center justify-end ${isCrm
+                    ? "shrink-0 gap-3 [@container(max-width:699px)]:gap-2"
+                    : "gap-2 overflow-hidden"}`, children: [_jsxs("div", { className: isCrm ? "flex items-center gap-2" : "contents", children: [isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t(isCrm ? "reply_status_placeholder" : "select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: isEnding ? SessionStatus.COMPLETED : currentSessionStatus, disabled: isEnding, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) }))] }), _jsxs("div", { className: isCrm
+                            ? "flex items-center gap-1 [@container(max-width:699px)]:gap-0.5"
+                            : "contents", children: [_jsx(SearchDrawer, {}), canViewMemberList && (_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: headerIconButtonClass(isCrm, isInfoPanelOpen), onClick: handleInfoToggle, "aria-label": t("thread_info_open"), title: t("thread_info_open"), children: _jsx(HeaderIcon, { isCrm: isCrm, stroke: "panel-right", font: "align-justify-o" }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: onClose, "aria-label": t("close"), children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }), isCrm && currentSession && (_jsx(EndSessionConfirm, { open: isEndConfirmOpen, session: currentSession, customerName: headerName || "", onConfirm: () => {
+                    setIsEndConfirmOpen(false);
+                    endSession({
+                        sessionId: currentSession.id,
+                        conversationId: currentSession.conversationId,
+                    });
+                }, onCancel: () => setIsEndConfirmOpen(false) }))] }));
 };
 export default MessageHeader;

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

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import { HTMLAttributes, ReactNode, Ref } from "react";
 import type { MessageListLoadState } from "../../hooks/message/useMessageListScroll";
 export interface MessageInfiniteScrollProps {
     scrollRef: Ref<HTMLDivElement>;
@@ -10,7 +10,9 @@ export interface MessageInfiniteScrollProps {
     children: ReactNode;
     empty?: ReactNode;
     containerClassName?: string;
+    /** Extra attributes for the scroll container (CRM keyboard access). */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
 }
-declare const MessageInfiniteScroll: ({ scrollRef, scrollableTargetId, loadState, moreOldLoading, onLoadMoreOld, onScroll, children, empty, containerClassName, }: MessageInfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageInfiniteScroll: ({ scrollRef, scrollableTargetId, loadState, moreOldLoading, onLoadMoreOld, onScroll, children, empty, containerClassName, containerProps, }: MessageInfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageInfiniteScroll;
 //# sourceMappingURL=MessageInfiniteScroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInfiniteScroll.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageInfiniteScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,oBAAoB,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,qBAAqB,GAAI,6HAU5B,0BAA0B,4CAqC5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"MessageInfiniteScroll.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageInfiniteScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,oBAAoB,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uEAAuE;IACvE,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,QAAA,MAAM,qBAAqB,GAAI,6IAW5B,0BAA0B,4CAsC5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/MessageInfiniteScroll.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Spin } from "antd";
 import clsx from "clsx";
 import InfiniteScroll from "react-infinite-scroll-component";
-const MessageInfiniteScroll = ({ scrollRef, scrollableTargetId, loadState, moreOldLoading = false, onLoadMoreOld, onScroll, children, empty, containerClassName, }) => (_jsx("div", { id: scrollableTargetId, ref: scrollRef, className: clsx("flex h-full flex-col-reverse overflow-x-hidden overflow-y-auto pb-3", containerClassName), "data-cp-name": "MessageInfiniteScroll", children: empty && loadState.messageList.length === 0 ? (empty) : (_jsx(InfiniteScroll, { dataLength: loadState.messageList.length, next: onLoadMoreOld, className: "flex w-full min-w-0 flex-col-reverse", inverse: true, hasMore: loadState.hasMoreOld, loader: moreOldLoading ? (_jsx("div", { className: "flex w-full items-center justify-center py-2", children: _jsx(Spin, { size: "small" }) })) : (_jsx("span", { className: "sr-only" })), scrollableTarget: scrollableTargetId, onScroll: (e) => onScroll(e), children: children })) }));
+const MessageInfiniteScroll = ({ scrollRef, scrollableTargetId, loadState, moreOldLoading = false, onLoadMoreOld, onScroll, children, empty, containerClassName, containerProps, }) => (_jsx("div", Object.assign({ id: scrollableTargetId, ref: scrollRef, className: clsx("flex h-full flex-col-reverse overflow-x-hidden overflow-y-auto pb-3", containerClassName), "data-cp-name": "MessageInfiniteScroll" }, containerProps, { children: empty && loadState.messageList.length === 0 ? (empty) : (_jsx(InfiniteScroll, { dataLength: loadState.messageList.length, next: onLoadMoreOld, className: "flex w-full min-w-0 flex-col-reverse", inverse: true, hasMore: loadState.hasMoreOld, loader: moreOldLoading ? (_jsx("div", { className: "flex w-full items-center justify-center py-2", children: _jsx(Spin, { size: "small" }) })) : (_jsx("span", { className: "sr-only" })), scrollableTarget: scrollableTargetId, onScroll: (e) => onScroll(e), children: children })) })));
 export default MessageInfiniteScroll;