@droppii-org/chat-sdk 0.6.56 → 0.7.1

package/dist/components/search-conversation/SearchAll.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Empty, Spin } from "antd";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import useAuthStore from "../../store/auth";
 import { useSearchMessage } from "../../hooks/search/useSearchMessage";
 import { MessageType } from "@droppii-org/wasm-client-sdk";
 import { Icon } from "../../components/icon";
@@ -13,6 +15,15 @@ import { useSearchUsers } from "../../hooks/search/useSearchUsers";
 import { SearchConversationTabKey } from ".";
 import { useSearchScope } from "./SearchScopeContext";
 import { PAGE_SIZE } from "../../constants";
+/** Section title with "Xem thêm"; CRM uses the desk list's sentence-case labels. */
+const SearchSectionHeader = ({ title, hasMore, onSeeMore, }) => {
+    const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
+    if (isCrm) {
+        return (_jsxs("div", { className: "mt-2 flex min-h-[32px] items-center justify-between px-5", children: [_jsx("span", { className: "text-[13px] font-semibold text-gray-600", children: title }), hasMore && (_jsxs("button", { type: "button", onClick: onSeeMore, className: "flex items-center gap-0.5 rounded border-0 bg-transparent p-0 text-[13px] font-medium text-primary-500 hover:text-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: [t("see_more"), _jsx(StrokeIcon, { name: "chevron-right", size: 16 })] }))] }));
+    }
+    return (_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: title }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasMore && "invisible"), onClick: onSeeMore, children: t("see_more") })] }));
+};
 const SearchConversationAll = ({ searchTerm = "", setActiveKey, }) => {
     const { t } = useTranslation();
     const scope = useSearchScope();
@@ -36,6 +47,6 @@ const SearchConversationAll = ({ searchTerm = "", setActiveKey, }) => {
     if (isLoadingMessage || isLoadingSession || isLoadingGroup) {
         return (_jsx("div", { className: "h-full overflow-auto flex items-center justify-center", children: _jsx(Spin, {}) }));
     }
-    return (_jsxs("div", { className: "h-full overflow-auto", "data-cp-name": "SearchConversationAll", children: [sessions.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("users") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageSession && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Users), children: t("see_more") })] }), _jsx("div", { children: sessions.map((session) => (_jsx(SearchItemAsUser, { session: session, searchTerm: searchTerm }, session.conversationId))) })] })), messages.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("messages") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageMessage && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Messages), children: t("see_more") })] }), _jsx("div", { children: messages.map((message) => (_jsx(SearchItemAsMessage, { message: message.chatLog, searchTerm: searchTerm, displayTag: message.displayTag, tag: message.tag }, message.chatLog.clientMsgID))) })] })), groups.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("groups") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageGroup && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Groups), children: t("see_more") })] }), _jsx("div", { children: groups.map((group) => (_jsx(SearchItemAsGroup, { group: group, searchTerm: searchTerm }, group.conversationId))) })] }))] }));
+    return (_jsxs("div", { className: "h-full overflow-auto", "data-cp-name": "SearchConversationAll", children: [sessions.length > 0 && (_jsxs("div", { children: [_jsx(SearchSectionHeader, { title: t("users"), hasMore: !!hasNextPageSession, onSeeMore: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Users) }), _jsx("div", { children: sessions.map((session) => (_jsx(SearchItemAsUser, { session: session, searchTerm: searchTerm }, session.conversationId))) })] })), messages.length > 0 && (_jsxs("div", { children: [_jsx(SearchSectionHeader, { title: t("messages"), hasMore: !!hasNextPageMessage, onSeeMore: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Messages) }), _jsx("div", { children: messages.map((message) => (_jsx(SearchItemAsMessage, { message: message.chatLog, searchTerm: searchTerm, displayTag: message.displayTag, tag: message.tag }, message.chatLog.clientMsgID))) })] })), groups.length > 0 && (_jsxs("div", { children: [_jsx(SearchSectionHeader, { title: t("groups"), hasMore: !!hasNextPageGroup, onSeeMore: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Groups) }), _jsx("div", { children: groups.map((group) => (_jsx(SearchItemAsGroup, { group: group, searchTerm: searchTerm }, group.conversationId))) })] }))] }));
 };
 export default SearchConversationAll;

package/dist/components/search-conversation/SearchDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchDrawer.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,YAAY,+CAiFjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchDrawer.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,YAAY,+CA8GjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/search-conversation/SearchDrawer.js

@@ -1,33 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Drawer, Input } from "antd";
+import { headerIconButtonClass, HeaderIcon } from "../../components/message/headerIconButton";
+import useAuthStore from "../../store/auth";
 import { Icon } from "../../components/icon";
 import { useIsMobile } from "../../hooks/common/useIsMobile";
