@droppii-org/chat-sdk 0.7.10 → 0.7.12

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAoB/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACpE;AAED,QAAA,MAAM,uBAAuB,GAAI,8GAQ9B,4BAA4B,4CAkxB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationDetailInput.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAoB/D,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,wEAAwE;IACxE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACpE;AAED,QAAA,MAAM,uBAAuB,GAAI,8GAQ9B,4BAA4B,4CA4yB9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -9,6 +9,7 @@ import { Icon } from "../../components/icon";
 import { useSendMessage } from "../../hooks/message/useSendMessage";
 import { useReportTypingState } from "../../hooks/message/useReportTypingState";
 import { useJoinPublicGroup } from "../../hooks/group/useJoinPublicGroup";
+import { useGroupSendRestriction } from "../../hooks/group/useGroupSendRestriction";
 import { useAgentSupportThreadJoin } from "../../hooks/session/useAgentSupportThreadJoin";
 import useAuthStore from "../../store/auth";
 import useConversationStore from "../../store/conversation";
@@ -48,13 +49,14 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     const getSelfGroupPermissionByReq = useConversationStore((state) => state.getSelfGroupPermissionByReq);
     const { mutate: joinPublicGroup, isPending: isJoiningPublicGroup } = useJoinPublicGroup();
     const supportThreadJoin = useAgentSupportThreadJoin(conversationData, onJoinSupportThread);
