@droppii-org/chat-sdk 0.1.2 → 0.1.4

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

@@ -1,9 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Upload, message, } from "antd";
-import clsx from "clsx";
-import EmojiPicker from "./EmojiPicker";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "antd";
 import { Icon } from "../../icon";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $createParagraphNode, $getRoot, $getSelection, $isRangeSelection, } from "lexical";
@@ -11,33 +9,27 @@ 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 { useTranslation } from "react-i18next";
-import { validateFile, validateVideoLimit } from "../../../utils/fileValidation";
-const documentTypes = [
-    "application/pdf",
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-];
-const EmojiIcon = (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M14 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.39997Z", fill: "white" }), _jsx("path", { d: "M7.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", fill: "white" }), _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" }) }));
+import MediaActions from "./MediaActions";
+import useConversationStore from "../../../store/conversation";
 const ActionBar = () => {
     const [editor] = useLexicalComposerContext();
-    const { onSendMessage, setListUploadFiles } = useMessageFooterContext();
-    const containerRef = useRef(null);
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const { listUploadFiles } = useMessageFooterContext();
+    const { onSendMessage, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const [isEmptyInput, setIsEmptyInput] = useState(true);
-    const { t } = useTranslation();
-    const canSend = !isEmptyInput || listUploadFiles.length > 0;
+    const canSend = useMemo(() => {
+        const hasQuote = !!(quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID);
+        return hasQuote
+            ? !isEmptyInput
+            : !isEmptyInput || listUploadFiles.length > 0;
+    }, [isEmptyInput, listUploadFiles === null || listUploadFiles === void 0 ? void 0 : listUploadFiles.length, quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID]);
     const handleSend = useCallback(() => {
         let plainText = "";
         let richText = "";
-        // lấy plain text & html
         editor.getEditorState().read(() => {
             plainText = $getRoot().getTextContent();
             richText = $generateHtmlFromNodes(editor);
         });
-        if (plainText.trim().length > 0 || listUploadFiles.length > 0) {
+        if (canSend) {
             onSendMessage({
                 plainText,
                 richText,
@@ -67,9 +59,7 @@ const ActionBar = () => {
                     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);
@@ -81,68 +71,7 @@ const ActionBar = () => {
                 }
             }
         });
-    }, [editor, onSendMessage]);
-    const handleEmojiSelect = useCallback((emoji) => {
-        editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-                selection.insertText(emoji); // chèn emoji như text bình thường
-            }
-        });
-        setShowEmojiPicker(false);
-    }, [editor]);
-    const beforeUploadImagesAndVideo = (file, fileList) => {
-        // Validate file type and size
-        const validation = validateFile(file, t);
-        if (!validation.isValid) {
-            message.error(validation.error);
-            return Upload.LIST_IGNORE;
-        }
-        // Validate video limit
-        const videoValidation = validateVideoLimit([file], listUploadFiles, t);
-        if (!videoValidation.isValid) {
-            message.error(videoValidation.error);
-            return Upload.LIST_IGNORE;
-        }
-        // Check if multiple videos in current upload batch
-        const newVideos = fileList.filter((f) => { var _a; return (_a = f.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/"); });
-        if (newVideos.length > 1) {
-            message.error(t("video_limit_exceeded", {
-                defaultValue: "Chỉ được phép tải lên 1 video duy nhất",
-            }));
-            return Upload.LIST_IGNORE;
-        }
-        return false;
-    };
-    const beforeUploadFile = (file) => {
-        const isAllowed = documentTypes.includes(file.type);
-        if (!isAllowed) {
-            message.error(`${file.name} không đúng định dạng (chỉ hỗ trợ PDF, DOC, DOCX)`);
-            return Upload.LIST_IGNORE;
-        }
-        return false;
-    };
-    const handleChange = (info) => {
-        var _a;
-        let newList = [...info.fileList];
-        const lastFile = info.file;
-        if (documentTypes.includes(lastFile.type || "")) {
-            newList = newList.filter((f) => !documentTypes.includes(f.type || ""));
-            const originFile = ((_a = lastFile.originFileObj) !== null && _a !== void 0 ? _a : lastFile);
-            newList.push(Object.assign(Object.assign({}, lastFile), { originFileObj: originFile }));
-        }
-        setListUploadFiles(newList);
-    };
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
-                setShowEmojiPicker(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
+    }, [editor, onSendMessage, canSend]);
     useEffect(() => {
         return editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
@@ -152,6 +81,6 @@ const ActionBar = () => {
             });
         });
     }, [editor]);