-import useBoolean from "ahooks/lib/useBoolean";
+import { useSidePanel } from "../../hooks/common/useSidePanel";
+import useConversationStore from "../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useRef, useState } from "react";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
+import DeskSidePanel from "../../components/common/DeskSidePanel";
+import GroupPanelHeader from "../../components/group/GroupPanelHeader";
 import SearchMessageOnCurrentConversation from "./SearchMessageOnCurrentConversation";
 const SearchDrawer = () => {
     const { t } = useTranslation();
-    const searchInputRef = useRef(null);
-    const [isOpen, { toggle }] = useBoolean(false);
+    const { isOpen, toggle } = useSidePanel("search");
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const conversationId = useConversationStore((state) => { var _a; return (_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.conversationID; });
     const [search, setSearch] = useState("");
+    // Each conversation starts with an empty box. Reset during render so the old
+    // term never searches the new conversation.
+    const [searchConversationId, setSearchConversationId] = useState(conversationId);
+    if (searchConversationId !== conversationId) {
+        setSearchConversationId(conversationId);
+        setSearch("");
+    }
     const isMobile = useIsMobile();
-    const handleDrawerAfterOpenChange = (opened) => {
-        if (!opened) {
-            return;
-        }
-        requestAnimationFrame(() => {
-            var _a;
-            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-        });
+    const triggerRef = useRef(null);
+    // CRM desk: opens like the members panel, inline or as a drawer over the workspace.
+    const hasDeskHost = useDeskPanelHostStore((state) => !!(state.workspace || state.slot));
+    // autoFocus is off so the input keeps focus; hand it back to the trigger on close.
+    const handleClose = () => {
+        var _a;
+        toggle();
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return (_jsxs("div", { className: "inline-flex shrink-0", "data-cp-name": "SearchDrawer", children: [_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, afterOpenChange: handleDrawerAfterOpenChange, mask: false, closeIcon: false, styles: {
+    const searchField = (_jsx(Input, { placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
+            setSearch(e.target.value);
+        }, className: "rounded-lg text-sm", size: "large", allowClear: true, value: search, autoFocus: true }));
+    const results = (_jsx(SearchMessageOnCurrentConversation, { searchTerm: search, onClose: handleClose }));
+    return (_jsxs("div", { className: "inline-flex shrink-0", "data-cp-name": "SearchDrawer", children: [_jsx(Button, { ref: triggerRef, type: "text", shape: "default", className: headerIconButtonClass(isCrm, isOpen), onClick: toggle, "aria-label": t("search_in_conversation"), title: t("search_in_conversation"), children: _jsx(HeaderIcon, { isCrm: isCrm, stroke: "search", font: "search-o" }) }), isCrm && hasDeskHost ? (_jsx(DeskSidePanel, { open: isOpen, label: t("search_in_conversation"), onClose: handleClose, autoFocus: false, children: () => (_jsxs("div", { className: "flex h-full flex-col bg-white", "data-cp-name": "SearchMessagePanel", children: [_jsx(GroupPanelHeader, { title: t("search_message_title"), onClose: handleClose }), _jsx("div", { className: "px-4 pt-3", children: searchField }), _jsx("div", { className: "flex-1 overflow-auto py-3", children: results })] })) })) : (_jsx(Drawer, { open: isOpen, "aria-label": t("search_in_conversation"), onClose: handleClose, autoFocus: false, mask: false, closeIcon: false, styles: {
                     body: {
                         padding: 0,
                         height: "100%",
                     },
-                }, getContainer: false, forceRender: true, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("search_message_title") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "px-3", children: _jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
-                                    setSearch(e.target.value);
-                                }, className: "rounded-lg text-sm", size: "large", allowClear: true, value: search, autoFocus: false }) }), _jsx("div", { className: "flex-1 py-3 overflow-auto", children: _jsx(SearchMessageOnCurrentConversation, { searchTerm: search, onClose: toggle }) })] }) })] }));
+                }, getContainer: false, destroyOnHidden: true, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("search_message_title") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleClose, "aria-label": t("close"), children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "px-3", children: searchField }), _jsx("div", { className: "flex-1 py-3 overflow-auto", children: results })] }) }))] }));
 };
 export default SearchDrawer;

package/dist/components/search-conversation/SearchMessageOnCurrentConversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchMessageOnCurrentConversation.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchMessageOnCurrentConversation.tsx"],"names":[],"mappings":"AAQA,UAAU,uCAAuC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AACD,QAAA,MAAM,kCAAkC,GACtC,OAAO,uCAAuC,4CAyD/C,CAAC;AAEF,eAAe,kCAAkC,CAAC"}
+{"version":3,"file":"SearchMessageOnCurrentConversation.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchMessageOnCurrentConversation.tsx"],"names":[],"mappings":"AAQA,UAAU,uCAAuC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AACD,QAAA,MAAM,kCAAkC,GACtC,OAAO,uCAAuC,4CA4D/C,CAAC;AAEF,eAAe,kCAAkC,CAAC"}

package/dist/components/search-conversation/SearchMessageOnCurrentConversation.js

