@droppii-org/chat-sdk 0.0.21 → 0.0.22

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

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAuGA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,GAAI,sCAG3B,yBAAyB,4CAuL3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAuGA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,GAAI,sCAG3B,yBAAyB,4CA8L3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -104,9 +104,14 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
         const threadId = searchParams.get("threadId");
         if (threadId) {
             setSelectedThreadId(threadId);
+            const selectedConversation = conversations.find((conv) => conv.id === threadId);
+            if (selectedConversation) {
+                setConversationData(selectedConversation);
+            }
         }
         else if (conversations.length > 0) {
             setSelectedThreadId(conversations[0].id);
+            setConversationData(conversations[0]);
             const newSearchParams = new URLSearchParams(searchParams);
             newSearchParams.set("threadId", conversations[0].id);
             router.replace(`${pathname}?${newSearchParams.toString()}`);

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":"AACA,OAAO,EAAE,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AAgBxE,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAqH3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAc3D,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAkE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -1,33 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SessionType } from "@openim/wasm-client-sdk";
 import { useMessage } from "../../hooks/message/useMessage";
-import { Button, Input, Spin, Tooltip } from "antd";
-import { Icon } from "../icon";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useSendMessage } from "../../hooks/message/useSendMessage";
+import { Spin } from "antd";
+import { useEffect, useMemo, useRef } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import emitter from "../../utils/events";
-import MessageItem from "./MessageItem";
+import MessageItem from "./item";
 import InfiniteScroll from "react-infinite-scroll-component";
 import MessageHeader from "./MessageHeader";
+import MessageFooter from "./footer";
 dayjs.extend(isToday);
 const MessageList = (props) => {
     var _a, _b;
     const { conversationData, onClose, conversationId } = props;
     const scrollRef = useRef(null);
     const { getMoreOldMessages, moreOldLoading, loadState, latestLoadState } = useMessage(conversationId);
-    const { sendTextMessage } = useSendMessage({
-        recvID: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType) !== SessionType.Single
-            ? ""
-            : (conversationData === null || conversationData === void 0 ? void 0 : conversationData.userID) || "",
-        groupID: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType) === SessionType.Single
-            ? ""
-            : (conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID) || "",
-    });
-    const [textMessage, setTextMessage] = useState("");
-    const [composing, setComposing] = useState(false);
+    const lastMessage = useMemo(() => {
+        var _a;
+        const messageList = (_a = latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList;
+        return messageList === null || messageList === void 0 ? void 0 : messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
+    }, [latestLoadState]);
     const scrollToBottom = () => {
         setTimeout(() => {
             var _a, _b;
@@ -37,13 +30,6 @@ const MessageList = (props) => {
             });
         });
     };
