@droppii-org/chat-sdk 0.1.72 → 0.1.73

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Tabs } from "antd";
+import { useMemo } from "react";
+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 ComposerTabs = ({ canUseInternal, hintText, 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, { 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") }));
+};
+export default ComposerTabs;

package/dist/src/components/message/footer/ComposerTextSyncPlugin.d.ts

@@ -0,0 +1,6 @@
+interface ComposerTextSyncPluginProps {
+    onChange: (text: string) => void;
+}
+declare const ComposerTextSyncPlugin: ({ onChange }: ComposerTextSyncPluginProps) => null;
+export default ComposerTextSyncPlugin;
+//# sourceMappingURL=ComposerTextSyncPlugin.d.ts.map

package/dist/src/components/message/footer/ComposerTextSyncPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerTextSyncPlugin.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/ComposerTextSyncPlugin.tsx"],"names":[],"mappings":"AAMA,UAAU,2BAA2B;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,sBAAsB,GAAI,cAAc,2BAA2B,SAYxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/src/components/message/footer/ComposerTextSyncPlugin.js

@@ -0,0 +1,16 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { useEffect } from "react";
+const ComposerTextSyncPlugin = ({ onChange }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                onChange($getRoot().getTextContent());
+            });
+        });
+    }, [editor, onChange]);
+    return null;
+};
+export default ComposerTextSyncPlugin;

package/dist/src/components/message/footer/EmojiPicker.d.ts

@@ -0,0 +1,7 @@
+interface EmojiPickerProps {
+    onEmojiSelect: (emoji: string) => void;
+    onClose: () => void;
+}
+declare const EmojiPicker: ({ onEmojiSelect, onClose }: EmojiPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default EmojiPicker;
+//# sourceMappingURL=EmojiPicker.d.ts.map

package/dist/src/components/message/footer/EmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/EmojiPicker.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CAiMhE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/components/message/footer/EmojiPicker.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+const EmojiPicker = ({ onEmojiSelect, onClose }) => {
+    const { t } = useTranslation("common");
+    const [activeCategory, setActiveCategory] = useState("smileys");
+    const emojiCategories = {
+        smileys: {
+            name: t("emoji_smileys"),
+            emojis: [
+                "😀",
+                "😃",
+                "😄",
+                "😁",
+                "😆",
+                "😅",
+                "😂",
+                "🤣",
+                "😊",
+                "😇",
+                "🙂",
+                "🙃",
+                "😉",
+                "😌",
+                "😍",
+                "🥰",
+                "😘",
+                "😗",
+                "😙",
+                "😚",
+                "😋",
+                "😛",
+                "😝",
+                "😜",
+                "🤪",
+                "🤨",
+                "🧐",
+                "🤓",
+                "😎",
+                "🤩",
+                "🥳",
+            ],
+        },
+        nature: {
+            name: t("emoji_nature"),
+            emojis: [
+                "🐶",
+                "🐱",
+                "🐭",
+                "🐹",
+                "🐰",
+                "🦊",
+                "🐻",
+                "🐼",
+                "🐨",
+                "🐯",
+                "🦁",
+                "🐮",
+                "🐷",
+                "🐸",
+                "🐵",
+                "🙈",
+                "🙉",
+                "🙊",
+                "🐒",
+                "🐔",
+                "🐧",
+                "🐦",
+                "🐤",
+                "🐣",
+                "🐥",
+                "🦆",
+                "🦅",
+                "🦉",
+                "🦇",
+                "🐺",
+            ],
+        },
+        food: {
+            name: t("emoji_food"),
+            emojis: [
+                "🍎",
+                "🍐",
+                "🍊",
+                "🍋",
+                "🍌",
+                "🍉",
+                "🍇",
+                "🍓",
+                "🍈",
+                "🍒",
+                "🍑",
+                "🥭",
+                "🍍",
+                "🥥",
+                "🥝",
+                "🍅",
+                "🍆",
+                "🥑",
+                "🥦",
+                "🥬",
+                "🥒",
+                "🌶️",
+                "🌽",
+                "🥕",
+                "🧄",
+                "🧅",
+                "🥔",
+                "🍠",
+                "🥐",
+                "🍞",
+            ],
+        },
+        activities: {
+            name: t("emoji_activities"),
+            emojis: [
+                "⚽",
+                "🏀",
+                "🏈",
+                "⚾",
+                "🥎",
+                "🎾",
+                "🏐",
+                "🏉",
+                "🥏",
+                "🎱",
+                "🪀",
+                "🏓",
+                "🏸",
+                "🏒",
+                "🏑",
+                "🥍",
+                "🏏",
+                "🪃",
+                "🥅",
+                "⛳",
+                "🪁",
+                "🏹",
+                "🎣",
+                "🤿",
+                "🥊",
+                "🥋",
+                "🎽",
+                "🛹",
+                "🛷",
+                "⛸️",
+            ],
+        },
+    };
+    return (_jsx("div", { className: "absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-xl shadow-lg w-96 z-50", children: _jsxs("div", { className: "p-3", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-gray-900", children: t("choose_emoji") }), _jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 text-xl", children: "\u00D7" })] }), _jsx("div", { className: "flex gap-1 mb-3", children: Object.entries(emojiCategories).map(([key, category]) => (_jsx("button", { onClick: () => setActiveCategory(key), className: `px-3 py-1 text-xs rounded-full transition-colors ${activeCategory === key
+                            ? "bg-blue-100 text-blue-600"
+                            : "text-gray-500 hover:text-gray-700"}`, children: category.name }, key))) }), _jsx("div", { className: "grid grid-cols-8 gap-1 max-h-48 overflow-y-auto", children: emojiCategories[activeCategory].emojis.map((emoji, index) => (_jsx("button", { onClick: () => onEmojiSelect(emoji), className: "p-2 text-xl hover:bg-gray-100 rounded-lg transition-colors", children: emoji }, index))) })] }) }));
+};
+export default EmojiPicker;

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

