@droppii-org/chat-sdk 0.6.55 → 0.7.0

package/dist/components/compose/ComposeNewMessageModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAuI7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAwO7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/compose/ComposeNewMessageModal.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clickableProps, FOCUS_RING_CLASS } from "../../utils/a11yClickable";
 import { useDebounce } from "ahooks";
 import { Avatar, Empty, Input, Modal, Spin } from "antd";
 import { useState } from "react";
@@ -10,10 +11,15 @@ import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
 import { DChatSDK } from "../../constants/sdk";
 import useConversationStore from "../../store/conversation";
 import CreateGroupForm from "../../components/group/CreateGroupForm";
+import useAuthStore from "../../store/auth";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import TintedAvatar from "../../components/common/TintedAvatar";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
 const ComposeNewMessageModal = ({ open, onClose, }) => {
     const { t } = useTranslation("conversation-inbox");
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [step, setStep] = useState("compose");
+    const [footerEl, setFooterEl] = useState(null);
     const [search, setSearch] = useState("");
     const [openingUserID, setOpeningUserID] = useState(null);
     const debouncedSearch = useDebounce(search, { wait: 300 });
@@ -54,6 +60,10 @@ const ComposeNewMessageModal = ({ open, onClose, }) => {
             setOpeningUserID(null);
         }
     };
-    return (_jsx(Modal, { "data-cp-name": "ComposeNewMessageModal", title: step === "create-group" ? t("create_group.title") : t("compose.title"), open: open, onCancel: handleClose, afterClose: handleAfterClose, footer: null, centered: true, forceRender: true, width: step === "create-group" ? 720 : undefined, getContainer: false, children: step === "compose" ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Input, { size: "large", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }) }), _jsxs("button", { type: "button", className: "flex items-center gap-3 rounded-xl bg-[var(--dc-color-primary-light)] px-4 py-3.5 text-left transition-colors hover:bg-[var(--dc-color-primary-light)]", onClick: () => setStep("create-group"), children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white", children: _jsx(Icon, { icon: "user-three-b", size: 22, className: "text-[var(--dc-color-primary)]" }) }), _jsx("span", { className: "flex-1 text-base font-semibold text-gray-900", children: t("compose.create_group") }), _jsx(Icon, { icon: "angle-right-o", size: 18, className: "text-gray-400" })] }), !debouncedSearch && (_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: "shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("compose.recent_suggestions") }), _jsx("span", { className: "h-px flex-1 bg-gray-100" })] })), _jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("compose.no_member_found") })) : (accounts.map((account) => (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 border-b border-gray-50 px-1 py-3 transition-colors last:border-b-0 hover:bg-[#f5f5f5]", onClick: () => handleOpenDirectMessage(account), children: [_jsx(Avatar, { src: account.avatar, size: 44, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }, account.userID)))) })] })) : (_jsx(CreateGroupForm, { onDone: handleClose })) }));
+    return (_jsx(Modal, { "data-cp-name": "ComposeNewMessageModal", title: step !== "create-group" ? (t("compose.title")) : isCrm ? (_jsxs("span", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: () => setStep("compose"), "aria-label": t("create_group.back_to_compose_label"), title: t("create_group.back_to_compose_label"), className: "-ml-1 flex h-8 w-8 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: _jsx(StrokeIcon, { name: "chevron-left", size: 20 }) }), t("create_group.title")] })) : (t("create_group.title")), open: open, onCancel: handleClose, afterClose: handleAfterClose, footer: isCrm && step === "create-group" ? _jsx("div", { ref: setFooterEl }) : null, centered: true, destroyOnHidden: true, width: step === "create-group" ? 720 : undefined, getContainer: false, children: step === "compose" ? (_jsxs("div", { className: "flex flex-col gap-4", children: [isCrm ? (_jsx(Input, { size: "large", variant: "borderless", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), "aria-label": t("compose.search_member_placeholder"), className: "!bg-gray-5 !px-2.5 focus-within:!ring-2 focus-within:!ring-primary-200", prefix: _jsx(StrokeIcon, { name: "search", size: 18, className: "mr-1 text-gray-600" }) })) : (_jsx(Input, { size: "large", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }) })), _jsxs("button", { type: "button", className: `flex items-center gap-3 rounded-xl px-4 py-3.5 text-left transition-colors ${isCrm
+                        ? "bg-gray-5 hover:bg-gray-25"
+                        : "bg-[var(--dc-color-primary-light)] hover:bg-[var(--dc-color-primary-light)]"}`, onClick: () => setStep("create-group"), children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white", children: isCrm ? (_jsx(StrokeIcon, { name: "users", size: 22, className: "text-primary-400" })) : (_jsx(Icon, { icon: "user-three-b", size: 22, className: "text-[var(--dc-color-primary)]" })) }), _jsx("span", { className: "flex-1 text-base font-semibold text-gray-900", children: t("compose.create_group") }), isCrm ? (_jsx(StrokeIcon, { name: "chevron-right", size: 18, className: "text-gray-600" })) : (_jsx(Icon, { icon: "angle-right-o", size: 18, className: "text-gray-400" }))] }), !debouncedSearch && (_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: isCrm
+                                ? "shrink-0 text-[13px] font-semibold text-gray-600"
+                                : "shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("compose.recent_suggestions") }), _jsx("span", { className: `h-px flex-1 ${isCrm ? "bg-gray-25" : "bg-gray-100"}` })] })), _jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("compose.no_member_found") })) : (accounts.map((account) => isCrm ? (_jsxs("div", Object.assign({ className: `flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-5 ${FOCUS_RING_CLASS}` }, clickableProps(() => handleOpenDirectMessage(account)), { children: [_jsx(TintedAvatar, { name: account.displayName, src: account.avatar, size: 40 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-gray-900", children: account.displayName }), account.username && (_jsx("span", { className: "truncate text-xs text-gray-600", children: account.username }))] }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }), account.userID)) : (_jsxs("div", Object.assign({ className: `flex cursor-pointer items-center gap-3 border-b border-gray-50 px-1 py-3 transition-colors last:border-b-0 hover:bg-[#f5f5f5] ${FOCUS_RING_CLASS}` }, clickableProps(() => handleOpenDirectMessage(account)), { children: [_jsx(Avatar, { src: account.avatar, size: 44, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }), account.userID)))) })] })) : (_jsx(CreateGroupForm, { onDone: handleClose, footerEl: footerEl })) }));
 };
 export default ComposeNewMessageModal;

package/dist/components/conversation/ConversationByGroupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AASxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CAgE9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAaxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CAoE9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation/ConversationByGroupItem.js

@@ -1,12 +1,16 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useChatContext } from "../../context/ChatContext";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
-import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import { parseLatestMessage } from "../../utils/common";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
-import ThreadCard from "./ThreadCard";
+import DeskConversationRow from "./DeskConversationRow";
+import { GroupVisibility } from "@droppii-org/wasm-client-sdk";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import RowChip from "./RowChip";
+import { formatListRowTime } from "./rowTime";
 import MentionIndicatorIcon from "./MentionIndicatorIcon";
 const ConversationByGroupItem = ({ group, latestPreview, }) => {
     const { t } = useTranslation();
@@ -28,12 +32,12 @@ const ConversationByGroupItem = ({ group, latestPreview, }) => {
     };
     const latestMsg = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsg) || "";
     const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;
-    return (_jsx(ThreadCard, { onClick: handleClick, isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
+    return (_jsx(DeskConversationRow, { onClick: handleClick, isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
             peerType: conversation.peerType,
             conversationType: conversation.conversationType,
             showName: conversation.showName,
         }), mentionIndicator: _jsx(MentionIndicatorIcon, { groupAtType: conversation.groupAtType }), time: latestMsgSendTime > 0
-            ? formatTimestamp(latestMsgSendTime, { hasTime: true })
-            : undefined, avatar: _jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: 48 }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: conversation.showName }) }));
+            ? formatListRowTime(latestMsgSendTime, t)
+            : undefined, avatar: _jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: 40 }), name: conversation.showName, meta: group.visibility === GroupVisibility.Private ? (_jsxs(RowChip, { tone: "primary", children: [_jsx(StrokeIcon, { name: "lock", size: 14 }), t("group_visibility_private")] })) : undefined }));
 };
 export default ConversationByGroupItem;

