@droppii-org/chat-sdk 0.6.55 → 0.7.0

package/dist/components/thread/GroupThreadInfo.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Input, Modal, Switch, message } from "antd";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useTranslation } from "react-i18next";
-import { GroupMemberRole, GroupStatus, MessageReceiveOptType } from "@droppii-org/wasm-client-sdk";
+import { GroupMemberRole, GroupStatus, GroupVisibility, MessageReceiveOptType } from "@droppii-org/wasm-client-sdk";
 import { Icon } from "../../components/icon";
 import useConversationStore from "../../store/conversation";
+import useAuthStore from "../../store/auth";
 import { useLeaveConversation } from "../../hooks/session/useLeaveConversation";
 import { useDeleteConversation } from "../../hooks/session/useDeleteConversation";
 import { useToggleConversationNotification } from "../../hooks/session/useToggleConversationNotification";
@@ -17,15 +18,21 @@ import { useUploadFile } from "../../hooks/common/useUploadFile";
 import { ACCEPTED_IMAGE_TYPES, MAX_IMAGE_SIZE_MB } from "../../utils/fileValidation";
 import AdminPermissionModal from "../../components/group/AdminPermissionModal";
 import MemberPermissionPanel from "../../components/group/MemberPermissionPanel";
+import DisableSendPermissionConfirm from "../../components/group/DisableSendPermissionConfirm";
 import InviteLinkPanel from "../../components/group/InviteLinkPanel";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
+import GroupPanelHeader from "../../components/group/GroupPanelHeader";
+import GroupInfoBodyCrm from "./GroupInfoBodyCrm";
 const GroupThreadInfo = ({ onClose, config }) => {
     var _a, _b, _c, _d;
     const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
     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) || "";
