@droppii-org/chat-sdk 0.4.1 → 0.4.3

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,+CA4SzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,oBAAoB,+CAqUzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -37,7 +37,10 @@ const DeskConversationList = () => {
     const viewMode = useSessionStore((state) => state.viewMode);
     const isAllGroupsView = viewMode === "allGroups";
     const { data: teamSummaries } = useGetTeamSessionSummary();
-    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, } = useGetSession({ filter: filterSummary, options: { isEnabled: !isAllGroupsView } });
+    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, } = useGetSession({
+        filter: filterSummary,
+        options: { isEnabled: !isAllGroupsView },
+    });
     const { groups: conversationGroups, fetchNextPage: fetchNextGroupsPage, hasNextPage: hasNextGroupsPage, isLoading: isConversationGroupsLoading, } = useConversationGroups({ enabled: isAllGroupsView });
     const latestPreviewMap = useSessionLatestPreview(rawSessions);
     const sessions = useSortedSessions(rawSessions, latestPreviewMap);
@@ -66,6 +69,19 @@ const DeskConversationList = () => {
             }, 100);
         }
     }, [showSearch]);
+    // Switching filter/team while search is open left the search bar and
+    // result drawer open over the newly-filtered list — close and clear it
+    // so the user starts fresh in the new filter context. Skips the initial
+    // mount so it never fights a future restored/URL-driven search state.
+    const isFilterEffectMountRef = useRef(true);
+    useEffect(() => {
+        if (isFilterEffectMountRef.current) {
+            isFilterEffectMountRef.current = false;
+            return;
+        }
+        onCloseSearch();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterSummary, isAllGroupsView]);
     useEffect(() => {
         const threadId = searchParams.get("threadId");
         if (!threadId) {
@@ -82,8 +98,7 @@ const DeskConversationList = () => {
                 // threadId can go stale between the fetch starting and resolving
                 // (e.g. the user was removed from that group mid-flight) — only
                 // apply the result if the URL still points at this conversation.
-                if (res.data.length > 0 &&
-                    searchParams.get("threadId") === threadId) {
+                if (res.data.length > 0 && searchParams.get("threadId") === threadId) {
                     setConversationData(res.data[0]);
                     updateConversationList(res.data, "filter");
                 }
@@ -107,11 +122,10 @@ const DeskConversationList = () => {
                                         setShowSearchTrue();
                                     }
                                     setSearch(e.target.value);
-                                }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch ? (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) })) : (_jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: () => setIsComposeOpen(true), variant: "outlined", className: "p-0 w-[36px] h-[36px] shrink-0 text-gray-500", children: _jsx(Icon, { icon: "edit-b", size: 20 }) }))] }), _jsxs("div", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), isAllGroupsView ? (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: "user-three-o", size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t("all_groups") })] })) : (filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] })))] })] }), _jsxs("div", { id: "scrollableConversationsDiv", style: {
-                    height: "100%",
-                    overflow: showSearch ? "hidden" : "auto",
-                    position: "relative",
-                }, children: [isAllGroupsView ? (isConversationGroupsLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spin, {}) })) : !(conversationGroups === null || conversationGroups === void 0 ? void 0 : conversationGroups.length) ? (_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_conversation") }) })) : (_jsx(InfiniteScroll, { dataLength: conversationGroups.length, next: fetchNextGroupsPage, hasMore: !!hasNextGroupsPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: conversationGroups.map((group) => (_jsx(ConversationByGroupItem, { group: group, latestPreview: groupLatestPreviewMap.get(group.conversationId) }, group.groupId))) }))) : (_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: (sessions === null || sessions === void 0 ? void 0 : sessions.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_conversation") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId) }, session.conversationId)))) })), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
+                                }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch ? (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) })) : (_jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: () => setIsComposeOpen(true), variant: "outlined", className: "p-0 w-[36px] h-[36px] shrink-0 text-gray-500", children: _jsx(Icon, { icon: "edit-b", size: 20 }) }))] }), _jsxs("div", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), isAllGroupsView ? (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: "user-three-o", size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t("all_groups") })] })) : (filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] })))] })] }), _jsxs("div", { className: "relative flex-1 min-h-0", children: [_jsx("div", { id: "scrollableConversationsDiv", style: {
+                            height: "100%",
+                            overflow: showSearch ? "hidden" : "auto",
+                        }, children: isAllGroupsView ? (isConversationGroupsLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Spin, {}) })) : !(conversationGroups === null || conversationGroups === void 0 ? void 0 : conversationGroups.length) ? (_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_conversation") }) })) : (_jsx(InfiniteScroll, { dataLength: conversationGroups.length, next: fetchNextGroupsPage, hasMore: !!hasNextGroupsPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: conversationGroups.map((group) => (_jsx(ConversationByGroupItem, { group: group, latestPreview: groupLatestPreviewMap.get(group.conversationId) }, group.groupId))) }))) : (_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: (sessions === null || sessions === void 0 ? void 0 : sessions.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_conversation") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId) }, session.conversationId)))) })) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
                             body: {
                                 padding: 0,
                             },

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/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"}

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

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+// Mirrors @lexical/react/LexicalTypeaheadMenuPlugin's useBasicTypeaheadTriggerMatch
+// regex for trigger="@", minLength=0 (the exact config MentionMenu.tsx uses),
+// so BIZ's plain-textarea trigger behavior matches CRM's Lexical composer.
+// The {0,75} + trailing $ means a query over 75 chars doesn't get
+// truncated — it simply stops triggering, same as the Lexical original.
+const TRIGGER_REGEX = /(^|\s|\()([@]((?:[^@.,+*?$@|#{}()^\-[\]\\/!%'"~=<>_:;\s]){0,75}))$/;
+export const matchMentionTrigger = (text) => {
+    const match = TRIGGER_REGEX.exec(text);
+    if (!match)
+        return null;
+    const boundary = match[1];
+    const query = match[3];
+    return {
+        triggerStart: match.index + boundary.length,
+        query,
+    };
+};
+export const useMentionTrigger = (value, caretIndex) => useMemo(() => matchMentionTrigger(value.slice(0, caretIndex)), [value, caretIndex]);

package/dist/components/conversation-inbox/ConversationInboxHeader.d.ts

@@ -1,3 +1,6 @@
-declare const ConversationInboxHeader: () => import("react/jsx-runtime").JSX.Element;
+export interface ConversationInboxHeaderProps {
+    onOpenSearch?: () => void;
+}
+declare const ConversationInboxHeader: ({ onOpenSearch, }: ConversationInboxHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default ConversationInboxHeader;
 //# sourceMappingURL=ConversationInboxHeader.d.ts.map

package/dist/components/conversation-inbox/ConversationInboxHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationInboxHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxHeader.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,uBAAuB,+CAmB5B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationInboxHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxHeader.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,4BAA4B;IAC3C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,QAAA,MAAM,uBAAuB,GAAI,mBAE9B,4BAA4B,4CA8B9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-inbox/ConversationInboxHeader.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-const ConversationInboxHeader = () => {
+import { Icon } from "../../components/icon";
+const ConversationInboxHeader = ({ onOpenSearch, }) => {
     const { t } = useTranslation("conversation-inbox");
-    return (_jsx("div", { "data-testid": "conversation-inbox-header", "data-cp-name": "ConversationInboxHeader", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsx("div", { className: "flex h-12 items-end px-3", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-primary-400", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-primary-400" })] }) }) }));
+    return (_jsx("div", { "data-testid": "conversation-inbox-header", "data-cp-name": "ConversationInboxHeader", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsxs("div", { className: "flex h-12 items-end px-3", children: [_jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-primary-400", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-primary-400" })] }), onOpenSearch && (_jsx("button", { type: "button", "data-testid": "conversation-inbox-search", "aria-label": t("search_placeholder"), className: "ml-auto mb-1.5 flex shrink-0 cursor-pointer items-center justify-center p-1 text-primary-400", onClick: onOpenSearch, children: _jsx(Icon, { icon: "search-o", size: 24 }) }))] }) }));
 };
 export default ConversationInboxHeader;