package/dist/components/conversation/ConversationBySessionItem.d.ts

@@ -1,9 +1,12 @@
 import type { LatestPreview } from "../../hooks/session/useSessionLatestPreview";
 import { ISessionByStatus } from "../../store/type";
+import { SessionTag } from "../../types/chat";
 interface ConversationBySessionItemProps {
     sessionItem: ISessionByStatus;
     latestPreview?: LatestPreview;
+    /** Tag the open folder already filters by; its chip would repeat the folder name. */
+    folderTag?: SessionTag;
 }
-declare const ConversationBySessionItem: ({ sessionItem, latestPreview, }: ConversationBySessionItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ConversationBySessionItem: ({ sessionItem, latestPreview, folderTag, }: ConversationBySessionItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ConversationBySessionItem;
 //# sourceMappingURL=ConversationBySessionItem.d.ts.map

package/dist/components/conversation/ConversationBySessionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAahD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAyFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qFAAqF;IACrF,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB;AAaD,QAAA,MAAM,yBAAyB,GAAI,4CAIhC,8BAA8B,mDAsGhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -1,19 +1,32 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PeerType } from "../../types/conversation";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
-import { Avatar } from "antd";
 import { useChatContext } from "../../context/ChatContext";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
-import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 import { isGroupSession } from "../../utils/imCommon";
 import { resolveBotSessionOwnerIdentity } from "../../utils/conversation";
+import { SessionTag } from "../../types/chat";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
-import ThreadCard from "./ThreadCard";
+import DeskConversationRow from "./DeskConversationRow";
+import { formatListRowTime } from "./rowTime";
+import DeskRowAvatar from "./DeskRowAvatar";
+import RowChip from "./RowChip";
+import { buildSessionPreview } from "./internalNotePreview";
+import { splitDisplayName } from "./rowDisplayName";
 import MentionIndicatorIcon from "./MentionIndicatorIcon";
-const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
-    var _a, _b;
+const TAG_CHIPS = {
+    [SessionTag.AWAITING_REPLY]: { tone: "warning", labelKey: "awaiting_reply" },
+    [SessionTag.SLOW_PROCESSING]: { tone: "danger", labelKey: "slow_processing" },
+    [SessionTag.TEMPORARILY_PAUSED]: {
+        tone: "neutral",
+        labelKey: "temporarily_paused",
+    },
+};
+const ConversationBySessionItem = ({ sessionItem, latestPreview, folderTag, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { t } = useTranslation();
     const { user } = useChatContext();
     const onNavigate = useChatNavigate();
@@ -36,18 +49,31 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
         setSelectedConversationId(conversation.conversationID);
     };
     const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
-    const ownerIdentity = resolveBotSessionOwnerIdentity(conversation, sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.owner, user === null || user === void 0 ? void 0 : user.userID);
-    const title = (_a = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _a !== void 0 ? _a : displayName;
+    // The session payload names the customer even while the conversation is a bare
+    // fallback (no peerType yet), so the row's name and avatar tint never jump.
+    const isBotSession = (conversation === null || conversation === void 0 ? void 0 : conversation.peerType) === PeerType.BOT || Boolean(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.botId);
+    const owner = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.owner;
+    const ownerIdentity = (_a = resolveBotSessionOwnerIdentity(conversation, owner, user === null || user === void 0 ? void 0 : user.userID)) !== null && _a !== void 0 ? _a : (isBotSession && (((_b = owner === null || owner === void 0 ? void 0 : owner.fullName) === null || _b === void 0 ? void 0 : _b.trim()) || ((_c = owner === null || owner === void 0 ? void 0 : owner.username) === null || _c === void 0 ? void 0 : _c.trim()))
+        ? {
+            displayName: ((_d = owner.fullName) === null || _d === void 0 ? void 0 : _d.trim()) && ((_e = owner.username) === null || _e === void 0 ? void 0 : _e.trim())
+                ? `${owner.fullName.trim()} (${owner.username.trim()})`
+                : (((_f = owner.fullName) === null || _f === void 0 ? void 0 : _f.trim()) || ((_g = owner.username) === null || _g === void 0 ? void 0 : _g.trim())),
+            avatarUrl: ((_h = owner.avatar) === null || _h === void 0 ? void 0 : _h.trim()) || undefined,
+        }
+        : null);
+    const fullTitle = (_j = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _j !== void 0 ? _j : displayName;
+    const { name } = splitDisplayName(fullTitle);
     const latestMsg = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsg) || "";
     const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;
     if (!conversation)
         return null;
-    return (_jsx(ThreadCard, { onClick: () => handleConversationClick(conversation), isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
+    const tagChip = sessionItem.tag !== folderTag ? TAG_CHIPS[sessionItem.tag] : undefined;
+    return (_jsx(DeskConversationRow, { onClick: () => handleConversationClick(conversation), isSelected: isSelected, unreadCount: conversation.unreadCount, preview: buildSessionPreview(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
             peerType: conversation.peerType,
             conversationType: conversation.conversationType,
             showName: conversation.showName,
         }), mentionIndicator: _jsx(MentionIndicatorIcon, { groupAtType: conversation.groupAtType }), time: latestMsgSendTime > 0
-            ? formatTimestamp(latestMsgSendTime, { hasTime: true })
-            : undefined, avatar: ownerIdentity ? (_jsx(Avatar, { size: 48, src: ownerIdentity.avatarUrl, children: title.charAt(0) })) : isGroupSession(conversation.conversationType) ? (_jsx(GroupCompositeAvatar, { groupID: conversation.groupID, faceURL: avatar, groupName: displayName, size: 48 })) : (_jsx(Avatar, { size: 48, src: avatar, children: ((_b = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _b === void 0 ? void 0 : _b.call(displayName, 0)) || "A" })), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: title }) }));
+            ? formatListRowTime(latestMsgSendTime, t)
+            : undefined, avatar: !ownerIdentity && isGroupSession(conversation.conversationType) ? (_jsx(GroupCompositeAvatar, { groupID: conversation.groupID, faceURL: avatar, groupName: displayName, size: 40 })) : (_jsx(DeskRowAvatar, { name: name, src: ownerIdentity ? ownerIdentity.avatarUrl : avatar })), name: name, nameTooltip: fullTitle, meta: tagChip ? (_jsx(RowChip, { tone: tagChip.tone, children: t(tagChip.labelKey) })) : undefined }));
 };
 export default ConversationBySessionItem;

