@droppii-org/chat-sdk 0.7.3 → 0.7.4

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

@@ -1,30 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 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 { useQuotedSenderName } from "../../../hooks/message/useQuotedSenderName";
 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);
+    // Same name the sent quote will carry.
+    const { isMe, name } = useQuotedSenderName(quotedMessage);
     const handleClearQuotedMessage = () => {
         setQuotedMessage(null);
     };
     if (!quotedMessage)
         return null;
-    const senderName = isMe
-        ? t("your_self")
-        : quotedUsername || quotedMessage.senderNickname || "";
+    const senderName = isMe ? t("your_self") : name;
     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/rich-text-editor/RichTextEditor.d.ts

@@ -6,7 +6,9 @@ interface RichTextEditorProps {
     onFilesChange?: (files: UploadFile[]) => void;
     minHeight?: string;
     showMediaUpload?: boolean;
+    /** CRM: hide the emoji button on phones (the system keyboard has emoji). */
+    hideEmojiOnPhone?: boolean;
 }
-export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight, showMediaUpload, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight, showMediaUpload, hideEmojiOnPhone, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/rich-text-editor/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text-editor/RichTextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA0ClC,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAmB,EACnB,eAAsB,GACvB,EAAE,mBAAmB,2CA6DrB"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text-editor/RichTextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA2ClC,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAmB,EACnB,eAAsB,EACtB,gBAAwB,GACzB,EAAE,mBAAmB,2CAkErB"}

package/dist/components/rich-text-editor/RichTextEditor.js

@@ -13,6 +13,7 @@ import { $getRoot } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useEffect } from "react";
 import { ToolbarPlugin } from "../../components/message/footer/ToolbarPlugin";
+import clsx from "clsx";
 import MediaActions from "../../components/message/footer/MediaActions";
 import { FilePreviewList } from "../../components/message/footer/FilePreview";
 import { editorTheme, editorNodes, editorOnError, } from "../../components/message/footer/editorConfig";
@@ -38,7 +39,7 @@ function HtmlPlugin({ initialHtml }) {
     }, [editor, initialHtml]);
     return null;
 }
-export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight = "160px", showMediaUpload = true, }) {
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight = "160px", showMediaUpload = true, hideEmojiOnPhone = false, }) {
     const [listUploadFiles, setListUploadFiles] = useState([]);
     const handleChange = (editorState, editor, tags) => {
         if (tags.has("initial-html"))
@@ -58,5 +59,6 @@ export default function RichTextEditor({ initialHtml, placeholder, onChange, onF
         setListUploadFiles(files);
         onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(files);
     };
-    return (_jsxs(LexicalComposer, { initialConfig: EDITOR_CONFIG, children: [_jsxs("div", { className: "border border-gray-200 rounded-lg", children: [_jsx(FilePreviewList, { files: listUploadFiles, onRemove: handleRemoveFile }), _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "px-3 py-2 text-sm outline-none", style: { minHeight } }), ErrorBoundary: LexicalErrorBoundary, placeholder: placeholder ? (_jsx("div", { className: "absolute top-2 left-3 pointer-events-none", children: _jsx("p", { className: "text-gray-400 text-sm", children: placeholder }) })) : null }) }), _jsxs("div", { className: "flex items-center border-t border-gray-100 px-2 py-1", children: [_jsx(ToolbarPlugin, {}), _jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: handleFilesChange, showMediaUpload: showMediaUpload })] })] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(HtmlPlugin, { initialHtml: initialHtml })] }));
+    return (_jsxs(LexicalComposer, { initialConfig: EDITOR_CONFIG, children: [_jsxs("div", { className: "border border-gray-200 rounded-lg", children: [_jsx(FilePreviewList, { files: listUploadFiles, onRemove: handleRemoveFile }), _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "px-3 py-2 text-sm outline-none", style: { minHeight } }), ErrorBoundary: LexicalErrorBoundary, placeholder: placeholder ? (_jsx("div", { className: "absolute top-2 left-3 pointer-events-none", children: _jsx("p", { className: "text-gray-400 text-sm", children: placeholder }) })) : null }) }), _jsxs("div", { className: clsx("flex items-center border-t border-gray-100 px-2 py-1", hideEmojiOnPhone &&
+                            "flex-wrap max-sm:[&_[data-cp-name=ToolbarPlugin]]:!gap-1 max-sm:[&_[data-cp-name=ToolbarPlugin]]:!px-1"), children: [_jsx(ToolbarPlugin, {}), _jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: handleFilesChange, showMediaUpload: showMediaUpload, hideEmojiOnPhone: hideEmojiOnPhone })] })] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(HtmlPlugin, { initialHtml: initialHtml })] }));
 }

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":"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"}
+{"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,4CA+FvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -7,7 +7,7 @@ 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 { useDeskThreadNavigation } from "../../../hooks/conversation/useDeskThreadNavigation";
 import { highlightSearch, sanitizeHtml } from "../../../utils/common";
 import GroupCompositeAvatar from "../../../components/group/GroupCompositeAvatar";
 import RowChip from "../../../components/conversation/RowChip";
@@ -18,7 +18,7 @@ const SearchItemAsGroup = (props) => {
     const { group, searchTerm = "" } = props;
     const { t } = useTranslation();
     const isCrm = useAuthStore((state) => state.isCrm);
-    const onNavigate = useChatNavigate();
+    const { openThread } = useDeskThreadNavigation();
     const scope = useSearchScope();
     const openPdpResult = useOpenPdpSearchResult();
     const setConversationData = useConversationStore((state) => state.setConversationData);
@@ -39,7 +39,7 @@ const SearchItemAsGroup = (props) => {
         newSearchParams.delete("userId");
         newSearchParams.delete("groupId");
         newSearchParams.delete("botId");
-        onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
+        openThread({ threadId: conversation.conversationID }, `${window.location.pathname}?${newSearchParams.toString()}`);
     };
     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"

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":"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"}
+{"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;AA2BrF,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,4CA+J3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -16,6 +16,7 @@ import RowChip from "../../../components/conversation/RowChip";
 import useAuthStore from "../../../store/auth";
 import { getConversationIdFromMessage } from "../../../utils/conversation";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
+import { useDeskThreadNavigation } from "../../../hooks/conversation/useDeskThreadNavigation";
 import { useSearchScope } from "../SearchScopeContext";
 // PDP labels the source by its inbox tab; BE's displayTag carries the CS team name.
 const PDP_TAG_LABEL_KEYS = {
@@ -31,6 +32,7 @@ const SearchItemAsMessage = (props) => {
     const scope = useSearchScope();
     const isPdpPortal = scope === "pdp-portal";
     const openPdpResult = useOpenPdpSearchResult();
+    const { openFromList } = useDeskThreadNavigation();
     const conversationData = useConversationStore((state) => state.conversationData);
     const useConversationDisplay = useMemo(() => {
         // PDP results span many threads, so show the sender like CRM does.
@@ -66,9 +68,17 @@ const SearchItemAsMessage = (props) => {
             .setConversationData(data, message.clientMsgID, {
             forceRevalidate: true,
         });
+        const previousId = useConversationStore.getState().selectedConversationId;
         useConversationStore
             .getState()
             .setSelectedConversationId(data.conversationID);
+        // CRM hits get a URL (and history entry) like list rows; hits inside the open thread don't.
+        if (isCrm && data.conversationID !== previousId) {
+            openFromList({
+                threadId: data.conversationID,
+                messageId: message.clientMsgID,
+            });
+        }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
     let msgContent = "";

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":"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"}
+{"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;AAelF,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,4CA2FrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -7,6 +7,7 @@ import { highlightSearch, sanitizeHtml } from "../../../utils/common";
 import useConversationStore from "../../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
+import { useDeskThreadNavigation } from "../../../hooks/conversation/useDeskThreadNavigation";
 import { useSearchScope } from "../SearchScopeContext";
 import useAuthStore from "../../../store/auth";
 import { SessionStatus } from "../../../types/chat";
@@ -23,6 +24,7 @@ const SearchItemAsUser = (props) => {
     const { t } = useTranslation();
     const scope = useSearchScope();
     const openPdpResult = useOpenPdpSearchResult();
+    const { openFromList } = useDeskThreadNavigation();
     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 () => {
@@ -32,10 +34,14 @@ const SearchItemAsUser = (props) => {
         if (!(session === null || session === void 0 ? void 0 : session.conversation)) {
             return message.error(t("err_get_conversation"));
         }
+        const previousId = useConversationStore.getState().selectedConversationId;
         useConversationStore.getState().setConversationData(session.conversation);
         useConversationStore
             .getState()
             .setSelectedConversationId(session.conversationId);
+        if (isCrm && session.conversationId !== previousId) {
+            openFromList({ threadId: session.conversationId });
+        }
     };
     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"

package/dist/components/session/DeskAssignedSession.js

@@ -54,9 +54,9 @@ const DeskAssignedSession = ({ variant = "inline" }) => {
         };
     }, [refetch]);
     if (collapsed) {
-        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("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 touch:min-h-10 touch:min-w-10", "aria-label": t("folder_panel_expand"), onClick: () => setFolderCollapsedChoice(false), children: _jsx(StrokeIcon, { name: "chevrons-right", size: 20 }) }) }) }));
     }
-    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: {
+    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 touch:min-h-10 touch:min-w-10", "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, {})] })] }));

