@droppii-org/chat-sdk 0.6.56 → 0.7.1

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
+import { getGroupNotificationText } from "../../../utils/messageLog";
+const toggleClass = "border-0 bg-transparent p-0 text-xs font-medium text-primary-500 hover:underline";
+// CRM only: a run of member changes shows as one quiet line, expandable in place.
+const MemberEventSummary = ({ messages }) => {
+    const { t } = useTranslation();
+    const [expanded, setExpanded] = useState(false);
+    return (_jsx("div", { className: "flex justify-center", "data-testid": "member-event-summary", children: _jsxs("div", { className: "flex flex-col items-center gap-1 rounded-xl bg-gray-50 px-3 py-1 text-xs text-gray-600", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(StrokeIcon, { name: "users", size: 14 }), _jsx("span", { children: t("member_events_collapsed", { count: messages.length }) }), _jsx("button", { type: "button", className: toggleClass, "aria-expanded": expanded, onClick: () => setExpanded((prev) => !prev), children: t(expanded ? "member_events_hide" : "member_events_show") })] }), expanded &&
+                    messages.map((message) => {
+                        var _a;
+                        return (_jsx("p", { className: "text-center", children: getGroupNotificationText(message.contentType, (_a = message.notificationElem) === null || _a === void 0 ? void 0 : _a.detail, t, message.senderNickname) }, message.clientMsgID));
+                    })] }) }));
+};
+export default MemberEventSummary;

package/dist/components/message/item/MessageBubble.d.ts

