@droppii-org/chat-sdk 0.3.8 → 0.4.0

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;

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,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,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;CACpB;AA4CD,QAAA,MAAM,aAAa,GAAI,qGAUpB,kBAAkB,4CAiEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,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;CACpB;AA6CD,QAAA,MAAM,aAAa,GAAI,qGAUpB,kBAAkB,4CAkEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -8,7 +8,7 @@ const MessageBubbleTail = ({ isMine, isInternal, }) => (_jsx("div", { className:
         ? "text-chat-internal"
         : isMine
             ? "text-chat-bubble-mine"
-            : "text-chat-bubble-neutral"), 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" }) }) }) }));
+            : "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, }) => {
     const showTail = showTip && !isTransparent;
     const [timeRevealed, setTimeRevealed] = useState(false);
@@ -24,7 +24,7 @@ const MessageBubble = ({ isMine, content, senderName, showSenderName, showTip =
             : isMine
                 ? "bg-chat-bubble-mine/10"
                 : "bg-chat-bubble-neutral/10"));
-    return (_jsxs("div", { className: "relative flex items-end", "data-testid": "message-bubble", onClick: () => {
+    return (_jsxs("div", { className: "relative flex items-end", "data-testid": "message-bubble", "data-cp-name": "MessageBubble", onClick: () => {
             if (!showTip && timeLabel)
                 setTimeRevealed((prev) => !prev);
         }, children: [!isMine && showTail && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), _jsx("div", { className: bubbleClass, id: id, children: _jsxs("div", { className: clsx("flex flex-col gap-1", !isTransparent && "px-1"), children: [showSenderName && senderName && (_jsx("span", { className: "text-[12px] font-medium leading-[160%] tracking-[0.12px] text-gray-400", children: senderName })), _jsx("div", { className: "flex flex-col gap-2", 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 }))] }));

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,mDAkDvB,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;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"}

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

@@ -36,6 +36,6 @@ const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
         name: quoteMessage.senderNickname,
         id: quoteMessage.sendID,
     });
-    return (_jsx("div", { className: "flex cursor-pointer items-center overflow-hidden rounded-r-xl bg-white/70", onClick: () => onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(quoteMessage.clientMsgID || ""), children: _jsx(ReplyQuoteContent, { message: quoteMessage, title: title }) }));
+    return (_jsx("div", { className: "flex cursor-pointer items-center overflow-hidden rounded-r-xl bg-white/70", onClick: () => onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(quoteMessage.clientMsgID || ""), "data-cp-name": "QuoteMessageItem", children: _jsx(ReplyQuoteContent, { message: quoteMessage, title: title }) }));
 };
 export default QuoteMessageItem;

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

@@ -1 +1 @@
-{"version":3,"file":"RevokeMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/RevokeMessage.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;CAAG;AACnC,QAAA,MAAM,iBAAiB,GAAI,GAAG,sBAAsB,4CAQnD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"RevokeMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/RevokeMessage.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;CAAG;AACnC,QAAA,MAAM,iBAAiB,GAAI,GAAG,sBAAsB,4CAWnD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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", children: t("revoked") }));
+    return (_jsx("span", { className: "whitespace-pre-wrap text-[16px] leading-[160%] italic text-gray-500", "data-cp-name": "RevokeMessageItem", children: t("revoked") }));
 };
 export default RevokeMessageItem;

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

@@ -13,6 +13,6 @@ const VideoMessageItem = (props) => {
         snapshotHeight: videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotHeight,
     });
     const isSending = message.status === MessageStatus.Sending;
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px] overflow-hidden rounded-xl", style: minStyle, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "block rounded-xl object-cover", style: { width: minStyle.width } }) }) }));
+    return (_jsx(Spin, { spinning: isSending, "data-cp-name": "VideoMessageItem", children: _jsx("div", { className: "relative max-w-[200px] overflow-hidden rounded-xl", style: minStyle, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "block rounded-xl object-cover", style: { width: minStyle.width } }) }) }));
 };
 export default VideoMessageItem;

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;AAmCtC,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;CAC3B;AAyBD,QAAA,MAAM,WAAW,GAAI,qMAalB,gBAAgB,mDA+SlB,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;AAmCtC,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;CAC3B;AA0BD,QAAA,MAAM,WAAW,GAAI,qMAalB,gBAAgB,mDA+SlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -28,7 +28,7 @@ const GROUPING_GAP_MINUTES = 5;
 const isOrderMessage = (message) => { var _a; return ((_a = message === null || message === void 0 ? void 0 : message.customElem) === null || _a === void 0 ? void 0 : _a.extension) === CustomMessageType.Order; };
 const MessageAvatar = ({ avatarUrl, senderNickname, }) => {
     var _a;
-    return (_jsx(Avatar, { size: MESSAGE_AVATAR_SIZE, src: avatarUrl, className: "shrink-0 self-end", children: ((_a = senderNickname === null || senderNickname === void 0 ? void 0 : senderNickname.charAt) === null || _a === void 0 ? void 0 : _a.call(senderNickname, 0)) || "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" }));
 };
 const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, onPinMessage, onUnpinMessage, enableLongPress = false, }) => {
     var _a;
@@ -152,7 +152,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
     const showAvatar = showPeerInfo && !isMine && !nextSameUser;
     const showSenderName = showPeerInfo && !isMine && !prevSameUser;
     const showTip = forceHideTip ? false : !nextSameUser;
-    if (isMessageHiddenForViewer(message, isCrm)) {
+    if (isMessageHiddenForViewer(message, isCrm, conversationData !== null && conversationData !== void 0 ? conversationData : undefined)) {
         return null;
     }
     const messageContainerProps = {
@@ -174,7 +174,7 @@ const MessageItem = ({ message, allMessages, isGroupChat = false, forceHideTip =
     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-primary-400" }) })) : null;
     const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsxs("div", { ref: bubbleWrapperRef, className: "relative min-w-0", children: [bubbleNode, pinnedBadgeNode] }) })) : (_jsxs("div", { className: "relative min-w-0", children: [bubbleNode, pinnedBadgeNode] }));
-    return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
+    return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID, "data-cp-name": "MessageItem" }),
         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 &&
                     showPeerInfo &&

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

@@ -1 +1 @@
-{"version":3,"file":"renderMessageContent.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/renderMessageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAe,MAAM,8BAA8B,CAAC;AAc3F,eAAO,MAAM,mBAAmB,GAAI,SAAS,eAAe,4CA4C3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,SAAS,eAAe,EACxB,sBAAsB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,4CAwBpD,CAAC"}
+{"version":3,"file":"renderMessageContent.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/renderMessageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAe,MAAM,8BAA8B,CAAC;AAe3F,eAAO,MAAM,mBAAmB,GAAI,SAAS,eAAe,4CA8C3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,SAAS,eAAe,EACxB,sBAAsB,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,4CAwBpD,CAAC"}