@@ -10,14 +10,17 @@ const SearchMessageOnCurrentConversation = (props) => {
     const { searchTerm = "" } = props;
     const { t } = useTranslation();
     const conversationData = useConversationStore((state) => state.conversationData);
+    const term = searchTerm.trim();
+    // recvID alone passes the hook's filter, so hold the request until there is a term.
     const { dataFlatten, hasNextPage, fetchNextPage, isLoading } = useSearchMessage({
         payload: {
-            searchTerm: searchTerm.trim(),
+            searchTerm: term,
             contentType: MessageType.TextMessage,
             recvID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID,
         },
+        enabled: term !== "",
     });
-    if (searchTerm.trim() === "")
+    if (term === "")
         return _jsx(Empty, { description: t("no_search_text") });
     if (dataFlatten.length === 0 && !isLoading)
         return _jsx(Empty, { description: t("no_result") });

package/dist/components/search-conversation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,oBAAY,wBAAwB;IAClC,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AACD,QAAA,MAAM,kBAAkB,GAAI,wBAGzB,uBAAuB,4CAkFzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,oBAAY,wBAAwB;IAClC,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AACD,QAAA,MAAM,kBAAkB,GAAI,wBAGzB,uBAAuB,4CAmFzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/search-conversation/index.js

@@ -9,6 +9,7 @@ import SearchConversationAsUsers from "./SearchConversationAsUsers";
 import SearchConversationAsMessages from "./SearchConversationAsMessages";
 import SearchConversationAsGroups from "./SearchConversationAsGroups";
 import { SearchScopeProvider } from "./SearchScopeContext";
+import useAuthStore from "../../store/auth";
 export var SearchConversationTabKey;
 (function (SearchConversationTabKey) {
     SearchConversationTabKey["All"] = "all";
@@ -19,6 +20,7 @@ export var SearchConversationTabKey;
 })(SearchConversationTabKey || (SearchConversationTabKey = {}));
 const SearchConversation = ({ searchTerm, scope = "crm", }) => {
     const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [activeKey, setActiveKey] = useState(SearchConversationTabKey.All);
     const items = useMemo(() => {
         const allItems = [
@@ -63,7 +65,7 @@ const SearchConversation = ({ searchTerm, scope = "crm", }) => {
         (_a = document
             .querySelector('[data-cp-name="SearchConversation"] .ant-tabs-tab-active')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ inline: "nearest", block: "nearest" });
     }, [activeKey]);
-    return (_jsx(SearchScopeProvider, { value: scope, children: _jsx("div", { className: "h-full", "data-cp-name": "SearchConversation", children: _jsx(Tabs, { defaultActiveKey: SearchConversationTabKey.All, items: items, className: "h-full", activeKey: activeKey, onChange: (key) => setActiveKey(key), destroyOnHidden: true, 
+    return (_jsx(SearchScopeProvider, { value: scope, children: _jsx("div", { className: "h-full", "data-cp-name": "SearchConversation", children: _jsx(Tabs, { defaultActiveKey: SearchConversationTabKey.All, items: items, className: isCrm ? "h-full dc-search-tabs-compact" : "h-full", activeKey: activeKey, onChange: (key) => setActiveKey(key), destroyOnHidden: true, 
                 // Ant's built-in tab-overflow ("...") dropdown never recovers from
                 // its initial off-screen measurement inside this Drawer (rendered
                 // with getContainer={false} for unrelated scroll-position reasons —

package/dist/components/search-conversation/item/SearchItemAsGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemAsGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AASxF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,4BAA4B,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CAwEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SearchItemAsGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAUxF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,4BAA4B,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA4FvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/search-conversation/item/SearchItemAsGroup.js

@@ -1,17 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clickableProps } from "../../../utils/a11yClickable";
+import { searchRowClass } from "./searchRowClass";
+import useAuthStore from "../../../store/auth";
+import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
 import { useTranslation } from "react-i18next";
 import { GroupVisibility } from "@droppii-org/wasm-client-sdk";
 import useConversationStore from "../../../store/conversation";
 import { useChatNavigate } from "../../../hooks/conversation/useChatNavigate";
 import { highlightSearch, sanitizeHtml } from "../../../utils/common";
-import { Icon } from "../../../components/icon";
 import GroupCompositeAvatar from "../../../components/group/GroupCompositeAvatar";
+import RowChip from "../../../components/conversation/RowChip";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
 import { useSearchScope } from "../SearchScopeContext";
 const SearchItemAsGroup = (props) => {
     const { group, searchTerm = "" } = props;
     const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const onNavigate = useChatNavigate();
     const scope = useSearchScope();
     const openPdpResult = useOpenPdpSearchResult();
@@ -35,10 +41,14 @@ const SearchItemAsGroup = (props) => {
         newSearchParams.delete("botId");
         onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
     };
-    return (_jsxs("div", { className: "py-3 px-2 flex items-center gap-3 hover:bg-gray-100 hover:rounded-sm cursor-pointer border-b mx-1", onClick: onPressItem, "data-cp-name": "SearchItemAsGroup", children: [_jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: 48 }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-0.5", children: [_jsx("p", { className: "text-sm font-semibold truncate", dangerouslySetInnerHTML: {
+    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsGroup", children: [_jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: isCrm ? 40 : 48 }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-0.5", children: [_jsx("p", { className: isCrm
+                            ? "m-0 truncate text-sm font-medium text-gray-900"
+                            : "text-sm font-semibold truncate", dangerouslySetInnerHTML: {
                             __html: sanitizeHtml(highlightSearch(conversation.showName || "", searchTerm)),
-                        } }), _jsxs("div", { className: "flex items-center gap-1.5 text-xs text-gray-500", children: [_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Icon, { icon: isPublic ? "globe-o" : "lock-o", size: 12 }), isPublic
+                        } }), _jsxs("div", { className: `flex items-center gap-1.5 ${isCrm ? "mt-1 text-[13px] text-gray-600" : "text-xs text-gray-500"}`, children: [isCrm ? (
+                            // Same primary chip as the "Toàn bộ" list and group info.
+                            _jsxs(RowChip, { tone: "primary", children: [_jsx(StrokeIcon, { name: isPublic ? "globe" : "lock", size: 14 }), t(isPublic ? "group_visibility_public" : "group_visibility_private")] })) : (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(AdaptiveIcon, { stroke: isPublic ? "globe" : "lock", font: isPublic ? "globe-o" : "lock-o", size: 12, strokeSize: 14 }), isPublic
                                         ? t("group_visibility_public")
-                                        : t("group_visibility_private")] }), typeof group.memberCount === "number" && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsx("span", { children: t("member_count", { count: group.memberCount }) })] }))] })] })] }));
+                                        : t("group_visibility_private")] })), typeof group.memberCount === "number" && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsx("span", { children: t("member_count", { count: group.memberCount }) })] }))] })] })] })));
 };
 export default SearchItemAsGroup;

