@droppii-org/chat-sdk 0.6.56 → 0.7.1

package/dist/components/conversation/avatarTint.js

@@ -0,0 +1,27 @@
+// The five tints of the approved mockups; text shades keep at least 4.5:1 contrast.
+export const AVATAR_TINTS = [
+    "bg-secondary-25 text-secondary-600",
+    "bg-primary-25 text-primary-500",
+    "bg-success-25 text-success-900",
+    "bg-warning-25 text-warning-800",
+    "bg-[var(--dc-color-neutral-surface)] text-gray-900",
+];
+const hashString = (value) => {
+    let hash = 5381;
+    for (let i = 0; i < value.length; i += 1) {
+        hash = ((hash << 5) + hash + value.charCodeAt(i)) >>> 0;
+    }
+    return hash;
+};
+/** Same name always gets the same tint, so a customer keeps their colour across lists. */
+export const getAvatarTint = (name) => AVATAR_TINTS[hashString(name.trim().toLowerCase()) % AVATAR_TINTS.length];
+/** Initials from the last two words that start with a letter ("Lê Quốc Bảo" -> "QB"). */
+export const getInitials = (name) => {
+    const words = name
+        .split(/\s+/)
+        .map((word) => { var _a; return (_a = Array.from(word)[0]) !== null && _a !== void 0 ? _a : ""; })
+        .filter((char) => /\p{L}/u.test(char));
+    if (words.length === 0)
+        return "?";
+    return words.slice(-2).join("").toUpperCase();
+};

package/dist/components/conversation/folderEmptyState.d.ts

@@ -0,0 +1,2 @@
+export declare const getFolderEmptyKey: (filterKey: string) => string;
+//# sourceMappingURL=folderEmptyState.d.ts.map

package/dist/components/conversation/folderEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"folderEmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/folderEmptyState.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,KAAG,MACI,CAAC"}

package/dist/components/conversation/folderEmptyState.js

@@ -0,0 +1,14 @@
+import { SessionStatus, SessionTag } from "../../types/chat";
+import { ALL_GROUPS_KEY } from "../../components/session/sessionFilters";
+/** i18n key of the empty-list sentence for each folder; never reuses the search screen's wording. */
+const EMPTY_KEY_BY_FILTER = {
+    [SessionTag.SLOW_PROCESSING]: "folder_empty_slow_processing",
+    [SessionStatus.WAITING_PROCESS]: "folder_empty_waiting_process",
+    [SessionTag.AWAITING_REPLY]: "folder_empty_awaiting_reply",
+    [SessionStatus.IN_PROCESS]: "folder_empty_in_process",
+    [SessionTag.TEMPORARILY_PAUSED]: "folder_empty_temporarily_paused",
+    [SessionStatus.COMPLETED]: "folder_empty_completed",
+    [SessionStatus.UNASSIGNED]: "folder_empty_unassigned",
+    [ALL_GROUPS_KEY]: "folder_empty_all_groups",
+};
+export const getFolderEmptyKey = (filterKey) => { var _a; return (_a = EMPTY_KEY_BY_FILTER[filterKey]) !== null && _a !== void 0 ? _a : "folder_empty_default"; };

package/dist/components/conversation/internalNotePreview.d.ts

@@ -0,0 +1,6 @@
+import type { TFunction } from "i18next";
+import { parseLatestMessage } from "../../utils/common";
+type PreviewConversation = Parameters<typeof parseLatestMessage>[3];
+export declare const buildSessionPreview: (latestMsg: string, userId: string | undefined, t: TFunction, conversation: PreviewConversation) => string;
+export {};
+//# sourceMappingURL=internalNotePreview.d.ts.map

package/dist/components/conversation/internalNotePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internalNotePreview.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/internalNotePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAA2B,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAE7E,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAGpE,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,QAAQ,MAAM,GAAG,SAAS,EAC1B,GAAG,SAAS,EACZ,cAAc,mBAAmB,KAChC,MAQF,CAAC"}

package/dist/components/conversation/internalNotePreview.js

@@ -0,0 +1,11 @@
+import { isInternalLatestMessage, parseLatestMessage } from "../../utils/common";
+// Desk list only: an internal note reads "Tin nhắn nội bộ: …" instead of a sender name.
+export const buildSessionPreview = (latestMsg, userId, t, conversation) => {
+    if (!isInternalLatestMessage(latestMsg)) {
+        return parseLatestMessage(latestMsg, userId, t, conversation);
+    }
+    const text = parseLatestMessage(latestMsg, userId, t, conversation, {
+        includeSenderPrefix: false,
+    });
+    return text ? `${t("internal_preview_prefix")}: ${text}` : "";
+};

package/dist/components/conversation/listHeading.d.ts

@@ -0,0 +1,19 @@
+import type { ActiveFolder } from "../../store/sessionFolder";
+import type { ISessionSummaryResponse, ITeamSessionSummaryItem } from "../../types/dto";
+export interface ListHeading {
+    /** Small line above the title: "my messages" or the team name. */
+    contextKey?: string;
+    contextText?: string;
+    titleKey: string;
+    /** Count from the summary; hidden when 0 or unknown. */
+    count?: number;
+}
+interface HeadingInput {
+    folder: ActiveFolder;
+    mySummary?: ISessionSummaryResponse;
+    teams?: ITeamSessionSummaryItem[];
+}
+/** Heading text that always describes the folder the list is built from. */
+export declare const getListHeading: ({ folder, mySummary, teams }: HeadingInput) => ListHeading;
+export {};
+//# sourceMappingURL=listHeading.d.ts.map

package/dist/components/conversation/listHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listHeading.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/listHeading.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAMpF,MAAM,WAAW,WAAW;IAC1B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,KAAK,CAAC,EAAE,uBAAuB,EAAE,CAAC;CACnC;AAED,4EAA4E;AAC5E,eAAO,MAAM,cAAc,GAAI,8BAA8B,YAAY,KAAG,WAoB3E,CAAC"}

