@droppii-org/chat-sdk 0.4.0 → 0.4.2

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,4CAya9B,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;AAiB/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,4CAmlB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -17,10 +17,17 @@ import { FilePreviewList } from "../../components/message/footer/FilePreview";
 import LinkInputPreview from "../../components/message/footer/LinkInputPreview";
 import { ReplyPreviewBar } from "../../components/message/reply/ReplyPreviewBar";
 import ConversationMoreOptionPanel from "./ConversationMoreOptionPanel";
+import { useMentionTrigger } from "./mention/useMentionTrigger";
+import { useMentionOptions } from "../../components/message/footer/mention/useMentionOptions";
+import { useMentionTokens } from "./mention/useMentionTokens";
+import BizMentionMenu from "./mention/BizMentionMenu";
+import { getCaretCoordinates, disposeCaretCoordinates, } from "./mention/getCaretCoordinates";
+import { buildMentionPayload } from "./mention/buildMentionPayload";
 const MAX_LINES = 5;
 const CONTAINER_MIN_HEIGHT = 48;
 const FALLBACK_LINE_HEIGHT = 25.6;
 const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, moreOptions, onOpenBotMenu, }) => {
+    var _a;
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation("common");
     const conversationData = useConversationStore((state) => state.conversationData);
@@ -46,6 +53,20 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const [isSending, setIsSending] = useState(false);
     const [previewDismissed, setPreviewDismissed] = useState(false);
     const [isMoreOptionOpen, { setFalse: closeMoreOption, toggle: toggleMoreOption },] = useBoolean(false);
+    const [caretIndex, setCaretIndex] = useState(0);
+    const rawMentionTrigger = useMentionTrigger(value, caretIndex);
+    // Escape dismisses the menu for the CURRENT trigger span without erasing
+    // the typed "@query" text; a new "@" (different triggerStart) or the
+    // trigger closing naturally clears the dismissal automatically.
+    const [dismissedTriggerStart, setDismissedTriggerStart] = useState(null);
+    const mentionTrigger = (rawMentionTrigger === null || rawMentionTrigger === void 0 ? void 0 : rawMentionTrigger.triggerStart) === dismissedTriggerStart
+        ? null
+        : rawMentionTrigger;
+    const mentionOptions = useMentionOptions(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, (_a = mentionTrigger === null || mentionTrigger === void 0 ? void 0 : mentionTrigger.query) !== null && _a !== void 0 ? _a : "");
+    const isMentionMenuOpen = mentionTrigger !== null;
+    const [selectedMentionIndex, setSelectedMentionIndex] = useState(0);
+    const { tokens: mentionTokens, addToken, onValueChange, resetTokens } = useMentionTokens();
+    const [mentionMenuPosition, setMentionMenuPosition] = useState(null);
     const previewUrl = useMemo(() => {
         const urls = extractLinkUrls(value);
         return urls.length === 1 ? urls[0] : null;
@@ -89,7 +110,29 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         closeMoreOption();
         setListUploadFiles([]);
         setIsVideoLoading(false);
-    }, [conversationId, userID, closeMoreOption]);
+        resetTokens();
+    }, [conversationId, userID, closeMoreOption, resetTokens]);
+    useEffect(() => {
+        setSelectedMentionIndex(0);
+    }, [mentionTrigger === null || mentionTrigger === void 0 ? void 0 : mentionTrigger.triggerStart, mentionTrigger === null || mentionTrigger === void 0 ? void 0 : mentionTrigger.query]);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!isMentionMenuOpen || !textarea) {
+            setMentionMenuPosition(null);
+            return;
+        }
+        const coords = getCaretCoordinates(textarea, caretIndex, {
+            viewportHeight: window.innerHeight,
+        });
+        setMentionMenuPosition({ top: coords.top, left: coords.left });
+    }, [isMentionMenuOpen, caretIndex, value]);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        return () => {
+            if (textarea)
+                disposeCaretCoordinates(textarea);
+        };
+    }, []);
     useEffect(() => {
         var _a;
         if (!conversationId || !userID) {
@@ -159,18 +202,33 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         setListUploadFiles((prev) => prev.filter((f) => f.uid !== uid));
         setIsVideoLoading(false);
     }, []);
-    const handleChange = (nextValue) => {
+    const handleChange = (nextValue, nextCaretIndex) => {
+        onValueChange(value, nextValue);
         setValue(nextValue);
+        // Update caretIndex directly from the change event rather than relying
+        // solely on the textarea's native `select` event — some environments
+        // (and possibly some assistive/automation input paths) don't fire
+        // `select` on every keystroke, which would silently desync caretIndex
+        // from the actual caret and break mention-trigger detection.
+        setCaretIndex(nextCaretIndex);
         if (conversationId && userID) {
             setDraft(userID, conversationId, nextValue);
         }
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
     };
+    // Covers caret-only movement (click, arrow keys) with no value change,
+    // which handleChange's onChange path doesn't fire for — the trigger can
+    // close/open purely from moving the caret.
+    const handleSelectionChange = (event) => {
+        var _a;
+        setCaretIndex((_a = event.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0);
+    };
     const resetComposer = () => {
         setValue("");
         setListUploadFiles([]);
         setIsVideoLoading(false);
         setPreviewDismissed(false);
+        resetTokens();
         if (conversationId && userID) {
             clearDraft(userID, conversationId);
         }
@@ -189,6 +247,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
                 image: previewMetadata.image,
             }
             : undefined;
+        const mentions = mentionTokens.length > 0 ? buildMentionPayload(mentionTokens) : undefined;
         resetComposer();
         setIsSending(true);
         try {
@@ -202,6 +261,7 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
                     files: filesToSend,
                     isInternal: false,
                     urlMetadata,
+                    mentions,
                 });
             }
         }
