@droppii-org/chat-sdk 0.3.7 → 0.4.0

package/dist/components/canned-response/CannedResponseBody.js

@@ -91,7 +91,7 @@ const CannedResponseBody = (props) => {
     useEffect(() => {
         setMaxActiveCannedIndex((cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) - 1 > 0 ? (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) - 1 : 0);
     }, [cannedResponses, setMaxActiveCannedIndex]);
-    return (_jsxs("div", { className: "flex flex-1 flex-row h-[400px]", children: [_jsxs("div", { className: "w-[170px] p-2 border-r border-gray-200", children: [_jsx(Segmented, { options: options, block: true, size: "small", value: scope, onChange: setScope }), _jsx("div", { className: "overflow-y-auto h-full", children: scope === CannedResponseVisibleScope.TEAM && (_jsx("div", { className: "mt-1 flex flex-col", children: (_a = myTeams === null || myTeams === void 0 ? void 0 : myTeams.map) === null || _a === void 0 ? void 0 : _a.call(myTeams, (team, index) => renderTeamItem(team, index)) })) })] }), _jsxs("div", { id: "scrollableCannedDiv", className: "flex flex-col flex-1 h-full overflow-y-auto", children: [!!cannedQuery && !search && (_jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: _jsxs("span", { className: "text-sm text-gray-500", children: [t("canned_response_quick_search_placeholder"), _jsx("span", { className: "text-blue-600", children: ` #${cannedQuery}` })] }) })), _jsx(InfiniteScroll, { dataLength: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableCannedDiv", children: !isArray(cannedResponses) || (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_canned_response") }) })) : ((_b = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.map) === null || _b === void 0 ? void 0 : _b.call(cannedResponses, (canned, index) => {
+    return (_jsxs("div", { className: "flex flex-1 flex-row h-[400px]", "data-cp-name": "CannedResponseBody", children: [_jsxs("div", { className: "w-[170px] p-2 border-r border-gray-200", children: [_jsx(Segmented, { options: options, block: true, size: "small", value: scope, onChange: setScope }), _jsx("div", { className: "overflow-y-auto h-full", children: scope === CannedResponseVisibleScope.TEAM && (_jsx("div", { className: "mt-1 flex flex-col", children: (_a = myTeams === null || myTeams === void 0 ? void 0 : myTeams.map) === null || _a === void 0 ? void 0 : _a.call(myTeams, (team, index) => renderTeamItem(team, index)) })) })] }), _jsxs("div", { id: "scrollableCannedDiv", className: "flex flex-col flex-1 h-full overflow-y-auto", children: [!!cannedQuery && !search && (_jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: _jsxs("span", { className: "text-sm text-gray-500", children: [t("canned_response_quick_search_placeholder"), _jsx("span", { className: "text-blue-600", children: ` #${cannedQuery}` })] }) })), _jsx(InfiniteScroll, { dataLength: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableCannedDiv", children: !isArray(cannedResponses) || (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_canned_response") }) })) : ((_b = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.map) === null || _b === void 0 ? void 0 : _b.call(cannedResponses, (canned, index) => {
                             var _a, _b;
                             const isActive = index === validActiveCannedIndex;
                             const htmlContent = (canned === null || canned === void 0 ? void 0 : canned.content) || "";

package/dist/components/canned-response/CannedResponseFooter.js

@@ -3,6 +3,6 @@ import { useTranslation } from "react-i18next";
 import { Icon } from "../../components/icon";
 const CannedResponseFooter = ({ openCreateCannedModal, }) => {
     const { t } = useTranslation();
-    return (_jsx("div", { className: "flex items-center justify-end border-t border-gray-200 p-2", children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1", onClick: openCreateCannedModal, children: [_jsx(Icon, { icon: "plus-circle-o", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: t("add_canned_response") })] }) }));
+    return (_jsx("div", { className: "flex items-center justify-end border-t border-gray-200 p-2", "data-cp-name": "CannedResponseFooter", children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1", onClick: openCreateCannedModal, children: [_jsx(Icon, { icon: "plus-circle-o", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: t("add_canned_response") })] }) }));
 };
 export default CannedResponseFooter;

package/dist/components/canned-response/CannedResponseHeader.js

@@ -6,6 +6,6 @@ import { Icon } from "../../components/icon";
 const CannedResponseHeader = (props) => {
     const { onClose, search, setSearch } = props;
     const { t } = useTranslation();
-    return (_jsxs("div", { className: "px-3 py-2 flex flex-row items-center gap-2 border-b border-gray-200", children: [_jsxs("div", { className: "flex flex-row items-center gap-2", children: [_jsx(CannedResponseIcon, { size: 20, className: "text-blue-500" }), _jsx("span", { className: "text-base font-medium", children: t("canned_responses") })] }), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end gap-2", children: [_jsx(Input, { size: "large", placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 20, className: "text-gray-500" }), style: { width: 260 }, className: "text-sm", value: search, onChange: (e) => setSearch === null || setSearch === void 0 ? void 0 : setSearch(e.target.value) }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 16 }) })] })] }));
+    return (_jsxs("div", { className: "px-3 py-2 flex flex-row items-center gap-2 border-b border-gray-200", "data-cp-name": "CannedResponseHeader", children: [_jsxs("div", { className: "flex flex-row items-center gap-2", children: [_jsx(CannedResponseIcon, { size: 20, className: "text-blue-500" }), _jsx("span", { className: "text-base font-medium", children: t("canned_responses") })] }), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end gap-2", children: [_jsx(Input, { size: "large", placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 20, className: "text-gray-500" }), style: { width: 260 }, className: "text-sm", value: search, onChange: (e) => setSearch === null || setSearch === void 0 ? void 0 : setSearch(e.target.value) }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 16 }) })] })] }));
 };
 export default CannedResponseHeader;

package/dist/components/canned-response/index.js

@@ -29,6 +29,6 @@ const CannedResponse = ({ onClose, openCreateCannedModal, cannedQuery = "", }) =
             root.selectEnd();
         });
     }, [editor]);
-    return (_jsxs("div", { className: "w-[600px]", children: [_jsx(CannedResponseHeader, { onClose: onClose, search: search, setSearch: setSearch }), _jsx(CannedResponseBody, { search: debouncedSearch, onSelectCannedResponse: onSelectCannedResponse, cannedQuery: cannedQuery }), _jsx(CannedResponseFooter, { openCreateCannedModal: openCreateCannedModal })] }));
+    return (_jsxs("div", { className: "w-[600px]", "data-cp-name": "CannedResponse", children: [_jsx(CannedResponseHeader, { onClose: onClose, search: search, setSearch: setSearch }), _jsx(CannedResponseBody, { search: debouncedSearch, onSelectCannedResponse: onSelectCannedResponse, cannedQuery: cannedQuery }), _jsx(CannedResponseFooter, { openCreateCannedModal: openCreateCannedModal })] }));
 };
 export default CannedResponse;

package/dist/components/canned-response/team/TeamItem.js

@@ -15,7 +15,7 @@ const TeamItem = ({ team, onSelectCategory, selectedTeamId, selectedCategoryId,
         }
         toggle();
     }, [toggle, isOpen, onSelectCategory, team === null || team === void 0 ? void 0 : team.teamId, selectedTeamId]);
-    return (_jsxs("div", { className: "border-b border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between py-2 cursor-pointer", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-medium truncate flex-1", children: (team === null || team === void 0 ? void 0 : team.name) || "" }), _jsx(Icon, { icon: isOpen ? "angle-up-b" : "angle-down-b", size: 16, className: clsx(!isOpen && "text-gray-500") })] }), isOpen && (_jsxs("div", { className: "mb-2", children: [_jsx("div", { className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", selectedTeamId &&
+    return (_jsxs("div", { className: "border-b border-gray-200", "data-cp-name": "TeamItem", children: [_jsxs("div", { className: "flex items-center justify-between py-2 cursor-pointer", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-medium truncate flex-1", children: (team === null || team === void 0 ? void 0 : team.name) || "" }), _jsx(Icon, { icon: isOpen ? "angle-up-b" : "angle-down-b", size: 16, className: clsx(!isOpen && "text-gray-500") })] }), isOpen && (_jsxs("div", { className: "mb-2", children: [_jsx("div", { className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", selectedTeamId &&
                             selectedTeamId === (team === null || team === void 0 ? void 0 : team.teamId) &&
                             !selectedCategoryId &&
                             "bg-gray-100"), onClick: () => onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, undefined), children: _jsx("span", { className: clsx("text-sm truncate", selectedTeamId === (team === null || team === void 0 ? void 0 : team.teamId) && !selectedCategoryId

package/dist/components/common/ConfirmModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/common/ConfirmModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,uGAWnB,iBAAiB,4CAiCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/common/ConfirmModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,uGAWnB,iBAAiB,4CAkCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/common/ConfirmModal.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal } from "antd";
 const ConfirmModal = ({ open, title, okText, cancelText, onOk, onCancel, okType = "primary", confirmLoading, okButtonProps, children, }) => {
-    return (_jsx(Modal, { centered: true, open: open, onOk: onOk, onCancel: onCancel, okText: okText, cancelText: cancelText, confirmLoading: confirmLoading, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: okType === "danger"
+    return (_jsx(Modal, { "data-cp-name": "ConfirmModal", centered: true, open: open, onOk: onOk, onCancel: onCancel, okText: okText, cancelText: cancelText, confirmLoading: confirmLoading, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: okType === "danger"
                 ? "!h-10 !rounded-lg !border-danger-400 !bg-danger-400 !text-white hover:!border-danger-300 hover:!bg-danger-300"
                 : "!h-10 !rounded-lg !border-primary-400 !bg-primary-400 !text-white hover:!border-primary-300 hover:!bg-primary-300" }), cancelButtonProps: {
             className: "!h-10 !rounded-lg !border-gray-25 !bg-gray-25 !text-gray-900",

package/dist/components/common/InfoModal.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface InfoModalProps {
+    open: boolean;
+    title: ReactNode;
+    okText: ReactNode;
+    onOk: () => void;
+    children: ReactNode;
+}
+declare const InfoModal: ({ open, title, okText, onOk, children }: InfoModalProps) => import("react/jsx-runtime").JSX.Element;
+export default InfoModal;
+//# sourceMappingURL=InfoModal.d.ts.map

package/dist/components/common/InfoModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoModal.d.ts","sourceRoot":"","sources":["../../../src/components/common/InfoModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,yCAAyC,cAAc,4CA2BzE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/common/InfoModal.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "antd";
+const InfoModal = ({ open, title, okText, onOk, children }) => {
+    return (_jsx(Modal, { "data-cp-name": "InfoModal", centered: true, open: open, onOk: onOk, onCancel: onOk, okText: okText, cancelButtonProps: { style: { display: "none" } }, okButtonProps: {
+            className: "!h-10 !w-full !rounded-lg !border-primary-400 !bg-primary-400 !text-white hover:!border-primary-300 hover:!bg-primary-300",
+        }, styles: {
+            header: { textAlign: "center", marginBottom: 0 },
+            footer: { marginTop: 16 },
+            body: { paddingTop: 4 },
+        }, classNames: { footer: "border-t border-gray-25 pt-4" }, title: _jsx("span", { className: "text-[18px] font-bold text-gray-900", children: title }), getContainer: false, forceRender: true, children: children }));
+};
+export default InfoModal;

package/dist/components/compose/ComposeNewMessageModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAeA,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAwI7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAeA,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAuI7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/compose/ComposeNewMessageModal.js

@@ -3,7 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDebounce } from "ahooks";
 import { Avatar, Empty, Input, Modal, Spin } from "antd";
 import { useState } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import { SessionType } from "@droppii-org/wasm-client-sdk";
 import { Icon } from "../../components/icon";
@@ -11,6 +10,7 @@ import { useEligibleAccounts } from "../../hooks/group/useEligibleAccounts";
 import { DChatSDK } from "../../constants/sdk";
 import useConversationStore from "../../store/conversation";
 import CreateGroupForm from "../../components/group/CreateGroupForm";
+import { useChatContext } from "../../context/ChatContext";
 const ComposeNewMessageModal = ({ open, onClose, }) => {
     const { t } = useTranslation("conversation-inbox");
     const [step, setStep] = useState("compose");
@@ -18,9 +18,7 @@ const ComposeNewMessageModal = ({ open, onClose, }) => {
     const [openingUserID, setOpeningUserID] = useState(null);
     const debouncedSearch = useDebounce(search, { wait: 300 });
     const { accounts, isLoading } = useEligibleAccounts(debouncedSearch, open);
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
+    const { onNavigate } = useChatContext();
     const setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const handleClose = () => {
@@ -44,18 +42,18 @@ const ComposeNewMessageModal = ({ open, onClose, }) => {
             });
             setConversationData(conversation);
             setSelectedConversationId(conversation.conversationID);
-            const newSearchParams = new URLSearchParams(searchParams);
+            const newSearchParams = new URLSearchParams(window.location.search);
             newSearchParams.set("threadId", conversation.conversationID);
             newSearchParams.delete("userId");
             newSearchParams.delete("groupId");
             newSearchParams.delete("botId");
-            router.push(`${pathname}?${newSearchParams.toString()}`);
+            onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
             handleClose();
         }
         finally {
             setOpeningUserID(null);
         }
     };
-    return (_jsx(Modal, { title: step === "create-group" ? t("create_group.title") : t("compose.title"), open: open, onCancel: handleClose, afterClose: handleAfterClose, footer: null, centered: true, forceRender: true, width: step === "create-group" ? 720 : undefined, getContainer: false, children: step === "compose" ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Input, { size: "large", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }) }), _jsxs("button", { type: "button", className: "flex items-center gap-3 rounded-xl bg-primary-50 px-4 py-3.5 text-left transition-colors hover:bg-primary-100", onClick: () => setStep("create-group"), children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white", children: _jsx(Icon, { icon: "user-three-b", size: 22, className: "text-primary-400" }) }), _jsx("span", { className: "flex-1 text-base font-semibold text-gray-900", children: t("compose.create_group") }), _jsx(Icon, { icon: "angle-right-o", size: 18, className: "text-gray-400" })] }), !debouncedSearch && (_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: "shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("compose.recent_suggestions") }), _jsx("span", { className: "h-px flex-1 bg-gray-100" })] })), _jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("compose.no_member_found") })) : (accounts.map((account) => (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 border-b border-gray-50 px-1 py-3 transition-colors last:border-b-0 hover:bg-[#f5f5f5]", onClick: () => handleOpenDirectMessage(account), children: [_jsx(Avatar, { src: account.avatar, size: 44, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }, account.userID)))) })] })) : (_jsx(CreateGroupForm, { onDone: handleClose })) }));
+    return (_jsx(Modal, { "data-cp-name": "ComposeNewMessageModal", title: step === "create-group" ? t("create_group.title") : t("compose.title"), open: open, onCancel: handleClose, afterClose: handleAfterClose, footer: null, centered: true, forceRender: true, width: step === "create-group" ? 720 : undefined, getContainer: false, children: step === "compose" ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Input, { size: "large", value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("compose.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }) }), _jsxs("button", { type: "button", className: "flex items-center gap-3 rounded-xl bg-primary-50 px-4 py-3.5 text-left transition-colors hover:bg-primary-100", onClick: () => setStep("create-group"), children: [_jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white", children: _jsx(Icon, { icon: "user-three-b", size: 22, className: "text-primary-400" }) }), _jsx("span", { className: "flex-1 text-base font-semibold text-gray-900", children: t("compose.create_group") }), _jsx(Icon, { icon: "angle-right-o", size: 18, className: "text-gray-400" })] }), !debouncedSearch && (_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("span", { className: "shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("compose.recent_suggestions") }), _jsx("span", { className: "h-px flex-1 bg-gray-100" })] })), _jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("compose.no_member_found") })) : (accounts.map((account) => (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 border-b border-gray-50 px-1 py-3 transition-colors last:border-b-0 hover:bg-[#f5f5f5]", onClick: () => handleOpenDirectMessage(account), children: [_jsx(Avatar, { src: account.avatar, size: 44, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: account.displayName }), openingUserID === account.userID && _jsx(Spin, { size: "small" })] }, account.userID)))) })] })) : (_jsx(CreateGroupForm, { onDone: handleClose })) }));
 };
 export default ComposeNewMessageModal;

package/dist/components/conversation/ConversationByGroupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAOxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CA8D9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAQxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CA8D9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation/ConversationByGroupItem.js

@@ -1,18 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useChatContext } from "../../context/ChatContext";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import ThreadCard from "./ThreadCard";
+import MentionIndicatorIcon from "./MentionIndicatorIcon";
 const ConversationByGroupItem = ({ group, latestPreview, }) => {
     const { t } = useTranslation();
-    const user = useChatContext().user;
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
+    const { user, onNavigate } = useChatContext();
     const setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const isSelected = useConversationStore((state) => state.selectedConversationId === group.conversationId);
@@ -20,19 +17,19 @@ const ConversationByGroupItem = ({ group, latestPreview, }) => {
     const handleClick = () => {
         setConversationData(conversation);
         setSelectedConversationId(conversation.conversationID);
-        const newSearchParams = new URLSearchParams(searchParams);
+        const newSearchParams = new URLSearchParams(window.location.search);
         newSearchParams.set("threadId", conversation.conversationID);
         newSearchParams.delete("userId");
         newSearchParams.delete("groupId");
         newSearchParams.delete("botId");
-        router.push(`${pathname}?${newSearchParams.toString()}`);
+        onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
     };
     const latestMsg = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsg) || "";
     const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;
     return (_jsx(ThreadCard, { onClick: handleClick, isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
             peerType: conversation.peerType,
             showName: conversation.showName,
-        }), time: latestMsgSendTime > 0
+        }), mentionIndicator: _jsx(MentionIndicatorIcon, { groupAtType: conversation.groupAtType }), time: latestMsgSendTime > 0
             ? formatTimestamp(latestMsgSendTime, { hasTime: true })
             : undefined, avatar: _jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: 48 }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: conversation.showName }) }));
 };

package/dist/components/conversation/ConversationBySessionItem.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Avatar } from "antd";
 import { useChatContext } from "../../context/ChatContext";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
@@ -10,29 +9,27 @@ import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 import { isGroupSession } from "../../utils/imCommon";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import ThreadCard from "./ThreadCard";
+import MentionIndicatorIcon from "./MentionIndicatorIcon";
 const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
     var _a;
     const { t } = useTranslation();
-    const user = useChatContext().user;
+    const { user, onNavigate } = useChatContext();
     const isSelected = useConversationStore((state) => {
         var _a;
         return state.selectedConversationId ===
             ((_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation) === null || _a === void 0 ? void 0 : _a.conversationID);
     });
     const conversation = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation;
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
     const setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const handleConversationClick = (conversation) => {
         setConversationData(conversation);
-        const newSearchParams = new URLSearchParams(searchParams);
+        const newSearchParams = new URLSearchParams(window.location.search);
         newSearchParams.set("threadId", conversation.conversationID);
         newSearchParams.delete("userId");
         newSearchParams.delete("groupId");
         newSearchParams.delete("botId");
-        router.push(`${pathname}?${newSearchParams.toString()}`);
+        onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
         setSelectedConversationId(conversation.conversationID);
     };
     const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
@@ -43,7 +40,7 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
     return (_jsx(ThreadCard, { onClick: () => handleConversationClick(conversation), isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
             peerType: conversation.peerType,
             showName: conversation.showName,
-        }), time: latestMsgSendTime > 0
+        }), mentionIndicator: _jsx(MentionIndicatorIcon, { groupAtType: conversation.groupAtType }), time: latestMsgSendTime > 0
             ? formatTimestamp(latestMsgSendTime, { hasTime: true })
             : undefined, avatar: isGroupSession(conversation.conversationType) ? (_jsx(GroupCompositeAvatar, { groupID: conversation.groupID, faceURL: avatar, groupName: displayName, size: 48 })) : (_jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" })), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: displayName }) }));
 };

package/dist/components/conversation/DeskConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,oBAAoB,+CAySzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,oBAAoB,+CA4SzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -102,7 +102,7 @@ const DeskConversationList = () => {
             emitter.off("UPDATE_SESSION", handler);
         };
     }, [filterSummary, refetch]);
-    return (_jsxs("div", { className: "flex flex-col h-full bg-white border-r border-gray-200 w-[320px]", children: [_jsxs("div", { className: "p-3 border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
+    return (_jsxs("div", { className: "flex flex-col h-full bg-white border-r border-gray-200 w-[320px]", "data-cp-name": "DeskConversationList", children: [_jsxs("div", { className: "p-3 border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
                                     if (!showSearch && e.target.value) {
                                         setShowSearchTrue();
                                     }

package/dist/components/conversation/MentionIndicatorIcon.d.ts

@@ -0,0 +1,7 @@
+import { GroupAtType } from "@droppii-org/wasm-client-sdk";
+interface MentionIndicatorIconProps {
+    groupAtType?: GroupAtType;
+}
+declare const MentionIndicatorIcon: ({ groupAtType }: MentionIndicatorIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MentionIndicatorIcon;
+//# sourceMappingURL=MentionIndicatorIcon.d.ts.map

package/dist/components/conversation/MentionIndicatorIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/MentionIndicatorIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,UAAU,yBAAyB;IACjC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,QAAA,MAAM,oBAAoB,GAAI,iBAAiB,yBAAyB,mDAkBvE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/MentionIndicatorIcon.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GroupAtType } from "@droppii-org/wasm-client-sdk";
+import { useTranslation } from "react-i18next";
+// No "@" glyph exists in the IcoMoon icon set (droppiiFontSelection.json) —
+// render the literal character instead of forcing an unrelated tag icon.
+const MentionIndicatorIcon = ({ groupAtType }) => {
+    const { t } = useTranslation("conversation-inbox");
+    if (!groupAtType)
+        return null;
+    // AtGroupNotice is a group-announcement flag, not a "someone tagged you"
+    // signal — the mention icon on the thread card is only for AtMe/AtAll.
+    if (groupAtType === GroupAtType.AtGroupNotice)
+        return null;
+    return (_jsx("span", { role: "img", "aria-label": t("thread_card.mention.label"), className: "shrink-0 text-[13px] font-semibold leading-none text-blue-500", "data-cp-name": "MentionIndicatorIcon", children: "@" }));
+};
+export default MentionIndicatorIcon;

package/dist/components/conversation/SwipeActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/SwipeActionButton.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,GAAI,8CAMxB,sBAAsB,4CAgBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SwipeActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/SwipeActionButton.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,iBAAiB,GAAI,8CAMxB,sBAAsB,4CAiBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/conversation/SwipeActionButton.js

@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { Icon } from "../../components/icon";
 export const SWIPE_ACTION_WIDTH = 76;
-const SwipeActionButton = ({ icon, label, onClick, className, testId, }) => (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("flex h-full shrink-0 flex-col items-center justify-center gap-1 p-2 text-white", className), style: { width: SWIPE_ACTION_WIDTH }, children: [_jsx(Icon, { icon: icon, size: 16 }), _jsx("span", { className: "text-center text-[10px] font-[510] leading-[1.6]", children: label })] }));
+const SwipeActionButton = ({ icon, label, onClick, className, testId, }) => (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, "data-cp-name": "SwipeActionButton", className: clsx("flex h-full shrink-0 flex-col items-center justify-center gap-1 p-2 text-white", className), style: { width: SWIPE_ACTION_WIDTH }, children: [_jsx(Icon, { icon: icon, size: 16 }), _jsx("span", { className: "text-center text-[10px] font-[510] leading-[1.6]", children: label })] }));
 export default SwipeActionButton;

package/dist/components/conversation/SwipeableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/SwipeableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAOnD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,gDAKnB,iBAAiB,4CA4FnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/SwipeableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAOnD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC1C,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,gDAKnB,iBAAiB,4CA6FnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/conversation/SwipeableRow.js

@@ -57,6 +57,6 @@ const SwipeableRow = ({ children, actions, actionsWidth, disabled = false, }) =>
         if (!wasDragging)
             close();
     };
-    return (_jsxs("div", Object.assign({ ref: containerRef }, bind(), { className: "relative w-full touch-pan-y overflow-hidden", children: [_jsx("div", { "aria-hidden": !isOpen, className: "absolute inset-y-0 right-0 flex", style: { width: actionsWidth }, children: actions(close) }), _jsx("div", { className: clsx("relative bg-white transition-transform duration-200 ease-out", isDragging && "select-none transition-none"), style: { transform: `translate3d(-${offset}px, 0, 0)` }, onClickCapture: handleContentClickCapture, children: children })] })));
+    return (_jsxs("div", Object.assign({ ref: containerRef }, bind(), { className: "relative w-full touch-pan-y overflow-hidden", "data-cp-name": "SwipeableRow", children: [_jsx("div", { "aria-hidden": !isOpen, className: "absolute inset-y-0 right-0 flex", style: { width: actionsWidth }, children: actions(close) }), _jsx("div", { className: clsx("relative bg-white transition-transform duration-200 ease-out", isDragging && "select-none transition-none"), style: { transform: `translate3d(-${offset}px, 0, 0)` }, onClickCapture: handleContentClickCapture, children: children })] })));
 };
 export default SwipeableRow;

package/dist/components/conversation/ThreadCard.d.ts

@@ -9,7 +9,8 @@ export interface ThreadCardProps {
     onClick: () => void;
     testId?: string;
     muteIndicator?: ReactNode;
+    mentionIndicator?: ReactNode;
 }
-declare const ThreadCard: ({ avatar, title, preview, time, unreadCount, isSelected, onClick, testId, muteIndicator, }: ThreadCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThreadCard: ({ avatar, title, preview, time, unreadCount, isSelected, onClick, testId, muteIndicator, mentionIndicator, }: ThreadCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ThreadCard;
 //# sourceMappingURL=ThreadCard.d.ts.map

package/dist/components/conversation/ThreadCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,GAAI,4FAUjB,eAAe,4CA6CjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,GAAI,8GAWjB,eAAe,4CA+CjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/conversation/ThreadCard.js

@@ -5,12 +5,12 @@ const formatUnreadCount = (count) => (count > 99 ? "99+" : count);
 const UnreadBadge = ({ count }) => {
     const label = String(formatUnreadCount(count));
     const isWide = label.length > 1;
-    return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-gradient-danger-light px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), children: label }));
+    return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-gradient-danger-light px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), "data-cp-name": "UnreadBadge", children: label }));
 };
-const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, muteIndicator, }) => {
+const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, muteIndicator, mentionIndicator, }) => {
     const hasUnread = unreadCount > 0;
-    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-gray-25 p-3 text-left transition-colors hover:bg-[#f5f5f5] focus:outline-none focus-visible:ring-2 focus-visible:ring-chat-ring", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), muteIndicator, time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
+    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, "data-cp-name": "ThreadCard", className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-gray-25 p-3 text-left transition-colors hover:bg-[#f5f5f5] focus:outline-none focus-visible:ring-2 focus-visible:ring-chat-ring", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), muteIndicator, time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
                                     ? "font-[510] text-black"
-                                    : "font-normal tracking-[0.14px] text-gray-600"), children: preview }), hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
+                                    : "font-normal tracking-[0.14px] text-gray-600"), children: preview }), mentionIndicator, hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
 };
 export default ThreadCard;