-    const onSendTextMessage = useCallback(async () => {
-        var _a;
-        const messageList = (_a = latestLoadState.current) === null || _a === void 0 ? void 0 : _a.messageList;
-        setTextMessage("");
-        const lastMessage = messageList === null || messageList === void 0 ? void 0 : messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
-        sendTextMessage(textMessage, lastMessage);
-    }, [textMessage, sendTextMessage, latestLoadState]);
     const loadMoreMessage = () => {
         if (!loadState.hasMoreOld || moreOldLoading)
             return;
@@ -51,7 +37,6 @@ const MessageList = (props) => {
     };
     useEffect(() => {
         emitter.on("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
-        console.log("CHAT_LIST_SCROLL_TO_BOTTOM");
         return () => {
             emitter.off("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
         };
@@ -61,13 +46,6 @@ const MessageList = (props) => {
                     overflow: "auto",
                     display: "flex",
                     flexDirection: "column-reverse",
-                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.groupMessageList) === null || _a === void 0 ? void 0 : _a.length) || 0, next: loadMoreMessage, style: { display: "flex", flexDirection: "column-reverse" }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableDiv", children: (_b = loadState.groupMessageList) === null || _b === void 0 ? void 0 : _b.toReversed().map((message) => _jsx(MessageItem, { groupMessage: message })) }) }), _jsx("div", { className: "border-t px-4 py-3", children: _jsx("div", { className: "border rounded-lg bg-gray-50", children: _jsxs("div", { className: "px-4 py-3 flex items-center gap-4", children: [_jsx(Input, { placeholder: "Nh\u1EADp tin nh\u1EAFn", size: "small", variant: "borderless", value: textMessage, onChange: (e) => setTextMessage(e.target.value), onKeyDown: (e) => {
-                                    if (composing) {
-                                        return;
-                                    }
-                                    if (e.key === "Enter") {
-                                        onSendTextMessage();
-                                    }
-                                }, onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false) }), _jsx(Tooltip, { title: "G\u1EEDi tin nh\u1EAFn", children: _jsx(Button, { type: "primary", shape: "circle", size: "middle", icon: _jsx(Icon, { icon: "send-b", color: "white", size: 16 }), disabled: textMessage.length === 0, onClick: onSendTextMessage }) })] }) }) })] }));
+                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.groupMessageList) === null || _a === void 0 ? void 0 : _a.length) || 0, next: loadMoreMessage, style: { display: "flex", flexDirection: "column-reverse" }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableDiv", children: (_b = loadState.groupMessageList) === null || _b === void 0 ? void 0 : _b.toReversed().map((message) => _jsx(MessageItem, { groupMessage: message })) }) }), _jsx(MessageFooter, { lastMessage: lastMessage })] }));
 };
 export default MessageList;

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

@@ -0,0 +1,3 @@
+declare const ActionBar: () => import("react/jsx-runtime").JSX.Element;
+export default ActionBar;
+//# sourceMappingURL=ActionBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAgEA,QAAA,MAAM,SAAS,+CA+Nd,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,143 @@
+"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 { Icon } from "../../icon";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createParagraphNode, $getRoot, $getSelection, $isRangeSelection, } from "lexical";
+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 ".";
+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", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+const ActionBar = () => {
+    const [editor] = useLexicalComposerContext();
+    const { onSendMessage, setListUploadFiles } = useMessageFooterContext();
+    const containerRef = useRef(null);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const { listUploadFiles } = useMessageFooterContext();
+    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) {
+            onSendMessage({
+                plainText,
+                richText,
+                type: listUploadFiles.length > 0 ? "file" : "text",
+            });
+        }
+        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);
+                }
+            }
+        });
+    }, [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) => {
+        const isImage = file.type === "image/jpeg" ||
+            file.type === "image/png" ||
+            file.type === "image/jpg";
+        const isVideo = file.type.startsWith("video/");
+        // check format
+        if (!isImage && !isVideo) {
+            message.error(`${file.name} không đúng định dạng JPG, JPEG, PNG hoặc VIDEO`);
+            return Upload.LIST_IGNORE;
+        }
+        // check size
+        const maxSize = isImage ? 5 : 200; // MB
+        if (file.size / 1024 / 1024 > maxSize) {
+            message.error(`${file.name} có kích thước tập tin vượt quá ${maxSize}MB`);
+            return Upload.LIST_IGNORE;
+        }
+        // nếu là video thì chỉ cho 1 cái duy nhất
+        if (isVideo) {
+            const hasVideo = listUploadFiles.some((f) => { var _a; return (_a = f.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/"); });
+            if (hasVideo) {
+                message.error("Chỉ được phép tải lên 1 video duy nhất");
+                return Upload.LIST_IGNORE;
+            }
+        }
+        return true;
+    };
+    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 isAllowed;
+    };
+    const handleChange = (info) => {
+        let newList = [...info.fileList];
+        // Nếu file mới là tài liệu -> chỉ giữ 1 cái (file cuối)
+        const lastFile = info.file;
+        if (documentTypes.includes(lastFile.type || "")) {
+            newList = newList.filter((f) => documentTypes.includes(f.type || "") === false); // remove doc cũ
+            newList.push(lastFile); // add doc mới
+        }
+        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);
+    }, []);
+    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: _jsx(Icon, { icon: "link-o", size: 22 }) }) }), 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, children: _jsx(Icon, { icon: "send-b", size: 28, className: "text-blue-500" }) })] }));
+};
+export default ActionBar;