package/dist/components/session/FolderRow.js

@@ -10,7 +10,7 @@ export const FolderCount = ({ count, highlighted, }) => {
     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
+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 touch:min-h-10 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;

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

@@ -1 +1 @@
-{"version":3,"file":"ManualAssignPopover.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ManualAssignPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAkBzC,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,wBAAwB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC;AA0ED,QAAA,MAAM,mBAAmB,GAAI,wFAO1B,wBAAwB,4CA2O1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ManualAssignPopover.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ManualAssignPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAsBzC,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,wBAAwB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC;AA0ED,QAAA,MAAM,mBAAmB,GAAI,wFAO1B,wBAAwB,4CA+P1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/thread/ManualAssignPopover.js

@@ -13,12 +13,16 @@ import AssignConfirmModal from "./AssignConfirmModal";
 import { useDebounce } from "ahooks";
 import useAuthStore from "../../store/auth";
 import TintedAvatar from "../../components/common/TintedAvatar";
+import BottomSheet from "../../components/common/BottomSheet";
+import { useViewportTier } from "../../hooks/common/useViewportTier";
+import { useMediaQuery } from "../../hooks/common/useMediaQuery";
+import { LAYOUT_MEDIA } from "../../constants/layout";
 const SEARCH_DEBOUNCE_WAIT = 300;
 const SupporterItem = ({ supporter, onClick, isCurrentUser, }) => {
     var _a;
     const { t } = useTranslation();
     const isOnline = supporter.status === "ONLINE";
-    return (_jsxs("div", { role: "option", "aria-selected": false, tabIndex: 0, className: "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors cursor-pointer hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", onClick: () => onClick(supporter), onKeyDown: (e) => {
+    return (_jsxs("div", { role: "option", "aria-selected": false, tabIndex: 0, className: "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors cursor-pointer hover:bg-gray-5 touch:min-h-12 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", onClick: () => onClick(supporter), onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 onClick(supporter);
@@ -96,6 +100,8 @@ const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, childre
     const handleAfterClose = () => {
         setSelectedAgent(null);
     };
+    const isPhone = useViewportTier() === "phone";
+    const isTouch = useMediaQuery(LAYOUT_MEDIA.touch);
     const handleOpenChange = (newOpen) => {
         if (isSubmitting)
             return;
@@ -104,9 +110,9 @@ const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, childre
             setSearchText("");
         }
     };
-    const popoverContent = (_jsxs("div", { className: "w-64", children: [_jsxs("button", { type: "button", className: clsx("flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors", isAutoAssignDisabled
+    const popoverContent = (_jsxs("div", { className: isPhone ? "w-full" : "w-64", children: [_jsxs("button", { type: "button", className: clsx("flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors", isAutoAssignDisabled
                     ? "cursor-not-allowed text-gray-400"
-                    : "text-gray-900 hover:bg-gray-5"), onClick: handleAutoAssign, disabled: isAutoAssignDisabled, children: [isAutoAssigning ? (_jsx(Spin, { size: "small" })) : (_jsx("span", { className: "text-primary-400", children: _jsx(AdaptiveIcon, { stroke: "refresh-cw", font: "refresh-b", size: 20, strokeSize: 18 }) })), _jsx("span", { children: t("manual_assign_button_auto_reassign") })] }), _jsx(Divider, { className: "my-2" }), _jsx("div", { className: "mb-2", children: _jsx(Input, { autoFocus: true, placeholder: t("manual_assign_search_placeholder"), value: searchText, onChange: (e) => setSearchText(e.target.value), prefix: _jsx(AdaptiveIcon, { stroke: "search", font: "search-o", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }) }), _jsx("div", { className: "max-h-72 overflow-y-auto", role: "listbox", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Spin, {}) })) : supporters && supporters.length > 0 ? (_jsx("div", { className: clsx("flex flex-col transition-opacity duration-200", isFetching && "opacity-50 pointer-events-none"), children: [...supporters]
+                    : "text-gray-900 hover:bg-gray-5"), onClick: handleAutoAssign, disabled: isAutoAssignDisabled, children: [isAutoAssigning ? (_jsx(Spin, { size: "small" })) : (_jsx("span", { className: "text-primary-400", children: _jsx(AdaptiveIcon, { stroke: "refresh-cw", font: "refresh-b", size: 20, strokeSize: 18 }) })), _jsx("span", { children: t("manual_assign_button_auto_reassign") })] }), _jsx(Divider, { className: "my-2" }), _jsx("div", { className: "mb-2", children: _jsx(Input, { autoFocus: !isTouch, placeholder: t("manual_assign_search_placeholder"), value: searchText, onChange: (e) => setSearchText(e.target.value), prefix: _jsx(AdaptiveIcon, { stroke: "search", font: "search-o", size: 16, className: "text-gray-400" }), className: "rounded-lg border-gray-300 focus-within:border-chat-focus focus-within:shadow-chat-focus-ring", allowClear: true }) }), _jsx("div", { className: "max-h-72 overflow-y-auto", role: "listbox", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Spin, {}) })) : supporters && supporters.length > 0 ? (_jsx("div", { className: clsx("flex flex-col transition-opacity duration-200", isFetching && "opacity-50 pointer-events-none"), children: [...supporters]
                         .filter((item) => item.memberId !== (supporter === null || supporter === void 0 ? void 0 : supporter.id))
                         .filter((item) => !excludeCurrentUser || item.memberId !== authUserID)
                         .sort((supporterA, supporterB) => {
@@ -120,8 +126,9 @@ const ManualAssignPopover = ({ sessionId, supporter, teamId: propTeamId, childre
                         });
                     })
                         .map((item) => (_jsx(SupporterItem, { supporter: item, onClick: handleSelectAgent, isCurrentUser: item.memberId === authUserID }, item.memberId))) })) : (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx("span", { className: "text-sm text-gray-400", children: t("manual_assign_no_results") }) })) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(Popover, { content: popoverContent, trigger: "click", open: open, onOpenChange: handleOpenChange, placement: placement, arrow: false, children: children !== null && children !== void 0 ? children : (_jsxs("button", { type: "button", "aria-label": t("manual_assign_button_reassign"), className: clsx("flex items-center border border-gray-200 rounded-lg p-1 gap-1 bg-transparent transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", isSubmitting
-                        ? "opacity-50 pointer-events-none"
-                        : "cursor-pointer hover:opacity-80"), children: [_jsx(TintedAvatar, { name: (_a = supporter === null || supporter === void 0 ? void 0 : supporter.fullName) !== null && _a !== void 0 ? _a : "", src: supporter === null || supporter === void 0 ? void 0 : supporter.avatar, size: 28 }), _jsx("span", { className: "text-primary-400", children: _jsx(AdaptiveIcon, { stroke: "shuffle", font: "shuffle-b", size: 20, strokeSize: 18 }) })] })) }), _jsx(AssignConfirmModal, { open: confirmModalOpen, agent: selectedAgent, loading: isAssigning, onCancel: handleCancelConfirm, onConfirm: handleConfirmAssign, afterClose: handleAfterClose })] }));
+    const triggerNode = children !== null && children !== void 0 ? children : (_jsxs("button", { type: "button", "aria-label": t("manual_assign_button_reassign"), className: clsx("flex items-center border border-gray-200 rounded-lg p-1 gap-1 bg-transparent transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", isSubmitting
+            ? "opacity-50 pointer-events-none"
+            : "cursor-pointer hover:opacity-80"), children: [_jsx(TintedAvatar, { name: (_a = supporter === null || supporter === void 0 ? void 0 : supporter.fullName) !== null && _a !== void 0 ? _a : "", src: supporter === null || supporter === void 0 ? void 0 : supporter.avatar, size: 28 }), _jsx("span", { className: "text-primary-400", children: _jsx(AdaptiveIcon, { stroke: "shuffle", font: "shuffle-b", size: 20, strokeSize: 18 }) })] }));
+    return (_jsxs(_Fragment, { children: [isPhone ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "contents", onClick: () => handleOpenChange(true), children: triggerNode }), _jsx(BottomSheet, { open: open, title: t("manual_assign_button_reassign"), onClose: () => handleOpenChange(false), children: popoverContent })] })) : (_jsx(Popover, { content: popoverContent, trigger: "click", open: open, onOpenChange: handleOpenChange, placement: placement, arrow: false, children: triggerNode })), _jsx(AssignConfirmModal, { open: confirmModalOpen, agent: selectedAgent, loading: isAssigning, onCancel: handleCancelConfirm, onConfirm: handleConfirmAssign, afterClose: handleAfterClose })] }));
 };
 export default ManualAssignPopover;

package/dist/components/thread/SessionDetailCard.js

@@ -99,5 +99,5 @@ export const SessionDetailCard = ({ session, isActive, }) => {
                                 time: formatSessionTime(session.createdDate),
                             })
                             : formatSessionDate(session.closedDate || session.createdDate) }), _jsx("span", { className: "flex-1" }), isActive ? (_jsx("span", { className: "inline-flex h-[22px] items-center rounded-full bg-success-25 px-2 text-xs font-medium text-success-900", children: t("session_active") })) : (_jsx(TintedAvatar, { name: ((_a = session.supporter) === null || _a === void 0 ? void 0 : _a.fullName) || "A", src: (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.avatar, size: 24 }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: `${ids}-tags`, className: fieldLabelClass, children: t("session_tags_label") }), _jsx(SessionTagPicker, { labelId: `${ids}-tags`, available: availableLabels !== null && availableLabels !== void 0 ? availableLabels : [], selectedIds: (_d = (_c = session.labels) === null || _c === void 0 ? void 0 : _c.map((label) => label.id)) !== null && _d !== void 0 ? _d : [], loading: isLoadingLabels, onChange: handleUpdateLabels })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { htmlFor: `${ids}-issue`, className: fieldLabelClass, children: t("session_issue_detail_label") }), _jsx(TextArea, { id: `${ids}-issue`, value: issueDetail.value, onChange: (e) => issueDetail.setValue(e.target.value), placeholder: t("session_issue_detail_placeholder"), className: `${fieldClass} !min-h-9`, autoSize: { minRows: 1, maxRows: 3 } })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: `${ids}-note`, className: fieldLabelClass, children: t("session_note_label") }), _jsx(SaveStatus, { status: saveStatus, onRetry: retrySave })] }), _jsx(TextArea, { id: `${ids}-note`, value: note.value, onChange: (e) => note.setValue(e.target.value), placeholder: t("session_note_placeholder"), className: fieldClass, autoSize: { minRows: 2, maxRows: 4 } })] }), isActive && (_jsxs(_Fragment, { children: [session.status !== SessionStatus.UNASSIGNED &&
-                        ((_e = session.supporter) === null || _e === void 0 ? void 0 : _e.id) && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TintedAvatar, { name: session.supporter.fullName || "A", src: session.supporter.avatar, size: 28 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-xs text-gray-600", children: t("session_owner_label") }), _jsx("span", { className: "truncate text-[13px] font-medium text-gray-900", children: session.supporter.fullName })] }), _jsx(ManualAssignPopover, { sessionId: session.id, supporter: session.supporter, teamId: session.teamId, placement: "topRight", children: _jsx(Button, { icon: _jsx(StrokeIcon, { name: "shuffle", size: 18 }), className: "!h-8 !rounded-lg !px-3.5 !text-[13px] !font-medium", children: t("manual_assign_button_reassign") }) })] })), _jsx(Button, { block: true, icon: _jsx(StrokeIcon, { name: "check-circle", size: 18 }), onClick: () => setIsEndConfirmOpen(true), disabled: isEnding, children: isEnding ? t("end_session_ending") : t("session_close_button") }), _jsx(EndSessionConfirm, { open: isEndConfirmOpen, session: session, customerName: customerName, onConfirm: handleConfirmEnd, onCancel: () => setIsEndConfirmOpen(false) })] }))] }));
+                        ((_e = session.supporter) === null || _e === void 0 ? void 0 : _e.id) && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TintedAvatar, { name: session.supporter.fullName || "A", src: session.supporter.avatar, size: 28 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-xs text-gray-600", children: t("session_owner_label") }), _jsx("span", { className: "truncate text-[13px] font-medium text-gray-900", children: session.supporter.fullName })] }), _jsx(ManualAssignPopover, { sessionId: session.id, supporter: session.supporter, teamId: session.teamId, placement: "topRight", children: _jsx(Button, { icon: _jsx(StrokeIcon, { name: "shuffle", size: 18 }), className: "!h-8 touch:!h-10 !rounded-lg !px-3.5 !text-[13px] !font-medium", children: t("manual_assign_button_reassign") }) })] })), _jsx(Button, { block: true, icon: _jsx(StrokeIcon, { name: "check-circle", size: 18 }), onClick: () => setIsEndConfirmOpen(true), disabled: isEnding, children: isEnding ? t("end_session_ending") : t("session_close_button") }), _jsx(EndSessionConfirm, { open: isEndConfirmOpen, session: session, customerName: customerName, onConfirm: handleConfirmEnd, onCancel: () => setIsEndConfirmOpen(false) })] }))] }));
 };

package/dist/components/thread/SessionTagPicker.js

@@ -19,7 +19,7 @@ const SessionTagPicker = ({ labelId, available, selectedIds, loading, onChange,
                 event.stopPropagation();
                 setOpen(false);
             }
-        }, children: [_jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-1 rounded-lg border border-gray-50 px-1.5 py-1", children: [selected.map((label) => (_jsxs("span", { className: chipClass, children: [label.name, _jsx("button", { type: "button", "aria-label": t("session_remove_tag", { name: label.name }), className: "flex h-4 w-4 items-center justify-center rounded-full text-gray-600 hover:bg-gray-50", onClick: () => toggle(label.id), children: _jsx(StrokeIcon, { name: "x", size: 12 }) })] }, label.id))), _jsxs("button", { id: labelId, type: "button", "aria-label": t("session_add_tag"), "aria-expanded": open, "aria-controls": listId, className: "flex h-6 items-center gap-1 rounded px-1 text-[13px] text-gray-600 hover:text-gray-900", onClick: () => setOpen((value) => !value), children: [_jsx(StrokeIcon, { name: "plus", size: 14 }), t("session_add_tag")] })] }), open && (_jsxs("ul", { id: listId, role: "listbox", "aria-multiselectable": true, "aria-labelledby": labelId, className: "mt-1 max-h-40 overflow-y-auto rounded-lg border border-gray-50 p-1", children: [loading && (_jsx("li", { className: "flex justify-center py-2", children: _jsx(Spin, { size: "small" }) })), !loading && available.length === 0 && (_jsx("li", { className: "px-2 py-1.5 text-[13px] text-gray-600", children: t("session_no_tags") })), available.map((label) => {
+        }, children: [_jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-1 rounded-lg border border-gray-50 px-1.5 py-1", children: [selected.map((label) => (_jsxs("span", { className: chipClass, children: [label.name, _jsx("button", { type: "button", "aria-label": t("session_remove_tag", { name: label.name }), className: "flex h-4 w-4 items-center justify-center rounded-full text-gray-600 hover:bg-gray-50", onClick: () => toggle(label.id), children: _jsx(StrokeIcon, { name: "x", size: 12 }) })] }, label.id))), _jsxs("button", { id: labelId, type: "button", "aria-label": t("session_add_tag"), "aria-expanded": open, "aria-controls": listId, className: "flex h-6 touch:-my-2 touch:min-h-10 items-center gap-1 rounded px-1 text-[13px] text-gray-600 hover:text-gray-900", onClick: () => setOpen((value) => !value), children: [_jsx(StrokeIcon, { name: "plus", size: 14 }), t("session_add_tag")] })] }), open && (_jsxs("ul", { id: listId, role: "listbox", "aria-multiselectable": true, "aria-labelledby": labelId, className: "mt-1 max-h-40 overflow-y-auto rounded-lg border border-gray-50 p-1", children: [loading && (_jsx("li", { className: "flex justify-center py-2", children: _jsx(Spin, { size: "small" }) })), !loading && available.length === 0 && (_jsx("li", { className: "px-2 py-1.5 text-[13px] text-gray-600", children: t("session_no_tags") })), available.map((label) => {
                         const isSelected = selectedIds.includes(label.id);
                         return (_jsx("li", { role: "option", "aria-selected": isSelected, children: _jsxs("button", { type: "button", className: `flex h-8 w-full items-center justify-between rounded px-2 text-left text-[13px] text-gray-900 hover:bg-gray-5 ${isSelected ? "bg-primary-25" : ""}`, onClick: () => toggle(label.id), children: [label.name, isSelected && _jsx(StrokeIcon, { name: "check", size: 14 })] }) }, label.id));
                     })] }))] }));

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