package/dist/components/search-conversation/item/SearchItemAsMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemAsMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsMessage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAA4B,MAAM,8BAA8B,CAAC;AAwBrF,UAAU,wBAAwB;IAChC,OAAO,EAAE,WAAW,GAAG;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CAyH3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"SearchItemAsMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAA4B,MAAM,8BAA8B,CAAC;AA0BrF,UAAU,wBAAwB;IAChC,OAAO,EAAE,WAAW,GAAG;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CAsJ3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/search-conversation/item/SearchItemAsMessage.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clickableProps } from "../../../utils/a11yClickable";
+import { searchRowClass } from "./searchRowClass";
 import { SessionType } from "@droppii-org/wasm-client-sdk";
 import { Avatar } from "antd";
 import { formatTimestamp, highlightSearch, sanitizeHtml, } from "../../../utils/common";
@@ -9,6 +11,8 @@ import { message as antdMessage } from "antd";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../../store/conversation";
 import { useMemo } from "react";
+import TintedAvatar from "../../../components/common/TintedAvatar";
+import RowChip from "../../../components/conversation/RowChip";
 import useAuthStore from "../../../store/auth";
 import { getConversationIdFromMessage } from "../../../utils/conversation";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
@@ -19,7 +23,7 @@ const PDP_TAG_LABEL_KEYS = {
     CS_TEAM: "pdp_team_inbox_tag",
 };
 const SearchItemAsMessage = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { t } = useTranslation();
     const { message, searchTerm = "", displayTag, tag, onClick } = props;
     const { user } = useChatContext();
@@ -80,18 +84,25 @@ const SearchItemAsMessage = (props) => {
             msgContent = message === null || message === void 0 ? void 0 : message.content;
         }
     }
-    return (_jsxs("div", { className: "py-3 px-2 flex items-center gap-3 hover:bg-gray-100 hover:rounded-sm cursor-pointer border-b mx-1", onClick: onPressItem, "data-cp-name": "SearchItemAsMessage", children: [_jsx("div", { children: _jsx(Avatar, { size: "large", src: useConversationDisplay
+    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsMessage", children: [_jsx("div", { children: isCrm ? (_jsx(TintedAvatar, { name: (_b = (useConversationDisplay
+                        ? message.senderNickname
+                        : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName)) !== null && _b !== void 0 ? _b : "", src: useConversationDisplay
+                        ? message.senderFaceUrl
+                        : conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL, size: 40 })) : (_jsx(Avatar, { size: "large", src: useConversationDisplay
                         ? message.senderFaceUrl
                         : conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL, alt: useConversationDisplay
                         ? message.senderNickname
                         : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName, children: useConversationDisplay
-                        ? (_b = message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt(0).toUpperCase()
-                        : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName.charAt(0).toUpperCase() }) }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-1", children: [_jsxs("div", { className: "flex flex-1 items-center justify-between", children: [_jsx("span", { className: "text-sm flex-1 font-semibold truncate", children: useConversationDisplay
+                        ? (_c = message.senderNickname) === null || _c === void 0 ? void 0 : _c.charAt(0).toUpperCase()
+                        : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName.charAt(0).toUpperCase() })) }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-1", children: [_jsxs("div", { className: "flex flex-1 items-center justify-between", children: [_jsx("span", { className: isCrm
+                                    ? "min-w-0 flex-1 truncate text-sm font-medium text-gray-900"
+                                    : "text-sm flex-1 font-semibold truncate", children: useConversationDisplay
                                     ? message.senderNickname
-                                    : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName }), _jsx("span", { className: "text-xs text-gray-500", children: formatTimestamp(message.sendTime, {
+                                    : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName }), _jsx("span", { className: isCrm ? "ml-2 shrink-0 text-xs text-gray-600" : "text-xs text-gray-500", children: formatTimestamp(message.sendTime, {
                                     hasTime: true,
-                                }) })] }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-1", children: [_jsx("span", { className: "text-xs flex-1 text-gray-500 truncate", dangerouslySetInnerHTML: {
+                                }) })] }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-1", children: [_jsx("span", { className: isCrm ? "truncate text-[13px] text-gray-600" : "text-xs flex-1 text-gray-500 truncate", dangerouslySetInnerHTML: {
                                     __html: sanitizeHtml(highlightSearch(msgContent, searchTerm)),
-                                } }), tagLabel && (_jsx("span", { className: "text-[10px] text-[var(--dc-color-primary)] bg-[var(--dc-color-primary-light)] px-1.5 py-0.5 rounded w-fit truncate", children: tagLabel }))] })] })] }, message.clientMsgID));
+                                } }), tagLabel &&
+                                (isCrm ? (_jsx("span", { className: "flex h-5 items-center", children: _jsx(RowChip, { tone: "primary", children: tagLabel }) })) : (_jsx("span", { className: "text-[10px] text-[var(--dc-color-primary)] bg-[var(--dc-color-primary-light)] px-1.5 py-0.5 rounded w-fit truncate", children: tagLabel })))] })] })] }), message.clientMsgID));
 };
 export default SearchItemAsMessage;