package/dist/components/conversation/listHeading.js

@@ -0,0 +1,24 @@
+import { getFilterConfig, getFilterCount, } from "../../components/session/sessionFilters";
+/** Heading text that always describes the folder the list is built from. */
+export const getListHeading = ({ folder, mySummary, teams }) => {
+    var _a;
+    if (folder.scope === "allGroups") {
+        return { contextKey: "my_messages", titleKey: "all_groups" };
+    }
+    const config = getFilterConfig(folder.filterKey);
+    const titleKey = (_a = config === null || config === void 0 ? void 0 : config.labelKey) !== null && _a !== void 0 ? _a : "active_sessions";
+    if (folder.scope === "team") {
+        const team = teams === null || teams === void 0 ? void 0 : teams.find((item) => item.teamId === folder.teamId);
+        return {
+            contextText: team === null || team === void 0 ? void 0 : team.teamName,
+            contextKey: team ? undefined : "team_messages",
+            titleKey,
+            count: config ? getFilterCount(config, team === null || team === void 0 ? void 0 : team.summary) : undefined,
+        };
+    }
+    return {
+        contextKey: "my_messages",
+        titleKey,
+        count: config ? getFilterCount(config, mySummary) : undefined,
+    };
+};

package/dist/components/conversation/rowDisplayName.d.ts

@@ -0,0 +1,7 @@
+/** Splits "Full Name (username)" so the list can show the name and keep the username for a tooltip. */
+export declare const splitDisplayName: (displayName: string) => {
+    name: string;
+    username?: string;
+};
+export declare const joinDisplayName: (name: string, username?: string) => string;
+//# sourceMappingURL=rowDisplayName.d.ts.map

package/dist/components/conversation/rowDisplayName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowDisplayName.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/rowDisplayName.ts"],"names":[],"mappings":"AAAA,uGAAuG;AACvG,eAAO,MAAM,gBAAgB,GAC3B,aAAa,MAAM,KAClB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAInC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MACvB,CAAC"}

package/dist/components/conversation/rowDisplayName.js

@@ -0,0 +1,8 @@
+/** Splits "Full Name (username)" so the list can show the name and keep the username for a tooltip. */
+export const splitDisplayName = (displayName) => {
+    const match = displayName.match(/^(.*?)\s*\(([^()]+)\)\s*$/);
+    if (!match || !match[1].trim())
+        return { name: displayName.trim() };
+    return { name: match[1].trim(), username: match[2].trim() };
+};
+export const joinDisplayName = (name, username) => username ? `${name} (${username})` : name;

package/dist/components/conversation/rowTime.d.ts

@@ -0,0 +1,4 @@
+import dayjs from "dayjs";
+/** List row time: "HH:mm" today, "Hôm qua" yesterday, otherwise "DD/MM" (with the year when it differs). */
+export declare const formatListRowTime: (timestamp: number, t: (key: string) => string, now?: dayjs.Dayjs) => string;
+//# sourceMappingURL=rowTime.d.ts.map

package/dist/components/conversation/rowTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowTime.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/rowTime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,4GAA4G;AAC5G,eAAO,MAAM,iBAAiB,GAC5B,WAAW,MAAM,EACjB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EAC1B,MAAK,KAAK,CAAC,KAAe,KACzB,MAKF,CAAC"}

package/dist/components/conversation/rowTime.js

@@ -0,0 +1,10 @@
+import dayjs from "dayjs";
+/** List row time: "HH:mm" today, "Hôm qua" yesterday, otherwise "DD/MM" (with the year when it differs). */
+export const formatListRowTime = (timestamp, t, now = dayjs()) => {
+    const date = dayjs(timestamp);
+    if (date.isSame(now, "day"))
+        return date.format("HH:mm");
+    if (date.isSame(now.subtract(1, "day"), "day"))
+        return t("yesterday");
+    return date.format(date.isSame(now, "year") ? "DD/MM" : "DD/MM/YYYY");
+};

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

@@ -1 +1 @@
-{"version":3,"file":"PinLimitModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinLimitModal.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,4CAmChE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PinLimitModal.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/PinLimitModal.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,GAAI,wBAAwB,kBAAkB,4CAqChE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, Button } from "antd";
 import { useTranslation } from "react-i18next";
+import useAuthStore from "../../store/auth";
 const PinLimitModal = ({ open, max, onClose }) => {
     const { t } = useTranslation();
-    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, width: 400, "data-cp-name": "PinLimitModal", children: _jsxs("div", { className: "flex flex-col gap-2 pt-2", role: "alertdialog", "aria-label": t("pin_limit_modal_title"), children: [_jsx("p", { className: "text-lg font-semibold text-gray-900", children: t("pin_limit_modal_title") }), _jsx("p", { className: "text-base text-gray-600", children: t("pin_limit_modal_description", { max }) }), _jsx(Button, { type: "primary", size: "large", block: true, className: "mt-2 !border-[var(--dc-color-primary)] !bg-[var(--dc-color-primary)] !text-white hover:!border-[var(--dc-color-primary-hover)] hover:!bg-[var(--dc-color-primary-hover)]", onClick: onClose, children: t("pin_limit_modal_confirm") })] }) }));
+    const isCrm = useAuthStore((state) => state.isCrm);
+    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, width: 400, destroyOnHidden: isCrm, "data-cp-name": "PinLimitModal", children: _jsxs("div", { className: "flex flex-col gap-2 pt-2", role: "alertdialog", "aria-label": t("pin_limit_modal_title"), children: [_jsx("p", { className: "text-lg font-semibold text-gray-900", children: t("pin_limit_modal_title") }), _jsx("p", { className: "text-base text-gray-600", children: t("pin_limit_modal_description", { max }) }), _jsx(Button, { type: "primary", size: "large", block: true, className: "mt-2 !border-[var(--dc-color-primary)] !bg-[var(--dc-color-primary)] !text-white hover:!border-[var(--dc-color-primary-hover)] hover:!bg-[var(--dc-color-primary-hover)]", onClick: onClose, children: t("pin_limit_modal_confirm") })] }) }));
 };
 export default PinLimitModal;

