@droppii-org/chat-sdk 0.3.8 → 0.4.1

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

@@ -1,6 +1,7 @@
 import { LinkNode } from "@lexical/link";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode } from "@lexical/list";
+import { MentionNode } from "./mention/MentionNode";
 export declare const editorTheme: {
     text: {
         bold: string;
@@ -18,7 +19,7 @@ export declare const editorTheme: {
     };
     link: string;
 };
-export declare const editorNodes: (typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
+export declare const editorNodes: (typeof MentionNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
 export declare const editorOnError: (error: Error) => void;
 export declare const DOCUMENT_TYPES: string[];
 //# sourceMappingURL=editorConfig.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"editorConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/editorConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAcvB,CAAC;AAEF,eAAO,MAAM,WAAW,qGAMvB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,SAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,UAI1B,CAAC"}
+{"version":3,"file":"editorConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/editorConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAcvB,CAAC;AAEF,eAAO,MAAM,WAAW,0HAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,SAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,UAI1B,CAAC"}

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

@@ -1,6 +1,7 @@
 import { LinkNode } from "@lexical/link";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode } from "@lexical/list";
+import { MentionNode } from "./mention/MentionNode";
 export const editorTheme = {
     text: {
         bold: "font-bold",
@@ -22,6 +23,7 @@ export const editorNodes = [
     ListItemNode,
     QuoteNode,
     LinkNode,
+    MentionNode,
 ];
 export const editorOnError = (error) => {
     console.error(error);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAEL,wBAAwB,EAEzB,MAAM,cAAc,CAAC;AAStB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAmB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAY/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CA4SpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAGL,wBAAwB,EAEzB,MAAM,cAAc,CAAC;AAStB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAoB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAc/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAuUpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -27,6 +27,7 @@ import useConversationStore from "../../../store/conversation";
 import { useCurrentUserAccountType } from "../../../hooks/user/useCurrentUserAccountType";
 import ComposerTabs from "./ComposerTabs";
 import ComposerEditor from "./ComposerEditor";
+import MentionMenu from "./mention/MentionMenu";
 import SessionClosedModal from "./SessionClosedModal";
 import { useCreateSession, useReopenSession, } from "../../../hooks/session/useReopenOrCreateSession";
 import { emit } from "../../../utils/events";
@@ -49,10 +50,13 @@ export const MessageFooterContext = createContext({
     setActiveCannedIndex: () => { },
     maxActiveCannedIndex: 0,
     setMaxActiveCannedIndex: () => { },
+    isMentionMenuOpen: false,
+    setIsMentionMenuOpen: () => { },
 });
 export const useMessageFooterContext = () => useContext(MessageFooterContext);
 const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const { t } = useTranslation();
+    const { t: tConversationInbox } = useTranslation("conversation-inbox");
     const { sendMergeMessage } = useSendMessage();
     const accountType = useCurrentUserAccountType();
     const [listUploadFiles, setListUploadFiles] = useState([]);
@@ -64,8 +68,10 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const [activeCannedIndex, setActiveCannedIndex] = useState(0);
     const [maxActiveCannedIndex, setMaxActiveCannedIndex] = useState(0);
     const [isInternal, setIsInternal] = useState(false);
+    const [isMentionMenuOpen, setIsMentionMenuOpen] = useState(false);
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const conversationData = useConversationStore((state) => state.conversationData);
+    const isViewOnlyMember = useConversationStore((state) => state.isViewOnlyMember);
     // Internal notes are a CX-support concept (team-only remarks not sent to
     // the customer) — meaningless inside a real member-managed group, where
     // everyone in the thread already is the "team".
@@ -112,7 +118,7 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const placeholderText = isInternal
         ? t("enter_internal_message")
         : t("enter_message");
-    const onSendMessage = useCallback(({ plainText, richText, type, isInternal, }) => {
+    const onSendMessage = useCallback(({ plainText, richText, type, isInternal, mentions, }) => {
         if ((currentSession === null || currentSession === void 0 ? void 0 : currentSession.isClosed) && !isInternal) {
             pendingMessageRef.current = {
                 plainText,
@@ -121,6 +127,7 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
                 isInternal,
                 files: [...listUploadFiles],
                 urlMetadata: resolveUrlMetadata(),
+                mentions,
             };
             openSessionClosedModal();
             return false;
@@ -132,6 +139,7 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             currentSession,
             isInternal,
             urlMetadata: resolveUrlMetadata(),
+            mentions,
         });
         setListUploadFiles([]);
         return true;
@@ -154,6 +162,7 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             currentSession: sessionToUse,
             isInternal: pending.isInternal,
             urlMetadata: pending.urlMetadata,
+            mentions: pending.mentions,
         });
         setListUploadFiles([]);
         pendingMessageRef.current = null;
@@ -206,6 +215,9 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
         }
         closeCanned();
     };
+    if (isViewOnlyMember) {
+        return (_jsx("div", { "data-testid": "message-footer-view-only", className: "flex w-full items-center justify-center border-t border-gray-25 bg-white px-4 py-3 text-center text-sm text-gray-500", children: tConversationInbox("thread_detail.view_only_notice") }));
+    }
     return (_jsxs(MessageFooterContext.Provider, { value: {
             onSendMessage,
             isInternal,
@@ -218,8 +230,10 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             setActiveCannedIndex,
             maxActiveCannedIndex,
             setMaxActiveCannedIndex,
+            isMentionMenuOpen,
+            setIsMentionMenuOpen,
         }, children: [_jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
                             body: "mx-1 !p-0",
-                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
+                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined) && (_jsx(MentionMenu, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID })), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
 };
 export default MessageFooterProvider;

package/dist/components/message/footer/mention/MentionMenu.d.ts

@@ -0,0 +1,6 @@
+interface MentionMenuProps {
+    groupID: string | undefined;
+}
+declare const MentionMenu: ({ groupID }: MentionMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MentionMenu;
+//# sourceMappingURL=MentionMenu.d.ts.map

package/dist/components/message/footer/mention/MentionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/MentionMenu.tsx"],"names":[],"mappings":"AA0BA,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,WAAW,GAAI,aAAa,gBAAgB,mDAqGjD,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { $createTextNode } from "lexical";
+import { $createMentionNode } from "./MentionNode";
+import { useMentionOptions } from "./useMentionOptions";
+import { Avatar } from "antd";
+import { useMessageFooterContext } from "..";
+class MentionTypeaheadOption extends MenuOption {
+    constructor(option) {
+        super(option.userID);
+        this.option = option;
+    }
+}
+const MentionMenu = ({ groupID }) => {
+    const { t } = useTranslation();
+    const [editor] = useLexicalComposerContext();
+    const [query, setQuery] = useState(null);
+    const { setIsMentionMenuOpen } = useMessageFooterContext();
+    const checkForMentionMatch = useBasicTypeaheadTriggerMatch("@", {
+        minLength: 0,
+    });
+    const options = useMentionOptions(groupID, query !== null && query !== void 0 ? query : "");
+    const typeaheadOptions = useMemo(() => options.map((option) => new MentionTypeaheadOption(option)), [options]);
+    const onSelectOption = useCallback((selected, textNodeContainingQuery, closeMenu) => {
+        editor.update(() => {
+            const mentionNode = $createMentionNode(selected.option.userID, selected.option.isAtAll, `@${selected.option.displayName}`);
+            if (textNodeContainingQuery) {
+                textNodeContainingQuery.replace(mentionNode);
+            }
+            // Trailing space detaches the cursor from the segmented mention
+            // node — without it, typing right after would extend/replace it.
+            const spaceNode = $createTextNode(" ");
+            mentionNode.insertAfter(spaceNode);
+            spaceNode.select();
+        });
+        closeMenu();
+    }, [editor]);
+    if (!groupID)
+        return null;
+    return (_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQuery, onSelectOption: onSelectOption, onOpen: () => setIsMentionMenuOpen(true), onClose: () => setIsMentionMenuOpen(false), triggerFn: checkForMentionMatch, options: typeaheadOptions, menuRenderFn: (anchorElementRef, { selectedIndex, setHighlightedIndex, selectOptionAndCleanUp }) => {
+            if (!anchorElementRef.current)
+                return null;
+            return createPortal(_jsxs("div", { "data-cp-name": "MentionMenu", className: "z-50 max-h-[220px] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), typeaheadOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: t("mention.no_result") })) : (typeaheadOptions.map((option, index) => (_jsxs("button", { type: "button", className: `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${index === selectedIndex ? "bg-blue-50" : "hover:bg-gray-50"}`, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectOptionAndCleanUp(option), children: [option.option.isAtAll ? (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500", children: "@" })) : (_jsx(Avatar, { size: 24, src: option.option.faceURL, children: option.option.displayName.charAt(0) })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.option.displayName })] }, option.key))))] }), anchorElementRef.current);
+        } }));
+};
+export default MentionMenu;

