@droppii-org/chat-sdk 0.4.1 → 0.4.2

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/constants/images.d.ts

@@ -3,5 +3,6 @@ export declare const images: {
     imageFailed: string;
     emptyResources: string;
     muteNotificationWarning: string;
+    searchEmpty: string;
 };
 //# sourceMappingURL=images.d.ts.map

package/dist/constants/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/constants/images.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/constants/images.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}

package/dist/constants/images.js

@@ -3,9 +3,11 @@ const imageFailed = new URL("../assets/images/imageFailed.png", import.meta.url)
     .href;
 const emptyResources = new URL("../assets/images/emptyResources.png", import.meta.url).href;
 const muteNotificationWarning = new URL("../assets/images/muteNotificationWarning.png", import.meta.url).href;
+const searchEmpty = new URL("../assets/images/searchEmpty.png", import.meta.url).href;
 export const images = {
     conversationBg,
     imageFailed,
     emptyResources,
     muteNotificationWarning,
+    searchEmpty,
 };

package/dist/hooks/search/useSearchContacts.d.ts

@@ -0,0 +1,18 @@
+import type { BaseResponse, ContactSearchItem, ContactSearchType } from "../../types/dto";
+interface UseSearchContactsParams {
+    searchTerm: string;
+    type?: ContactSearchType;
+    enabled?: boolean;
+    pageSize?: number;
+}
+export declare const useSearchContacts: ({ searchTerm, type, enabled, pageSize, }: UseSearchContactsParams) => {
+    contacts: ContactSearchItem[];
+    totalElements: number;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<BaseResponse<ContactSearchItem[]>, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    isError: boolean;
+};
+export {};
+//# sourceMappingURL=useSearchContacts.d.ts.map

package/dist/hooks/search/useSearchContacts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchContacts.d.ts","sourceRoot":"","sources":["../../../src/hooks/search/useSearchContacts.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EAElB,MAAM,aAAa,CAAC;AAErB,UAAU,uBAAuB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,GAAI,0CAK/B,uBAAuB;;;;;;;;CA+CzB,CAAC"}

package/dist/hooks/search/useSearchContacts.js

@@ -0,0 +1,39 @@
+"use client";
+import { useMemo } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { apiInstance } from "../../services/api";
+import { ENDPOINTS } from "../../services/routes";
+import { QUERY_KEYS } from "../../services/query";
+import { PAGE_SIZE } from "../../constants";
+import useAuthStore from "../../store/auth";
+export const useSearchContacts = ({ searchTerm, type, enabled = true, pageSize = PAGE_SIZE.medium, }) => {
+    var _a, _b, _c, _d;
+    const trimmedSearchTerm = searchTerm.trim();
+    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError } = useInfiniteQuery({
+        initialPageParam: 1,
+        queryKey: [QUERY_KEYS.SEARCH_CONTACTS, trimmedSearchTerm, type, pageSize],
+        queryFn: async ({ pageParam = 1 }) => {
+            const payload = Object.assign({ applicationType: useAuthStore.getState().applicationType, searchTerm: trimmedSearchTerm, page: pageParam, pageSize }, (type ? { type } : {}));
+            const res = await apiInstance.post(ENDPOINTS.chatService.searchContacts, payload);
+            return res.data;
+        },
+        getNextPageParam: (lastPage) => {
+            var _a, _b;
+            const dataLength = ((_a = lastPage === null || lastPage === void 0 ? void 0 : lastPage.data) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            const currentPage = ((_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage.pageable) === null || _b === void 0 ? void 0 : _b.pageNumber) || 1;
+            return dataLength < pageSize ? undefined : currentPage + 1;
+        },
+        enabled: enabled && trimmedSearchTerm !== "",
+    });
+    const contacts = useMemo(() => { var _a, _b; return (_b = (_a = data === null || data === void 0 ? void 0 : data.pages) === null || _a === void 0 ? void 0 : _a.flatMap((page) => { var _a; return (_a = page === null || page === void 0 ? void 0 : page.data) !== null && _a !== void 0 ? _a : []; })) !== null && _b !== void 0 ? _b : []; }, [data]);
+    const totalElements = (_d = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.pages) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.pageable) === null || _c === void 0 ? void 0 : _c.totalElements) !== null && _d !== void 0 ? _d : 0;
+    return {
+        contacts,
+        totalElements,
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage,
+        isLoading,
+        isError,
+    };
+};

package/dist/locales/vi/conversation-inbox.json

@@ -118,5 +118,26 @@
     "loading": "Đang tải xem trước liên kết...",
     "remove": "Xóa xem trước liên kết"
   },
-  "link_open_error": "Không thể mở liên kết. Vui lòng thử lại."
+  "link_open_error": "Không thể mở liên kết. Vui lòng thử lại.",
+  "contact_search": {
+    "back": "Quay lại",
+    "tabs": {
+      "all": "Tất cả",
+      "contacts": "Liên hệ",
+      "messages": "Tin nhắn"
+    },
+    "view_all": "Xem tất cả",
+    "initial": "Bạn có thể tìm kiếm theo liên hệ hoặc nội dung tin nhắn",
+    "no_result_title": "Không tìm thấy kết quả nào",
+    "no_result_hint": "Hãy thử lại với cách viết hoặc kết hợp cụm từ khác phù hợp hơn.",
+    "failed": "Không tải được kết quả. Vui lòng thử lại",
+    "messages_not_available": "Tìm kiếm tin nhắn sẽ được bổ sung sau",
+    "member_count": "{{count}} thành viên",
+    "filters": {
+      "customer": "Khách hàng",
+      "pdp": "PDP",
+      "group": "Nhóm",
+      "seller": "Người bán"
+    }
+  }
 }

package/dist/screens/conversation-inbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation-inbox/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,MAAM,WAAW,2BAA2B;IAC1C,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,QAAA,MAAM,sBAAsB,GAAI,6CAI7B,2BAA2B,4CA2D7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation-inbox/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,MAAM,WAAW,2BAA2B;IAC1C,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,QAAA,MAAM,sBAAsB,GAAI,6CAI7B,2BAA2B,4CAyE7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}