package/dist/components/group/AddMemberModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddMemberModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AddMemberModal.tsx"],"names":[],"mappings":"AAaA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,6BAIrB,mBAAmB,4CA6LrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AddMemberModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AddMemberModal.tsx"],"names":[],"mappings":"AAiBA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,6BAIrB,mBAAmB,4CA8OrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/group/AddMemberModal.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clickableProps, FOCUS_RING_CLASS } from "../../utils/a11yClickable";
 import { useDebounce } from "ahooks";
 import { Avatar, Button, Empty, Input, Modal, Spin, message } from "antd";
 import clsx from "clsx";
@@ -9,13 +10,18 @@ import { Icon } from "../../components/icon";
 import { useEligibleAccountsForGroup } from "../../hooks/group/useEligibleAccountsForGroup";
 import { useAddGroupMember } from "../../hooks/group/useAddGroupMember";
 import { formatMemberLabel } from "../../utils/common";
+import useAuthStore from "../../store/auth";
+import useConversationStore from "../../store/conversation";
+import GroupMemberPicker from "./GroupMemberPicker";
 const AddMemberModal = ({ open, groupID, onClose, }) => {
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const groupName = useConversationStore((state) => { var _a; return (_a = state.currentGroupInfo.get(groupID)) === null || _a === void 0 ? void 0 : _a.groupName; });
     const [search, setSearch] = useState("");
     const [selectedMembers, setSelectedMembers] = useState([]);
     const debouncedSearch = useDebounce(search, { wait: 300 });
-    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useEligibleAccountsForGroup(debouncedSearch, groupID, open);
+    const { accounts, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useEligibleAccountsForGroup(debouncedSearch, groupID, open && !isCrm);
     const { mutateAsync: addGroupMember, isPending: isSubmitting } = useAddGroupMember();
     const selectedIds = new Set(selectedMembers.map((member) => member.userID));
     const toggleMember = (account) => {
@@ -61,11 +67,16 @@ const AddMemberModal = ({ open, groupID, onClose, }) => {
             message.error(errorMessage);
         }
     };
-    return (_jsx(Modal, { "data-cp-name": "AddMemberModal", centered: true, open: open, onCancel: handleClose, footer: null, title: t("add_member.title"), getContainer: false, forceRender: true, children: _jsxs("div", { className: "flex flex-col gap-3 pt-2", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-[var(--dc-color-primary)] hover:text-[var(--dc-color-primary-hover)] hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), selectedMembers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedMembers.map((member) => (_jsxs("span", { className: "flex items-center gap-1.5 rounded-full bg-gray-100 pl-1 pr-2 py-1", children: [_jsx(Avatar, { src: member.avatar, size: 20, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "max-w-[120px] truncate text-sm text-gray-900", children: formatMemberLabel(member.displayName, member.username) }), _jsx(Icon, { icon: "close-b", size: 12, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID))) })), _jsx("div", { className: "max-h-72 overflow-y-auto", onScroll: handleListScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs(_Fragment, { children: [accounts.map((account) => {
+    if (isCrm) {
+        return (_jsx(Modal, { "data-cp-name": "AddMemberModal", centered: true, open: open, onCancel: handleClose, title: _jsxs("span", { className: "flex flex-col gap-0.5", children: [t("add_member.title_crm"), groupName && (_jsx("span", { className: "text-[13px] font-normal text-gray-600", children: groupName }))] }), width: 720, getContainer: false, destroyOnHidden: true, footer: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 text-left text-[13px] text-gray-600", children: t("add_member.selected_footer", { count: selectedMembers.length }) }), _jsx(Button, { onClick: handleClose, children: t("create_group.cancel_crm") }), _jsx(Button, { type: "primary", disabled: selectedMembers.length === 0, loading: isSubmitting, onClick: handleSubmit, children: selectedMembers.length > 0
+                            ? t("add_member.submit", { count: selectedMembers.length })
+                            : t("add_member.submit_empty") })] }), children: _jsx(GroupMemberPicker, { groupID: groupID, selectedMembers: selectedMembers, onChangeSelectedMembers: setSelectedMembers }) }));
+    }
+    return (_jsx(Modal, { "data-cp-name": "AddMemberModal", centered: true, open: open, onCancel: handleClose, footer: null, title: t("add_member.title"), getContainer: false, destroyOnHidden: true, children: _jsxs("div", { className: "flex flex-col gap-3 pt-2", children: [_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: t("create_group.search_member_placeholder"), prefix: _jsx(Icon, { icon: "search-o", size: 16, className: "text-gray-400" }) }), _jsxs("div", { className: "flex items-center justify-between px-1", children: [_jsx("span", { className: "text-sm text-gray-500", children: t("create_group.selected_count", { count: selectedMembers.length }) }), selectedMembers.length > 0 && (_jsx("button", { type: "button", className: "text-sm text-[var(--dc-color-primary)] hover:text-[var(--dc-color-primary-hover)] hover:underline", onClick: handleClearAll, children: t("create_group.clear_all") }))] }), selectedMembers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedMembers.map((member) => (_jsxs("span", { className: "flex items-center gap-1.5 rounded-full bg-gray-100 pl-1 pr-2 py-1", children: [_jsx(Avatar, { src: member.avatar, size: 20, className: "shrink-0", children: member.displayName.charAt(0) || "A" }), _jsx("span", { className: "max-w-[120px] truncate text-sm text-gray-900", children: formatMemberLabel(member.displayName, member.username) }), _jsx(Icon, { icon: "close-b", size: 12, className: "shrink-0 cursor-pointer text-gray-400", onClick: () => handleRemoveMember(member.userID) })] }, member.userID))) })), _jsx("div", { className: "max-h-72 overflow-y-auto", onScroll: handleListScroll, children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Spin, {}) })) : accounts.length === 0 ? (_jsx(Empty, { description: t("create_group.no_member_found") })) : (_jsxs(_Fragment, { children: [accounts.map((account) => {
                                 const isSelected = selectedIds.has(account.userID);
-                                return (_jsxs("div", { className: "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors duration-150 hover:bg-[#f5f5f5]", onClick: () => toggleMember(account), children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: formatMemberLabel(account.displayName, account.username) }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
+                                return (_jsxs("div", Object.assign({ className: `flex cursor-pointer items-center gap-3 rounded-lg px-3 py-3 transition-colors duration-150 hover:bg-[#f5f5f5] ${FOCUS_RING_CLASS}` }, clickableProps(() => toggleMember(account)), { "aria-pressed": isSelected, children: [_jsx(Avatar, { src: account.avatar, size: 40, className: "shrink-0", children: account.displayName.charAt(0) || "A" }), _jsx("span", { className: "flex-1 truncate text-base font-medium text-gray-900", children: formatMemberLabel(account.displayName, account.username) }), _jsx("span", { className: clsx("flex h-4 w-4 shrink-0 items-center justify-center rounded border", isSelected
                                                 ? "border-[var(--dc-color-primary)] bg-[var(--dc-color-primary)]"
-                                                : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }, account.userID));
+                                                : "border-gray-300 bg-white"), children: isSelected && (_jsx(Icon, { icon: "check-b", size: 11, className: "text-white" })) })] }), account.userID));
                             }), isFetchingNextPage && (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx(Spin, { size: "small" }) }))] })) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { onClick: handleClose, children: tCommon("cancel") }), _jsx(Button, { type: "primary", disabled: selectedMembers.length === 0, loading: isSubmitting, onClick: handleSubmit, children: t("add_member.confirm") })] })] }) }));
 };
 export default AddMemberModal;