+    // The header already shows the conversation name; keep it here while group info is missing.
+    const groupDisplayName = (currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName) || (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "";
     const permissions = useGroupPermission(groupID);
     const currentMemberInGroup = useConversationStore((state) => state.currentMemberInGroup.get(groupID));
     // Muted-chat-list and disband-group aren't part of the 11-permission
@@ -182,6 +189,13 @@ const GroupThreadInfo = ({ onClose, config }) => {
     const handleToggleSendMessage = (checked) => {
         if (!groupID || !isOwner)
             return;
+        if (!checked && isCrm) {
+            setConfirmAction("mute-all");
+            return;
+        }
+        applySendMessage(checked);
+    };
+    const applySendMessage = (checked) => {
         const previous = allowSendMessage;
         setAllowSendMessage(checked);
         toggleSendMessage({ groupID, allowSendMessage: checked }, {
@@ -242,9 +256,12 @@ 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", "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-[var(--dc-color-primary-hover)] text-[var(--dc-color-primary-hover)] 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-[var(--dc-color-primary-hover)] 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, { ref: descriptionInputRef, value: descriptionValue, onChange: (event) => setDescriptionValue(event.target.value), placeholder: t("enter_group_description"), autoSize: { minRows: 1, maxRows: 4 }, maxLength: 500, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("span", { className: "self-end text-xs text-gray-400", children: [descriptionValue.length, " / 500"] }), _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-[var(--dc-color-primary-hover)] text-[var(--dc-color-primary-hover)] 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-[var(--dc-color-primary-hover)] 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" })] })] })), isInviteLinkFeatureEnabled && !isViewOnlyMember && (_jsx("div", { className: "mx-4 mt-3 rounded-lg overflow-hidden bg-[#f5f5f5]", children: _jsxs("button", { type: "button", className: "w-full flex items-center justify-between px-3 py-3 text-left text-sm", onClick: () => setActiveRow("invite-link"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx(Icon, { icon: "link-alt-o", size: 18 }), t("invite_via_link")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }) })), _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 }), _jsx(InviteLinkPanel, { open: activeRow === "invite-link", groupID: groupID, conversationID: conversationID, onClose: () => setActiveRow(null) }), (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") }) }))] }));
+    return (_jsxs("div", { className: "h-full w-full bg-white flex flex-col relative overflow-hidden", "data-cp-name": "GroupThreadInfo", children: [isCrm ? (_jsxs(_Fragment, { children: [_jsx(GroupPanelHeader, { title: t("group_info_title"), onClose: onClose }), _jsx(GroupInfoBodyCrm, { groupID: groupID, groupName: groupDisplayName, faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, introduction: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction, memberCount: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.memberCount, isPublic: (currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.visibility) === GroupVisibility.Public, canEditAvatar: permissions.updateGroupAvatar, canEditName: permissions.updateGroupName, canEditDescription: permissions.updateGroupDescription, canConfigPermissions: permissions.configGroupPermission, showInviteLink: isInviteLinkFeatureEnabled && !isViewOnlyMember, showAllowSend: Boolean(config === null || config === void 0 ? void 0 : config.showAllowSendMessage) && isOwner, isOwner: isOwner, isAdminOrOwner: isAdminOrOwner, isViewOnlyMember: isViewOnlyMember, notifyEnabled: notifyEnabled, isTogglingNotification: isTogglingNotification, allowSendMessage: allowSendMessage, isTogglingSendMessage: isTogglingSendMessage, isAvatarUploading: isAvatarUploading, isSaving: isSavingGroupInfo, editingField: editingField, nameValue: nameValue, descriptionValue: descriptionValue, avatarInputRef: avatarInputRef, onNameChange: setNameValue, onDescriptionChange: setDescriptionValue, onStartEdit: (field) => (field === "name" ? startEditName() : startEditDescription()), onCancelEdit: (field) => (field === "name" ? cancelEditName() : cancelEditDescription()), onSaveEdit: (field) => (field === "name" ? saveName() : saveDescription()), onAvatarClick: handleAvatarClick, onAvatarSelect: handleAvatarSelect, onToggleNotification: handleToggleNotification, onToggleSendMessage: handleToggleSendMessage, onOpenRow: setActiveRow, onConfirm: setConfirmAction })] })) : (_jsxs(_Fragment, { 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: groupDisplayName, 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: groupDisplayName }), 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-[var(--dc-color-primary-hover)] text-[var(--dc-color-primary-hover)] 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-[var(--dc-color-primary-hover)] 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, { ref: descriptionInputRef, value: descriptionValue, onChange: (event) => setDescriptionValue(event.target.value), placeholder: t("enter_group_description"), autoSize: { minRows: 1, maxRows: 4 }, maxLength: 500, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("span", { className: "self-end text-xs text-gray-400", children: [descriptionValue.length, " / 500"] }), _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-[var(--dc-color-primary-hover)] text-[var(--dc-color-primary-hover)] 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-[var(--dc-color-primary-hover)] 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" })] })] })), isInviteLinkFeatureEnabled && !isViewOnlyMember && (_jsx("div", { className: "mx-4 mt-3 rounded-lg overflow-hidden bg-[#f5f5f5]", children: _jsxs("button", { type: "button", className: "w-full flex items-center justify-between px-3 py-3 text-left text-sm", onClick: () => setActiveRow("invite-link"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx(Icon, { icon: "link-alt-o", size: 18 }), t("invite_via_link")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }) })), _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(isCrm ? "action_cancel" : "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(isCrm ? "action_cancel" : "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(isCrm ? "action_cancel" : "cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) }), _jsx(DisableSendPermissionConfirm, { open: confirmAction === "mute-all", title: t("disable_send_permission_title_all_members"), onConfirm: () => {
+                    setConfirmAction(null);
+                    applySendMessage(false);
+                }, onCancel: () => setConfirmAction(null) }), _jsx(MemberPermissionPanel, { open: activeRow === "member-permission", groupID: groupID, onClose: () => setActiveRow(null) }), _jsx(AdminPermissionModal, { open: activeRow === "admin-permission", groupID: groupID, onClose: () => setActiveRow(null), inline: true }), _jsx(InviteLinkPanel, { open: activeRow === "invite-link", groupID: groupID, conversationID: conversationID, onClose: () => setActiveRow(null) }), (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

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { TooltipProps } from "antd";
 interface SupporterInfo {
     avatar: string;
     username: string;
@@ -11,7 +12,8 @@ interface ManualAssignPopoverProps {
     teamId?: string;
     children?: ReactNode;
     excludeCurrentUser?: boolean;
+    placement?: TooltipProps["placement"];
 }
-declare const ManualAssignPopover: ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser, }: ManualAssignPopoverProps) => import("react/jsx-runtime").JSX.Element;
+declare const ManualAssignPopover: ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser, placement, }: ManualAssignPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default ManualAssignPopover;
 //# sourceMappingURL=ManualAssignPopover.d.ts.map

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;AA+CD,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;AAIjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAkBzC,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;IAC7B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC;AA0ED,QAAA,MAAM,mBAAmB,GAAI,wFAO1B,wBAAwB,4CA2O1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/thread/ManualAssignPopover.js

@@ -1,27 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { Popover, Input, Avatar, Spin, Badge, Divider } from "antd";
+import { useEscapeLayer } from "../../hooks/common/useEscapeLayer";
+import { useCloseOnSidePanelOpen } from "../../hooks/common/useCloseOnSidePanelOpen";
+import { Popover, Input, Spin, Divider, Tooltip } from "antd";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { Icon } from "../../components/icon";
+import { AdaptiveIcon } from "../../components/icon/AdaptiveIcon";
 import { useGetTeamSupporters } from "../../hooks/session/useGetTeamSupporters";
 import { useAssignSession, useAutoAssignSession, } from "../../hooks/session/useAssignSession";
 import { message as antdMessage } from "antd";
 import AssignConfirmModal from "./AssignConfirmModal";
 import { useDebounce } from "ahooks";
 import useAuthStore from "../../store/auth";
+import TintedAvatar from "../../components/common/TintedAvatar";
 const SEARCH_DEBOUNCE_WAIT = 300;
 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), "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] })) })] }));
+    return (_jsxs("div", { role: "option", "aria-selected": false, tabIndex: 0, className: "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors cursor-pointer hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", onClick: () => onClick(supporter), onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(supporter);
+            }
+        }, "data-cp-name": "SupporterItem", children: [_jsxs("span", { className: "relative shrink-0", children: [_jsx(TintedAvatar, { name: (_a = supporter.displayName) !== null && _a !== void 0 ? _a : "", src: supporter.avatar, size: 32 }), _jsx("span", { "aria-hidden": true, className: clsx("absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-white", isOnline ? "bg-success-400" : "bg-gray-200") })] }), _jsx("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm truncate", children: supporter.displayName }), isCurrentUser && (_jsx("span", { className: "text-xs text-primary-400 shrink-0", children: t("current_account") }))] }), supporter.username && (_jsx("span", { className: "truncate text-xs text-gray-600", children: supporter.username }))] }) }), _jsx("div", { className: "flex items-center gap-2 shrink-0", children: !!supporter.openSessionCount && supporter.openSessionCount > 0 && (_jsx(Tooltip, { title: t("manual_assign_open_sessions", {
+                        count: supporter.openSessionCount,
+                    }), children: _jsxs("span", { className: "flex items-center gap-0.5 bg-primary-400 text-white text-xs font-medium px-1.5 py-0.5 rounded-full", children: [_jsx(AdaptiveIcon, { stroke: "message-circle", font: "chat-square-b", size: 11, strokeSize: 12 }), supporter.openSessionCount] }) })) })] }));
 };