+    const groupSendState = useGroupSendRestriction(conversationData);
     const handleJoinPublicGroup = useCallback(() => {
         const groupID = conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID;
         if (!groupID)
             return;
         joinPublicGroup({ groupID }, {
             onSuccess: async () => {
-                toastMessage.success(tCommon("join_group_success"));
+                toastMessage.success(tCommon("public_group_joined"));
                 // updateCurrentConversation's revalidation only runs on a
                 // conversationID change — this is the same conversation the user
                 // was already viewing, so refresh membership/permissions directly
@@ -232,6 +234,17 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
     useEffect(() => {
         adjustTextareaHeight();
     }, [value, adjustTextareaHeight]);
+    // The textarea mounts only once a spinner/notice branch gives way, after the
+    // draft was restored; size it again so a multi-line draft isn't one row tall.
+    useEffect(() => {
+        requestAnimationFrame(adjustTextareaHeight);
+    }, [
+        groupSendState,
+        isViewOnlyMember,
+        supportThreadJoin.isCheckingMembership,
+        supportThreadJoin.needsJoin,
+        adjustTextareaHeight,
+    ]);
     useEffect(() => {
         if (!isFocused)
             return;
@@ -489,8 +502,8 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
         event.preventDefault();
         void handleSend();
     };
-    // Don't flash a composer the agent may not be allowed to use.
-    if (supportThreadJoin.isCheckingMembership) {
+    // Don't flash a composer the agent or member may not be allowed to use.
+    if (supportThreadJoin.isCheckingMembership || groupSendState === "checking") {
         return (_jsx("div", { "data-testid": "conversation-detail-input-checking", className: "flex w-full shrink-0 items-center justify-center bg-chat-bubble-neutral/[0.05] px-4 py-3", children: _jsx(Spin, { size: "small" }) }));
     }
     if (isViewOnlyMember || supportThreadJoin.needsJoin) {
@@ -500,6 +513,9 @@ const ConversationDetailInput = ({ placeholder, onSendMessage, onInputChange, mo
                         ? supportThreadJoin.join
                         : handleJoinPublicGroup, children: tCommon("join_group") })] }));
     }
+    if (groupSendState === "restricted") {
+        return (_jsx("div", { "data-testid": "conversation-detail-input-send-restricted", className: "flex w-full shrink-0 items-center justify-center bg-chat-bubble-neutral/[0.05] px-4 py-3", children: _jsx("span", { className: "text-sm text-gray-500", children: t("thread_detail.cannot_send_notice") }) }));
+    }
     return (_jsxs("div", { ref: containerRef, "data-testid": "conversation-detail-input", "data-cp-name": "ConversationDetailInput", className: "flex w-full shrink-0 flex-col bg-chat-bubble-neutral/[0.05]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), _jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: (uid) => setPendingVideoUids((prev) => prev.filter((p) => p !== uid)) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "conversation-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-b", size: 24, className: "text-[var(--dc-color-primary)]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-gray-900" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
                             ? "border-[var(--dc-color-primary-focus)] shadow-[0px_0px_2px_var(--dc-color-primary-focus)]"
                             : "border-gray-50"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsxs("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: [onOpenBotMenu && (_jsx("button", { type: "button", onClick: onOpenBotMenu, "aria-label": t("thread_detail.bot.menu.open_menu"), "data-testid": "conversation-detail-open-bot-menu", className: "flex shrink-0 items-center justify-center", children: _jsx(Icon, { icon: "chat-suggest-o", size: 24, className: "text-gray-600" }) })), _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadProfilePanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ThreadProfilePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAc7E,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,QAAA,MAAM,kBAAkB,GAAI,uFAQzB,uBAAuB,4CAoJzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ThreadProfilePanel.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ThreadProfilePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAe7E,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID,QAAA,MAAM,kBAAkB,GAAI,uFAQzB,uBAAuB,4CAwKzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -15,6 +15,7 @@ import LeaveGroupBlockedModal from "./LeaveGroupBlockedModal";
 import LeaveGroupConfirmModal from "./LeaveGroupConfirmModal";
 import ThreadProfileQuickActions from "./profile/ThreadProfileQuickActions";
 import ThreadProfileActionRows from "./profile/ThreadProfileActionRows";
+import GroupDescriptionCard from "./profile/GroupDescriptionCard";
 const PROFILE_AVATAR_SIZE = 96;
 const PERSON_PEER_TYPES = [PeerType.USER, PeerType.CUSTOMER];
 const ThreadProfilePanel = ({ open, conversation, onClose, onSelectResource, showActions = false, onSearch, hideSearch = false, }) => {
@@ -23,6 +24,12 @@ const ThreadProfilePanel = ({ open, conversation, onClose, onSelectResource, sho
     const { displayName, avatarUrl, peerType, badgeLabel } = useConversationPeerIdentity(conversation);
     const isGroupThread = conversation.peerType === PeerType.GROUP;
     const isViewOnly = useConversationStore((state) => isGroupThread && state.isViewOnlyMember);
+    const groupDescription = useConversationStore((state) => {
+        var _a, _b, _c;
+        return isGroupThread && conversation.groupID
+            ? (_c = (_b = (_a = state.currentGroupInfo.get(conversation.groupID)) === null || _a === void 0 ? void 0 : _a.introduction) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : ""
+            : "";
+    });
     const showPersonRows = PERSON_PEER_TYPES.includes((_a = conversation.peerType) !== null && _a !== void 0 ? _a : "");
     const { isTargetActive } = useConversationTarget(conversation.conversationID, open && showActions && showPersonRows);
     const { canLeaveGroup, isPublicGroup, isLeaving, isConfirmOpen, isBlockedOpen, openLeaveGroup, confirmLeaveGroup, closeConfirm, closeBlocked, } = useLeaveGroupAction({
@@ -31,8 +38,10 @@ const ThreadProfilePanel = ({ open, conversation, onClose, onSelectResource, sho
         isGroupThread,
         onLeft: onClose,
     });
-    return (_jsxs(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", "data-cp-name": "ThreadProfilePanel", styles: {
+    return (_jsxs(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", 
+        // antd slides a drawer 180px aside when one opens inside it ("Mô tả nhóm").
+        push: false, "data-cp-name": "ThreadProfilePanel", styles: {
             body: { padding: 0 },
-        }, getContainer: false, forceRender: true, destroyOnHidden: true, children: [_jsxs("div", { className: clsx("flex h-full flex-col bg-gray-25", showActions && "overflow-y-auto"), children: [_jsxs("div", { className: clsx("flex w-full items-center bg-white p-2", showActions && "sticky top-0 z-10 shrink-0"), children: [_jsx("button", { type: "button", "data-testid": "thread-profile-back", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[var(--dc-color-nav-icon)]", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.options_title") })] }), _jsxs("div", { className: "flex flex-col items-center gap-2 bg-white px-0 py-2", children: [_jsxs("div", { className: "relative h-24 w-24 shrink-0", children: [_jsx(Avatar, { size: PROFILE_AVATAR_SIZE, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badgeLabel && (_jsx("span", { className: clsx("absolute bottom-1 right-0 flex h-[17px] items-center justify-center rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel }))] }), _jsx("p", { className: "w-full truncate text-center text-[18px] font-bold leading-[1.6] text-gray-900", children: displayName }), showActions && (_jsx(ThreadProfileQuickActions, { conversation: conversation, isViewOnly: isViewOnly, onSearch: onSearch, hideSearch: hideSearch }, conversation.conversationID))] }), _jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx(MediaEntryCard, { onSelect: onSelectResource }) }), showActions && (_jsx(ThreadProfileActionRows, { conversation: conversation, displayName: displayName, showPersonRows: showPersonRows, isTargetActive: isTargetActive, isViewOnly: isViewOnly, canLeaveGroup: canLeaveGroup, onLeaveGroup: openLeaveGroup }, conversation.conversationID)), !showActions && canLeaveGroup && (_jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("button", { type: "button", "data-testid": "thread-profile-leave-group", className: "flex w-full cursor-pointer items-center gap-2 p-4 text-danger-400", onClick: openLeaveGroup, children: [_jsx(Icon, { icon: "logout-o", size: 24 }), _jsx("span", { className: "text-[16px] font-medium leading-[1.6]", children: t("thread_detail.leave_group.action") })] }) }) }))] }), _jsx(LeaveGroupConfirmModal, { open: isConfirmOpen, loading: isLeaving, isPublicGroup: isPublicGroup, onCancel: closeConfirm, onConfirm: confirmLeaveGroup }), _jsx(LeaveGroupBlockedModal, { open: isBlockedOpen, onClose: closeBlocked })] }));
+        }, getContainer: false, forceRender: true, destroyOnHidden: true, children: [_jsxs("div", { className: clsx("flex h-full flex-col bg-gray-25", showActions && "overflow-y-auto"), children: [_jsxs("div", { className: clsx("flex w-full items-center bg-white p-2", showActions && "sticky top-0 z-10 shrink-0"), children: [_jsx("button", { type: "button", "data-testid": "thread-profile-back", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[var(--dc-color-nav-icon)]", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("thread_detail.options_title") })] }), _jsxs("div", { className: "flex flex-col items-center gap-2 bg-white px-0 py-2", children: [_jsxs("div", { className: "relative h-24 w-24 shrink-0", children: [_jsx(Avatar, { size: PROFILE_AVATAR_SIZE, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badgeLabel && (_jsx("span", { className: clsx("absolute bottom-1 right-0 flex h-[17px] items-center justify-center rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel }))] }), _jsx("p", { className: clsx("w-full text-center text-[18px] font-bold leading-[1.6] text-gray-900", showActions && isGroupThread ? "line-clamp-2 break-words px-3" : "truncate"), children: displayName }), showActions && (_jsx(ThreadProfileQuickActions, { conversation: conversation, isViewOnly: isViewOnly, onSearch: onSearch, hideSearch: hideSearch }, conversation.conversationID))] }), _jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx(MediaEntryCard, { onSelect: onSelectResource }) }), showActions && groupDescription && (_jsx(GroupDescriptionCard, { groupName: displayName, description: groupDescription }, `description-${conversation.conversationID}`)), showActions && (_jsx(ThreadProfileActionRows, { conversation: conversation, displayName: displayName, showPersonRows: showPersonRows, isTargetActive: isTargetActive, isViewOnly: isViewOnly, isGroupThread: isGroupThread, canLeaveGroup: canLeaveGroup, onLeaveGroup: openLeaveGroup }, conversation.conversationID)), !showActions && canLeaveGroup && (_jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("button", { type: "button", "data-testid": "thread-profile-leave-group", className: "flex w-full cursor-pointer items-center gap-2 p-4 text-danger-400", onClick: openLeaveGroup, children: [_jsx(Icon, { icon: "logout-o", size: 24 }), _jsx("span", { className: "text-[16px] font-medium leading-[1.6]", children: t("thread_detail.leave_group.action") })] }) }) }))] }), _jsx(LeaveGroupConfirmModal, { open: isConfirmOpen, loading: isLeaving, isPublicGroup: isPublicGroup, onCancel: closeConfirm, onConfirm: confirmLeaveGroup }), _jsx(LeaveGroupBlockedModal, { open: isBlockedOpen, onClose: closeBlocked })] }));
 };
 export default ThreadProfilePanel;

package/dist/components/conversation-detail/profile/GroupDescriptionCard.d.ts

@@ -0,0 +1,7 @@
+interface GroupDescriptionCardProps {
+    groupName: string;
+    description: string;
+}
+declare const GroupDescriptionCard: ({ groupName, description, }: GroupDescriptionCardProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupDescriptionCard;
+//# sourceMappingURL=GroupDescriptionCard.d.ts.map

package/dist/components/conversation-detail/profile/GroupDescriptionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDescriptionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/profile/GroupDescriptionCard.tsx"],"names":[],"mappings":"AA6BA,UAAU,yBAAyB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,oBAAoB,GAAI,6BAG3B,yBAAyB,4CAkE3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation-detail/profile/GroupDescriptionCard.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import GroupDescriptionPanel from "./GroupDescriptionPanel";
+const LINE_HEIGHT_PX = 25.6;
+const MAX_LINES = 2;
+const CLAMPED_HEIGHT_PX = MAX_LINES * LINE_HEIGHT_PX;
+// Same clamp as CollapsibleText: fade the end of the last line under
+// "…Xem thêm" without touching layout, so it never feeds the overflow check.
+const LAST_LINE_FADE = "linear-gradient(#000, #000), linear-gradient(to right, #000 calc(100% - 7em), transparent calc(100% - 5.5em))";
+const LAST_LINE_FADE_SIZE = `100% calc(100% - ${LINE_HEIGHT_PX}px), 100% ${LINE_HEIGHT_PX}px`;
+const CLAMPED_STYLE = {
+    maxHeight: CLAMPED_HEIGHT_PX,
+    overflow: "clip",
+    maskImage: LAST_LINE_FADE,
+    maskSize: LAST_LINE_FADE_SIZE,
+    maskPosition: "top, bottom",
+    maskRepeat: "no-repeat",
+    WebkitMaskImage: LAST_LINE_FADE,
+    WebkitMaskSize: LAST_LINE_FADE_SIZE,
+    WebkitMaskPosition: "top, bottom",
+    WebkitMaskRepeat: "no-repeat",
+};
+const GroupDescriptionCard = ({ groupName, description, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const contentRef = useRef(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const [isPanelOpen, setIsPanelOpen] = useState(false);
+    useLayoutEffect(() => {
+        const content = contentRef.current;
+        if (!content)
+            return;
+        // Half-line slack: subpixel line boxes can push an exact 2-line block past 51.2px.
+        const measure = () => setIsOverflowing(content.getBoundingClientRect().height >
+            CLAMPED_HEIGHT_PX + LINE_HEIGHT_PX / 2);
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsxs("div", { "data-testid": "group-description-card", className: "relative rounded-xl bg-white p-3", children: [_jsx("div", { className: clsx(isOverflowing && "overflow-hidden"), style: isOverflowing ? CLAMPED_STYLE : undefined, children: _jsx("p", { ref: contentRef, "data-testid": "group-description-text", className: "whitespace-pre-line break-words text-[16px] font-medium leading-[1.6] text-gray-900", children: description }) }), isOverflowing && (_jsxs("button", { type: "button", "data-testid": "group-description-see-more", className: "absolute bottom-3 right-3 cursor-pointer whitespace-nowrap rounded text-[16px] font-medium leading-[1.6] text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--dc-color-link)]", onClick: () => setIsPanelOpen(true), children: [_jsx("span", { "aria-hidden": true, children: "\u2026" }), _jsx("span", { className: "text-[var(--dc-color-link)]", children: t("see_more", { ns: "common" }) })] }))] }) }), _jsx(GroupDescriptionPanel, { open: isPanelOpen, groupName: groupName, description: description, onClose: () => setIsPanelOpen(false) })] }));
+};
+export default GroupDescriptionCard;

package/dist/components/conversation-detail/profile/GroupDescriptionPanel.d.ts

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

package/dist/components/conversation-detail/profile/GroupDescriptionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDescriptionPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/profile/GroupDescriptionPanel.tsx"],"names":[],"mappings":"AAMA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,qBAAqB,GAAI,4CAK5B,0BAA0B,4CAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/conversation-detail/profile/GroupDescriptionPanel.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from "antd";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+const GroupDescriptionPanel = ({ open, groupName, description, onClose, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const title = t("thread_detail.profile.group_description_title");
+    return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", "aria-label": title, "data-cp-name": "GroupDescriptionPanel", styles: { body: { padding: 0 } }, getContainer: false, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex w-full shrink-0 items-center border-b border-gray-25 bg-white p-2", children: [_jsx("button", { type: "button", "data-testid": "group-description-close", "aria-label": t("thread_detail.profile.group_description_close"), className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[var(--dc-color-nav-icon)]", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 24 }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col px-2", children: [_jsx("p", { className: "truncate text-[18px] font-bold leading-[1.6] text-gray-900", children: title }), _jsx("p", { "data-testid": "group-description-group-name", className: "truncate text-[13px] font-medium leading-[1.6] text-gray-900", children: groupName })] })] }), _jsx("p", { "data-testid": "group-description-content", className: "min-h-0 flex-1 overflow-y-auto whitespace-pre-line break-words px-4 pb-4 pt-3 text-[16px] leading-[1.6] text-gray-900", children: description })] }) }));
+};
+export default GroupDescriptionPanel;

package/dist/components/conversation-detail/profile/ThreadProfileActionRows.d.ts

@@ -7,9 +7,11 @@ export interface ThreadProfileActionRowsProps {
     isTargetActive: boolean;
     /** A non-member viewing a public group: no pin, delete or leave. */
     isViewOnly: boolean;
+    /** Group info drops delete history (spec: out of scope for groups). */
+    isGroupThread: boolean;
     canLeaveGroup: boolean;
     onLeaveGroup: () => void;
 }
-declare const ThreadProfileActionRows: ({ conversation, displayName, showPersonRows, isTargetActive, isViewOnly, canLeaveGroup, onLeaveGroup, }: ThreadProfileActionRowsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThreadProfileActionRows: ({ conversation, displayName, showPersonRows, isTargetActive, isViewOnly, isGroupThread, canLeaveGroup, onLeaveGroup, }: ThreadProfileActionRowsProps) => import("react/jsx-runtime").JSX.Element;
 export default ThreadProfileActionRows;
 //# sourceMappingURL=ThreadProfileActionRows.d.ts.map

package/dist/components/conversation-detail/profile/ThreadProfileActionRows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadProfileActionRows.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/profile/ThreadProfileActionRows.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAiDrE,MAAM,WAAW,4BAA4B;IAC3C,YAAY,EAAE,gBAAgB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,QAAA,MAAM,uBAAuB,GAAI,yGAQ9B,4BAA4B,4CAqE9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ThreadProfileActionRows.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/profile/ThreadProfileActionRows.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAiDrE,MAAM,WAAW,4BAA4B;IAC3C,YAAY,EAAE,gBAAgB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,UAAU,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,QAAA,MAAM,uBAAuB,GAAI,wHAS9B,4BAA4B,4CAsE9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/profile/ThreadProfileActionRows.js

@@ -9,12 +9,13 @@ const ProfileActionRow = ({ icon, label, testId, danger, chevron, onClick, }) =>
 const Card = ({ children }) => (_jsx("div", { className: "flex flex-col px-3 py-1.5", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: children }) }));
 // Orders, create group, add to group and delete history are UI-only until
 // their own tickets land (spec: "UI ready requirement").
-const ThreadProfileActionRows = ({ conversation, displayName, showPersonRows, isTargetActive, isViewOnly, canLeaveGroup, onLeaveGroup, }) => {
+const ThreadProfileActionRows = ({ conversation, displayName, showPersonRows, isTargetActive, isViewOnly, isGroupThread, canLeaveGroup, onLeaveGroup, }) => {
     const { t } = useTranslation("conversation-inbox");
     const { togglePin, isLimitOpen, closeLimit } = usePinConversation();
     const isPinned = !!conversation.isPinned;
     const showGroupRows = showPersonRows && isTargetActive;
     const canEditThread = !isViewOnly;
-    return (_jsxs(_Fragment, { children: [(showPersonRows || canEditThread) && (_jsxs(Card, { children: [showPersonRows && (_jsx(ProfileActionRow, { icon: "receipt-o", label: t("thread_detail.profile.orders", { name: displayName }), testId: "thread-profile-orders", chevron: true })), showGroupRows && (_jsx(ProfileActionRow, { icon: "user-three-o", label: t("thread_detail.profile.create_group", { name: displayName }), testId: "thread-profile-create-group", chevron: true })), showGroupRows && (_jsx(ProfileActionRow, { icon: "user-add-o", label: t("thread_detail.profile.add_to_group"), testId: "thread-profile-add-to-group", chevron: true })), canEditThread && (_jsx(ProfileActionRow, { icon: isPinned ? "thumbtack-off-o" : "thumbtack-o", label: t(isPinned ? "thread_detail.profile.unpin" : "thread_detail.profile.pin"), testId: "thread-profile-pin", onClick: () => togglePin(conversation) }))] })), (canLeaveGroup || canEditThread) && (_jsxs(Card, { children: [canLeaveGroup && (_jsx(ProfileActionRow, { icon: "logout-o", label: t("thread_detail.leave_group.action"), testId: "thread-profile-leave-group", danger: true, onClick: onLeaveGroup })), canEditThread && (_jsx(ProfileActionRow, { icon: "trash-alt-o", label: t("thread_detail.profile.delete_history"), testId: "thread-profile-delete-history", danger: true }))] })), _jsx(PinThreadLimitModal, { open: isLimitOpen, onClose: closeLimit })] }));
+    const showDeleteHistory = canEditThread && !isGroupThread;
+    return (_jsxs(_Fragment, { children: [(showPersonRows || canEditThread) && (_jsxs(Card, { children: [showPersonRows && (_jsx(ProfileActionRow, { icon: "receipt-o", label: t("thread_detail.profile.orders", { name: displayName }), testId: "thread-profile-orders", chevron: true })), showGroupRows && (_jsx(ProfileActionRow, { icon: "user-three-o", label: t("thread_detail.profile.create_group", { name: displayName }), testId: "thread-profile-create-group", chevron: true })), showGroupRows && (_jsx(ProfileActionRow, { icon: "user-add-o", label: t("thread_detail.profile.add_to_group"), testId: "thread-profile-add-to-group", chevron: true })), canEditThread && (_jsx(ProfileActionRow, { icon: isPinned ? "thumbtack-off-o" : "thumbtack-o", label: t(isPinned ? "thread_detail.profile.unpin" : "thread_detail.profile.pin"), testId: "thread-profile-pin", onClick: () => togglePin(conversation) }))] })), (canLeaveGroup || showDeleteHistory) && (_jsxs(Card, { children: [canLeaveGroup && (_jsx(ProfileActionRow, { icon: "logout-o", label: t("thread_detail.leave_group.action"), testId: "thread-profile-leave-group", danger: true, onClick: onLeaveGroup })), showDeleteHistory && (_jsx(ProfileActionRow, { icon: "trash-alt-o", label: t("thread_detail.profile.delete_history"), testId: "thread-profile-delete-history", danger: true }))] })), _jsx(PinThreadLimitModal, { open: isLimitOpen, onClose: closeLimit })] }));
 };
 export default ThreadProfileActionRows;

package/dist/components/conversation-detail/thread-search/ThreadSearchContent.d.ts

@@ -5,9 +5,11 @@ export interface ThreadSearchContentProps {
     conversation: ConversationItem;
     inputRef: RefObject<InputRef>;
     onClose: () => void;
+    /** Runs when a hit is picked, before the panel closes. */
+    onJump?: () => void;
     /** Host toast for a hit that was revoked meanwhile; the SDK toast shows otherwise. */
     onSearchMessageRevoked?: () => void;
 }
-declare const ThreadSearchContent: ({ conversation, inputRef, onClose, onSearchMessageRevoked, }: ThreadSearchContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThreadSearchContent: ({ conversation, inputRef, onClose, onJump, onSearchMessageRevoked, }: ThreadSearchContentProps) => import("react/jsx-runtime").JSX.Element;
 export default ThreadSearchContent;
 //# sourceMappingURL=ThreadSearchContent.d.ts.map

package/dist/components/conversation-detail/thread-search/ThreadSearchContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadSearchContent.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/thread-search/ThreadSearchContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAwC,KAAK,QAAQ,EAAE,MAAM,MAAM,CAAC;AAI3E,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,8BAA8B,CAAC;AAYtC,MAAM,WAAW,wBAAwB;IACvC,YAAY,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sFAAsF;IACtF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAGD,QAAA,MAAM,mBAAmB,GAAI,8DAK1B,wBAAwB,4CAoJ1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ThreadSearchContent.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/thread-search/ThreadSearchContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAwC,KAAK,QAAQ,EAAE,MAAM,MAAM,CAAC;AAI3E,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,8BAA8B,CAAC;AAYtC,MAAM,WAAW,wBAAwB;IACvC,YAAY,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sFAAsF;IACtF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAGD,QAAA,MAAM,mBAAmB,GAAI,sEAM1B,wBAAwB,4CAqJ1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/conversation-detail/thread-search/ThreadSearchContent.js

@@ -16,7 +16,7 @@ import ThreadSearchResultItem from "./ThreadSearchResultItem";
 import { THREAD_SEARCH_DEBOUNCE_MS } from "./utils";
 const SCROLL_TARGET_ID = "thread-search-results";
 // Lives inside the Drawer, which destroys it on close: every open starts from an empty keyword.
-const ThreadSearchContent = ({ conversation, inputRef, onClose, onSearchMessageRevoked, }) => {
+const ThreadSearchContent = ({ conversation, inputRef, onClose, onJump, onSearchMessageRevoked, }) => {
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation();
     const selfUserID = useAuthStore((state) => state.userID);
@@ -40,6 +40,7 @@ const ThreadSearchContent = ({ conversation, inputRef, onClose, onSearchMessageR
         store.setHeldHighlightClientMsgID(hit.clientMsgID);
         store.setSearchClientMsgID(hit.clientMsgID);
         emit("CHAT_LIST_SCROLL_TO_MESSAGE", hit.clientMsgID);
+        onJump === null || onJump === void 0 ? void 0 : onJump();
         onClose();
     };
     const renderBody = () => {

package/dist/components/conversation-detail/thread-search/ThreadSearchPanel.d.ts

@@ -3,9 +3,11 @@ interface ThreadSearchPanelProps {
     open: boolean;
     conversation: ConversationItem;
     onClose: () => void;
+    /** Runs when a hit is picked, before the panel closes. */
+    onJump?: () => void;
     /** Host toast for a hit that was revoked meanwhile; the SDK toast shows otherwise. */
     onSearchMessageRevoked?: () => void;
 }
-declare const ThreadSearchPanel: ({ open, conversation, onClose, onSearchMessageRevoked, }: ThreadSearchPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThreadSearchPanel: ({ open, conversation, onClose, onJump, onSearchMessageRevoked, }: ThreadSearchPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default ThreadSearchPanel;
 //# sourceMappingURL=ThreadSearchPanel.d.ts.map

package/dist/components/conversation-detail/thread-search/ThreadSearchPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadSearchPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/thread-search/ThreadSearchPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sFAAsF;IACtF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,iBAAiB,GAAI,0DAKxB,sBAAsB,4CAyBxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ThreadSearchPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/thread-search/ThreadSearchPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sFAAsF;IACtF,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,iBAAiB,GAAI,kEAMxB,sBAAsB,4CA0BxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/conversation-detail/thread-search/ThreadSearchPanel.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Drawer } from "antd";
 import ThreadSearchContent from "./ThreadSearchContent";
-const ThreadSearchPanel = ({ open, conversation, onClose, onSearchMessageRevoked, }) => {
+const ThreadSearchPanel = ({ open, conversation, onClose, onJump, onSearchMessageRevoked, }) => {
     const inputRef = useRef(null);
     return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", "data-cp-name": "ThreadSearchPanel", styles: { body: { padding: 0 } }, getContainer: false, destroyOnHidden: true, 
         // rc-drawer focuses its own panel after mount, which beats autoFocus.
-        afterOpenChange: (visible) => { var _a; return visible && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus()); }, children: _jsx(ThreadSearchContent, { conversation: conversation, inputRef: inputRef, onClose: onClose, onSearchMessageRevoked: onSearchMessageRevoked }) }));
+        afterOpenChange: (visible) => { var _a; return visible && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus()); }, children: _jsx(ThreadSearchContent, { conversation: conversation, inputRef: inputRef, onClose: onClose, onJump: onJump, onSearchMessageRevoked: onSearchMessageRevoked }) }));
 };
 export default ThreadSearchPanel;

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

@@ -1,10 +1,17 @@
+export declare enum InboxTab {
+    Messages = "MESSAGES",
+    Community = "COMMUNITY"
+}
 export interface ConversationInboxHeaderProps {
     onOpenSearch?: () => void;
     /** Overrides the default "tabs.messages" i18n title (e.g. Mall buyer's fixed "Tin nhắn" label). */
     title?: string;
     /** Extra action rendered after the search icon — e.g. Mall seller's contact icon. */
     rightSlot?: React.ReactNode;
+    /** With onChangeTab, shows the Tin nhắn | Cộng đồng tabs instead of the single title. */
+    activeTab?: InboxTab;
+    onChangeTab?: (tab: InboxTab) => void;
 }
-declare const ConversationInboxHeader: ({ onOpenSearch, title, rightSlot, }: ConversationInboxHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConversationInboxHeader: ({ onOpenSearch, title, rightSlot, activeTab, onChangeTab, }: ConversationInboxHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default ConversationInboxHeader;
 //# sourceMappingURL=ConversationInboxHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationInboxHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxHeader.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,4BAA4B;IAC3C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,uBAAuB,GAAI,qCAI9B,4BAA4B,4CAiC9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationInboxHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxHeader.tsx"],"names":[],"mappings":"AAMA,oBAAY,QAAQ;IAClB,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAOD,MAAM,WAAW,4BAA4B;IAC3C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yFAAyF;IACzF,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CACvC;AA8CD,QAAA,MAAM,uBAAuB,GAAI,6DAM9B,4BAA4B,4CA0C9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,9 +1,26 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../components/icon";
-const ConversationInboxHeader = ({ onOpenSearch, title, rightSlot, }) => {
+export var InboxTab;
+(function (InboxTab) {
+    InboxTab["Messages"] = "MESSAGES";
+    InboxTab["Community"] = "COMMUNITY";
+})(InboxTab || (InboxTab = {}));
+const INBOX_TABS = [
+    { key: InboxTab.Messages, labelKey: "tabs.messages" },
+    { key: InboxTab.Community, labelKey: "tabs.community" },
+];
+const HeaderTab = ({ label, active, testId, onClick }) => {
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx("pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px]", active ? "text-[var(--dc-color-primary)]" : "text-gray-400"), children: label }), _jsx("span", { className: clsx("h-[3px] w-full rounded-t", active ? "bg-[var(--dc-color-primary)]" : "bg-transparent") })] }));
+    const className = "flex h-full flex-col items-center justify-end px-3";
+    if (!onClick)
+        return _jsx("div", { className: className, children: content });
+    return (_jsx("button", { type: "button", role: "tab", "aria-selected": active, "data-testid": testId, className: clsx(className, "cursor-pointer"), onClick: onClick, children: content }));
+};
+const ConversationInboxHeader = ({ onOpenSearch, title, rightSlot, activeTab = InboxTab.Messages, onChangeTab, }) => {
     const { t } = useTranslation("conversation-inbox");
-    return (_jsx("div", { "data-testid": "conversation-inbox-header", "data-cp-name": "ConversationInboxHeader", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsxs("div", { className: "flex h-12 items-end px-3", children: [_jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-[var(--dc-color-primary)]", children: title !== null && title !== void 0 ? title : t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-[var(--dc-color-primary)]" })] }), _jsxs("div", { className: "ml-auto mb-1.5 flex shrink-0 items-center gap-2", children: [onOpenSearch && (_jsx("button", { type: "button", "data-testid": "conversation-inbox-search", "aria-label": t("search_placeholder"), className: "flex shrink-0 cursor-pointer items-center justify-center p-1 text-[var(--dc-color-nav-icon)]", onClick: onOpenSearch, children: _jsx(Icon, { icon: "search-o", size: 24 }) })), rightSlot] })] }) }));
+    return (_jsx("div", { "data-testid": "conversation-inbox-header", "data-cp-name": "ConversationInboxHeader", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsxs("div", { className: "flex h-12 items-end px-3", children: [onChangeTab ? (_jsx("div", { role: "tablist", className: "flex h-full items-end", children: INBOX_TABS.map((tab) => (_jsx(HeaderTab, { label: t(tab.labelKey), active: activeTab === tab.key, testId: `conversation-inbox-tab-${tab.key.toLowerCase()}`, onClick: () => onChangeTab(tab.key) }, tab.key))) })) : (_jsx(HeaderTab, { label: title !== null && title !== void 0 ? title : t("tabs.messages"), active: true })), _jsxs("div", { className: "ml-auto mb-1.5 flex shrink-0 items-center gap-2", children: [onOpenSearch && (_jsx("button", { type: "button", "data-testid": "conversation-inbox-search", "aria-label": t("search_placeholder"), className: "flex shrink-0 cursor-pointer items-center justify-center p-1 text-[var(--dc-color-nav-icon)]", onClick: onOpenSearch, children: _jsx(Icon, { icon: "search-o", size: 24 }) })), rightSlot] })] }) }));
 };
 export default ConversationInboxHeader;

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