package/dist/components/message/footer/mention/MentionNode.d.ts

@@ -0,0 +1,20 @@
+import { TextNode, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, type Spread } from "lexical";
+export type SerializedMentionNode = Spread<{
+    userID: string;
+    isAtAll: boolean;
+}, SerializedTextNode>;
+export declare class MentionNode extends TextNode {
+    __userID: string;
+    __isAtAll: boolean;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    constructor(userID: string, isAtAll: boolean, text: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+    exportJSON(): SerializedMentionNode;
+    canInsertTextBefore(): boolean;
+    isTextEntity(): true;
+}
+export declare function $createMentionNode(userID: string, isAtAll: boolean, displayText: string): MentionNode;
+export declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;
+//# sourceMappingURL=MentionNode.d.ts.map

package/dist/components/message/footer/mention/MentionNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionNode.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/MentionNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,kBAAkB,EACvB,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACxC;IACE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,EACD,kBAAkB,CACnB,CAAC;AAEF,qBAAa,WAAY,SAAQ,QAAQ;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW;gBAU1C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,EACZ,GAAG,CAAC,EAAE,OAAO;IAOf,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAM5C,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,WAAW;IAQrE,UAAU,IAAI,qBAAqB;IASnC,mBAAmB,IAAI,OAAO;IAI9B,YAAY,IAAI,IAAI;CAGrB;AAED,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,MAAM,GAClB,WAAW,CAIb;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,WAAW,CAErB"}

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

@@ -0,0 +1,39 @@
+import { $applyNodeReplacement, TextNode, } from "lexical";
+export class MentionNode extends TextNode {
+    static getType() {
+        return "mention";
+    }
+    static clone(node) {
+        return new MentionNode(node.__userID, node.__isAtAll, node.__text, node.__key);
+    }
+    constructor(userID, isAtAll, text, key) {
+        super(text, key);
+        this.__userID = userID;
+        this.__isAtAll = isAtAll;
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        dom.className = "text-blue-500 font-medium";
+        return dom;
+    }
+    static importJSON(serializedNode) {
+        return $createMentionNode(serializedNode.userID, serializedNode.isAtAll, serializedNode.text).updateFromJSON(serializedNode);
+    }
+    exportJSON() {
+        return Object.assign(Object.assign({}, super.exportJSON()), { userID: this.__userID, isAtAll: this.__isAtAll, type: "mention" });
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    isTextEntity() {
+        return true;
+    }
+}
+export function $createMentionNode(userID, isAtAll, displayText) {
+    const node = new MentionNode(userID, isAtAll, displayText);
+    node.setMode("segmented").toggleDirectionless();
+    return $applyNodeReplacement(node);
+}
+export function $isMentionNode(node) {
+    return node instanceof MentionNode;
+}

package/dist/components/message/footer/mention/extractMentions.d.ts

@@ -0,0 +1,6 @@
+import { type LexicalEditor } from "lexical";
+import type { MentionSendPayload } from "../../../../types/chat";
+declare const ALL_MEMBERS_USER_ID = "__all__";
+export declare const extractMentions: (editor: LexicalEditor) => MentionSendPayload;
+export { ALL_MEMBERS_USER_ID };
+//# sourceMappingURL=extractMentions.d.ts.map

package/dist/components/message/footer/mention/extractMentions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractMentions.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/extractMentions.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,aAAa,EAEnB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD,QAAA,MAAM,mBAAmB,YAAY,CAAC;AA2DtC,eAAO,MAAM,eAAe,GAAI,QAAQ,aAAa,KAAG,kBAavD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

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

@@ -0,0 +1,66 @@
+import { $getRoot, $isElementNode, } from "lexical";
+import { $isMentionNode } from "./MentionNode";
+const ALL_MEMBERS_USER_ID = "__all__";
+// Single pass, mirroring ElementNode.getTextContent()'s own join logic
+// (child text content, plus a double line break between non-inline block
+// children) so offsets always match the plainText Lexical actually
+// produces. One pass — not a separate node-collection step — so the
+// offsets and the atUserIDList/atUsersInfo they describe can never drift
+// out of sync with each other.
+const walk = (node, state) => {
+    if ($isMentionNode(node)) {
+        const text = node.getTextContent();
+        if (node.__isAtAll) {
+            state.payload.isAtAll = true;
+            state.payload.mentionOffsets.push({
+                userID: ALL_MEMBERS_USER_ID,
+                offset: state.offset,
+                length: text.length,
+            });
+        }
+        else {
+            state.payload.atUserIDList.push(node.__userID);
+            state.payload.atUsersInfo.push({
+                atUserID: node.__userID,
+                groupNickname: text.replace(/^@/, ""),
+            });
+            state.payload.mentionOffsets.push({
+                userID: node.__userID,
+                offset: state.offset,
+                length: text.length,
+            });
+        }
+        state.offset += text.length;
+        return;
+    }
+    if (!$isElementNode(node)) {
+        state.offset += node.getTextContent().length;
+        return;
+    }
+    const children = node.getChildren();
+    children.forEach((child, index) => {
+        walk(child, state);
+        const isLastChild = index === children.length - 1;
+        if ($isElementNode(child) && !isLastChild && !child.isInline()) {
+            state.offset += 2; // DOUBLE_LINE_BREAK
+        }
+    });
+};
+// Reads MentionNode instances straight from the editor state at send time —
+// only list-selected mentions become MentionNode, so free-typed "@text"
+// stays plain TextNode and is naturally excluded (BR-002). Offsets are
+// captured here because this is the only point with real node identity —
+// once sent, AtTextElem collapses everything into a flat string.
+export const extractMentions = (editor) => {
+    const payload = {
+        atUserIDList: [],
+        atUsersInfo: [],
+        isAtAll: false,
+        mentionOffsets: [],
+    };
+    editor.getEditorState().read(() => {
+        walk($getRoot(), { offset: 0, payload });
+    });
+    return payload;
+};
+export { ALL_MEMBERS_USER_ID };

package/dist/components/message/footer/mention/useMentionOptions.d.ts

@@ -0,0 +1,8 @@
+export interface MentionOption {
+    userID: string;
+    displayName: string;
+    faceURL?: string;
+    isAtAll: boolean;
+}
+export declare const useMentionOptions: (groupID: string | undefined, query: string) => MentionOption[];
+//# sourceMappingURL=useMentionOptions.d.ts.map

package/dist/components/message/footer/mention/useMentionOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMentionOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/useMentionOptions.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAaD,eAAO,MAAM,iBAAiB,GAC5B,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO,MAAM,KACZ,aAAa,EAuCf,CAAC"}

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

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useGroupMembers } from "../../../../hooks/group/useGroupMembers";
+const ALL_MEMBERS_USER_ID = "__all__";
+// Prefix matches rank above mid-string matches, then alphabetical — matches
+// the "closest match first" ranking spec'd for this feature (not just a
+// plain filter). No keyword: falls back to plain A-Z (AC-Open default).
+const matchRank = (displayName, keyword) => {
+    const lower = displayName.toLowerCase();
+    if (lower.startsWith(keyword))
+        return 0;
+    return 1;
+};
+export const useMentionOptions = (groupID, query) => {
+    const { t } = useTranslation();
+    const { members } = useGroupMembers(groupID);
+    return useMemo(() => {
+        const keyword = query.trim().toLowerCase();
+        // Self-tagging is a valid, ordinary mention target per spec — the
+        // sender selecting their own name is processed like any other tag.
+        const memberOptions = members
+            .map((member) => ({
+            userID: member.userID,
+            displayName: member.nickname || member.userID,
+            faceURL: member.faceURL,
+            isAtAll: false,
+        }))
+            .filter((option) => keyword ? option.displayName.toLowerCase().includes(keyword) : true)
+            .sort((a, b) => {
+            if (!keyword)
+                return a.displayName.localeCompare(b.displayName);
+            const rankDiff = matchRank(a.displayName, keyword) - matchRank(b.displayName, keyword);
+            return rankDiff !== 0
+                ? rankDiff
+                : a.displayName.localeCompare(b.displayName);
+        });
+        const allOption = {
+            userID: ALL_MEMBERS_USER_ID,
+            displayName: t("mention.all_members"),
+            isAtAll: true,
+        };
+        const matchesAll = !keyword || allOption.displayName.toLowerCase().includes(keyword);
+        return matchesAll ? [allOption, ...memberOptions] : memberOptions;
+    }, [members, query, t]);
+};

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

@@ -0,0 +1,16 @@
+import { MessageItem } from "@droppii-org/wasm-client-sdk";
+import type { MentionOffset } from "../../../types/chat";
+interface AtTextMessageItemProps {
+    message: MessageItem;
+}
+export declare const splitByMentions: (text: string, mentionLabels: string[]) => Array<{
+    text: string;
+    isMention: boolean;
+}>;
+export declare const splitByOffsets: (text: string, offsets: MentionOffset[]) => Array<{
+    text: string;
+    isMention: boolean;
+}>;
+declare const AtTextMessageItem: (props: AtTextMessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AtTextMessageItem;
+//# sourceMappingURL=AtTextMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtTextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/AtTextMessage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAM3D,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,cAAc,CAAC;AAErE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;CACtB;AAOD,eAAO,MAAM,eAAe,GAC1B,MAAM,MAAM,EACZ,eAAe,MAAM,EAAE,KACtB,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmC5C,CAAC;AAKF,eAAO,MAAM,cAAc,GACzB,MAAM,MAAM,EACZ,SAAS,aAAa,EAAE,KACvB,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAmB5C,CAAC;AAaF,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,mDAyDvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import clsx from "clsx";
+import { extractLinkUrls } from "../../../utils/link";
+import LinkText from "./LinkText";
+import { MESSAGE_TEXT_CLASS } from "./textStyle";
+import { useTranslation } from "react-i18next";
+import { AT_ALL_TAG } from "../../../hooks/message/useSendMessage";
+// AtTextElem has no offset/index, so mentions are recovered by matching
+// "@displayName" text: longest-label-first (avoids "@Anna" being cut short
+// by "@An"), each label consumed only as many times as it's really mentioned.
+// Residual gap (accepted, tracked as follow-up): coincidental "@name" text
+// before the real mention can still be mis-highlighted — needs SDK offsets.
+export const splitByMentions = (text, mentionLabels) => {
+    var _a, _b;
+    if (mentionLabels.length === 0)
+        return [{ text, isMention: false }];
+    const remainingCount = new Map();
+    for (const label of mentionLabels) {
+        remainingCount.set(label, ((_a = remainingCount.get(label)) !== null && _a !== void 0 ? _a : 0) + 1);
+    }
+    const sortedLabels = [...remainingCount.keys()].sort((a, b) => b.length - a.length);
+    const segments = [];
+    let cursor = 0;
+    while (cursor < text.length) {
+        const match = sortedLabels
+            .filter((label) => { var _a; return ((_a = remainingCount.get(label)) !== null && _a !== void 0 ? _a : 0) > 0; })
+            .map((label) => ({ label, index: text.indexOf(label, cursor) }))
+            .filter(({ index }) => index !== -1)
+            .sort((a, b) => a.index - b.index || b.label.length - a.label.length)[0];
+        if (!match) {
+            segments.push({ text: text.slice(cursor), isMention: false });
+            break;
+        }
+        if (match.index > cursor) {
+            segments.push({ text: text.slice(cursor, match.index), isMention: false });
+        }
+        segments.push({ text: match.label, isMention: true });
+        remainingCount.set(match.label, ((_b = remainingCount.get(match.label)) !== null && _b !== void 0 ? _b : 0) - 1);
+        cursor = match.index + match.label.length;
+    }
+    return segments;
+};
+// Exact split using real offsets recorded at compose time (`ex.mentions`) —
+// no guessing, so it's immune to the substring/coincidental-text gap that
+// splitByMentions has to work around for messages sent before this existed.
+export const splitByOffsets = (text, offsets) => {
+    const segments = [];
+    const sorted = [...offsets].sort((a, b) => a.offset - b.offset);
+    let cursor = 0;
+    for (const { offset, length } of sorted) {
+        if (offset < cursor || offset + length > text.length)
+            continue; // stale/corrupt ex — skip rather than misrender
+        if (offset > cursor) {
+            segments.push({ text: text.slice(cursor, offset), isMention: false });
+        }
+        segments.push({ text: text.slice(offset, offset + length), isMention: true });
+        cursor = offset + length;
+    }
+    if (cursor < text.length) {
+        segments.push({ text: text.slice(cursor), isMention: false });
+    }
+    return segments;
+};
+const parseMentionOffsets = (ex) => {
+    var _a;
+    if (!ex)
+        return null;
+    try {
+        const parsed = JSON.parse(ex);
+        const offsets = (_a = parsed === null || parsed === void 0 ? void 0 : parsed.mentions) === null || _a === void 0 ? void 0 : _a.offsets;
+        return offsets && offsets.length > 0 ? offsets : null;
+    }
+    catch (_b) {
+        return null;
+    }
+};
+const AtTextMessageItem = (props) => {
+    var _a, _b, _c;
+    const { message } = props;
+    const { t } = useTranslation();
+    const atTextElem = message === null || message === void 0 ? void 0 : message.atTextElem;
+    if (!(atTextElem === null || atTextElem === void 0 ? void 0 : atTextElem.text))
+        return null;
+    const isAtAll = (_a = atTextElem.atUserList) === null || _a === void 0 ? void 0 : _a.some((userID) => userID === AT_ALL_TAG);
+    const memberMentionLabels = (_c = (_b = atTextElem.atUsersInfo) === null || _b === void 0 ? void 0 : _b.map((info) => `@${info.groupNickname}`)) !== null && _c !== void 0 ? _c : [];
+    const urls = extractLinkUrls(atTextElem.text);
+    if (memberMentionLabels.length === 0 &&
+        !isAtAll &&
+        urls.length > 0) {
+        return _jsx(LinkText, { text: atTextElem.text });
+    }
+    const mentionOffsets = parseMentionOffsets(message === null || message === void 0 ? void 0 : message.ex);
+    let segments;
+    if (mentionOffsets) {
+        segments = splitByOffsets(atTextElem.text, mentionOffsets);
+    }
+    else {
+        // Fallback for messages sent before offsets existed (no `ex.mentions`).
+        // "Tất cả" here is matched against the viewer's live translation, not
+        // the sender's persisted string — safe only while a single locale exists.
+        const allMembersLabel = `@${t("mention.all_members")}`;
+        const mentionLabels = [
+            ...memberMentionLabels,
+            ...(isAtAll ? [allMembersLabel] : []),
+        ];
+        segments = splitByMentions(atTextElem.text, mentionLabels);
+    }
+    return (_jsx("p", { className: clsx("min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: segments.map((segment, index) => (_jsx(Fragment, { children: segment.isMention ? (_jsx("span", { className: "font-medium text-blue-500", children: segment.text })) : (segment.text) }, index))) }));
+};
+export default AtTextMessageItem;

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

@@ -22,6 +22,6 @@ const FileMessageItem = (props) => {
     const handleDownload = () => {
         downloadFileFromUrl(sourceUrl, fileName);
     };
-    return (_jsx(Spin, { spinning: isSending, children: _jsxs("div", { className: "flex h-[51px] w-[292px] items-center gap-3 rounded-xl border border-gray-200/20 bg-white px-3 py-1", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 w-[168px] flex-col justify-center", children: [_jsx("span", { className: "truncate text-[14px] font-medium leading-[160%] text-gray-900", children: shortenFileName(fileName) }), _jsx("span", { className: "truncate text-[13px] leading-[160%] text-gray-600", children: renderFileSize(fileSize) })] }), _jsxs("div", { className: "flex w-[52px] shrink-0 items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleView, disabled: !hasUrl, "aria-label": "Xem file", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "eye-o", size: 20, className: "text-gray-900" }) }), _jsx("button", { type: "button", onClick: handleDownload, disabled: !hasUrl, "aria-label": "T\u1EA3i xu\u1ED1ng", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "download-o", size: 20, className: "text-gray-900" }) })] })] }) }));
+    return (_jsx(Spin, { spinning: isSending, "data-cp-name": "FileMessageItem", children: _jsxs("div", { className: "flex h-[51px] w-[292px] items-center gap-3 rounded-xl border border-gray-200/20 bg-white px-3 py-1", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 w-[168px] flex-col justify-center", children: [_jsx("span", { className: "truncate text-[14px] font-medium leading-[160%] text-gray-900", children: shortenFileName(fileName) }), _jsx("span", { className: "truncate text-[13px] leading-[160%] text-gray-600", children: renderFileSize(fileSize) })] }), _jsxs("div", { className: "flex w-[52px] shrink-0 items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleView, disabled: !hasUrl, "aria-label": "Xem file", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "eye-o", size: 20, className: "text-gray-900" }) }), _jsx("button", { type: "button", onClick: handleDownload, disabled: !hasUrl, "aria-label": "T\u1EA3i xu\u1ED1ng", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "download-o", size: 20, className: "text-gray-900" }) })] })] }) }));
 };
 export default FileMessageItem;

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

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

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

