@droppii-org/chat-sdk 0.6.56 → 0.7.1

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

@@ -1,9 +1,10 @@
+import type { CannedCreateRequest } from "../../types/chat";
 interface MessageListProps {
     conversationId: string;
     searchClientMsgID?: string;
     className?: string;
     onClose?: () => void;
-    openCreateCannedModal?: () => void;
+    openCreateCannedModal?: (request?: CannedCreateRequest) => void;
     onOpenThreadInfo?: () => void;
     onCopyMessageLink?: (conversationId: string, clientMsgID: string) => void;
     /** Called instead of the SDK's default toast when a jumped-to message turns out to be revoked. */

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAqCA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA2Z3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIxD,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAua3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -15,6 +15,8 @@ import MessageFooter from "./footer";
 import UnassignedSessionFooter from "./UnassignedSessionFooter";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
+import useAuthStore from "../../store/auth";
+import { handleMessageLogKeyDown } from "./messageKeyboardNav";
 import { useBoolean } from "ahooks";
 import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
 import { useUnreadMessageIndicator } from "../../hooks/message/useUnreadMessageIndicator";
@@ -36,6 +38,7 @@ const MessageList = (props) => {
     const { t } = useTranslation();
     const { user, connectStatus, allowPinMessageWithoutPermission } = useChatContext();
     const { onClose, conversationId, searchClientMsgID, openCreateCannedModal, onOpenThreadInfo, onCopyMessageLink, onSearchMessageRevoked, showPinnedMessageBar = false, } = props;
+    const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
     const permissions = useGroupPermission(conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID);
     const isGroupChat = isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
@@ -212,7 +215,15 @@ const MessageList = (props) => {
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: connectStatus !== ConnectStatus.Connected ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 overflow-hidden bg-white", "data-cp-name": "MessageList", children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo }), showPinnedMessageBar && (_jsx(PinnedMessageBar, { genericSubtitle: true, canUnpin: canPinMessage })), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [!loadState.initLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-4 z-10", onClick: handleJumpToFirstUnread })), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onCopyMessageLink: handleCopyMessageLink, showUnreadDivider: !!unreadDividerMessageId &&
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 overflow-hidden bg-white", "data-cp-name": "MessageList", children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined, onOpenThreadInfo: onOpenThreadInfo }), showPinnedMessageBar && (_jsx(PinnedMessageBar, { genericSubtitle: true, canUnpin: canPinMessage })), _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [!loadState.initLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-4 z-10", onClick: handleJumpToFirstUnread })), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerProps: isCrm
+                            ? {
+                                role: "log",
+                                "aria-live": "off",
+                                "aria-label": t("message_log_label"),
+                                tabIndex: 0,
+                                onKeyDown: handleMessageLogKeyDown,
+                            }
+                            : undefined, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onCopyMessageLink: handleCopyMessageLink, showUnreadDivider: !!unreadDividerMessageId &&
                                 message.clientMsgID === unreadDividerMessageId, onUnreadDividerSeen: markDividerSeen }, message.clientMsgID))) })] }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), (Boolean(rawGroupId) && isCheckingMembership) || !isGroupStateFresh ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : !isConfirmedGroup && shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", "data-cp-name": "JoinGroupRequired", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : isViewOnlyMember ? (
             // Brief fallback while isJoined catches up after the kick event.
             _jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })) : !canSendMessage ? (_jsx("div", { className: "border-t bg-[#f5f5f5] py-3 flex items-center justify-center", children: _jsx("p", { className: "text-sm text-gray-500", children: t(isRestrictedByGroupMute

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

@@ -5,7 +5,10 @@ interface SelectSessionProps {
     onChange: (value: SelectSessionOption["value"]) => void;
     excludeOptions?: SelectSessionOption["value"][];
     placeholder?: string;
+    disabled?: boolean;
+    /** CRM only: extra classes for the select, e.g. a max width for a long placeholder. */
+    crmClassName?: string;
 }
-declare const SelectSession: ({ options, value, onChange, excludeOptions, placeholder, }: SelectSessionProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectSession: ({ options, value, onChange, excludeOptions, placeholder, disabled, crmClassName, }: SelectSessionProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectSession;
 //# sourceMappingURL=SelectSession.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,4DAMpB,kBAAkB,4CAmEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,GAAI,oFAQpB,kBAAkB,4CAwFpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/SelectSession.js

@@ -2,10 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from "antd";
 import { Icon } from "../../components/icon";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
 import clsx from "clsx";
-const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, }) => {
+import useAuthStore from "../../store/auth";
+const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, disabled, crmClassName, }) => {
+    const isCrm = useAuthStore((state) => state.isCrm);
     const selectedOption = options.find((option) => option.value === value);
-    const renderOptionLabel = (option, truncateLabel = false) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full shrink-0", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs whitespace-nowrap", truncateLabel && "truncate", option.tintColorClassname), children: option.label })] }));
+    const renderOptionLabel = (option, truncateLabel = false) => (_jsxs("div", { className: clsx("flex items-center", isCrm ? "gap-1.5" : "gap-2"), children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full shrink-0", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("whitespace-nowrap", isCrm ? "text-[13px] font-medium" : "text-xs", truncateLabel && "truncate", isCrm ? "text-gray-900" : option.tintColorClassname), children: option.label })] }));
     const filteredOptions = options.filter((option) => option.value === value || !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value)));
     const selectOptions = filteredOptions.map((option) => ({
         label: renderOptionLabel(option),
@@ -14,8 +17,14 @@ const SelectSession = ({ options, value, onChange, excludeOptions, placeholder,
     const handleSelect = (val) => {
         onChange(val);
     };
-    return (_jsx("div", { className: "relative shrink-0", "data-cp-name": "SelectSession", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, popupMatchSelectWidth: false, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
-                ? placeholder
+    return (_jsx("div", { className: "relative shrink-0", "data-cp-name": "SelectSession", children: _jsx(Select, { className: isCrm
+                ? `!h-8 ${crmClassName !== null && crmClassName !== void 0 ? crmClassName : ""} [&_.ant-select-selection-item]:!pe-0 [&_.ant-select-selector]:!h-8 [&_.ant-select-selector]:!pl-[10px] [&_.ant-select-selector]:!pr-[26px] [&_.ant-select-selection-item]:!text-[13px] [&_.ant-select-selection-item]:!font-medium [&_.ant-select-selection-placeholder]:!text-[13px] [&_.ant-select-arrow]:!end-[6px]`
+                : `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, popupClassName: isCrm
+                ? "[&_.ant-select-item-option-selected]:!bg-primary-25 [&_.ant-select-item-option-selected]:!font-normal"
+                : undefined, placement: "bottomLeft", placeholder: placeholder, "aria-label": placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, disabled: disabled, popupMatchSelectWidth: false, suffixIcon: isCrm ? (_jsx(StrokeIcon, { name: "chevron-down", size: 16, className: "text-gray-600" })) : (_jsx(Icon, { icon: "angle-down-o", className: `${isCrm ? "text-gray-600" : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 })), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
+                ? isCrm
+                    ? _jsx("span", { className: "block truncate text-[13px] text-gray-600", children: placeholder })
+                    : placeholder
                 : selectedOption
                     ? renderOptionLabel(selectedOption, true)
                     : undefined }) }));

package/dist/components/message/UnassignedSessionFooter.js

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useAssignSession } from "../../hooks/session/useAssignSession";
 import useAuthStore from "../../store/auth";
 import ManualAssignPopover from "../../components/thread/ManualAssignPopover";
-import { Icon } from "../../components/icon";
+import { AdaptiveIcon } from "../../components/icon/AdaptiveIcon";
 const UnassignedSessionFooter = ({ sessionId, teamId, }) => {
     const { t } = useTranslation();
     const userID = useAuthStore((state) => state.userID);
@@ -21,6 +21,6 @@ const UnassignedSessionFooter = ({ sessionId, teamId, }) => {
             antdMessage.error(t("manual_assign_failed"));
         }
     };
-    return (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", "data-cp-name": "UnassignedSessionFooter", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-amber-500", children: [_jsx(Icon, { icon: "user-del-o", size: 16 }), _jsx("p", { className: "text-sm text-gray-500", children: t("unassigned_thread_notice") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "primary", onClick: handleAssignToMe, loading: isAssigning, disabled: isAssigning, children: t("assign_to_me") }), _jsx(ManualAssignPopover, { sessionId: sessionId, teamId: teamId, excludeCurrentUser: true, children: _jsx(Button, { disabled: isAssigning, children: t("assign_to_others") }) })] })] }));
+    return (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", "data-cp-name": "UnassignedSessionFooter", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-amber-500", children: [_jsx(AdaptiveIcon, { stroke: "user-x", font: "user-del-o", size: 16 }), _jsx("p", { className: "text-sm text-gray-500", children: t("unassigned_thread_notice") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "primary", onClick: handleAssignToMe, loading: isAssigning, disabled: isAssigning, children: t("assign_to_me") }), _jsx(ManualAssignPopover, { sessionId: sessionId, teamId: teamId, excludeCurrentUser: true, children: _jsx(Button, { disabled: isAssigning, children: t("assign_to_others") }) })] })] }));
 };
 export default UnassignedSessionFooter;

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