package/dist/components/search-conversation/item/SearchItemAsUser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemAsUser.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsUser.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAIlF,UAAU,qBAAqB;IAE7B,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA+CrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SearchItemAsUser.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsUser.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAclF,UAAU,qBAAqB;IAE7B,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAsFrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/search-conversation/item/SearchItemAsUser.js

@@ -1,17 +1,29 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clickableProps } from "../../../utils/a11yClickable";
+import { searchRowClass } from "./searchRowClass";
 import { Avatar, message } from "antd";
 import { highlightSearch, sanitizeHtml } from "../../../utils/common";
 import useConversationStore from "../../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
 import { useSearchScope } from "../SearchScopeContext";
+import useAuthStore from "../../../store/auth";
+import { SessionStatus } from "../../../types/chat";
+import TintedAvatar from "../../../components/common/TintedAvatar";
+const STATUS_LABEL_KEYS = {
+    [SessionStatus.UNASSIGNED]: "unassigned",
+    [SessionStatus.WAITING_PROCESS]: "waiting_process",
+    [SessionStatus.IN_PROCESS]: "in_process",
+    [SessionStatus.COMPLETED]: "completed",
+};
 const SearchItemAsUser = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { session, searchTerm = "" } = props;
     const { t } = useTranslation();
     const scope = useSearchScope();
     const openPdpResult = useOpenPdpSearchResult();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const ownerName = `${(_a = session.owner) === null || _a === void 0 ? void 0 : _a.fullName}${((_b = session.owner) === null || _b === void 0 ? void 0 : _b.username) ? ` (${(_c = session.owner) === null || _c === void 0 ? void 0 : _c.username})` : ""}`;
     const onPressItem = async () => {
         if (scope === "pdp-portal") {
@@ -25,8 +37,14 @@ const SearchItemAsUser = (props) => {
             .getState()
             .setSelectedConversationId(session.conversationId);
     };
-    return (_jsxs("div", { className: "py-3 px-2 flex items-center gap-3 hover:bg-gray-100 hover:rounded-sm cursor-pointer border-b mx-1", onClick: onPressItem, "data-cp-name": "SearchItemAsUser", children: [_jsx(Avatar, { size: "large", src: (_d = session.owner) === null || _d === void 0 ? void 0 : _d.avatar, alt: (_e = session.owner) === null || _e === void 0 ? void 0 : _e.username, children: (_g = (_f = session.owner) === null || _f === void 0 ? void 0 : _f.fullName) === null || _g === void 0 ? void 0 : _g.charAt(0).toUpperCase() }), _jsx("div", { className: "flex flex-col flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-semibold truncate", dangerouslySetInnerHTML: {
-                        __html: sanitizeHtml(highlightSearch(ownerName, searchTerm)),
-                    } }) })] }, session.id));
+    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsUser", children: [isCrm ? (_jsx(TintedAvatar, { name: ((_d = session.owner) === null || _d === void 0 ? void 0 : _d.fullName) || ((_e = session.owner) === null || _e === void 0 ? void 0 : _e.username) || "", src: (_f = session.owner) === null || _f === void 0 ? void 0 : _f.avatar, size: 40 })) : (_jsx(Avatar, { size: "large", src: (_g = session.owner) === null || _g === void 0 ? void 0 : _g.avatar, alt: (_h = session.owner) === null || _h === void 0 ? void 0 : _h.username, children: (_k = (_j = session.owner) === null || _j === void 0 ? void 0 : _j.fullName) === null || _k === void 0 ? void 0 : _k.charAt(0).toUpperCase() })), _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [_jsx("p", { className: isCrm
+                            ? "m-0 truncate text-sm font-medium text-gray-900"
+                            : "text-sm font-semibold truncate", dangerouslySetInnerHTML: {
+                            __html: sanitizeHtml(highlightSearch(isCrm ? ((_m = (_l = session.owner) === null || _l === void 0 ? void 0 : _l.fullName) !== null && _m !== void 0 ? _m : "") : ownerName, searchTerm)),
+                        } }), isCrm && (
+                    // Same-name customers differ by username and by the session's state.
+                    _jsxs("p", { className: "m-0 mt-1 flex min-w-0 items-center gap-1 text-[13px] text-gray-600", children: [((_o = session.owner) === null || _o === void 0 ? void 0 : _o.username) && (_jsx("span", { className: "truncate", dangerouslySetInnerHTML: {
+                                    __html: sanitizeHtml(highlightSearch(session.owner.username, searchTerm)),
+                                } })), STATUS_LABEL_KEYS[session.status] && (_jsxs(_Fragment, { children: [((_p = session.owner) === null || _p === void 0 ? void 0 : _p.username) && _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "shrink-0", children: t(STATUS_LABEL_KEYS[session.status]) })] }))] }))] })] }), session.id));
 };
 export default SearchItemAsUser;

package/dist/components/search-conversation/item/searchRowClass.d.ts

@@ -0,0 +1,3 @@
+/** Search result rows. CRM matches the desk list row; other hosts keep the original look. */
+export declare const searchRowClass: (isCrm: boolean) => "mx-2 flex cursor-pointer items-start gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-gray-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400" | "py-3 px-2 flex items-center gap-3 hover:bg-gray-100 hover:rounded-sm cursor-pointer border-b mx-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
+//# sourceMappingURL=searchRowClass.d.ts.map

package/dist/components/search-conversation/item/searchRowClass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchRowClass.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/searchRowClass.ts"],"names":[],"mappings":"AAEA,6FAA6F;AAC7F,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,+WAGgF,CAAC"}

