@droppii-org/chat-sdk 0.4.1 → 0.4.3

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/GroupMembersDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAiB/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CA2iBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"GroupMembersDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/message/GroupMembersDrawer.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAiB/C,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CD,QAAA,MAAM,kBAAkB,GAAI,wDAKzB,uBAAuB,4CAwjBzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/GroupMembersDrawer.js

@@ -55,6 +55,12 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
     const { results: searchResults, isSearching } = useSearchGroupMembers(groupID, debouncedSearch);
     const { mutateAsync: leaveConversation, isPending: isLeaving } = useLeaveConversation();
     const permissions = useGroupPermission(groupID);
+    // REMOVE_MEMBER is a blanket per-actor permission with no target-role
+    // granularity — BE still rejects an Admin removing another Admin/Owner
+    // (role hierarchy), so the FE must gate per-target here too, or the user
+    // reaches the confirm flow and only then sees a rejection toast.
+    const actingMemberRoleLevel = useConversationStore((state) => { var _a; return groupID ? (_a = state.currentMemberInGroup.get(groupID)) === null || _a === void 0 ? void 0 : _a.roleLevel : undefined; });
+    const actingIsOwner = actingMemberRoleLevel === GroupMemberRole.Owner;
     const { mutateAsync: setMemberPermissions } = useSetGroupMemberPermissions();
     const { mutateAsync: kickMember } = useKickGroupMember();
     const { mutateAsync: setMemberRole } = useSetGroupMemberRole();
@@ -336,7 +342,11 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                             label: t("remove_from_group"),
                             icon: _jsx(Icon, { icon: "user-del-o", size: 16 }),
                             danger: true,