@@ -1,3 +1,7 @@
-declare const ActionBar: () => import("react/jsx-runtime").JSX.Element;
+interface ActionBarProps {
+    formatOpen?: boolean;
+    onToggleFormat?: () => void;
+}
+declare const ActionBar: ({ formatOpen, onToggleFormat }: ActionBarProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionBar;
 //# sourceMappingURL=ActionBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAuBA,QAAA,MAAM,SAAS,+CAiHd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AA4BA,UAAU,cAAc;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,GAAI,gCAAwC,cAAc,4CA+JxE,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -2,7 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button } from "antd";
+import clsx from "clsx";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
 import { Icon } from "../../../components/icon";
+import useAuthStore from "../../../store/auth";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $createParagraphNode, $getRoot, $getSelection, $isRangeSelection, } from "lexical";
 import { $generateHtmlFromNodes } from "@lexical/html";
@@ -10,9 +14,12 @@ import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND
 import { $isQuoteNode } from "@lexical/rich-text";
 import { useMessageFooterContext } from ".";
 import MediaActions from "./MediaActions";
+import { clearComposerHistoryAfterUpdate } from "./clearComposerHistory";
 import useConversationStore from "../../../store/conversation";
 import { extractMentions } from "./mention/extractMentions";
-const ActionBar = () => {
+const ActionBar = ({ formatOpen = false, onToggleFormat }) => {
+    const { t } = useTranslation();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [editor] = useLexicalComposerContext();
     const { onSendMessage, isInternal, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
@@ -43,6 +50,7 @@ const ActionBar = () => {
                 return;
             }
         }
+        clearComposerHistoryAfterUpdate(editor);
         editor.update(() => {
             const root = $getRoot();
             root.clear();
@@ -88,6 +96,11 @@ const ActionBar = () => {
             });
         });
     }, [editor]);