-    return (_jsxs("div", { className: "flex items-center justify-between px-4", ref: containerRef, children: [_jsxs("div", { className: "flex items-center gap-3 relative", children: [_jsx(Button, { type: "text", shape: "default", className: clsx("text-gray-500 w-8 h-8 p-0", showEmojiPicker ? "bg-blue-100 text-blue-600" : "text-gray-500"), onClick: () => setShowEmojiPicker(!showEmojiPicker), children: EmojiIcon }), _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: "text-gray-500 w-8 h-8 p-0 text-gray-500", 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: "text-gray-500 w-8 h-8 p-0 text-gray-500", children: AttachIcon }) }), showEmojiPicker && (_jsx(EmojiPicker, { onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }), _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-blue-500" : "text-gray-400"}` }) })] }));
+    return (_jsxs("div", { 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-blue-500" : "text-gray-400"}` }) })] }));
 };
 export default ActionBar;

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

@@ -0,0 +1,7 @@
+type Props = {
+    onOpen: (query: string) => void;
+    onClose: () => void;
+};
+export declare function CannedResponseTriggerPlugin({ onOpen, onClose }: Props): null;
+export {};
+//# sourceMappingURL=CannedResponsePlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAIA,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,QAiCrE"}

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

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection } from "lexical";
+export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+                    onClose();
+                    return;
+                }
+                const anchor = selection.anchor;
+                const node = anchor.getNode();
+                const text = node.getTextContent();
+                const offset = anchor.offset;
+                const before = text.slice(0, offset);
+                // match #abc (KHÔNG có space phía sau)
+                const match = before.match(/(^|\s)#(\w*)$/);
+                if (match) {
+                    onOpen(match[2] || "");
+                }
+                else {
+                    onClose();
+                }
+            });
+        });
+    }, [editor, onOpen, onClose]);
+    return null;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CAyLhE,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"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/components/message/footer/EmojiPicker.js

@@ -1,11 +1,13 @@
 "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: "Smileys & People",
+            name: t("emoji_smileys"),
             emojis: [
                 "😀",
                 "😃",
@@ -41,7 +43,7 @@ const EmojiPicker = ({ onEmojiSelect, onClose }) => {
             ],
         },
         nature: {
-            name: "Animals & Nature",
+            name: t("emoji_nature"),
             emojis: [
                 "🐶",
                 "🐱",
@@ -76,7 +78,7 @@ const EmojiPicker = ({ onEmojiSelect, onClose }) => {
             ],
         },
         food: {
-            name: "Food & Drink",
+            name: t("emoji_food"),
             emojis: [
                 "🍎",
                 "🍐",
@@ -111,7 +113,7 @@ const EmojiPicker = ({ onEmojiSelect, onClose }) => {
             ],
         },
         activities: {
-            name: "Activities",
+            name: t("emoji_activities"),
             emojis: [
                 "⚽",
                 "🏀",
@@ -146,6 +148,8 @@ const EmojiPicker = ({ onEmojiSelect, onClose }) => {
             ],
         },
     };
-    return (_jsx("div", { className: "absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-xl shadow-lg w-80 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: "Choose an 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.split(" ")[0] }, 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))) })] }) }));
+    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/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":"AAsBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAwFnC"}
+{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAuBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAmGnC"}

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

@@ -6,11 +6,12 @@ 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";
 export default function EnterHandler() {
     const [editor] = useLexicalComposerContext();
-    const { onSendMessage } = useMessageFooterContext();
+    const { onSendMessage, listUploadFiles } = useMessageFooterContext();
     const shiftEnterCount = useRef(0);
-    const { listUploadFiles } = useMessageFooterContext();
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
     useEffect(() => {
         return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
             // Case 1: Enter (submit, chặn xuống dòng)
@@ -24,11 +25,15 @@ export default function EnterHandler() {
                     plainText = $getRoot().getTextContent();
                     richText = $generateHtmlFromNodes(editor);
                 });
-                if (plainText.trim().length > 0 || listUploadFiles.length > 0) {
+                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) {
                     onSendMessage({
                         plainText,
                         richText,
-                        type: listUploadFiles.length > 0 ? "file" : "text",
+                        type: hasFiles ? "file" : "text",
                     });
                 }
                 editor.update(() => {
@@ -74,6 +79,12 @@ export default function EnterHandler() {
             }
             return false;
         }, COMMAND_PRIORITY_NORMAL);
-    }, [editor, onSendMessage, listUploadFiles]);
+    }, [
+        editor,
+        onSendMessage,
+        listUploadFiles,
+        quotedMessage,
+        quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID,
+    ]);
     return null;
 }

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

