@droppii-org/chat-sdk 0.4.0 → 0.4.2

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;

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

@@ -0,0 +1,7 @@
+interface ContactSearchPanelProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare const ContactSearchPanel: ({ open, onClose }: ContactSearchPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchPanel;
+//# sourceMappingURL=ContactSearchPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchPanel.tsx"],"names":[],"mappings":"AA2BA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,mBAAmB,uBAAuB,4CAoOrE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Drawer, Input, Spin } from "antd";
+import { useDebounce } from "ahooks";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import { useChatContext } from "../../../context/ChatContext";
+import { useSearchContacts } from "../../../hooks/search/useSearchContacts";
+import ContactSearchFilters from "./ContactSearchFilters";
+import ContactSearchResultItem from "./ContactSearchResultItem";
+import ContactSearchSectionHeader from "./ContactSearchSectionHeader";
+import ContactSearchStateMessage from "./ContactSearchStateMessage";
+import ContactSearchTabs from "./ContactSearchTabs";
+import ContactSearchViewMoreBar from "./ContactSearchViewMoreBar";
+import { CONTACT_SEARCH_DEBOUNCE_MS, CONTACT_SEARCH_ICON_SIZE, CONTACT_SEARCH_PREVIEW_LIMIT, ContactSearchTab, } from "./constants";
+import { buildContactSearchParams } from "./utils";
+const SCROLL_TARGET_ID = "contact-search-scroll";
+const ContactSearchPanel = ({ open, onClose }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { onNavigate } = useChatContext();
+    const [keyword, setKeyword] = useState("");
+    const [activeType, setActiveType] = useState();
+    const [activeTab, setActiveTab] = useState(ContactSearchTab.All);
+    const debouncedKeyword = useDebounce(keyword, {
+        wait: CONTACT_SEARCH_DEBOUNCE_MS,
+    });
+    const trimmedKeyword = debouncedKeyword.trim();
+    // The keyword and filter belong to one search session — reset both whenever
+    // the panel is reopened so a stale query never flashes.
+    useEffect(() => {
+        if (!open) {
+            setKeyword("");
+            setActiveType(undefined);
+            setActiveTab(ContactSearchTab.All);
+        }
+    }, [open]);
+    const { contacts, totalElements, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError, } = useSearchContacts({
+        searchTerm: trimmedKeyword,
+        type: activeType,
+        enabled: open,
+    });
+    const handleSelectContact = (contact) => {
+        const params = buildContactSearchParams(contact);
+        onClose();
+        onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(`${window.location.pathname}?${params.toString()}`);
+    };
+    // Filters belong to the `Liên hệ` tab only, so leaving it drops the active
+    // type — `Tất cả` always previews every contact type.
+    const handleChangeTab = (tab) => {
+        setActiveTab(tab);
+        if (tab !== ContactSearchTab.Contacts)
+            setActiveType(undefined);
+    };
+    const renderContactItems = (items) => items.map((contact) => (_jsx(ContactSearchResultItem, { contact: contact, searchTerm: trimmedKeyword, onSelect: handleSelectContact }, contact.id)));
+    // Every contact tab shares the same not-ready states before it can render
+    // results; returns null once there is a list to show.
+    const renderPlaceholderState = () => {
+        if (!trimmedKeyword) {
+            return (_jsx(ContactSearchStateMessage, { testId: "contact-search-initial", children: t("contact_search.initial") }));
+        }
+        if (isLoading) {
+            return (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) }));
+        }
+        if (isError) {
+            return (_jsx(ContactSearchStateMessage, { testId: "contact-search-failed", children: t("contact_search.failed") }));
+        }
+        if (contacts.length === 0) {
+            return (_jsxs(ContactSearchStateMessage, { testId: "contact-search-no-result", children: [t("contact_search.no_result_title"), _jsx("br", {}), t("contact_search.no_result_hint")] }));
+        }
+        return null;
+    };
+    // `Tất cả` only previews the contact section and hands off to `Liên hệ`;
+    // the message section belongs to the message-search ticket.
+    const renderAllTab = () => {
+        const placeholder = renderPlaceholderState();
+        if (placeholder)
+            return placeholder;
+        const hasMore = contacts.length > CONTACT_SEARCH_PREVIEW_LIMIT || !!hasNextPage;
+        const openContactsTab = () => handleChangeTab(ContactSearchTab.Contacts);
+        return (_jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsx(ContactSearchSectionHeader, { title: t("contact_search.tabs.contacts"), count: totalElements || undefined, onSelect: openContactsTab }), renderContactItems(contacts.slice(0, CONTACT_SEARCH_PREVIEW_LIMIT)), hasMore && _jsx(ContactSearchViewMoreBar, { onSelect: openContactsTab })] }));
+    };
+    const renderContactList = () => (_jsx("div", { id: SCROLL_TARGET_ID, className: "flex-1 overflow-y-auto", children: _jsx(InfiniteScroll, { dataLength: contacts.length, next: fetchNextPage, hasMore: !!hasNextPage, scrollableTarget: SCROLL_TARGET_ID, loader: isFetchingNextPage ? (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) })) : null, children: renderContactItems(contacts) }) }));
+    // Filters stay mounted even with no results so the seller can switch type.
+    const renderContactsTab = () => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [_jsx(ContactSearchFilters, { activeType: activeType, onChange: setActiveType }), (_a = renderPlaceholderState()) !== null && _a !== void 0 ? _a : renderContactList()] }));
+    };
+    const tabItems = [
+        {
+            key: ContactSearchTab.All,
+            label: t("contact_search.tabs.all"),
+            children: renderAllTab(),
+        },
+        {
+            key: ContactSearchTab.Contacts,
+            label: t("contact_search.tabs.contacts"),
+            children: renderContactsTab(),
+        },
+        {
+            key: ContactSearchTab.Messages,
+            label: t("contact_search.tabs.messages"),
+            children: (_jsx(ContactSearchStateMessage, { testId: "contact-search-messages", children: t("contact_search.messages_not_available") })),
+        },
+    ];
+    return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", "data-cp-name": "ContactSearchPanel", styles: { body: { padding: 0 } }, getContainer: false, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("button", { type: "button", "data-testid": "contact-search-back", "aria-label": t("contact_search.back"), className: "flex shrink-0 cursor-pointer items-center justify-center p-1 text-primary-400", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx(Input, { allowClear: true, autoFocus: true, value: keyword, "data-testid": "contact-search-input", placeholder: t("search_placeholder"), prefix: _jsx("span", { className: "flex h-10 w-10 items-center justify-center", children: _jsx(Icon, { icon: "search-o", size: CONTACT_SEARCH_ICON_SIZE }) }), 
+                            // Padding lives on the prefix/input instead of the wrapper so the
+                            // icon keeps its 40x40 box from the design.
+                            className: "!h-10 !rounded-lg !border-none !bg-gray-25 !p-0 !shadow-none", classNames: {
+                                prefix: "!m-0 text-gray-600",
+                                input: "!bg-transparent !px-0 !text-[14px] !leading-[1.6] !tracking-[0.14px] !text-gray-900",
+                                suffix: "!mr-4",
+                            }, onChange: (event) => setKeyword(event.target.value) })] }), _jsx(ContactSearchTabs, { activeTab: activeTab, items: tabItems, onChange: handleChangeTab })] }) }));
+};
+export default ContactSearchPanel;

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