+    if (isCrm) {
+        return (_jsxs("div", { "data-cp-name": "ActionBar", className: "flex items-center gap-0.5", children: [_jsx(Button, { type: "text", shape: "default", "aria-label": t("composer_format"), title: t("composer_format"), "aria-pressed": formatOpen, onClick: onToggleFormat, className: clsx("!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 hover:!bg-gray-5 hover:!text-gray-900", formatOpen ? "!bg-primary-25 !text-primary-500" : "text-gray-600"), children: _jsx(StrokeIcon, { name: "type", size: 18 }) }), _jsx(MediaActions, { crmComposer: true, listUploadFiles: listUploadFiles, onFilesChange: setListUploadFiles }), _jsx("span", { className: "flex-1" }), _jsxs("button", { type: "button", onClick: handleSend, disabled: !canSend, className: clsx("flex h-8 items-center gap-1.5 whitespace-nowrap rounded-lg border px-3.5 text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-400", isInternal
+                        ? "border-warning-800 bg-warning-800 hover:bg-warning-900"
+                        : "border-primary-400 bg-primary-400 hover:bg-primary-500", !canSend && "cursor-not-allowed opacity-40"), children: [_jsx(StrokeIcon, { name: "send", size: 18 }), isInternal ? t("composer_send_note") : t("composer_send")] })] }));
+    }
     return (_jsxs("div", { "data-cp-name": "ActionBar", className: "flex items-center justify-between px-4", children: [_jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: setListUploadFiles, buttonClassName: "text-gray-500 w-8 h-8 p-0" }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleSend, disabled: !canSend, children: _jsx(Icon, { icon: "send-b", size: 28, className: `${canSend ? "text-[var(--dc-color-primary)]" : "text-gray-400"}` }) })] }));
 };
 export default ActionBar;

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

