@droppii-org/chat-sdk 0.8.1 → 0.8.3

package/dist/components/thread/GroupInfoBodyCrm.js

@@ -29,13 +29,13 @@ const GroupInfoBodyCrm = (props) => {
     const nameChanged = props.nameValue.trim() !== "" && props.nameValue.trim() !== ((_a = props.groupName) !== null && _a !== void 0 ? _a : "");
     const descChanged = props.descriptionValue.trim() !== ((_b = props.introduction) !== null && _b !== void 0 ? _b : "");
     const hasAdminRows = props.canConfigPermissions || props.showInviteLink;
-    return (_jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "relative block h-[60px] w-[60px] shrink-0", children: [_jsx(GroupAvatar, { faceURL: props.faceURL, groupName: props.groupName, size: 56 }), props.isAvatarUploading && (_jsx("span", { className: "absolute left-0 top-0 flex h-14 w-14 items-center justify-center rounded-full bg-gray-900/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), props.canEditAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: props.avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: props.onAvatarSelect }), _jsx("button", { type: "button", disabled: props.isAvatarUploading, onClick: props.onAvatarClick, "aria-label": t("group_info_edit_avatar"), title: t("group_info_edit_avatar"), className: `absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-gray-900 text-white ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [editingField === "name" ? (_jsx(Input, { autoFocus: true, value: props.nameValue, onChange: (event) => props.onNameChange(event.target.value), maxLength: 255, disabled: props.isSaving, "aria-label": t("group_info_edit_name"), onPressEnter: () => nameChanged && props.onSaveEdit("name") })) : (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { className: "truncate text-base font-semibold text-gray-900", title: props.groupName, children: props.groupName }), props.canEditName && (_jsx("button", { type: "button", className: `h-7 w-7 ${ICON_BUTTON}`, onClick: () => props.onStartEdit("name"), "aria-label": t("group_info_edit_name"), title: t("group_info_edit_name"), children: _jsx(Icon, { icon: "edit-o", size: 16 }) }))] })), _jsxs("span", { className: "flex flex-wrap gap-1.5", children: [_jsx(Chip, { icon: props.isPublic ? "globe-o" : "lock-o", tone: "primary", children: t(props.isPublic ? "group_visibility_public" : "group_visibility_private") }), typeof props.memberCount === "number" && (_jsx(Chip, { icon: "user-two-o", tone: "neutral", children: t("member_count", { count: props.memberCount }) }))] })] })] }), editingField === "name" && (_jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && nameChanged, onCancel: () => props.onCancelEdit("name"), onSave: () => props.onSaveEdit("name") })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: t("description") }), editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input.TextArea, { ref: descriptionRef, value: props.descriptionValue, onChange: (event) => props.onDescriptionChange(event.target.value), placeholder: t("enter_group_description"), "aria-label": t("description"), autoSize: { minRows: 2, maxRows: 5 }, maxLength: 500, showCount: true, disabled: props.isSaving }), _jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && descChanged, onCancel: () => props.onCancelEdit("description"), onSave: () => props.onSaveEdit("description") })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "m-0 whitespace-pre-wrap break-words text-sm text-gray-600", children: hasDescription ? props.introduction : t("group_info_no_description") }), props.canEditDescription && (_jsxs("button", { type: "button", onClick: () => props.onStartEdit("description"), className: `flex h-6 items-center gap-1.5 self-start rounded-lg text-[13px] font-medium text-primary-500 hover:text-primary-600 ${FOCUS_RING_CLASS}`, children: [_jsx(Icon, { icon: hasDescription ? "edit-o" : "plus-o", size: 14 }), t(hasDescription ? "group_info_edit_description" : "group_info_add_description")] }))] }))] }), _jsx(SectionLabel, { children: t("group_settings_section") }), _jsx(InfoCard, { children: [
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "relative block h-[60px] w-[60px] shrink-0", children: [_jsx(GroupAvatar, { faceURL: props.faceURL, groupName: props.groupName, size: 56 }), props.isAvatarUploading && (_jsx("span", { className: "absolute left-0 top-0 flex h-14 w-14 items-center justify-center rounded-full bg-gray-900/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), props.canEditAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: props.avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: props.onAvatarSelect }), _jsx("button", { type: "button", disabled: props.isAvatarUploading, onClick: props.onAvatarClick, "aria-label": t("group_info_edit_avatar"), title: t("group_info_edit_avatar"), className: `absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-gray-900 text-white ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [editingField === "name" ? (_jsx(Input, { autoFocus: true, value: props.nameValue, onChange: (event) => props.onNameChange(event.target.value), maxLength: 255, showCount: true, disabled: props.isSaving, "aria-label": t("group_info_edit_name"), onPressEnter: () => nameChanged && props.onSaveEdit("name") })) : (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { className: "truncate text-base font-semibold text-gray-900", title: props.groupName, children: props.groupName }), props.canEditName && (_jsx("button", { type: "button", className: `h-7 w-7 ${ICON_BUTTON}`, onClick: () => props.onStartEdit("name"), "aria-label": t("group_info_edit_name"), title: t("group_info_edit_name"), children: _jsx(Icon, { icon: "edit-o", size: 16 }) }))] })), _jsxs("span", { className: "flex flex-wrap gap-1.5", children: [_jsx(Chip, { icon: props.isPublic ? "globe-o" : "lock-o", tone: "primary", children: t(props.isPublic ? "group_visibility_public" : "group_visibility_private") }), typeof props.memberCount === "number" && (_jsx(Chip, { icon: "user-two-o", tone: "neutral", children: t("member_count", { count: props.memberCount }) }))] })] })] }), editingField === "name" && (_jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && nameChanged, onCancel: () => props.onCancelEdit("name"), onSave: () => props.onSaveEdit("name") })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: t("description") }), editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input.TextArea, { ref: descriptionRef, value: props.descriptionValue, onChange: (event) => props.onDescriptionChange(event.target.value), placeholder: t("enter_group_description"), "aria-label": t("description"), autoSize: { minRows: 2, maxRows: 5 }, maxLength: 500, showCount: true, disabled: props.isSaving }), _jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && descChanged, onCancel: () => props.onCancelEdit("description"), onSave: () => props.onSaveEdit("description") })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "m-0 whitespace-pre-wrap break-words text-sm text-gray-600", children: hasDescription ? props.introduction : t("group_info_no_description") }), props.canEditDescription && (_jsxs("button", { type: "button", onClick: () => props.onStartEdit("description"), className: `flex h-6 items-center gap-1.5 self-start rounded-lg text-[13px] font-medium text-primary-500 hover:text-primary-600 ${FOCUS_RING_CLASS}`, children: [_jsx(Icon, { icon: hasDescription ? "edit-o" : "plus-o", size: 14 }), t(hasDescription ? "group_info_edit_description" : "group_info_add_description")] }))] }))] }), _jsx(SectionLabel, { children: t("group_settings_section") }), _jsx(InfoCard, { children: [
                     _jsx(SwitchRow, { icon: "bell-o", label: t("notification"), checked: props.notifyEnabled, loading: props.isTogglingNotification, onChange: props.onToggleNotification }, "notify"),
                     props.showAllowSend && (_jsx(SwitchRow, { icon: "chat-square-o", label: t("members_can_send_message"), hint: t("allow_send_message_hint"), checked: props.allowSendMessage, loading: props.isTogglingSendMessage, onChange: props.onToggleSendMessage }, "send")),
                 ] }), hasAdminRows && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: t("group_admin_section") }), _jsx(InfoCard, { children: [
                             props.canConfigPermissions && _jsx(NavRow, { icon: "shield-o", label: t("member_permission_row"), onClick: () => props.onOpenRow("member-permission") }, "member"),
                             props.canConfigPermissions && _jsx(NavRow, { icon: "shield-o", label: t("admin_permission_row"), onClick: () => props.onOpenRow("admin-permission") }, "admin"),
                             props.showInviteLink && _jsx(NavRow, { icon: "link-alt-o", label: t("invite_via_link_short"), onClick: () => props.onOpenRow("invite-link") }, "invite"),
-                        ] })] })), _jsxs("div", { className: "flex flex-col gap-0.5 border-t border-gray-25 pt-2", children: [props.isAdminOrOwner && _jsx(DangerRow, { icon: "trash-o", label: t("group_delete_conversation"), onClick: () => props.onConfirm("delete") }), !props.isViewOnlyMember && _jsx(DangerRow, { icon: "logout-o", label: t("leave_group"), onClick: () => props.onConfirm("leave") }), !props.isViewOnlyMember && (_jsx(DangerRow, { icon: "user-del-o", label: t("disband_group"), onClick: () => props.onConfirm("disband"), disabledNote: props.isOwner ? undefined : t("group_owner_only") }))] })] }));
+                        ] })] })), _jsxs("div", { className: "flex flex-col gap-0.5 border-t border-gray-25 pt-2", children: [props.isAdminOrOwner && _jsx(DangerRow, { icon: "trash-o", label: t("group_delete_conversation"), onClick: () => props.onConfirm("delete") }), !props.isViewOnlyMember && _jsx(DangerRow, { icon: "logout-o", label: t("leave_group"), onClick: () => props.onConfirm("leave") }), props.isOwner && (_jsx(DangerRow, { icon: "user-del-o", label: t("disband_group"), onClick: () => props.onConfirm("disband") }))] })] }));
 };
 export default GroupInfoBodyCrm;

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

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