@@ -6,6 +6,8 @@ export interface MessageBubbleProps {
     showSenderName?: boolean;
     showTip?: boolean;
     isInternal?: boolean;
+    /** CRM support thread, not the customer or the viewer: another agent, or the bot. */
+    supportSender?: "agent" | "bot";
     id?: string;
     isTransparent?: boolean;
     timeLabel?: string;
@@ -14,6 +16,6 @@ export interface MessageBubbleProps {
     /** Called on bubble tap to toggle this message as the single revealed one. */
     onToggleTimeReveal?: () => void;
 }
-declare const MessageBubble: ({ isMine, content, senderName, showSenderName, showTip, isInternal, id, isTransparent, timeLabel, timeRevealed, onToggleTimeReveal, }: MessageBubbleProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageBubble: ({ isMine, content, senderName, showSenderName, showTip, isInternal, supportSender, id, isTransparent, timeLabel, timeRevealed, onToggleTimeReveal, }: MessageBubbleProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageBubble;
 //# sourceMappingURL=MessageBubble.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AA6CD,QAAA,MAAM,aAAa,GAAI,uIAYpB,kBAAkB,4CAsEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AA6CD,QAAA,MAAM,aAAa,GAAI,sJAapB,kBAAkB,4CA8FpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,6 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
+import useAuthStore from "../../../store/auth";
 const INCOMING_TAIL_PATH = "M1.3798 18H4V0C3.51762 4.5 3.34269 10.5 0.966518 14C-0.568384 16.2608 -0.159364 18 1.3798 18Z";
 const OUTGOING_TAIL_PATH = "M2.6202 18H0V0C0.482375 4.5 0.657308 10.5 3.03348 14C4.56838 16.2608 4.15936 18 2.6202 18Z";
 const MessageBubbleTail = ({ isMine, isInternal, }) => (_jsx("div", { className: clsx("flex shrink-0 items-center justify-center", isInternal
@@ -8,23 +11,34 @@ const MessageBubbleTail = ({ isMine, isInternal, }) => (_jsx("div", { className:
         : isMine
             ? "text-chat-bubble-mine"
             : "text-chat-bubble-neutral"), "data-cp-name": "MessageBubbleTail", children: _jsx("div", { className: "flex-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "18", viewBox: "0 0 4 18", fill: "none", "aria-hidden": true, children: _jsx("path", { d: isMine ? OUTGOING_TAIL_PATH : INCOMING_TAIL_PATH, fill: "currentColor", fillOpacity: "0.1" }) }) }) }));
-const MessageBubble = ({ isMine, content, senderName, showSenderName, showTip = true, isInternal = false, id, isTransparent = false, timeLabel, timeRevealed = false, onToggleTimeReveal, }) => {
-    const showTail = showTip && !isTransparent;
+const MessageBubble = ({ isMine, content, senderName, showSenderName, showTip = true, isInternal = false, supportSender, id, isTransparent = false, timeLabel, timeRevealed = false, onToggleTimeReveal, }) => {
+    const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const showInternalLabel = isCrm && isInternal && !isTransparent;
+    // CRM bubbles are flat rounded boxes; the tail only exists outside CRM.
+    const showTail = showTip && !isTransparent && !isCrm;
     const showTimeLabel = Boolean(timeLabel) && timeRevealed;
+    const bubbleFill = isInternal
+        ? isCrm
+            ? "border border-warning-400/50 bg-warning-25"
+            : "bg-chat-internal/10"
+        : isMine || (isCrm && supportSender === "agent")
+            ? "bg-[var(--dc-color-bubble-mine,rgba(0,81,255,0.1))] text-[color:var(--dc-color-bubble-mine-text,inherit)]"
+            : isCrm && supportSender === "bot"
+                ? "bg-success-25 text-gray-900"
+                : "bg-[var(--dc-color-bubble-other,rgba(131,137,157,0.1))] text-[color:var(--dc-color-bubble-other-text,inherit)]";
     const bubbleClass = clsx("relative min-w-0 max-w-full", isTransparent
         ? "bg-transparent p-0"
-        : clsx("p-2", showTip
-            ? isMine
-                ? "rounded-[20px] rounded-br-none"
-                : "rounded-[20px] rounded-bl-none"
-            : "rounded-[20px]", isInternal
-            ? "bg-chat-internal/10"
-            : isMine
-                ? "bg-chat-bubble-mine/10"
-                : "bg-chat-bubble-neutral/10"));
-    return (_jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-1", children: [showSenderName && senderName && (_jsx("span", { "data-testid": "message-sender-name", className: "px-1 text-[12px] font-medium leading-[160%] tracking-[0.12px] text-gray-400", children: senderName })), _jsxs("div", { className: "relative flex min-w-0 max-w-full items-end", "data-testid": "message-bubble", "data-cp-name": "MessageBubble", onClick: () => {
+        : clsx("p-2", isCrm
+            ? "rounded-xl"
+            : showTip
+                ? isMine
+                    ? "rounded-[20px] rounded-br-none"
+                    : "rounded-[20px] rounded-bl-none"
+                : "rounded-[20px]", bubbleFill));
+    return (_jsxs("div", { className: "flex min-w-0 max-w-full flex-col gap-1", children: [showSenderName && senderName && (_jsx("span", { "data-testid": "message-sender-name", className: clsx("px-1 text-[12px] font-medium leading-[160%] tracking-[0.12px]", isCrm ? "text-gray-600" : "text-gray-400"), children: senderName })), _jsxs("div", { className: "relative flex min-w-0 max-w-full items-end", "data-testid": "message-bubble", "data-cp-name": "MessageBubble", onClick: () => {
                     if (timeLabel)
                         onToggleTimeReveal === null || onToggleTimeReveal === void 0 ? void 0 : onToggleTimeReveal();
-                }, children: [!isMine && showTail && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), _jsx("div", { className: bubbleClass, id: id, children: _jsx("div", { className: clsx("flex flex-col gap-2", !isTransparent && "px-1"), children: content }) }), isMine && showTail && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), showTimeLabel && (_jsx("span", { "data-testid": "message-time-label", className: clsx("absolute -bottom-2 flex h-[19px] w-[30px] items-center justify-center rounded-full bg-white text-[10px] text-gray-400 shadow-sm", isMine ? "right-1" : "left-1"), children: timeLabel }))] })] }));
+                }, children: [!isMine && showTail && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), _jsx("div", { className: bubbleClass, id: id, children: _jsxs("div", { className: clsx("flex flex-col", showInternalLabel ? "gap-1" : "gap-2", !isTransparent && "px-1"), children: [showInternalLabel && (_jsxs("span", { "data-testid": "message-internal-label", className: "flex items-center gap-1 text-xs font-semibold text-warning-800", children: [_jsx(StrokeIcon, { name: "lock", size: 14 }), t("internal_label")] })), content] }) }), isMine && showTail && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), showTimeLabel && (_jsx("span", { "data-testid": "message-time-label", className: clsx("absolute -bottom-2 flex h-[19px] w-[30px] items-center justify-center rounded-full bg-white text-[10px] text-gray-400 shadow-sm", isMine ? "right-1" : "left-1"), children: timeLabel }))] })] }));
 };
 export default MessageBubble;

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

@@ -0,0 +1,13 @@
+import type { MenuProps } from "antd";
+interface MessageMoreButtonProps {
+    items: NonNullable<MenuProps["items"]>;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    isMine: boolean;
+    /** True while the message holds focus, so Tab can reach the button. */
+    reachable: boolean;
+}
+/** CRM only: "…" beside the bubble that opens the same text menu as right-click. */
+declare const MessageMoreButton: ({ items, open, onOpenChange, isMine, reachable, }: MessageMoreButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageMoreButton;
+//# sourceMappingURL=MessageMoreButton.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Dropdown } from "antd";
+import clsx from "clsx";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
+import { useEscapeLayer } from "../../../hooks/common/useEscapeLayer";
+// 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]");
+/** 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));
+    // Opened from the keyboard: move into the menu; closing returns focus to the button.
+    const openedByKeyboardRef = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        if (open) {
+            const active = document.activeElement;
+            openedByKeyboardRef.current = !!((_a = active === null || active === void 0 ? void 0 : active.matches) === null || _a === void 0 ? void 0 : _a.call(active, ":focus-visible"));
+            if (!openedByKeyboardRef.current)
+                return;
+            // 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]");
+                item === null || item === void 0 ? void 0 : item.focus();
+                if (item || ++tries > 20)
+                    window.clearInterval(id);
+            }, 50);
+            return () => window.clearInterval(id);
+        }
+        if (openedByKeyboardRef.current) {
+            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 }) }) }));
+};
+export default MessageMoreButton;

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

@@ -3,6 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const RevokeMessageItem = (_) => {
     const { t } = useTranslation();
-    return (_jsx("span", { className: "whitespace-pre-wrap text-[16px] leading-[160%] italic text-gray-500", "data-cp-name": "RevokeMessageItem", children: t("revoked") }));
+    return (_jsx("span", { className: "whitespace-pre-wrap text-[length:var(--dc-message-font-size,16px)] leading-[var(--dc-message-line-height,160%)] italic text-gray-500", "data-cp-name": "RevokeMessageItem", children: t("revoked") }));
 };
 export default RevokeMessageItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SessionEventMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/SessionEventMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAI3D,UAAU,4BAA4B;IACpC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,uBAAuB,GAAI,aAAa,4BAA4B,mDAazE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"SessionEventMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/SessionEventMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAQ3D,UAAU,4BAA4B;IACpC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,uBAAuB,GAAI,aAAa,4BAA4B,mDA2BzE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,12 +1,24 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { getSessionEventText } from "../../../utils/messageLog";
+import useAuthStore from "../../../store/auth";
+import useConversationStore from "../../../store/conversation";
+import { PeerType } from "../../../types/conversation";
+import { getSessionEventText, SESSION_END_MARKER } from "../../../utils/messageLog";
+import CrmSystemLine from "./CrmSystemLine";
 const SessionEventMessageItem = ({ message }) => {
+    var _a;
+    const isCrm = useAuthStore((state) => state.isCrm);
     const { t } = useTranslation();
+    const isBotThread = useConversationStore((state) => { var _a; return ((_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.peerType) === PeerType.BOT; });
     const text = getSessionEventText(message, t);
     if (!text)
         return null;
+    if (isCrm) {
+        const isEnd = ((_a = message.customElem) === null || _a === void 0 ? void 0 : _a.data) === SESSION_END_MARKER;
+        const icon = isEnd ? "check-circle" : isBotThread ? "bot" : "message-circle";
+        return _jsx(CrmSystemLine, { icon: icon, children: text });
+    }
     return (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "rounded-full bg-gray-200 px-3 py-1.5 text-center text-[13px] font-normal text-gray-900", children: text }) }));
 };
 export default SessionEventMessageItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SystemLogMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/SystemLogMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAO3D,UAAU,yBAAyB;IACjC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,oBAAoB,GAAI,aAAa,yBAAyB,mDAuBnE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SystemLogMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/SystemLogMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAS3D,UAAU,yBAAyB;IACjC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,oBAAoB,GAAI,aAAa,yBAAyB,mDA0CnE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -2,12 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSystemLogMessageHtml, getSystemLogMessageText, } from "../../../utils/messageLog";
 import { sanitizeHtml } from "../../../utils/common";
+import useAuthStore from "../../../store/auth";
+import CrmSystemLine from "./CrmSystemLine";
 const SystemLogMessageItem = ({ message }) => {
+    const isCrm = useAuthStore((state) => state.isCrm);
     const html = getSystemLogMessageHtml(message);
     const text = getSystemLogMessageText(message);
     if (!html && !text) {
         return null;
     }
+    if (isCrm) {
+        // BE html carries its own pill style and a bold name; CRM keeps plain text next to an icon.
+        return (_jsx(CrmSystemLine, { icon: "user", children: html ? (_jsx("span", { dangerouslySetInnerHTML: { __html: sanitizeHtml(html) }, className: "[&_b]:font-normal [&_span]:!rounded-none [&_span]:!bg-transparent [&_span]:!p-0 [&_span]:!text-xs [&_span]:!font-normal [&_span]:!text-gray-600 [&_strong]:font-normal" })) : (text) }));
+    }
     if (html) {
         return (_jsx("div", { className: "flex justify-center", children: _jsx("div", { dangerouslySetInnerHTML: { __html: sanitizeHtml(html) } }) }));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,8BAA8B,CAAC;AA+CtC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAkCD,QAAA,MAAM,WAAW,GAAI,kSAkBlB,gBAAgB,mDAsZlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,8BAA8B,CAAC;AA0DtC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAiDD,QAAA,MAAM,WAAW,GAAI,kSAkBlB,gBAAgB,mDA0elB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -7,25 +7,33 @@ import { MessageStatus, MessageType, } from "@droppii-org/wasm-client-sdk";
 import MessageBubble from "./MessageBubble";
 import { renderBubbleContent } from "./renderMessageContent";
 import { getImmediateNeighbor, getVisibleNeighbor, isMessageHiddenForViewer, } from "../../../hooks/message/useMessage";
-import { MSG_ITEM_BUBBLE_GROUP_PREFIX, MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX, } from "../../../constants";
+import { MSG_ITEM_BUBBLE_GROUP_PREFIX, MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX, SUPPORT_SYSTEM_SENDER_ID, } from "../../../constants";
 import { formatDividerTimestamp } from "../../../utils/common";
 import { CustomMessageType } from "../../../types/customMessage";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useLongPress } from "ahooks";
 import { Trans, useTranslation } from "react-i18next";
 import MessageStatusIndicator from "./MessageStatusIndicator";
 import { useSendMessage, isMediaResendable, } from "../../../hooks/message/useSendMessage";
-import { Icon } from "../../../components/icon";
+import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
+import TintedAvatar from "../../../components/common/TintedAvatar";
+import { hasMultipleOtherSenders } from "./otherSenders";
 import SystemLogMessageItem from "./SystemLogMessage";
 import GroupNotificationMessageItem from "./GroupNotificationMessage";
 import SessionEventMessageItem from "./SessionEventMessage";
+import MemberEventSummary from "./MemberEventSummary";
+import MessageMoreButton from "./MessageMoreButton";
+import { MESSAGE_FOCUSABLE_ATTR } from "../messageKeyboardNav";
+import DateDivider from "./DateDivider";
+import { getMemberEventRun } from "../../../utils/memberEventRun";
 import UnreadMessageDivider from "../../../components/message/UnreadMessageDivider";
 import { isGroupNotificationMessageType, isSessionEventMessage, isSystemLogMessageType, } from "../../../utils/messageLog";
-import { isSupportSessionAgentView } from "../../../utils/conversation";
+import { isSupportSessionAgentView, resolveSupportSessionOwnerId, } from "../../../utils/conversation";
 import { buildMessageToolboxMenuItems, getCopyableMessageText, isCopyableMessageType, isPinnableMessageType, MessageToolboxActionKey, MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, useMessageToolboxVisibility, } from "../../../components/message/toolbox";
 const MESSAGE_AVATAR_SIZE = 24;
+const CRM_MESSAGE_AVATAR_SIZE = 28;
 const DIVIDER_GAP_MINUTES = 30;
 const DIVIDER_GAP_MS = DIVIDER_GAP_MINUTES * 60 * 1000;
 const GROUPING_GAP_MINUTES = 5;
@@ -35,9 +43,9 @@ const isOrderMessage = (message) => { var _a; return ((_a = message === null ||
 // break) so both features agree on the same calendar-day boundary — a group
 // must never span a divider, regardless of how small the time gap is.
 const isSameCalendarDay = (sendTimeA, sendTimeB) => dayjs(sendTimeA).isSame(sendTimeB, "day");
-const MessageAvatar = ({ avatarUrl, senderNickname, }) => {
+const MessageAvatar = ({ avatarUrl, senderNickname, raised = false, isCrm = false, }) => {
     var _a;
-    return (_jsx(Avatar, { size: MESSAGE_AVATAR_SIZE, src: avatarUrl, className: "shrink-0 self-end", "data-cp-name": "MessageAvatar", children: ((_a = senderNickname === null || senderNickname === void 0 ? void 0 : senderNickname.charAt) === null || _a === void 0 ? void 0 : _a.call(senderNickname, 0)) || "A" }));
+    return isCrm ? (_jsx(TintedAvatar, { name: senderNickname || "A", src: avatarUrl, size: CRM_MESSAGE_AVATAR_SIZE, className: clsx("self-end", raised && "mb-[22px]") })) : (_jsx(Avatar, { size: MESSAGE_AVATAR_SIZE, src: avatarUrl, alt: "", className: clsx("shrink-0 self-end", raised && "mb-5"), "data-cp-name": "MessageAvatar", children: ((_a = senderNickname === null || senderNickname === void 0 ? void 0 : senderNickname.charAt) === null || _a === void 0 ? void 0 : _a.call(senderNickname, 0)) || "A" }));
 };
 const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, onPinMessage, onUnpinMessage, enableLongPress = false, timeRevealed = false, onToggleTimeReveal, onCopyMessageLink, showUnreadDivider = false, onUnreadDividerSeen, }) => {
     var _a;
@@ -46,6 +54,9 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
     const userID = useAuthStore((state) => state.userID);
     const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
+    // CRM only: the "…" menu and whether the message holds focus (so Tab reaches it).
+    const [moreOpen, setMoreOpen] = useState(false);
+    const [hasFocus, setHasFocus] = useState(false);
     const { isDeliveredForUi, isRevocable, isMine, isMessageLinkCopyable } = useMessageToolboxVisibility(message, userID);
     const contextMenuItems = useMemo(() => {
         if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.RevokeMessage ||
@@ -160,6 +171,13 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
         userID,
     ]);
     const isInternalMessage = Boolean(message === null || message === void 0 ? void 0 : message.isInternal);
+    // CRM support thread: other agents share the viewer's colour, the bot gets its own.
+    const sessionOwnerId = resolveSupportSessionOwnerId(conversationData);
+    const supportSender = isCrm && !isMine && !!sessionOwnerId && (message === null || message === void 0 ? void 0 : message.sendID) !== sessionOwnerId
+        ? (message === null || message === void 0 ? void 0 : message.sendID) === SUPPORT_SYSTEM_SENDER_ID
+            ? "bot"
+            : "agent"
+        : undefined;
     const isSystemLogMessage = isSystemLogMessageType(message === null || message === void 0 ? void 0 : message.contentType);
     const isGroupNotificationMessage = isGroupNotificationMessageType(message === null || message === void 0 ? void 0 : message.contentType);
     const isSessionEvent = isSessionEventMessage(message);
@@ -203,10 +221,17 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
         Math.abs(dayjs(message.sendTime).diff(previousMessage.sendTime, "millisecond")) > DIVIDER_GAP_MS;
     const showPeerInfo = isGroupChat || showSenderInfo;
     const showAvatar = showPeerInfo && !isMine && !nextSameUser;
-    const showSenderName = showPeerInfo && !isMine && !prevSameUser;
+    // CRM drops the label unless two different people besides the viewer are talking.
+    const showSenderName = showPeerInfo &&
+        !isMine &&
+        !prevSameUser &&
+        (!isCrm || hasMultipleOtherSenders(allMessages, userID));
     const showTip = forceHideTip ? false : !nextSameUser;
+    // CRM: 4px inside a sender group, 16px between groups; others keep py-1.
     const messageContainerProps = {
-        className: "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0",
+        className: isCrm
+            ? clsx("group/msg flex min-w-0 flex-col gap-2 px-3 sm:px-4 rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", prevSameUser ? "pt-1" : "pt-4")
+            : "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0",
         id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`,
     };
     const unreadDividerNode = showUnreadDivider ? (_jsx(UnreadMessageDivider, { onSeen: onUnreadDividerSeen })) : null;
@@ -216,7 +241,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
     if (isMessageHiddenForViewer(message, isCrm, conversationData !== null && conversationData !== void 0 ? conversationData : undefined, userID)) {
         return hiddenMessageNode;
     }
-    const timeBreakNode = showTimeBreak ? (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "rounded-full bg-neutral-100 px-2 py-1 text-center text-xs text-gray-600", children: formatDividerTimestamp(message.sendTime) }) })) : null;
+    const timeBreakNode = showTimeBreak ? (isCrm ? (_jsx(DateDivider, { label: formatDividerTimestamp(message.sendTime) })) : (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "rounded-full bg-neutral-100 px-2 py-1 text-center text-xs text-gray-600", children: formatDividerTimestamp(message.sendTime) }) }))) : null;
     if (isSystemLogMessage) {
         return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
             unreadDividerNode,
@@ -224,10 +249,13 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
             _jsx(SystemLogMessageItem, { message: message })));
     }
     if (isGroupNotificationMessage) {
+        const memberRun = isCrm ? getMemberEventRun(allMessages, message) : null;
+        if (memberRun && !memberRun.isHead)
+            return hiddenMessageNode;
         return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
             unreadDividerNode,
             timeBreakNode,
-            _jsx(GroupNotificationMessageItem, { message: message })));
+            memberRun ? (_jsx(MemberEventSummary, { messages: memberRun.messages })) : (_jsx(GroupNotificationMessageItem, { message: message }))));
     }
     if (isSessionEvent) {
         // Owners in consumer apps don't see session dividers; CRM and agents do.
@@ -238,17 +266,38 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
             timeBreakNode,
             _jsx(SessionEventMessageItem, { message: message })));
     }
-    const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: renderBubbleContent(message, onPressQuoteMessage), isTransparent: isStickerMessage, timeLabel: dayjs.tz(message.sendTime).format("HH:mm"), timeRevealed: timeRevealed, onToggleTimeReveal: () => onToggleTimeReveal === null || onToggleTimeReveal === void 0 ? void 0 : onToggleTimeReveal(message.clientMsgID) }));
+    const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, supportSender: supportSender, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: renderBubbleContent(message, onPressQuoteMessage), isTransparent: isStickerMessage, timeLabel: isCrm ? undefined : dayjs.tz(message.sendTime).format("HH:mm"), timeRevealed: timeRevealed, onToggleTimeReveal: () => onToggleTimeReveal === null || onToggleTimeReveal === void 0 ? void 0 : onToggleTimeReveal(message.clientMsgID) }));
     const showPinnedBadge = Boolean(message === null || message === void 0 ? void 0 : message.isPinned);
-    const pinnedBadgeNode = showPinnedBadge ? (_jsx("span", { "data-testid": "message-pinned-badge", className: clsx("absolute -top-2.5 z-[1] flex h-[22px] w-[26px] items-center justify-center rounded-full border border-white bg-gray-25", isMine ? "left-0" : "right-0"), children: _jsx(Icon, { icon: "thumbtack-b", size: 12, className: "text-[var(--dc-color-primary)]" }) })) : null;
+    const showGroupTime = isCrm && !nextSameUser;
+    const pinnedBadgeNode = showPinnedBadge ? (_jsx("span", { "data-testid": "message-pinned-badge", className: clsx("absolute -top-2.5 z-[1] flex h-[22px] w-[26px] items-center justify-center rounded-full border border-white bg-gray-25", isMine ? "left-0" : "right-0"), children: _jsx(AdaptiveIcon, { stroke: "pin", font: "thumbtack-b", size: 12, className: "text-[var(--dc-color-primary)]" }) })) : null;
     const bubbleGroupId = `${MSG_ITEM_BUBBLE_GROUP_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`;
     const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsxs("div", { ref: bubbleWrapperRef, id: bubbleGroupId, className: "relative min-w-0 max-w-full", children: [bubbleNode, pinnedBadgeNode] }) })) : (_jsxs("div", { id: bubbleGroupId, className: "relative min-w-0 max-w-full", children: [bubbleNode, pinnedBadgeNode] }));
-    return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID, "data-cp-name": "MessageItem" }),
+    const moreButtonNode = isCrm && hasContextMenu ? (_jsx(MessageMoreButton, { items: contextMenuItems, open: moreOpen, onOpenChange: setMoreOpen, isMine: isMine, reachable: hasFocus })) : null;
+    const crmFocusProps = isCrm
+        ? {
+            tabIndex: -1,
+            [MESSAGE_FOCUSABLE_ATTR]: "",
+            onFocus: () => setHasFocus(true),
+            onBlur: (e) => {
+                if (!e.currentTarget.contains(e.relatedTarget))
+                    setHasFocus(false);
+            },
+            onKeyDown: (e) => {
+                if (e.key === "Enter" && e.target === e.currentTarget && hasContextMenu) {
+                    e.preventDefault();
+                    setMoreOpen(true);
+                }
+            },
+        }
+        : {};
+    return (_createElement("div", Object.assign({}, messageContainerProps, crmFocusProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID, "data-cp-name": "MessageItem" }),
         unreadDividerNode,
         timeBreakNode,
-        _jsxs("div", { className: clsx("flex min-w-0 items-end gap-1", isMine ? "justify-end pl-12 pr-3" : "justify-start pl-3 pr-12"), children: [!isMine &&
+        _jsxs("div", { className: clsx("flex min-w-0 items-end", isCrm ? "gap-2" : "gap-1", isMine ? "justify-end pl-12 pr-3" : "justify-start pl-3 pr-12"), children: [!isMine &&
                     showPeerInfo &&
-                    (showAvatar ? (_jsx(MessageAvatar, { avatarUrl: message === null || message === void 0 ? void 0 : message.senderFaceUrl, senderNickname: message === null || message === void 0 ? void 0 : message.senderNickname })) : (_jsx("div", { className: "h-6 w-6 shrink-0 self-end" }))), _jsxs("div", { className: clsx("flex min-w-0 flex-col gap-1", isMine ? "items-end" : "items-start"), children: [_jsxs("div", { className: clsx("flex min-w-0 max-w-full items-end gap-1.5", showPinnedBadge && "mt-1.5"), children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), wrappedBubble] }), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "mt-1 text-xs text-red-500", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
+                    (showAvatar ? (_jsx(MessageAvatar, { avatarUrl: message === null || message === void 0 ? void 0 : message.senderFaceUrl, senderNickname: message === null || message === void 0 ? void 0 : message.senderNickname, raised: showGroupTime, isCrm: isCrm })) : (_jsx("div", { className: isCrm ? "h-7 w-7 shrink-0 self-end" : "h-6 w-6 shrink-0 self-end" }))), _jsxs("div", { className: clsx("flex min-w-0 flex-col gap-1", isCrm && "max-w-[76%]", isMine ? "items-end" : "items-start"), children: [_jsxs("div", { className: clsx("relative flex min-w-0 max-w-full items-end gap-1.5", showPinnedBadge && "mt-1.5"), children: [isMine && moreButtonNode, isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), wrappedBubble, !isMine && moreButtonNode] }), showGroupTime && (_jsxs("span", { "data-testid": "message-group-time", className: "px-1 text-xs text-gray-600", children: [isMine && (message === null || message === void 0 ? void 0 : message.senderNickname)
+                                    ? `${message.senderNickname} · `
+                                    : "", dayjs.tz(message.sendTime).format("HH:mm")] })), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "mt-1 text-xs text-red-500", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
                                     bold: (_jsx("strong", { className: "cursor-pointer", onClick: () => resendMessage(message) })),
                                 } })) : (t("message_send_failed_no_retry")) }))] })] })));
 };

package/dist/components/message/item/otherSenders.d.ts

@@ -0,0 +1,7 @@
+import type { MessageItem } from "@droppii-org/wasm-client-sdk";
+/**
+ * True when at least two different people other than the viewer have spoken (bot and
+ * customer, or several members). Only then does an incoming group need a sender label.
+ */
+export declare const hasMultipleOtherSenders: (messages: MessageItem[], viewerId: string) => boolean;
+//# sourceMappingURL=otherSenders.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otherSenders.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/otherSenders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAgBhE;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,UAAU,WAAW,EAAE,EACvB,UAAU,MAAM,KACf,OAeF,CAAC"}

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

@@ -0,0 +1,29 @@
+import { MessageType } from "@droppii-org/wasm-client-sdk";
+import { isGroupNotificationMessageType, isSessionEventMessage, isSystemLogMessageType, } from "../../../utils/messageLog";
+const cache = new WeakMap();
+const isChatMessage = (message) => message.contentType !== MessageType.RevokeMessage &&
+    !isSystemLogMessageType(message.contentType) &&
+    !isGroupNotificationMessageType(message.contentType) &&
+    !isSessionEventMessage(message);
+/**
+ * True when at least two different people other than the viewer have spoken (bot and
+ * customer, or several members). Only then does an incoming group need a sender label.
+ */
+export const hasMultipleOtherSenders = (messages, viewerId) => {
+    let byViewer = cache.get(messages);
+    if (!byViewer) {
+        byViewer = new Map();
+        cache.set(messages, byViewer);
+    }
+    const known = byViewer.get(viewerId);
+    if (known !== undefined)
+        return known;
+    const others = new Set();
+    for (const message of messages) {
+        if (message.sendID !== viewerId && isChatMessage(message))
+            others.add(message.sendID);
+    }
+    const result = others.size > 1;
+    byViewer.set(viewerId, result);
+    return result;
+};

package/dist/components/message/item/textStyle.d.ts

@@ -1,3 +1,3 @@
-export declare const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-gray-900 [&_code]:font-[inherit] [&_pre]:font-[inherit] [&_kbd]:font-[inherit] [&_samp]:font-[inherit]";
+export declare const MESSAGE_TEXT_CLASS = "text-[length:var(--dc-message-font-size,16px)] leading-[var(--dc-message-line-height,160%)] tracking-[0.16px] text-gray-900 [&_code]:font-[inherit] [&_pre]:font-[inherit] [&_kbd]:font-[inherit] [&_samp]:font-[inherit]";
 export declare const MESSAGE_LINE_HEIGHT_PX = 25.6;
 //# sourceMappingURL=textStyle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/textStyle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,6JAC6H,CAAC;AAG7J,eAAO,MAAM,sBAAsB,OAAO,CAAC"}
+{"version":3,"file":"textStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/textStyle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,8NAC8L,CAAC;AAG9N,eAAO,MAAM,sBAAsB,OAAO,CAAC"}

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

@@ -1,3 +1,3 @@
-export const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-gray-900 [&_code]:font-[inherit] [&_pre]:font-[inherit] [&_kbd]:font-[inherit] [&_samp]:font-[inherit]";
-// 16px × leading-[160%] — one visual line of MESSAGE_TEXT_CLASS.
+export const MESSAGE_TEXT_CLASS = "text-[length:var(--dc-message-font-size,16px)] leading-[var(--dc-message-line-height,160%)] tracking-[0.16px] text-gray-900 [&_code]:font-[inherit] [&_pre]:font-[inherit] [&_kbd]:font-[inherit] [&_samp]:font-[inherit]";
+// One line at the default 16px × 160%; CRM sets a smaller size but never clamps text.
 export const MESSAGE_LINE_HEIGHT_PX = 25.6;

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

@@ -0,0 +1,8 @@
+import type { KeyboardEvent } from "react";
+export declare const MESSAGE_FOCUSABLE_ATTR = "data-msg-focusable";
+/**
+ * Up/Down on the message log moves focus between messages. The log renders
+ * newest first in a column-reverse flex, so the next DOM node is the older message.
+ */
+export declare const handleMessageLogKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+//# sourceMappingURL=messageKeyboardNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messageKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/components/message/messageKeyboardNav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,OAAO,aAAa,CAAC,WAAW,CAAC,SAmBxE,CAAC"}

package/dist/components/message/messageKeyboardNav.js

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../../../components/icon";
+import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
 import { useUserUsername } from "../../../hooks/user/useUserUsername";
@@ -25,6 +25,6 @@ export const ReplyPreviewBar = () => {
     const senderName = isMe
         ? t("your_self")
         : quotedUsername || quotedMessage.senderNickname || "";
-    return (_jsxs("div", { "data-testid": "reply-preview-bar", "data-cp-name": "ReplyPreviewBar", className: "flex h-[59px] w-full shrink-0 items-center bg-gray-200/10 px-2 py-1", children: [_jsx(ReplyQuoteContent, { message: quotedMessage, title: t("reply_to", { name: senderName }) }), _jsx("button", { type: "button", onClick: handleClearQuotedMessage, "aria-label": t("cancel"), "data-testid": "reply-preview-bar-close", className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "close-o", size: 16, className: "text-gray-600" }) })] }));
+    return (_jsxs("div", { "data-testid": "reply-preview-bar", "data-cp-name": "ReplyPreviewBar", className: "flex h-[59px] w-full shrink-0 items-center bg-gray-200/10 px-2 py-1", children: [_jsx(ReplyQuoteContent, { message: quotedMessage, title: t("reply_to", { name: senderName }) }), _jsx("button", { type: "button", onClick: handleClearQuotedMessage, "aria-label": t("cancel"), "data-testid": "reply-preview-bar-close", className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(AdaptiveIcon, { stroke: "x", font: "close-o", size: 16, className: "text-gray-600" }) })] }));
 };
 export default ReplyPreviewBar;

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

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

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

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

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

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