@@ -1 +1 @@
-{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAWA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAsFrE"}
+{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAYA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAwGrE"}

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

@@ -1,10 +1,13 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, } from "lexical";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, } from "lexical";
 import { useMessageFooterContext } from ".";
 export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
     const [editor] = useLexicalComposerContext();
     const { activeCannedIndex, setActiveCannedIndex, isOpenCanned, maxActiveCannedIndex, } = useMessageFooterContext();
+    // Text before the cursor when the agent pressed Esc: the picker stays shut until it changes.
+    const dismissedRef = useRef(null);
+    const lastBeforeRef = useRef("");
     useEffect(() => {
         return editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
@@ -20,10 +23,13 @@ export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
                 const before = text.slice(0, offset);
                 // match #abc (KHÔNG có space phía sau)
                 const match = before.match(/(^|\s)#(\w*)$/);
-                if (match) {
+                lastBeforeRef.current = before;
+                if (match && dismissedRef.current !== before) {
                     onOpen(match[2] || "");
                 }
                 else {
+                    if (!match)
+                        dismissedRef.current = null;
                     onClose();
                 }
             });
@@ -52,9 +58,17 @@ export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
                     : activeCannedIndex + 1);
             return true;
         }, COMMAND_PRIORITY_LOW);
+        const unregisterEscape = editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+            if (!isOpenCanned)
+                return false;
+            dismissedRef.current = lastBeforeRef.current;
+            onClose();
+            return true;
+        }, COMMAND_PRIORITY_LOW);
         return () => {
             unregisterUp();
             unregisterDown();
+            unregisterEscape();
         };
     }, [
         editor,
@@ -62,6 +76,7 @@ export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
         activeCannedIndex,
         setActiveCannedIndex,
         maxActiveCannedIndex,
+        onClose,
     ]);
     return null;
 }

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

@@ -0,0 +1,9 @@
+interface ClosedSessionBannerProps {
+    closedDate?: string | null;
+    loading: boolean;
+    onReopen: () => void;
+    onCreateNew: () => void;
+}
+declare const ClosedSessionBanner: ({ closedDate, loading, onReopen, onCreateNew, }: ClosedSessionBannerProps) => import("react/jsx-runtime").JSX.Element;
+export default ClosedSessionBanner;
+//# sourceMappingURL=ClosedSessionBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClosedSessionBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ClosedSessionBanner.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,QAAA,MAAM,mBAAmB,GAAI,iDAK1B,wBAAwB,4CAoC1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
+import { formatSessionTime } from "../../../components/thread/sessionDateFormat";
+// CRM only: tells the agent the session ended before they type, not after they press send.
+const ClosedSessionBanner = ({ closedDate, loading, onReopen, onCreateNew, }) => {
+    const { t } = useTranslation();
+    const time = formatSessionTime(closedDate);
+    const focusRing = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-400 disabled:cursor-not-allowed disabled:opacity-50";
+    return (_jsxs("div", { role: "status", "data-cp-name": "ClosedSessionBanner", className: "flex items-center gap-3 rounded-xl bg-primary-25 px-3 py-2.5 text-[13px] text-gray-900", children: [_jsx(StrokeIcon, { name: "check-circle", size: 18, className: "text-primary-500" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("strong", { className: "font-semibold", children: t("session_ended_banner_title") }), time ? ` ${t("session_ended_banner_at", { time })}` : null] }), _jsx("button", { type: "button", onClick: onCreateNew, disabled: loading, className: `h-8 shrink-0 whitespace-nowrap rounded-lg px-2 text-sm font-medium text-primary-500 hover:bg-white/60 ${focusRing}`, children: t("session_banner_create") }), _jsx("button", { type: "button", onClick: onReopen, disabled: loading, "aria-busy": loading, className: `h-8 shrink-0 whitespace-nowrap rounded-lg border border-gray-50 bg-white px-3.5 text-sm font-medium text-gray-900 hover:bg-gray-5 ${focusRing}`, children: t("session_banner_reopen") })] }));
+};
+export default ClosedSessionBanner;

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