@@ -5,9 +5,9 @@ import { getGroupNotificationText } from "../../../utils/messageLog";
 const GroupNotificationMessageItem = ({ message }) => {
     var _a;
     const { t } = useTranslation();
-    const text = getGroupNotificationText(message.contentType, (_a = message.notificationElem) === null || _a === void 0 ? void 0 : _a.detail, t);
+    const text = getGroupNotificationText(message.contentType, (_a = message.notificationElem) === null || _a === void 0 ? void 0 : _a.detail, t, message.senderNickname);
     if (!text)
         return null;
-    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 }) }));
+    return (_jsx("div", { className: "flex justify-center", "data-cp-name": "GroupNotificationMessageItem", 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 GroupNotificationMessageItem;

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

@@ -17,7 +17,7 @@ const ImageMessageItem = (props) => {
         snapshotHeight: (_k = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _k === void 0 ? void 0 : _k.height,
     });
     const isSending = message.status === MessageStatus.Sending;
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative flex max-w-[200px] overflow-hidden rounded-xl", style: minStyle, children: _jsx(Image, { src: sourceUrl, width: minStyle.width, className: "block cursor-pointer rounded-xl object-cover", preview: {
+    return (_jsx(Spin, { spinning: isSending, "data-cp-name": "ImageMessageItem", children: _jsx("div", { className: "relative flex max-w-[200px] overflow-hidden rounded-xl", style: minStyle, children: _jsx(Image, { src: sourceUrl, width: minStyle.width, className: "block cursor-pointer rounded-xl object-cover", preview: {
                     src: bigUrl,
                     toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
                 }, placeholder: _jsx("div", { className: "flex items-center justify-center rounded-xl bg-black/10", style: minStyle, children: _jsx(Spin, {}) }) }) }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/LinkCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,QAAQ,GAAI,mBAAmB,aAAa,mDA6CjD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/LinkCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,QAAQ,GAAI,mBAAmB,aAAa,mDA8CjD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -14,6 +14,6 @@ const LinkCard = ({ metadata, url }) => {
             return;
         openLink(url, t);
     };
-    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "link-message-card", className: "flex w-full max-w-[292px] flex-col overflow-hidden rounded-[12px] border border-gray-900/10 bg-white text-left", children: [image && (_jsx("div", { className: "aspect-[16/9] w-full overflow-hidden", children: _jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex flex-col px-3 py-2", children: [title && (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: title })), url && (_jsx("p", { className: "truncate text-[12px] font-medium leading-[1.6] tracking-[0.12px] text-primary-400", children: getHostLabel(url) })), description && (_jsx("p", { className: "line-clamp-2 text-[12px] leading-[1.6] text-gray-600", children: description }))] })] }));
+    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "link-message-card", "data-cp-name": "LinkCard", className: "flex w-full max-w-[292px] flex-col overflow-hidden rounded-[12px] border border-gray-900/10 bg-white text-left", children: [image && (_jsx("div", { className: "aspect-[16/9] w-full overflow-hidden", children: _jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex flex-col px-3 py-2", children: [title && (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: title })), url && (_jsx("p", { className: "truncate text-[12px] font-medium leading-[1.6] tracking-[0.12px] text-primary-400", children: getHostLabel(url) })), description && (_jsx("p", { className: "line-clamp-2 text-[12px] leading-[1.6] text-gray-600", children: description }))] })] }));
 };
 export default LinkCard;

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

@@ -1 +1 @@
-{"version":3,"file":"LinkText.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/LinkText.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,QAAQ,GAAI,UAAU,aAAa,4CA2BxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LinkText.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/LinkText.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,QAAQ,GAAI,UAAU,aAAa,4CA4BxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -8,6 +8,6 @@ import { MESSAGE_TEXT_CLASS } from "./textStyle";
 const LinkText = ({ text }) => {
     const { t } = useTranslation("conversation-inbox");
     const segments = parseTextWithLinks(text);
-    return (_jsx("span", { className: clsx("min-w-0 whitespace-pre-wrap text-left [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: segments.map((segment, index) => segment.type === "link" ? (_jsx("button", { type: "button", onClick: () => openLink(segment.url, t), className: "inline text-left font-medium text-primary-400 underline-offset-2 hover:underline", children: segment.value }, `${segment.url}-${index}`)) : (_jsx("span", { children: segment.value }, `text-${index}`))) }));
+    return (_jsx("span", { className: clsx("min-w-0 whitespace-pre-wrap text-left [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), "data-cp-name": "LinkText", children: segments.map((segment, index) => segment.type === "link" ? (_jsx("button", { type: "button", onClick: () => openLink(segment.url, t), className: "inline text-left font-medium text-primary-400 underline-offset-2 hover:underline", children: segment.value }, `${segment.url}-${index}`)) : (_jsx("span", { children: segment.value }, `text-${index}`))) }));
 };
 export default LinkText;

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

@@ -16,7 +16,7 @@ const MergeImageMessageItem = (props) => {
     const subMessages = (_b = (_a = message.mergeElem) === null || _a === void 0 ? void 0 : _a.multiMessage) !== null && _b !== void 0 ? _b : [];
     const isSending = message.status === MessageStatus.Sending;
     const cols = Math.min(subMessages.length, 3);
-    return (_jsx("div", { className: "-mx-1", children: _jsx(Spin, { spinning: isSending, children: _jsx(Image.PreviewGroup, { preview: {
+    return (_jsx("div", { className: "-mx-1", "data-cp-name": "MergeImageMessageItem", children: _jsx(Spin, { spinning: isSending, children: _jsx(Image.PreviewGroup, { preview: {
                     toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
                 }, children: _jsx("div", { className: clsx("grid gap-1", MERGE_IMAGE_GRID_COLS_CLASS[cols]), children: subMessages.map((item) => {
                         var _a, _b, _c, _d, _e, _f;