@droppii-org/chat-sdk 0.1.1 → 0.1.3

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDA0FhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDA2FhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -10,8 +10,12 @@ import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 const ConversationBySessionItem = ({ sessionItem, }) => {
     var _a;
     const { t } = useTranslation();
-    const { user } = useChatContext();
-    const isSelected = useConversationStore((state) => { var _a; return state.selectedConversationId === ((_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation) === null || _a === void 0 ? void 0 : _a.conversationID); });
+    const user = useChatContext().user;
+    const isSelected = useConversationStore((state) => {
+        var _a;
+        return state.selectedConversationId ===
+            ((_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation) === null || _a === void 0 ? void 0 : _a.conversationID);
+    });
     const conversation = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation;
     const router = useRouter();
     const pathname = usePathname();

package/dist/components/mediaCollection/LinkCollection.js

@@ -73,7 +73,7 @@ const LinkCollection = ({ onClose }) => {
                         const menuItems = [
                             {
                                 key: "open",
-                                label: "Xem tin nhắn",
+                                label: t("view_message"),
                                 onClick: () => onPressItem(item.chatLog),
                             },
                         ];

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

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface MediaPreviewIconProps {
+    message?: MessageItem;
+}
+declare const MediaPreviewIcon: ({ message }: MediaPreviewIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MediaPreviewIcon;
+//# sourceMappingURL=MediaPreviewIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPreviewIcon.d.ts","sourceRoot":"","sources":["../../../src/components/message/MediaPreviewIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAInE,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,mDA8B3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/MediaPreviewIcon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { Image } from "antd";
+import { documentIcon } from "../../assets/svg";
+const MediaPreviewIcon = ({ message }) => {
+    var _a, _b;
+    if (!message) {
+        return null;
+    }
+    if (message.contentType === MessageType.FileMessage) {
+        return _jsx("div", { children: documentIcon });
+    }
+    if (message.contentType === MessageType.PictureMessage) {
+        const imageUrl = ((_a = message.pictureElem.sourcePicture) === null || _a === void 0 ? void 0 : _a.url) ||
+            ((_b = message.pictureElem.snapshotPicture) === null || _b === void 0 ? void 0 : _b.url);
+        return (_jsx("div", { className: "w-10 h-10", children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "rounded-md", src: imageUrl }) }));
+    }
+    if (message.contentType === MessageType.VideoMessage) {
+        const videoUrl = message.videoElem.videoUrl;
+        return (_jsx("div", { className: "flex flex-col justify-center items-center w-10 h-10 bg-black rounded-md", children: _jsx("video", { src: videoUrl, controls: false, autoPlay: false, muted: true }) }));
+    }
+    return null;
+};
+export default MediaPreviewIcon;

package/dist/components/message/MessageHeader.js

@@ -122,6 +122,6 @@ const MessageHeader = ({ onClose, currentSession }) => {
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: 2 }) })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

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":"AAwBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAqN3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAyBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA6S3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMessage } from "../../hooks/message/useMessage";
-import { Empty, Spin } from "antd";
-import { useEffect, useMemo, useRef } from "react";
+import { Empty, Modal, Spin } from "antd";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import emitter from "../../utils/events";
@@ -14,11 +14,12 @@ import { images } from "../../constants/images";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { isNumber } from "lodash";
-import { useDebounceFn } from "ahooks";
+import { useBoolean, useDebounceFn } from "ahooks";
 import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../constants";
 import { markConversationMessageAsRead } from "../../hooks/conversation/useConversation";
 import { useChatContext } from "../../context/ChatContext";
 import { useGetSession } from "../../hooks/session/useGetSession";
+import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
 dayjs.extend(isToday);
 const BOTTOM_THRESHOLD = -5;
 const MessageList = (props) => {
@@ -29,11 +30,34 @@ const MessageList = (props) => {
     const scrollRef = useRef(null);
     const { getMoreOldMessages, moreOldLoading, loadState, getMoreNewMessages, moreNewLoading, latestLoadState, } = useMessage(conversationId, searchClientMsgID);
     const conversationData = useConversationStore((state) => state.conversationData);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
     const { dataFlatten: sessions, refetch: refetchSession } = useGetSession({
         filter: {
             conversationIds: !!conversationId ? [conversationId] : [],
         },
     });
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [showConfirmRevoke, { setTrue: openConfirmRevoke, setFalse: closeConfirmRevoke },] = useBoolean(false);
+    const { revokeMessage, loading: isRevoking } = useRevokeMessage();
+    const handleOpenRevoke = useCallback((clientMsgID) => {
+        setSelectedItem(clientMsgID);
+        openConfirmRevoke();
+    }, [openConfirmRevoke]);
+    const handleCloseRevoke = useCallback(() => {
+        setSelectedItem(null);
+        closeConfirmRevoke();
+    }, [closeConfirmRevoke]);
+    const onRevokeMessage = useCallback(async () => {
+        await revokeMessage((conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "", selectedItem || "");
+        handleCloseRevoke();
+    }, [
+        conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID,
+        selectedItem,
+        revokeMessage,
+        handleCloseRevoke,
+    ]);
     const currentSession = useMemo(() => {
         return sessions === null || sessions === void 0 ? void 0 : sessions.find((session) => session.conversationId === conversationId);
     }, [sessions, conversationId]);
@@ -84,6 +108,15 @@ const MessageList = (props) => {
             }, 500);
         }, 200);
     };
+    const onPressQuoteMessage = useCallback((clientMsgID) => {
+        const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
+        if (hasMessage) {
+            scrollToMessage(clientMsgID);
+        }
+        else {
+            setSearchClientMsgID(clientMsgID);
+        }
+    }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
     const loadMoreOldMessage = () => {
         if (!loadState.hasMoreOld || moreOldLoading)
             return;
@@ -123,6 +156,16 @@ const MessageList = (props) => {
         loadState.initLoading,
         handleMarkConversationMessageAsRead,
     ]);
+    useEffect(() => {
+        if (!openMenuId)
+            return;
+        const scrollContainer = scrollRef.current;
+        if (!scrollContainer)
+            return;
+        const close = () => setOpenMenuId(null);
+        scrollContainer.addEventListener("scroll", close);
+        return () => scrollContainer.removeEventListener("scroll", close);
+    }, [openMenuId]);
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: _jsx(Empty, { description: t("no_conversation_data") }) }));
     }
@@ -142,13 +185,13 @@ const MessageList = (props) => {
                         display: "flex",
                         flexDirection: "column-reverse",
                         minWidth: 0,
-                        width: "100%"
+                        width: "100%",
                     }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableMessagesDiv", onScroll: (e) => {
                         const target = e.target;
                         if (target.scrollTop > BOTTOM_THRESHOLD) {
                             handleMarkConversationMessageAsRead();
                             loadMoreNewMessage();
                         }
-                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, { currentSession: currentSession })] }));
+                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, { currentSession: currentSession }), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
 };
 export default MessageList;

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

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

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/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;AAsB1E,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,2CAsInB"}