@droppii-org/chat-sdk 0.6.56 → 0.7.1

package/dist/components/message/footer/MediaActions.js

@@ -7,21 +7,30 @@ import { Button, Upload, message as antdMessage } from "antd";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import EmojiPicker from "./EmojiPicker";
+import { useEscapeLayer } from "../../../hooks/common/useEscapeLayer";
+import { useCloseOnSidePanelOpen } from "../../../hooks/common/useCloseOnSidePanelOpen";
 import { Icon } from "../../../components/icon";
 import { createUploadFile, validateFile, } from "../../../utils/fileValidation";
 import { DOCUMENT_TYPES } from "./editorConfig";
 import CannedResponseIcon from "../../../assets/svg/canned-response";
 import { useMessageFooterContext } from ".";
 import useAuthStore from "../../../store/auth";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 const EmojiIcon = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.59997 12.4C7.59997 12.4 8.49997 13.2 9.99997 13.2C11.5 13.2 12.4 12.4 12.4 12.4M14 8.39997C14 8.8418 13.6418 9.19997 13.2 9.19997C12.7581 9.19997 12.4 8.8418 12.4 8.39997C12.4 7.95814 12.7581 7.59997 13.2 7.59997C13.6418 7.59997 14 7.95814 14 8.39997ZM18 9.99997C18 14.4182 14.4182 18 9.99997 18C5.58169 18 1.99997 14.4182 1.99997 9.99997C1.99997 5.58169 5.58169 1.99997 9.99997 1.99997C14.4182 1.99997 18 5.58169 18 9.99997ZM7.59997 8.39997C7.59997 8.8418 7.2418 9.19997 6.79997 9.19997C6.35814 9.19997 5.99997 8.8418 5.99997 8.39997C5.99997 7.95814 6.35814 7.59997 6.79997 7.59997C7.2418 7.59997 7.59997 7.95814 7.59997 8.39997Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 const AttachIcon = (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15.6 10.0001V11.2001C15.6 14.5137 12.9137 17.2001 9.59998 17.2001C6.28626 17.2001 3.59998 14.5137 3.59998 11.2001V6.79999C3.59998 4.59085 5.39084 2.79999 7.59998 2.79999C9.8091 2.79999 11.6 4.59085 11.6 6.79999V11.2C11.6 12.3045 10.7045 13.2 9.59998 13.2C8.49542 13.2 7.59998 12.3045 7.59998 11.2V7.99999", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, }) {
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, crmComposer = false, }) {
     const [editor] = useLexicalComposerContext();
     const { t } = useTranslation();
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
     const containerRef = useRef(null);
     const { isOpenCanned, setIsOpenCanned } = useMessageFooterContext();
     const isCrm = useAuthStore((state) => state.isCrm);
+    useEscapeLayer(showEmojiPicker, () => setShowEmojiPicker(false));
+    useEscapeLayer(isOpenCanned, () => setIsOpenCanned(false));
+    useCloseOnSidePanelOpen(() => {
+        setShowEmojiPicker(false);
+        setIsOpenCanned(false);
+    });
     const handleEmojiSelect = useCallback((emoji) => {
         editor.update(() => {
             const selection = $getSelection();
@@ -86,7 +95,15 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const btnClass = buttonClassName !== null && buttonClassName !== void 0 ? buttonClassName : "w-8 h-8 p-0 text-gray-500 hover:text-gray-700 hover:bg-gray-100";
-    return (_jsxs("div", { "data-cp-name": "MediaActions", className: "flex items-center gap-1 relative", ref: containerRef, children: [isCrm && (_jsx(Button, { type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && "bg-blue-100 text-blue-600"), onClick: onPressCanned, children: _jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") }) })), _jsx(Button, { type: "text", shape: "default", className: clsx(btnClass, showEmojiPicker &&
-                    "bg-[var(--dc-color-primary-light)] text-[var(--dc-color-primary)]"), onClick: () => setShowEmojiPicker(!showEmojiPicker), children: EmojiIcon }), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, { type: "text", shape: "default", className: btnClass, children: _jsx(Icon, { icon: "image-02-o", size: 22 }) }) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, { type: "text", shape: "default", className: btnClass, children: AttachIcon }) })] })), showEmojiPicker && (_jsx(EmojiPicker, { onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
+    const btnClass = crmComposer
+        ? "!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 text-gray-600 hover:!bg-gray-5 hover:!text-gray-900"
+        : buttonClassName !== null && buttonClassName !== void 0 ? buttonClassName : "w-8 h-8 p-0 text-gray-500 hover:text-gray-700 hover:bg-gray-100";
+    const activeCls = crmComposer
+        ? "!bg-primary-25 !text-primary-500"
+        : "bg-blue-100 text-blue-600";
+    const crmLabel = (key) => crmComposer ? { "aria-label": t(key), title: t(key) } : {};
+    return (_jsxs("div", { "data-cp-name": "MediaActions", className: clsx("flex items-center relative", crmComposer ? "gap-0.5" : "gap-1"), ref: containerRef, children: [isCrm && (_jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && activeCls), onClick: onPressCanned }, crmLabel("composer_quick_reply"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "hash", size: 18 })) : (_jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") })) }))), _jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, showEmojiPicker &&
+                    (crmComposer
+                        ? activeCls
+                        : "bg-[var(--dc-color-primary-light)] text-[var(--dc-color-primary)]")), onClick: () => setShowEmojiPicker(!showEmojiPicker) }, crmLabel("composer_emoji"), { children: crmComposer ? _jsx(StrokeIcon, { name: "smile", size: 18 }) : EmojiIcon })), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_image"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "image", size: 18 })) : (_jsx(Icon, { icon: "image-02-o", size: 22 })) })) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_file"), { children: crmComposer ? _jsx(StrokeIcon, { name: "paperclip", size: 18 }) : AttachIcon })) })] })), showEmojiPicker && (_jsx(EmojiPicker, { onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
 }

package/dist/components/message/footer/SessionClosedModal.d.ts

@@ -1,10 +1,12 @@
 interface SessionClosedModalProps {
     open: boolean;
     loading: boolean;
+    /** Order of the closed session, shown in the reopen hint (CRM). */
+    sessionOrder?: number;
     onReopen: () => void;
     onCreateNew: () => void;
     onClose: () => void;
 }
-declare const SessionClosedModal: ({ open, loading, onReopen, onCreateNew, onClose, }: SessionClosedModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const SessionClosedModal: ({ open, loading, sessionOrder, onReopen, onCreateNew, onClose, }: SessionClosedModalProps) => import("react/jsx-runtime").JSX.Element;
 export default SessionClosedModal;
 //# sourceMappingURL=SessionClosedModal.d.ts.map

package/dist/components/message/footer/SessionClosedModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionClosedModal.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/SessionClosedModal.tsx"],"names":[],"mappings":"AAKA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAMzB,uBAAuB,4CAoDzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"SessionClosedModal.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/SessionClosedModal.tsx"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,kEAOzB,uBAAuB,4CA8FzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/footer/SessionClosedModal.js

@@ -2,8 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, Button } from "antd";
 import { useTranslation } from "react-i18next";
-const SessionClosedModal = ({ open, loading, onReopen, onCreateNew, onClose, }) => {
+import useAuthStore from "../../../store/auth";
+const SessionClosedModal = ({ open, loading, sessionOrder, onReopen, onCreateNew, onClose, }) => {
     const { t } = useTranslation();
-    return (_jsx(Modal, { "data-cp-name": "SessionClosedModal", open: open, onCancel: onClose, footer: null, closable: !loading, centered: true, width: 400, maskClosable: !loading, keyboard: !loading, forceRender: true, children: _jsxs("div", { className: "flex flex-col gap-4 pt-2", role: "alertdialog", "aria-label": t("session_closed_modal_title"), children: [_jsx("p", { className: "text-base font-semibold", children: t("session_closed_modal_title") }), _jsx("p", { className: "text-sm text-gray-600", children: t("session_closed_modal_description") }), _jsxs("div", { className: "flex gap-3 w-full", children: [_jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onReopen, loading: loading, disabled: loading, children: t("session_closed_modal_reopen") }), _jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onCreateNew, loading: loading, disabled: loading, children: t("session_closed_modal_create_new") })] })] }) }));
+    const isCrm = useAuthStore((state) => state.isCrm);
+    return (_jsx(Modal, { "data-cp-name": "SessionClosedModal", open: open, onCancel: onClose, footer: null, closable: !loading, centered: true, width: 400, maskClosable: !loading, keyboard: !loading, forceRender: !isCrm, destroyOnHidden: isCrm, children: isCrm ? (_jsxs("div", { className: "flex flex-col gap-4 pt-2", role: "alertdialog", "aria-label": t("session_closed_crm_title"), children: [_jsx("p", { className: "text-lg font-bold text-gray-900", children: t("session_closed_crm_title") }), _jsx("p", { className: "text-sm text-gray-600", children: t("session_closed_crm_description") }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Button, { type: "primary", onClick: onReopen, loading: loading, disabled: loading, children: t("session_closed_crm_reopen") }), _jsx("span", { className: "text-xs text-gray-600", children: sessionOrder
+                                        ? t("session_closed_crm_reopen_hint", { order: sessionOrder })
+                                        : t("session_closed_crm_reopen_hint_no_order") })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Button, { onClick: onCreateNew, disabled: loading, children: t("session_closed_crm_create") }), _jsx("span", { className: "text-xs text-gray-600", children: t("session_closed_crm_create_hint") })] })] })] })) : (_jsxs("div", { className: "flex flex-col gap-4 pt-2", role: "alertdialog", "aria-label": t("session_closed_modal_title"), children: [_jsx("p", { className: "text-base font-semibold", children: t("session_closed_modal_title") }), _jsx("p", { className: "text-sm text-gray-600", children: t("session_closed_modal_description") }), _jsxs("div", { className: "flex gap-3 w-full", children: [_jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onReopen, loading: loading, disabled: loading, children: t("session_closed_modal_reopen") }), _jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onCreateNew, loading: loading, disabled: loading, children: t("session_closed_modal_create_new") })] })] })) }));
 };
 export default SessionClosedModal;