package/dist/components/search-conversation/item/searchRowClass.js

@@ -0,0 +1,5 @@
+import { FOCUS_RING_CLASS } from "../../../utils/a11yClickable";
+/** Search result rows. CRM matches the desk list row; other hosts keep the original look. */
+export const searchRowClass = (isCrm) => isCrm
+    ? "mx-2 flex cursor-pointer items-start gap-3 rounded-lg px-3 py-2.5 transition-colors hover:bg-gray-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
+    : `py-3 px-2 flex items-center gap-3 hover:bg-gray-100 hover:rounded-sm cursor-pointer border-b mx-1 ${FOCUS_RING_CLASS}`;

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

@@ -1,3 +1,7 @@
-declare const DeskAssignedSession: () => import("react/jsx-runtime").JSX.Element;
+interface DeskAssignedSessionProps {
+    /** `inline` sits in the workspace row and can collapse; `overlay` floats over the list on narrow screens. */
+    variant?: "inline" | "overlay";
+}
+declare const DeskAssignedSession: ({ variant }: DeskAssignedSessionProps) => import("react/jsx-runtime").JSX.Element;
 export default DeskAssignedSession;
 //# sourceMappingURL=DeskAssignedSession.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeskAssignedSession.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskAssignedSession.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,mBAAmB,+CAoFxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DeskAssignedSession.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskAssignedSession.tsx"],"names":[],"mappings":"AAeA,UAAU,wBAAwB;IAChC,6GAA6G;IAC7G,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC;AAED,QAAA,MAAM,mBAAmB,GAAI,aAAwB,wBAAwB,4CA2H5E,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/session/DeskAssignedSession.js