package/dist/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/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":"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"}

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

@@ -0,0 +1,151 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const EmojiPicker = ({ onEmojiSelect, onClose }) => {
+    const [activeCategory, setActiveCategory] = useState("smileys");
+    const emojiCategories = {
+        smileys: {
+            name: "Smileys & People",
+            emojis: [
+                "😀",
+                "😃",
+                "😄",
+                "😁",
+                "😆",
+                "😅",
+                "😂",
+                "🤣",
+                "😊",
+                "😇",
+                "🙂",
+                "🙃",
+                "😉",
+                "😌",
+                "😍",
+                "🥰",
+                "😘",
+                "😗",
+                "😙",
+                "😚",
+                "😋",
+                "😛",
+                "😝",
+                "😜",
+                "🤪",
+                "🤨",
+                "🧐",
+                "🤓",
+                "😎",
+                "🤩",
+                "🥳",
+            ],
+        },
+        nature: {
+            name: "Animals & Nature",
+            emojis: [
+                "🐶",
+                "🐱",
+                "🐭",
+                "🐹",
+                "🐰",
+                "🦊",
+                "🐻",
+                "🐼",
+                "🐨",
+                "🐯",
+                "🦁",
+                "🐮",
+                "🐷",
+                "🐸",
+                "🐵",
+                "🙈",
+                "🙉",
+                "🙊",
+                "🐒",
+                "🐔",
+                "🐧",
+                "🐦",
+                "🐤",
+                "🐣",
+                "🐥",
+                "🦆",
+                "🦅",
+                "🦉",
+                "🦇",
+                "🐺",
+            ],
+        },
+        food: {
+            name: "Food & Drink",
+            emojis: [
+                "🍎",
+                "🍐",
+                "🍊",
+                "🍋",
+                "🍌",
+                "🍉",
+                "🍇",
+                "🍓",
+                "🍈",
+                "🍒",
+                "🍑",
+                "🥭",
+                "🍍",
+                "🥥",
+                "🥝",
+                "🍅",
+                "🍆",
+                "🥑",
+                "🥦",
+                "🥬",
+                "🥒",
+                "🌶️",
+                "🌽",
+                "🥕",
+                "🧄",
+                "🧅",
+                "🥔",
+                "🍠",
+                "🥐",
+                "🍞",
+            ],
+        },
+        activities: {
+            name: "Activities",
+            emojis: [
+                "⚽",
+                "🏀",
+                "🏈",
+                "⚾",
+                "🥎",
+                "🎾",
+                "🏐",
+                "🏉",
+                "🥏",
+                "🎱",
+                "🪀",
+                "🏓",
+                "🏸",
+                "🏒",
+                "🏑",
+                "🥍",
+                "🏏",
+                "🪃",
+                "🥅",
+                "⛳",
+                "🪁",
+                "🏹",
+                "🎣",
+                "🤿",
+                "🥊",
+                "🥋",
+                "🎽",
+                "🛹",
+                "🛷",
+                "⛸️",
+            ],
+        },
+    };
+    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))) })] }) }));
+};
+export default EmojiPicker;

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

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

package/dist/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":"AAsBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAqHnC"}

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