package/dist/components/conversation/DeskConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,oBAAoB,+CAwVzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA+BA,QAAA,MAAM,oBAAoB,+CAgRzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -2,8 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import { useSearchParams } from "next/navigation";
-import { Input, Empty, Drawer, Button, Spin } from "antd";
-import { Icon } from "../../components/icon";
+import { Drawer } from "antd";
 import useConversationStore from "../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useBoolean, useDebounce } from "ahooks";
@@ -19,10 +18,16 @@ import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionS
 import { useConversationGroups } from "../../hooks/group/useConversationGroups";
 import { DChatSDK } from "../../constants/sdk";
 import emitter from "../../utils/events";
-import { ALL_GROUPS_KEY, getFilterConfig, } from "../../components/session/sessionMenuItems";
+import { useGetSessionSummary } from "../../hooks/session/useGetSessionSummary";
+import { getActiveFolder } from "../../store/sessionFolder";
+import { ALL_GROUPS_KEY } from "../../components/session/sessionFilters";
+import DeskListHeader from "./DeskListHeader";
+import DeskListEmptyState from "./DeskListEmptyState";
+import DeskListSkeleton from "./DeskListSkeleton";
+import { getListHeading } from "./listHeading";
 import ComposeNewMessageModal from "../../components/compose/ComposeNewMessageModal";