-const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser = false, }) => {
-    var _a, _b;
+const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, children, excludeCurrentUser = false, placement = "topLeft", }) => {
+    var _a;
     const { t } = useTranslation();
     const authUserID = useAuthStore((state) => state.userID);
     const [open, setOpen] = useState(false);
+    useCloseOnSidePanelOpen(() => setOpen(false));
+    useEscapeLayer(open, () => setOpen(false));
     const [searchText, setSearchText] = useState("");
     const [selectedAgent, setSelectedAgent] = useState(null);
     const [confirmModalOpen, setConfirmModalOpen] = useState(false);
@@ -92,9 +104,9 @@ const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, childre
             setSearchText("");
         }
     };
-    const popoverContent = (_jsxs("div", { className: "w-64", children: [_jsxs("button", { type: "button", className: clsx("flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors", isAutoAssignDisabled
+    const popoverContent = (_jsxs("div", { className: "w-64", children: [_jsxs("button", { type: "button", className: clsx("flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors", isAutoAssignDisabled
                     ? "cursor-not-allowed text-gray-400"
-                    : "text-gray-700 hover:bg-[#f5f5f5]"), onClick: handleAutoAssign, disabled: isAutoAssignDisabled, children: [isAutoAssigning ? (_jsx(Spin, { size: "small" })) : (_jsx("span", { className: "text-blue-500", children: _jsx(Icon, { icon: "refresh-b", size: 20 }) })), _jsx("span", { children: t("manual_assign_button_auto_reassign") })] }), _jsx(Divider, { className: "my-2" }), _jsx("div", { className: "mb-2", children: _jsx(Input, { autoFocus: true, placeholder: t("manual_assign_search_placeholder"), value: searchText, onChange: (e) => setSearchText(e.target.value), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }) }), _jsx("div", { className: "max-h-72 overflow-y-auto", role: "listbox", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Spin, {}) })) : supporters && supporters.length > 0 ? (_jsx("div", { className: clsx("flex flex-col transition-opacity duration-200", isFetching && "opacity-50 pointer-events-none"), children: [...supporters]
+                    : "text-gray-900 hover:bg-gray-5"), onClick: handleAutoAssign, disabled: isAutoAssignDisabled, children: [isAutoAssigning ? (_jsx(Spin, { size: "small" })) : (_jsx("span", { className: "text-primary-400", children: _jsx(AdaptiveIcon, { stroke: "refresh-cw", font: "refresh-b", size: 20, strokeSize: 18 }) })), _jsx("span", { children: t("manual_assign_button_auto_reassign") })] }), _jsx(Divider, { className: "my-2" }), _jsx("div", { className: "mb-2", children: _jsx(Input, { autoFocus: true, placeholder: t("manual_assign_search_placeholder"), value: searchText, onChange: (e) => setSearchText(e.target.value), prefix: _jsx(AdaptiveIcon, { stroke: "search", font: "search-o", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }) }), _jsx("div", { className: "max-h-72 overflow-y-auto", role: "listbox", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Spin, {}) })) : supporters && supporters.length > 0 ? (_jsx("div", { className: clsx("flex flex-col transition-opacity duration-200", isFetching && "opacity-50 pointer-events-none"), children: [...supporters]
                         .filter((item) => item.memberId !== (supporter === null || supporter === void 0 ? void 0 : supporter.id))
                         .filter((item) => !excludeCurrentUser || item.memberId !== authUserID)
                         .sort((supporterA, supporterB) => {
@@ -108,8 +120,8 @@ const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, childre
                         });
                     })
                         .map((item) => (_jsx(SupporterItem, { supporter: item, onClick: handleSelectAgent, isCurrentUser: item.memberId === authUserID }, item.memberId))) })) : (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx("span", { className: "text-sm text-gray-400", children: t("manual_assign_no_results") }) })) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(Popover, { content: popoverContent, trigger: "click", open: open, onOpenChange: handleOpenChange, placement: "topLeft", arrow: false, children: children !== null && children !== void 0 ? children : (_jsxs("div", { role: "button", tabIndex: 0, "aria-label": t("manual_assign_button_reassign"), className: clsx("flex items-center border border-gray-200 rounded-lg p-1 gap-1 transition-opacity", isSubmitting
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { content: popoverContent, trigger: "click", open: open, onOpenChange: handleOpenChange, placement: placement, arrow: false, children: children !== null && children !== void 0 ? children : (_jsxs("button", { type: "button", "aria-label": t("manual_assign_button_reassign"), className: clsx("flex items-center border border-gray-200 rounded-lg p-1 gap-1 bg-transparent transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", isSubmitting
                         ? "opacity-50 pointer-events-none"
-                        : "cursor-pointer hover:opacity-80"), children: [_jsx(Avatar, { src: supporter === null || supporter === void 0 ? void 0 : supporter.avatar, size: 28, children: ((_b = (_a = supporter === null || supporter === void 0 ? void 0 : supporter.fullName) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" }), _jsx("span", { className: "text-blue-500", children: _jsx(Icon, { icon: "shuffle-b", size: 20 }) })] })) }), _jsx(AssignConfirmModal, { open: confirmModalOpen, agent: selectedAgent, loading: isAssigning, onCancel: handleCancelConfirm, onConfirm: handleConfirmAssign, afterClose: handleAfterClose })] }));
+                        : "cursor-pointer hover:opacity-80"), children: [_jsx(TintedAvatar, { name: (_a = supporter === null || supporter === void 0 ? void 0 : supporter.fullName) !== null && _a !== void 0 ? _a : "", src: supporter === null || supporter === void 0 ? void 0 : supporter.avatar, size: 28 }), _jsx("span", { className: "text-primary-400", children: _jsx(AdaptiveIcon, { stroke: "shuffle", font: "shuffle-b", size: 20, strokeSize: 18 }) })] })) }), _jsx(AssignConfirmModal, { open: confirmModalOpen, agent: selectedAgent, loading: isAssigning, onCancel: handleCancelConfirm, onConfirm: handleConfirmAssign, afterClose: handleAfterClose })] }));
 };
 export default ManualAssignPopover;

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

@@ -0,0 +1,6 @@
+import { ISessionResponse } from "../../types/dto";
+export declare const SessionDetailCard: ({ session, isActive, }: {
+    session: ISessionResponse;
+    isActive: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SessionDetailCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionDetailCard.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionDetailCard.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAsD/C,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,4CA8LA,CAAC"}

package/dist/components/thread/SessionDetailCard.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { Button, Input, message } from "antd";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import TintedAvatar from "../../components/common/TintedAvatar";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import ManualAssignPopover from "./ManualAssignPopover";
+import SessionTagPicker from "./SessionTagPicker";
+import EndSessionConfirm from "./EndSessionConfirm";
+import { formatSessionDate, formatSessionTime } from "./sessionDateFormat";
+import { useGetLabelSession } from "../../hooks/session/useGetLabelSession";
+import { useUpdateSessionInfo } from "../../hooks/session/useUpdateSessionInfo";
+import { useSessionFieldAutosave, } from "../../hooks/session/useSessionFieldAutosave";
+import { useEndSession } from "../../hooks/session/useEndSession";
+import { useIsSessionClosePending } from "../../hooks/session/usePendingSessionClose";
+import { useSessionCustomerName } from "../../hooks/session/useSessionCustomerName";
+import { QUERY_KEYS } from "../../services/query";
+import { SessionStatus } from "../../types/chat";
+const { TextArea } = Input;
+const mergeAutosaveStatus = (...statuses) => {
+    if (statuses.includes("error"))
+        return "error";
+    if (statuses.includes("saving"))
+        return "saving";
+    if (statuses.includes("saved"))
+        return "saved";
+    return "idle";
+};
+const SaveStatus = ({ status, onRetry, }) => {
+    const { t } = useTranslation("common");
+    if (status === "idle")
+        return null;
+    return (_jsxs("span", { role: "status", className: `flex items-center gap-1 text-xs ${status === "error"
+            ? "text-danger-600"
+            : status === "saved"
+                ? "text-success-900"
+                : "text-gray-600"}`, children: [status === "saving" && t("save_status_saving"), status === "saved" && (_jsxs(_Fragment, { children: [_jsx(StrokeIcon, { name: "check", size: 14 }), t("save_status_saved")] })), status === "error" && (_jsxs(_Fragment, { children: [t("save_status_failed"), " \u00B7", " ", _jsx("button", { type: "button", className: "underline", onClick: onRetry, children: t("retry") })] }))] }));
+};
+const fieldLabelClass = "text-xs font-medium text-gray-600";
+const fieldClass = "!rounded-lg !border-gray-50 !px-2.5 !py-1.5 !text-sm";
+export const SessionDetailCard = ({ session, isActive, }) => {
+    var _a, _b, _c, _d, _e;
+    const queryClient = useQueryClient();
+    const { t } = useTranslation("common");
+    const ids = useId();
+    const { data: availableLabels, isLoading: isLoadingLabels } = useGetLabelSession();
+    const { mutateAsync: updateSession } = useUpdateSessionInfo();
+    const endSession = useEndSession();
+    const isEnding = useIsSessionClosePending(session.id);
+    const customerName = useSessionCustomerName();
+    const [isEndConfirmOpen, setIsEndConfirmOpen] = useState(false);
+    const [tagStatus, setTagStatus] = useState("idle");
+    const tagSaveSeq = useRef(0);
+    const saveField = useCallback(async (data) => {
+        await updateSession(Object.assign({ sessionId: session.id }, data));
+        queryClient.invalidateQueries({
+            queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
+        });
+    }, [session.id, updateSession, queryClient]);
+    const note = useSessionFieldAutosave({
+        serverValue: session.note || "",
+        save: (value) => saveField({ note: value }),
+    });
+    const issueDetail = useSessionFieldAutosave({
+        serverValue: session.issueDetail || "",
+        save: (value) => saveField({ issueDetail: value }),
+    });
+    const saveStatus = mergeAutosaveStatus(note.status, issueDetail.status, tagStatus);
+    const retrySave = () => {
+        if (note.status === "error")
+            void note.retry();
+        if (issueDetail.status === "error")
+            void issueDetail.retry();
+    };
+    const handleUpdateLabels = (labelIds) => {
+        const seq = ++tagSaveSeq.current;
+        setTagStatus("saving");
+        updateSession({ sessionId: session.id, labelIds })
+            .then(() => {
+            if (seq === tagSaveSeq.current)
+                setTagStatus("saved");
+            queryClient.invalidateQueries({
+                queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
+            });
+        })
+            .catch(() => {
+            if (seq === tagSaveSeq.current)
+                setTagStatus("idle");
+            message.error(t("update_session_failed"));
+        });
+    };
+    const handleConfirmEnd = () => {
+        setIsEndConfirmOpen(false);
+        endSession({ sessionId: session.id, conversationId: session.conversationId });
+    };
+    return (_jsxs("div", { className: `flex flex-col gap-3 ${isActive ? "" : "rounded-lg border border-gray-50 p-3"}`, "data-cp-name": "SessionDetailCard", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-bold text-gray-900", children: t("session_label", { order: session.order }) }), _jsx("span", { className: "text-xs text-gray-600", children: isActive
+                            ? t("session_started_at", {
+                                time: formatSessionTime(session.createdDate),
+                            })
+                            : formatSessionDate(session.closedDate || session.createdDate) }), _jsx("span", { className: "flex-1" }), isActive ? (_jsx("span", { className: "inline-flex h-[22px] items-center rounded-full bg-success-25 px-2 text-xs font-medium text-success-900", children: t("session_active") })) : (_jsx(TintedAvatar, { name: ((_a = session.supporter) === null || _a === void 0 ? void 0 : _a.fullName) || "A", src: (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.avatar, size: 24 }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: `${ids}-tags`, className: fieldLabelClass, children: t("session_tags_label") }), _jsx(SessionTagPicker, { labelId: `${ids}-tags`, available: availableLabels !== null && availableLabels !== void 0 ? availableLabels : [], selectedIds: (_d = (_c = session.labels) === null || _c === void 0 ? void 0 : _c.map((label) => label.id)) !== null && _d !== void 0 ? _d : [], loading: isLoadingLabels, onChange: handleUpdateLabels })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: `${ids}-issue`, className: fieldLabelClass, children: t("session_issue_detail_label") }), _jsx(TextArea, { id: `${ids}-issue`, value: issueDetail.value, onChange: (e) => issueDetail.setValue(e.target.value), placeholder: t("session_issue_detail_placeholder"), className: `${fieldClass} !min-h-9`, autoSize: { minRows: 1, maxRows: 3 } })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: `${ids}-note`, className: fieldLabelClass, children: t("session_note_label") }), _jsx(SaveStatus, { status: saveStatus, onRetry: retrySave })] }), _jsx(TextArea, { id: `${ids}-note`, value: note.value, onChange: (e) => note.setValue(e.target.value), placeholder: t("session_note_placeholder"), className: fieldClass, autoSize: { minRows: 2, maxRows: 4 } })] }), isActive && (_jsxs(_Fragment, { children: [session.status !== SessionStatus.UNASSIGNED &&
+                        ((_e = session.supporter) === null || _e === void 0 ? void 0 : _e.id) && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TintedAvatar, { name: session.supporter.fullName || "A", src: session.supporter.avatar, size: 28 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-xs text-gray-600", children: t("session_owner_label") }), _jsx("span", { className: "truncate text-[13px] font-medium text-gray-900", children: session.supporter.fullName })] }), _jsx(ManualAssignPopover, { sessionId: session.id, supporter: session.supporter, teamId: session.teamId, placement: "topRight", children: _jsx(Button, { icon: _jsx(StrokeIcon, { name: "shuffle", size: 18 }), className: "!h-8 !rounded-lg !px-3.5 !text-[13px] !font-medium", children: t("manual_assign_button_reassign") }) })] })), _jsx(Button, { block: true, icon: _jsx(StrokeIcon, { name: "check-circle", size: 18 }), onClick: () => setIsEndConfirmOpen(true), disabled: isEnding, children: isEnding ? t("end_session_ending") : t("session_close_button") }), _jsx(EndSessionConfirm, { open: isEndConfirmOpen, session: session, customerName: customerName, onConfirm: handleConfirmEnd, onCancel: () => setIsEndConfirmOpen(false) })] }))] }));
+};

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

@@ -1,8 +1,6 @@
+import { SessionDetailCard } from "./SessionDetailCard";
 import { ISessionResponse } from "../../types/dto";
-export declare const SessionDetailCard: ({ session, isActive, }: {
-    session: ISessionResponse;
-    isActive: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export { SessionDetailCard };
 interface SessionSectionProps {
     sessions: ISessionResponse[];
     isLoading: boolean;

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,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"}
+{"version":3,"file":"SessionSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionSection.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAoF7B,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAmCnE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/thread/SessionSection.js

@@ -1,135 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDebounce } from "ahooks";
-import { Icon } from "../../components/icon";
-import { Button, Select, Spin, Tag, Input, message, Avatar } from "antd";
-import ManualAssignPopover from "./ManualAssignPopover";
-import { useGetLabelSession } from "../../hooks/session/useGetLabelSession";
-import { useUpdateSessionInfo } from "../../hooks/session/useUpdateSessionInfo";
-import { useCloseSession } from "../../hooks/session/useCloseSession";
-import { useQueryClient } from "@tanstack/react-query";
-import { QUERY_KEYS } from "../../services/query";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { Spin } from "antd";
 import { useTranslation } from "react-i18next";
-import { SessionStatus } from "../../types/chat";
-const { TextArea } = Input;
-const formatSessionDate = (dateString) => {
+import { SessionDetailCard } from "./SessionDetailCard";
+import { formatSessionDuration } from "./sessionDuration";
+export { SessionDetailCard };
+const MAX_VISIBLE_TAGS = 2;
+const pad = (value) => String(value).padStart(2, "0");
+const formatDayMonth = (dateString) => {
     if (!dateString)
         return "";
     const date = new Date(dateString);
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    return `${hours}:${minutes} ${day}/${month}`;
-};
-export const SessionDetailCard = ({ session, isActive, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const queryClient = useQueryClient();
-    const { t } = useTranslation("common");
-    const { data: availableLabels, isLoading: isLoadingLabels } = useGetLabelSession();
-    const { mutate: updateSession } = useUpdateSessionInfo();
-    const { mutate: closeSession, isPending: isClosing } = useCloseSession();
-    const [noteInput, setNoteInput] = useState({
-        value: session.note || "",
-        sessionId: session.id,
-    });
-    const [issueDetailInput, setIssueDetailInput] = useState({
-        value: session.issueDetail || "",
-        sessionId: session.id,
-    });
-    const debouncedNoteInput = useDebounce(noteInput, { wait: 500 });
-    const debouncedIssueDetailInput = useDebounce(issueDetailInput, {
-        wait: 500,
-    });
-    useEffect(() => {
-        setNoteInput({ value: session.note || "", sessionId: session.id });
-        setIssueDetailInput({
-            value: session.issueDetail || "",
-            sessionId: session.id,
-        });
-    }, [session.id]);
-    useEffect(() => {
-        if (debouncedNoteInput.sessionId === session.id &&
-            debouncedNoteInput.value !== (session.note || "")) {
-            updateSession({ sessionId: session.id, note: debouncedNoteInput.value }, {
-                onSuccess: () => {
-                    queryClient.invalidateQueries({
-                        queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
-                    });
-                },
-            });
-        }
-    }, [
-        debouncedNoteInput,
-        session.note,
-        session.id,
-        updateSession,
-        queryClient,
-    ]);
-    useEffect(() => {
-        if (debouncedIssueDetailInput.sessionId === session.id &&
-            debouncedIssueDetailInput.value !== (session.issueDetail || "")) {
-            updateSession({
-                sessionId: session.id,
-                issueDetail: debouncedIssueDetailInput.value,
-            }, {
-                onSuccess: () => {
-                    queryClient.invalidateQueries({
-                        queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
-                    });
-                },
-            });
-        }
-    }, [
-        debouncedIssueDetailInput,
-        session.issueDetail,
-        session.id,
-        updateSession,
-        queryClient,
-    ]);
-    const handleUpdateLabels = (labelIds) => {
-        updateSession({ sessionId: session.id, labelIds }, {
-            onSuccess: () => {
-                queryClient.invalidateQueries({
-                    queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
-                });
-            },
-        });
-    };
-    const handleCloseSession = () => {
-        closeSession(session.id, {
-            onSuccess: () => {
-                message.success(t("close_session_success"));
-                queryClient.invalidateQueries({
-                    queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
-                });
-            },
-            onError: () => {
-                message.error(t("close_session_failed"));
-            },
-        });
-    };
-    const labelOptions = availableLabels === null || availableLabels === void 0 ? void 0 : availableLabels.map((label) => ({
-        value: label.id,
-        label: label.name,
-    }));
-    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 &&
-                        ((_f = session.supporter) === null || _f === void 0 ? void 0 : _f.id) && (_jsx(ManualAssignPopover, { sessionId: session.id, supporter: session.supporter, teamId: session.teamId })), _jsx(Button, { type: "primary", className: "flex-1", onClick: handleCloseSession, loading: isClosing, children: t("session_close_button") })] }))] }));
+    return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}`;
 };
+// One row per past session: order, date and duration, then tags and handler.
 const ClosedSessionItem = ({ session, expandedSessionId, onToggleExpand, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const { t } = useTranslation("common");
     const isExpanded = session.id === expandedSessionId;
-    const handleClick = () => {
-        onToggleExpand(session.id);
-    };
     if (isExpanded) {
-        return (_jsx("div", { children: _jsx(SessionDetailCard, { session: session, isActive: false }) }));
+        return (_jsxs("div", { className: "border-t border-gray-25 py-2.5", children: [_jsx(SessionDetailCard, { session: session, isActive: false }, session.id), _jsx("button", { type: "button", className: "mt-2 text-xs font-medium text-primary-500 hover:underline", onClick: () => onToggleExpand(session.id), children: t("session_collapse") })] }));
     }
-    return (_jsxs("div", { className: "flex justify-between items-center p-2 rounded-md hover:bg-gray-100 cursor-pointer", onClick: handleClick, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsx("span", { className: "font-semibold", children: t("session_label", { order: session.order }) }), _jsx("span", { className: "text-gray-400 text-xs", children: formatSessionDate(session.closedDate || session.createdDate) })] }), _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" })] }));
+    const tags = (_a = session.labels) !== null && _a !== void 0 ? _a : [];
+    const duration = formatSessionDuration(session.createdDate, session.closedDate, t);
+    const dateText = [formatDayMonth(session.closedDate || session.createdDate), duration]
+        .filter(Boolean)
+        .join(" · ");
+    return (_jsxs("button", { type: "button", "aria-expanded": false, className: "flex w-full flex-col gap-1 border-t border-gray-25 py-2.5 text-left hover:bg-gray-5", onClick: () => onToggleExpand(session.id), "data-testid": "past-session-row", children: [_jsxs("span", { className: "flex items-center justify-between gap-2 text-[13px]", children: [_jsx("span", { className: "font-semibold text-gray-900", children: t("session_label", { order: session.order }) }), _jsx("span", { className: "text-gray-600", children: dateText })] }), _jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-xs text-gray-600", children: [tags.slice(0, MAX_VISIBLE_TAGS).map((label) => (_jsx("span", { className: "inline-flex h-5 max-w-[120px] shrink-0 items-center truncate rounded-full bg-[var(--dc-color-neutral-surface)] px-2 font-medium text-gray-900", children: label.name }, label.id))), tags.length > MAX_VISIBLE_TAGS && (_jsxs("span", { className: "shrink-0", children: ["+", tags.length - MAX_VISIBLE_TAGS] })), _jsx("span", { className: "truncate", children: (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName })] })] }));
 };
 const SessionSection = ({ sessions, isLoading }) => {
     const { t } = useTranslation("common");
@@ -137,6 +34,6 @@ const SessionSection = ({ sessions, isLoading }) => {
     const handleToggleExpand = (sessionId) => {
         setExpandedSessionId((prevId) => (prevId === sessionId ? null : sessionId));
     };
-    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))) })) })] }));
+    return (_jsxs("div", { className: "flex flex-col px-4 pb-2 pt-3", "data-cp-name": "SessionSection", children: [_jsx("h3", { className: "mb-1 text-[13px] font-semibold text-gray-900", children: t("sessions_previous_heading") }), isLoading ? (_jsx("div", { className: "mt-4 text-center", children: _jsx(Spin, {}) })) : sessions.length === 0 ? (_jsx("p", { className: "py-2 text-xs text-gray-600", children: t("sessions_previous_empty") })) : (_jsx("div", { className: "flex flex-col", children: sessions.map((session) => (_jsx(ClosedSessionItem, { session: session, expandedSessionId: expandedSessionId, onToggleExpand: handleToggleExpand }, session.id))) }))] }));
 };
 export default SessionSection;

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

@@ -0,0 +1,11 @@
+import type { ILabelResponse } from "../../types/dto";
+interface SessionTagPickerProps {
+    labelId: string;
+    available: ILabelResponse[];
+    selectedIds: string[];
+    loading?: boolean;
+    onChange: (ids: string[]) => void;
+}
+declare const SessionTagPicker: ({ labelId, available, selectedIds, loading, onChange, }: SessionTagPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionTagPicker;
+//# sourceMappingURL=SessionTagPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionTagPicker.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionTagPicker.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnC;AAMD,QAAA,MAAM,gBAAgB,GAAI,yDAMvB,qBAAqB,4CAwFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/SessionTagPicker.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { Spin } from "antd";
+import { useTranslation } from "react-i18next";
+const chipClass = "inline-flex h-[22px] items-center gap-1 whitespace-nowrap rounded-full bg-[var(--dc-color-neutral-surface)] px-2 text-xs font-medium text-gray-900";
+// The option list opens inline under the field, so it pushes the card instead of floating over it.
+const SessionTagPicker = ({ labelId, available, selectedIds, loading, onChange, }) => {
+    const { t } = useTranslation("common");
+    const [open, setOpen] = useState(false);
+    const listId = useId();
+    const selected = available.filter((label) => selectedIds.includes(label.id));
+    const toggle = (id) => onChange(selectedIds.includes(id)
+        ? selectedIds.filter((value) => value !== id)
+        : [...selectedIds, id]);
+    return (_jsxs("div", { onKeyDown: (event) => {
+            if (event.key === "Escape" && open) {
+                event.stopPropagation();
+                setOpen(false);
+            }
+        }, children: [_jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-1 rounded-lg border border-gray-50 px-1.5 py-1", children: [selected.map((label) => (_jsxs("span", { className: chipClass, children: [label.name, _jsx("button", { type: "button", "aria-label": t("session_remove_tag", { name: label.name }), className: "flex h-4 w-4 items-center justify-center rounded-full text-gray-600 hover:bg-gray-50", onClick: () => toggle(label.id), children: _jsx(StrokeIcon, { name: "x", size: 12 }) })] }, label.id))), _jsxs("button", { id: labelId, type: "button", "aria-label": t("session_add_tag"), "aria-expanded": open, "aria-controls": listId, className: "flex h-6 items-center gap-1 rounded px-1 text-[13px] text-gray-600 hover:text-gray-900", onClick: () => setOpen((value) => !value), children: [_jsx(StrokeIcon, { name: "plus", size: 14 }), t("session_add_tag")] })] }), open && (_jsxs("ul", { id: listId, role: "listbox", "aria-multiselectable": true, "aria-labelledby": labelId, className: "mt-1 max-h-40 overflow-y-auto rounded-lg border border-gray-50 p-1", children: [loading && (_jsx("li", { className: "flex justify-center py-2", children: _jsx(Spin, { size: "small" }) })), !loading && available.length === 0 && (_jsx("li", { className: "px-2 py-1.5 text-[13px] text-gray-600", children: t("session_no_tags") })), available.map((label) => {
+                        const isSelected = selectedIds.includes(label.id);
+                        return (_jsx("li", { role: "option", "aria-selected": isSelected, children: _jsxs("button", { type: "button", className: `flex h-8 w-full items-center justify-between rounded px-2 text-left text-[13px] text-gray-900 hover:bg-gray-5 ${isSelected ? "bg-primary-25" : ""}`, onClick: () => toggle(label.id), children: [label.name, isSelected && _jsx(StrokeIcon, { name: "check", size: 14 })] }) }, label.id));
+                    })] }))] }));
+};
+export default SessionTagPicker;

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,mDAoJ3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SingleThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SingleThreadInfo.tsx"],"names":[],"mappings":"AAgBA,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,mDA2J3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}