@droppii-org/chat-sdk 0.7.3 → 0.7.4

package/dist/components/icon/strokeIconNodes.d.ts

@@ -209,6 +209,12 @@ export declare const STROKE_ICON_NODES: {
         x2: string;
         y2: string;
     }])[];
+    menu: [string, {
+        x1: string;
+        y1: string;
+        x2: string;
+        y2: string;
+    }][];
     "message-circle": [string, {
         d: string;
     }][];

package/dist/components/icon/strokeIconNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strokeIconNodes.d.ts","sourceRoot":"","sources":["../../../src/components/icon/strokeIconNodes.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Qc,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"strokeIconNodes.d.ts","sourceRoot":"","sources":["../../../src/components/icon/strokeIconNodes.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE1E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiRc,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

package/dist/components/icon/strokeIconNodes.js

@@ -135,6 +135,11 @@ export const STROKE_ICON_NODES = {
         ["polyline", { points: "16 17 21 12 16 7" }],
         ["line", { x1: "21", y1: "12", x2: "9", y2: "12" }],
     ],
+    "menu": [
+        ["line", { x1: "3", y1: "12", x2: "21", y2: "12" }],
+        ["line", { x1: "3", y1: "6", x2: "21", y2: "6" }],
+        ["line", { x1: "3", y1: "18", x2: "21", y2: "18" }],
+    ],
     "message-circle": [
         ["path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }],
     ],

package/dist/components/message/MessageHeader.d.ts

@@ -5,6 +5,8 @@ interface MessageHeaderProps {
     currentSession?: ISessionResponse;
     isJoined?: boolean | null;
     onOpenThreadInfo?: () => void;
+    /** Phone desk: back button before the avatar. */
+    onBack?: () => void;
 }
 type SelectSessionValueType = SessionStatus | SessionTag;
 export interface SelectSessionOption {
@@ -14,6 +16,6 @@ export interface SelectSessionOption {
     tintColorClassnameBg: string;
     bgTintColorClassname: string;
 }
-declare const MessageHeader: ({ onClose, currentSession, isJoined, onOpenThreadInfo, }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageHeader: ({ onClose, currentSession, isJoined, onOpenThreadInfo, onBack, }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageHeader;
 //# sourceMappingURL=MessageHeader.d.ts.map

package/dist/components/message/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AASzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAgB/C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,0DAKpB,kBAAkB,4CAuZpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AASzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAgB/C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,kEAMpB,kBAAkB,4CAmbpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -1,7 +1,8 @@
 "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 { Avatar, Button, message } from "antd";
 import { Icon } from "../../components/icon";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import useConversationStore from "../../store/conversation";
 import MediaCollection from "../../components/media-collection";
@@ -27,7 +28,7 @@ import { PeerType } from "../../types/conversation";
 import { shouldShowHeaderMemberCount } from "../../utils/headerMemberCount";
 import TintedAvatar from "../../components/common/TintedAvatar";
 import { splitDisplayName } from "../../components/conversation/rowDisplayName";
-const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, }) => {
+const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, onBack, }) => {
     var _a, _b, _c, _d;
     const { t } = useTranslation();
     const isCx = useAuthStore((state) => state.isCx);
@@ -202,11 +203,14 @@ const MessageHeader = ({ onClose, currentSession, isJoined, onOpenThreadInfo, })
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
+    const avatarNode = (_jsx(_Fragment, { children: showOwnerPlaceholder ? (_jsx("span", { "aria-hidden": true, className: "h-10 w-10 shrink-0 animate-pulse rounded-full bg-gray-25" })) : ownerIdentity ? (isCrm ? (_jsx(TintedAvatar, { name: headerShortName, src: ownerIdentity.avatarUrl, size: 40 })) : (_jsx(Avatar, { src: ownerIdentity.avatarUrl, size: "large", alt: "", className: "min-w-10 min-h-10", children: ((_c = headerName === null || headerName === void 0 ? void 0 : headerName.charAt) === null || _c === void 0 ? void 0 : _c.call(headerName, 0)) || "A" }))) : shouldShowMemberCount ? (_jsx(GroupCompositeAvatar, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, faceURL: avatar, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: displayName, size: 40, className: "min-w-10 min-h-10" })) : isCrm ? (_jsx(TintedAvatar, { name: headerShortName, src: avatar, size: 40 })) : (_jsx(Avatar, { src: avatar, size: "large", alt: "", className: "min-w-10 min-h-10", children: ((_d = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _d === void 0 ? void 0 : _d.call(displayName, 0)) || "A" })) }));
     return (_jsxs("div", { className: `px-4 py-3 flex items-center border-b gap-3 bg-white ${isCrm
-            ? "flex-nowrap border-gray-25 [container-type:inline-size]"
-            : "flex-wrap"}`, "data-cp-name": "MessageHeader", children: [showOwnerPlaceholder ? (_jsx("span", { "aria-hidden": true, className: "h-10 w-10 shrink-0 animate-pulse rounded-full bg-gray-25" })) : ownerIdentity ? (isCrm ? (_jsx(TintedAvatar, { name: headerShortName, src: ownerIdentity.avatarUrl, size: 40 })) : (_jsx(Avatar, { src: ownerIdentity.avatarUrl, size: "large", alt: "", className: "min-w-10 min-h-10", children: ((_c = headerName === null || headerName === void 0 ? void 0 : headerName.charAt) === null || _c === void 0 ? void 0 : _c.call(headerName, 0)) || "A" }))) : shouldShowMemberCount ? (_jsx(GroupCompositeAvatar, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, faceURL: avatar, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: displayName, size: 40, className: "min-w-10 min-h-10" })) : isCrm ? (_jsx(TintedAvatar, { name: headerShortName, src: avatar, size: 40 })) : (_jsx(Avatar, { src: avatar, size: "large", alt: "", className: "min-w-10 min-h-10", children: ((_d = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _d === void 0 ? void 0 : _d.call(displayName, 0)) || "A" })), _jsxs("div", { className: `flex flex-col overflow-hidden flex-1 ${isCrm ? "min-w-[96px]" : ""}`, children: [showOwnerPlaceholder ? (_jsxs("span", { "aria-hidden": true, className: "flex flex-col gap-1.5 py-0.5", children: [_jsx("span", { className: "h-4 w-36 animate-pulse rounded bg-gray-25" }), _jsx("span", { className: "h-3 w-24 animate-pulse rounded bg-gray-25" })] })) : (_jsx("p", { className: `text-base truncate ${isCrm ? "m-0 font-semibold leading-[normal] text-gray-900" : ""}`, title: headerName || undefined, children: (isCrm ? headerShortName : headerName) || "" })), showMemberCountLine && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: memberCount }) })), isCrm && !showOwnerPlaceholder && metaParts.length > 0 && (_jsx("p", { className: "m-0 flex min-w-0 items-center gap-1 overflow-hidden whitespace-nowrap text-xs text-gray-600 [container-type:inline-size]", "data-testid": "header-meta-line", children: metaParts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { "aria-hidden": true, className: "h-[3px] w-[3px] shrink-0 rounded-full bg-gray-200" })), part] }, index))) }))] }), _jsxs("div", { className: `flex items-center justify-end ${isCrm
-                    ? "shrink-0 gap-3 [@container(max-width:699px)]:gap-2"
-                    : "gap-2 overflow-hidden"}`, children: [_jsxs("div", { className: isCrm ? "flex items-center gap-2" : "contents", children: [isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t(isCrm ? "reply_status_placeholder" : "select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: isEnding ? SessionStatus.COMPLETED : currentSessionStatus, disabled: isEnding, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) }))] }), _jsxs("div", { className: isCrm
+            ? "flex-nowrap border-gray-25 [container-type:inline-size] max-lg:flex-wrap phone:gap-2 phone:px-3"
+            : "flex-wrap"}`, "data-cp-name": "MessageHeader", children: [onBack && (_jsx(Button, { type: "text", shape: "default", "data-desk-back": true, className: "h-10 w-10 shrink-0 p-0 text-gray-900", onClick: onBack, "aria-label": t("back"), children: _jsx(StrokeIcon, { name: "chevron-left", size: 20 }) })), isCrm ? (_jsx("span", { className: "contents phone:hidden", children: avatarNode })) : (avatarNode), _jsxs("div", { className: `flex flex-col overflow-hidden flex-1 ${isCrm ? "min-w-[96px] max-[359px]:min-w-[72px]" : ""}`, children: [showOwnerPlaceholder ? (_jsxs("span", { "aria-hidden": true, className: "flex flex-col gap-1.5 py-0.5", children: [_jsx("span", { className: "h-4 w-36 animate-pulse rounded bg-gray-25" }), _jsx("span", { className: "h-3 w-24 animate-pulse rounded bg-gray-25" })] })) : (_jsx("p", { className: `text-base truncate ${isCrm ? "m-0 font-semibold leading-[normal] text-gray-900" : ""}`, title: headerName || undefined, children: (isCrm ? headerShortName : headerName) || "" })), showMemberCountLine && (_jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: memberCount }) })), isCrm && !showOwnerPlaceholder && metaParts.length > 0 && (_jsx("p", { className: "m-0 flex min-w-0 items-center gap-1 overflow-hidden whitespace-nowrap text-xs text-gray-600 [container-type:inline-size]", "data-testid": "header-meta-line", children: metaParts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { "aria-hidden": true, className: "h-[3px] w-[3px] shrink-0 rounded-full bg-gray-200" })), part] }, index))) }))] }), _jsxs("div", { className: `flex items-center justify-end ${isCrm
+                    ? "shrink-0 gap-3 [@container(max-width:699px)]:gap-2 max-lg:contents"
+                    : "gap-2 overflow-hidden"}`, children: [_jsxs("div", { className: isCrm
+                            ? "flex items-center gap-2 max-lg:order-last max-lg:w-full max-lg:empty:hidden"
+                            : "contents", children: [isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t(isCrm ? "reply_status_placeholder" : "select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && !isRealGroup && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: isEnding ? SessionStatus.COMPLETED : currentSessionStatus, disabled: isEnding, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) }))] }), _jsxs("div", { className: isCrm
                             ? "flex items-center gap-1 [@container(max-width:699px)]:gap-0.5"
                             : "contents", children: [_jsx(SearchDrawer, {}), canViewMemberList && (_jsx(GroupMembersDrawer, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, conversationId: conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID, currentSession: currentSession })), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: headerIconButtonClass(isCrm, isInfoPanelOpen), onClick: handleInfoToggle, "aria-label": t("thread_info_open"), title: t("thread_info_open"), children: _jsx(HeaderIcon, { isCrm: isCrm, stroke: "panel-right", font: "align-justify-o" }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-[var(--dc-color-header-icon)] w-8 h-8 p-0", onClick: onClose, "aria-label": t("close"), children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }), isCrm && currentSession && (_jsx(EndSessionConfirm, { open: isEndConfirmOpen, session: currentSession, customerName: headerName || "", onConfirm: () => {
                     setIsEndConfirmOpen(false);

package/dist/components/message/MessageList.d.ts

@@ -11,6 +11,8 @@ interface MessageListProps {
     onSearchMessageRevoked?: () => void;
     /** Renders the pinned-message bar under the header (CRM desk only). */
     showPinnedMessageBar?: boolean;
+    /** Phone desk: shows a back button in the header. */
+    onBack?: () => void;
 }
 declare const MessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageList;

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIxD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAua3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIxD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAub3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMessage } from "../../hooks/message/useMessage";
 import { Button, Empty, Spin, message as toastMessage } from "antd";
+import clsx from "clsx";
 import { useCallback, useEffect, useState } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
@@ -37,7 +38,7 @@ dayjs.extend(isToday);
 const MessageList = (props) => {
     const { t } = useTranslation();
     const { user, connectStatus, allowPinMessageWithoutPermission } = useChatContext();
-    const { onClose, conversationId, searchClientMsgID, openCreateCannedModal, onOpenThreadInfo, onCopyMessageLink, onSearchMessageRevoked, showPinnedMessageBar = false, } = props;
+    const { onClose, conversationId, searchClientMsgID, openCreateCannedModal, onOpenThreadInfo, onCopyMessageLink, onSearchMessageRevoked, showPinnedMessageBar = false, onBack, } = props;
     const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
     const permissions = useGroupPermission(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID);
@@ -202,6 +203,16 @@ const MessageList = (props) => {
             emitter.off("UPDATE_SESSION", handler);
         };
     }, [conversationId, refetchConversationSessions]);
+    // Phone desk: a deep-linked thread shows loading, then the empty state if it never arrives.
+    const [loadTimedOut, setLoadTimedOut] = useState(false);
+    const isLoadingThread = Boolean(onBack && conversationId && !loadTimedOut);
+    useEffect(() => {
+        setLoadTimedOut(false);
+        if (!onBack || !conversationId || conversationData)
+            return;
+        const timer = setTimeout(() => setLoadTimedOut(true), 8000);
+        return () => clearTimeout(timer);
+    }, [onBack, conversationId, conversationData]);
     useEffect(() => {
         if (!openMenuId)
             return;
@@ -213,9 +224,9 @@ const MessageList = (props) => {
         return () => scrollContainer.removeEventListener("scroll", close);
     }, [openMenuId]);
     if (!conversationData) {
-        return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: connectStatus !== ConnectStatus.Connected ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
+        return (_jsx("div", { className: clsx("flex flex-1 items-center justify-center h-full", onBack && "min-h-0"), children: connectStatus !== ConnectStatus.Connected || isLoadingThread ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 overflow-hidden bg-white", "data-cp-name": "MessageList", children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo }), showPinnedMessageBar && (_jsx(PinnedMessageBar, { genericSubtitle: true, canUnpin: canPinMessage })), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [!loadState.initLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-4 z-10", onClick: handleJumpToFirstUnread })), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerProps: isCrm
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 overflow-hidden bg-white", "data-cp-name": "MessageList", children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo, onBack: onBack }), showPinnedMessageBar && (_jsx(PinnedMessageBar, { genericSubtitle: true, canUnpin: canPinMessage })), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [!loadState.initLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-4 z-10", onClick: handleJumpToFirstUnread })), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerProps: isCrm
                             ? {
                                 role: "log",
                                 "aria-live": "off",
@@ -223,7 +234,7 @@ const MessageList = (props) => {
                                 tabIndex: 0,
                                 onKeyDown: handleMessageLogKeyDown,
                             }
-                            : undefined, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onCopyMessageLink: handleCopyMessageLink, showUnreadDivider: !!unreadDividerMessageId &&
+                            : undefined, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onCopyMessageLink: onCopyMessageLink ? handleCopyMessageLink : undefined, showUnreadDivider: !!unreadDividerMessageId &&
                                 message.clientMsgID === unreadDividerMessageId, onUnreadDividerSeen: markDividerSeen }, message.clientMsgID))) })] }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), (Boolean(rawGroupId) && isCheckingMembership) || !isGroupStateFresh ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : !isConfirmedGroup && shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", "data-cp-name": "JoinGroupRequired", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : isViewOnlyMember ? (
             // Brief fallback while isJoined catches up after the kick event.
             _jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })) : !canSendMessage ? (_jsx("div", { className: "border-t bg-[#f5f5f5] py-3 flex items-center justify-center", children: _jsx("p", { className: "text-sm text-gray-500", children: t(isRestrictedByGroupMute

package/dist/components/message/SelectSession.js

@@ -18,7 +18,7 @@ const SelectSession = ({ options, value, onChange, excludeOptions, placeholder,
         onChange(val);
     };
     return (_jsx("div", { className: "relative shrink-0", "data-cp-name": "SelectSession", children: _jsx(Select, { className: isCrm
-                ? `!h-8 ${crmClassName !== null && crmClassName !== void 0 ? crmClassName : ""} [&_.ant-select-selection-item]:!pe-0 [&_.ant-select-selector]:!h-8 [&_.ant-select-selector]:!pl-[10px] [&_.ant-select-selector]:!pr-[26px] [&_.ant-select-selection-item]:!text-[13px] [&_.ant-select-selection-item]:!font-medium [&_.ant-select-selection-placeholder]:!text-[13px] [&_.ant-select-arrow]:!end-[6px]`
+                ? `!h-8 touch:!h-10 touch:[&_.ant-select-selector]:!h-10 touch:[&_.ant-select-selection-item]:!leading-[38px] touch:[&_.ant-select-selection-placeholder]:!leading-[38px] ${crmClassName !== null && crmClassName !== void 0 ? crmClassName : ""} [&_.ant-select-selection-item]:!pe-0 [&_.ant-select-selector]:!h-8 [&_.ant-select-selector]:!pl-[10px] [&_.ant-select-selector]:!pr-[26px] [&_.ant-select-selection-item]:!text-[13px] [&_.ant-select-selection-item]:!font-medium [&_.ant-select-selection-placeholder]:!text-[13px] [&_.ant-select-arrow]:!end-[6px]`
                 : `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, popupClassName: isCrm
                 ? "[&_.ant-select-item-option-selected]:!bg-primary-25 [&_.ant-select-item-option-selected]:!font-normal"
                 : undefined, placement: "bottomLeft", placeholder: placeholder, "aria-label": placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, disabled: disabled, popupMatchSelectWidth: false, suffixIcon: isCrm ? (_jsx(StrokeIcon, { name: "chevron-down", size: 16, className: "text-gray-600" })) : (_jsx(Icon, { icon: "angle-down-o", className: `${isCrm ? "text-gray-600" : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 })), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)

package/dist/components/message/footer/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AA4BA,UAAU,cAAc;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,GAAI,gCAAwC,cAAc,4CA+JxE,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AA4BA,UAAU,cAAc;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,GAAI,gCAAwC,cAAc,4CAmKxE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/message/footer/ActionBar.js

@@ -97,9 +97,9 @@ const ActionBar = ({ formatOpen = false, onToggleFormat }) => {
         });
     }, [editor]);
     if (isCrm) {
-        return (_jsxs("div", { "data-cp-name": "ActionBar", className: "flex items-center gap-0.5", children: [_jsx(Button, { type: "text", shape: "default", "aria-label": t("composer_format"), title: t("composer_format"), "aria-pressed": formatOpen, onClick: onToggleFormat, className: clsx("!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 hover:!bg-gray-5 hover:!text-gray-900", formatOpen ? "!bg-primary-25 !text-primary-500" : "text-gray-600"), children: _jsx(StrokeIcon, { name: "type", size: 18 }) }), _jsx(MediaActions, { crmComposer: true, listUploadFiles: listUploadFiles, onFilesChange: setListUploadFiles }), _jsx("span", { className: "flex-1" }), _jsxs("button", { type: "button", onClick: handleSend, disabled: !canSend, className: clsx("flex h-8 items-center gap-1.5 whitespace-nowrap rounded-lg border px-3.5 text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-400", isInternal
+        return (_jsxs("div", { "data-cp-name": "ActionBar", className: "flex items-center gap-0.5", children: [_jsx(Button, { type: "text", shape: "default", "aria-label": t("composer_format"), title: t("composer_format"), "aria-pressed": formatOpen, onClick: onToggleFormat, className: clsx("!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 hover:!bg-gray-5 hover:!text-gray-900 touch:min-h-10 touch:min-w-10", formatOpen ? "!bg-primary-25 !text-primary-500" : "text-gray-600"), children: _jsx(StrokeIcon, { name: "type", size: 18 }) }), _jsx(MediaActions, { crmComposer: true, hideEmojiOnPhone: true, listUploadFiles: listUploadFiles, onFilesChange: setListUploadFiles }), _jsx("span", { className: "flex-1" }), _jsxs("button", { type: "button", onClick: handleSend, disabled: !canSend, "aria-label": isInternal ? t("composer_send_note") : t("composer_send"), className: clsx("flex h-8 items-center gap-1.5 whitespace-nowrap rounded-lg border px-3.5 text-sm font-medium text-white touch:min-h-10 max-[359px]:w-10 max-[359px]:justify-center max-[359px]:px-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-400", isInternal
                         ? "border-warning-800 bg-warning-800 hover:bg-warning-900"
-                        : "border-primary-400 bg-primary-400 hover:bg-primary-500", !canSend && "cursor-not-allowed opacity-40"), children: [_jsx(StrokeIcon, { name: "send", size: 18 }), isInternal ? t("composer_send_note") : t("composer_send")] })] }));
+                        : "border-primary-400 bg-primary-400 hover:bg-primary-500", !canSend && "cursor-not-allowed opacity-40"), children: [_jsx(StrokeIcon, { name: "send", size: 18 }), _jsx("span", { className: "max-[359px]:sr-only", children: isInternal ? t("composer_send_note") : t("composer_send") })] })] }));
     }
     return (_jsxs("div", { "data-cp-name": "ActionBar", className: "flex items-center justify-between px-4", children: [_jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: setListUploadFiles, buttonClassName: "text-gray-500 w-8 h-8 p-0" }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleSend, disabled: !canSend, children: _jsx(Icon, { icon: "send-b", size: 28, className: `${canSend ? "text-[var(--dc-color-primary)]" : "text-gray-400"}` }) })] }));
 };

package/dist/components/message/footer/ComposerTabs.js

@@ -16,7 +16,7 @@ const ComposerTabs = ({ canUseInternal, isInternal, lockToInternal, setIsInterna
     return (_jsx("div", { role: "group", "aria-label": t("composer_mode_label"), "data-cp-name": "ComposerTabs", className: "flex shrink-0 gap-0.5 rounded-lg bg-[var(--dc-color-neutral-surface)] p-1", children: MODES.map(({ isInternal: modeIsInternal, labelKey, icon }) => {
             const selected = isInternal === modeIsInternal;
             const disabled = lockToInternal && !modeIsInternal;
-            return (_jsxs("button", { type: "button", "aria-pressed": selected, disabled: disabled, onClick: () => setIsInternal(modeIsInternal), className: clsx("flex h-7 items-center gap-1.5 whitespace-nowrap rounded px-2.5 text-[13px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-400", selected
+            return (_jsxs("button", { type: "button", "aria-pressed": selected, disabled: disabled, onClick: () => setIsInternal(modeIsInternal), className: clsx("flex h-7 touch:min-h-10 items-center gap-1.5 whitespace-nowrap rounded px-2.5 text-[13px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-400", selected
                     ? clsx("bg-white font-semibold shadow-[0_1px_2px_rgba(57,62,64,0.12)]", modeIsInternal ? "text-warning-800" : "text-gray-900")
                     : "font-medium text-gray-600 hover:text-gray-900", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(StrokeIcon, { name: icon, size: 16 }), t(labelKey)] }, labelKey));
         }) }));

package/dist/components/message/footer/CrmComposerCard.js

@@ -21,7 +21,7 @@ const CrmComposerCard = ({ canUseInternal, isInternal, lockToInternal, setIsInte
     }, [replyLocked]);
     return (_jsxs("div", { "data-cp-name": "CrmComposerCard", "data-internal": isInternal, className: clsx("flex flex-col gap-1.5 rounded-xl border p-2", isInternal
             ? "border-warning-400/60 bg-warning-25"
-            : "border-[color:var(--dc-composer-border)] bg-[var(--dc-composer-bg)] focus-within:border-[color:var(--dc-composer-border-focus)] focus-within:shadow-[0_0_0_3px_var(--dc-color-primary-light)]", replyLocked && "opacity-50"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 [container-type:inline-size]", children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), isInternal ? (_jsxs("span", { role: "note", title: t("composer_internal_notice"), className: "flex min-w-0 items-center gap-1 whitespace-nowrap text-xs font-medium text-warning-800", children: [_jsx(StrokeIcon, { name: "lock", size: 14 }), _jsx("span", { className: "truncate [@container(max-width:419px)]:sr-only", children: t("composer_internal_notice") })] })) : (_jsxs("span", { className: "ml-auto flex min-w-0 items-center gap-1 overflow-hidden whitespace-nowrap text-xs text-gray-600 [@container(max-width:309px)]:!hidden", children: [_jsx(Kbd, { children: "Enter" }), " ", t("composer_hint_enter"), _jsxs("span", { className: "flex items-center gap-1 [@container(max-width:499px)]:!hidden", children: ["\u00B7 ", _jsx(Kbd, { children: "Shift" }), " + ", _jsx(Kbd, { children: "Enter" }), " ", t("composer_hint_newline")] })] }))] }), _jsxs("div", { ref: fieldRef, className: "contents", children: [_jsx(ComposerEditor, { isInternal: isInternal, placeholderText: isInternal
+            : "border-[color:var(--dc-composer-border)] bg-[var(--dc-composer-bg)] focus-within:border-[color:var(--dc-composer-border-focus)] focus-within:shadow-[0_0_0_3px_var(--dc-color-primary-light)]", replyLocked && "opacity-50"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 [container-type:inline-size]", children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), isInternal ? (_jsxs("span", { role: "note", title: t("composer_internal_notice"), className: "flex min-w-0 items-center gap-1 whitespace-nowrap text-xs font-medium text-warning-800", children: [_jsx(StrokeIcon, { name: "lock", size: 14 }), _jsx("span", { className: "truncate [@container(max-width:419px)]:sr-only", children: t("composer_internal_notice") })] })) : (_jsxs("span", { className: "ml-auto flex min-w-0 items-center gap-1 overflow-hidden whitespace-nowrap text-xs text-gray-600 [@container(max-width:309px)]:!hidden touch:!hidden", children: [_jsx(Kbd, { children: "Enter" }), " ", t("composer_hint_enter"), _jsxs("span", { className: "flex items-center gap-1 [@container(max-width:499px)]:!hidden", children: ["\u00B7 ", _jsx(Kbd, { children: "Shift" }), " + ", _jsx(Kbd, { children: "Enter" }), " ", t("composer_hint_newline")] })] }))] }), _jsxs("div", { ref: fieldRef, className: "contents", children: [_jsx(ComposerEditor, { isInternal: isInternal, placeholderText: isInternal
                             ? t("composer_internal_placeholder")
                             : replyLocked
                                 ? t("composer_closed_placeholder")

package/dist/components/message/footer/EmojiPicker.d.ts

@@ -1,7 +1,9 @@
 interface EmojiPickerProps {
     onEmojiSelect: (emoji: string) => void;
     onClose: () => void;
+    /** Extra classes for the root (CRM clamps the width on tablets). */
+    className?: string;
 }
-declare const EmojiPicker: ({ onEmojiSelect, onClose }: EmojiPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmojiPicker: ({ onEmojiSelect, onClose, className }: EmojiPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default EmojiPicker;
 //# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/components/message/footer/EmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EmojiPicker.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CAiMhE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EmojiPicker.tsx"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,uCAAuC,gBAAgB,4CAiM3E,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/footer/EmojiPicker.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-const EmojiPicker = ({ onEmojiSelect, onClose }) => {
+const EmojiPicker = ({ onEmojiSelect, onClose, className }) => {
     const { t } = useTranslation("common");
     const [activeCategory, setActiveCategory] = useState("smileys");
     const emojiCategories = {
@@ -148,7 +149,7 @@ const EmojiPicker = ({ onEmojiSelect, onClose }) => {
             ],
         },
     };
-    return (_jsx("div", { "data-cp-name": "EmojiPicker", className: "absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-xl shadow-lg w-96 z-50", children: _jsxs("div", { className: "p-3", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-gray-900", children: t("choose_emoji") }), _jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 text-xl", children: "\u00D7" })] }), _jsx("div", { className: "flex gap-1 mb-3", children: Object.entries(emojiCategories).map(([key, category]) => (_jsx("button", { onClick: () => setActiveCategory(key), className: `px-3 py-1 text-xs rounded-full transition-colors ${activeCategory === key
+    return (_jsx("div", { "data-cp-name": "EmojiPicker", className: clsx("absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-xl shadow-lg w-96 z-50", className), children: _jsxs("div", { className: "p-3", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-gray-900", children: t("choose_emoji") }), _jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 text-xl", children: "\u00D7" })] }), _jsx("div", { className: "flex gap-1 mb-3", children: Object.entries(emojiCategories).map(([key, category]) => (_jsx("button", { onClick: () => setActiveCategory(key), className: `px-3 py-1 text-xs rounded-full transition-colors ${activeCategory === key
                             ? "bg-blue-100 text-blue-600"
                             : "text-gray-500 hover:text-gray-700"}`, children: category.name }, key))) }), _jsx("div", { className: "grid grid-cols-8 gap-1 max-h-48 overflow-y-auto", children: emojiCategories[activeCategory].emojis.map((emoji, index) => (_jsx("button", { onClick: () => onEmojiSelect(emoji), className: "p-2 text-xl hover:bg-gray-100 rounded-lg transition-colors", children: emoji }, index))) })] }) }));
 };

package/dist/components/message/footer/EnterHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAyBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAmJnC"}
+{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,YAAY,SA+JnC"}

package/dist/components/message/footer/EnterHandler.js

@@ -10,10 +10,13 @@ import { useMessageFooterContext } from ".";
 import useConversationStore from "../../../store/conversation";
 import emitter, { emit } from "../../../utils/events";
 import { extractMentions } from "./mention/extractMentions";
+import useAuthStore from "../../../store/auth";
+import { LAYOUT_MEDIA } from "../../../constants/layout";
 export default function EnterHandler() {
     const [editor] = useLexicalComposerContext();
     const { onSendMessage, isInternal, listUploadFiles, isOpenCanned, activeCannedIndex, isMentionMenuOpen, } = useMessageFooterContext();
     const shiftEnterCount = useRef(0);
+    const isCrm = useAuthStore((state) => state.isCrm);
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     useEffect(() => {
         return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
@@ -23,9 +26,19 @@ export default function EnterHandler() {
                 return false;
             }
             // Case 1: Enter (submit, chặn xuống dòng)
-            if (!event.shiftKey) {
-                event.preventDefault();
+            // Only CRM tolerates a null event; other hosts keep the original strict path.
+            const shift = isCrm ? event === null || event === void 0 ? void 0 : event.shiftKey : event.shiftKey;
+            if (!shift) {
                 shiftEnterCount.current = 0;
+                // CRM touch < 1024: leave the keydown untouched so Lexical (or iOS's native
+                // beforeinput) inserts the paragraph; the Send button sends.
+                if (isCrm && !isOpenCanned && window.matchMedia(LAYOUT_MEDIA.touch).matches) {
+                    return false;
+                }
+                // A null event (IME composition end) has nothing to send or cancel on desktop.
+                if (isCrm && !event)
+                    return true;
+                event.preventDefault();
                 if (isOpenCanned) {
                     emit("CANNED_RESPONSE_SELECT", activeCannedIndex);
                     return true;
@@ -108,6 +121,7 @@ export default function EnterHandler() {
         isOpenCanned,
         activeCannedIndex,
         isMentionMenuOpen,
+        isCrm,
     ]);
     useEffect(() => {
         const clearEditor = () => {

package/dist/components/message/footer/MediaActions.d.ts

@@ -5,7 +5,8 @@ interface MediaActionsProps {
     buttonClassName?: string;
     showMediaUpload?: boolean;
     crmComposer?: boolean;
+    hideEmojiOnPhone?: boolean;
 }
-export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload, crmComposer, }: MediaActionsProps): import("react/jsx-runtime").JSX.Element;
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload, crmComposer, hideEmojiOnPhone, }: MediaActionsProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MediaActions.d.ts.map

package/dist/components/message/footer/MediaActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAuD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,EACtB,WAAmB,GACpB,EAAE,iBAAiB,2CA6LnB"}
+{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAuD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,EACtB,WAAmB,EACnB,gBAAwB,GACzB,EAAE,iBAAiB,2CA+LnB"}

package/dist/components/message/footer/MediaActions.js

@@ -18,7 +18,7 @@ import useAuthStore from "../../../store/auth";
 import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 const EmojiIcon = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.59997 12.4C7.59997 12.4 8.49997 13.2 9.99997 13.2C11.5 13.2 12.4 12.4 12.4 12.4M14 8.39997C14 8.8418 13.6418 9.19997 13.2 9.19997C12.7581 9.19997 12.4 8.8418 12.4 8.39997C12.4 7.95814 12.7581 7.59997 13.2 7.59997C13.6418 7.59997 14 7.95814 14 8.39997ZM18 9.99997C18 14.4182 14.4182 18 9.99997 18C5.58169 18 1.99997 14.4182 1.99997 9.99997C1.99997 5.58169 5.58169 1.99997 9.99997 1.99997C14.4182 1.99997 18 5.58169 18 9.99997ZM7.59997 8.39997C7.59997 8.8418 7.2418 9.19997 6.79997 9.19997C6.35814 9.19997 5.99997 8.8418 5.99997 8.39997C5.99997 7.95814 6.35814 7.59997 6.79997 7.59997C7.2418 7.59997 7.59997 7.95814 7.59997 8.39997Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 const AttachIcon = (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15.6 10.0001V11.2001C15.6 14.5137 12.9137 17.2001 9.59998 17.2001C6.28626 17.2001 3.59998 14.5137 3.59998 11.2001V6.79999C3.59998 4.59085 5.39084 2.79999 7.59998 2.79999C9.8091 2.79999 11.6 4.59085 11.6 6.79999V11.2C11.6 12.3045 10.7045 13.2 9.59998 13.2C8.49542 13.2 7.59998 12.3045 7.59998 11.2V7.99999", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, crmComposer = false, }) {
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, crmComposer = false, hideEmojiOnPhone = false, }) {
     const [editor] = useLexicalComposerContext();
     const { t } = useTranslation();
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -96,14 +96,14 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
     const btnClass = crmComposer
-        ? "!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 text-gray-600 hover:!bg-gray-5 hover:!text-gray-900"
+        ? "!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 text-gray-600 hover:!bg-gray-5 hover:!text-gray-900 touch:min-h-10 touch:min-w-10"
         : buttonClassName !== null && buttonClassName !== void 0 ? buttonClassName : "w-8 h-8 p-0 text-gray-500 hover:text-gray-700 hover:bg-gray-100";
     const activeCls = crmComposer
         ? "!bg-primary-25 !text-primary-500"
         : "bg-blue-100 text-blue-600";
     const crmLabel = (key) => crmComposer ? { "aria-label": t(key), title: t(key) } : {};
-    return (_jsxs("div", { "data-cp-name": "MediaActions", className: clsx("flex items-center relative", crmComposer ? "gap-0.5" : "gap-1"), ref: containerRef, children: [isCrm && (_jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && activeCls), onClick: onPressCanned }, crmLabel("composer_quick_reply"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "hash", size: 18 })) : (_jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") })) }))), _jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, showEmojiPicker &&
+    return (_jsxs("div", { "data-cp-name": "MediaActions", className: clsx("flex items-center relative", crmComposer ? "gap-0.5" : "gap-1"), ref: containerRef, children: [isCrm && (_jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && activeCls), onClick: onPressCanned }, crmLabel("composer_quick_reply"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "hash", size: 18 })) : (_jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") })) }))), _jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, hideEmojiOnPhone && "phone:!hidden", showEmojiPicker &&
                     (crmComposer
                         ? activeCls
-                        : "bg-[var(--dc-color-primary-light)] text-[var(--dc-color-primary)]")), onClick: () => setShowEmojiPicker(!showEmojiPicker) }, crmLabel("composer_emoji"), { children: crmComposer ? _jsx(StrokeIcon, { name: "smile", size: 18 }) : EmojiIcon })), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_image"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "image", size: 18 })) : (_jsx(Icon, { icon: "image-02-o", size: 22 })) })) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_file"), { children: crmComposer ? _jsx(StrokeIcon, { name: "paperclip", size: 18 }) : AttachIcon })) })] })), showEmojiPicker && (_jsx(EmojiPicker, { onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
+                        : "bg-[var(--dc-color-primary-light)] text-[var(--dc-color-primary)]")), onClick: () => setShowEmojiPicker(!showEmojiPicker) }, crmLabel("composer_emoji"), { children: crmComposer ? _jsx(StrokeIcon, { name: "smile", size: 18 }) : EmojiIcon })), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_image"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "image", size: 18 })) : (_jsx(Icon, { icon: "image-02-o", size: 22 })) })) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_file"), { children: crmComposer ? _jsx(StrokeIcon, { name: "paperclip", size: 18 }) : AttachIcon })) })] })), showEmojiPicker && (_jsx(EmojiPicker, { className: crmComposer ? "max-lg:w-80" : undefined, onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
 }

package/dist/components/message/footer/ToolbarPlugin.js

@@ -105,7 +105,7 @@ export const ToolbarPlugin = ({ compact = false }) => {
         editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
     }, [editor]);
     const getButtonClasses = (isActive) => {
-        return `w-8 h-8 p-0 border-sm ${isActive
+        return `w-8 h-8 p-0 border-sm ${compact ? "touch:min-h-10 touch:min-w-10" : ""} ${isActive
             ? "bg-blue-100 text-blue-600"
             : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"}`;
     };

package/dist/components/message/footer/mention/MentionMenu.js

@@ -95,7 +95,7 @@ const MentionMenu = ({ groupID, isBotThread }) => {
             // overlapped the composer's own top portion. MentionMenuOffset
             // pushes the extra distance from the caret up to the composer's
             // actual top edge, so the menu clears the input entirely.
-            _jsxs(MentionMenuOffset, { "data-cp-name": "MentionMenu", className: "absolute left-0 z-50 max-h-[220px] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), typeaheadOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: limitReached
+            _jsxs(MentionMenuOffset, { "data-cp-name": "MentionMenu", className: "absolute left-0 z-50 max-h-[220px] touch:max-h-[min(220px,calc(var(--dc-desk-height,100dvh)-var(--dc-composer-reserve,280px)))] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), typeaheadOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: limitReached
                             ? t("mention.limit_reached", { max: MAX_MENTIONED_USERS })
                             : t("mention.no_result") })) : (typeaheadOptions.map((option, index) => (_jsxs("button", { type: "button", className: `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${index === selectedIndex ? "bg-blue-50" : "hover:bg-gray-50"}`, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectOptionAndCleanUp(option), children: [option.option.isAtAll ? (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500", children: "@" })) : isCrm ? (_jsx(TintedAvatar, { name: option.option.displayName, src: option.option.faceURL, size: 24 })) : (_jsx(Avatar, { size: 24, src: option.option.faceURL, children: option.option.displayName.charAt(0) })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.option.displayName })] }, option.key))))] }), anchorElementRef.current);
         } }));

package/dist/components/message/headerIconButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "../../components/icon";
 import { StrokeIcon } from "../../components/icon/StrokeIcon";
 /** Classes of a header icon button; an open panel gets the Primary-25 tile in CRM. */
-export const headerIconButtonClass = (isCrm, isOpen) => `${isCrm ? "w-9 h-9 [@container(max-width:699px)]:!w-8 [@container(max-width:699px)]:!h-8" : "w-8 h-8"} p-0 ${isCrm && isOpen
+export const headerIconButtonClass = (isCrm, isOpen) => `${isCrm ? "w-9 h-9 [@container(max-width:699px)]:!w-8 [@container(max-width:699px)]:!h-8 touch:min-h-10 touch:min-w-10" : "w-8 h-8"} p-0 ${isCrm && isOpen
     ? "bg-primary-25 text-primary-500"
     : "text-[var(--dc-color-header-icon)]"}`;
 /** Mockup line icon in CRM, the icon-font glyph elsewhere. */

package/dist/components/message/item/MessageMoreButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageMoreButton.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageMoreButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAwBtC,UAAU,sBAAsB;IAC9B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,oFAAoF;AACpF,QAAA,MAAM,iBAAiB,GAAI,mDAMxB,sBAAsB,4CAyDxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"MessageMoreButton.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageMoreButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAsCtC,UAAU,sBAAsB;IAC9B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,oFAAoF;AACpF,QAAA,MAAM,iBAAiB,GAAI,mDAMxB,sBAAsB,4CAmFxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/message/item/MessageMoreButton.js

@@ -1,18 +1,29 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { Dropdown } from "antd";
+import { Dropdown, Menu } from "antd";
 import clsx from "clsx";
 import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 import { useTranslation } from "react-i18next";
 import { useEscapeLayer } from "../../../hooks/common/useEscapeLayer";
+import BottomSheet from "../../../components/common/BottomSheet";
+import { LAYOUT_MEDIA } from "../../../constants/layout";
 // Compact text menu from the design: 260px, 36px rows, 14px text, 18px icons.
 const MORE_MENU_CLASSNAME = clsx("[&_.ant-dropdown-menu]:!w-[260px]", "[&_.ant-dropdown-menu]:!rounded-xl", "[&_.ant-dropdown-menu]:!p-1", "[&_.ant-dropdown-menu-item]:!h-9", "[&_.ant-dropdown-menu-item]:!rounded-lg", "[&_.ant-dropdown-menu-item]:!px-3", "[&_.ant-dropdown-menu-item]:!py-0", "[&_.ant-dropdown-menu-item]:flex", "[&_.ant-dropdown-menu-item]:items-center", "[&_[data-cp-name=ToolboxMenuRow]]:gap-2.5", "[&_[data-cp-name=ToolboxMenuRow]_span]:!text-sm", "[&_[data-cp-name=ToolboxMenuRow]_span]:!font-normal", "[&_[data-cp-name=ToolboxMenuRow]_svg]:!h-[18px]", "[&_[data-cp-name=ToolboxMenuRow]_svg]:!w-[18px]");
+// Sheet rows: 48px, borderless, same labeled items as the dropdown.
+const SHEET_MENU_CLASSNAME = clsx("!border-0", "[&_.ant-menu-item]:!h-12", "[&_.ant-menu-item]:!leading-[48px]", "[&_.ant-menu-item]:!rounded-lg", "[&_.ant-menu-item]:!px-3", "[&_.ant-menu-item]:!m-0", "[&_.ant-menu-item]:!w-full", "[&_[data-cp-name=ToolboxMenuRow]]:gap-3");
 /** CRM only: "…" beside the bubble that opens the same text menu as right-click. */
 const MessageMoreButton = ({ items, open, onOpenChange, isMine, reachable, }) => {
     const { t } = useTranslation();
     const buttonRef = useRef(null);
     useEscapeLayer(open, () => onOpenChange(false));
+    // A plain matchMedia read per render, no per-row subscription.
+    const isPhoneTier = typeof window !== "undefined" && window.matchMedia(LAYOUT_MEDIA.phone).matches;
+    const asSheet = open && isPhoneTier;
+    // Mounted on first sheet use only, so rows that never open one carry no Drawer.
+    const sheetUsedRef = useRef(false);
+    if (asSheet)
+        sheetUsedRef.current = true;
     // Opened from the keyboard: move into the menu; closing returns focus to the button.
     const openedByKeyboardRef = useRef(false);
     useEffect(() => {
@@ -25,7 +36,9 @@ const MessageMoreButton = ({ items, open, onOpenChange, isMine, reachable, }) =>
             // The popup mounts a frame or two after `open`; retry briefly.
             let tries = 0;
             const id = window.setInterval(() => {
-                const item = document.querySelector(".ant-dropdown:not(.ant-dropdown-hidden) [role=menuitem]");
+                const item = document.querySelector(asSheet
+                    ? ".ant-drawer-open [role=menuitem]"
+                    : ".ant-dropdown:not(.ant-dropdown-hidden) [role=menuitem]");
                 item === null || item === void 0 ? void 0 : item.focus();
                 if (item || ++tries > 20)
                     window.clearInterval(id);
@@ -36,7 +49,7 @@ const MessageMoreButton = ({ items, open, onOpenChange, isMine, reachable, }) =>
             openedByKeyboardRef.current = false;
             (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
-    }, [open]);
-    return (_jsx(Dropdown, { menu: { items }, trigger: ["click"], open: open, onOpenChange: onOpenChange, placement: isMine ? "bottomRight" : "bottomLeft", overlayClassName: MORE_MENU_CLASSNAME, children: _jsx("button", { ref: buttonRef, type: "button", "data-testid": "message-more-button", "aria-label": t("message_actions"), title: t("message_actions"), "aria-haspopup": "menu", "aria-expanded": open, tabIndex: reachable || open ? 0 : -1, className: clsx("absolute top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg border-0 bg-gray-5 p-0 text-gray-900 opacity-0 transition-opacity hover:bg-gray-25 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100", open && "opacity-100", isMine ? "right-full mr-1" : "left-full ml-1"), children: _jsx(StrokeIcon, { name: "more", size: 18 }) }) }));
+    }, [open, asSheet]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { menu: { items }, trigger: ["click"], open: open && !asSheet, onOpenChange: onOpenChange, placement: isMine ? "bottomRight" : "bottomLeft", overlayClassName: MORE_MENU_CLASSNAME, children: _jsx("button", { ref: buttonRef, type: "button", "data-testid": "message-more-button", "aria-label": t("message_actions"), title: t("message_actions"), "aria-haspopup": isPhoneTier ? "dialog" : "menu", "aria-expanded": open, tabIndex: reachable || open ? 0 : -1, className: clsx("absolute top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg border-0 bg-gray-5 p-0 text-gray-900 opacity-0 transition-opacity hover:bg-gray-25 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100 touch-any:opacity-100 touch:min-h-10 touch:min-w-10", open && "opacity-100", isMine ? "right-full mr-1" : "left-full ml-1"), children: _jsx(StrokeIcon, { name: "more", size: 18 }) }) }), sheetUsedRef.current && (_jsx(BottomSheet, { open: asSheet, title: t("message_actions"), onClose: () => onOpenChange(false), children: _jsx(Menu, { items: items, selectable: false, onClick: () => onOpenChange(false), className: SHEET_MENU_CLASSNAME }) }))] }));
 };
 export default MessageMoreButton;

package/dist/components/message/item/QuoteMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAS3D,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAGvB,qBAAqB,mDA0EvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK3D,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAGvB,qBAAqB,mDAoBvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/item/QuoteMessage.js

@@ -1,62 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { useCallback, useMemo } from "react";
-import useAuthStore from "../../../store/auth";
-import useConversationStore from "../../../store/conversation";
 import ReplyQuoteContent from "../../../components/message/reply/ReplyQuoteContent";
-import { useUserUsername } from "../../../hooks/user/useUserUsername";
-import { isSupportSessionAgentView } from "../../../utils/conversation";
+import { useQuotedSenderName } from "../../../hooks/message/useQuotedSenderName";
 const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
     var _a, _b;
-    const userID = useAuthStore((state) => state.userID);
-    const isCrm = useAuthStore((state) => state.isCrm);
-    const conversationData = useConversationStore((state) => state.conversationData);
     const { t } = useTranslation();
-    const isChatSupport = useMemo(() => {
-        var _a, _b, _c;
-        try {
-            return (_c = (_b = (_a = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.botId;
-        }
-        catch (_d) {
-            return false;
-        }
-    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex]);
     const quoteMessage = ((_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage) || ((_b = message === null || message === void 0 ? void 0 : message.atTextElem) === null || _b === void 0 ? void 0 : _b.quoteMessage);
-    // Outside CRM, an agent identifies quoted senders by username; the session
-    // owner keeps seeing the thread's own name.
-    const isAgentView = !isCrm && isSupportSessionAgentView(conversationData, userID);
-    const quotedUsername = useUserUsername(isAgentView && (quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.sendID) !== userID
-        ? quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.sendID
-        : undefined);
-    const getDisplayName = useCallback(({ name, id }) => {
-        if (isAgentView) {
-            if (id === userID)
-                return t("you");
-            return quotedUsername || name || "";
-        }
-        if (!name)
-            return "";
-        if (!isCrm && isChatSupport) {
-            return conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName;
-        }
-        if (id === userID)
-            return t("you");
-        return name;
-    }, [
-        isAgentView,
-        quotedUsername,
-        isCrm,
-        isChatSupport,
-        conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName,
-        userID,
-        t,
-    ]);
+    const { isMe, name } = useQuotedSenderName(quoteMessage);
     if (!quoteMessage)
         return null;
-    const title = getDisplayName({
-        name: quoteMessage.senderNickname,
-        id: quoteMessage.sendID,
-    });
+    const title = isMe ? t("you") : name;
     return (_jsx("div", { className: "flex cursor-pointer items-center overflow-hidden rounded-r-xl bg-white/70", onClick: () => onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(quoteMessage.clientMsgID || ""), "data-cp-name": "QuoteMessageItem", children: _jsx(ReplyQuoteContent, { message: quoteMessage, title: title }) }));
 };
 export default QuoteMessageItem;

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":"AAQA,eAAO,MAAM,eAAe,sDAmD3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ReplyPreviewBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewBar.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,sDAuC3B,CAAC;AAEF,eAAe,eAAe,CAAC"}