+import { useCloseOnSidePanelOpen } from "../../hooks/common/useCloseOnSidePanelOpen";
 const DeskConversationList = () => {
-    var _a, _b;
     const searchInputRef = useRef(null);
     const { t } = useTranslation();
     const [search, setSearch] = useState("");
@@ -36,7 +41,7 @@ const DeskConversationList = () => {
     const viewMode = useSessionStore((state) => state.viewMode);
     const isAllGroupsView = viewMode === "allGroups";
     const { data: teamSummaries } = useGetTeamSessionSummary();
-    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, isSyncing, } = useGetSession({
+    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, isSyncing, isLoading: isSessionsLoading, } = useGetSession({
         filter: filterSummary,
         options: { isEnabled: !isAllGroupsView },
     });
@@ -44,22 +49,34 @@ const DeskConversationList = () => {
     const latestPreviewMap = useSessionLatestPreview(rawSessions);
     const sessions = useSortedSessions(rawSessions, latestPreviewMap);
     const groupLatestPreviewMap = useSessionLatestPreview(conversationGroups);
-    const currentFilterKey = isAllGroupsView
-        ? ALL_GROUPS_KEY
-        : filterSummary.status || filterSummary.tag || "";
-    const filterConfig = getFilterConfig(currentFilterKey);
-    const pathName = filterSummary.teamId
-        ? ((_a = teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.find((team) => team.teamId === filterSummary.teamId)) === null || _a === void 0 ? void 0 : _a.teamName) || ""
-        : t("my_messages");
+    const { data: mySummary } = useGetSessionSummary();
+    const folder = getActiveFolder(filterSummary, viewMode);
+    const heading = getListHeading({ folder, mySummary, teams: teamSummaries });
+    const emptyFilterKey = isAllGroupsView ? ALL_GROUPS_KEY : folder.filterKey;
+    const isListLoading = isAllGroupsView
+        ? isConversationGroupsLoading
+        : isSessionsLoading || isSyncing;
     const debouncedSearch = useDebounce(search, { wait: 500 });
+    // Closing hands focus back to the field (drawer focus restore, Esc); that focus
+    // must not reopen the search it just closed.
+    const searchClosedAtRef = useRef(0);
     const onCloseSearch = () => {
+        var _a;
+        searchClosedAtRef.current = Date.now();
         setSearch("");
         setShowSearchFalse();
-        setTimeout(() => {
-            var _a;
-            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-        }, 500);
+        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     };
+    const onSearchFocus = () => {
+        if (Date.now() - searchClosedAtRef.current < 600)
+            return;
+        setShowSearchTrue();
+    };
+    // Opening a side panel (members, info, media…) closes the conversation search.
+    useCloseOnSidePanelOpen(() => {
+        if (showSearch)
+            onCloseSearch();
+    });
     useEffect(() => {
         if (showSearch) {
             setTimeout(() => {
@@ -129,23 +146,21 @@ const DeskConversationList = () => {
             emitter.off("UPDATE_SESSION", handler);
         };
     }, [filterSummary, refetch]);
-    return (_jsxs("div", { className: "flex flex-col h-full bg-white border-r border-gray-200 w-[320px]", "data-cp-name": "DeskConversationList", children: [_jsxs("div", { className: "p-3 border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
-                                    if (!showSearch && e.target.value) {
-                                        setShowSearchTrue();
-                                    }
-                                    setSearch(e.target.value);
-                                }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch ? (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) })) : (_jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: () => setIsComposeOpen(true), variant: "outlined", className: "p-0 w-[36px] h-[36px] shrink-0 text-gray-500", children: _jsx(Icon, { icon: "edit-b", size: 20 }) }))] }), _jsxs("div", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), isAllGroupsView ? (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: "user-three-o", size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t("all_groups") })] })) : (filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] })))] })] }), _jsxs("div", { className: "relative flex-1 min-h-0", children: [_jsx("div", { id: "scrollableConversationsDiv", style: {
+    return (_jsxs("section", { "aria-label": t("conversation_list_label"), className: "flex flex-col h-full w-full bg-white", "data-cp-name": "DeskConversationList", children: [_jsx(DeskListHeader, { ref: searchInputRef, heading: heading, search: search, isSearching: showSearch, onSearchChange: (value) => {
+                    if (!showSearch && value)
+                        setShowSearchTrue();
+                    setSearch(value);
+                }, onSearchFocus: onSearchFocus, onCloseSearch: onCloseSearch, onCompose: () => setIsComposeOpen(true) }), _jsxs("div", { className: "relative flex-1 min-h-0", children: [_jsx("div", { id: "scrollableConversationsDiv", "aria-busy": isListLoading, style: {
                             height: "100%",
                             overflow: showSearch ? "hidden" : "auto",
-                        }, children: isAllGroupsView ? (isConversationGroupsLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spin, {}) })) : !(conversationGroups === null || conversationGroups === void 0 ? void 0 : conversationGroups.length) ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_conversation") }) })) : (_jsx(InfiniteScroll, { dataLength: conversationGroups.length, next: fetchNextGroupsPage, hasMore: !!hasNextGroupsPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: conversationGroups.map((group) => (_jsx(ConversationByGroupItem, { group: group, latestPreview: groupLatestPreviewMap.get(group.conversationId) }, group.groupId))) }))) : (_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: isSyncing ? (
-                            // conversationList (the client cache dataFlatten joins
-                            // against) hasn't caught up with this filter's BE response
-                            // yet — showing the list now would flash a wrong, too-low
-                            // count that corrects itself a moment later.
-                            _jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spin, {}) })) : (sessions === null || sessions === void 0 ? void 0 : sessions.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_conversation") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId) }, session.conversationId)))) })) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
+                        }, children: isAllGroupsView ? (isConversationGroupsLoading ? (_jsx(DeskListSkeleton, { rows: 8 })) : !(conversationGroups === null || conversationGroups === void 0 ? void 0 : conversationGroups.length) ? (_jsx(DeskListEmptyState, { filterKey: emptyFilterKey })) : (_jsx(InfiniteScroll, { dataLength: conversationGroups.length, next: fetchNextGroupsPage, hasMore: !!hasNextGroupsPage, loader: _jsx(DeskListSkeleton, { rows: 2 }), scrollableTarget: "scrollableConversationsDiv", children: _jsx("div", { className: "flex flex-col gap-0.5 px-1 pb-2", children: conversationGroups.map((group) => (_jsx(ConversationByGroupItem, { group: group, latestPreview: groupLatestPreviewMap.get(group.conversationId) }, group.groupId))) }) }))) : isSessionsLoading || (isSyncing && !(sessions === null || sessions === void 0 ? void 0 : sessions.length)) ? (
+                        // First load, or the client cache has not caught up with any row yet.
+                        _jsx(DeskListSkeleton, { rows: 8 })) : !(sessions === null || sessions === void 0 ? void 0 : sessions.length) ? (_jsx(DeskListEmptyState, { filterKey: emptyFilterKey })) : (_jsx(InfiniteScroll, { dataLength: sessions.length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx(DeskListSkeleton, { rows: 2 }), scrollableTarget: "scrollableConversationsDiv", children: _jsx("div", { className: "flex flex-col gap-0.5 px-1 pb-2", children: sessions.map((session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId), folderTag: filterSummary.tag }, session.conversationId))) }) })) }), _jsx(Drawer, { open: showSearch, "aria-label": t("search"), mask: false, closeIcon: false, styles: {
                             body: {
                                 padding: 0,
                             },
-                        }, getContainer: false, forceRender: true, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] }), _jsx(ComposeNewMessageModal, { open: isComposeOpen, onClose: () => setIsComposeOpen(false) })] }));
+                        }, getContainer: false, 
+                        // Focus stays in the search field; the drawer must not take or restore it.
+                        autoFocus: false, destroyOnHidden: true, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] }), _jsx(ComposeNewMessageModal, { open: isComposeOpen, onClose: () => setIsComposeOpen(false) })] }));
 };
 export default DeskConversationList;