package/dist/components/group/AdminPermissionModal.d.ts

@@ -1,5 +1,6 @@
 interface AdminPermissionModalMember {
     userID: string;
+    nickname?: string;
     permissions: string[];
 }
 interface AdminPermissionModalProps {

package/dist/components/group/AdminPermissionModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPermissionModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AdminPermissionModal.tsx"],"names":[],"mappings":"AAqBA,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IAKpC,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5E;AAwCD,QAAA,MAAM,oBAAoB,GAAI,uEAO3B,yBAAyB,mDAgK3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"AdminPermissionModal.d.ts","sourceRoot":"","sources":["../../../src/components/group/AdminPermissionModal.tsx"],"names":[],"mappings":"AAwBA,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IAKpC,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5E;AAwCD,QAAA,MAAM,oBAAoB,GAAI,uEAO3B,yBAAyB,mDA+N3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/group/AdminPermissionModal.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { ConfigProvider, Modal, Switch, message } from "antd";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,9 @@ import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
 import { useSetAdminRolePermissions, useSetGroupMemberPermissions, } from "../../hooks/group/useGroupMemberActions";
 import { Icon } from "../../components/icon";
+import useAuthStore from "../../store/auth";
+import PermissionPanelCrm, { PermissionRowList } from "./PermissionPanelCrm";
+import DisableSendPermissionConfirm from "./DisableSendPermissionConfirm";
 import { ANTD_PRIMARY_COLOR_VAR } from "../../constants";
 import { GROUP_PERMISSION_KEY } from "../../constants/im";
 import { changedSwitches, commonSwitchStates, toRolePermissionChange, } from "../../utils/groupPermissionSwitches";
@@ -40,7 +43,9 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member,
     const { members: groupMembers } = useGroupMembers(member ? undefined : groupID);
     const { mutateAsync: setMemberPermissions } = useSetGroupMemberPermissions();
     const { mutateAsync: setAdminRolePermissions } = useSetAdminRolePermissions();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [isSaving, setIsSaving] = useState(false);
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
     const [edits, setEdits] = useState({});
     useEffect(() => {
         if (open)
@@ -52,10 +57,18 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member,
     const changes = changedSwitches(baseline, pending);
     const hasChanges = Object.keys(changes).length > 0;
     const setSwitch = (name, checked) => setEdits((prev) => (Object.assign(Object.assign({}, prev), { [name]: checked })));
+    const requestSave = () => {
+        if (isCrm && changes.sendMessage === false) {
+            setIsConfirmOpen(true);
+            return;
+        }
+        void handleSave();
+    };
     const handleSave = async () => {
         var _a, _b;
         if (!groupID || !hasChanges)
             return;
+        setIsConfirmOpen(false);
         setIsSaving(true);
         try {
             if (member) {
@@ -80,12 +93,34 @@ const AdminPermissionModal = ({ open, groupID, onClose, inline = false, member,
             setIsSaving(false);
         }
     };
+    const crmRows = [
+        ["sendMessage", "permission_send_message", "permission_desc_send_message"],
+        ["pinMessage", "permission_pin_message", "permission_desc_pin_message"],
+        ["viewMemberInformation", "permission_view_member_info", "permission_desc_view_member_info"],
+        ["addMember", "permission_add_member", "permission_desc_add_member"],
+        ["removeMember", "permission_remove_member", "permission_desc_remove_member"],
+        ["updateGroupInfo", "permission_update_group_info", "permission_desc_update_group_info"],
+    ].map(([name, label, description]) => ({
+        key: name,
+        label: t(label),
+        description: t(description),
+        checked: pending[name],
+        onChange: (checked) => setSwitch(name, checked),
+    }));
     const rows = (_jsx(ConfigProvider, { theme: { token: { colorPrimary: ANTD_PRIMARY_COLOR_VAR } }, children: _jsxs("div", { className: "flex flex-col py-2", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_send_message") }), _jsx(Switch, { checked: pending.sendMessage, onChange: (checked) => setSwitch("sendMessage", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_pin_unpin_message") }), _jsx(Switch, { checked: pending.pinMessage, onChange: (checked) => setSwitch("pinMessage", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_view_member_info") }), _jsx(Switch, { checked: pending.viewMemberInformation, onChange: (checked) => setSwitch("viewMemberInformation", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_add_member") }), _jsx(Switch, { checked: pending.addMember, onChange: (checked) => setSwitch("addMember", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_remove_member") }), _jsx(Switch, { checked: pending.removeMember, onChange: (checked) => setSwitch("removeMember", checked) })] }), _jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [_jsx("span", { className: "text-sm", children: t("permission_update_group_info") }), _jsx(Switch, { checked: pending.updateGroupInfo, onChange: (checked) => setSwitch("updateGroupInfo", checked) })] })] }) }));
+    const confirm = (_jsx(DisableSendPermissionConfirm, { open: isConfirmOpen, title: member
+            ? t("disable_send_permission_title_member", { name: member.nickname })
+            : t("disable_send_permission_title_all_admins"), loading: isSaving, onConfirm: handleSave, onCancel: () => setIsConfirmOpen(false) }));
+    if (inline && isCrm) {
+        if (!open)
+            return null;
+        return (_jsxs(_Fragment, { children: [_jsx(PermissionPanelCrm, { title: t("admin_permission_row"), rows: crmRows, canSave: hasChanges, isSaving: isSaving, onBack: onClose, onSave: requestSave }), confirm] }));
+    }
     if (inline) {
         if (!open)
             return null;
-        return (_jsxs("div", { className: "absolute inset-0 bg-white flex flex-col z-10", children: [_jsxs("div", { className: "flex w-full items-center border-b border-gray-100 p-2", children: [_jsx("button", { type: "button", 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("admin_permission_settings") })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [rows, _jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full border border-gray-300 text-gray-700 text-sm font-medium", onClick: onClose, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full bg-[var(--dc-color-primary)] text-white text-sm font-medium disabled:bg-gray-200 disabled:text-gray-400", disabled: !hasChanges || isSaving, onClick: handleSave, children: t("save") })] })] })] }));
+        return (_jsxs("div", { className: "absolute inset-0 bg-white flex flex-col z-10", children: [_jsxs("div", { className: "flex w-full items-center border-b border-gray-100 p-2", children: [_jsx("button", { type: "button", 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("admin_permission_settings") })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [rows, _jsxs("div", { className: "flex items-center justify-end gap-2 px-4 py-3 border-t border-gray-100", children: [_jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full border border-gray-300 text-gray-700 text-sm font-medium", onClick: onClose, children: t("cancel") }), _jsx("button", { type: "button", className: "px-4 py-1.5 rounded-full bg-[var(--dc-color-primary)] text-white text-sm font-medium disabled:bg-gray-200 disabled:text-gray-400", disabled: !hasChanges || isSaving, onClick: requestSave, children: t("save") })] })] }), confirm] }));
     }
-    return (_jsx(Modal, { centered: true, open: open, onOk: handleSave, onCancel: onClose, title: t("admin_permission_settings"), okText: t("save"), cancelText: t("cancel"), confirmLoading: isSaving, okButtonProps: { disabled: !hasChanges }, getContainer: false, forceRender: true, children: _jsx("div", { className: "mt-2", children: rows }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { centered: true, destroyOnHidden: true, open: open, onOk: requestSave, onCancel: onClose, title: t("admin_permission_settings"), okText: t("save"), cancelText: t(isCrm ? "action_cancel" : "cancel"), confirmLoading: isSaving, okButtonProps: { disabled: !hasChanges }, getContainer: false, children: _jsx("div", { className: isCrm ? "-mx-6" : "mt-2", children: isCrm ? _jsx(PermissionRowList, { rows: crmRows }) : rows }) }), confirm] }));
 };
 export default AdminPermissionModal;

package/dist/components/group/CreateGroupForm.d.ts

@@ -1,6 +1,8 @@
 interface CreateGroupFormProps {
     onDone: () => void;
+    /** CRM only: the modal footer the action bar renders into. */
+    footerEl?: HTMLElement | null;
 }
-declare const CreateGroupForm: ({ onDone }: CreateGroupFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const CreateGroupForm: ({ onDone, footerEl }: CreateGroupFormProps) => import("react/jsx-runtime").JSX.Element;
 export default CreateGroupForm;
 //# sourceMappingURL=CreateGroupForm.d.ts.map

package/dist/components/group/CreateGroupForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateGroupForm.d.ts","sourceRoot":"","sources":["../../../src/components/group/CreateGroupForm.tsx"],"names":[],"mappings":"AAeA,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,YAAY,oBAAoB,4CAqNxD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CreateGroupForm.d.ts","sourceRoot":"","sources":["../../../src/components/group/CreateGroupForm.tsx"],"names":[],"mappings":"AAiBA,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,eAAe,GAAI,sBAA6B,oBAAoB,4CA4OzE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/group/CreateGroupForm.js

@@ -9,8 +9,11 @@ import { useCreateGroup } from "../../hooks/group/useCreateGroup";
 import { useUploadFile } from "../../hooks/common/useUploadFile";
 import { validateFile } from "../../utils/fileValidation";
 import GroupMemberPicker from "./GroupMemberPicker";
+import CreateGroupFormCrmView from "./CreateGroupFormCrmView";
+import useAuthStore from "../../store/auth";
 const GROUP_NAME_MAX_LENGTH = 255;
-const CreateGroupForm = ({ onDone }) => {
+const CreateGroupForm = ({ onDone, footerEl = null }) => {
+    const isCrm = useAuthStore((state) => state.isCrm);
     const { t } = useTranslation("conversation-inbox");
     const { t: tCommon } = useTranslation("common");
     const { createGroup } = useCreateGroup();
@@ -97,6 +100,9 @@ const CreateGroupForm = ({ onDone }) => {
             description: t("create_group.privacy_public_desc"),
         },
     ], [t]);
+    if (isCrm) {
+        return (_jsx(CreateGroupFormCrmView, { groupName: groupName, maxNameLength: GROUP_NAME_MAX_LENGTH, onGroupNameChange: (value) => setGroupName(value.slice(0, GROUP_NAME_MAX_LENGTH)), isPublic: isPublic, onPublicChange: setIsPublic, avatarPreviewUrl: avatarPreviewUrl, isAvatarUploading: isAvatarUploading, onAvatarSelect: handleAvatarSelect, selectedMembers: selectedMembers, onChangeSelectedMembers: setSelectedMembers, canSubmit: canSubmit, isSubmitting: isSubmitting, onSubmit: handleSubmit, onCancel: onDone, footerEl: footerEl }));
+    }
     return (_jsxs("div", { className: "flex max-h-[70vh] flex-col", "data-cp-name": "CreateGroupForm", children: [_jsxs("div", { className: "flex flex-col overflow-y-auto pr-1", children: [_jsxs("div", { className: "flex items-center gap-4 py-6", children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg", showUploadList: false, beforeUpload: handleAvatarSelect, children: _jsxs("div", { className: "relative flex h-20 w-20 shrink-0 cursor-pointer items-center justify-center rounded-2xl bg-[var(--dc-color-primary-light)]", children: [avatarPreviewUrl ? (_jsx("img", { src: avatarPreviewUrl, alt: "", className: clsx("h-full w-full rounded-2xl object-cover", isAvatarUploading && "opacity-50") })) : (_jsx(Icon, { icon: "user-three-b", size: 32, className: "text-[var(--dc-color-primary)]" })), isAvatarUploading && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-black/10", children: _jsx("span", { className: "h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), _jsx("span", { className: "absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-gray-500", children: _jsx(Icon, { icon: "camera-b", size: 14, className: "text-white" }) })] }) }), _jsx(Input, { size: "large", value: groupName, onChange: (event) => setGroupName(event.target.value.slice(0, GROUP_NAME_MAX_LENGTH)), maxLength: GROUP_NAME_MAX_LENGTH, placeholder: t("create_group.name_placeholder"), className: "flex-1 text-base" })] }), _jsxs("div", { className: "flex flex-col gap-3 border-t border-gray-100 py-6", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-gray-400", children: t("create_group.privacy_label") }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: privacyOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => setIsPublic(option.value), className: clsx("rounded-xl border-2 p-4 text-left transition-colors", isPublic === option.value
                                         ? "border-[var(--dc-color-primary)] bg-[var(--dc-color-primary-light)]"
                                         : "border-gray-200 bg-white"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: option.icon, size: 18, className: isPublic === option.value

package/dist/components/group/CreateGroupFormCrmView.d.ts

@@ -0,0 +1,23 @@
+import type { EligibleAccountItem } from "../../hooks/group/useEligibleAccounts";
+interface CreateGroupFormCrmViewProps {
+    groupName: string;
+    maxNameLength: number;
+    onGroupNameChange: (value: string) => void;
+    isPublic: boolean;
+    onPublicChange: (value: boolean) => void;
+    avatarPreviewUrl: string;
+    isAvatarUploading: boolean;
+    onAvatarSelect: (file: File) => boolean;
+    selectedMembers: EligibleAccountItem[];
+    onChangeSelectedMembers: (members: EligibleAccountItem[]) => void;
+    canSubmit: boolean;
+    isSubmitting: boolean;
+    onSubmit: () => void;
+    onCancel: () => void;
+    /** Modal footer element the action bar renders into. */
+    footerEl: HTMLElement | null;
+}
+/** CRM layout of "Tạo nhóm chat": avatar + name, privacy radios, two-column picker, footer bar. */
+declare const CreateGroupFormCrmView: (props: CreateGroupFormCrmViewProps) => import("react/jsx-runtime").JSX.Element;
+export default CreateGroupFormCrmView;
+//# sourceMappingURL=CreateGroupFormCrmView.d.ts.map

package/dist/components/group/CreateGroupFormCrmView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateGroupFormCrmView.d.ts","sourceRoot":"","sources":["../../../src/components/group/CreateGroupFormCrmView.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAI7E,UAAU,2BAA2B;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,eAAe,EAAE,mBAAmB,EAAE,CAAC;IACvC,uBAAuB,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,mGAAmG;AACnG,QAAA,MAAM,sBAAsB,GAAI,OAAO,2BAA2B,4CAiGjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/group/CreateGroupFormCrmView.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Button, Input, Upload } from "antd";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
+import GroupMemberPicker from "./GroupMemberPicker";
+/** CRM layout of "Tạo nhóm chat": avatar + name, privacy radios, two-column picker, footer bar. */
+const CreateGroupFormCrmView = (props) => {
+    const { t } = useTranslation("conversation-inbox");
+    const options = [
+        { value: false, icon: "lock", label: t("create_group.privacy_private"), hint: t("create_group.privacy_private_hint") },
+        { value: true, icon: "globe", label: t("create_group.privacy_public"), hint: t("create_group.privacy_public_hint") },
+    ];
+    return (_jsxs("div", { className: "flex flex-col gap-4", "data-cp-name": "CreateGroupForm", children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg", showUploadList: false, beforeUpload: props.onAvatarSelect, children: _jsx("button", { type: "button", "aria-label": t("create_group.add_avatar"), title: t("create_group.add_avatar"), className: `flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-full border border-dashed border-gray-200 bg-gray-5 text-gray-600 ${FOCUS_RING_CLASS}`, children: props.avatarPreviewUrl ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            _jsx("img", { src: props.avatarPreviewUrl, alt: "", className: clsx("h-full w-full object-cover", props.isAvatarUploading && "opacity-50") })) : (_jsx(StrokeIcon, { name: "camera", size: 22 })) }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsxs("label", { htmlFor: "create-group-name", className: "text-[13px] font-medium text-gray-900", children: [_jsx("span", { className: "text-danger-600", children: "* " }), t("create_group.name_label")] }), _jsx(Input, { id: "create-group-name", size: "large", value: props.groupName, onChange: (event) => props.onGroupNameChange(event.target.value), maxLength: props.maxNameLength, placeholder: t("create_group.name_placeholder") })] })] }), _jsxs("fieldset", { className: "m-0 flex flex-col gap-2 border-0 p-0", children: [_jsx("legend", { className: "mb-2 p-0 text-[13px] font-medium text-gray-900", children: t("create_group.privacy_label") }), _jsx("div", { className: "flex gap-3", children: options.map((option) => {
+                            const checked = props.isPublic === option.value;
+                            return (_jsxs("label", { className: clsx("flex flex-1 cursor-pointer items-start gap-2.5 rounded-xl border p-3 focus-within:outline focus-within:outline-2 focus-within:outline-primary-200", checked ? "border-primary-400 bg-primary-25 shadow-[0_0_0_1px_var(--dc-color-primary)]" : "border-gray-50 bg-white"), children: [_jsx("input", { type: "radio", name: "group-privacy", checked: checked, onChange: () => props.onPublicChange(option.value), className: "m-0 mt-0.5 h-4 w-4 shrink-0 accent-primary-400" }), _jsxs("span", { className: "flex flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-sm font-semibold text-gray-900", children: [_jsx(StrokeIcon, { name: option.icon, size: 16 }), option.label] }), _jsx("span", { className: "text-[13px] leading-snug text-gray-600", children: option.hint })] })] }, String(option.value)));
+                        }) })] }), _jsxs("fieldset", { className: "m-0 flex flex-col gap-2 border-0 p-0", children: [_jsxs("legend", { className: "mb-2 p-0 text-[13px] font-medium text-gray-900", children: [t("create_group.members_label"), " ", _jsx("span", { className: "font-normal text-gray-600", children: t("create_group.members_owner_note") })] }), _jsx(GroupMemberPicker, { selectedMembers: props.selectedMembers, onChangeSelectedMembers: props.onChangeSelectedMembers })] }), props.footerEl &&
+                createPortal(_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex-1 text-left text-[13px] text-gray-600", children: t("create_group.selected_footer", { count: props.selectedMembers.length }) }), _jsx(Button, { onClick: props.onCancel, children: t("create_group.cancel_crm") }), _jsx(Button, { type: "primary", disabled: !props.canSubmit, loading: props.isSubmitting, onClick: props.onSubmit, children: t("create_group.submit") })] }), props.footerEl)] }));
+};
+export default CreateGroupFormCrmView;

package/dist/components/group/DisableSendPermissionConfirm.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+interface DisableSendPermissionConfirmProps {
+    open: boolean;
+    title: ReactNode;
+    loading?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare const DisableSendPermissionConfirm: ({ open, title, loading, onConfirm, onCancel, }: DisableSendPermissionConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export default DisableSendPermissionConfirm;
+//# sourceMappingURL=DisableSendPermissionConfirm.d.ts.map

package/dist/components/group/DisableSendPermissionConfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisableSendPermissionConfirm.d.ts","sourceRoot":"","sources":["../../../src/components/group/DisableSendPermissionConfirm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,iCAAiC;IACzC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,4BAA4B,GAAI,gDAMnC,iCAAiC,4CAiBnC,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/components/group/DisableSendPermissionConfirm.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ConfirmModal from "../../components/common/ConfirmModal";
+// CRM only: turning off "gửi tin nhắn" silences people at once, so ask first.
+const DisableSendPermissionConfirm = ({ open, title, loading, onConfirm, onCancel, }) => {
+    const { t } = useTranslation();
+    return (_jsx(ConfirmModal, { open: open, title: title, okText: t("disable_send_permission_ok"), cancelText: t("action_cancel"), onOk: onConfirm, onCancel: onCancel, okType: "danger", destructive: true, confirmLoading: loading, children: _jsx("p", { children: t("disable_send_permission_body") }) }));
+};
+export default DisableSendPermissionConfirm;

package/dist/components/group/GroupCompositeAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupCompositeAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupCompositeAvatar.tsx"],"names":[],"mappings":"AAOA,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,QAAA,MAAM,oBAAoB,GAAI,gEAO3B,yBAAyB,4CA2E3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"GroupCompositeAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/group/GroupCompositeAvatar.tsx"],"names":[],"mappings":"AASA,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,QAAA,MAAM,oBAAoB,GAAI,gEAO3B,yBAAyB,4CAiJ3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/group/GroupCompositeAvatar.js

@@ -4,6 +4,8 @@ import { Avatar } from "antd";
 import { GroupMemberRole } from "@droppii-org/wasm-client-sdk";
 import { useMemo } from "react";
 import { useGroupMembers } from "../../hooks/group/useGroupMembers";
+import useAuthStore from "../../store/auth";
+import TintedAvatar from "../../components/common/TintedAvatar";
 // AC-Default2 (DROPPII-29976): when a group is created without a picked
 // avatar, show two overlapping avatars (owner bottom-left, first-joined
 // non-owner member top-right) instead of a static placeholder image —
@@ -11,17 +13,20 @@ import { useGroupMembers } from "../../hooks/group/useGroupMembers";
 // no image compositing/upload needed.
 const GroupCompositeAvatar = ({ groupID, faceURL, ownerUserID, groupName, size = 56, className, }) => {
     var _a, _b;
+    const isCrm = useAuthStore((state) => state.isCrm);
     const shouldLoadMembers = !faceURL && Boolean(groupID);
     const { members } = useGroupMembers(shouldLoadMembers ? groupID : undefined);
-    const { ownerFaceURL, ownerLetter, hasFirstMember, firstMemberFaceURL, firstMemberLetter } = useMemo(() => {
-        var _a, _b, _c, _d, _e;
+    const { ownerFaceURL, ownerLetter, ownerName, hasFirstMember, firstMemberFaceURL, firstMemberLetter, firstMemberName, } = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!members.length) {
             return {
                 ownerFaceURL: undefined,
                 ownerLetter: undefined,
+                ownerName: "",
                 hasFirstMember: false,
                 firstMemberFaceURL: undefined,
                 firstMemberLetter: undefined,
+                firstMemberName: "",
             };
         }
         // Prefer the explicit ownerUserID when the caller has it (e.g. GroupItem);
@@ -33,20 +38,50 @@ const GroupCompositeAvatar = ({ groupID, faceURL, ownerUserID, groupName, size =
         return {
             ownerFaceURL: owner === null || owner === void 0 ? void 0 : owner.faceURL,
             ownerLetter: (_c = (_b = owner === null || owner === void 0 ? void 0 : owner.nickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0),
+            ownerName: (_d = owner === null || owner === void 0 ? void 0 : owner.nickname) !== null && _d !== void 0 ? _d : "",
             hasFirstMember: Boolean(firstMember),
             firstMemberFaceURL: firstMember === null || firstMember === void 0 ? void 0 : firstMember.faceURL,
-            firstMemberLetter: (_e = (_d = firstMember === null || firstMember === void 0 ? void 0 : firstMember.nickname) === null || _d === void 0 ? void 0 : _d.charAt) === null || _e === void 0 ? void 0 : _e.call(_d, 0),
+            firstMemberLetter: (_f = (_e = firstMember === null || firstMember === void 0 ? void 0 : firstMember.nickname) === null || _e === void 0 ? void 0 : _e.charAt) === null || _f === void 0 ? void 0 : _f.call(_e, 0),
+            firstMemberName: (_g = firstMember === null || firstMember === void 0 ? void 0 : firstMember.nickname) !== null && _g !== void 0 ? _g : "",
         };
     }, [members, ownerUserID]);
     if (faceURL) {
+        if (isCrm) {
+            return (_jsx(TintedAvatar, { name: groupName !== null && groupName !== void 0 ? groupName : "", src: faceURL, size: size, className: className }));
+        }
         return (_jsx(Avatar, { src: faceURL, size: size, className: className, children: ((_a = groupName === null || groupName === void 0 ? void 0 : groupName.charAt) === null || _a === void 0 ? void 0 : _a.call(groupName, 0)) || "G" }));
     }
     // Not enough members yet to compose two avatars (still loading, or a
     // solo group with no other member) — fall back to a single placeholder.
     if (!shouldLoadMembers || !hasFirstMember) {
+        if (isCrm) {
+            return (_jsx(TintedAvatar, { name: ownerName || groupName || "", size: size, className: className }));
+        }
         return (_jsx(Avatar, { size: size, className: className, children: ownerLetter || ((_b = groupName === null || groupName === void 0 ? void 0 : groupName.charAt) === null || _b === void 0 ? void 0 : _b.call(groupName, 0)) || "G" }));
     }
     const subSize = Math.round(size * 0.62);
-    return (_jsxs("div", { className: className, style: { position: "relative", width: size, height: size, flexShrink: 0 }, children: [_jsx(Avatar, { src: ownerFaceURL, size: subSize, style: { position: "absolute", left: 0, bottom: 0, border: "2px solid white" }, children: ownerLetter || "A" }), _jsx(Avatar, { src: firstMemberFaceURL, size: subSize, style: { position: "absolute", right: 0, top: 0, border: "2px solid white" }, children: firstMemberLetter || "A" })] }));
+    // CRM: larger circles with a white gap between them and a hairline ring so photos
+    // don't melt into the white header.
+    if (isCrm) {
+        const crmSubSize = Math.round(size * 0.72);
+        const ring = { boxShadow: "0 0 0 2px #FFFFFF, 0 0 0 3px #DDDEDF" };
+        return (_jsxs("div", { className: className, style: {
+                position: "relative",
+                width: size,
+                height: size,
+                flexShrink: 0,
+            }, children: [_jsx("span", { className: "absolute bottom-0 left-0 rounded-full", style: ring, children: _jsx(TintedAvatar, { name: ownerName, src: ownerFaceURL, size: crmSubSize }) }), _jsx("span", { className: "absolute right-0 top-0 rounded-full", style: ring, children: _jsx(TintedAvatar, { name: firstMemberName, src: firstMemberFaceURL, size: crmSubSize }) })] }));
+    }
+    return (_jsxs("div", { className: className, style: { position: "relative", width: size, height: size, flexShrink: 0 }, children: [_jsx(Avatar, { src: ownerFaceURL, size: subSize, style: {
+                    position: "absolute",
+                    left: 0,
+                    bottom: 0,
+                    border: "2px solid white",
+                }, children: ownerLetter || "A" }), _jsx(Avatar, { src: firstMemberFaceURL, size: subSize, style: {
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    border: "2px solid white",
+                }, children: firstMemberLetter || "A" })] }));
 };
 export default GroupCompositeAvatar;