@@ -1,26 +1,51 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBoolean } from "ahooks";
-import { Button, Layout } from "antd";
-import { useCallback, useEffect } from "react";
+import { Button, Tooltip } from "antd";
+import { useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../components/icon";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
 import { useGetSessionSummary } from "../../hooks/session/useGetSessionSummary";
 import useSessionStore from "../../store/session";
+import { getActiveFolderId } from "../../store/sessionFolder";
+import useWorkspaceLayoutStore from "../../store/workspaceLayout";
+import { LAYOUT_WIDTHS } from "../../constants/layout";
 import emitter from "../../utils/events";
 import DeskTeamInbox from "./DeskTeamInbox";
-import SessionFilterMenu from "./SessionFilterMenu";
-const { Sider } = Layout;
-const DeskAssignedSession = () => {
+import SessionFolderList from "./SessionFolderList";
+const DeskAssignedSession = ({ variant = "inline" }) => {
     const { t } = useTranslation();
-    const [collapsed, { toggle }] = useBoolean(false);
+    const isOverlay = variant === "overlay";
+    const collapsed = useWorkspaceLayoutStore((state) => { var _a; return !isOverlay && ((_a = state.folderCollapsedChoice) !== null && _a !== void 0 ? _a : false); });
+    const setFolderCollapsedChoice = useWorkspaceLayoutStore((state) => state.setFolderCollapsedChoice);
+    const setFolderOverlayOpen = useWorkspaceLayoutStore((state) => state.setFolderOverlayOpen);
     const setFilterSummary = useSessionStore((state) => state.setFilterSummary);
     const filterSummary = useSessionStore((state) => state.filterSummary);
     const viewMode = useSessionStore((state) => state.viewMode);
+    const activeFolderId = useSessionStore((state) => getActiveFolderId(state.filterSummary, state.viewMode));
     const setViewMode = useSessionStore((state) => state.setViewMode);
     const { data: sessionSummary, refetch } = useGetSessionSummary();
-    const onFilterSelect = useCallback((filter) => setFilterSummary(filter), [setFilterSummary]);
-    const onAllGroupsSelect = useCallback(() => setViewMode("allGroups"), [setViewMode]);
+    const closeOverlay = useCallback(() => {
+        if (isOverlay)
+            setFolderOverlayOpen(false);
+    }, [isOverlay, setFolderOverlayOpen]);
+    const onFilterSelect = useCallback((filter) => {
+        setFilterSummary(filter);
+        closeOverlay();
+    }, [setFilterSummary, closeOverlay]);
+    const onAllGroupsSelect = useCallback(() => {
+        setViewMode("allGroups");
+        closeOverlay();
+    }, [setViewMode, closeOverlay]);
+    // Folders picked from the team inbox change the store without these handlers;
+    // compare against the values seen at mount so mounting itself never closes it.
+    const seenFolder = useRef({ filterSummary, viewMode });
+    useEffect(() => {
+        const seen = seenFolder.current;
+        if (seen.filterSummary === filterSummary && seen.viewMode === viewMode)
+            return;
+        seenFolder.current = { filterSummary, viewMode };
+        closeOverlay();
+    }, [filterSummary, viewMode, closeOverlay]);
     useEffect(() => {
         const handler = () => refetch();
         emitter.on("UPDATE_SESSION", handler);
@@ -29,8 +54,11 @@ const DeskAssignedSession = () => {
         };
     }, [refetch]);
     if (collapsed) {
-        return (_jsx("div", { className: "flex flex-col items-center pt-4 border-r border-gray-200 bg-white", children: _jsx(Button, { type: "text", shape: "circle", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "angle-right-o", size: 22 }) }) }));
+        return (_jsx("div", { className: "flex flex-col items-center shrink-0 pt-3 rounded-xl bg-white shadow-sm", style: { width: LAYOUT_WIDTHS.folderCollapsed }, "data-cp-name": "DeskAssignedSession", children: _jsx(Tooltip, { title: t("folder_panel_expand"), placement: "right", children: _jsx(Button, { type: "text", className: "text-gray-600 w-8 h-8 p-0", "aria-label": t("folder_panel_expand"), onClick: () => setFolderCollapsedChoice(false), children: _jsx(StrokeIcon, { name: "chevrons-right", size: 20 }) }) }) }));
     }
-    return (_jsx(Sider, { collapsible: true, collapsed: false, width: 220, className: "bg-white h-full border-r border-gray-200", trigger: null, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [_jsx("span", { className: "text-md font-semibold flex-1 truncate", children: "Droppii Livechat" }), _jsx(Button, { type: "text", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "angle-left-o", size: 22 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto min-h-0", children: [_jsx("div", { className: "px-4 pt-4 pb-2 text-xs font-semibold text-gray-400 tracking-wider", children: t("my_messages") }), sessionSummary && (_jsx(SessionFilterMenu, { summary: sessionSummary, isActive: !filterSummary.teamId && viewMode === "sessions", isAllGroupsActive: viewMode === "allGroups", filterSummary: filterSummary, onFilterSelect: onFilterSelect, onAllGroupsSelect: onAllGroupsSelect, activeCount: sessionSummary.activeSessionCount })), _jsx(DeskTeamInbox, {})] })] }) }));
+    return (_jsxs("aside", { "aria-label": t("folder_panel_title"), className: `flex flex-col h-full shrink-0 overflow-hidden rounded-xl bg-white ${isOverlay ? "shadow-lg" : "shadow-sm"}`, style: { width: LAYOUT_WIDTHS.folder }, "data-cp-name": "DeskAssignedSession", children: [_jsxs("div", { className: "flex items-center justify-between h-14 pl-4 pr-2 border-b border-gray-25 shrink-0", children: [_jsx("span", { className: "text-base font-bold flex-1 truncate", children: t("desk_brand") }), _jsx(Tooltip, { title: t(isOverlay ? "folder_panel_close" : "folder_panel_collapse"), children: _jsx(Button, { type: "text", className: "text-gray-600 w-8 h-8 p-0", "aria-label": t(isOverlay ? "folder_panel_close" : "folder_panel_collapse"), onClick: () => isOverlay ? setFolderOverlayOpen(false) : setFolderCollapsedChoice(true), children: _jsx(StrokeIcon, { name: isOverlay ? "x" : "chevrons-left", size: 18 }) }) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 pb-2 pt-1", children: [_jsx("div", { className: "px-2 pb-1 pt-3 text-xs font-medium text-gray-600", children: t("my_messages") }), sessionSummary && (_jsx(SessionFolderList, { summary: sessionSummary, activeFolderId: activeFolderId, onFilterSelect: onFilterSelect, allGroups: {
+                            active: viewMode === "allGroups",
+                            onSelect: onAllGroupsSelect,
+                        } })), _jsx(DeskTeamInbox, {})] })] }));
 };
 export default DeskAssignedSession;

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

@@ -1 +1 @@
-{"version":3,"file":"DeskTeamInbox.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskTeamInbox.tsx"],"names":[],"mappings":"AAwDA,QAAA,MAAM,aAAa,sDAyElB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DeskTeamInbox.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskTeamInbox.tsx"],"names":[],"mappings":"AAqEA,QAAA,MAAM,aAAa,sDAsDlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/session/DeskTeamInbox.js

@@ -1,18 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../components/icon";
+import { Tooltip } from "antd";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
 import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionSummary";
 import useSessionStore from "../../store/session";
+import { getActiveFolderId } from "../../store/sessionFolder";
 import emitter from "../../utils/events";
-import SessionFilterMenu from "./SessionFilterMenu";
-const TeamGroup = memo(({ team, isExpanded, isSelected, selectedFilter, onToggle, onFilterSelect, }) => (_jsxs("div", { "data-cp-name": "TeamGroup", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-[#f5f5f5]", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate flex-1", children: team.teamName }), _jsx(Icon, { icon: isExpanded ? "angle-up-o" : "angle-down-o", size: 16, className: "text-gray-400 shrink-0" })] }), isExpanded && (_jsx(SessionFilterMenu, { summary: team.summary, isActive: isSelected, filterSummary: selectedFilter, onFilterSelect: onFilterSelect, includeUnassigned: true, activeCount: team.summary.activeSessionCount }))] })));
+import SessionFolderList from "./SessionFolderList";
+const TeamGroup = memo(({ team, isExpanded, activeFolderId, onToggle, onFilterSelect, }) => {
+    const { t } = useTranslation();
+    const toggleLabel = t(isExpanded ? "folder_group_collapse" : "folder_group_expand", {
+        name: team.teamName,
+    });
+    return (_jsxs("div", { "data-cp-name": "TeamGroup", className: "flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, onClick: () => onToggle(team.teamId), className: "flex h-9 min-w-0 flex-1 items-center gap-2.5 rounded-lg px-2 text-left text-sm font-semibold text-gray-900 hover:bg-gray-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", children: [_jsx(StrokeIcon, { name: "users", size: 18, className: "text-gray-600" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: team.teamName })] }), _jsx(Tooltip, { title: toggleLabel, children: _jsx("button", { type: "button", "aria-label": toggleLabel, "aria-expanded": isExpanded, onClick: () => onToggle(team.teamId), 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: isExpanded ? "chevron-down" : "chevron-right", size: 16 }) }) })] }), isExpanded && (_jsx(SessionFolderList, { summary: team.summary, teamId: team.teamId, activeFolderId: activeFolderId, onFilterSelect: onFilterSelect }))] }));
+});
 TeamGroup.displayName = "TeamGroup";
 const DeskTeamInbox = () => {
     const { t } = useTranslation();
     const { data: teamSummaries, refetch } = useGetTeamSessionSummary();
-    const filterSummary = useSessionStore((s) => s.filterSummary);
+    const activeFolderId = useSessionStore((s) => getActiveFolderId(s.filterSummary, s.viewMode));
     const setFilterSummary = useSessionStore((s) => s.setFilterSummary);
     const [expandedTeamIds, setExpandedTeamIds] = useState([]);
     const initializedRef = useRef(false);
@@ -34,24 +42,9 @@ const DeskTeamInbox = () => {
             ? prev.filter((id) => id !== teamId)
             : [...prev, teamId]);
     }, []);
-    const toggleHandlers = useMemo(() => {
-        if (!teamSummaries)
-            return {};
-        return Object.fromEntries(teamSummaries.map((team) => [
-            team.teamId,
-            () => toggleTeam(team.teamId),
-        ]));
-    }, [teamSummaries, toggleTeam]);
-    const filterHandlers = useMemo(() => {
-        if (!teamSummaries)
-            return {};
-        return Object.fromEntries(teamSummaries.map((team) => [
-            team.teamId,
-            (filter) => setFilterSummary(Object.assign(Object.assign({}, filter), { teamId: team.teamId })),
-        ]));
-    }, [teamSummaries, setFilterSummary]);
+    // SessionFolderList adds the team id to every filter it emits.
     if (!(teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.length))
         return null;
-    return (_jsxs("div", { "data-cp-name": "DeskTeamInbox", children: [_jsx("div", { className: "px-4 pt-4 pb-2 text-xs font-semibold text-gray-400 tracking-wider", children: t("team_messages") }), teamSummaries.map((team) => (_jsx(TeamGroup, { team: team, isExpanded: expandedTeamIds.includes(team.teamId), isSelected: filterSummary.teamId === team.teamId, selectedFilter: filterSummary, onToggle: toggleHandlers[team.teamId], onFilterSelect: filterHandlers[team.teamId] }, team.teamId)))] }));
+    return (_jsxs("div", { "data-cp-name": "DeskTeamInbox", className: "flex flex-col gap-0.5", children: [_jsx("div", { className: "px-2 pb-1 pt-3 text-xs font-medium text-gray-600", children: t("team_messages") }), teamSummaries.map((team) => (_jsx(TeamGroup, { team: team, isExpanded: expandedTeamIds.includes(team.teamId), activeFolderId: activeFolderId, onToggle: toggleTeam, onFilterSelect: setFilterSummary }, team.teamId)))] }));
 };
 export default DeskTeamInbox;

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

@@ -0,0 +1,21 @@
+import type { StrokeIconName } from "../../components/icon/strokeIconNodes";
+/** Red badge when the folder needs attention, plain grey number otherwise. */
+export declare const FolderCount: ({ count, highlighted, }: {
+    count: number;
+    highlighted?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+interface FolderRowProps {
+    label: string;
+    iconName: StrokeIconName;
+    iconClassName?: string;
+    count?: number;
+    highlighted?: boolean;
+    active?: boolean;
+    /** Tailwind padding-left class that sets the nesting depth. */
+    indentClassName?: string;
+    onClick: () => void;
+}
+/** One selectable folder in the desk sidebar. */
+declare const FolderRow: ({ label, iconName, iconClassName, count, highlighted, active, indentClassName, onClick, }: FolderRowProps) => import("react/jsx-runtime").JSX.Element;
+export default FolderRow;
+//# sourceMappingURL=FolderRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderRow.d.ts","sourceRoot":"","sources":["../../../src/components/session/FolderRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAIxE,8EAA8E;AAC9E,eAAO,MAAM,WAAW,GAAI,yBAGzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,mDAWA,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,iDAAiD;AACjD,QAAA,MAAM,SAAS,GAAI,2FAShB,cAAc,4CAkBhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/session/FolderRow.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+const formatCount = (count) => (count > 99 ? "99+" : String(count));
+/** Red badge when the folder needs attention, plain grey number otherwise. */
+export const FolderCount = ({ count, highlighted, }) => {
+    if (!count)
+        return null;
+    return highlighted ? (_jsx("span", { className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-danger-600 px-1.5 text-xs font-semibold tabular-nums text-white", children: formatCount(count) })) : (_jsx("span", { className: "shrink-0 text-xs tabular-nums text-gray-600", children: formatCount(count) }));
+};
+/** One selectable folder in the desk sidebar. */
+const FolderRow = ({ label, iconName, iconClassName, count = 0, highlighted, active = false, indentClassName = "pl-2", onClick, }) => (_jsxs("button", { type: "button", onClick: onClick, "aria-current": active ? "true" : undefined, "data-cp-name": "FolderRow", className: clsx("flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg pr-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", indentClassName, active
+        ? "bg-primary-25 font-semibold text-primary-500"
+        : "text-gray-900 hover:bg-gray-5"), children: [_jsx(StrokeIcon, { name: iconName, size: 18, className: iconClassName }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(FolderCount, { count: count, highlighted: highlighted })] }));
+export default FolderRow;