@@ -0,0 +1,106 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_NORMAL, $getSelection, $isRangeSelection, $createParagraphNode, $createLineBreakNode, $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 ".";
+export default function EnterHandler() {
+    const [editor] = useLexicalComposerContext();
+    const { onSendMessage } = useMessageFooterContext();
+    const shiftEnterCount = useRef(0);
+    const { listUploadFiles } = useMessageFooterContext();
+    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;
+                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) {
+                    onSendMessage({
+                        plainText,
+                        richText,
+                        type: listUploadFiles.length > 0 ? "file" : "text",
+                    });
+                }
+                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;
+            }
+            // Case 2: Shift+Enter
+            if (event.shiftKey) {
+                event.preventDefault();
+                shiftEnterCount.current += 1;
+                if (shiftEnterCount.current >= 2) {
+                    // Tách block mới
+                    shiftEnterCount.current = 0;
+                    editor.update(() => {
+                        const selection = $getSelection();
+                        if ($isRangeSelection(selection)) {
+                            const paragraph = $createParagraphNode();
+                            selection.insertNodes([paragraph]);
+                            paragraph.select(); // con trỏ nhảy vào block mới
+                        }
+                    });
+                }
+                else {
+                    // Xuống dòng trong block
+                    editor.update(() => {
+                        const selection = $getSelection();
+                        if ($isRangeSelection(selection)) {
+                            selection.insertNodes([$createLineBreakNode()]);
+                        }
+                    });
+                }
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_NORMAL);
+    }, [editor, onSendMessage, listUploadFiles]);
+    return null;
+}

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

@@ -0,0 +1,10 @@
+export declare const documentIcon: import("react/jsx-runtime").JSX.Element;
+interface ShortenOptions {
+    maxLength?: number;
+    keepStart?: number;
+    keepEnd?: number;
+}
+export declare const shortenFileName: (name: string, options?: ShortenOptions) => string;
+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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,yCAoCxB,CAAC;AAEF,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,+CAgFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useMessageFooterContext } from ".";
+import { Button } from "antd";
+import { Icon } from "../../icon";
+const documentTypes = [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+];
+export const documentIcon = (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M10.1923 5.83301L23.4363 5.83301L34.1656 14.2054V29.8639C34.1656 31.8997 32.5286 34.1663 29.8068 34.1663C27.0849 34.1663 10.1923 34.1663 10.1923 34.1663C7.4704 34.1663 5.8335 31.8997 5.8335 29.8639V10.0305C5.8335 7.99475 7.4704 5.83301 10.1923 5.83301Z", fill: "#24B0FF" }), _jsx("path", { d: "M10.8335 28.1394V20.833H16.0309V22.4222H12.7026V23.5916H15.3612V25.1708H12.7026V28.1394H10.8335Z", fill: "#edf6ff" }), _jsx("path", { d: "M19.0073 28.0885V20.833H20.8613V26.5118H24.0146V28.0885L19.0073 28.0885Z", fill: "#edf6ff" }), _jsx("path", { d: "M16.5918 28.1001V20.833H18.4485V28.1001H16.5918Z", fill: "#edf6ff" }), _jsx("path", { d: "M24.5737 20.833V28.1393H29.7723V26.5573H26.439L26.4422 25.1708H29.1017V23.5916H26.4422V22.4222H29.7723V20.833H24.5737Z", fill: "#edf6ff" }), _jsx("path", { opacity: "0.302", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.2686 5.83301V14.2281H34.1655L23.2686 5.83301Z", fill: "#edf6ff" })] }));
+export const shortenFileName = (name, options = {}) => {
+    const { maxLength = 20, keepStart = 8, keepEnd = 3 } = options;
+    if (name.length <= maxLength)
+        return name;
+    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 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 = () => {
+    const { listUploadFiles, setListUploadFiles } = useMessageFooterContext();
+    const onRemoveFile = (file) => {
+        setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
+    };
+    const renderFilePreview = useCallback((file) => {
+        var _a;
+        const isDocument = documentTypes.includes(file.type || "");
+        const isVideo = (_a = file.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/");
+        let src = file.url;
+        if (!src && file.originFileObj) {
+            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(file.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 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", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: listUploadFiles.map((file) => renderFilePreview(file)) }) }) }));
+};
+export default FilePreview;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ToolbarPlugin.tsx"],"names":[],"mappings":"AAwFA,eAAO,MAAM,aAAa,+CAyNzB,CAAC"}