@@ -1 +1 @@
-{"version":3,"file":"ComposerEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerEditor.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,GAAI,kCAGrB,mBAAmB,4CAwBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ComposerEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerEditor.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,GAAI,kCAGrB,mBAAmB,4CAyCrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -4,10 +4,15 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import clsx from "clsx";
+import useAuthStore from "../../../store/auth";
 const ComposerEditor = ({ isInternal, placeholderText, }) => {
-    const editorClasses = clsx("min-h-[64px] max-h-[140px] overflow-y-auto rounded-md border px-3 py-2 text-sm", isInternal
-        ? "border-orange-300 bg-orange-50"
-        : "border-indigo-500 bg-blue-100");
-    return (_jsx("div", { "data-cp-name": "ComposerEditor", className: "px-4", children: _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: editorClasses }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": placeholderText, placeholder: _jsx("div", { className: "absolute left-3 top-2 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: placeholderText }) }) }) }) }));
+    const isCrm = useAuthStore((state) => state.isCrm);
+    // CRM: the surrounding card owns the border, so the field is borderless.
+    const editorClasses = isCrm
+        ? "min-h-[44px] max-h-[140px] overflow-y-auto px-1 pt-1 text-sm leading-6 text-gray-900 outline-none"
+        : clsx("min-h-[64px] max-h-[140px] overflow-y-auto rounded-md border px-3 py-2 text-sm", isInternal
+            ? "border-orange-300 bg-orange-50"
+            : "border-[color:var(--dc-composer-border)] bg-[var(--dc-composer-bg)] focus:border-[color:var(--dc-composer-border-focus)]");
+    return (_jsx("div", { "data-cp-name": "ComposerEditor", className: isCrm ? "" : "px-4", children: _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: editorClasses, "aria-label": placeholderText }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": placeholderText, placeholder: _jsx("div", { className: clsx("absolute pointer-events-none", isCrm ? "left-1 top-1" : "left-3 top-2"), children: _jsx("p", { className: clsx("text-sm", isCrm ? "leading-6 text-gray-600" : "text-gray-500"), children: placeholderText }) }) }) }) }));
 };
 export default ComposerEditor;

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

@@ -1,10 +1,9 @@
 interface ComposerTabsProps {
     canUseInternal: boolean;
-    hintText: string;
     isInternal: boolean;
     lockToInternal: boolean;
     setIsInternal: (isInternal: boolean) => void;
 }
-declare const ComposerTabs: ({ canUseInternal, hintText, isInternal, lockToInternal, setIsInternal, }: ComposerTabsProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ComposerTabs: ({ canUseInternal, isInternal, lockToInternal, setIsInternal, }: ComposerTabsProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ComposerTabs;
 //# sourceMappingURL=ComposerTabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComposerTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerTabs.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAeD,QAAA,MAAM,YAAY,GAAI,0EAMnB,iBAAiB,mDAqDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ComposerTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerTabs.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAQD,QAAA,MAAM,YAAY,GAAI,gEAKnB,iBAAiB,mDA0CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,45 +1,24 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { Tabs } from "antd";
-import { useMemo } from "react";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 import { useTranslation } from "react-i18next";
-const COMPOSER_TABS = [
-    {
-        isInternal: false,
-        activeClassName: "text-indigo-600",
-        labelKey: "reply",
-    },
-    {
-        isInternal: true,
-        activeClassName: "text-orange-600",
-        labelKey: "internal",
-    },
+const MODES = [
+    { isInternal: false, labelKey: "reply", icon: "reply" },
+    { isInternal: true, labelKey: "internal", icon: "lock" },
 ];
-const ComposerTabs = ({ canUseInternal, hintText, isInternal, lockToInternal, setIsInternal, }) => {
+// Segmented reply / internal-note switch. Only rendered in the CRM composer card.
+const ComposerTabs = ({ canUseInternal, isInternal, lockToInternal, setIsInternal, }) => {
     const { t } = useTranslation();
-    const items = useMemo(() => COMPOSER_TABS.map((tab) => ({
-        key: String(tab.isInternal),
-        disabled: lockToInternal && !tab.isInternal,
-        label: (_jsx("span", { className: clsx("text-sm font-semibold", isInternal === tab.isInternal
-                ? tab.activeClassName
-                : lockToInternal && !tab.isInternal
-                    ? "text-gray-300"
-                    : "text-gray-500"), children: t(tab.labelKey) })),
-        children: null,
-    })), [isInternal, lockToInternal, t]);
     if (!canUseInternal) {
         return null;
     }
-    return (_jsx(Tabs, { "data-cp-name": "ComposerTabs", activeKey: String(isInternal), items: items, onChange: (value) => {
-            if (lockToInternal && value !== "true") {
-                return;
-            }
-            setIsInternal(value === "true");
-        }, tabBarExtraContent: {
-            left: _jsx("p", { className: "pr-4 text-sm text-gray-500", children: hintText }),
-        }, className: clsx("[&_.ant-tabs-content-holder]:hidden [&_.ant-tabs-ink-bar]:hidden [&_.ant-tabs-nav]:mb-0 [&_.ant-tabs-nav]:px-4 [&_.ant-tabs-nav]:pt-0 [&_.ant-tabs-nav]:before:border-b-0 [&_.ant-tabs-nav-wrap]:justify-end [&_.ant-tabs-extra-content]:flex [&_.ant-tabs-extra-content]:items-center [&_.ant-tabs-extra-content]:overflow-hidden [&_.ant-tabs-extra-content]:text-ellipsis [&_.ant-tabs-tab]:mb-0 [&_.ant-tabs-tab]:rounded-t-[16px] [&_.ant-tabs-tab]:border [&_.ant-tabs-tab]:border-b-0 [&_.ant-tabs-tab]:border-transparent [&_.ant-tabs-tab]:px-3 [&_.ant-tabs-tab]:py-1.5 [&_.ant-tabs-tab]:leading-5 [&_.ant-tabs-tab-btn]:leading-5", isInternal
-            ? "[&_.ant-tabs-tab-active]:border-orange-200 [&_.ant-tabs-tab-active]:bg-orange-50"
-            : "[&_.ant-tabs-tab-active]:border-indigo-200 [&_.ant-tabs-tab-active]:bg-indigo-50") }));
+    return (_jsx("div", { role: "group", "aria-label": t("composer_mode_label"), "data-cp-name": "ComposerTabs", className: "flex shrink-0 gap-0.5 rounded-lg bg-[var(--dc-color-neutral-surface)] p-1", children: MODES.map(({ isInternal: modeIsInternal, labelKey, icon }) => {
+            const selected = isInternal === modeIsInternal;
+            const disabled = lockToInternal && !modeIsInternal;
+            return (_jsxs("button", { type: "button", "aria-pressed": selected, disabled: disabled, onClick: () => setIsInternal(modeIsInternal), className: clsx("flex h-7 items-center gap-1.5 whitespace-nowrap rounded px-2.5 text-[13px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-400", selected
+                    ? clsx("bg-white font-semibold shadow-[0_1px_2px_rgba(57,62,64,0.12)]", modeIsInternal ? "text-warning-800" : "text-gray-900")
+                    : "font-medium text-gray-600 hover:text-gray-900", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(StrokeIcon, { name: icon, size: 16 }), t(labelKey)] }, labelKey));
+        }) }));
 };
 export default ComposerTabs;

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

@@ -0,0 +1,11 @@
+interface CrmComposerCardProps {
+    canUseInternal: boolean;
+    isInternal: boolean;
+    lockToInternal: boolean;
+    setIsInternal: (isInternal: boolean) => void;
+    /** Reply mode of an ended session: dimmed and read-only until the session reopens. */
+    replyLocked?: boolean;
+}
+declare const CrmComposerCard: ({ canUseInternal, isInternal, lockToInternal, setIsInternal, replyLocked, }: CrmComposerCardProps) => import("react/jsx-runtime").JSX.Element;
+export default CrmComposerCard;
+//# sourceMappingURL=CrmComposerCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CrmComposerCard.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CrmComposerCard.tsx"],"names":[],"mappings":"AAWA,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AASD,QAAA,MAAM,eAAe,GAAI,6EAMtB,oBAAoB,4CAsEtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { StrokeIcon } from "../../../components/icon/StrokeIcon";
+import { useTranslation } from "react-i18next";
+import ActionBar from "./ActionBar";
+import ComposerEditor from "./ComposerEditor";
+import ComposerTabs from "./ComposerTabs";
+import { ToolbarPlugin } from "./ToolbarPlugin";
+const Kbd = ({ children }) => (_jsx("kbd", { className: "inline-flex h-6 min-w-[24px] items-center justify-center rounded border border-b-2 border-gray-50 bg-white px-1.5 font-sans text-xs font-semibold text-gray-900", children: children }));
+// CRM only: one card with mode switch, field, and a single action row.
+const CrmComposerCard = ({ canUseInternal, isInternal, lockToInternal, setIsInternal, replyLocked = false, }) => {
+    const { t } = useTranslation();
+    const [formatOpen, setFormatOpen] = useState(false);
+    const fieldRef = useRef(null);
+    // Set as a DOM property: React 18 does not know the `inert` attribute.
+    useEffect(() => {
+        if (fieldRef.current)
+            fieldRef.current.inert = replyLocked;
+    }, [replyLocked]);
+    return (_jsxs("div", { "data-cp-name": "CrmComposerCard", "data-internal": isInternal, className: clsx("flex flex-col gap-1.5 rounded-xl border p-2", isInternal
+            ? "border-warning-400/60 bg-warning-25"
+            : "border-[color:var(--dc-composer-border)] bg-[var(--dc-composer-bg)] focus-within:border-[color:var(--dc-composer-border-focus)] focus-within:shadow-[0_0_0_3px_var(--dc-color-primary-light)]", replyLocked && "opacity-50"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 [container-type:inline-size]", children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), isInternal ? (_jsxs("span", { role: "note", title: t("composer_internal_notice"), className: "flex min-w-0 items-center gap-1 whitespace-nowrap text-xs font-medium text-warning-800", children: [_jsx(StrokeIcon, { name: "lock", size: 14 }), _jsx("span", { className: "truncate [@container(max-width:419px)]:sr-only", children: t("composer_internal_notice") })] })) : (_jsxs("span", { className: "ml-auto flex min-w-0 items-center gap-1 overflow-hidden whitespace-nowrap text-xs text-gray-600 [@container(max-width:309px)]:!hidden", children: [_jsx(Kbd, { children: "Enter" }), " ", t("composer_hint_enter"), _jsxs("span", { className: "flex items-center gap-1 [@container(max-width:499px)]:!hidden", children: ["\u00B7 ", _jsx(Kbd, { children: "Shift" }), " + ", _jsx(Kbd, { children: "Enter" }), " ", t("composer_hint_newline")] })] }))] }), _jsxs("div", { ref: fieldRef, className: "contents", children: [_jsx(ComposerEditor, { isInternal: isInternal, placeholderText: isInternal
+                            ? t("composer_internal_placeholder")
+                            : replyLocked
+                                ? t("composer_closed_placeholder")
+                                : t("composer_placeholder_crm") }), formatOpen && _jsx(ToolbarPlugin, { compact: true }), _jsx(ActionBar, { formatOpen: formatOpen, onToggleFormat: () => setFormatOpen((open) => !open) })] })] }));
+};
+export default CrmComposerCard;

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