@@ -230,14 +290,89 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const insertNewline = (textarea) => {
         const { selectionStart, selectionEnd } = textarea;
         const nextValue = value.slice(0, selectionStart) + "\n" + value.slice(selectionEnd);
-        handleChange(nextValue);
+        handleChange(nextValue, selectionStart + 1);
         requestAnimationFrame(() => {
             textarea.selectionStart = selectionStart + 1;
             textarea.selectionEnd = selectionStart + 1;
             adjustTextareaHeight();
         });
     };
+    const selectMentionOption = (option) => {
+        if (!mentionTrigger)
+            return;
+        const insertedText = "@" + option.displayName;
+        const nextValue = value.slice(0, mentionTrigger.triggerStart) +
+            insertedText +
+            " " +
+            value.slice(caretIndex);
+        const newToken = {
+            userID: option.userID,
+            displayName: option.displayName,
+            isAtAll: option.isAtAll,
+            start: mentionTrigger.triggerStart,
+            length: insertedText.length,
+        };
+        onValueChange(value, nextValue);
+        addToken(newToken);
+        setValue(nextValue);
+        if (conversationId && userID) {
+            setDraft(userID, conversationId, nextValue);
+        }
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
+        const nextCaret = mentionTrigger.triggerStart + insertedText.length + 1;
+        // Update caretIndex synchronously (not deferred to the RAF below) so
+        // mentionTrigger is recomputed against the post-insertion caret
+        // immediately — otherwise a key pressed before the RAF fires (e.g. a
+        // fast Enter right after a click-to-select) would still see the old
+        // caretIndex against the new value, which can spuriously re-match the
+        // trigger regex and reopen the menu.
+        setCaretIndex(nextCaret);
+        // Selecting from the dropdown (mouse click) can move focus off the
+        // textarea onto the option button — return it and set the caret
+        // synchronously (not deferred to a RAF) so the composer is immediately
+        // ready for the next keystroke, with no window where a fast follow-up
+        // input could race a still-pending caret write.
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.focus();
+            textarea.selectionStart = nextCaret;
+            textarea.selectionEnd = nextCaret;
+        }
+        requestAnimationFrame(adjustTextareaHeight);
+    };
+    const closeMentionMenu = () => {
+        if (mentionTrigger)
+            setDismissedTriggerStart(mentionTrigger.triggerStart);
+    };
     const handleKeyDown = (event) => {
+        if (isMentionMenuOpen) {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setSelectedMentionIndex((prev) => mentionOptions.length === 0
+                    ? 0
+                    : (prev + 1) % mentionOptions.length);
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setSelectedMentionIndex((prev) => mentionOptions.length === 0
+                    ? 0
+                    : (prev - 1 + mentionOptions.length) % mentionOptions.length);
+                return;
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+                event.preventDefault();
+                const selected = mentionOptions[selectedMentionIndex];
+                if (selected)
+                    selectMentionOption(selected);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                closeMentionMenu();
+                return;
+            }
+        }
         if (event.key !== "Enter")
             return;
         if (event.shiftKey) {
@@ -253,6 +388,9 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     }
     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(); } }))] }));