-                            disabled: !permissions.removeMember,
+                            // Owner may remove anyone; Admin may only remove members
+                            // that are neither the Owner nor another Admin.
+                            disabled: !permissions.removeMember ||
+                                member.isOwner ||
+                                (member.isAdmin && !actingIsOwner),
                             onClick: () => setConfirmMemberAction({ type: "remove", member }),
                         },
                         {
@@ -360,7 +370,7 @@ const GroupMembersDrawer = ({ groupID, conversationId, currentSession, disabled
                         userID: adminPermissionMember.userID,
                         permissions: adminPermissionMember.permissions,
                     }
-                    : undefined, onMemberPermissionsSaved: patchMemberPermissions })), _jsx(ConfirmModal, { open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(ConfirmModal, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "remove", onOk: handleConfirmRemoveMember, onCancel: () => setConfirmMemberAction(null), title: t("remove_member_confirm_title"), okText: t("remove_from_group"), cancelText: t("cancel"), okType: "danger", children: _jsx("p", { children: t("remove_member_confirm_message", {
+                    : undefined, onMemberPermissionsSaved: patchMemberPermissions })), _jsx(ConfirmModal, { open: showLeaveConfirm, onOk: handleConfirmLeave, onCancel: () => setShowLeaveConfirm(false), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(ConfirmModal, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "remove", onOk: handleConfirmRemoveMember, onCancel: () => setConfirmMemberAction(null), title: t("remove_member_confirm_title"), okText: t("agree"), cancelText: t("cancel"), okType: "danger", children: _jsx("p", { children: t("remove_member_confirm_message", {
                         name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,
                     }) }) }), _jsx(ConfirmModal, { open: (confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.type) === "transfer-owner", onOk: handleConfirmTransferOwner, onCancel: () => setConfirmMemberAction(null), title: t("transfer_owner_confirm_title"), okText: t("transfer_owner"), cancelText: t("cancel"), okType: "danger", children: _jsx("p", { children: t("transfer_owner_confirm_message", {
                         name: confirmMemberAction === null || confirmMemberAction === void 0 ? void 0 : confirmMemberAction.member.nickname,

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/thread/GroupThreadInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupThreadInfo.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAID,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,mDAqkBjE,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"GroupThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupThreadInfo.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAID,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,mDAilBjE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/thread/GroupThreadInfo.js

@@ -46,6 +46,13 @@ const GroupThreadInfo = ({ onClose, config }) => {
     const [activeRow, setActiveRow] = useState(null);
     const [notifyEnabled, setNotifyEnabled] = useState((conversationData === null || conversationData === void 0 ? void 0 : conversationData.recvMsgOpt) !== MessageReceiveOptType.NotNotify);
     const avatarInputRef = useRef(null);
+    const descriptionInputRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (editingField === "description") {
+            (_a = descriptionInputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ cursor: "end" });
+        }
+    }, [editingField]);
     // changeGroupMute() persists via GroupItem.status (GroupStatus.Muted),
     // refreshed into currentGroupInfo on OnGroupInfoChanged — same pattern as
     // notifyEnabled below, not a locally-tracked flag.
@@ -121,7 +128,10 @@ const GroupThreadInfo = ({ onClose, config }) => {
         event.target.value = "";
         if (!file || !groupID)
             return;
-        if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+        // .jfif self-reports as image/jpeg, so MIME type alone can't reject it —
+        // must also check the extension isn't in the disallowed list.
+        const hasDisallowedExtension = /\.jfif\s*$/i.test(file.name);
+        if (hasDisallowedExtension || !ACCEPTED_IMAGE_TYPES.includes(file.type)) {
             message.error(t("avatar_invalid_format"));
             return;
         }
@@ -218,7 +228,7 @@ const GroupThreadInfo = ({ onClose, config }) => {
     }
     return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative overflow-hidden", "data-cp-name": "GroupThreadInfo", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("thread_info_title") }), _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(GroupCompositeAvatar, { groupID: groupID, faceURL: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.faceURL, ownerUserID: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.ownerUserID, groupName: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName, size: 56 }), isAvatarUploading && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-black/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), permissions.updateGroupAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: handleAvatarSelect }), _jsx("button", { type: "button", disabled: isAvatarUploading, onClick: handleAvatarClick, className: "absolute -bottom-1 -right-1 flex items-center justify-center w-5 h-5 rounded-full bg-black text-white", children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsx("div", { className: "flex-1 min-w-0", children: editingField !== "name" && (_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("p", { className: "text-base font-medium truncate", children: currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName }), permissions.updateGroupName && (_jsx(Icon, { icon: "edit-o", size: 16, className: "shrink-0 cursor-pointer text-gray-500", onClick: startEditName }))] })) })] }), editingField === "name" && (_jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex flex-col gap-3 bg-[#f5f5f5] rounded-lg p-3", children: [_jsx(Input, { autoFocus: true, value: nameValue, onChange: (event) => setNameValue(event.target.value), maxLength: 255, showCount: true, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg border border-primary-500 text-primary-500 text-sm font-medium disabled:border-gray-200 disabled:text-gray-300", disabled: isSavingGroupInfo, onClick: cancelEditName, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg bg-primary-500 text-white text-sm font-medium disabled:bg-gray-100 disabled:text-gray-300", disabled: isSavingGroupInfo ||
                                                 !nameValue.trim() ||
-                                                nameValue.trim() === ((_c = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName) !== null && _c !== void 0 ? _c : ""), onClick: saveName, children: t("save") })] })] }) })), _jsx("div", { className: "px-4 pb-4", children: editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-3 bg-[#f5f5f5] rounded-lg p-3", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-900", children: [_jsx(Icon, { icon: "info-circle-o", size: 18, className: "text-gray-500" }), t("description")] }), _jsx(Input.TextArea, { autoFocus: true, value: descriptionValue, onChange: (event) => setDescriptionValue(event.target.value), placeholder: t("enter_group_description"), autoSize: { minRows: 1, maxRows: 4 }, maxLength: 500, showCount: true, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg border border-primary-500 text-primary-500 text-sm font-medium disabled:border-gray-200 disabled:text-gray-300", disabled: isSavingGroupInfo, onClick: cancelEditDescription, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg bg-primary-500 text-white text-sm font-medium disabled:bg-gray-100 disabled:text-gray-300", disabled: isSavingGroupInfo ||
+                                                nameValue.trim() === ((_c = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.groupName) !== null && _c !== void 0 ? _c : ""), onClick: saveName, children: t("save") })] })] }) })), _jsx("div", { className: "px-4 pb-4", children: editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-3 bg-[#f5f5f5] rounded-lg p-3", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-gray-900", children: [_jsx(Icon, { icon: "info-circle-o", size: 18, className: "text-gray-500" }), t("description")] }), _jsx(Input.TextArea, { ref: descriptionInputRef, value: descriptionValue, onChange: (event) => setDescriptionValue(event.target.value), placeholder: t("enter_group_description"), autoSize: { minRows: 1, maxRows: 4 }, maxLength: 500, disabled: isSavingGroupInfo, className: "bg-white" }), _jsxs("span", { className: "self-end text-xs text-gray-400", children: [descriptionValue.length, " / 500"] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg border border-primary-500 text-primary-500 text-sm font-medium disabled:border-gray-200 disabled:text-gray-300", disabled: isSavingGroupInfo, onClick: cancelEditDescription, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-lg bg-primary-500 text-white text-sm font-medium disabled:bg-gray-100 disabled:text-gray-300", disabled: isSavingGroupInfo ||
                                                 descriptionValue.trim() === ((_d = currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) !== null && _d !== void 0 ? _d : ""), onClick: saveDescription, children: t("save") })] })] })) : (_jsxs("div", { className: "flex items-start justify-between gap-2 bg-[#f5f5f5] rounded-lg px-3 py-2.5", children: [_jsxs("div", { className: "flex items-start gap-2 flex-1 min-w-0", children: [_jsx(Icon, { icon: "info-circle-o", size: 18, className: "shrink-0 mt-0.5 text-gray-900" }), _jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: t("description") }), _jsx("p", { className: "text-sm text-gray-400 truncate", children: (currentGroupInfo === null || currentGroupInfo === void 0 ? void 0 : currentGroupInfo.introduction) || t("no_description") })] })] }), permissions.updateGroupDescription && (_jsx(Icon, { icon: "edit-o", size: 16, className: "shrink-0 cursor-pointer text-gray-500", onClick: startEditDescription }))] })) }), _jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 rounded-lg overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-o", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }), (config === null || config === void 0 ? void 0 : config.showAllowSendMessage) && isOwner && (_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "user-check-o", size: 18 }), t("allow_send_message")] }), _jsx(Switch, { checked: allowSendMessage, onChange: handleToggleSendMessage, loading: isTogglingSendMessage })] })), isAdminOrOwner && (config === null || config === void 0 ? void 0 : config.showMutedChatList) && (_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("muted-chat-list"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-off-o", size: 18 }), t("muted_chat_list")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] })), isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("block-list"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t("block_list")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }))] }), permissions.configGroupPermission && (_jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: [_jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("member-permission"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "shield-o", size: 18 }), t("member_permission_settings")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] }), _jsxs("button", { type: "button", className: "flex items-center justify-between px-3 py-3 text-left", onClick: () => setActiveRow("admin-permission"), children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "shield-done-o", size: 18 }), t("admin_permission_settings")] }), _jsx(Icon, { icon: "angle-right-o", size: 16, className: "text-gray-400" })] })] })), _jsx("div", { className: "mx-4 mt-3 rounded-lg overflow-hidden bg-[#f5f5f5]", children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-3 py-3 text-left text-sm text-gray-400 cursor-not-allowed", disabled: true, title: t("invite_via_link_pending"), children: [_jsx(Icon, { icon: "link-alt-o", size: 18 }), t("invite_via_link")] }) }), _jsxs("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 mb-4 rounded-lg overflow-hidden", children: [isAdminOrOwner && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("delete"), children: [_jsx(Icon, { icon: "trash-o", size: 18 }), t("delete_conversation")] })), !isViewOnlyMember && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("leave"), children: [_jsx(Icon, { icon: "logout-o", size: 18 }), t("leave_group")] })), isOwner && (_jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmAction("disband"), children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t("disband_group")] }))] })] }), _jsx(ConfirmModal, { open: confirmAction === "leave", onOk: handleConfirmLeave, onCancel: () => setConfirmAction(null), title: t("leave_group_confirm_title"), okText: t("leave_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isLeaving, children: _jsx("p", { children: t("leave_group_confirm_message") }) }), _jsx(ConfirmModal, { open: confirmAction === "disband", onOk: handleConfirmDisband, onCancel: () => setConfirmAction(null), title: t("disband_group_confirm_title"), okText: t("disband_group"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDismissing, children: _jsx("p", { children: t("disband_group_confirm_message") }) }), _jsx(ConfirmModal, { open: confirmAction === "delete", onOk: handleConfirmDelete, onCancel: () => setConfirmAction(null), title: t("delete_conversation_confirm_title"), okText: t("delete_conversation"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) }), _jsx(MemberPermissionPanel, { open: activeRow === "member-permission", groupID: groupID, onClose: () => setActiveRow(null) }), _jsx(AdminPermissionModal, { open: activeRow === "admin-permission", groupID: groupID, onClose: () => setActiveRow(null), inline: true }), (activeRow === "muted-chat-list" || activeRow === "block-list") && (_jsx(Modal, { centered: true, open: true, footer: null, onCancel: () => setActiveRow(null), title: t(activeRow === "muted-chat-list" ? "muted_chat_list" : "block_list"), getContainer: false, forceRender: true, children: _jsx("p", { className: "text-sm text-gray-500", children: t("feature_coming_soon") }) }))] }));
 };
 export default GroupThreadInfo;

package/dist/components/thread/ThreadInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,QAAA,MAAM,UAAU,GAAI,kCAAyC,eAAe,mDAsD3E,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,QAAA,MAAM,UAAU,GAAI,kCAAyC,eAAe,mDA2D3E,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/thread/ThreadInfo.js

@@ -31,7 +31,10 @@ const ThreadInfo = ({ isOpen = true, onClose, groupConfig }) => {
         return null;
     }
     if (isGroup) {
-        return isOpen ? _jsx(GroupThreadInfo, { onClose: onClose, config: groupConfig }) : null;
+        // Keyed on conversationId so switching threads remounts GroupThreadInfo
+        // instead of reusing the instance — otherwise its local edit state
+        // (editingField/nameValue/descriptionValue) leaks from the previous thread.
+        return isOpen ? (_jsx(GroupThreadInfo, { onClose: onClose, config: groupConfig }, conversationId)) : null;
     }
     if (!isOpen && !isBot) {
         return null;