package/dist/components/conversation-detail/ConversationDetailHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationDetailHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQrE,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,gBAAgB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAqBD,QAAA,MAAM,wBAAwB,GAAI,2CAI/B,6BAA6B,4CA0C/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"ConversationDetailHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQrE,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,gBAAgB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAsBD,QAAA,MAAM,wBAAwB,GAAI,2CAI/B,6BAA6B,4CA2C/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/conversation-detail/ConversationDetailHeader.js

@@ -6,7 +6,7 @@ import ConversationPeerAvatar from "../../components/conversation-inbox/Conversa
 import ConversationInboxTitle from "../../components/conversation-inbox/ConversationInboxTitle";
 import { resolveConversationDisplayName, resolvePeerBadgeLabel, } from "../../utils/conversation";
 import { useConversationAvatarUrl } from "../../hooks/conversation/useConversationAvatarUrl";
-const HeaderIconButton = ({ icon, onClick, testId, }) => (_jsx("button", { type: "button", onClick: onClick, "data-testid": testId, className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", children: _jsx(Icon, { icon: icon, size: 24 }) }));
+const HeaderIconButton = ({ icon, onClick, testId, }) => (_jsx("button", { type: "button", onClick: onClick, "data-testid": testId, "data-cp-name": "HeaderIconButton", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", children: _jsx(Icon, { icon: icon, size: 24 }) }));
 const ConversationDetailHeader = ({ conversation, onBack, onProfileClick, }) => {
     const { t } = useTranslation("conversation-inbox");
     const displayName = resolveConversationDisplayName(conversation, t);
@@ -14,6 +14,6 @@ const ConversationDetailHeader = ({ conversation, onBack, onProfileClick, }) =>
     const peerType = conversation.peerType;
     const badgeLabel = resolvePeerBadgeLabel(peerType, t);
     const subtitle = t("thread_detail.profile_hint");
-    return (_jsxs("div", { "data-testid": "conversation-detail-header", className: "flex w-full cursor-default items-center border-b border-gray-25 bg-white p-2 shadow-inset-gray-divider", children: [_jsx(HeaderIconButton, { icon: "arrow-left-o", onClick: onBack, testId: "conversation-detail-back" }), _jsxs("div", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-1", "data-testid": "conversation-detail-profile", onClick: onProfileClick, children: [_jsx(ConversationPeerAvatar, { peerType: peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(ConversationInboxTitle, { peerType: peerType, displayName: displayName }), _jsx("p", { className: "truncate text-[10px] font-normal leading-[160%] tracking-[0.1px] text-gray-600 [font-feature-settings:'liga'_off,'clig'_off]", children: subtitle })] })] })] }));
+    return (_jsxs("div", { "data-testid": "conversation-detail-header", "data-cp-name": "ConversationDetailHeader", className: "flex w-full cursor-default items-center border-b border-gray-25 bg-white p-2 shadow-inset-gray-divider", children: [_jsx(HeaderIconButton, { icon: "arrow-left-o", onClick: onBack, testId: "conversation-detail-back" }), _jsxs("div", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-1", "data-testid": "conversation-detail-profile", onClick: onProfileClick, children: [_jsx(ConversationPeerAvatar, { peerType: peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(ConversationInboxTitle, { peerType: peerType, displayName: displayName }), _jsx("p", { className: "truncate text-[10px] font-normal leading-[160%] tracking-[0.1px] text-gray-600 [font-feature-settings:'liga'_off,'clig'_off]", children: subtitle })] })] })] }));
 };
 export default ConversationDetailHeader;

package/dist/components/conversation-detail/ConversationDetailInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAM/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,uBAAuB,GAAI,4EAM9B,4BAA4B,4CA0Z9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAM/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,uBAAuB,GAAI,4EAM9B,4BAA4B,4CAya9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationDetailInput.js

@@ -27,6 +27,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
     const conversationId = selectedConversationId || (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
     const isConversationReady = !!conversationData && (!!conversationData.userID || !!conversationData.groupID);
+    const isViewOnlyMember = useConversationStore((state) => state.isViewOnlyMember);
     const sendMessageOptions = useMemo(() => ({
         scrollEvent: "CONVERSATION_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM",
     }), []);
@@ -247,7 +248,10 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         event.preventDefault();
         void handleSend();
     };
-    return (_jsxs("div", { ref: containerRef, "data-testid": "conversation-detail-input", className: "flex w-full shrink-0 flex-col bg-chat-bubble-neutral/[0.05]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), _jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "conversation-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-b", size: 24, className: "text-primary-400" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-gray-900" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
+    if (isViewOnlyMember) {
+        return (_jsx("div", { "data-testid": "conversation-detail-input-view-only", className: "flex w-full shrink-0 items-center justify-center bg-chat-bubble-neutral/[0.05] px-4 py-3 text-center text-sm text-gray-500", children: t("thread_detail.view_only_notice") }));
+    }
+    return (_jsxs("div", { ref: containerRef, "data-testid": "conversation-detail-input", "data-cp-name": "ConversationDetailInput", className: "flex w-full shrink-0 flex-col bg-chat-bubble-neutral/[0.05]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), _jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "conversation-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-b", size: 24, className: "text-primary-400" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-gray-900" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
                             ? "border-primary-200 shadow-primary-focus"
                             : "border-gray-50"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsxs("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: [onOpenBotMenu && (_jsx("button", { type: "button", onClick: onOpenBotMenu, "aria-label": t("thread_detail.bot.menu.open_menu"), "data-testid": "conversation-detail-open-bot-menu", className: "flex shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "chat-suggest-o", size: 24, className: "text-gray-600" }) })), _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "conversation-detail-message-input", className: "conversation-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-gray-400 focus:border-0 focus:outline-none focus:ring-0" })] }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "conversation-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-chat-send" : "bg-chat-send opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(ConversationMoreOptionPanel, { disabled: !isConversationReady, options: moreOptions, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
 };

package/dist/components/conversation-detail/ConversationMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBzE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CAyL5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBzE,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,uBAAuB,GAAI,gBAAgB,4BAA4B,4CA0L5E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationMessageList.js

@@ -95,6 +95,6 @@ const ConversationMessageList = ({ bottomSlot }) => {
         target: scrollRef,
         enable: !!openToolboxMessageId,
     });
-    return (_jsxs("div", { "data-testid": "conversation-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: handleRevokeMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, enableLongPress: true }, message.clientMsgID)))] })), _jsx(PinLimitModal, { open: pinLimitModalOpen, max: pinnedTotalCount, onClose: () => setPinLimitModalOpen(false) })] }));
+    return (_jsxs("div", { "data-testid": "conversation-message-list", "data-cp-name": "ConversationMessageList", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [bottomSlot, loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: handleRevokeMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, enableLongPress: true }, message.clientMsgID)))] })), _jsx(PinLimitModal, { open: pinLimitModalOpen, max: pinnedTotalCount, onClose: () => setPinLimitModalOpen(false) })] }));
 };
 export default ConversationMessageList;

package/dist/components/conversation-detail/ConversationMoreOptionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMoreOptionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMoreOptionItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,0BAA0B,GAAI,sBAAsB,+BAA+B,4CA+BxF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"ConversationMoreOptionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMoreOptionItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,0BAA0B,GAAI,sBAAsB,+BAA+B,4CAgCxF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/components/conversation-detail/ConversationMoreOptionItem.js

@@ -12,7 +12,7 @@ const ConversationMoreOptionItem = ({ option, onSelect }) => {
             return;
         onSelect(option);
     };
-    return (_jsxs("button", { type: "button", onClick: handleClick, disabled: !option.enabled, "aria-label": label, "data-testid": `more-option-${option.labelKey}`, className: clsx("flex flex-col items-center gap-1 rounded-xl px-1 transition-colors", option.enabled
+    return (_jsxs("button", { type: "button", onClick: handleClick, disabled: !option.enabled, "aria-label": label, "data-testid": `more-option-${option.labelKey}`, "data-cp-name": "ConversationMoreOptionItem", className: clsx("flex flex-col items-center gap-1 rounded-xl px-1 transition-colors", option.enabled
             ? "active:bg-chat-bubble-neutral/[0.08]"
             : "cursor-not-allowed opacity-40"), children: [_jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-200/10", children: _jsx(Icon, { icon: option.icon, size: ICON_SIZE, className: "text-gray-900" }) }), _jsx("span", { className: "line-clamp-2 text-center text-[12px] leading-[1.4] text-gray-900", children: label })] }));
 };

package/dist/components/conversation-detail/ConversationMoreOptionPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMoreOptionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMoreOptionPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,2BAA2B,GAAI,qFAMlC,gCAAgC,4CAkClC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"ConversationMoreOptionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMoreOptionPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,2BAA2B,GAAI,qFAMlC,gCAAgC,4CAmClC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/conversation-detail/ConversationMoreOptionPanel.js

@@ -19,6 +19,6 @@ const ConversationMoreOptionPanel = ({ disabled = false, options = MORE_OPTIONS,
         }
         onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(option);
     }, [onSelectOption, onTriggerMediaInput, onTriggerDocumentInput]);
-    return (_jsx("div", { "data-testid": "conversation-more-option-panel", className: "grid grid-cols-4 gap-y-5 bg-white py-5", children: options.map((option) => (_jsx(ConversationMoreOptionItem, { option: Object.assign(Object.assign({}, option), { enabled: option.enabled && !disabled }), onSelect: handleSelectOption }, option.key))) }));
+    return (_jsx("div", { "data-testid": "conversation-more-option-panel", "data-cp-name": "ConversationMoreOptionPanel", className: "grid grid-cols-4 gap-y-5 bg-white py-5", children: options.map((option) => (_jsx(ConversationMoreOptionItem, { option: Object.assign(Object.assign({}, option), { enabled: option.enabled && !disabled }), onSelect: handleSelectOption }, option.key))) }));
 };
 export default ConversationMoreOptionPanel;

package/dist/components/conversation-detail/PinLimitModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinLimitModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinLimitModal.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,4CAkChE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PinLimitModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinLimitModal.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,4CAmChE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/conversation-detail/PinLimitModal.js

@@ -3,6 +3,6 @@ import { Modal, Button } from "antd";
 import { useTranslation } from "react-i18next";
 const PinLimitModal = ({ open, max, onClose }) => {
     const { t } = useTranslation();
-    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, width: 400, children: _jsxs("div", { className: "flex flex-col gap-2 pt-2", role: "alertdialog", "aria-label": t("pin_limit_modal_title"), children: [_jsx("p", { className: "text-lg font-semibold text-gray-900", children: t("pin_limit_modal_title") }), _jsx("p", { className: "text-base text-gray-600", children: t("pin_limit_modal_description", { max }) }), _jsx(Button, { type: "primary", size: "large", block: true, className: "mt-2 !border-primary-400 !bg-primary-400 !text-white hover:!border-primary-300 hover:!bg-primary-300", onClick: onClose, children: t("pin_limit_modal_confirm") })] }) }));
+    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, width: 400, "data-cp-name": "PinLimitModal", children: _jsxs("div", { className: "flex flex-col gap-2 pt-2", role: "alertdialog", "aria-label": t("pin_limit_modal_title"), children: [_jsx("p", { className: "text-lg font-semibold text-gray-900", children: t("pin_limit_modal_title") }), _jsx("p", { className: "text-base text-gray-600", children: t("pin_limit_modal_description", { max }) }), _jsx(Button, { type: "primary", size: "large", block: true, className: "mt-2 !border-primary-400 !bg-primary-400 !text-white hover:!border-primary-300 hover:!bg-primary-300", onClick: onClose, children: t("pin_limit_modal_confirm") })] }) }));
 };
 export default PinLimitModal;

package/dist/components/conversation-detail/PinnedMessageBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinnedMessageBar.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinnedMessageBar.tsx"],"names":[],"mappings":"AAwHA,QAAA,MAAM,gBAAgB,sDA8FrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PinnedMessageBar.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinnedMessageBar.tsx"],"names":[],"mappings":"AA6HA,QAAA,MAAM,gBAAgB,sDAgGrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}