@droppii-org/chat-sdk 0.6.56 → 0.7.0

package/dist/components/session/SessionFolderList.d.ts

@@ -0,0 +1,23 @@
+import type { IFilterSummary } from "../../store/type";
+import type { ISessionSummaryResponse } from "../../types/dto";
+interface SessionFolderListProps {
+    summary: ISessionSummaryResponse;
+    /** Set for a team's folders; undefined for "my messages". */
+    teamId?: string;
+    /** Id of the single active folder (see `getActiveFolderId`). */
+    activeFolderId: string;
+    onFilterSelect: (filter: IFilterSummary) => void;
+    /** Present only in "my messages", where the "all" row lives. */
+    allGroups?: {
+        active: boolean;
+        onSelect: () => void;
+    };
+}
+/**
+ * Folders of one scope. The "open" parent has two click targets: the label
+ * only reveals its children, the chevron collapses them. The API cannot list
+ * all open sessions at once, so the label never changes the filter.
+ */
+declare const SessionFolderList: ({ summary, teamId, activeFolderId, onFilterSelect, allGroups, }: SessionFolderListProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionFolderList;
+//# sourceMappingURL=SessionFolderList.d.ts.map

package/dist/components/session/SessionFolderList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionFolderList.d.ts","sourceRoot":"","sources":["../../../src/components/session/SessionFolderList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAQ3D,UAAU,sBAAsB;IAC9B,OAAO,EAAE,uBAAuB,CAAC;IACjC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,gEAAgE;IAChE,SAAS,CAAC,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CACvD;AAED;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,GAAI,iEAMxB,sBAAsB,4CAyFxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/session/SessionFolderList.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "antd";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { buildFolderId } from "../../store/sessionFolder";
+import FolderRow, { FolderCount } from "./FolderRow";
+import { getCompletedFilterConfig, getFilterCount, getOpenFilterConfigs, } from "./sessionFilters";
+/**
+ * Folders of one scope. The "open" parent has two click targets: the label
+ * only reveals its children, the chevron collapses them. The API cannot list
+ * all open sessions at once, so the label never changes the filter.
+ */
+const SessionFolderList = ({ summary, teamId, activeFolderId, onFilterSelect, allGroups, }) => {
+    const { t } = useTranslation();
+    const [isOpenGroupExpanded, setIsOpenGroupExpanded] = useState(true);
+    const isTeam = !!teamId;
+    const completed = getCompletedFilterConfig();
+    const isActive = (filterKey) => activeFolderId ===
+        buildFolderId({ scope: isTeam ? "team" : "mine", teamId, filterKey });
+    const groupLabel = t("active_sessions");
+    const toggleLabel = t(isOpenGroupExpanded ? "folder_group_collapse" : "folder_group_expand", { name: groupLabel });
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", "data-cp-name": "SessionFolderList", children: [_jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setIsOpenGroupExpanded(true), className: `flex h-9 min-w-0 flex-1 items-center gap-2.5 rounded-lg pr-2 text-left text-sm text-gray-900 hover:bg-gray-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 ${isTeam ? "pl-5" : "pl-2"}`, children: [_jsx(StrokeIcon, { name: "message-circle", size: 18, className: "text-gray-600" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: groupLabel }), _jsx(FolderCount, { count: summary.activeSessionCount })] }), !isTeam && (_jsx(Tooltip, { title: toggleLabel, children: _jsx("button", { type: "button", "aria-label": toggleLabel, "aria-expanded": isOpenGroupExpanded, onClick: () => setIsOpenGroupExpanded((expanded) => !expanded), className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", children: _jsx(StrokeIcon, { name: isOpenGroupExpanded ? "chevron-down" : "chevron-right", size: 16 }) }) }))] }), (isTeam || isOpenGroupExpanded) &&
+                getOpenFilterConfigs(isTeam).map((config) => (_jsx("div", { className: "flex", children: _jsx(FolderRow, { label: t(config.labelKey), iconName: config.iconName, iconClassName: config.iconClassName, count: getFilterCount(config, summary), highlighted: config.highlighted, active: isActive(config.key), indentClassName: isTeam ? "pl-8" : "pl-7", onClick: () => onFilterSelect(Object.assign(Object.assign({}, config.filter), (teamId && { teamId }))) }) }, config.key))), completed && (_jsx("div", { className: "flex", children: _jsx(FolderRow, { label: t(completed.labelKey), iconName: completed.iconName, iconClassName: completed.iconClassName, count: getFilterCount(completed, summary), active: isActive(completed.key), indentClassName: isTeam ? "pl-5" : "pl-2", onClick: () => onFilterSelect(Object.assign(Object.assign({}, completed.filter), (teamId && { teamId }))) }) })), allGroups && (_jsx("div", { className: "flex", children: _jsx(FolderRow, { label: t("all_groups"), iconName: "inbox", iconClassName: "text-gray-600", active: allGroups.active, onClick: allGroups.onSelect }) }))] }));
+};
+export default SessionFolderList;