@@ -1 +1 @@
-{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAwBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAgJnC"}
+{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAyBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAmJnC"}

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

@@ -1,6 +1,7 @@
 "use client";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_NORMAL, $getSelection, $isRangeSelection, $createParagraphNode, $getRoot, } from "lexical";
+import { clearComposerHistoryAfterUpdate } from "./clearComposerHistory";
 import { useEffect, useRef } from "react";
 import { $generateHtmlFromNodes } from "@lexical/html";
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
@@ -53,6 +54,7 @@ export default function EnterHandler() {
                         return true;
                     }
                 }
+                clearComposerHistoryAfterUpdate(editor);
                 editor.update(() => {
                     const root = $getRoot();
                     root.clear();
@@ -109,6 +111,7 @@ export default function EnterHandler() {
     ]);
     useEffect(() => {
         const clearEditor = () => {
+            clearComposerHistoryAfterUpdate(editor);
             editor.update(() => {
                 const root = $getRoot();
                 root.clear();

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useMessageFooterContext } from ".";
-import { Icon } from "../../../components/icon";
+import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
 import { documentIcon } from "../../../assets/svg";
 import { DOCUMENT_MIME_TYPES } from "../../../utils/fileValidation";
 import { formatDuration, shortenFileName } from "../../../utils/common";
@@ -25,7 +25,7 @@ const getFileType = (file) => {
         return "video";
     return "image";
 };
-const RemoveButton = ({ file, onRemove }) => (_jsx("button", { type: "button", "data-cp-name": "RemoveButton", onClick: () => onRemove(file), className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-gray-900", "aria-label": "X\u00F3a", children: _jsx(Icon, { icon: "close-o", size: 12, className: "text-white" }) }));
+const RemoveButton = ({ file, onRemove }) => (_jsx("button", { type: "button", "data-cp-name": "RemoveButton", onClick: () => onRemove(file), className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-gray-900", "aria-label": "X\u00F3a", children: _jsx(AdaptiveIcon, { stroke: "x", font: "close-o", size: 12, className: "text-white" }) }));
 const MediaThumb = ({ file, onRemove, onVideoReady }) => {
     var _a;
     const [src, setSrc] = useState("");

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from "../../../components/icon";
+import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
 import { useFetchUrlMetadata } from "../../../hooks/common/useFetchUrlMetadata";
 import { getHostLabel } from "../../../utils/link";
 import { openLink } from "../../../utils/openLink";
@@ -11,6 +11,6 @@ const LinkInputPreview = ({ url, onRemove }) => {
     const handleOpen = () => {
         openLink(url, t);
     };
-    return (_jsxs("div", { "data-testid": "link-input-preview", "data-cp-name": "LinkInputPreview", className: "flex w-full shrink-0 items-center gap-2 overflow-hidden bg-blue-25 pr-2", children: [_jsxs("button", { type: "button", onClick: handleOpen, className: "flex min-w-0 flex-1 items-center gap-2 py-0 pl-0 text-left", children: [_jsx("div", { className: "flex h-[51px] w-[51px] shrink-0 items-center justify-center overflow-hidden bg-blue-25", children: isLoading ? (_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-[var(--dc-color-primary)] border-t-transparent" })) : (data === null || data === void 0 ? void 0 : data.image) ? (_jsx("img", { src: data.image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Icon, { icon: "link-alt-b", size: 24, className: "text-[var(--dc-color-primary)]" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [isLoading ? (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: t("link_preview.loading") })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: (data === null || data === void 0 ? void 0 : data.title) || getHostLabel(url) }), ((data === null || data === void 0 ? void 0 : data.description) || !(data === null || data === void 0 ? void 0 : data.title)) && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-gray-400", children: (data === null || data === void 0 ? void 0 : data.description) || getHostLabel(url) }))] })), isError && !isLoading && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-gray-400", children: getHostLabel(url) }))] })] }), _jsx("button", { type: "button", onClick: onRemove, "data-testid": "link-input-preview-remove", className: "flex h-4 w-4 shrink-0 items-center justify-center", "aria-label": t("link_preview.remove"), children: _jsx(Icon, { icon: "close-b", size: 16, className: "text-gray-900" }) })] }));
+    return (_jsxs("div", { "data-testid": "link-input-preview", "data-cp-name": "LinkInputPreview", className: "flex w-full shrink-0 items-center gap-2 overflow-hidden bg-blue-25 pr-2", children: [_jsxs("button", { type: "button", onClick: handleOpen, className: "flex min-w-0 flex-1 items-center gap-2 py-0 pl-0 text-left", children: [_jsx("div", { className: "flex h-[51px] w-[51px] shrink-0 items-center justify-center overflow-hidden bg-blue-25", children: isLoading ? (_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-[var(--dc-color-primary)] border-t-transparent" })) : (data === null || data === void 0 ? void 0 : data.image) ? (_jsx("img", { src: data.image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(AdaptiveIcon, { stroke: "link", font: "link-alt-b", size: 24, className: "text-[var(--dc-color-primary)]" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [isLoading ? (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: t("link_preview.loading") })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-gray-900", children: (data === null || data === void 0 ? void 0 : data.title) || getHostLabel(url) }), ((data === null || data === void 0 ? void 0 : data.description) || !(data === null || data === void 0 ? void 0 : data.title)) && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-gray-400", children: (data === null || data === void 0 ? void 0 : data.description) || getHostLabel(url) }))] })), isError && !isLoading && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-gray-400", children: getHostLabel(url) }))] })] }), _jsx("button", { type: "button", onClick: onRemove, "data-testid": "link-input-preview-remove", className: "flex h-4 w-4 shrink-0 items-center justify-center", "aria-label": t("link_preview.remove"), children: _jsx(AdaptiveIcon, { stroke: "x", font: "close-b", size: 16, className: "text-gray-900" }) })] }));
 };
 export default LinkInputPreview;

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

@@ -4,7 +4,8 @@ interface MediaActionsProps {
     onFilesChange: (files: UploadFile[]) => void;
     buttonClassName?: string;
     showMediaUpload?: boolean;
+    crmComposer?: boolean;
 }
-export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload, }: MediaActionsProps): import("react/jsx-runtime").JSX.Element;
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload, crmComposer, }: MediaActionsProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MediaActions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAoD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,GACvB,EAAE,iBAAiB,2CA8JnB"}
+{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAuD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,EACtB,WAAmB,GACpB,EAAE,iBAAiB,2CA6LnB"}