package/dist/components/conversation-inbox/contact-search/ContactSearchFilters.d.ts

@@ -0,0 +1,8 @@
+import { ContactSearchType } from "../../../types/dto";
+interface ContactSearchFiltersProps {
+    activeType?: ContactSearchType;
+    onChange: (type?: ContactSearchType) => void;
+}
+declare const ContactSearchFilters: ({ activeType, onChange, }: ContactSearchFiltersProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchFilters;
+//# sourceMappingURL=ContactSearchFilters.d.ts.map

package/dist/components/conversation-inbox/contact-search/ContactSearchFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchFilters.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,UAAU,yBAAyB;IACjC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,oBAAoB,GAAI,2BAG3B,yBAAyB,4CA0C3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation-inbox/contact-search/ContactSearchFilters.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { CONTACT_SEARCH_FILTERS } from "./constants";
+const ContactSearchFilters = ({ activeType, onChange, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    // Selecting the active chip again clears the filter and returns all types.
+    const handleSelect = (type) => {
+        onChange(activeType === type ? undefined : type);
+    };
+    return (_jsx("div", { "data-cp-name": "ContactSearchFilters", "data-testid": "contact-search-filters", className: "w-full border-b border-gray-25 bg-white py-3", children: _jsx("div", { className: "flex items-start gap-2 overflow-x-auto px-3", children: CONTACT_SEARCH_FILTERS.map(({ type, labelKey }) => {
+                const isActive = activeType === type;
+                return (_jsx("button", { type: "button", "aria-pressed": isActive, "data-testid": `contact-search-filter-${type}`, className: clsx("flex h-7 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-lg border px-3", "text-center text-[12px] font-medium leading-[1.6] tracking-[0.12px]", isActive
+                        ? "border-primary-600 bg-primary-25 text-primary-600"
+                        : "border-gray-200 text-gray-900"), onClick: () => handleSelect(type), children: t(labelKey) }, type));
+            }) }) }));
+};
+export default ContactSearchFilters;