package/dist/components/session/sessionFilters.d.ts

@@ -0,0 +1,24 @@
+import type { IFilterSummary } from "../../store/type";
+import type { ISessionSummaryResponse } from "../../types/dto";
+import type { StrokeIconName } from "../../components/icon/strokeIconNodes";
+export interface SessionFilterConfig {
+    key: string;
+    labelKey: string;
+    iconName: StrokeIconName;
+    iconClassName?: string;
+    filter: IFilterSummary;
+    countSource: "status" | "tag";
+    /** Only shown in team folders (unassigned sessions have no owner yet). */
+    teamOnly?: boolean;
+    /** Needs attention: the count is a red badge instead of plain text. */
+    highlighted?: boolean;
+}
+export declare const SESSION_FILTER_CONFIGS: SessionFilterConfig[];
+export declare const ALL_GROUPS_KEY = "ALL_GROUPS";
+export declare const getFilterConfig: (key: string) => SessionFilterConfig | undefined;
+/** Open-folder rows, without the completed one (it sits beside the "open" group). */
+export declare const getOpenFilterConfigs: (includeUnassigned: boolean) => SessionFilterConfig[];
+export declare const getCompletedFilterConfig: () => SessionFilterConfig | undefined;
+/** Count shown next to a folder, from the summary; 0 when the summary has no entry. */
+export declare const getFilterCount: (config: SessionFilterConfig, summary: ISessionSummaryResponse | undefined) => number;
+//# sourceMappingURL=sessionFilters.d.ts.map

package/dist/components/session/sessionFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessionFilters.d.ts","sourceRoot":"","sources":["../../../src/components/session/sessionFilters.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC9B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,sBAAsB,EAAE,mBAAmB,EA8DvD,CAAC;AAEF,eAAO,MAAM,cAAc,eAAe,CAAC;AAE3C,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM,oCACkB,CAAC;AAE9D,qFAAqF;AACrF,eAAO,MAAM,oBAAoB,GAAI,mBAAmB,OAAO,0BAK5D,CAAC;AAEJ,eAAO,MAAM,wBAAwB,uCAC4C,CAAC;AAElF,uFAAuF;AACvF,eAAO,MAAM,cAAc,GACzB,QAAQ,mBAAmB,EAC3B,SAAS,uBAAuB,GAAG,SAAS,KAC3C,MAMF,CAAC"}

package/dist/components/session/sessionFilters.js