@@ -0,0 +1,2 @@
+export default function EnterHandler(): null;
+//# sourceMappingURL=EnterHandler.d.ts.map

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

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

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

@@ -0,0 +1,117 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_NORMAL, $getSelection, $isRangeSelection, $createParagraphNode, $getRoot, } from "lexical";
+import { useEffect, useRef } from "react";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
+import { $isQuoteNode } from "@lexical/rich-text";
+import { useMessageFooterContext } from ".";
+import useConversationStore from "../../../store/conversation";
+import emitter, { emit } from "../../../utils/events";
+export default function EnterHandler() {
+    const [editor] = useLexicalComposerContext();
+    const { onSendMessage, isInternal, listUploadFiles, isOpenCanned, activeCannedIndex, } = useMessageFooterContext();
+    const shiftEnterCount = useRef(0);
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
+    useEffect(() => {
+        return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+            // Case 1: Enter (submit, chặn xuống dòng)
+            if (!event.shiftKey) {
+                event.preventDefault();
+                shiftEnterCount.current = 0;
+                if (isOpenCanned) {
+                    emit("CANNED_RESPONSE_SELECT", activeCannedIndex);
+                    return true;
+                }
+                let plainText = "";
+                let richText = "";
+                // lấy plain text & html
+                editor.getEditorState().read(() => {
+                    plainText = $getRoot().getTextContent();
+                    richText = $generateHtmlFromNodes(editor);
+                });
+                const hasText = plainText.trim().length > 0;
+                const hasFiles = listUploadFiles.length > 0;
+                const hasQuote = !!(quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID);
+                const canSend = hasQuote ? hasText : hasText || hasFiles;
+                if (canSend) {
+                    const sent = onSendMessage({
+                        plainText,
+                        richText,
+                        type: hasFiles ? "file" : "text",
+                        isInternal,
+                    });
+                    if (!sent) {
+                        return true;
+                    }
+                }
+                editor.update(() => {
+                    const root = $getRoot();
+                    root.clear();
+                    const paragraph = $createParagraphNode();
+                    root.append(paragraph);
+                    paragraph.select();
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        const anchorNode = selection.anchor.getNode();
+                        const topLevelNode = anchorNode.getTopLevelElementOrThrow();
+                        const isListNode = $isListNode(topLevelNode);
+                        const isQuoteNode = $isQuoteNode(topLevelNode);
+                        const listType = isListNode
+                            ? topLevelNode.getListType()
+                            : undefined;
+                        if (selection.hasFormat("bold")) {
+                            selection.formatText("bold");
+                        }
+                        if (selection.hasFormat("italic")) {
+                            selection.formatText("italic");
+                        }
+                        if (selection.hasFormat("strikethrough")) {
+                            selection.formatText("strikethrough");
+                        }
+                        if (isQuoteNode) {
+                            // Nếu đang là QuoteNode → chuyển về Paragraph (bình thường)
+                            const paragraph = $createParagraphNode();
+                            // copy con của quote sang paragraph
+                            const children = topLevelNode.getChildren();
+                            children.forEach((child) => paragraph.append(child));
+                            topLevelNode.replace(paragraph);
+                        }
+                        if (isListNode && listType) {
+                            editor.dispatchCommand(listType === "number"
+                                ? INSERT_ORDERED_LIST_COMMAND
+                                : INSERT_UNORDERED_LIST_COMMAND, undefined);
+                        }
+                    }
+                });
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_NORMAL);
+    }, [
+        editor,
+        onSendMessage,
+        listUploadFiles,
+        quotedMessage,
+        quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID,
+        isInternal,
+        isOpenCanned,
+        activeCannedIndex,
+    ]);
+    useEffect(() => {
+        const clearEditor = () => {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const paragraph = $createParagraphNode();
+                root.append(paragraph);
+                paragraph.select();
+            });
+        };
+        emitter.on("CLEAR_COMPOSER", clearEditor);
+        return () => {
+            emitter.off("CLEAR_COMPOSER", clearEditor);
+        };
+    }, [editor]);
+    return null;
+}