@@ -1,9 +1,14 @@
+import { UploadFile } from "antd";
 interface ShortenOptions {
     maxLength?: number;
     keepStart?: number;
     keepEnd?: number;
 }
 export declare const shortenFileName: (name: string, options?: ShortenOptions) => string;
+export declare function FilePreviewList({ files, onRemove, }: {
+    files: UploadFile[];
+    onRemove: (file: UploadFile) => 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/components/message/footer/FilePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAYA,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC;AAEF,QAAA,MAAM,WAAW,+CAkFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,UAAU,EAAE,MAAM,MAAM,CAAC;AAS1C,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAiBzE,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC,kDA8EA;AAED,QAAA,MAAM,WAAW,+CAQhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -17,20 +17,14 @@ export const shortenFileName = (name, options = {}) => {
     const dotIndex = name.lastIndexOf(".");
     const ext = dotIndex !== -1 ? name.slice(dotIndex) : "";
     const base = dotIndex !== -1 ? name.slice(0, dotIndex) : name;
-    // Tính toán độ dài phần đầu & cuối
-    const available = maxLength - ext.length - 3; // trừ "...”
+    const available = maxLength - ext.length - 3;
     const startLen = keepStart !== null && keepStart !== void 0 ? keepStart : Math.floor(available / 2);
     const endLen = keepEnd !== null && keepEnd !== void 0 ? keepEnd : Math.floor(available / 2);
     const start = base.slice(0, startLen);
     const end = base.slice(-endLen);
     return `${start}...${end}${ext}`;
 };
-const FilePreview = () => {
-    var _a;
-    const { listUploadFiles, setListUploadFiles } = useMessageFooterContext();
-    const onRemoveFile = (file) => {
-        setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
-    };
+export function FilePreviewList({ files, onRemove, }) {
     const renderFilePreview = useCallback((file) => {
         var _a, _b, _c;
         const isDocument = documentTypes.includes(((_a = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) || "");
@@ -40,10 +34,19 @@ const FilePreview = () => {
             src = URL.createObjectURL(file.originFileObj);
         }
         if (isDocument) {
-            return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2", children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_c = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _c === void 0 ? void 0 : _c.name) || "") }), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
+            return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2", children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_c = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _c === void 0 ? void 0 : _c.name) || "") }), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemove(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
         }
-        return (_jsxs("div", { className: "relative rounded-md border", children: [isVideo ? (_jsx("video", { src: src, className: "w-[48px] h-[48px] object-cover rounded-lg", autoPlay: false })) : (_jsx("img", { src: src, alt: file.name, className: "w-[48px] h-[48px] object-cover rounded-lg" })), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) }), isVideo && (_jsx(Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", icon: "play-b", size: 20, color: "white" }))] }, file.uid));
-    }, [listUploadFiles]);
-    return (_jsx("div", { className: "overflow-x-auto mb-[-4px]", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: (_a = listUploadFiles === null || listUploadFiles === void 0 ? void 0 : listUploadFiles.map) === null || _a === void 0 ? void 0 : _a.call(listUploadFiles, (file) => renderFilePreview(file)) }) }) }));
+        return (_jsxs("div", { className: "relative rounded-md border", children: [isVideo ? (_jsx("video", { src: src, className: "w-[48px] h-[48px] object-cover rounded-lg", autoPlay: false })) : (_jsx("img", { src: src, alt: file.name, className: "w-[48px] h-[48px] object-cover rounded-lg" })), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemove(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) }), isVideo && (_jsx(Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", icon: "play-b", size: 20, color: "white" }))] }, file.uid));
+    }, [files]);
+    if (files.length === 0)
+        return null;
+    return (_jsx("div", { className: "overflow-x-auto mb-[-4px]", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: files.map((file) => renderFilePreview(file)) }) }) }));
+}
+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/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/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;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,2CAwKnB"}

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

@@ -0,0 +1,98 @@
+"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 "../../icon";
+import { validateFile, validateVideoLimit, } from "../../../utils/fileValidation";
+import { DOCUMENT_TYPES } from "./editorConfig";
+import CannedResponseIcon from "../../../assets/svg/cannedResponse";
+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) => {
+        var _a;
+        let newList = [...info.fileList];
+        const lastFile = info.file;
+        if (DOCUMENT_TYPES.includes(lastFile.type || "")) {
+            newList = newList.filter((f) => !DOCUMENT_TYPES.includes(f.type || ""));
+            const originFile = ((_a = lastFile.originFileObj) !== null && _a !== void 0 ? _a : lastFile);
+            newList.push(Object.assign(Object.assign({}, lastFile), { originFileObj: originFile }));
+        }
+        onFilesChange(newList);
+    };
+    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/components/message/footer/QuotedMessage.d.ts