@@ -0,0 +1,80 @@
+import { SessionStatus, SessionTag } from "../../types/chat";
+export const SESSION_FILTER_CONFIGS = [
+    {
+        key: SessionStatus.UNASSIGNED,
+        labelKey: "unassigned",
+        iconName: "user-plus",
+        iconClassName: "text-warning-400",
+        filter: { status: SessionStatus.UNASSIGNED, tag: undefined },
+        countSource: "status",
+        teamOnly: true,
+        highlighted: true,
+    },
+    {
+        key: SessionTag.SLOW_PROCESSING,
+        labelKey: "slow_processing",
+        iconName: "alert-circle",
+        iconClassName: "text-danger-600",
+        filter: { status: undefined, tag: SessionTag.SLOW_PROCESSING },
+        countSource: "tag",
+        highlighted: true,
+    },
+    {
+        key: SessionStatus.WAITING_PROCESS,
+        labelKey: "waiting_process",
+        iconName: "clock",
+        iconClassName: "text-warning-400",
+        filter: { status: SessionStatus.WAITING_PROCESS, tag: undefined },
+        countSource: "status",
+        highlighted: true,
+    },
+    {
+        key: SessionTag.AWAITING_REPLY,
+        labelKey: "awaiting_reply",
+        iconName: "reply",
+        iconClassName: "text-secondary-400",
+        filter: { status: undefined, tag: SessionTag.AWAITING_REPLY },
+        countSource: "tag",
+        highlighted: true,
+    },
+    {
+        key: SessionStatus.IN_PROCESS,
+        labelKey: "in_process",
+        iconName: "play-circle",
+        iconClassName: "text-primary-400",
+        filter: { status: SessionStatus.IN_PROCESS, tag: undefined },
+        countSource: "status",
+    },
+    {
+        key: SessionTag.TEMPORARILY_PAUSED,
+        labelKey: "temporarily_paused",
+        iconName: "pause-circle",
+        iconClassName: "text-gray-600",
+        filter: { status: undefined, tag: SessionTag.TEMPORARILY_PAUSED },
+        countSource: "tag",
+    },
+    {
+        key: SessionStatus.COMPLETED,
+        labelKey: "closed_sessions",
+        iconName: "check-circle",
+        iconClassName: "text-gray-600",
+        filter: { status: SessionStatus.COMPLETED, tag: undefined },
+        countSource: "status",
+    },
+];
+export const ALL_GROUPS_KEY = "ALL_GROUPS";
+export const getFilterConfig = (key) => SESSION_FILTER_CONFIGS.find((config) => config.key === key);
+/** Open-folder rows, without the completed one (it sits beside the "open" group). */
+export const getOpenFilterConfigs = (includeUnassigned) => SESSION_FILTER_CONFIGS.filter((config) => config.key !== SessionStatus.COMPLETED &&
+    (!config.teamOnly || includeUnassigned));
+export const getCompletedFilterConfig = () => SESSION_FILTER_CONFIGS.find((config) => config.key === SessionStatus.COMPLETED);
+/** Count shown next to a folder, from the summary; 0 when the summary has no entry. */
+export const getFilterCount = (config, summary) => {
+    var _a, _b, _c;
+    if (!summary)
+        return 0;
+    if (config.key === SessionStatus.COMPLETED)
+        return (_a = summary.completedSessionCount) !== null && _a !== void 0 ? _a : 0;
+    const source = config.countSource === "status" ? summary.sessionStatuses : summary.tagCounts;
+    return (_c = (_b = source === null || source === void 0 ? void 0 : source.find((item) => item.type === config.key)) === null || _b === void 0 ? void 0 : _b.count) !== null && _c !== void 0 ? _c : 0;
+};

package/dist/components/shortcut-help/ShortcutHelpModal.d.ts

@@ -0,0 +1,8 @@
+interface ShortcutHelpModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+/** Lists the desk shortcuts and lets the agent turn single-key ones off. */
+declare const ShortcutHelpModal: ({ open, onClose }: ShortcutHelpModalProps) => import("react/jsx-runtime").JSX.Element;
+export default ShortcutHelpModal;
+//# sourceMappingURL=ShortcutHelpModal.d.ts.map