package/dist/components/thread/GroupThreadInfo.js

@@ -47,10 +47,6 @@ const GroupThreadInfo = ({ onClose, config }) => {
     // Non-member viewing an existing public group in view-only mode — no
     // longer a member, so "Rời khỏi nhóm" (leave) doesn't apply.
     const isViewOnlyMember = useConversationStore((state) => state.isViewOnlyMember);
-    // Feature ships to staging first (DROPPII-30551). Same env var apps/web already
-    // reads in src/app/layout.tsx:51 — this repo has no feature-flag service and
-    // this ticket is not the place to introduce one.
-    const isInviteLinkFeatureEnabled = process.env.NEXT_PUBLIC_ENV === "stg";
     const [editingField, setEditingField] = useState(null);
     const [nameValue, setNameValue] = useState((_a = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName) !== null && _a !== void 0 ? _a : "");
     const [descriptionValue, setDescriptionValue] = useState((_b = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) !== null && _b !== void 0 ? _b : "");
@@ -256,10 +252,10 @@ const GroupThreadInfo = ({ onClose, config }) => {
     if (!groupID) {
         return null;
     }
-    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, { groupName: groupDisplayName, faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, 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(GroupAvatar, { faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, 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 ||
+    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, { groupName: groupDisplayName, faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, 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: !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(GroupAvatar, { faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, 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: () => {
+                                                        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" })] })] })), !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") }) }))] }));

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;AAIjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAsBzC,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,4CA+P1B,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;AAsBzC,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,4CAyP1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/thread/ManualAssignPopover.js