+                            : "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) => {
+                                        var _a;
+                                        return handleChange(event.target.value, (_a = event.target.selectionStart) !== null && _a !== void 0 ? _a : event.target.value.length);
+                                    }, onSelect: handleSelectionChange, 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" }), isMentionMenuOpen && mentionMenuPosition && (_jsx(BizMentionMenu, { options: mentionOptions, selectedIndex: selectedMentionIndex, onSelect: selectMentionOption, onHoverIndex: setSelectedMentionIndex, position: mentionMenuPosition, visible: true }))] }) }), _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(); } }))] }));
 };
 export default ConversationDetailInput;

package/dist/components/conversation-detail/LeaveGroupBlockedModal.d.ts

@@ -0,0 +1,12 @@
+export interface LeaveGroupBlockedModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+/**
+ * Figma blocking modal shown when a group owner taps "Rời nhóm": centered
+ * title and body in one padded block (no divider between them), then a
+ * full-width solid primary action.
+ */
+declare const LeaveGroupBlockedModal: ({ open, onClose, }: LeaveGroupBlockedModalProps) => import("react/jsx-runtime").JSX.Element;
+export default LeaveGroupBlockedModal;
+//# sourceMappingURL=LeaveGroupBlockedModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeaveGroupBlockedModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/LeaveGroupBlockedModal.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CA6C7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button } from "antd";
+import { useTranslation } from "react-i18next";
+const MODAL_WIDTH = 400;
+/**
+ * Figma blocking modal shown when a group owner taps "Rời nhóm": centered
+ * title and body in one padded block (no divider between them), then a
+ * full-width solid primary action.
+ */
+const LeaveGroupBlockedModal = ({ open, onClose, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx(Modal, { "data-cp-name": "LeaveGroupBlockedModal", open: open, onCancel: onClose, footer: null, closable: false, centered: true, width: MODAL_WIDTH, styles: {
+            content: { padding: 0, overflow: "hidden", borderRadius: 16 },
+            body: { padding: 0 },
+        }, children: _jsxs("div", { role: "alertdialog", "aria-label": t("thread_detail.leave_group.blocked_title"), className: "flex flex-col bg-white", children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 text-center text-gray-900", children: [_jsx("p", { className: "text-[18px] font-bold leading-[1.6]", children: t("thread_detail.leave_group.blocked_title") }), _jsx("p", { className: "text-[16px] leading-[1.6] tracking-[0.16px]", children: t("thread_detail.leave_group.blocked_desc") })] }), _jsx("div", { className: "border-t border-gray-25" }), _jsx("div", { className: "p-4", children: _jsx(Button, { "data-testid": "leave-group-blocked-confirm", type: "primary", className: "h-12 w-full !rounded-lg !border-primary-400 !bg-primary-400 !text-[16px] !font-medium !text-white hover:!border-primary-300 hover:!bg-primary-300", onClick: onClose, children: t("thread_detail.leave_group.blocked_confirm") }) })] }) }));
+};
+export default LeaveGroupBlockedModal;

package/dist/components/conversation-detail/LeaveGroupConfirmModal.d.ts

@@ -0,0 +1,16 @@
+export interface LeaveGroupConfirmModalProps {
+    open: boolean;
+    loading: boolean;
+    isPublicGroup: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+/**
+ * Figma "Rời nhóm" confirmation: centered title over a divider, left-aligned
+ * body, then two equal-width actions with a solid danger primary. Kept local
+ * to the feature instead of the shared ConfirmModal, whose antd footer puts
+ * auto-width buttons on the right.
+ */
+declare const LeaveGroupConfirmModal: ({ open, loading, isPublicGroup, onCancel, onConfirm, }: LeaveGroupConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+export default LeaveGroupConfirmModal;
+//# sourceMappingURL=LeaveGroupConfirmModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeaveGroupConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/LeaveGroupConfirmModal.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;GAKG;AACH,QAAA,MAAM,sBAAsB,GAAI,wDAM7B,2BAA2B,4CAiE7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button } from "antd";
+import { Trans, useTranslation } from "react-i18next";
+const MODAL_WIDTH = 400;
+/**
+ * Figma "Rời nhóm" confirmation: centered title over a divider, left-aligned
+ * body, then two equal-width actions with a solid danger primary. Kept local
+ * to the feature instead of the shared ConfirmModal, whose antd footer puts
+ * auto-width buttons on the right.
+ */
+const LeaveGroupConfirmModal = ({ open, loading, isPublicGroup, onCancel, onConfirm, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx(Modal, { "data-cp-name": "LeaveGroupConfirmModal", open: open, onCancel: onCancel, footer: null, closable: false, centered: true, width: MODAL_WIDTH, maskClosable: !loading, keyboard: !loading, styles: {
+            content: { padding: 0, overflow: "hidden", borderRadius: 16 },
+            body: { padding: 0 },
+        }, children: _jsxs("div", { role: "alertdialog", "aria-label": t("thread_detail.leave_group.confirm_title"), className: "flex flex-col bg-white", children: [_jsx("div", { className: "border-b border-gray-25 p-4", children: _jsx("p", { className: "text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.leave_group.confirm_title") }) }), _jsx("p", { className: "p-4 text-[16px] leading-[1.6] tracking-[0.16px] text-gray-900", children: _jsx(Trans, { t: t, i18nKey: isPublicGroup
+                            ? "thread_detail.leave_group.confirm_desc_public"
+                            : "thread_detail.leave_group.confirm_desc_private", components: { bold: _jsx("strong", { className: "font-bold" }) } }) }), _jsx("div", { className: "border-t border-gray-25" }), _jsxs("div", { className: "flex gap-3 p-4", children: [_jsx(Button, { "data-testid": "leave-group-cancel", className: "h-12 flex-1 !rounded-lg !border-gray-25 !bg-gray-25 !text-[16px] !font-medium !text-gray-900", onClick: onCancel, disabled: loading, children: t("thread_detail.leave_group.confirm_secondary") }), _jsx(Button, { "data-testid": "leave-group-confirm", type: "primary", className: "h-12 flex-1 !rounded-lg !border-danger-400 !bg-danger-400 !text-[16px] !font-medium !text-white hover:!border-danger-300 hover:!bg-danger-300", onClick: onConfirm, loading: loading, children: t("thread_detail.leave_group.confirm_primary") })] })] }) }));
+};
+export default LeaveGroupConfirmModal;

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadProfilePanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ThreadProfilePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAW7E,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACzD;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAKzB,uBAAuB,4CAmEzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ThreadProfilePanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ThreadProfilePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAc7E,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACzD;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAKzB,uBAAuB,4CA8GzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -5,8 +5,12 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../components/icon";
 import MediaEntryCard from "../../components/media-resources/MediaEntryCard";
+import { PeerType } from "../../types/conversation";
 import { resolveConversationDisplayName, resolvePeerBadgeColor, resolvePeerBadgeLabel, } from "../../utils/conversation";
 import { useConversationAvatarUrl } from "../../hooks/conversation/useConversationAvatarUrl";
+import { useLeaveGroupAction } from "../../hooks/group/useLeaveGroupAction";
+import LeaveGroupBlockedModal from "./LeaveGroupBlockedModal";
+import LeaveGroupConfirmModal from "./LeaveGroupConfirmModal";
 const PROFILE_AVATAR_SIZE = 96;
 const ThreadProfilePanel = ({ open, conversation, onClose, onSelectResource, }) => {
     const { t } = useTranslation("conversation-inbox");
@@ -14,8 +18,14 @@ const ThreadProfilePanel = ({ open, conversation, onClose, onSelectResource, })
     const avatarUrl = useConversationAvatarUrl(conversation);
     const peerType = conversation.peerType;
     const badgeLabel = resolvePeerBadgeLabel(peerType, t);
-    return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", "data-cp-name": "ThreadProfilePanel", styles: {
+    const { canLeaveGroup, isPublicGroup, isLeaving, isConfirmOpen, isBlockedOpen, openLeaveGroup, confirmLeaveGroup, closeConfirm, closeBlocked, } = useLeaveGroupAction({
+        groupID: conversation.groupID,
+        conversationID: conversation.conversationID,
+        isGroupThread: peerType === PeerType.GROUP,
+        onLeft: onClose,
+    });
+    return (_jsxs(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", "data-cp-name": "ThreadProfilePanel", styles: {
             body: { padding: 0 },
-        }, getContainer: false, forceRender: true, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-gray-25", children: [_jsxs("div", { className: "flex w-full items-center bg-white p-2", children: [_jsx("button", { type: "button", "data-testid": "thread-profile-back", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.options_title") })] }), _jsxs("div", { className: "flex flex-col items-center gap-2 bg-white px-0 py-2", children: [_jsxs("div", { className: "relative h-24 w-24 shrink-0", children: [_jsx(Avatar, { size: PROFILE_AVATAR_SIZE, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badgeLabel && (_jsx("span", { className: clsx("absolute bottom-1 right-0 flex h-[17px] items-center justify-center rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel }))] }), _jsx("p", { className: "w-full truncate text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: displayName })] }), _jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx(MediaEntryCard, { onSelect: onSelectResource }) })] }) }));
+        }, getContainer: false, forceRender: true, destroyOnHidden: true, children: [_jsxs("div", { className: "flex h-full flex-col bg-gray-25", children: [_jsxs("div", { className: "flex w-full items-center bg-white p-2", children: [_jsx("button", { type: "button", "data-testid": "thread-profile-back", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.options_title") })] }), _jsxs("div", { className: "flex flex-col items-center gap-2 bg-white px-0 py-2", children: [_jsxs("div", { className: "relative h-24 w-24 shrink-0", children: [_jsx(Avatar, { size: PROFILE_AVATAR_SIZE, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badgeLabel && (_jsx("span", { className: clsx("absolute bottom-1 right-0 flex h-[17px] items-center justify-center rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel }))] }), _jsx("p", { className: "w-full truncate text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: displayName })] }), _jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx(MediaEntryCard, { onSelect: onSelectResource }) }), canLeaveGroup && (_jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("button", { type: "button", "data-testid": "thread-profile-leave-group", className: "flex w-full cursor-pointer items-center gap-2 p-4 text-danger-400", onClick: openLeaveGroup, children: [_jsx(Icon, { icon: "logout-o", size: 24 }), _jsx("span", { className: "text-[16px] font-medium leading-[1.6]", children: t("thread_detail.leave_group.action") })] }) }) }))] }), _jsx(LeaveGroupConfirmModal, { open: isConfirmOpen, loading: isLeaving, isPublicGroup: isPublicGroup, onCancel: closeConfirm, onConfirm: confirmLeaveGroup }), _jsx(LeaveGroupBlockedModal, { open: isBlockedOpen, onClose: closeBlocked })] }));
 };
 export default ThreadProfilePanel;

package/dist/components/conversation-detail/index.d.ts

@@ -5,6 +5,10 @@ export type { ConversationDetailInputProps } from "./ConversationDetailInput";
 export { default as ConversationMessageList } from "./ConversationMessageList";
 export { default as PinnedMessageBar } from "./PinnedMessageBar";
 export { default as PinLimitModal } from "./PinLimitModal";
+export { default as LeaveGroupConfirmModal } from "./LeaveGroupConfirmModal";
+export type { LeaveGroupConfirmModalProps } from "./LeaveGroupConfirmModal";
+export { default as LeaveGroupBlockedModal } from "./LeaveGroupBlockedModal";
+export type { LeaveGroupBlockedModalProps } from "./LeaveGroupBlockedModal";
 export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
 export type { ConversationMoreOptionPanelProps } from "./ConversationMoreOptionPanel";
 export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}

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

@@ -3,5 +3,7 @@ export { default as ConversationDetailInput } from "./ConversationDetailInput";
 export { default as ConversationMessageList } from "./ConversationMessageList";
 export { default as PinnedMessageBar } from "./PinnedMessageBar";
 export { default as PinLimitModal } from "./PinLimitModal";
+export { default as LeaveGroupConfirmModal } from "./LeaveGroupConfirmModal";
+export { default as LeaveGroupBlockedModal } from "./LeaveGroupBlockedModal";
 export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
 export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";

package/dist/components/conversation-detail/mention/BizMentionMenu.d.ts

@@ -0,0 +1,15 @@
+import type { MentionOption } from "../../../components/message/footer/mention/useMentionOptions";
+export interface BizMentionMenuProps {
+    options: MentionOption[];
+    selectedIndex: number;
+    onSelect: (option: MentionOption) => void;
+    onHoverIndex: (index: number) => void;
+    position: {
+        top: number;
+        left: number;
+    };
+    visible: boolean;
+}
+declare const BizMentionMenu: ({ options, selectedIndex, onSelect, onHoverIndex, position, visible, }: BizMentionMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BizMentionMenu;
+//# sourceMappingURL=BizMentionMenu.d.ts.map

package/dist/components/conversation-detail/mention/BizMentionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BizMentionMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/mention/BizMentionMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,cAAc,GAAI,wEAOrB,mBAAmB,mDAgDrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/conversation-detail/mention/BizMentionMenu.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Avatar } from "antd";
+const BizMentionMenu = ({ options, selectedIndex, onSelect, onHoverIndex, position, visible, }) => {
+    const { t } = useTranslation();
+    if (!visible)
+        return null;
+    return (_jsxs("div", { "data-cp-name": "BizMentionMenu", "data-testid": "biz-mention-menu", className: "fixed z-50 max-h-[220px] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", style: { top: position.top, left: position.left }, children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), options.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: t("mention.no_result") })) : (options.map((option, index) => (_jsxs("button", { type: "button", "data-selected": index === selectedIndex, 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: () => onHoverIndex(index), onClick: () => onSelect(option), children: [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.faceURL, children: option.displayName.charAt(0) })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.displayName })] }, option.userID))))] }));
+};
+export default BizMentionMenu;