@@ -0,0 +1,3 @@
+declare const PublicGroupList: () => import("react/jsx-runtime").JSX.Element;
+export default PublicGroupList;
+//# sourceMappingURL=PublicGroupList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PublicGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/PublicGroupList.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,eAAe,+CAqFpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spin } from "antd";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useTranslation } from "react-i18next";
+import { useChatContext } from "../../context/ChatContext";
+import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
+import { useSearchPublicGroups } from "../../hooks/search/useSearchPublicGroups";
+import useConversationStore from "../../store/conversation";
+import { ConnectStatus } from "../../types/chat";
+import { ContactSearchStateMessage, PublicGroupResultItem, buildContactSearchParams, } from "./contact-search";
+const SCROLL_TARGET_ID = "inbox-public-group-scroll";
+// Inbox `Cộng đồng` tab: every public group the seller can see, joined or not,
+// from the same searchPublicGroups call chat-mobile's CommunityTab uses.
+const PublicGroupList = () => {
+    const { t } = useTranslation("conversation-inbox");
+    const onNavigate = useChatNavigate();
+    const setPendingResolveTarget = useConversationStore((state) => state.setPendingResolveTarget);
+    const { connectStatus } = useChatContext();
+    // The tab can be opened while the engine still boots; a call then fails at
+    // once and would leave the error state with nothing to retry it.
+    const { groups, fetchNextPage, hasNextPage, isFetchingNextPage, isPending, isError, } = useSearchPublicGroups({
+        searchTerm: "",
+        allowEmptyTerm: true,
+        enabled: connectStatus === ConnectStatus.Connected,
+    });
+    const handleOpenGroup = (groupID) => {
+        const target = { groupId: groupID };
+        setPendingResolveTarget(target);
+        onNavigate(`${window.location.pathname}?${buildContactSearchParams(target).toString()}`);
+    };
+    if (isPending) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) }));
+    }
+    if (isError) {
+        return (_jsx(ContactSearchStateMessage, { testId: "inbox-public-group-failed", children: t("contact_search.failed") }));
+    }
+    if (groups.length === 0) {
+        return (_jsx(ContactSearchStateMessage, { testId: "inbox-public-group-empty", children: t("community.empty") }));
+    }
+    return (_jsx("div", { id: SCROLL_TARGET_ID, "data-testid": "inbox-public-group-list", "data-cp-name": "PublicGroupList", className: "flex-1 overflow-y-auto", children: _jsx(InfiniteScroll, { dataLength: groups.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: groups.map((group) => (_jsx(PublicGroupResultItem, { group: group, onOpen: handleOpenGroup, stayOnJoin: true }, group.groupID))) }) }));
+};
+export default PublicGroupList;

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