@@ -116,14 +116,12 @@ const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, childre
                         .filter((item) => item.memberId !== (supporter === null || supporter === void 0 ? void 0 : supporter.id))
                         .filter((item) => !excludeCurrentUser || item.memberId !== authUserID)
                         .sort((supporterA, supporterB) => {
-                        const isSupporterACurrentUser = supporterA.memberId === authUserID;
-                        const isSupporterBCurrentUser = supporterB.memberId === authUserID;
-                        if (isSupporterACurrentUser !== isSupporterBCurrentUser) {
-                            return isSupporterACurrentUser ? -1 : 1;
-                        }
-                        return supporterA.displayName.localeCompare(supporterB.displayName, "vi", {
-                            sensitivity: "base",
-                        });
+                        // Online first, then A-Z by display name; the viewer is not pinned.
+                        const onlineA = supporterA.status === "ONLINE";
+                        const onlineB = supporterB.status === "ONLINE";
+                        if (onlineA !== onlineB)
+                            return onlineA ? -1 : 1;
+                        return supporterA.displayName.localeCompare(supporterB.displayName, "vi", { sensitivity: "base" });
                     })
                         .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") }) })) })] }));
     const triggerNode = 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

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

@@ -1 +1 @@
-{"version":3,"file":"SessionDetailCard.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionDetailCard.tsx"],"names":[],"mappings":"AAyBA,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,4CAoNA,CAAC"}
+{"version":3,"file":"SessionDetailCard.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionDetailCard.tsx"],"names":[],"mappings":"AAyBA,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,4CAqNA,CAAC"}

package/dist/components/thread/SessionDetailCard.js

@@ -9,7 +9,7 @@ import ManualAssignPopover from "./ManualAssignPopover";
 import SessionTagPicker from "./SessionTagPicker";
 import SessionLabelRow, { readOnlyValueClass, sessionFieldClass } from "./SessionLabelRow";
 import EndSessionConfirm from "./EndSessionConfirm";