@@ -1,6 +1,6 @@
 interface SupportSessionPanelProps {
     conversationId: string;
-    width: number;
+    width: number | string;
     /** Drawer variant only: "Thông tin" over this panel, opened from its ⓘ button. */
     isDetailsOpen?: boolean;
     onCloseDetails?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"SupportSessionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SupportSessionPanel.tsx"],"names":[],"mappings":"AAeA,UAAU,wBAAwB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sFAAsF;IACtF,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB,GAAI,4FAQ1B,wBAAwB,4CAgG1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"SupportSessionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SupportSessionPanel.tsx"],"names":[],"mappings":"AAeA,UAAU,wBAAwB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sFAAsF;IACtF,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB,GAAI,4FAQ1B,wBAAwB,4CAgG1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/thread/SupportSessionPanel.js

@@ -41,6 +41,6 @@ const SupportSessionPanel = ({ conversationId, width, isDetailsOpen = false, onC
             (_a = detailsButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         wasDetailsOpen.current = isDetailsOpen;
     }, [isDetailsOpen]);
-    return (_jsxs("div", { ref: setPanelEl, className: "relative flex h-full shrink-0 flex-col overflow-hidden rounded-xl bg-white shadow-sm", style: { width }, "data-cp-name": "SupportSessionPanel", "data-testid": "session-info-column", children: [variant === "drawer" ? (_jsx(ThreadInfoHeader, { title: t("support_session_panel_title"), onClose: onClose, actions: _jsx("button", { ref: detailsButtonRef, type: "button", "aria-label": t("thread_info_open"), title: t("thread_info_open"), "aria-expanded": isDetailsOpen, onClick: onOpenDetails, className: threadInfoIconButtonClass, children: _jsx(StrokeIcon, { name: "info", size: 18 }) }) })) : (_jsx("div", { className: "flex h-14 shrink-0 items-center border-b border-gray-25 px-4", children: _jsx("h2", { className: "m-0 truncate text-base font-bold text-gray-900", children: t("support_session_panel_title") }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "max-h-[70%] shrink-0 overflow-y-auto border-t border-gray-25 bg-white p-4", "data-testid": "active-session-dock", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }, activeSession.id) })), variant === "drawer" && panelEl && (_jsx(Drawer, { open: isDetailsOpen, onClose: onCloseDetails, "aria-label": t("thread_info_title"), getContainer: panelEl, rootStyle: { position: "absolute" }, width: "100%", mask: false, closeIcon: false, destroyOnHidden: true, styles: { body: { padding: 0 }, wrapper: { boxShadow: "none" } }, children: _jsx("div", { className: "h-full", "data-testid": "thread-details-overlay", children: _jsx(SingleThreadInfo, { onClose: onCloseDetails }) }) }))] }));
+    return (_jsxs("div", { ref: setPanelEl, className: "relative flex h-full shrink-0 flex-col overflow-hidden rounded-xl bg-white shadow-sm phone:rounded-none phone:shadow-none", style: { width }, "data-cp-name": "SupportSessionPanel", "data-testid": "session-info-column", children: [variant === "drawer" ? (_jsx(ThreadInfoHeader, { title: t("support_session_panel_title"), onClose: onClose, actions: _jsx("button", { ref: detailsButtonRef, type: "button", "aria-label": t("thread_info_open"), title: t("thread_info_open"), "aria-expanded": isDetailsOpen, onClick: onOpenDetails, className: threadInfoIconButtonClass, children: _jsx(StrokeIcon, { name: "info", size: 18 }) }) })) : (_jsx("div", { className: "flex h-14 shrink-0 items-center border-b border-gray-25 px-4", children: _jsx("h2", { className: "m-0 truncate text-base font-bold text-gray-900", children: t("support_session_panel_title") }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "max-h-[70%] shrink-0 overflow-y-auto border-t border-gray-25 bg-white p-4", "data-testid": "active-session-dock", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }, activeSession.id) })), variant === "drawer" && panelEl && (_jsx(Drawer, { open: isDetailsOpen, onClose: onCloseDetails, "aria-label": t("thread_info_title"), getContainer: panelEl, rootStyle: { position: "absolute" }, width: "100%", mask: false, closeIcon: false, destroyOnHidden: true, styles: { body: { padding: 0 }, wrapper: { boxShadow: "none" } }, children: _jsx("div", { className: "h-full", "data-testid": "thread-details-overlay", children: _jsx(SingleThreadInfo, { onClose: onCloseDetails }) }) }))] }));
 };
 export default SupportSessionPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAU3E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,iGAAiG;IACjG,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,GAAI,wEAMjB,eAAe,mDAuEjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAW3E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,iGAAiG;IACjG,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,GAAI,wEAMjB,eAAe,mDAwEjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/thread/ThreadInfo.js

