@droppii-org/chat-sdk 0.6.55 → 0.7.0

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/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;AAO3D,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,mDAmDvB,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;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"}

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

@@ -4,6 +4,8 @@ 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";
 const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
     var _a, _b;
     const userID = useAuthStore((state) => state.userID);
@@ -19,7 +21,19 @@ const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
             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) {
@@ -28,8 +42,15 @@ const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
         if (id === userID)
             return t("you");
         return name;
-    }, [isCrm, isChatSupport, conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName, userID, t]);
-    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);
+    }, [
+        isAgentView,
+        quotedUsername,
+        isCrm,
+        isChatSupport,
+        conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName,
+        userID,
+        t,
+    ]);
     if (!quoteMessage)
         return null;
     const title = getDisplayName({

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,mDAyYlB,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 ||
@@ -135,22 +146,42 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
     ]);
     const bubbleWrapperRef = useRef(null);
     useLongPress(() => onContextMenuOpenChange === null || onContextMenuOpenChange === void 0 ? void 0 : onContextMenuOpenChange(true), enableLongPress ? bubbleWrapperRef : undefined, { delay: 500 });
+    // Agents outside CRM (e.g. PDP CS) also need to tell the owner apart from
+    // other supporters; only the session owner keeps the anonymous bot view.
+    const isSessionAgentView = isSupportSessionAgentView(conversationData, userID);
     const showSenderInfo = useMemo(() => {
         var _a, _b, _c;
+        if ((message === null || message === void 0 ? void 0 : message.sendID) === userID)
+            return false;
+        if (isSessionAgentView)
+            return true;
         try {
             const isChatSupport = (_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;
-            return Boolean(isChatSupport && isCrm && (message === null || message === void 0 ? void 0 : message.sendID) !== userID);
+            return Boolean(isChatSupport && isCrm);
         }
         catch (_d) {
             console.log("Failed to parse conversationData.ex");
             return false;
         }
-    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm, message === null || message === void 0 ? void 0 : message.sendID, userID]);
+    }, [
+        conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex,
+        isCrm,
+        isSessionAgentView,
+        message === null || message === void 0 ? void 0 : message.sendID,
+        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);
-    const showsSessionEvents = isCrm || isSupportSessionAgentView(conversationData, userID);
+    const showsSessionEvents = isCrm || isSessionAgentView;
     const isStickerMessage = (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.StickerMessage;
     const hasContextMenu = contextMenuItems.length > 0;
     const isLatestMine = ((_a = allMessages.find((m) => m.sendID === userID)) === null || _a === void 0 ? void 0 : _a.clientMsgID) ===
@@ -190,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;
@@ -203,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,
@@ -211,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.
@@ -225,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"}