-import { formatSessionDate, formatSessionTime } from "./sessionDateFormat";
+import { formatSessionDate, formatSessionRange } from "./sessionDateFormat";
 import { useGetLabelSession } from "../../hooks/session/useGetLabelSession";
 import { useUpdateSessionInfo } from "../../hooks/session/useUpdateSessionInfo";
 import { useSessionFieldAutosave, } from "../../hooks/session/useSessionFieldAutosave";
@@ -92,9 +92,9 @@ export const SessionDetailCard = ({ session, isActive, }) => {
     };
     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),
+                                time: formatSessionDate(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: ((_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) || "A", src: (_c = session.supporter) === null || _c === void 0 ? void 0 : _c.avatar, size: 24 }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [fieldLabel(`${ids}-tags`, t("session_tags_label")), readOnly && labels.labels.length === 0 ? (_jsx("p", { className: emptyValueClass, children: "\u2014" })) : (_jsxs("div", { className: "divide-y divide-gray-50 rounded-lg border border-gray-50", children: [!readOnly && (_jsx(SessionTagPicker, { labelId: `${ids}-tags`, available: availableLabels !== null && availableLabels !== void 0 ? availableLabels : [], selectedIds: selectedLabelIds, onChange: labels.setLabelIds })), labels.labels.map((label) => {
+                            : formatSessionRange(session.createdDate, session.closedDate) }), _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: ((_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) || "A", src: (_c = session.supporter) === null || _c === void 0 ? void 0 : _c.avatar, size: 24 }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [fieldLabel(`${ids}-tags`, t("session_tags_label")), readOnly && labels.labels.length === 0 ? (_jsx("p", { className: emptyValueClass, children: "\u2014" })) : (_jsxs("div", { className: "divide-y divide-gray-50 rounded-lg border border-gray-50", children: [!readOnly && (_jsx(SessionTagPicker, { labelId: `${ids}-tags`, available: availableLabels !== null && availableLabels !== void 0 ? availableLabels : [], selectedIds: selectedLabelIds, selectedNames: selectedLabelIds.map((id) => { var _a; return (_a = labelNames.get(id)) !== null && _a !== void 0 ? _a : ""; }), onChange: labels.setLabelIds })), labels.labels.map((label) => {
                                 var _a;
                                 return (_jsx(SessionLabelRow, { name: (_a = labelNames.get(label.id)) !== null && _a !== void 0 ? _a : "", note: label.note, readOnly: readOnly, onNoteChange: (value) => labels.setNote(label.id, value), onRemove: () => labels.setLabelIds(selectedLabelIds.filter((id) => id !== label.id)) }, label.id));
                             })] }))] }), session.issueDetail && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: fieldLabelClass, children: t("session_issue_detail_label") }), _jsx("p", { className: readOnlyValueClass, "data-testid": "session-legacy-issue", children: session.issueDetail })] })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [fieldLabel(`${ids}-note`, t("session_note_label")), !readOnly && _jsx(SaveStatus, { status: saveStatus, onRetry: retrySave })] }), readOnly ? (_jsx("p", { className: ((_d = session.note) === null || _d === void 0 ? void 0 : _d.trim()) ? readOnlyValueClass : emptyValueClass, "data-testid": "session-note-text", children: ((_e = session.note) === null || _e === void 0 ? void 0 : _e.trim()) ? session.note : "—" })) : (_jsx(TextArea, { id: `${ids}-note`, value: note.value, onChange: (e) => note.setValue(e.target.value), placeholder: t("session_note_placeholder"), className: sessionFieldClass, autoSize: { minRows: 2, maxRows: 4 } }))] }), isActive && (_jsxs(_Fragment, { children: [session.status !== SessionStatus.UNASSIGNED &&

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":"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;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,cAAc,GAAI,0CAIrB,mBAAmB,4CAwCrB,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;AAGxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,CAAC;AA4E7B,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,cAAc,GAAI,0CAIrB,mBAAmB,4CAwCrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/thread/SessionSection.js

@@ -4,15 +4,9 @@ import { Spin } from "antd";
 import { useTranslation } from "react-i18next";
 import { SessionDetailCard } from "./SessionDetailCard";
 import { formatSessionDuration } from "./sessionDuration";
+import { formatSessionRange } from "./sessionDateFormat";
 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);
-    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;
@@ -23,10 +17,10 @@ const ClosedSessionItem = ({ session, expandedSessionId, onToggleExpand, }) => {
     }
     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]
+    const dateText = [formatSessionRange(session.createdDate, session.closedDate), 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 })] })] }));
+    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: "min-w-0 truncate 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, isFetchingMore = false, }) => {
     const { t } = useTranslation("common");

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

