@droppii-org/chat-sdk 0.6.55 → 0.7.0

package/dist/components/message/messageKeyboardNav.js

@@ -0,0 +1,24 @@
+export const MESSAGE_FOCUSABLE_ATTR = "data-msg-focusable";
+/**
+ * Up/Down on the message log moves focus between messages. The log renders
+ * newest first in a column-reverse flex, so the next DOM node is the older message.
+ */
+export const handleMessageLogKeyDown = (event) => {
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown")
+        return;
+    const container = event.currentTarget;
+    const target = event.target;
+    const isMessage = target.hasAttribute(MESSAGE_FOCUSABLE_ATTR);
+    if (target !== container && !isMessage)
+        return;
+    const items = Array.from(container.querySelectorAll(`[${MESSAGE_FOCUSABLE_ATTR}]`));
+    if (!items.length)
+        return;
+    const current = items.indexOf(target);
+    const older = event.key === "ArrowUp";
+    const next = current === -1
+        ? 0
+        : Math.min(items.length - 1, Math.max(0, current + (older ? 1 : -1)));
+    event.preventDefault();
+    items[next].focus();
+};

package/dist/components/message/reply/ReplyPreviewBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReplyPreviewBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewBar.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,sDAwC3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ReplyPreviewBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewBar.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,sDAmD3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/reply/ReplyPreviewBar.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../../components/icon";
+import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
+import { useUserUsername } from "../../../hooks/user/useUserUsername";
+import { isSupportSessionAgentView } from "../../../utils/conversation";
 import { ReplyQuoteContent } from "./ReplyQuoteContent";
 export const ReplyPreviewBar = () => {
     const { t } = useTranslation();
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const conversationData = useConversationStore((state) => state.conversationData);
     const userID = useAuthStore((state) => state.userID);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const isMe = (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.sendID) === userID;
+    // Matches the sent quote's title, which shows agents outside CRM the username.
+    const isAgentView = !isCrm && isSupportSessionAgentView(conversationData, userID);
+    const quotedUsername = useUserUsername(isAgentView && !isMe ? quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.sendID : undefined);
     const handleClearQuotedMessage = () => {
         setQuotedMessage(null);
     };
     if (!quotedMessage)
         return null;
-    const isMe = quotedMessage.sendID === userID;
     const senderName = isMe
         ? t("your_self")
-        : quotedMessage.senderNickname || "";
-    return (_jsxs("div", { "data-testid": "reply-preview-bar", "data-cp-name": "ReplyPreviewBar", className: "flex h-[59px] w-full shrink-0 items-center bg-gray-200/10 px-2 py-1", children: [_jsx(ReplyQuoteContent, { message: quotedMessage, title: t("reply_to", { name: senderName }) }), _jsx("button", { type: "button", onClick: handleClearQuotedMessage, "aria-label": t("cancel"), "data-testid": "reply-preview-bar-close", className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "close-o", size: 16, className: "text-gray-600" }) })] }));
+        : quotedUsername || quotedMessage.senderNickname || "";
+    return (_jsxs("div", { "data-testid": "reply-preview-bar", "data-cp-name": "ReplyPreviewBar", className: "flex h-[59px] w-full shrink-0 items-center bg-gray-200/10 px-2 py-1", children: [_jsx(ReplyQuoteContent, { message: quotedMessage, title: t("reply_to", { name: senderName }) }), _jsx("button", { type: "button", onClick: handleClearQuotedMessage, "aria-label": t("cancel"), "data-testid": "reply-preview-bar-close", className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(AdaptiveIcon, { stroke: "x", font: "close-o", size: 16, className: "text-gray-600" }) })] }));
 };
 export default ReplyPreviewBar;

package/dist/components/message/toolbox/MessageToolboxMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageToolboxMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/MessageToolboxMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,iCAAiC,QAS7C,CAAC;AA0BF,eAAO,MAAM,4BAA4B,GACvC,SAAS,oBAAoB,EAAE,KAC9B,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAO5B,CAAC"}
+{"version":3,"file":"MessageToolboxMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/message/toolbox/MessageToolboxMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAKtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,iCAAiC,QAS7C,CAAC;AAgDF,eAAO,MAAM,4BAA4B,GACvC,SAAS,oBAAoB,EAAE,KAC9B,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAO5B,CAAC"}

package/dist/components/message/toolbox/MessageToolboxMenu.js

@@ -1,8 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Icon } from "../../../components/icon";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import useAuthStore from "../../../store/auth";
 export const MESSAGE_TOOLBOX_OVERLAY_CLASSNAME = clsx("[&_.ant-dropdown-menu]:min-w-[200px]", "[&_.ant-dropdown-menu]:rounded-2xl", "[&_.ant-dropdown-menu]:p-0", "[&_.ant-dropdown-menu]:py-2", "[&_.ant-dropdown-menu]:shadow-message-toolbox", "[&_.ant-dropdown-menu-item]:rounded-none", "[&_.ant-dropdown-menu-item]:!px-4", "[&_.ant-dropdown-menu-item]:!py-1.5");
-const ToolboxMenuRow = ({ icon, label, danger = false }) => (_jsxs("div", { "data-cp-name": "ToolboxMenuRow", className: "flex items-center gap-3", children: [_jsx(Icon, { icon: icon, size: 24, className: danger ? "text-danger-400" : "text-gray-900" }), _jsx("span", { className: clsx("text-base font-medium", danger ? "text-danger-400" : "text-gray-900"), children: label })] }));
+// Icon-font names of the toolbox actions and their line-icon twins in CRM.
+const CRM_ICONS = {
+    "arrow-reply-o": "reply",
+    "thumbtack-o": "pin",
+    "thumbtack-off-o": "pin",
+    "copy-o": "copy",
+    "link-o": "link",
+    "trash-o": "undo",
+};
+const ToolboxMenuRow = ({ icon, label, danger = false }) => {
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const crmIcon = isCrm ? CRM_ICONS[icon] : undefined;
+    return (_jsxs("div", { "data-cp-name": "ToolboxMenuRow", className: "flex items-center gap-3", children: [crmIcon ? (_jsx(StrokeIcon, { name: crmIcon, size: 18, className: danger ? "text-danger-600" : "text-gray-600" })) : (_jsx(Icon, { icon: icon, size: 24, className: danger ? "text-danger-400" : "text-gray-900" })), _jsx("span", { className: clsx("text-base font-medium", danger ? "text-danger-400" : "text-gray-900"), children: label })] }));
+};
 export const buildMessageToolboxMenuItems = (actions) => actions.map((action) => ({
     key: action.key,
     label: (_jsx(ToolboxMenuRow, { icon: action.icon, label: action.label, danger: action.danger })),

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

@@ -1 +1 @@
-{"version":3,"file":"SearchAll.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchAll.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,wBAAwB,EAAE,MAAM,GAAG,CAAC;AAI7C,UAAU,0BAA0B;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACvD;AACD,QAAA,MAAM,qBAAqB,GAAI,+BAG5B,0BAA0B,4CAyJ5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"SearchAll.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchAll.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,wBAAwB,EAAE,MAAM,GAAG,CAAC;AAI7C,UAAU,0BAA0B;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACvD;AA+CD,QAAA,MAAM,qBAAqB,GAAI,+BAG5B,0BAA0B,4CA4G5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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"}