@@ -0,0 +1,9 @@
+import { ContactSearchItem } from "../../../types/dto";
+interface ContactSearchResultItemProps {
+    contact: ContactSearchItem;
+    searchTerm: string;
+    onSelect: (contact: ContactSearchItem) => void;
+}
+declare const ContactSearchResultItem: ({ contact, searchTerm, onSelect, }: ContactSearchResultItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchResultItem;
+//# sourceMappingURL=ContactSearchResultItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchResultItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchResultItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,aAAa,CAAC;AAGnE,UAAU,4BAA4B;IACpC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,QAAA,MAAM,uBAAuB,GAAI,oCAI9B,4BAA4B,4CAiE9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import ConversationPeerAvatar from "../../../components/conversation-inbox/ConversationPeerAvatar";
+import { highlightSearch, sanitizeHtml } from "../../../utils/common";
+import { resolvePeerBadgeLabel } from "../../../utils/conversation";
+import { ContactSearchType } from "../../../types/dto";
+import { formatLastOnlineTime, resolveContactPeerType } from "./utils";
+const ContactSearchResultItem = ({ contact, searchTerm, onSelect, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const isGroup = contact.type === ContactSearchType.Group;
+    const peerType = resolveContactPeerType(contact.type);
+    // Supporting line differs per contact type (spec §Contact Result Content).
+    // PDP intentionally has none — its last online time was dropped from spec.
+    const buildSupportingText = () => {
+        var _a;
+        if (isGroup) {
+            return t("contact_search.member_count", {
+                count: (_a = contact.memberCount) !== null && _a !== void 0 ? _a : 0,
+            });
+        }
+        if (contact.type === ContactSearchType.PdpBot)
+            return "";
+        return formatLastOnlineTime(contact.lastOnlineTime);
+    };
+    const supportingText = buildSupportingText();
+    return (_jsxs("button", { type: "button", "data-cp-name": "ContactSearchResultItem", "data-testid": `contact-search-result-${contact.id}`, className: "flex w-full items-center gap-3 border-b border-gray-25 px-3 py-2.5 text-left hover:bg-gray-10", onClick: () => onSelect(contact), children: [_jsx(ConversationPeerAvatar, { peerType: peerType, displayName: contact.targetName, avatarUrl: contact.targetAvatar, badgeLabel: resolvePeerBadgeLabel(peerType, t) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [isGroup && (_jsx(Icon, { icon: "user-three-b", size: 16, className: "shrink-0 text-gray-900", "aria-hidden": true })), _jsx("span", { className: "min-w-0 truncate text-[16px] font-medium leading-[1.6] text-gray-900", 
+                                // highlightSearch returns a <mark> around the matched part only.
+                                dangerouslySetInnerHTML: {
+                                    __html: sanitizeHtml(highlightSearch(contact.targetName || "", searchTerm)),
+                                } })] }), supportingText && (_jsx("span", { className: "truncate text-[14px] leading-[1.6] text-gray-500", children: supportingText }))] })] }));
+};
+export default ContactSearchResultItem;

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