package/dist/components/shortcut-help/ShortcutHelpModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutHelpModal.d.ts","sourceRoot":"","sources":["../../../src/components/shortcut-help/ShortcutHelpModal.tsx"],"names":[],"mappings":"AAMA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAiBD,4EAA4E;AAC5E,QAAA,MAAM,iBAAiB,GAAI,mBAAmB,sBAAsB,4CA6DnE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/shortcut-help/ShortcutHelpModal.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Switch } from "antd";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
+import useShortcutPrefsStore from "../../store/shortcutPrefs";
+const SHORTCUTS = [
+    { labelKey: "shortcut_next_prev", keys: ["J", "K"] },
+    { labelKey: "shortcut_reply", keys: ["R"] },
+    { labelKey: "shortcut_internal", keys: ["N"] },
+    { labelKey: "shortcut_search", keys: ["/"] },
+    { labelKey: "shortcut_escape", keys: ["Esc"] },
+    { labelKey: "shortcut_help", keys: ["?"] },
+];
+const Kbd = ({ children }) => (_jsx("kbd", { className: "inline-flex h-6 min-w-[24px] items-center justify-center rounded border border-b-2 border-gray-50 bg-white px-1.5 font-sans text-xs font-semibold text-gray-900", children: children }));
+/** Lists the desk shortcuts and lets the agent turn single-key ones off. */
+const ShortcutHelpModal = ({ open, onClose }) => {
+    const { t } = useTranslation();
+    const enabled = useShortcutPrefsStore((s) => s.singleKeyEnabled);
+    const setEnabled = useShortcutPrefsStore((s) => s.setSingleKeyEnabled);
+    return (_jsx(Modal, { open: open, onCancel: onClose, width: 480, destroyOnHidden: true, closable: { "aria-label": t("close_with_esc") }, "data-cp-name": "ShortcutHelpModal", title: _jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-25 text-primary-500", children: _jsx(StrokeIcon, { name: "keyboard", size: 20 }) }), t("shortcut_help_title")] }), footer: _jsxs("div", { className: "flex items-center gap-2 text-left", children: [_jsxs("span", { className: "flex flex-1 flex-col gap-0.5", children: [_jsx("span", { id: "shortcut-switch-label", className: "text-sm font-medium text-gray-900", children: t("shortcut_switch_label") }), _jsx("span", { className: "text-xs text-gray-600", children: t("shortcut_switch_hint") })] }), _jsx(Switch, { checked: enabled, onChange: setEnabled, "aria-labelledby": "shortcut-switch-label" })] }), children: _jsx("ul", { className: "m-0 list-none p-0", children: SHORTCUTS.map(({ labelKey, keys }, index) => (_jsxs("li", { className: `flex items-center justify-between py-2.5 text-sm text-gray-900 ${index > 0 ? "border-t border-gray-25" : ""}`, children: [_jsx("span", { children: t(labelKey) }), _jsx("span", { className: "flex gap-1", children: keys.map((key) => (_jsx(Kbd, { children: key }, key))) })] }, labelKey))) }) }));
+};
+export default ShortcutHelpModal;

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

@@ -1 +1 @@
-{"version":3,"file":"AssignConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/thread/AssignConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,GAAI,4DAOzB,uBAAuB,4CAyDzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AssignConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/thread/AssignConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,GAAI,4DAOzB,uBAAuB,4CAuDzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/thread/AssignConfirmModal.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, Button, Avatar } from "antd";
+import { Modal, Button } from "antd";
 import { useTranslation, Trans } from "react-i18next";
+import TintedAvatar from "../../components/common/TintedAvatar";
 const AssignConfirmModal = ({ open, agent, loading, onCancel, onConfirm, afterClose, }) => {
     var _a;
     const { t } = useTranslation();
-    return (_jsx(Modal, { open: open, onCancel: onCancel, footer: null, closable: !loading, centered: true, forceRender: true, width: 400, maskClosable: !loading, keyboard: !loading, afterClose: afterClose, "data-cp-name": "AssignConfirmModal", children: _jsxs("div", { className: "flex flex-col items-center gap-4 pt-2", role: "alertdialog", "aria-label": t("manual_assign_confirm_question", {
+    return (_jsx(Modal, { open: open, onCancel: onCancel, footer: null, closable: !loading, centered: true, destroyOnHidden: true, width: 400, maskClosable: !loading, keyboard: !loading, afterClose: afterClose, "data-cp-name": "AssignConfirmModal", children: _jsxs("div", { className: "flex flex-col items-center gap-4 pt-2", role: "alertdialog", "aria-label": t("manual_assign_confirm_question", {
                 name: agent === null || agent === void 0 ? void 0 : agent.displayName,
-            }), children: [_jsx(Avatar, { src: agent === null || agent === void 0 ? void 0 : agent.avatar, size: 48, children: ((_a = agent === null || agent === void 0 ? void 0 : agent.displayName) === null || _a === void 0 ? void 0 : _a.charAt(0)) || "A" }), _jsx("p", { className: "text-base text-center", children: _jsx(Trans, { i18nKey: "manual_assign_confirm_question", values: { name: agent === null || agent === void 0 ? void 0 : agent.displayName }, components: { bold: _jsx("strong", {}) } }) }), _jsxs("div", { className: "flex gap-3 w-full", children: [_jsx(Button, { className: "flex-1", size: "large", onClick: onCancel, disabled: loading, children: t("cancel") }), _jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onConfirm, loading: loading, disabled: !agent, children: t("manual_assign_button_reassign") })] })] }) }));
+            }), children: [_jsx(TintedAvatar, { name: (_a = agent === null || agent === void 0 ? void 0 : agent.displayName) !== null && _a !== void 0 ? _a : "", src: agent === null || agent === void 0 ? void 0 : agent.avatar, size: 48 }), _jsx("p", { className: "text-base text-center", children: _jsx(Trans, { i18nKey: "manual_assign_confirm_question", values: { name: agent === null || agent === void 0 ? void 0 : agent.displayName }, components: { bold: _jsx("strong", {}) } }) }), _jsxs("div", { className: "flex gap-3 w-full", children: [_jsx(Button, { className: "flex-1", size: "large", onClick: onCancel, disabled: loading, children: t("cancel") }), _jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onConfirm, loading: loading, disabled: !agent, children: t("manual_assign_button_reassign") })] })] }) }));
 };
 export default AssignConfirmModal;

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