@@ -11,12 +11,14 @@ import { isGroupConversation } from "../../utils/imCommon";
 import { LAYOUT_WIDTHS } from "../../constants/layout";
 import DeskSidePanel from "../../components/common/DeskSidePanel";
 import DeskPanelDrawer from "../../components/common/DeskPanelDrawer";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
 const ThreadInfo = ({ isOpen = true, onClose, groupConfig, drawerContainer, supportPanelInline = true, }) => {
     const { t } = useTranslation();
     const conversationData = useConversationStore((state) => state.conversationData);
     const conversationId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
     const isGroup = isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
     const isBot = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.BOT;
+    const isFullScreen = useDeskPanelHostStore((state) => state.isFullScreen);
     // Narrow screens only: "Thông tin" over the "Phiên hỗ trợ" drawer, opened from inside it.
     const [isNarrowDetailsOpen, setIsNarrowDetailsOpen] = useState(false);
     useEffect(() => {
@@ -37,6 +39,6 @@ const ThreadInfo = ({ isOpen = true, onClose, groupConfig, drawerContainer, supp
     }
     return (_jsx(DeskPanelDrawer, { open: isOpen, label: t("support_session_panel_title"), onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), container: drawerContainer, 
         // Esc closes "Thông tin" first, then the drawer.
-        keyboard: !isNarrowDetailsOpen, children: _jsx(SupportSessionPanel, { conversationId: conversationId, width: LAYOUT_WIDTHS.infoDrawer, isDetailsOpen: isNarrowDetailsOpen, onCloseDetails: () => setIsNarrowDetailsOpen(false), variant: "drawer", onClose: onClose, onOpenDetails: () => setIsNarrowDetailsOpen(true) }) }));
+        keyboard: !isNarrowDetailsOpen, children: _jsx(SupportSessionPanel, { conversationId: conversationId, width: isFullScreen ? "100%" : LAYOUT_WIDTHS.infoDrawer, isDetailsOpen: isNarrowDetailsOpen, onCloseDetails: () => setIsNarrowDetailsOpen(false), variant: "drawer", onClose: onClose, onOpenDetails: () => setIsNarrowDetailsOpen(true) }) }));
 };
 export default ThreadInfo;

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