package/dist/components/conversation-detail/mention/buildMentionPayload.d.ts

@@ -0,0 +1,4 @@
+import type { MentionSendPayload } from "../../../types/chat";
+import type { MentionToken } from "./useMentionTokens";
+export declare const buildMentionPayload: (tokens: MentionToken[]) => MentionSendPayload;
+//# sourceMappingURL=buildMentionPayload.d.ts.map

package/dist/components/conversation-detail/mention/buildMentionPayload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildMentionPayload.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/mention/buildMentionPayload.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQvD,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,YAAY,EAAE,KACrB,kBAkBF,CAAC"}

package/dist/components/conversation-detail/mention/buildMentionPayload.js

@@ -0,0 +1,23 @@
+import { ALL_MEMBERS_USER_ID } from "../../../components/message/footer/mention/useMentionOptions";
+// The "__all__" sentinel is not a real user — useSendMessage already signals
+// tag-all via the isAtAll boolean (prepending its own AT_ALL_TAG sentinel),
+// so it must never leak into atUserIDList/atUsersInfo. It DOES still need a
+// mentionOffsets entry (userID: ALL_MEMBERS_USER_ID) so the rendered "Tất
+// cả" text gets highlighted by splitByOffsets — mirrors extractMentions.ts
+// (the CRM/Lexical composer's equivalent) exactly.
+export const buildMentionPayload = (tokens) => {
+    const memberTokens = tokens.filter((token) => token.userID !== ALL_MEMBERS_USER_ID);
+    return {
+        atUserIDList: memberTokens.map((token) => token.userID),
+        atUsersInfo: memberTokens.map((token) => ({
+            atUserID: token.userID,
+            groupNickname: token.displayName,
+        })),
+        isAtAll: tokens.some((token) => token.userID === ALL_MEMBERS_USER_ID),
+        mentionOffsets: tokens.map((token) => ({
+            userID: token.userID,
+            offset: token.start,
+            length: token.length,
+        })),
+    };
+};