package/dist/src/components/message/footer/FilePreview.d.ts

@@ -0,0 +1,9 @@
+import { UploadFile } from "antd";
+export declare function FilePreviewList({ files, onRemove, onVideoReady, }: {
+    files: UploadFile[];
+    onRemove: (file: UploadFile) => void;
+    onVideoReady?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare const FilePreview: () => import("react/jsx-runtime").JSX.Element;
+export default FilePreview;
+//# sourceMappingURL=FilePreview.d.ts.map

package/dist/src/components/message/footer/FilePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA6IlC,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,YAAY,GACb,EAAE;IACD,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,kDAsBA;AAED,QAAA,MAAM,WAAW,+CAQhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,76 @@
+"use client";
+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 { documentIcon } from "../../../assets/svg";
+import { DOCUMENT_MIME_TYPES } from "../../../utils/fileValidation";
+import { formatDuration, shortenFileName } from "../../../utils/common";
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return "0 B";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${Math.round(kb)} KB`;
+    return `${(kb / 1024).toFixed(1)} MB`;
+};
+const getFileType = (file) => {
+    var _a, _b, _c;
+    const mimeType = (_c = (_b = (_a = file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : file.type) !== null && _c !== void 0 ? _c : "";
+    if (DOCUMENT_MIME_TYPES.includes(mimeType))
+        return "document";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    return "image";
+};
+const RemoveButton = ({ file, onRemove }) => (_jsx("button", { type: "button", 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 MediaThumb = ({ file, onRemove, onVideoReady }) => {
+    var _a;
+    const [src, setSrc] = useState("");
+    const [duration, setDuration] = useState(null);
+    const isVideo = getFileType(file) === "video";
+    const isLoading = file.status === "uploading";
+    const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
+    useEffect(() => {
+        var _a;
+        const originFile = file.originFileObj;
+        if (!originFile) {
+            setSrc((_a = file.url) !== null && _a !== void 0 ? _a : "");
+            return;
+        }
+        const url = URL.createObjectURL(originFile);
+        setSrc(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file.originFileObj, file.url]);
+    const handleLoadedMetadata = (event) => {
+        setDuration(event.currentTarget.duration);
+        onVideoReady === null || onVideoReady === void 0 ? void 0 : onVideoReady();
+    };
+    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [isVideo ? (_jsx("video", { src: src, className: "h-12 w-12 rounded-lg object-cover", preload: "metadata", muted: true, onLoadedMetadata: handleLoadedMetadata })) : (_jsx("img", { src: src, alt: file.name, className: "h-12 w-12 rounded-lg object-cover" })), isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-lg bg-black/60", children: _jsxs("span", { className: "text-xs font-semibold text-white", children: [percent, "%"] }) })), isVideo && duration !== null && (_jsx("div", { className: "absolute bottom-1 left-1/2 flex w-9 -translate-x-1/2 items-center justify-center rounded-xl bg-black/70 px-1 text-center text-[10px] font-normal leading-4 text-white", children: formatDuration(duration) })), _jsx(RemoveButton, { file: file, onRemove: onRemove })] }));
+};
+const DocumentCard = ({ file, onRemove }) => {
+    var _a, _b;
+    const isLoading = file.status === "uploading";
+    const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
+    return (_jsxs("div", { className: "relative flex h-12 w-40 shrink-0 items-center gap-[7px] rounded-lg bg-chat-bubble-neutral/10 py-[4px] pl-2 pr-5", children: [_jsx("div", { className: "flex h-full w-8 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-8 [&>svg]:w-8", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[11px] font-normal leading-[160%] text-gray-900", children: shortenFileName(file.name) }), isLoading ? (_jsxs("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-gray-400", children: [percent, "%"] })) : (_jsx("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-gray-400", children: formatFileSize((_b = file.size) !== null && _b !== void 0 ? _b : 0) }))] }), _jsx(RemoveButton, { file: file, onRemove: onRemove })] }));
+};
+export function FilePreviewList({ files, onRemove, onVideoReady, }) {
+    if (files.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex items-center gap-3 self-stretch overflow-x-auto px-2 pb-2 pt-3", children: files.map((file) => {
+            if (getFileType(file) === "document") {
+                return (_jsx(DocumentCard, { file: file, onRemove: onRemove }, file.uid));
+            }
+            return (_jsx(MediaThumb, { file: file, onRemove: onRemove, onVideoReady: onVideoReady }, file.uid));
+        }) }));
+}
+const FilePreview = () => {
+    const { listUploadFiles, setListUploadFiles } = useMessageFooterContext();
+    const onRemoveFile = (file) => {
+        setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
+    };
+    return _jsx(FilePreviewList, { files: listUploadFiles, onRemove: onRemoveFile });
+};
+export default FilePreview;

package/dist/src/components/message/footer/LinkInputPreview.d.ts

@@ -0,0 +1,7 @@
+export interface LinkInputPreviewProps {
+    url: string;
+    onRemove: () => void;
+}
+declare const LinkInputPreview: ({ url, onRemove }: LinkInputPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkInputPreview;
+//# sourceMappingURL=LinkInputPreview.d.ts.map

package/dist/src/components/message/footer/LinkInputPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkInputPreview.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/LinkInputPreview.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,mBAAmB,qBAAqB,4CAoEjE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../../../components/icon";
+import { useFetchUrlMetadata } from "../../../hooks/common/useFetchUrlMetadata";
+import { getHostLabel } from "../../../utils/link";
+import { openLink } from "../../../utils/openLink";
+import { useTranslation } from "react-i18next";
+const LinkInputPreview = ({ url, onRemove }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const { data, isLoading, isError } = useFetchUrlMetadata(url);
+    const handleOpen = () => {
+        openLink(url, t);
+    };
+    return (_jsxs("div", { "data-testid": "link-input-preview", 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-primary-400 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-primary-400" })) }), _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" }) })] }));
+};
+export default LinkInputPreview;

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

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

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

@@ -0,0 +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;AAqD1E,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,2CAyKnB"}

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection } from "lexical";
+import { Button, Upload, message as antdMessage } from "antd";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import EmojiPicker from "./EmojiPicker";
+import { Icon } from "../../../components/icon";
+import { createUploadFile, validateFile, validateVideoLimit, } from "../../../utils/fileValidation";
+import { DOCUMENT_TYPES } from "./editorConfig";
+import CannedResponseIcon from "../../../assets/svg/canned-response";
+import { useMessageFooterContext } from ".";
+import useAuthStore from "../../../store/auth";
+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, }) {
+    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);
+    const handleEmojiSelect = useCallback((emoji) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                selection.insertText(emoji);
+            }
+        });
+        setShowEmojiPicker(false);
+    }, [editor]);
+    const beforeUploadImagesAndVideo = (file, fileList) => {
+        const validation = validateFile(file, t);
+        if (!validation.isValid) {
+            antdMessage.error(validation.error);
+            return Upload.LIST_IGNORE;
+        }
+        const videoValidation = validateVideoLimit([file], listUploadFiles, t);
+        if (!videoValidation.isValid) {
+            antdMessage.error(videoValidation.error);
+            return Upload.LIST_IGNORE;
+        }
+        const newVideos = fileList.filter((f) => { var _a; return (_a = f.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/"); });
+        if (newVideos.length > 1) {
+            antdMessage.error(t("video_limit_exceeded"));
+            return Upload.LIST_IGNORE;
+        }
+        return false;
+    };
+    const beforeUploadFile = (file) => {
+        const isAllowed = DOCUMENT_TYPES.includes(file.type);
+        if (!isAllowed) {
+            antdMessage.error(t("invalid_document_format", { fileName: file.name }));
+            return Upload.LIST_IGNORE;
+        }
+        return false;
+    };
+    const handleChange = (info) => {
+        let newList = [...info.fileList];
+        const lastFile = info.file;
+        if (DOCUMENT_TYPES.includes(lastFile.type || "")) {
+            newList = newList.filter((f) => !DOCUMENT_TYPES.includes(f.type || ""));
+            newList.push(lastFile);
+        }
+        const normalizedList = newList.map((file) => {
+            var _a;
+            const originFile = ((_a = file.originFileObj) !== null && _a !== void 0 ? _a : file);
+            return Object.assign(Object.assign({}, createUploadFile(originFile)), { uid: file.uid });
+        });
+        onFilesChange(normalizedList);
+    };
+    const onPressCanned = useCallback(async () => {
+        if (!isOpenCanned) {
+            editor.focus();
+            await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for focus to complete
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    selection.insertText(" #");
+                }
+            });
+        }
+        else {
+            setIsOpenCanned(false);
+        }
+    }, [isOpenCanned, editor]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setShowEmojiPicker(false);
+            }
+        };
+        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", { 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-blue-100 text-blue-600"), 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) }))] }));
+}

package/dist/src/components/message/footer/PasteAndDropPlugin.d.ts

@@ -0,0 +1,6 @@
+interface PasteAndDropPluginProps {
+    onFilesAdded?: (files: File[]) => void;
+}
+declare const PasteAndDropPlugin: ({ onFilesAdded }: PasteAndDropPluginProps) => null;
+export default PasteAndDropPlugin;
+//# sourceMappingURL=PasteAndDropPlugin.d.ts.map

package/dist/src/components/message/footer/PasteAndDropPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasteAndDropPlugin.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/PasteAndDropPlugin.tsx"],"names":[],"mappings":"AASA,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACxC;AAED,QAAA,MAAM,kBAAkB,GAAI,kBAAkB,uBAAuB,SAqIpE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}