@@ -0,0 +1,11 @@
+import { ISessionResponse } from "../../types/dto";
+interface EndSessionConfirmProps {
+    open: boolean;
+    session: ISessionResponse;
+    customerName: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare const EndSessionConfirm: ({ open, session, customerName, onConfirm, onCancel, }: EndSessionConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export default EndSessionConfirm;
+//# sourceMappingURL=EndSessionConfirm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EndSessionConfirm.d.ts","sourceRoot":"","sources":["../../../src/components/thread/EndSessionConfirm.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAK/C,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,gBAAgB,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,iBAAiB,GAAI,uDAMxB,sBAAsB,4CAyCxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/thread/EndSessionConfirm.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ConfirmModal from "../../components/common/ConfirmModal";
+import { END_SESSION_UNDO_MS } from "../../store/pendingSessionClose";
+import { splitDisplayName } from "../../components/conversation/rowDisplayName";
+import { formatSessionTime } from "./sessionDateFormat";
+// Shared by the session card and the header status menu so both ask the same question.
+const EndSessionConfirm = ({ open, session, customerName, onConfirm, onCancel, }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const tagNames = (_a = session.labels) === null || _a === void 0 ? void 0 : _a.map((label) => label.name).join(", ");
+    const rows = [
+        {
+            label: t("end_session_row_session"),
+            value: t("end_session_session_value", {
+                order: session.order,
+                time: formatSessionTime(session.createdDate),
+            }),
+        },
+        { label: t("end_session_row_tags"), value: tagNames || t("end_session_no_tags") },
+        {
+            label: t("end_session_row_owner"),
+            value: ((_b = session.supporter) === null || _b === void 0 ? void 0 : _b.fullName) || t("end_session_no_owner"),
+        },
+    ];
+    return (_jsx(ConfirmModal, { open: open, title: t("end_session_title", { name: splitDisplayName(customerName).name }), okText: t("end_session_button"), cancelText: t("action_cancel"), onOk: onConfirm, onCancel: onCancel, getContainer: () => document.body, footerNote: t("end_session_undo_hint", {
+            count: Math.round(END_SESSION_UNDO_MS / 1000),
+        }), children: _jsx("dl", { className: "m-0 grid grid-cols-[96px_minmax(0,1fr)] gap-y-2 text-sm", children: rows.map((row) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-gray-600", children: row.label }), _jsx("dd", { className: "m-0 break-words", children: row.value })] }, row.label))) }) }));
+};
+export default EndSessionConfirm;

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

@@ -0,0 +1,6 @@
+interface EndSessionToastProps {
+    onUndo: () => void;
+}
+declare const EndSessionToast: ({ onUndo }: EndSessionToastProps) => import("react/jsx-runtime").JSX.Element;
+export default EndSessionToast;
+//# sourceMappingURL=EndSessionToast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EndSessionToast.d.ts","sourceRoot":"","sources":["../../../src/components/thread/EndSessionToast.tsx"],"names":[],"mappings":"AAUA,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,YAAY,oBAAoB,4CA4BxD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/thread/EndSessionToast.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "antd";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { END_SESSION_UNDO_MS } from "../../store/pendingSessionClose";
+const TOTAL_SECONDS = Math.ceil(END_SESSION_UNDO_MS / 1000);
+const EndSessionToast = ({ onUndo }) => {
+    const { t } = useTranslation();
+    const [secondsLeft, setSecondsLeft] = useState(TOTAL_SECONDS);
+    useEffect(() => {
+        const interval = setInterval(() => setSecondsLeft((value) => Math.max(value - 1, 0)), 1000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs("span", { className: "inline-flex items-center gap-3", "data-cp-name": "EndSessionToast", children: [_jsx("span", { className: "font-medium", children: t("end_session_done") }), _jsx(Button, { type: "link", icon: _jsx(StrokeIcon, { name: "undo", size: 18 }), onClick: onUndo, className: "!h-8 !px-2 !font-medium", children: t("undo") }), _jsx("span", { className: "text-xs text-gray-600", children: t("end_session_seconds_left", { count: secondsLeft }) })] }));
+};
+export default EndSessionToast;

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

@@ -0,0 +1,46 @@
+import type { ChangeEvent } from "react";
+export type GroupInfoRow = "member-permission" | "admin-permission" | "invite-link";
+export type GroupInfoConfirm = "leave" | "disband" | "delete";
+export interface GroupInfoBodyCrmProps {
+    groupID: string;
+    groupName?: string;
+    faceURL?: string;
+    ownerUserID?: string;
+    introduction?: string;
+    memberCount?: number;
+    isPublic: boolean;
+    canEditAvatar: boolean;
+    canEditName: boolean;
+    canEditDescription: boolean;
+    canConfigPermissions: boolean;
+    showInviteLink: boolean;
+    showAllowSend: boolean;
+    isOwner: boolean;
+    isAdminOrOwner: boolean;
+    isViewOnlyMember: boolean;
+    notifyEnabled: boolean;
+    isTogglingNotification: boolean;
+    allowSendMessage: boolean;
+    isTogglingSendMessage: boolean;
+    isAvatarUploading: boolean;
+    isSaving: boolean;
+    editingField: "name" | "description" | null;
+    nameValue: string;
+    descriptionValue: string;
+    avatarInputRef: React.RefObject<HTMLInputElement>;
+    onNameChange: (value: string) => void;
+    onDescriptionChange: (value: string) => void;
+    onStartEdit: (field: "name" | "description") => void;
+    onCancelEdit: (field: "name" | "description") => void;
+    onSaveEdit: (field: "name" | "description") => void;
+    onAvatarClick: () => void;
+    onAvatarSelect: (event: ChangeEvent<HTMLInputElement>) => void;
+    onToggleNotification: (checked: boolean) => void;
+    onToggleSendMessage: (checked: boolean) => void;
+    onOpenRow: (row: GroupInfoRow) => void;
+    onConfirm: (action: GroupInfoConfirm) => void;
+}
+/** CRM body of the group info panel: identity, description, settings, admin rows, danger zone. */
+declare const GroupInfoBodyCrm: (props: GroupInfoBodyCrmProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupInfoBodyCrm;
+//# sourceMappingURL=GroupInfoBodyCrm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupInfoBodyCrm.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupInfoBodyCrm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,aAAa,CAAC;AACpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,sBAAsB,EAAE,OAAO,CAAC;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACrD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C;AA6BD,kGAAkG;AAClG,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA8JrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/GroupInfoBodyCrm.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Input } from "antd";
+import { useTranslation } from "react-i18next";
+import { CrmIcon as Icon } from "../../components/group/crmIcon";
+import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
+import { ACCEPTED_IMAGE_TYPES } from "../../utils/fileValidation";
+import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
+import { DangerRow, InfoCard, NavRow, SectionLabel, SwitchRow } from "./GroupInfoRows";
+const ICON_BUTTON = `flex shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 ${FOCUS_RING_CLASS}`;
+const Chip = ({ icon, tone, children }) => (_jsxs("span", { className: `inline-flex h-[22px] items-center gap-1 whitespace-nowrap rounded-full px-2 text-xs font-medium ${tone === "primary" ? "bg-primary-25 text-primary-500" : "bg-gray-25 text-gray-900"}`, children: [_jsx(Icon, { icon: icon, size: 12 }), children] }));
+const EditActions = ({ disabled, canSave, onCancel, onSave }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex justify-end gap-2", children: [_jsx("button", { type: "button", disabled: disabled, onClick: onCancel, className: `h-8 rounded-lg border border-gray-50 bg-white px-3 text-sm font-medium text-gray-900 disabled:text-gray-300 ${FOCUS_RING_CLASS}`, children: t("action_cancel") }), _jsx("button", { type: "button", disabled: !canSave, onClick: onSave, className: `h-8 rounded-lg bg-primary-400 px-3 text-sm font-medium text-white disabled:bg-gray-75 disabled:text-gray-300 ${FOCUS_RING_CLASS}`, children: t("save") })] }));
+};
+/** CRM body of the group info panel: identity, description, settings, admin rows, danger zone. */
+const GroupInfoBodyCrm = (props) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const descriptionRef = useRef(null);
+    const { editingField } = props;
+    useEffect(() => {
+        var _a;
+        if (editingField === "description")
+            (_a = descriptionRef.current) === null || _a === void 0 ? void 0 : _a.focus({ cursor: "end" });
+    }, [editingField]);
+    const hasDescription = Boolean(props.introduction);
+    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(GroupCompositeAvatar, { groupID: props.groupID, faceURL: props.faceURL, ownerUserID: props.ownerUserID, 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: [
+                    _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") }))] })] }));
+};
+export default GroupInfoBodyCrm;

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export declare const SectionLabel: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Bordered card that stacks rows separated by hairlines inset past the icon. */
+export declare const InfoCard: ({ children }: {
+    children: ReactNode[];
+}) => import("react/jsx-runtime").JSX.Element;
+interface SwitchRowProps {
+    icon: string;
+    label: string;
+    hint?: string;
+    checked: boolean;
+    loading?: boolean;
+    onChange: (checked: boolean) => void;
+}
+export declare const SwitchRow: ({ icon, label, hint, checked, loading, onChange, }: SwitchRowProps) => import("react/jsx-runtime").JSX.Element;
+interface NavRowProps {
+    icon: string;
+    label: string;
+    onClick: () => void;
+}
+export declare const NavRow: ({ icon, label, onClick }: NavRowProps) => import("react/jsx-runtime").JSX.Element;
+interface DangerRowProps {
+    icon: string;
+    label: string;
+    onClick: () => void;
+    /** When set the row is disabled and the note explains why. */
+    disabledNote?: string;
+}
+export declare const DangerRow: ({ icon, label, onClick, disabledNote }: DangerRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GroupInfoRows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupInfoRows.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupInfoRows.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,YAAY,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAEjE,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,QAAQ,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,EAAE,CAAA;CAAE,4CAY/D,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,GAAI,oDAOvB,cAAc,4CAmBhB,CAAC;AAEF,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,GAAI,0BAA0B,WAAW,4CAa3D,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,wCAAwC,cAAc,4CAiB/E,CAAC"}

package/dist/components/thread/GroupInfoRows.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from "antd";
+import clsx from "clsx";
+import { CrmIcon as Icon } from "../../components/group/crmIcon";
+import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
+export const SectionLabel = ({ children }) => (_jsx("span", { className: "-mb-2 text-xs font-medium text-gray-600", children: children }));
+/** Bordered card that stacks rows separated by hairlines inset past the icon. */
+export const InfoCard = ({ children }) => {
+    const rows = children.filter(Boolean);
+    return (_jsx("div", { className: "flex flex-col overflow-hidden rounded-xl border border-gray-25", children: rows.map((row, index) => (_jsxs("div", { children: [index > 0 && _jsx("div", { "aria-hidden": "true", className: "ml-11 h-px bg-gray-25" }), row] }, index))) }));
+};
+export const SwitchRow = ({ icon, label, hint, checked, loading, onChange, }) => {
+    const id = `group-switch-${icon}`;
+    return (_jsxs("div", { className: "flex min-h-12 items-center gap-3 px-3 py-2", children: [_jsx(Icon, { icon: icon, size: 20, className: "shrink-0 text-gray-600" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { id: id, className: "text-sm text-gray-900", children: label }), hint && _jsx("span", { className: "text-xs leading-snug text-gray-600", children: hint })] }), _jsx(Switch, { checked: checked, loading: loading, onChange: onChange, "aria-labelledby": id })] }));
+};
+export const NavRow = ({ icon, label, onClick }) => (_jsxs("button", { type: "button", onClick: onClick, className: clsx("flex h-12 w-full items-center gap-3 px-3 text-left text-sm text-gray-900 hover:bg-gray-10", FOCUS_RING_CLASS), children: [_jsx(Icon, { icon: icon, size: 20, className: "shrink-0 text-gray-600" }), _jsx("span", { className: "flex-1", children: label }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "shrink-0 text-gray-600" })] }));
+export const DangerRow = ({ icon, label, onClick, disabledNote }) => (_jsxs("button", { type: "button", onClick: onClick, disabled: Boolean(disabledNote), className: clsx("flex h-11 w-full items-center gap-3 rounded-lg px-3 text-left text-sm font-medium text-danger-600", disabledNote ? "cursor-not-allowed" : "hover:bg-danger-10", FOCUS_RING_CLASS), children: [_jsx(Icon, { icon: icon, size: 20, className: clsx("shrink-0", disabledNote && "opacity-50") }), _jsx("span", { className: clsx("flex-1", disabledNote && "opacity-50"), children: label }), disabledNote && (_jsx("span", { className: "text-xs font-normal text-gray-600", children: disabledNote }))] }));

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":"AAsBA,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,mDA8mBjE,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,mDAqrBjE,CAAC;AAEF,eAAe,eAAe,CAAC"}