package/dist/components/conversation-detail/mention/getCaretCoordinates.d.ts

@@ -0,0 +1,11 @@
+export interface CaretPixelCoordinates {
+    top: number;
+    left: number;
+    direction: "up" | "down";
+}
+export interface GetCaretCoordinatesOptions {
+    viewportHeight: number;
+}
+export declare const getCaretCoordinates: (textarea: HTMLTextAreaElement, position: number, { viewportHeight }: GetCaretCoordinatesOptions) => CaretPixelCoordinates;
+export declare const disposeCaretCoordinates: (textarea: HTMLTextAreaElement) => void;
+//# sourceMappingURL=getCaretCoordinates.d.ts.map

package/dist/components/conversation-detail/mention/getCaretCoordinates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCaretCoordinates.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/mention/getCaretCoordinates.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,0BAA0B;IACzC,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,GAC9B,UAAU,mBAAmB,EAC7B,UAAU,MAAM,EAChB,oBAAoB,0BAA0B,KAC7C,qBAsBF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,UAAU,mBAAmB,KAAG,IAEvE,CAAC"}

package/dist/components/conversation-detail/mention/getCaretCoordinates.js

@@ -0,0 +1,36 @@
+import CaretCoordinates from "textarea-caret-position";
+// The real package's own README describes a stateless function API that
+// its shipped index.js does not match — it's actually a stateful class
+// that inserts a permanent mirror-div + resize listener per instance.
+// Cache one instance per textarea so we don't leak a DOM node on every
+// keystroke; callers must invoke disposeCaretCoordinates on unmount.
+const instances = new WeakMap();
+const FALLBACK_LINE_HEIGHT = 25.6;
+const getLineHeight = (textarea) => {
+    const computed = parseFloat(window.getComputedStyle(textarea).lineHeight);
+    return Number.isFinite(computed) && computed > 0
+        ? computed
+        : FALLBACK_LINE_HEIGHT;
+};
+export const getCaretCoordinates = (textarea, position, { viewportHeight }) => {
+    let instance = instances.get(textarea);
+    if (!instance) {
+        instance = new CaretCoordinates(textarea);
+        instances.set(textarea, instance);
+    }
+    const caret = instance.get(position, position);
+    const rect = textarea.getBoundingClientRect();
+    const lineHeight = getLineHeight(textarea);
+    const left = rect.left + caret.left - textarea.scrollLeft;
+    const caretTop = rect.top + caret.top - textarea.scrollTop;
+    const belowTop = caretTop + lineHeight;
+    const opensDown = belowTop + lineHeight <= viewportHeight;
+    return {
+        left,
+        top: opensDown ? belowTop : caretTop,
+        direction: opensDown ? "down" : "up",
+    };
+};
+export const disposeCaretCoordinates = (textarea) => {
+    instances.delete(textarea);
+};