@@ -6,7 +6,7 @@ interface ThreadInfoHeaderProps {
     /** Extra icon buttons placed before the close button. */
     actions?: ReactNode;
 }
-export declare const threadInfoIconButtonClass = "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
+export declare const threadInfoIconButtonClass = "flex h-8 w-8 touch:min-h-10 touch:min-w-10 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
 /** 56px title bar shared by the right-hand panels, inline and in the drawer. */
 declare const ThreadInfoHeader: ({ title, onClose, actions }: ThreadInfoHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThreadInfoHeader;

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadInfoHeader.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfoHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,qBAAqB;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,yBAAyB,+KACwI,CAAC;AAE/K,gFAAgF;AAChF,QAAA,MAAM,gBAAgB,GAAI,6BAA6B,qBAAqB,4CAmB3E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ThreadInfoHeader.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfoHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,qBAAqB;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,yBAAyB,6MACsK,CAAC;AAE7M,gFAAgF;AAChF,QAAA,MAAM,gBAAgB,GAAI,6BAA6B,qBAAqB,4CAmB3E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/ThreadInfoHeader.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { StrokeIcon } from "../../components/icon/StrokeIcon";
-export const threadInfoIconButtonClass = "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
+export const threadInfoIconButtonClass = "flex h-8 w-8 touch:min-h-10 touch:min-w-10 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
 /** 56px title bar shared by the right-hand panels, inline and in the drawer. */
 const ThreadInfoHeader = ({ title, onClose, actions }) => {
     const { t } = useTranslation();

package/dist/components/thread/UserSection.js

@@ -83,12 +83,12 @@ const UserSection = () => {
         message.success(t("copied_to_clipboard"));
     };
     const rowLabelClass = "text-gray-600";
-    const copyButtonClass = "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5";
+    const copyButtonClass = "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 touch:-m-2 touch:min-h-10 touch:min-w-10";
     const fullName = (data === null || data === void 0 ? void 0 : data.fullName) || "";
     return (_jsxs("div", { className: "flex flex-col gap-4 px-4 py-4", "data-cp-name": "UserSection", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TintedAvatar, { name: fullName, src: data === null || data === void 0 ? void 0 : data.avatar, size: 48 }), _jsx("div", { className: "flex min-w-0 flex-col gap-1", children: _jsx("p", { className: "m-0 truncate text-base font-semibold text-gray-900", children: fullName }) })] }), _jsxs("dl", { className: "m-0 grid grid-cols-[112px_minmax(0,1fr)] items-center gap-y-2 text-[13px]", children: [_jsx("dt", { className: rowLabelClass, children: t("user_username_label") }), _jsxs("dd", { className: "m-0 flex min-w-0 items-center gap-1 text-gray-900", children: [_jsx("span", { className: "truncate", children: (data === null || data === void 0 ? void 0 : data.username) || "" }), _jsx("button", { type: "button", className: copyButtonClass, "aria-label": t("user_copy_username"), title: t("user_copy_username"), onClick: () => copyValue((data === null || data === void 0 ? void 0 : data.username) || ""), children: _jsx(StrokeIcon, { name: "copy", size: 14 }) })] }), _jsx("dt", { className: rowLabelClass, children: t("user_id_label") }), _jsxs("dd", { className: "m-0 flex min-w-0 items-center gap-1 text-gray-900", children: [_jsx("span", { className: "truncate", title: (data === null || data === void 0 ? void 0 : data.id) || undefined, children: middleEllipsis((data === null || data === void 0 ? void 0 : data.id) || "") }), _jsx("button", { type: "button", className: copyButtonClass, "aria-label": t("user_copy_id"), title: t("user_copy_id"), onClick: () => copyValue((data === null || data === void 0 ? void 0 : data.id) || ""), children: _jsx(StrokeIcon, { name: "copy", size: 14 }) })] }), _jsx("dt", { className: `${rowLabelClass} self-start`, children: _jsx("label", { htmlFor: "customer-note", children: t("user_note_label") }) }), _jsx("dd", { className: "m-0", children: isEditingNote ? (_jsx("textarea", { id: "customer-note", autoFocus: true, rows: Math.min(Math.max(noteValue.split("\n").length, 2), 6), value: noteValue, placeholder: t("add_note"), className: "w-full resize-none rounded-lg border border-gray-50 px-2.5 py-1.5 text-[13px] text-gray-900 outline-none focus:border-primary-400", onChange: (e) => {
                                 const v = e.target.value;
                                 setNoteValue(v);
                                 scheduleSave(v);
-                            }, onBlur: () => setIsEditingNote(false) })) : (_jsx("button", { id: "customer-note", type: "button", onClick: () => setIsEditingNote(true), className: "m-0 w-full whitespace-pre-wrap break-words border-0 bg-transparent p-0 text-left text-[13px] font-medium leading-5 text-primary-500 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: noteValue ? (_jsx("span", { className: "font-normal text-gray-900", children: noteValue })) : (t("add_note")) })) })] })] }));
+                            }, onBlur: () => setIsEditingNote(false) })) : (_jsx("button", { id: "customer-note", type: "button", onClick: () => setIsEditingNote(true), className: "m-0 w-full whitespace-pre-wrap break-words border-0 bg-transparent p-0 touch:-my-2.5 touch:min-h-10 text-left text-[13px] font-medium leading-5 text-primary-500 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: noteValue ? (_jsx("span", { className: "font-normal text-gray-900", children: noteValue })) : (t("add_note")) })) })] })] }));
 };
 export default UserSection;

package/dist/constants/layout.d.ts

@@ -1,6 +1,8 @@
 /** Viewport breakpoints (px) for the CRM desk workspace. */
 export declare const LAYOUT_BREAKPOINTS: {
-    /** Below this the desk shows a "use a wider screen" notice. */
+    /** Phone/tablet boundary (see LAYOUT_MEDIA for the full phone rule). */
+    readonly tablet: 768;
+    /** From this width the desktop desk layout applies; below it the desk uses the tablet or phone layout. */
     readonly minWorkspace: 1024;
     /** From this width the folder panel stays inline; below it, it overlays the list. */
     readonly folderInline: 1600;
@@ -21,4 +23,11 @@ export declare const LAYOUT_WIDTHS: {
     readonly infoDrawer: 360;
     readonly chatMin: 480;
 };
+/** Media queries behind the viewport tiers; keep in sync with the phone/touch variants in apps/web/tailwind.config.js. */
+export declare const LAYOUT_MEDIA: {
+    readonly phone: `not all and (min-width: 768px), (pointer: coarse) and (max-height: 499px) and (max-width: ${number}px)`;
+    readonly belowDesktop: "not all and (min-width: 1024px)";
+    readonly touch: `(hover: none) and (pointer: coarse) and (max-width: ${number}px)`;
+    readonly touchAnyWidth: "(hover: none) and (pointer: coarse)";
+};
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/constants/layout.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB;IAC7B,+DAA+D;;IAE/D,qFAAqF;;IAErF,mGAAmG;;IAEnG,qFAAqF;;IAErF,kGAAkG;;CAE1F,CAAC;AAEX,+CAA+C;AAC/C,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/constants/layout.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB;IAC7B,wEAAwE;;IAExE,0GAA0G;;IAE1G,qFAAqF;;IAErF,mGAAmG;;IAEnG,qFAAqF;;IAErF,kGAAkG;;CAE1F,CAAC;AAEX,+CAA+C;AAC/C,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC;AAEX,0HAA0H;AAC1H,eAAO,MAAM,YAAY;;;;;CAKf,CAAC"}

package/dist/constants/layout.js

@@ -1,6 +1,8 @@
 /** Viewport breakpoints (px) for the CRM desk workspace. */
 export const LAYOUT_BREAKPOINTS = {
-    /** Below this the desk shows a "use a wider screen" notice. */
+    /** Phone/tablet boundary (see LAYOUT_MEDIA for the full phone rule). */
+    tablet: 768,
+    /** From this width the desktop desk layout applies; below it the desk uses the tablet or phone layout. */
     minWorkspace: 1024,
     /** From this width the folder panel stays inline; below it, it overlays the list. */
     folderInline: 1600,
@@ -21,3 +23,10 @@ export const LAYOUT_WIDTHS = {
     infoDrawer: 360,
     chatMin: 480,
 };
+/** Media queries behind the viewport tiers; keep in sync with the phone/touch variants in apps/web/tailwind.config.js. */
+export const LAYOUT_MEDIA = {
+    phone: `not all and (min-width: ${LAYOUT_BREAKPOINTS.tablet}px), (pointer: coarse) and (max-height: 499px) and (max-width: ${LAYOUT_BREAKPOINTS.minWorkspace - 1}px)`,
+    belowDesktop: `not all and (min-width: ${LAYOUT_BREAKPOINTS.minWorkspace}px)`,
+    touch: `(hover: none) and (pointer: coarse) and (max-width: ${LAYOUT_BREAKPOINTS.minWorkspace - 1}px)`,
+    touchAnyWidth: "(hover: none) and (pointer: coarse)",
+};

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

@@ -1 +1 @@
-{"version":3,"file":"useDeskShortcuts.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useDeskShortcuts.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2CAAyC,CAAC;AACxE,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,sBAAsB,sCAAoC,CAAC;AAExE,eAAO,MAAM,cAAc,GAAI,QAAQ,WAAW,GAAG,IAAI,YAQxD,CAAC;AA2CF,UAAU,uBAAuB;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,uBAAuB,SAsCvE,CAAC"}
+{"version":3,"file":"useDeskShortcuts.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useDeskShortcuts.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,2CAAyC,CAAC;AACxE,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,sBAAsB,sCAAoC,CAAC;AAExE,eAAO,MAAM,cAAc,GAAI,QAAQ,WAAW,GAAG,IAAI,YAQxD,CAAC;AA6CF,UAAU,uBAAuB;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,uBAAuB,SAsCvE,CAAC"}

package/dist/hooks/common/useDeskShortcuts.js

@@ -15,7 +15,9 @@ export const isTypingTarget = (target) => {
         ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) ||
         target.getAttribute("role") === "textbox");
 };
-const isModalOpen = () => Array.from(document.querySelectorAll(".ant-modal-wrap")).some((el) => el.style.display !== "none");
+// Overlays that mark themselves with the attribute (nav drawer, bottom sheets, offline lock) pause shortcuts.
+const isModalOpen = () => document.querySelector("[data-desk-shortcuts-off]") !== null ||
+    Array.from(document.querySelectorAll(".ant-modal-wrap")).some((el) => el.style.display !== "none");
 /** Moves to the next/previous row in the order the list is rendered (filtered and loaded). */
 const moveListSelection = (step) => {
     var _a, _b;

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

@@ -0,0 +1,3 @@
+/** True while the CRM desk workspace is on screen; hosts use it to switch their own chrome. */
+export declare const useIsDeskWorkspaceMounted: () => boolean;
+//# sourceMappingURL=useIsDeskWorkspaceMounted.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsDeskWorkspaceMounted.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useIsDeskWorkspaceMounted.ts"],"names":[],"mappings":"AAGA,+FAA+F;AAC/F,eAAO,MAAM,yBAAyB,QAAO,OACe,CAAC"}

package/dist/hooks/common/useIsDeskWorkspaceMounted.js

@@ -0,0 +1,4 @@
+"use client";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
+/** True while the CRM desk workspace is on screen; hosts use it to switch their own chrome. */
+export const useIsDeskWorkspaceMounted = () => useDeskPanelHostStore((state) => state.workspace !== null);

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

@@ -0,0 +1,4 @@
+export type ViewportTier = "phone" | "tablet" | "desktop";
+/** Desk/shell tier; unmatched or unavailable queries read as desktop so ≥1024 never changes. */
+export declare const useViewportTier: () => ViewportTier;
+//# sourceMappingURL=useViewportTier.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useViewportTier.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useViewportTier.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1D,gGAAgG;AAChG,eAAO,MAAM,eAAe,QAAO,YAIlC,CAAC"}

package/dist/hooks/common/useViewportTier.js

@@ -0,0 +1,9 @@
+"use client";
+import { LAYOUT_MEDIA } from "../../constants/layout";
+import { useMediaQuery } from "./useMediaQuery";
+/** Desk/shell tier; unmatched or unavailable queries read as desktop so ≥1024 never changes. */
+export const useViewportTier = () => {
+    const isPhone = useMediaQuery(LAYOUT_MEDIA.phone);
+    const isBelowDesktop = useMediaQuery(LAYOUT_MEDIA.belowDesktop);
+    return isPhone ? "phone" : isBelowDesktop ? "tablet" : "desktop";
+};

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

@@ -0,0 +1,10 @@
+/** Visible (keyboard-aware) viewport height, set on the desk root. */
+export declare const DESK_HEIGHT_VAR = "--dc-desk-height";
+/** Same height on <html>, for portaled bottom sheets. */
+export declare const VISUAL_HEIGHT_VAR = "--dc-visual-height";
+/**
+ * Mirrors `visualViewport.height` into the height vars while `enabled` (resize only).
+ * WebKit ignores `interactive-widget`; zoom is cancelled out with `scale`.
+ */
+export declare const useVisualViewportHeight: (el: HTMLElement | null, enabled: boolean) => void;
+//# sourceMappingURL=useVisualViewportHeight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualViewportHeight.d.ts","sourceRoot":"","sources":["../../../src/hooks/common/useVisualViewportHeight.ts"],"names":[],"mappings":"AAGA,sEAAsE;AACtE,eAAO,MAAM,eAAe,qBAAqB,CAAC;AAClD,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,IAAI,WAAW,GAAG,IAAI,EACtB,SAAS,OAAO,SAoBjB,CAAC"}