@@ -0,0 +1,8 @@
+interface ContactSearchSectionHeaderProps {
+    title: string;
+    count?: number;
+    onSelect: () => void;
+}
+declare const ContactSearchSectionHeader: ({ title, count, onSelect, }: ContactSearchSectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchSectionHeader;
+//# sourceMappingURL=ContactSearchSectionHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchSectionHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchSectionHeader.tsx"],"names":[],"mappings":"AAIA,UAAU,+BAA+B;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,0BAA0B,GAAI,6BAIjC,+BAA+B,4CA2BjC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../../../components/icon";
+const ContactSearchSectionHeader = ({ title, count, onSelect, }) => {
+    return (_jsxs("button", { type: "button", "data-cp-name": "ContactSearchSectionHeader", "data-testid": "contact-search-section-header", className: "flex w-full items-center gap-4 bg-white px-3 py-2 text-left", onClick: onSelect, children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-[16px] font-bold leading-[1.6] tracking-[0.16px] text-gray-900", children: title }), count !== undefined && (_jsx("span", { className: "text-[14px] font-medium leading-[1.6] text-gray-400", children: ` (${count})` }))] }), _jsx(Icon, { icon: "angle-right-o", size: 20, className: "shrink-0 text-gray-400", "aria-hidden": true })] }));
+};
+export default ContactSearchSectionHeader;

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+interface ContactSearchStateMessageProps {
+    children: ReactNode;
+    testId?: string;
+}
+declare const ContactSearchStateMessage: ({ children, testId, }: ContactSearchStateMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchStateMessage;
+//# sourceMappingURL=ContactSearchStateMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchStateMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchStateMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,8BAA8B;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID,QAAA,MAAM,yBAAyB,GAAI,uBAGhC,8BAA8B,4CAqBhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

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

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { images } from "../../../constants/images";
+// Shared body for the initial / no-result / failed states: the same 100px
+// illustration above centered gray copy.
+const ContactSearchStateMessage = ({ children, testId, }) => {
+    return (_jsxs("div", { "data-cp-name": "ContactSearchStateMessage", "data-testid": testId, className: "flex flex-1 flex-col items-center gap-3 bg-white px-8 py-[42px]", children: [_jsx("div", { className: "flex h-[100px] w-[100px] shrink-0 items-center justify-center", children: _jsx("img", { src: images.searchEmpty, alt: "", "aria-hidden": "true", className: "h-[87px] w-[101px] max-w-none" }) }), _jsx("p", { className: "w-full text-center text-[16px] leading-[1.6] tracking-[0.16px] text-gray-600", children: children })] }));
+};
+export default ContactSearchStateMessage;

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

@@ -0,0 +1,10 @@
+import { type TabsProps } from "antd";
+import { ContactSearchTab } from "./constants";
+interface ContactSearchTabsProps {
+    activeTab: ContactSearchTab;
+    items: TabsProps["items"];
+    onChange: (tab: ContactSearchTab) => void;
+}
+declare const ContactSearchTabs: ({ activeTab, items, onChange, }: ContactSearchTabsProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchTabs;
+//# sourceMappingURL=ContactSearchTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,MAAM,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAiC/C,UAAU,sBAAsB;IAC9B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC3C;AAED,QAAA,MAAM,iBAAiB,GAAI,iCAIxB,sBAAsB,4CAgBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "antd";
+// antd's line tabs are restyled to the design: no nav margin, adjacent tabs,
+// 14px bold labels, and a 3px rounded ink bar in the brand colour.
+const TAB_CLASS_NAMES = [
+    "flex flex-1 flex-col overflow-hidden",
+    "[&_.ant-tabs-nav]:mb-0 [&_.ant-tabs-nav]:h-[42px] [&_.ant-tabs-nav]:bg-white",
+    "[&_.ant-tabs-nav]:before:border-b [&_.ant-tabs-nav]:before:border-gray-25",
+    "[&_.ant-tabs-nav-wrap]:h-full [&_.ant-tabs-nav-list]:h-full",
+    // Design padding is `2px 12px 0 12px` — no bottom padding, the tab stretches
+    // to the bar height and the indicator sits flush at its bottom edge.
+    "[&_.ant-tabs-tab]:h-full [&_.ant-tabs-tab]:px-3 [&_.ant-tabs-tab]:pb-0 [&_.ant-tabs-tab]:pt-0.5",
+    "[&_.ant-tabs-tab+.ant-tabs-tab]:ml-0",
+    "[&_.ant-tabs-tab-btn]:text-[14px] [&_.ant-tabs-tab-btn]:font-bold",
+    "[&_.ant-tabs-tab-btn]:leading-[1.6] [&_.ant-tabs-tab-btn]:tracking-[0.14px]",
+    "[&_.ant-tabs-tab-btn]:!text-gray-400",
+    "[&_.ant-tabs-tab-active_.ant-tabs-tab-btn]:!text-primary-400",
+    "[&_.ant-tabs-ink-bar]:h-[3px] [&_.ant-tabs-ink-bar]:rounded",
+    "[&_.ant-tabs-ink-bar]:bg-primary-400",
+    "[&_.ant-tabs-content-holder]:flex [&_.ant-tabs-content-holder]:flex-1",
+    "[&_.ant-tabs-content-holder]:overflow-hidden",
+    "[&_.ant-tabs-content]:h-full",
+    // Only the active pane gets sizing — styling every `.ant-tabs-tabpane`
+    // overrides the height:0 antd uses to hide the inactive ones, which made
+    // two panes render side by side.
+    "[&_.ant-tabs-tabpane-active]:flex [&_.ant-tabs-tabpane-active]:h-full",
+    "[&_.ant-tabs-tabpane-active]:flex-col",
+].join(" ");
+// The design draws the indicator under the label only, while antd spans the
+// whole tab including its horizontal padding.
+const TAB_HORIZONTAL_PADDING = 24;
+const ContactSearchTabs = ({ activeTab, items, onChange, }) => {
+    return (_jsx(Tabs, { "data-cp-name": "ContactSearchTabs", activeKey: activeTab, items: items, className: TAB_CLASS_NAMES, tabBarGutter: 0, indicator: {
+            size: (origin) => origin - TAB_HORIZONTAL_PADDING,
+            align: "center",
+        }, destroyOnHidden: true, onChange: (key) => onChange(key) }));
+};
+export default ContactSearchTabs;

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

@@ -0,0 +1,6 @@
+interface ContactSearchViewMoreBarProps {
+    onSelect: () => void;
+}
+declare const ContactSearchViewMoreBar: ({ onSelect, }: ContactSearchViewMoreBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactSearchViewMoreBar;
+//# sourceMappingURL=ContactSearchViewMoreBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSearchViewMoreBar.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/ContactSearchViewMoreBar.tsx"],"names":[],"mappings":"AAKA,UAAU,6BAA6B;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,wBAAwB,GAAI,eAE/B,6BAA6B,4CA4B/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

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

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+const ContactSearchViewMoreBar = ({ onSelect, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx("div", { "data-cp-name": "ContactSearchViewMoreBar", className: "flex w-full flex-col items-center border-t border-gray-25 bg-white", children: _jsx("div", { className: "flex w-full items-center justify-center p-1", children: _jsxs("button", { type: "button", "data-testid": "contact-search-view-all", className: "flex h-8 items-center justify-center gap-2 px-3", onClick: onSelect, children: [_jsx("span", { className: "whitespace-nowrap text-center text-[13px] font-medium leading-[1.6] text-primary-400", children: t("contact_search.view_all") }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "shrink-0 text-primary-400", "aria-hidden": true })] }) }) }));
+};
+export default ContactSearchViewMoreBar;

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

@@ -0,0 +1,18 @@
+import { ContactSearchType } from "../../../types/dto";
+export declare const CONTACT_SEARCH_DEBOUNCE_MS = 300;
+export declare const CONTACT_SEARCH_ICON_SIZE = 18;
+export declare const CONTACT_SEARCH_PREVIEW_LIMIT = 5;
+export declare enum ContactSearchTab {
+    All = "ALL",
+    Contacts = "CONTACTS",
+    Messages = "MESSAGES"
+}
+export declare const CONTACT_SEARCH_TABS: {
+    tab: ContactSearchTab;
+    labelKey: string;
+}[];
+export declare const CONTACT_SEARCH_FILTERS: {
+    type: ContactSearchType;
+    labelKey: string;
+}[];
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAI3C,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAE9C,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE;IAChC,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB,EAIA,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE;IACnC,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB,EAKA,CAAC"}

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

@@ -0,0 +1,23 @@
+import { ContactSearchType } from "../../../types/dto";
+export const CONTACT_SEARCH_DEBOUNCE_MS = 300;
+export const CONTACT_SEARCH_ICON_SIZE = 18;
+// `Tất cả` shows a capped preview of the contact section before handing the
+// seller over to the full `Liên hệ` tab.
+export const CONTACT_SEARCH_PREVIEW_LIMIT = 5;
+export var ContactSearchTab;
+(function (ContactSearchTab) {
+    ContactSearchTab["All"] = "ALL";
+    ContactSearchTab["Contacts"] = "CONTACTS";
+    ContactSearchTab["Messages"] = "MESSAGES";
+})(ContactSearchTab || (ContactSearchTab = {}));
+export const CONTACT_SEARCH_TABS = [
+    { tab: ContactSearchTab.All, labelKey: "contact_search.tabs.all" },
+    { tab: ContactSearchTab.Contacts, labelKey: "contact_search.tabs.contacts" },
+    { tab: ContactSearchTab.Messages, labelKey: "contact_search.tabs.messages" },
+];
+export const CONTACT_SEARCH_FILTERS = [
+    { type: ContactSearchType.Customer, labelKey: "contact_search.filters.customer" },
+    { type: ContactSearchType.PdpBot, labelKey: "contact_search.filters.pdp" },
+    { type: ContactSearchType.Group, labelKey: "contact_search.filters.group" },
+    { type: ContactSearchType.User, labelKey: "contact_search.filters.seller" },
+];

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

@@ -0,0 +1,10 @@
+export { default as ContactSearchPanel } from "./ContactSearchPanel";
+export { default as ContactSearchFilters } from "./ContactSearchFilters";
+export { default as ContactSearchResultItem } from "./ContactSearchResultItem";
+export { default as ContactSearchStateMessage } from "./ContactSearchStateMessage";
+export { default as ContactSearchTabs } from "./ContactSearchTabs";
+export { default as ContactSearchSectionHeader } from "./ContactSearchSectionHeader";
+export { default as ContactSearchViewMoreBar } from "./ContactSearchViewMoreBar";
+export * from "./constants";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,9 @@
+export { default as ContactSearchPanel } from "./ContactSearchPanel";
+export { default as ContactSearchFilters } from "./ContactSearchFilters";
+export { default as ContactSearchResultItem } from "./ContactSearchResultItem";
+export { default as ContactSearchStateMessage } from "./ContactSearchStateMessage";
+export { default as ContactSearchTabs } from "./ContactSearchTabs";
+export { default as ContactSearchSectionHeader } from "./ContactSearchSectionHeader";
+export { default as ContactSearchViewMoreBar } from "./ContactSearchViewMoreBar";
+export * from "./constants";
+export * from "./utils";

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

@@ -0,0 +1,6 @@
+import { ContactSearchItem, ContactSearchType } from "../../../types/dto";
+import { PeerType } from "../../../types/conversation";
+export declare const resolveContactPeerType: (type: ContactSearchType) => PeerType;
+export declare const formatLastOnlineTime: (lastOnlineTime: string | null) => string;
+export declare const buildContactSearchParams: (contact: ContactSearchItem) => URLSearchParams;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAahD,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,KAAG,QAChC,CAAC;AAIlC,eAAO,MAAM,oBAAoB,GAAI,gBAAgB,MAAM,GAAG,IAAI,KAAG,MACd,CAAC;AAIxD,eAAO,MAAM,wBAAwB,GACnC,SAAS,iBAAiB,KACzB,eA0BF,CAAC"}

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

@@ -0,0 +1,44 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { ContactSearchType } from "../../../types/dto";
+import { PeerType } from "../../../types/conversation";
+dayjs.extend(relativeTime);
+// Search results reuse the inbox avatar, which drives its Mall / Bot badge
+// off PeerType rather than the search-specific contact type.
+const CONTACT_TYPE_TO_PEER_TYPE = {
+    [ContactSearchType.Customer]: PeerType.CUSTOMER,
+    [ContactSearchType.PdpBot]: PeerType.BOT,
+    [ContactSearchType.Group]: PeerType.GROUP,
+    [ContactSearchType.User]: PeerType.USER,
+};
+export const resolveContactPeerType = (type) => CONTACT_TYPE_TO_PEER_TYPE[type];
+// The Vietnamese dayjs locale is already registered in the SDK layout, so
+// fromNow() renders "1 giờ trước" without extra setup here.
+export const formatLastOnlineTime = (lastOnlineTime) => lastOnlineTime ? dayjs(lastOnlineTime).fromNow() : "";
+// Each contact type resolves to a different route param; the conversation
+// detail screen turns it into an existing thread or the new-chat flow.
+export const buildContactSearchParams = (contact) => {
+    var _a;
+    const params = new URLSearchParams(window.location.search);
+    params.delete("threadId");
+    params.delete("userId");
+    params.delete("groupId");
+    params.delete("botId");
+    if (contact.type === ContactSearchType.Group) {
+        if (contact.targetGroupId)
+            params.set("groupId", contact.targetGroupId);
+        return params;
+    }
+    // PDP bots carry their id in targetBotId; targetUserId is null for them.
+    if (contact.type === ContactSearchType.PdpBot) {
+        if (contact.targetBotId)
+            params.set("botId", contact.targetBotId);
+        return params;
+    }
+    // Individual contacts: sellers carry targetUserId, customers carry
+    // targetCustomerId — the other field is null in each case.
+    const peerId = (_a = contact.targetUserId) !== null && _a !== void 0 ? _a : contact.targetCustomerId;
+    if (peerId)
+        params.set("userId", peerId);
+    return params;
+};

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

@@ -4,5 +4,6 @@ export interface MentionOption {
     faceURL?: string;
     isAtAll: boolean;
 }
+export declare const ALL_MEMBERS_USER_ID = "__all__";
 export declare const useMentionOptions: (groupID: string | undefined, query: string) => MentionOption[];
 //# sourceMappingURL=useMentionOptions.d.ts.map

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

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

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

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useGroupMembers } from "../../../../hooks/group/useGroupMembers";
-const ALL_MEMBERS_USER_ID = "__all__";
+export const ALL_MEMBERS_USER_ID = "__all__";
 // Prefix matches rank above mid-string matches, then alphabetical — matches
 // the "closest match first" ranking spec'd for this feature (not just a
 // plain filter). No keyword: falls back to plain A-Z (AC-Open default).

package/dist/components/search-conversation/SearchAll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchAll.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchAll.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,wBAAwB,EAAE,MAAM,GAAG,CAAC;AAG7C,UAAU,0BAA0B;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACvD;AACD,QAAA,MAAM,qBAAqB,GAAI,+BAG5B,0BAA0B,4CAkH5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"SearchAll.d.ts","sourceRoot":"","sources":["../../../src/components/search-conversation/SearchAll.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,wBAAwB,EAAE,MAAM,GAAG,CAAC;AAG7C,UAAU,0BAA0B;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,GAAG,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACvD;AACD,QAAA,MAAM,qBAAqB,GAAI,+BAG5B,0BAA0B,4CA2J5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/search-conversation/SearchAll.js

@@ -8,6 +8,8 @@ import { Icon } from "../../components/icon";
 import SearchItemAsMessage from "./item/SearchItemAsMessage";
 import { useGetSession } from "../../hooks/session/useGetSession";
 import SearchItemAsUser from "./item/SearchItemAsUser";
+import SearchItemAsGroup from "./item/SearchItemAsGroup";
+import { useSearchGroups } from "../../hooks/search/useSearchGroups";
 import { SearchConversationTabKey } from ".";
 import { PAGE_SIZE } from "../../constants";
 const SearchConversationAll = ({ searchTerm = "", setActiveKey, }) => {
@@ -25,13 +27,17 @@ const SearchConversationAll = ({ searchTerm = "", setActiveKey, }) => {
         },
         options: { pageSize: PAGE_SIZE.xs },
     });
+    const { groups, isLoading: isLoadingGroup, hasNextPage: hasNextPageGroup, } = useSearchGroups({
+        searchTerm: searchTerm.trim(),
+        pageSize: PAGE_SIZE.xs,
+    });
     if (searchTerm.trim() === "" ||
-        (messages.length === 0 && sessions.length === 0)) {
+        (messages.length === 0 && sessions.length === 0 && groups.length === 0)) {
         return (_jsx("div", { className: "h-full overflow-auto", children: _jsx(Empty, { description: t("no_conversation") }) }));
     }
-    if (isLoadingMessage || isLoadingSession) {
+    if (isLoadingMessage || isLoadingSession || isLoadingGroup) {
         return (_jsx("div", { className: "h-full overflow-auto flex items-center justify-center", children: _jsx(Spin, {}) }));
     }
-    return (_jsxs("div", { className: "h-full overflow-auto", "data-cp-name": "SearchConversationAll", children: [sessions.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("users") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageSession && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Users), children: t("see_more") })] }), _jsx("div", { children: sessions.map((session) => (_jsx(SearchItemAsUser, { session: session, searchTerm: searchTerm }, session.conversationId))) })] })), messages.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("messages") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageMessage && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Messages), children: t("see_more") })] }), _jsx("div", { children: messages.map((message) => (_jsx(SearchItemAsMessage, { message: message.chatLog, searchTerm: searchTerm, displayTag: message.displayTag }, message.chatLog.clientMsgID))) })] }))] }));
+    return (_jsxs("div", { className: "h-full overflow-auto", "data-cp-name": "SearchConversationAll", children: [sessions.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("users") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageSession && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Users), children: t("see_more") })] }), _jsx("div", { children: sessions.map((session) => (_jsx(SearchItemAsUser, { session: session, searchTerm: searchTerm }, session.conversationId))) })] })), messages.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("messages") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageMessage && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Messages), children: t("see_more") })] }), _jsx("div", { children: messages.map((message) => (_jsx(SearchItemAsMessage, { message: message.chatLog, searchTerm: searchTerm, displayTag: message.displayTag }, message.chatLog.clientMsgID))) })] })), groups.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between px-3 min-h-[32px]", children: [_jsx("span", { className: "text-xs font-medium uppercase flex-1 text-gray-600", children: t("groups") }), _jsx(Button, { type: "link", icon: _jsx(Icon, { icon: "angle-right-o", size: 18, className: "!align-[-4px]" }), iconPosition: "end", className: clsx("p-0 gap-1", !hasNextPageGroup && "invisible"), onClick: () => setActiveKey === null || setActiveKey === void 0 ? void 0 : setActiveKey(SearchConversationTabKey.Groups), children: t("see_more") })] }), _jsx("div", { children: groups.map((group) => (_jsx(SearchItemAsGroup, { group: group, searchTerm: searchTerm }, group.conversationId))) })] }))] }));
 };
 export default SearchConversationAll;

package/dist/components/search-conversation/SearchConversationAsGroups.d.ts

@@ -0,0 +1,6 @@
+interface SearchConversationAsGroupsProps {
+    searchTerm: string;
+}
+declare const SearchConversationAsGroups: (props: SearchConversationAsGroupsProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchConversationAsGroups;
+//# sourceMappingURL=SearchConversationAsGroups.d.ts.map