package/dist/components/message/footer/ToolbarPlugin.d.ts

@@ -1,2 +1,4 @@
-export declare const ToolbarPlugin: () => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarPlugin: ({ compact }: {
+    compact?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolbarPlugin.d.ts.map

package/dist/components/message/footer/ToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ToolbarPlugin.tsx"],"names":[],"mappings":"AA4DA,eAAO,MAAM,aAAa,+CAwNzB,CAAC"}
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ToolbarPlugin.tsx"],"names":[],"mappings":"AA4DA,eAAO,MAAM,aAAa,GAAI,aAAqB;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,4CA2NvE,CAAC"}

package/dist/components/message/footer/ToolbarPlugin.js

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { BoldOutlined, ItalicOutlined, StrikethroughOutlined, OrderedListOutlined, UnorderedListOutlined, } from "@ant-design/icons";
 import { Button } from "antd";
 const quoteIcon = (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M5.24615 10.5714C4.5616 10.5714 3.99078 10.5715 3.53762 10.5105C3.0593 10.4462 2.62745 10.3047 2.28042 9.95769C1.9334 9.61072 1.79194 9.17887 1.72763 8.70055C1.6667 8.24737 1.66673 7.67654 1.66675 6.99199V6.91274C1.66673 6.22819 1.6667 5.65734 1.72763 5.20419C1.79194 4.72586 1.9334 4.29401 2.28043 3.94699C2.62746 3.59997 3.0593 3.4585 3.53762 3.3942C3.99078 3.33327 4.56161 3.33329 5.24615 3.33331H5.32541C6.00995 3.33329 6.5808 3.33327 7.03397 3.3942C7.51228 3.4585 7.94413 3.59997 8.29116 3.94699C8.63817 4.29401 8.77966 4.72586 8.84396 5.20419C8.90491 5.65734 8.90484 6.22817 8.90484 6.91272V6.99198C8.90484 7.67652 8.90491 8.24737 8.84396 8.70055C8.77966 9.17887 8.63817 9.61072 8.29116 9.95769C7.94413 10.3047 7.51228 10.4462 7.03397 10.5105C6.5808 10.5715 6.00998 10.5714 5.32544 10.5714H5.24615Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.84403 16.1313C2.71884 15.7295 2.94301 15.3023 3.34474 15.1772C5.71249 14.4393 7.38095 12.3426 7.38095 9.914V6.76172C7.38095 6.34094 7.72207 5.99982 8.14286 5.99982C8.56366 5.99982 8.90476 6.34094 8.90476 6.76172V9.914C8.90476 13.0731 6.73976 15.7152 3.79812 16.6319C3.39638 16.7572 2.96923 16.533 2.84403 16.1313Z", fill: "currentColor" }), _jsx("path", { d: "M14.389 10.5714C13.7044 10.5714 13.1336 10.5715 12.6804 10.5105C12.2021 10.4462 11.7703 10.3047 11.4233 9.95769C11.0762 9.61072 10.9348 9.17887 10.8704 8.70055C10.8095 8.24737 10.8096 7.67654 10.8096 6.99199V6.91274C10.8096 6.22819 10.8095 5.65734 10.8704 5.20419C10.9348 4.72586 11.0762 4.29401 11.4233 3.94699C11.7703 3.59997 12.2021 3.4585 12.6804 3.3942C13.1336 3.33327 13.7044 3.33329 14.389 3.33331H14.4682C15.1528 3.33329 15.7236 3.33327 16.1768 3.3942C16.6551 3.4585 17.087 3.59997 17.4339 3.94699C17.781 4.29401 17.9225 4.72586 17.9868 5.20419C18.0477 5.65734 18.0477 6.22817 18.0477 6.91272V6.99198C18.0477 7.67652 18.0477 8.24737 17.9868 8.70055C17.9225 9.17887 17.781 9.61072 17.4339 9.95769C17.087 10.3047 16.6551 10.4462 16.1768 10.5105C15.7236 10.5715 15.1528 10.5714 14.4682 10.5714H14.389Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.9869 16.1313C11.8617 15.7295 12.0858 15.3023 12.4876 15.1772C14.8553 14.4393 16.5238 12.3426 16.5238 9.914V6.76172C16.5238 6.34094 16.8649 5.99982 17.2857 5.99982C17.7065 5.99982 18.0476 6.34094 18.0476 6.76172V9.914C18.0476 13.0731 15.8825 15.7152 12.9409 16.6319C12.5392 16.7572 12.112 16.533 11.9869 16.1313Z", fill: "currentColor" })] }));
-export const ToolbarPlugin = () => {
+export const ToolbarPlugin = ({ compact = false }) => {
     const [editor] = useLexicalComposerContext();
     const [activeMarks, setActiveMarks] = useState([]);
     const formatTextButtons = useMemo(() => {
@@ -153,7 +153,7 @@ export const ToolbarPlugin = () => {
             removeSelectionListener();
         };
     }, [editor]);
-    return (_jsxs("div", { "data-cp-name": "ToolbarPlugin", className: "flex items-center gap-2 px-4 pt-1", children: [formatTextButtons.map((button) => {
+    return (_jsxs("div", { "data-cp-name": "ToolbarPlugin", className: compact ? "flex items-center gap-1" : "flex items-center gap-2 px-4 pt-1", children: [formatTextButtons.map((button) => {
                 const { icon, onPress, key, isActive } = button;
                 return (_jsx(Button, { type: "text", shape: "default", className: getButtonClasses(isActive), onClick: onPress, children: icon }, key));
             }), insertListButtons.map((button) => {

package/dist/components/message/footer/clearComposerHistory.d.ts

@@ -0,0 +1,3 @@
+import { type LexicalEditor } from "lexical";
+export declare const clearComposerHistoryAfterUpdate: (editor: LexicalEditor) => void;
+//# sourceMappingURL=clearComposerHistory.d.ts.map

package/dist/components/message/footer/clearComposerHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearComposerHistory.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/clearComposerHistory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAKpE,eAAO,MAAM,+BAA+B,GAAI,QAAQ,aAAa,SAKpE,CAAC"}

package/dist/components/message/footer/clearComposerHistory.js

@@ -0,0 +1,11 @@
+import { CLEAR_HISTORY_COMMAND } from "lexical";
+import useAuthStore from "../../../store/auth";
+// Call in the same tick as a post-send clear, so Cmd+Z cannot bring a sent message back.
+// Only the CRM composer mounts the history plugin; other hosts are left untouched.
+export const clearComposerHistoryAfterUpdate = (editor) => {
+    if (!useAuthStore.getState().isCrm)
+        return;
+    editor.update(() => { }, {
+        onUpdate: () => editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined),
+    });
+};

package/dist/components/message/footer/index.d.ts

@@ -1,8 +1,8 @@
-import { MessageFooterContextType } from "../../../types/chat";
+import { CannedCreateRequest, MessageFooterContextType } from "../../../types/chat";
 import { ISessionResponse } from "../../../types/dto";
 interface MessageFooterProps {
     currentSession?: ISessionResponse;
-    openCreateCannedModal?: () => void;
+    openCreateCannedModal?: (request?: CannedCreateRequest) => void;
 }
 export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;
 export declare const useMessageFooterContext: () => MessageFooterContextType;

package/dist/components/message/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAGL,wBAAwB,EAEzB,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAc/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAuYpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAEL,mBAAmB,EAEnB,wBAAwB,EAEzB,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAwB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACjE;AASD,eAAO,MAAM,oBAAoB,mDAc/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CA+apB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/footer/index.js

@@ -7,6 +7,7 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { editorTheme, editorNodes, editorOnError } from "./editorConfig";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import EnterHandler from "./EnterHandler";
+import { useComposerFocusRequest } from "./useComposerFocusRequest";
 import ActionBar from "./ActionBar";
 import { AccountType, } from "../../../types/chat";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
@@ -21,15 +22,18 @@ import { useTranslation } from "react-i18next";
 import PasteAndDropPlugin from "./PasteAndDropPlugin";
 import { ReplyPreviewBar } from "../../../components/message/reply/ReplyPreviewBar";
 import CannedResponse from "../../../components/canned-response";
+import CannedResponsePanel from "../../../components/canned-response/CannedResponsePanel";
+import CrmComposerCard from "./CrmComposerCard";
 import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
 import { useBoolean } from "ahooks";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
 import { useCurrentUserAccountType } from "../../../hooks/user/useCurrentUserAccountType";
-import ComposerTabs from "./ComposerTabs";
 import ComposerEditor from "./ComposerEditor";
 import MentionMenu, { COMPOSER_AREA_CP_NAME } from "./mention/MentionMenu";
 import SessionClosedModal from "./SessionClosedModal";
+import ClosedSessionBanner from "./ClosedSessionBanner";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { useCreateSession, useReopenSession, } from "../../../hooks/session/useReopenOrCreateSession";
 import { emit } from "../../../utils/events";
 import { isGroupConversation } from "../../../utils/imCommon";
@@ -113,6 +117,12 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
         accountType === AccountType.Staff &&
         !isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
     const lockToInternal = Boolean((quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) && (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.isInternal));
+    useComposerFocusRequest({
+        enabled: isCrm,
+        canUseInternal,
+        lockToInternal,
+        setIsInternal,
+    });
     const previewUrl = useMemo(() => {
         const urls = extractLinkUrls(composerText);
         return urls.length === 1 ? urls[0] : null;
@@ -234,9 +244,9 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             return;
         closeSessionClosedModal();
     };
-    const onOpenCreateCannedModal = () => {
+    const onOpenCreateCannedModal = (request) => {
         closeCanned();
-        openCreateCannedModal === null || openCreateCannedModal === void 0 ? void 0 : openCreateCannedModal();
+        openCreateCannedModal === null || openCreateCannedModal === void 0 ? void 0 : openCreateCannedModal(request);
     };
     const onOpenCanned = (query) => {
         setCannedQuery(query);
@@ -266,8 +276,8 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             setMaxActiveCannedIndex,
             isMentionMenuOpen,
             setIsMentionMenuOpen,
-        }, children: [_jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
+        }, children: [_jsxs(LexicalComposer, { initialConfig: initialConfig, children: [isCrm ? (_jsxs("div", { "data-cp-name": COMPOSER_AREA_CP_NAME, className: "relative flex flex-col gap-2 bg-white px-4 pb-4 pt-2", children: [isOpenCanned && (_jsx(CannedResponsePanel, { query: cannedQuery, viewedTeamId: currentSession === null || currentSession === void 0 ? void 0 : currentSession.teamId, onCreate: onOpenCreateCannedModal })), (currentSession === null || currentSession === void 0 ? void 0 : currentSession.isClosed) && (_jsx(ClosedSessionBanner, { closedDate: currentSession.closedDate, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession })), _jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(CrmComposerCard, { canUseInternal: canUseInternal, isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal, replyLocked: Boolean(currentSession === null || currentSession === void 0 ? void 0 : currentSession.isClosed) && !isInternal })] })) : (_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: () => onOpenCreateCannedModal(), cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
                             body: "mx-1 !p-0",
-                        }, destroyOnHidden: true, children: _jsxs("div", { "data-cp-name": COMPOSER_AREA_CP_NAME, className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined) && (_jsx(MentionMenu, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, isBotThread: conversationData ? isBotPeer(conversationData) : false })), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
+                        }, destroyOnHidden: true, children: _jsxs("div", { "data-cp-name": COMPOSER_AREA_CP_NAME, className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsx("div", { children: _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText }) }), _jsx(ActionBar, {})] }) })), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), isCrm && _jsx(HistoryPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined) && (_jsx(MentionMenu, { groupID: conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID, isBotThread: conversationData ? isBotPeer(conversationData) : false })), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, sessionOrder: currentSession === null || currentSession === void 0 ? void 0 : currentSession.order, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
 };
 export default MessageFooterProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"MentionMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/MentionMenu.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,qBAAqB,8BAA8B,CAAC;AAWjE,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,mDA4I9D,CAAC;AA+CF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MentionMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/mention/MentionMenu.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,qBAAqB,8BAA8B,CAAC;AAWjE,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,mDAmJ9D,CAAC;AA+CF,eAAe,WAAW,CAAC"}

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

@@ -20,6 +20,8 @@ import { $createTextNode, $getRoot } from "lexical";
 import { $createMentionNode, $getMentionedUserIDs } from "./MentionNode";
 import { useMentionOptions } from "./useMentionOptions";
 import { Avatar } from "antd";
+import useAuthStore from "../../../../store/auth";
+import TintedAvatar from "../../../../components/common/TintedAvatar";
 import { useMessageFooterContext } from "..";
 const MAX_MENTIONED_USERS = 10;
 // Marks the composer's outer boundary (footer/index.tsx) so
@@ -35,6 +37,7 @@ class MentionTypeaheadOption extends MenuOption {
 }
 const MentionMenu = ({ groupID, isBotThread }) => {
     const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [editor] = useLexicalComposerContext();
     const [query, setQuery] = useState(null);
     const { setIsMentionMenuOpen } = useMessageFooterContext();
@@ -94,7 +97,7 @@ const MentionMenu = ({ groupID, isBotThread }) => {
             // actual top edge, so the menu clears the input entirely.
             _jsxs(MentionMenuOffset, { "data-cp-name": "MentionMenu", className: "absolute left-0 z-50 max-h-[220px] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), typeaheadOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: limitReached
                             ? t("mention.limit_reached", { max: MAX_MENTIONED_USERS })
-                            : t("mention.no_result") })) : (typeaheadOptions.map((option, index) => (_jsxs("button", { type: "button", className: `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${index === selectedIndex ? "bg-blue-50" : "hover:bg-gray-50"}`, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectOptionAndCleanUp(option), children: [option.option.isAtAll ? (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500", children: "@" })) : (_jsx(Avatar, { size: 24, src: option.option.faceURL, children: option.option.displayName.charAt(0) })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.option.displayName })] }, option.key))))] }), anchorElementRef.current);
+                            : t("mention.no_result") })) : (typeaheadOptions.map((option, index) => (_jsxs("button", { type: "button", className: `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${index === selectedIndex ? "bg-blue-50" : "hover:bg-gray-50"}`, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectOptionAndCleanUp(option), children: [option.option.isAtAll ? (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500", children: "@" })) : isCrm ? (_jsx(TintedAvatar, { name: option.option.displayName, src: option.option.faceURL, size: 24 })) : (_jsx(Avatar, { size: 24, src: option.option.faceURL, children: option.option.displayName.charAt(0) })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.option.displayName })] }, option.key))))] }), anchorElementRef.current);
         } }));
 };
 // Renders inside Lexical's own typeahead container, which it portals

package/dist/components/message/footer/useComposerFocusRequest.d.ts

@@ -0,0 +1,10 @@
+interface Options {
+    enabled: boolean;
+    canUseInternal: boolean;
+    lockToInternal: boolean;
+    setIsInternal: (isInternal: boolean) => void;
+}
+/** Desk shortcuts R / N: switch the composer mode, then put the cursor in the editor. */
+export declare const useComposerFocusRequest: ({ enabled, canUseInternal, lockToInternal, setIsInternal, }: Options) => void;
+export {};
+//# sourceMappingURL=useComposerFocusRequest.d.ts.map

package/dist/components/message/footer/useComposerFocusRequest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposerFocusRequest.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/useComposerFocusRequest.ts"],"names":[],"mappings":"AAIA,UAAU,OAAO;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,yFAAyF;AACzF,eAAO,MAAM,uBAAuB,GAAI,6DAKrC,OAAO,SAwBT,CAAC"}

package/dist/components/message/footer/useComposerFocusRequest.js

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect } from "react";
+import emitter from "../../../utils/events";
+/** Desk shortcuts R / N: switch the composer mode, then put the cursor in the editor. */
+export const useComposerFocusRequest = ({ enabled, canUseInternal, lockToInternal, setIsInternal, }) => {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const onRequest = ({ mode }) => {
+            if (mode === "internal") {
+                if (!canUseInternal)
+                    return;
+                setIsInternal(true);
+            }
+            else if (!lockToInternal) {
+                setIsInternal(false);
+            }
+            // Defer so a mode switch has re-rendered before focusing.
+            window.setTimeout(() => {
+                var _a;
+                return (_a = document
+                    .querySelector('[data-cp-name="ComposerEditor"] [contenteditable="true"]')) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        };
+        emitter.on("COMPOSER_FOCUS_REQUEST", onRequest);
+        return () => emitter.off("COMPOSER_FOCUS_REQUEST", onRequest);
+    }, [enabled, canUseInternal, lockToInternal, setIsInternal]);
+};

package/dist/components/message/groupMemberMenuCrm.d.ts

@@ -0,0 +1,32 @@
+import type { MenuProps } from "antd";
+import type { GroupPermissions } from "../../hooks/group/useGroupPermission";
+import type { MemberDisplayItem } from "./groupMemberTypes";
+type Translate = (key: string, options?: Record<string, unknown>) => string;
+export interface CrmMemberMenuHandlers {
+    onToggleMute: (member: MemberDisplayItem) => void;
+    onAskMute: (member: MemberDisplayItem) => void;
+    onAskTransfer: (member: MemberDisplayItem) => void;
+    onConfigureAdmin: (member: MemberDisplayItem) => void;
+    onRemoveAdmin: (member: MemberDisplayItem) => void;
+    onAskAssignAdmin: (member: MemberDisplayItem) => void;
+    onAskRemove: (member: MemberDisplayItem) => void;
+    onLeave: () => void;
+}
+interface BuildCrmMemberMenuParams {
+    member: MemberDisplayItem;
+    isRealGroup: boolean;
+    permissions: GroupPermissions;
+    actingIsOwner: boolean;
+    /** Set when leaving is not allowed; shown under the item instead of failing on click. */
+    leaveBlockedReason?: string;
+    handlers: CrmMemberMenuHandlers;
+    t: Translate;
+}
+type MenuItems = NonNullable<MenuProps["items"]>;
+/**
+ * CRM member menu: no always-disabled entries, a short reason under every
+ * entry that is disabled for lack of rights, owner transfer and removal set apart.
+ */
+export declare const buildCrmMemberMenu: ({ member, isRealGroup, permissions, actingIsOwner, leaveBlockedReason, handlers, t, }: BuildCrmMemberMenuParams) => MenuItems;
+export {};
+//# sourceMappingURL=groupMemberMenuCrm.d.ts.map

package/dist/components/message/groupMemberMenuCrm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupMemberMenuCrm.d.ts","sourceRoot":"","sources":["../../../src/components/message/groupMemberMenuCrm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,KAAK,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAE5E,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,aAAa,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,CAAC,EAAE,SAAS,CAAC;CACd;AAED,KAAK,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAWjD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,uFAQhC,wBAAwB,KAAG,SAsF7B,CAAC"}

package/dist/components/message/groupMemberMenuCrm.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CrmIcon as Icon } from "../../components/group/crmIcon";
+const label = (title, hint, tone) => (_jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: tone, children: title }), hint && _jsx("span", { className: "text-xs font-normal text-gray-600", children: hint })] }));
+const DIVIDER = { type: "divider" };
+/**
+ * CRM member menu: no always-disabled entries, a short reason under every
+ * entry that is disabled for lack of rights, owner transfer and removal set apart.
+ */
+export const buildCrmMemberMenu = ({ member, isRealGroup, permissions, actingIsOwner, leaveBlockedReason, handlers, t, }) => {
+    const ownerOnly = actingIsOwner ? undefined : t("group_owner_only");
+    if (member.isCurrentUser) {
+        return [
+            {
+                key: "leave-group",
+                label: label(t("leave_group"), leaveBlockedReason),
+                icon: _jsx(Icon, { icon: "logout-o", size: 16 }),
+                danger: true,
+                disabled: Boolean(leaveBlockedReason),
+                onClick: handlers.onLeave,
+            },
+        ];
+    }
+    const removeReason = !permissions.removeMember
+        ? t("need_remove_member_permission")
+        : member.isOwner
+            ? t("cannot_remove_group_owner")
+            : member.isAdmin && !actingIsOwner
+                ? t("group_owner_only")
+                : undefined;
+    const adminItems = member.isAdmin
+        ? [
+            {
+                key: "configure-admin-permission",
+                label: label(t("admin_permission_settings"), permissions.transferOwnership ? undefined : ownerOnly),
+                icon: _jsx(Icon, { icon: "shield-o", size: 16 }),
+                disabled: !permissions.transferOwnership,
+                onClick: () => handlers.onConfigureAdmin(member),
+            },
+            {
+                key: "remove-admin",
+                label: label(t("remove_from_admin"), permissions.addAdmin ? undefined : ownerOnly),
+                icon: _jsx(Icon, { icon: "shield-fail-o", size: 16 }),
+                disabled: !permissions.addAdmin,
+                onClick: () => handlers.onRemoveAdmin(member),
+            },
+        ]
+        : [
+            {
+                key: "assign-admin",
+                label: label(t("assign_as_admin"), permissions.addAdmin ? undefined : ownerOnly),
+                icon: _jsx(Icon, { icon: "shield-o", size: 16 }),
+                disabled: !permissions.addAdmin,
+                onClick: () => handlers.onAskAssignAdmin(member),
+            },
+        ];
+    return [
+        {
+            key: "mute",
+            label: label(member.isSendMessageDisabled ? t("unmute_member") : t("mute_member"), permissions.removeMember ? undefined : t("need_remove_member_permission")),
+            icon: _jsx(Icon, { icon: "bell-off-o", size: 16 }),
+            disabled: !permissions.removeMember,
+            onClick: () => member.isSendMessageDisabled ? handlers.onToggleMute(member) : handlers.onAskMute(member),
+        },
+        ...adminItems,
+        DIVIDER,
+        {
+            key: "transfer-owner",
+            label: label(t("transfer_owner"), permissions.transferOwnership ? t("transfer_owner_hint") : ownerOnly, permissions.transferOwnership ? "text-warning-800" : undefined),
+            icon: _jsx(Icon, { icon: "key-o", size: 16, className: permissions.transferOwnership ? "text-warning-800" : undefined }),
+            disabled: !permissions.transferOwnership,
+            onClick: () => handlers.onAskTransfer(member),
+        },
+        DIVIDER,
+        {
+            key: "remove-member",
+            label: label(t("remove_from_group"), removeReason),
+            icon: _jsx(Icon, { icon: "user-x", size: 16 }),
+            danger: true,
+            disabled: Boolean(removeReason),
+            onClick: () => handlers.onAskRemove(member),
+        },
+    ];
+};

package/dist/components/message/groupMemberTypes.d.ts

@@ -0,0 +1,13 @@
+export interface MemberDisplayItem {
+    userID: string;
+    nickname: string;
+    faceURL?: string;
+    isCustomer: boolean;
+    isCurrentUser: boolean;
+    isOwner: boolean;
+    isAdmin: boolean;
+    permissions: string[];
+    isSendMessageDisabled: boolean;
+    roleLabel: string;
+}
+//# sourceMappingURL=groupMemberTypes.d.ts.map

package/dist/components/message/groupMemberTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupMemberTypes.d.ts","sourceRoot":"","sources":["../../../src/components/message/groupMemberTypes.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/components/message/groupMemberTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/message/headerIconButton.d.ts

@@ -0,0 +1,10 @@
+import type { StrokeIconName } from "../../components/icon/strokeIconNodes";
+/** Classes of a header icon button; an open panel gets the Primary-25 tile in CRM. */
+export declare const headerIconButtonClass: (isCrm: boolean, isOpen: boolean) => string;
+/** Mockup line icon in CRM, the icon-font glyph elsewhere. */
+export declare const HeaderIcon: ({ isCrm, stroke, font, }: {
+    isCrm: boolean;
+    stroke: StrokeIconName;
+    font: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=headerIconButton.d.ts.map

package/dist/components/message/headerIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/message/headerIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,sFAAsF;AACtF,eAAO,MAAM,qBAAqB,GAAI,OAAO,OAAO,EAAE,QAAQ,OAAO,WAKjE,CAAC;AAEL,8DAA8D;AAC9D,eAAO,MAAM,UAAU,GAAI,0BAIxB;IACD,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,4CACgF,CAAC"}

package/dist/components/message/headerIconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../../components/icon";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+/** Classes of a header icon button; an open panel gets the Primary-25 tile in CRM. */
+export const headerIconButtonClass = (isCrm, isOpen) => `${isCrm ? "w-9 h-9 [@container(max-width:699px)]:!w-8 [@container(max-width:699px)]:!h-8" : "w-8 h-8"} p-0 ${isCrm && isOpen
+    ? "bg-primary-25 text-primary-500"
+    : "text-[var(--dc-color-header-icon)]"}`;
+/** Mockup line icon in CRM, the icon-font glyph elsewhere. */
+export const HeaderIcon = ({ isCrm, stroke, font, }) => isCrm ? _jsx(StrokeIcon, { name: stroke, size: 20 }) : _jsx(Icon, { icon: font, size: 22 });

package/dist/components/message/item/CrmSystemLine.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { StrokeIconName } from "../../../components/icon/strokeIconNodes";
+/** CRM timeline system line: a 14px line icon and quiet 12px text on a Gray-50 pill, centred. */
+declare const CrmSystemLine: ({ icon, children, className, }: {
+    icon: StrokeIconName;
+    children: ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CrmSystemLine;
+//# sourceMappingURL=CrmSystemLine.d.ts.map

package/dist/components/message/item/CrmSystemLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmSystemLine.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/CrmSystemLine.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,iGAAiG;AACjG,QAAA,MAAM,aAAa,GAAI,gCAIpB;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAUA,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/item/CrmSystemLine.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+/** CRM timeline system line: a 14px line icon and quiet 12px text on a Gray-50 pill, centred. */
+const CrmSystemLine = ({ icon, children, className, }) => (_jsx("div", { className: "flex justify-center", children: _jsxs("span", { "data-testid": "crm-system-line", className: `inline-flex items-center gap-1.5 rounded-xl bg-gray-50 px-3 py-1 text-center text-xs text-gray-600 ${className !== null && className !== void 0 ? className : ""}`, children: [_jsx(StrokeIcon, { name: icon, size: 14 }), children] }) }));
+export default CrmSystemLine;

package/dist/components/message/item/DateDivider.d.ts

@@ -0,0 +1,5 @@
+declare const DateDivider: ({ label }: {
+    label: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DateDivider;
+//# sourceMappingURL=DateDivider.d.ts.map

package/dist/components/message/item/DateDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/DateDivider.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,GAAI,WAAW;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,4CAShD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/item/DateDivider.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// CRM day/time divider: label between two hairlines, no pill background.
+const DateDivider = ({ label }) => (_jsxs("div", { className: "flex items-center gap-3 text-xs font-medium text-gray-600", "data-testid": "message-date-divider", children: [_jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-gray-25" }), label, _jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-gray-25" })] }));
+export default DateDivider;

package/dist/components/message/item/GroupNotificationMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupNotificationMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/GroupNotificationMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAI3D,UAAU,iCAAiC;IACzC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,4BAA4B,GAAI,aAAa,iCAAiC,mDAkBnF,CAAC;AAEF,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"GroupNotificationMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/GroupNotificationMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAO3D,UAAU,iCAAiC;IACzC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,4BAA4B,GAAI,aAAa,iCAAiC,mDA4BnF,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/components/message/item/GroupNotificationMessage.js

@@ -1,13 +1,22 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import useAuthStore from "../../../store/auth";
+import { MessageType } from "@droppii-org/wasm-client-sdk";
 import { getGroupNotificationText } from "../../../utils/messageLog";
+import CrmSystemLine from "./CrmSystemLine";
 const GroupNotificationMessageItem = ({ message }) => {
     var _a;
+    const isCrm = useAuthStore((state) => state.isCrm);
     const { t } = useTranslation();
     const text = getGroupNotificationText(message.contentType, (_a = message.notificationElem) === null || _a === void 0 ? void 0 : _a.detail, t, message.senderNickname);
     if (!text)
         return null;
+    if (isCrm) {
+        const joined = message.contentType === MessageType.MemberEnter ||
+            message.contentType === MessageType.MemberInvited;
+        return _jsx(CrmSystemLine, { icon: joined ? "user-plus" : "users", children: text });
+    }
     return (_jsx("div", { className: "flex justify-center", "data-cp-name": "GroupNotificationMessageItem", children: _jsx("span", { className: "rounded-full bg-gray-200 px-3 py-1.5 text-center text-[13px] font-normal text-gray-900", children: text }) }));
 };
 export default GroupNotificationMessageItem;

package/dist/components/message/item/MemberEventSummary.d.ts

@@ -0,0 +1,8 @@
+import type { MessageItem } from "@droppii-org/wasm-client-sdk";
+interface MemberEventSummaryProps {
+    /** Consecutive member events, oldest first. */
+    messages: MessageItem[];
+}
+declare const MemberEventSummary: ({ messages }: MemberEventSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default MemberEventSummary;
+//# sourceMappingURL=MemberEventSummary.d.ts.map

package/dist/components/message/item/MemberEventSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberEventSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MemberEventSummary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAGhE,UAAU,uBAAuB;IAC/B,+CAA+C;IAC/C,QAAQ,EAAE,WAAW,EAAE,CAAC;CACzB;AAMD,QAAA,MAAM,kBAAkB,GAAI,cAAc,uBAAuB,4CAmChE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}