@@ -0,0 +1,2 @@
+export declare const QuotedMessageFooter: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=QuotedMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuotedMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/QuotedMessage.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,sDA4C/B,CAAC"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../../store/conversation";
+import { Icon } from "../../icon";
+import { useCallback } from "react";
+import { Button } from "antd";
+import { useChatContext } from "../../../context/ChatContext";
+import { generateContentBasedOnMessageType } from "../../../utils/common";
+export const QuotedMessageFooter = () => {
+    var _a;
+    const { t } = useTranslation();
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const user = useChatContext().user;
+    const isMe = (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
+    const handleClearQuotedMessage = useCallback(() => {
+        setQuotedMessage(null);
+    }, [setQuotedMessage]);
+    if (!quotedMessage)
+        return null;
+    return (_jsxs("div", { className: "flex flex-row items-center py-2 px-3 bg-blue-50 flex-1 gap-3", children: [_jsx("div", { className: "flex pr-3 items-center justify-items-center border-r-2 border-blue-500 h-full", children: _jsx(Icon, { icon: "arrow-forward-b", className: "text-blue-500", size: 16 }) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium", children: t("reply_to", {
+                            name: isMe ? t("your_self") : (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.senderNickname) || "",
+                        }) }), _jsx("p", { className: "text-sm text-gray-500 truncate", children: generateContentBasedOnMessageType(quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.contentType, (_a = quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.textElem) === null || _a === void 0 ? void 0 : _a.content) })] }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleClearQuotedMessage, children: _jsx(Icon, { icon: "close-o", size: 16 }) })] }));
+};

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

@@ -0,0 +1,24 @@
+import { LinkNode } from "@lexical/link";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode } from "@lexical/list";
+export declare const editorTheme: {
+    text: {
+        bold: string;
+        italic: string;
+        strikethrough: string;
+        underline: string;
+    };
+    quote: string;
+    list: {
+        nested: {
+            listitem: string;
+        };
+        ol: string;
+        ul: string;
+    };
+    link: string;
+};
+export declare const editorNodes: (typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
+export declare const editorOnError: (error: Error) => void;
+export declare const DOCUMENT_TYPES: string[];
+//# sourceMappingURL=editorConfig.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editorConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/editorConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAcvB,CAAC;AAEF,eAAO,MAAM,WAAW,qGAMvB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,SAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,UAI1B,CAAC"}

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

@@ -0,0 +1,33 @@
+import { LinkNode } from "@lexical/link";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode } from "@lexical/list";
+export const editorTheme = {
+    text: {
+        bold: "font-bold",
+        italic: "italic",
+        strikethrough: "line-through",
+        underline: "underline",
+    },
+    quote: "border-l-4 border-gray-300 pl-4 italic text-gray-600",
+    list: {
+        nested: { listitem: "list-none" },
+        ol: "list-decimal list-inside",
+        ul: "list-disc list-inside",
+    },
+    link: "text-blue-500 underline hover:text-blue-700",
+};
+export const editorNodes = [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    LinkNode,
+];
+export const editorOnError = (error) => {
+    console.error(error);
+};
+export const DOCUMENT_TYPES = [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+];

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

@@ -2,9 +2,10 @@ import { MessageFooterContextType } from "../../../types/chat";
 import { ISessionByStatus } from "../../../store/type";
 interface MessageFooterProps {
     currentSession?: ISessionByStatus;
+    openCreateCannedModal?: () => void;
 }
 export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;
 export declare const useMessageFooterContext: () => MessageFooterContextType;
-declare const MessageFooterProvider: ({ currentSession }: MessageFooterProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageFooterProvider: ({ currentSession, openCreateCannedModal, }: MessageFooterProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageFooterProvider;
 //# sourceMappingURL=index.d.ts.map

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":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,oBAAoB,kBAAkB,4CA6DpE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAQvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAM/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAiHpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}