package/dist/components/conversation/DeskConversationRow.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface DeskConversationRowProps {
+    avatar: ReactNode;
+    name: string;
+    /** Full name with username, shown on hover when the row only shows the name. */
+    nameTooltip?: string;
+    preview: string;
+    time?: string;
+    unreadCount?: number;
+    mentionIndicator?: ReactNode;
+    /** Chips under the preview. */
+    meta?: ReactNode;
+    isSelected?: boolean;
+    onClick: () => void;
+}
+/** CRM desk list row; the chip line only exists when the row has chips. */
+declare const DeskConversationRow: ({ avatar, name, nameTooltip, preview, time, unreadCount, mentionIndicator, meta, isSelected, onClick, }: DeskConversationRowProps) => import("react/jsx-runtime").JSX.Element;
+export default DeskConversationRow;
+//# sourceMappingURL=DeskConversationRow.d.ts.map

package/dist/components/conversation/DeskConversationRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskConversationRow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,2EAA2E;AAC3E,QAAA,MAAM,mBAAmB,GAAI,yGAW1B,wBAAwB,4CA2D1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/conversation/DeskConversationRow.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+const formatUnread = (count) => (count > 99 ? "99+" : String(count));
+/** CRM desk list row; the chip line only exists when the row has chips. */
+const DeskConversationRow = ({ avatar, name, nameTooltip, preview, time, unreadCount = 0, mentionIndicator, meta, isSelected = false, onClick, }) => {
+    const { t } = useTranslation();
+    const hasUnread = unreadCount > 0;
+    const hasPreview = preview.trim() !== "";
+    return (_jsxs("button", { type: "button", onClick: onClick, "data-cp-name": "DeskConversationRow", "aria-current": isSelected ? "true" : undefined, className: clsx("relative flex w-full shrink-0 items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", 
+        // Active row: left accent bar, and primary chips turn white so they stay visible.
+        isSelected
+            ? "bg-primary-25 before:absolute before:inset-y-2 before:left-0 before:w-[3px] before:rounded-r-full before:bg-primary-400 [&_[data-tone=primary]]:!bg-white"
+            : "hover:bg-gray-5"), children: [avatar, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("span", { className: "flex items-baseline gap-2", children: [_jsx(Tooltip, { title: nameTooltip && nameTooltip !== name ? nameTooltip : undefined, children: _jsx("span", { className: clsx("min-w-0 flex-1 truncate text-sm text-gray-900", hasUnread || isSelected ? "font-semibold" : "font-medium"), children: name }) }), time && _jsx("span", { className: "shrink-0 text-xs text-gray-600", children: time })] }), _jsxs("span", { className: "flex min-h-4 items-center gap-2", children: [_jsx("span", { className: clsx("min-w-0 flex-1 truncate text-[13px]", hasUnread && hasPreview ? "font-semibold text-gray-900" : "text-gray-600"), children: hasPreview ? preview : t("no_message_yet") }), mentionIndicator, hasUnread && (_jsx("span", { "data-cp-name": "UnreadBadge", className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-primary-400 px-1.5 text-xs font-semibold tabular-nums text-white", children: formatUnread(unreadCount) }))] }), meta && (_jsx("span", { className: "flex h-5 items-center gap-1 overflow-hidden", children: meta }))] })] }));
+};
+export default DeskConversationRow;

package/dist/components/conversation/DeskListEmptyState.d.ts

@@ -0,0 +1,6 @@
+/** Shown when the selected folder has no conversations; the sentence names the folder. */
+declare const DeskListEmptyState: ({ filterKey }: {
+    filterKey: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DeskListEmptyState;
+//# sourceMappingURL=DeskListEmptyState.d.ts.map

package/dist/components/conversation/DeskListEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskListEmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskListEmptyState.tsx"],"names":[],"mappings":"AAKA,0FAA0F;AAC1F,QAAA,MAAM,kBAAkB,GAAI,eAAe;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,4CAW/D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/conversation/DeskListEmptyState.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { getFolderEmptyKey } from "./folderEmptyState";
+/** Shown when the selected folder has no conversations; the sentence names the folder. */
+const DeskListEmptyState = ({ filterKey }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-6 py-12 text-center", "data-cp-name": "DeskListEmptyState", children: [_jsx(StrokeIcon, { name: "message-circle", size: 56, strokeWidth: 1.25, className: "text-gray-100" }), _jsx("p", { className: "text-sm text-gray-600", children: t(getFolderEmptyKey(filterKey)) })] }));
+};
+export default DeskListEmptyState;

package/dist/components/conversation/DeskListHeader.d.ts

@@ -0,0 +1,14 @@
+import type { ListHeading } from "./listHeading";
+interface DeskListHeaderProps {
+    heading: ListHeading;
+    search: string;
+    isSearching: boolean;
+    onSearchChange: (value: string) => void;
+    onSearchFocus: () => void;
+    onCloseSearch: () => void;
+    onCompose: () => void;
+}
+/** Search row plus a title that names the folder the list below is built from. */
+declare const DeskListHeader: import("react").ForwardRefExoticComponent<DeskListHeaderProps & import("react").RefAttributes<HTMLInputElement>>;
+export default DeskListHeader;
+//# sourceMappingURL=DeskListHeader.d.ts.map

package/dist/components/conversation/DeskListHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskListHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,kFAAkF;AAClF,QAAA,MAAM,cAAc,kHAkJnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/dist/components/conversation/DeskListHeader.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Button, Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { useMediaQuery } from "../../hooks/common/useMediaQuery";
+import useWorkspaceLayoutStore from "../../store/workspaceLayout";
+import useShortcutPrefsStore from "../../store/shortcutPrefs";
+import { LAYOUT_BREAKPOINTS } from "../../constants/layout";
+/** Search row plus a title that names the folder the list below is built from. */
+const DeskListHeader = forwardRef(({ heading, search, isSearching, onSearchChange, onSearchFocus, onCloseSearch, onCompose, }, inputRef) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const [isFocused, setIsFocused] = useState(false);
+    const isFolderInline = useMediaQuery(`(min-width: ${LAYOUT_BREAKPOINTS.folderInline}px)`);
+    const setFolderOverlayOpen = useWorkspaceLayoutStore((state) => state.setFolderOverlayOpen);
+    const singleKeyEnabled = useShortcutPrefsStore((s) => s.singleKeyEnabled);
+    const context = (_a = heading.contextText) !== null && _a !== void 0 ? _a : t((_b = heading.contextKey) !== null && _b !== void 0 ? _b : "my_messages");
+    const showSlashHint = singleKeyEnabled && !isFocused && !search && !isSearching;
+    return (_jsxs("div", { "data-cp-name": "DeskListHeader", children: [_jsxs("div", { className: "flex items-center gap-2 p-3", children: [!isFolderInline && (_jsx(Tooltip, { title: t("folder_panel_open"), children: _jsx(Button, { onClick: () => setFolderOverlayOpen(true), className: "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-gray-5 p-0 text-gray-900", "aria-label": t("folder_panel_open"), children: _jsx(StrokeIcon, { name: "panel-left", size: 20 }) }) })), _jsx("label", { htmlFor: "desk-list-search", className: "sr-only", children: t("search_conversation_label") }), _jsxs("div", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg bg-gray-5 pl-2.5 pr-2 text-gray-600 focus-within:ring-2 focus-within:ring-primary-200", children: [_jsx(StrokeIcon, { name: "search", size: 18 }), _jsx("input", { id: "desk-list-search", ref: inputRef, type: "text", "data-desk-search": true, autoComplete: "off", 
+                                // The narrow list (folder toggle shown) has no room for the long hint.
+                                placeholder: t(isFolderInline ? "desk_search_placeholder" : "search_conversation_label"), value: search, onChange: (e) => onSearchChange(e.target.value), onFocus: () => {
+                                    setIsFocused(true);
+                                    onSearchFocus();
+                                }, onBlur: () => setIsFocused(false), 
+                                // Focus can already sit in the field after a close, so a click opens too.
+                                onClick: () => {
+                                    if (!isSearching)
+                                        onSearchFocus();
+                                }, onKeyDown: (e) => {
+                                    if (e.key === "Escape" && (isSearching || search)) {
+                                        e.stopPropagation();
+                                        onCloseSearch();
+                                    }
+                                }, className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" }), search && (_jsx("button", { type: "button", "aria-label": t("clear"), onClick: onCloseSearch, className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-gray-600 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: _jsx(StrokeIcon, { name: "x", size: 14 }) })), showSlashHint && (_jsx("kbd", { "aria-hidden": "true", 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: "/" }))] }), isSearching ? (_jsx(Tooltip, { title: t("close"), children: _jsx(Button, { onClick: onCloseSearch, "aria-label": t("close"), className: "h-9 w-9 shrink-0 p-0 text-gray-600", children: _jsx(StrokeIcon, { name: "x", size: 20 }) }) })) : (_jsx(Tooltip, { title: t("compose_new_message"), children: _jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: onCompose, "aria-label": t("compose_new_message"), className: "flex !h-8 !w-8 shrink-0 items-center justify-center rounded-lg border-0 bg-primary-25 p-0 text-primary-500", children: _jsx(StrokeIcon, { name: "edit", size: 18 }) }) }))] }), !isSearching && (_jsxs("div", { className: "flex flex-col gap-0.5 border-b border-gray-25 px-4 pb-3 pt-1", children: [isFolderInline ? (_jsx("span", { className: "truncate text-xs font-medium text-gray-600", children: context })) : (_jsxs("button", { type: "button", "aria-label": `${t("folder_panel_open")}: ${context}`, onClick: () => setFolderOverlayOpen(true), className: "flex min-w-0 items-center gap-1 self-start rounded border-0 bg-transparent p-0 text-xs font-medium leading-[1.4] text-gray-600 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: [_jsx("span", { className: "truncate", children: context }), _jsx(StrokeIcon, { name: "chevron-down", size: 14 })] })), _jsxs("h2", { className: "m-0 flex min-w-0 items-center gap-2 text-lg font-bold text-gray-900", children: [_jsx("span", { className: "truncate", children: t(heading.titleKey) }), " ", !!heading.count && (_jsx("span", { className: "inline-flex h-6 shrink-0 items-center rounded-full bg-primary-25 px-2 text-sm font-semibold tabular-nums text-primary-500", children: heading.count }))] })] }))] }));
+});
+DeskListHeader.displayName = "DeskListHeader";
+export default DeskListHeader;

package/dist/components/conversation/DeskListSkeleton.d.ts

@@ -0,0 +1,6 @@
+/** Placeholder rows shaped like DeskConversationRow, shown while the desk list loads. */
+declare const DeskListSkeleton: ({ rows }: {
+    rows: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DeskListSkeleton;
+//# sourceMappingURL=DeskListSkeleton.d.ts.map

package/dist/components/conversation/DeskListSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskListSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskListSkeleton.tsx"],"names":[],"mappings":"AAGA,yFAAyF;AACzF,QAAA,MAAM,gBAAgB,GAAI,UAAU;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,4CAwBnD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/conversation/DeskListSkeleton.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+/** Placeholder rows shaped like DeskConversationRow, shown while the desk list loads. */
+const DeskListSkeleton = ({ rows }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { role: "status", className: "flex flex-col gap-0.5 px-1 pb-2", "data-testid": "desk-list-skeleton", children: [_jsx("span", { className: "sr-only", children: t("desk_list_loading") }), Array.from({ length: rows }, (_, index) => (_jsxs("div", { "aria-hidden": "true", className: "flex items-start gap-3 px-3 py-2.5 motion-safe:animate-pulse", children: [_jsx("span", { className: "h-10 w-10 shrink-0 rounded-full bg-gray-25" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-0.5", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-3.5 w-2/5 rounded bg-gray-25" }), _jsx("span", { className: "ml-auto h-3 w-9 rounded bg-gray-25" })] }), _jsx("span", { className: "h-3 w-4/5 rounded bg-gray-25" }), index % 2 === 0 && _jsx("span", { className: "h-4 w-16 rounded-full bg-gray-25" })] })] }, index)))] }));
+};
+export default DeskListSkeleton;

package/dist/components/conversation/DeskRowAvatar.d.ts

@@ -0,0 +1,8 @@
+interface DeskRowAvatarProps {
+    name: string;
+    src?: string | null;
+}
+/** 40px list avatar; the white ring keeps it visible on the active row's tint. */
+declare const DeskRowAvatar: ({ name, src }: DeskRowAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default DeskRowAvatar;
+//# sourceMappingURL=DeskRowAvatar.d.ts.map

package/dist/components/conversation/DeskRowAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskRowAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskRowAvatar.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,kFAAkF;AAClF,QAAA,MAAM,aAAa,GAAI,eAAe,kBAAkB,4CAQvD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/conversation/DeskRowAvatar.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import TintedAvatar from "../../components/common/TintedAvatar";
+/** 40px list avatar; the white ring keeps it visible on the active row's tint. */
+const DeskRowAvatar = ({ name, src }) => (_jsx(TintedAvatar, { name: name, src: src, size: 40, className: "ring-2 ring-white", testId: "row-avatar-initials" }));
+export default DeskRowAvatar;

package/dist/components/conversation/RowChip.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+declare const TONES: {
+    readonly primary: "bg-primary-25 text-primary-500";
+    readonly warning: "bg-warning-25 text-warning-800";
+    readonly danger: "bg-danger-25 text-danger-800";
+    readonly neutral: "bg-[var(--dc-color-neutral-surface)] text-gray-900";
+};
+/** Small pill on the list row's meta line. */
+declare const RowChip: ({ tone, children, }: {
+    tone: keyof typeof TONES;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RowChip;
+//# sourceMappingURL=RowChip.d.ts.map

package/dist/components/conversation/RowChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowChip.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/RowChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,QAAA,MAAM,KAAK;;;;;CAKD,CAAC;AAEX,8CAA8C;AAC9C,QAAA,MAAM,OAAO,GAAI,qBAGd;IACD,IAAI,EAAE,MAAM,OAAO,KAAK,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAUA,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/conversation/RowChip.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const TONES = {
+    primary: "bg-primary-25 text-primary-500",
+    warning: "bg-warning-25 text-warning-800",
+    danger: "bg-danger-25 text-danger-800",
+    neutral: "bg-[var(--dc-color-neutral-surface)] text-gray-900",
+};
+/** Small pill on the list row's meta line. */
+const RowChip = ({ tone, children, }) => (_jsx("span", { "data-tone": tone, className: clsx("inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 text-xs font-medium", TONES[tone]), children: children }));
+export default RowChip;

package/dist/components/conversation/avatarTint.d.ts

@@ -0,0 +1,6 @@
+export declare const AVATAR_TINTS: readonly ["bg-secondary-25 text-secondary-600", "bg-primary-25 text-primary-500", "bg-success-25 text-success-900", "bg-warning-25 text-warning-800", "bg-[var(--dc-color-neutral-surface)] text-gray-900"];
+/** Same name always gets the same tint, so a customer keeps their colour across lists. */
+export declare const getAvatarTint: (name: string) => string;
+/** Initials from the last two words that start with a letter ("Lê Quốc Bảo" -> "QB"). */
+export declare const getInitials: (name: string) => string;
+//# sourceMappingURL=avatarTint.d.ts.map

package/dist/components/conversation/avatarTint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarTint.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/avatarTint.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,6MAMf,CAAC;AAUX,0FAA0F;AAC1F,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,MAC8B,CAAC;AAE5E,yFAAyF;AACzF,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,MAO1C,CAAC"}