@@ -3,8 +3,10 @@ interface SessionTagPickerProps {
     labelId: string;
     available: ILabelResponse[];
     selectedIds: string[];
+    /** Names of the picked tags, shown inside the field. */
+    selectedNames?: string[];
     onChange: (ids: string[]) => void;
 }
-declare const SessionTagPicker: ({ labelId, available, selectedIds, onChange, }: SessionTagPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SessionTagPicker: ({ labelId, available, selectedIds, selectedNames, onChange, }: SessionTagPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default SessionTagPicker;
 //# sourceMappingURL=SessionTagPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SessionTagPicker.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionTagPicker.tsx"],"names":[],"mappings":"AAWA,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,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnC;AAMD,QAAA,MAAM,gBAAgB,GAAI,gDAKvB,qBAAqB,4CAkHvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SessionTagPicker.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionTagPicker.tsx"],"names":[],"mappings":"AAWA,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,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnC;AAMD,QAAA,MAAM,gBAAgB,GAAI,+DAMvB,qBAAqB,4CAoIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/SessionTagPicker.js

@@ -12,7 +12,7 @@ import { LAYOUT_MEDIA } from "../../constants/layout";
 const OPTION_HEIGHT = 36;
 const MAX_VISIBLE_OPTIONS = 8;
 // The "Thêm thẻ" row of the tag box. Its list opens inline, so it pushes the card instead of floating over it.
-const SessionTagPicker = ({ labelId, available, selectedIds, onChange, }) => {
+const SessionTagPicker = ({ labelId, available, selectedIds, selectedNames = [], onChange, }) => {
     const { t } = useTranslation("common");
     const isTouch = useMediaQuery(LAYOUT_MEDIA.touch);
     const [open, setOpen] = useState(false);
@@ -50,7 +50,7 @@ const SessionTagPicker = ({ labelId, available, selectedIds, onChange, }) => {
                 event.stopPropagation();
                 close();
             }
-        }, children: [_jsxs("button", { ref: toggleRef, id: labelId, type: "button", "aria-label": t("session_add_tag"), "aria-expanded": open, "aria-controls": listId, className: "flex h-9 touch:min-h-10 w-full items-center gap-1 px-3 text-[13px] text-gray-600 hover:text-gray-900", onClick: () => (open ? close() : setOpen(true)), children: [_jsx(StrokeIcon, { name: "plus", size: 14 }), t("session_add_tag")] }), open && (_jsxs("div", { ref: panelRef, className: "mx-2 mb-2 flex flex-col gap-1 rounded-lg border border-gray-50 p-1", children: [_jsx(Input, { autoFocus: !isTouch, "aria-label": t("session_search_tag_placeholder"), "aria-controls": listId, placeholder: t("session_search_tag_placeholder"), value: keyword, onChange: (event) => setKeyword(event.target.value), prefix: _jsx(StrokeIcon, { name: "search", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 text-[13px] focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }), _jsxs("ul", { id: listId, role: "listbox", "aria-multiselectable": true, "aria-labelledby": labelId, className: "overflow-y-auto", style: { height: listHeight }, children: [isLoading && (_jsx("li", { className: "flex justify-center py-2", children: _jsx(Spin, { size: "small" }) })), !isLoading && options.length === 0 && (_jsx("li", { className: "px-2 py-1.5 text-[13px] text-gray-600", children: t("session_no_tags") })), options.map((label) => {
+        }, children: [_jsxs("button", { ref: toggleRef, id: labelId, type: "button", "aria-label": t("session_add_tag"), "aria-expanded": open, "aria-controls": listId, className: "group flex min-h-9 touch:min-h-10 w-full items-center gap-1 px-3 py-1 text-left text-[13px] text-gray-600 hover:text-gray-900", onClick: () => (open ? close() : setOpen(true)), children: [selectedNames.length === 0 ? (_jsx("span", { className: "min-w-0 flex-1 truncate", children: t("session_add_tag_placeholder") })) : (_jsx("span", { className: "flex min-w-0 flex-1 flex-wrap gap-1", children: selectedNames.map((name, index) => (_jsx("span", { className: "inline-flex h-5 max-w-full items-center truncate rounded-md bg-[var(--dc-color-neutral-surface)] px-2 text-xs font-medium text-gray-900", children: name }, `${name}-${index}`))) })), _jsx(StrokeIcon, { name: "plus", size: 14, className: "shrink-0 opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 touch:opacity-100" })] }), open && (_jsxs("div", { ref: panelRef, className: "mx-2 mb-2 flex flex-col gap-1 rounded-lg border border-gray-50 p-1", children: [_jsx(Input, { autoFocus: !isTouch, "aria-label": t("session_search_tag_placeholder"), "aria-controls": listId, placeholder: t("session_search_tag_placeholder"), value: keyword, onChange: (event) => setKeyword(event.target.value), prefix: _jsx(StrokeIcon, { name: "search", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 text-[13px] focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }), _jsxs("ul", { id: listId, role: "listbox", "aria-multiselectable": true, "aria-labelledby": labelId, className: "overflow-y-auto", style: { height: listHeight }, children: [isLoading && (_jsx("li", { className: "flex justify-center py-2", children: _jsx(Spin, { size: "small" }) })), !isLoading && options.length === 0 && (_jsx("li", { className: "px-2 py-1.5 text-[13px] text-gray-600", children: t("session_no_tags") })), options.map((label) => {
                                 const isSelected = selectedIds.includes(label.id);
                                 return (_jsx("li", { role: "option", "aria-selected": isSelected, children: _jsxs("button", { type: "button", className: `flex h-9 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));
                             })] })] }))] }));

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

@@ -1,3 +1,5 @@
 export declare const formatSessionTime: (dateString?: string | null) => string;
 export declare const formatSessionDate: (dateString?: string | null) => string;
+/** "HH:mm dd/MM - HH:mm dd/MM" (start - end); an open session has no end, so only the start. */
+export declare const formatSessionRange: (startDate?: string | null, endDate?: string | null) => string;
 //# sourceMappingURL=sessionDateFormat.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sessionDateFormat.d.ts","sourceRoot":"","sources":["../../../src/components/thread/sessionDateFormat.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,GAAG,IAAI,WAI3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,GAAG,IAAI,WAI3D,CAAC"}
+{"version":3,"file":"sessionDateFormat.d.ts","sourceRoot":"","sources":["../../../src/components/thread/sessionDateFormat.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,GAAG,IAAI,WAI3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,GAAG,IAAI,WAI3D,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,kBAAkB,GAC7B,YAAY,MAAM,GAAG,IAAI,EACzB,UAAU,MAAM,GAAG,IAAI,WAKxB,CAAC"}

package/dist/components/thread/sessionDateFormat.js

@@ -11,3 +11,9 @@ export const formatSessionDate = (dateString) => {
     const date = new Date(dateString);
     return `${formatSessionTime(dateString)} ${pad(date.getDate())}/${pad(date.getMonth() + 1)}`;
 };
+/** "HH:mm dd/MM - HH:mm dd/MM" (start - end); an open session has no end, so only the start. */
+export const formatSessionRange = (startDate, endDate) => {
+    const start = formatSessionDate(startDate);
+    const end = formatSessionDate(endDate);
+    return end ? `${start} - ${end}` : start;
+};

package/dist/constants/dateFormat.d.ts

@@ -0,0 +1,2 @@
+export declare const LIBRARY_DATE_HEADER_FORMAT = "DD/MM/YYYY";
+//# sourceMappingURL=dateFormat.d.ts.map

package/dist/constants/dateFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateFormat.d.ts","sourceRoot":"","sources":["../../src/constants/dateFormat.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,0BAA0B,eAAe,CAAC"}

package/dist/constants/dateFormat.js

@@ -0,0 +1,2 @@
+// Day group headers in the media library follow the product spec (DD/MM/YYYY).
+export const LIBRARY_DATE_HEADER_FORMAT = "DD/MM/YYYY";

package/dist/hooks/common/useFetchUrlMetadata.d.ts

@@ -2,6 +2,7 @@ export interface UrlMetadata {
     title?: string;
     description?: string;
     image?: string;
+    isEmpty?: boolean;
     url: string;
 }
 export declare const fetchUrlMetadata: (url: string) => Promise<UrlMetadata | null>;

package/dist/hooks/common/useFetchUrlMetadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchUrlMetadata.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useFetchUrlMetadata.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB,GAAU,KAAK,MAAM,KAAG,OAAO,CAAC,WAAW,GAAG,IAAI,CAY9E,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,EAAE,iBAAc,8EAO3D,CAAC"}
+{"version":3,"file":"useFetchUrlMetadata.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useFetchUrlMetadata.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB,GAAU,KAAK,MAAM,KAAG,OAAO,CAAC,WAAW,GAAG,IAAI,CAY9E,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,EAAE,iBAAc,8EAO3D,CAAC"}

package/dist/hooks/conversation/useBotFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotFlow.ts"],"names":[],"mappings":"AAMA,OAAO,EAKL,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAgB9B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;AAMtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAsBD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;;;;;;;;6BAoKqB,MAAM;;6BA+DN,eAAe;;;CAmDtD,CAAC"}
+{"version":3,"file":"useBotFlow.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useBotFlow.ts"],"names":[],"mappings":"AAMA,OAAO,EAKL,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAgB9B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;AAMtD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB;AAoCD,eAAO,MAAM,UAAU,GAAI,kCAGxB,gBAAgB;;;;;;;;;;;;6BA8KqB,MAAM;;6BAwFN,eAAe;;;CA+DtD,CAAC"}

package/dist/hooks/conversation/useBotFlow.js

@@ -21,6 +21,17 @@ const INITIAL_BOT_FLOW_STATE = {
     flowCurrentStep: null,
     flowIsEnd: false,
 };
+// Safety net: a group whose message never arrives must not hide buttons forever.
+const PENDING_GROUP_TIMEOUT_MS = 8000;
+// Only these blocks make the server push a chat message carrying the group id.
+const MESSAGE_BLOCK_TYPES = [
+    BotBlockType.BubbleText,
+    BotBlockType.BubbleImage,
+];
+const hasMessageBlock = (step) => {
+    var _a, _b;
+    return !!((_b = (_a = step === null || step === void 0 ? void 0 : step.data) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.some((child) => MESSAGE_BLOCK_TYPES.includes(child.type)));
+};
 const parseMessageFlowGroupId = (ex) => {
     var _a;
     try {
@@ -97,6 +108,12 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
             emitter.off("PUSH_NEW_MSG", handleNewMessage);
         };
     }, [authUserID]);
+    useEffect(() => {
+        if (!pendingGroupId)
+            return;
+        const timer = setTimeout(() => setPendingGroupId(null), PENDING_GROUP_TIMEOUT_MS);
+        return () => clearTimeout(timer);
+    }, [pendingGroupId]);
     const activeStep = isActiveConversation ? flowCurrentStep : null;
     const inputButtonsBlocks = (_d = activeStep === null || activeStep === void 0 ? void 0 : activeStep.data.children.filter((child) => child.type === BotBlockType.InputButtons)) !== null && _d !== void 0 ? _d : [];
     const currentButtonsBlock = inputButtonsBlocks.length > 0
@@ -138,6 +155,7 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
         });
         const nextGroupId = (_a = result.flowNextStep) === null || _a === void 0 ? void 0 : _a.id;
         setPendingGroupId(result.havingBotMessage &&
+            hasMessageBlock(result.flowNextStep) &&
             nextGroupId &&
             latestBotFlowGroupIdRef.current !== nextGroupId
             ? nextGroupId
@@ -187,24 +205,46 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
             await runStep(resetDetail.flowCurrentStep);
         });
     };
+    // The CS may have closed the session on the desk while this thread stayed
+    // open, so confirm against the server before showing the "end session" modal.
+    const checkCsSession = async () => {
+        var _a, _b;
+        if (!isInActiveCsSession)
+            return { active: false, step: activeStep };
+        const fresh = await detailQuery.refetch();
+        // A missing step means the session is gone; the stale CS step must not win.
+        const step = (_b = (_a = fresh.data) === null || _a === void 0 ? void 0 : _a.flowCurrentStep) !== null && _b !== void 0 ? _b : null;
+        return { active: isInCsSession({ flowCurrentStep: step }), step };
+    };
+    // The session refetch is async; a second tap meanwhile would run the same
+    // check-then-act again, so claim the slot before awaiting anything.
+    const checkingRef = useRef(false);
     const restart = async () => {
-        if (isInActiveCsSession) {
-            setPendingCsAction({ type: "restart" });
+        if (checkingRef.current)
             return;
+        checkingRef.current = true;
+        try {
+            if ((await checkCsSession()).active) {
+                setPendingCsAction({ type: "restart" });
+                return;
+            }
+            await performRestart();
+        }
+        finally {
+            checkingRef.current = false;
         }
-        await performRestart();
     };
-    const runMenuOption = async (item) => {
-        if (!activeStep)
+    const runMenuOption = async (item, step = activeStep) => {
+        if (!step)
             return;
         await whileChoosing(async () => {
             await sendMergeMessage({
                 plainText: item.label,
                 richText: "",
                 isInternal: false,
-                flow: { groupId: activeStep.id, childId: null, actionId: item.id },
+                flow: { groupId: step.id, childId: null, actionId: item.id },
             });
-            await runStep(activeStep, item.id);
+            await runStep(step, item.id);
         });
     };
     const selectMenuOption = async (item) => {
@@ -212,13 +252,23 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
             await restart();
             return;
         }
-        if (isInActiveCsSession) {
-            setPendingCsAction({ type: "menu", item });
+        if (checkingRef.current)
             return;
+        checkingRef.current = true;
+        try {
+            const { active, step } = await checkCsSession();
+            if (active) {
+                setPendingCsAction({ type: "menu", item });
+                return;
+            }
+            await runMenuOption(item, step);
+        }
+        finally {
+            checkingRef.current = false;
         }
-        await runMenuOption(item);
     };
     const confirmEndCsSession = async () => {
+        var _a, _b;
         if (!pendingCsAction)
             return;
         const action = pendingCsAction;
@@ -229,10 +279,12 @@ export const useBotFlow = ({ conversationId, isBotThread, }) => {
                 await performRestart();
             }
             else {
-                await runMenuOption(action.item);
+                // The server resets the flow step on close; run the menu item on it.
+                const fresh = await detailQuery.refetch();
+                await runMenuOption(action.item, (_b = (_a = fresh.data) === null || _a === void 0 ? void 0 : _a.flowCurrentStep) !== null && _b !== void 0 ? _b : activeStep);
             }
         }
-        catch (_a) {
+        catch (_c) {
             toastMessage.error(t("thread_detail.bot.cs_confirm.close_failed"));
             setPendingCsAction(null);
         }

package/dist/hooks/conversation/useCloseBotSession.d.ts

@@ -1,2 +1,4 @@
+export declare const SESSION_ALREADY_CLOSED_CODE = 2005;
+export declare const isSessionAlreadyClosedError: (error: unknown) => boolean;
 export declare const useCloseBotSession: () => import("@tanstack/react-query").UseMutationResult<void, Error, string, unknown>;
 //# sourceMappingURL=useCloseBotSession.d.ts.map

package/dist/hooks/conversation/useCloseBotSession.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseBotSession.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useCloseBotSession.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB,uFAS9B,CAAC"}
+{"version":3,"file":"useCloseBotSession.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useCloseBotSession.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,eAAO,MAAM,2BAA2B,GAAI,OAAO,OAAO,KAAG,OAQ5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,uFAc9B,CAAC"}

package/dist/hooks/conversation/useCloseBotSession.js

@@ -3,11 +3,27 @@ import { useMutation } from "@tanstack/react-query";
 import { apiInstance } from "../../services/api";
 import { ENDPOINTS } from "../../services/routes";
 import { QUERY_KEYS } from "../../services/query";
+// Backend code for "session already closed" (e.g. CS ended it on the desk).
+export const SESSION_ALREADY_CLOSED_CODE = 2005;
+export const isSessionAlreadyClosedError = (error) => {
+    var _a;
+    const data = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data;
+    if (!data)
+        return false;
+    return [data.code, data.errorCode, data.errCode, data.statusCode].some((value) => Number(value) === SESSION_ALREADY_CLOSED_CODE);
+};
 export const useCloseBotSession = () => {
     return useMutation({
         mutationKey: [QUERY_KEYS.CLOSE_BOT_SESSION],
         mutationFn: async (conversationId) => {
-            await apiInstance.post(ENDPOINTS.chatService.closeBotSession(conversationId));
+            try {
+                await apiInstance.post(ENDPOINTS.chatService.closeBotSession(conversationId));
+            }
+            catch (error) {
+                // Already closed elsewhere is the outcome we wanted; let the caller go on.
+                if (!isSessionAlreadyClosedError(error))
+                    throw error;
+            }
         },
     });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,cAAc,YA8nB1B,CAAC"}
+{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AA6DA,eAAO,MAAM,cAAc,YA0wB1B,CAAC"}