@@ -2,7 +2,9 @@ import type { SearchPublicGroupInfo } from "@droppii-org/wasm-client-sdk";
 interface PublicGroupResultItemProps {
     group: SearchPublicGroupInfo;
     onOpen: (groupID: string) => void;
+    /** Inbox `Cộng đồng` tab: a join keeps the seller on the list and toasts instead of opening the thread. */
+    stayOnJoin?: boolean;
 }
-declare const PublicGroupResultItem: ({ group, onOpen, }: PublicGroupResultItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const PublicGroupResultItem: ({ group, onOpen, stayOnJoin, }: PublicGroupResultItemProps) => import("react/jsx-runtime").JSX.Element;
 export default PublicGroupResultItem;
 //# sourceMappingURL=PublicGroupResultItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PublicGroupResultItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/PublicGroupResultItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAK1E,UAAU,0BAA0B;IAClC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,QAAA,MAAM,qBAAqB,GAAI,oBAG5B,0BAA0B,4CA4E5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"PublicGroupResultItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/contact-search/PublicGroupResultItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAK1E,UAAU,0BAA0B;IAClC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2GAA2G;IAC3G,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,qBAAqB,GAAI,gCAI5B,0BAA0B,4CAyF5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -1,22 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { Spin } from "antd";
+import { Spin, message as toastMessage } from "antd";
 import { useTranslation } from "react-i18next";
 import { useJoinPublicGroup } from "../../../hooks/group/useJoinPublicGroup";
 import GroupAvatar from "../../../components/group/GroupAvatar";
 import { CONTACT_SEARCH_AVATAR_SIZE } from "./constants";
-const PublicGroupResultItem = ({ group, onOpen, }) => {
+const PublicGroupResultItem = ({ group, onOpen, stayOnJoin = false, }) => {
     var _a, _b;
     const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation("common");
     const { mutate: joinGroup, isPending } = useJoinPublicGroup();
-    // Joined groups open straight away; the rest join first, then open.
+    // Joined groups open straight away; search joins first, then opens.
     const handleAction = () => {
         if (group.isJoined) {
             onOpen(group.groupID);
             return;
         }
-        joinGroup({ groupID: group.groupID }, { onSuccess: () => onOpen(group.groupID) });
+        if (!stayOnJoin) {
+            joinGroup({ groupID: group.groupID }, { onSuccess: () => onOpen(group.groupID) });
+            return;
+        }
+        joinGroup({ groupID: group.groupID }, {
+            onSuccess: () => toastMessage.success(tCommon("public_group_joined")),
+            onError: () => toastMessage.error(tCommon("join_group_failed")),
+        });
     };
     return (_jsxs("div", { "data-cp-name": "PublicGroupResultItem", "data-testid": `contact-search-public-group-${group.groupID}`, className: "flex items-center gap-2 border-b border-gray-25 bg-white p-3", children: [_jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-2 text-left", onClick: () => onOpen(group.groupID), children: [_jsx(GroupAvatar, { faceURL: group.faceURL, groupName: group.groupName, size: CONTACT_SEARCH_AVATAR_SIZE, className: "shrink-0" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1 pb-0.5", children: [_jsx("span", { className: "truncate text-[16px] font-medium leading-[1.6] text-black", children: group.groupName }), _jsxs("span", { className: "flex min-w-0 flex-col text-[14px] leading-[1.6] tracking-[0.14px] text-gray-600", children: [_jsx("span", { className: "truncate", children: t("contact_search.member_count", {
                                             count: (_a = group.memberCount) !== null && _a !== void 0 ? _a : 0,

package/dist/hooks/global/useGlobalEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,cAAc,YAwnB1B,CAAC"}
+{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,cAAc,YA4nB1B,CAAC"}

package/dist/hooks/global/useGlobalEvent.js

@@ -20,6 +20,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { PeerType } from "../../types/conversation";
 import { ignoreInternalLatestMessage } from "../../utils/common";
 import { invalidateSessionQueries } from "../../utils/queryHelpers";
+import { refreshPublicGroupLists } from "../../hooks/group/useJoinPublicGroup";
 import emitter from "../../utils/events";
 const notPushType = [MessageType.TypingMessage, MessageType.RevokeMessage];
 export const useGlobalEvent = () => {
@@ -381,6 +382,8 @@ export const useGlobalEvent = () => {
                 conversationList: state.conversationList.filter((conversation) => conversation.groupID !== data.groupID),
             }));
         }
+        // Public-group cards turn back to Tham gia (or drop out when disbanded).
+        void refreshPublicGroupLists(queryClient, data.groupID);
     };
     // Thin wrappers matching the SDK's fixed callback signature, forwarding
     // to leftGroupHandler with the right reason.
@@ -434,6 +437,8 @@ export const useGlobalEvent = () => {
         void queryClient.invalidateQueries({
             queryKey: [QUERY_KEYS.IS_JOINED_GROUP, data.groupID],
         });
+        // A first-time join from another device or an invite flips the card to Truy cập.
+        void refreshPublicGroupLists(queryClient, data.groupID);
     };
     const setIMListener = () => {
         //account

package/dist/hooks/group/useGroupSendRestriction.d.ts

@@ -0,0 +1,4 @@
+import { type ConversationItem } from "@droppii-org/wasm-client-sdk";
+export type GroupSendState = "checking" | "restricted" | "allowed";
+export declare const useGroupSendRestriction: (conversation?: ConversationItem | null) => GroupSendState;
+//# sourceMappingURL=useGroupSendRestriction.d.ts.map

package/dist/hooks/group/useGroupSendRestriction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupSendRestriction.d.ts","sourceRoot":"","sources":["../../../src/hooks/group/useGroupSendRestriction.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;AAKtC,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC;AAMnE,eAAO,MAAM,uBAAuB,GAClC,eAAe,gBAAgB,GAAG,IAAI,KACrC,cA4BF,CAAC"}

package/dist/hooks/group/useGroupSendRestriction.js

@@ -0,0 +1,31 @@
+"use client";
+import { GroupMemberRole, GroupStatus, } from "@droppii-org/wasm-client-sdk";
+import useConversationStore from "../../store/conversation";
+import { PeerType } from "../../types/conversation";
+import { useGroupPermission } from "./useGroupPermission";
+// A confirmed member is restricted with no SEND_MESSAGE permission, a muted
+// group (owner/admin exempt) or an own mute. "checking" lasts until the store
+// finishes this thread's membership check (it sets currentConversation last),
+// so a restricted member never sees the composer flash first.
+export const useGroupSendRestriction = (conversation) => {
+    var _a;
+    const isConfirmedGroup = (conversation === null || conversation === void 0 ? void 0 : conversation.peerType) === PeerType.GROUP;
+    const groupID = conversation === null || conversation === void 0 ? void 0 : conversation.groupID;
+    const isChecked = useConversationStore((state) => { var _a; return ((_a = state.currentConversation) === null || _a === void 0 ? void 0 : _a.conversationID) === (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID); });
+    const groupInfo = useConversationStore((state) => groupID ? state.currentGroupInfo.get(groupID) : undefined);
+    const member = useConversationStore((state) => groupID ? state.currentMemberInGroup.get(groupID) : undefined);
+    const permissions = useGroupPermission(groupID);
+    if (!isConfirmedGroup)
+        return "allowed";
+    if (!isChecked)
+        return "checking";
+    // Non-members are handled by the view-only footer, not this notice.
+    if (!member)
+        return "allowed";
+    const isGroupMuted = (groupInfo === null || groupInfo === void 0 ? void 0 : groupInfo.status) === GroupStatus.Muted &&
+        member.roleLevel === GroupMemberRole.Normal;
+    const isMemberMuted = ((_a = member.muteEndTime) !== null && _a !== void 0 ? _a : 0) > Date.now();
+    return !permissions.sendMessage || isGroupMuted || isMemberMuted
+        ? "restricted"
+        : "allowed";
+};

package/dist/hooks/group/useJoinPublicGroup.d.ts

@@ -1,6 +1,8 @@
+import { type QueryClient } from "@tanstack/react-query";
 interface JoinPublicGroupInput {
     groupID: string;
 }
+export declare const refreshPublicGroupLists: (queryClient: QueryClient, groupID: string) => Promise<void>;
 export declare const useJoinPublicGroup: () => import("@tanstack/react-query").UseMutationResult<unknown, Error, JoinPublicGroupInput, unknown>;
 export {};
 //# sourceMappingURL=useJoinPublicGroup.d.ts.map