package/dist/components/conversation-detail/mention/useMentionTokens.d.ts

@@ -0,0 +1,21 @@
+export interface MentionToken {
+    userID: string;
+    displayName: string;
+    isAtAll: boolean;
+    start: number;
+    length: number;
+}
+export interface EditRange {
+    editStart: number;
+    deletedLength: number;
+    insertedLength: number;
+}
+export declare const computeEditRange: (oldValue: string, newValue: string) => EditRange;
+export interface UseMentionTokensResult {
+    tokens: MentionToken[];
+    addToken: (token: MentionToken) => void;
+    onValueChange: (oldValue: string, newValue: string) => void;
+    resetTokens: () => void;
+}
+export declare const useMentionTokens: () => UseMentionTokensResult;
+//# sourceMappingURL=useMentionTokens.d.ts.map

package/dist/components/conversation-detail/mention/useMentionTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMentionTokens.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/mention/useMentionTokens.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB;AAMD,eAAO,MAAM,gBAAgB,GAC3B,UAAU,MAAM,EAChB,UAAU,MAAM,KACf,SA4BF,CAAC;AA6BF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,QAAO,sBAqBnC,CAAC"}

package/dist/components/conversation-detail/mention/useMentionTokens.js

@@ -0,0 +1,58 @@
+import { useCallback, useState } from "react";
+// Textarea edits are always a single contiguous range replacement (one
+// keystroke, one backspace, or one paste/selection-replace) — so the exact
+// edit range is derivable from the common prefix/suffix between old and new
+// value, no full diff algorithm needed.
+export const computeEditRange = (oldValue, newValue) => {
+    let prefixLength = 0;
+    const maxPrefix = Math.min(oldValue.length, newValue.length);
+    while (prefixLength < maxPrefix &&
+        oldValue[prefixLength] === newValue[prefixLength]) {
+        prefixLength += 1;
+    }
+    let suffixLength = 0;
+    const maxSuffix = Math.min(oldValue.length - prefixLength, newValue.length - prefixLength);
+    while (suffixLength < maxSuffix &&
+        oldValue[oldValue.length - 1 - suffixLength] ===
+            newValue[newValue.length - 1 - suffixLength]) {
+        suffixLength += 1;
+    }
+    return {
+        editStart: prefixLength,
+        deletedLength: oldValue.length - prefixLength - suffixLength,
+        insertedLength: newValue.length - prefixLength - suffixLength,
+    };
+};
+const isTokenIntact = (token, value) => value.slice(token.start, token.start + token.length) ===
+    "@" + token.displayName;
+const applyEdit = (token, edit, newValue) => {
+    const editEnd = edit.editStart + edit.deletedLength;
+    const delta = edit.insertedLength - edit.deletedLength;
+    if (edit.editStart >= token.start + token.length) {
+        // Edit strictly after the token — unaffected.
+        return token;
+    }
+    if (editEnd <= token.start) {
+        // Edit strictly before the token — shift start by the net delta.
+        const shifted = Object.assign(Object.assign({}, token), { start: token.start + delta });
+        return isTokenIntact(shifted, newValue) ? shifted : null;
+    }
+    // Edit overlaps the token's range in some way — treat as broken.
+    return null;
+};
+export const useMentionTokens = () => {
+    const [tokens, setTokens] = useState([]);
+    const addToken = useCallback((token) => {
+        setTokens((prev) => [...prev, token]);
+    }, []);
+    const onValueChange = useCallback((oldValue, newValue) => {
+        const edit = computeEditRange(oldValue, newValue);
+        setTokens((prev) => prev
+            .map((token) => applyEdit(token, edit, newValue))
+            .filter((token) => token !== null));
+    }, []);
+    const resetTokens = useCallback(() => {
+        setTokens([]);
+    }, []);
+    return { tokens, addToken, onValueChange, resetTokens };
+};

package/dist/components/conversation-detail/mention/useMentionTrigger.d.ts

@@ -0,0 +1,7 @@
+export interface MentionTriggerMatch {
+    triggerStart: number;
+    query: string;
+}
+export declare const matchMentionTrigger: (text: string) => MentionTriggerMatch | null;
+export declare const useMentionTrigger: (value: string, caretIndex: number) => MentionTriggerMatch | null;
+//# sourceMappingURL=useMentionTrigger.d.ts.map

package/dist/components/conversation-detail/mention/useMentionTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMentionTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/mention/useMentionTrigger.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,KACX,mBAAmB,GAAG,IAWxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,YAAY,MAAM,KACjB,mBAAmB,GAAG,IAItB,CAAC"}