@droppii-org/chat-sdk 0.0.20 → 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":"AAwGA,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,4CAiL3B,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

@@ -7,8 +7,7 @@ import { SessionType } from "@openim/wasm-client-sdk";
 import { useConversationList } from "../../hooks/conversation/useConversation";
 import { Icon } from "../icon";
 import { useChatContext } from "../../context/ChatContext";
-import useMessageStore from "../../hooks/zustand/useMessageStore";
-import { useMessage } from "../../hooks/message/useMessage";
+import useConversationStore from "../../hooks/conversation/useConversationStore";
 const parseLatestMessage = (latestMsg, currentUserId) => {
     var _a;
     if (!latestMsg)
@@ -74,16 +73,17 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const { user } = useChatContext();
-    const selectedThreadId = useMessageStore((state) => state.selectedThreadId);
-    const setSelectedThreadId = useMessageStore((state) => state.setSelectedThreadId);
-    const setSelectedSourceId = useMessageStore((state) => state.setSelectedSourceId);
-    const { markConversationMessageAsRead } = useMessage(selectedThreadId);
-    const { conversationList } = useConversationList(selectedThreadId);
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const selectedThreadId = useConversationStore((state) => state.selectedThreadId);
+    const setSelectedThreadId = useConversationStore((state) => state.setSelectedThreadId);
+    const setSelectedSourceId = useConversationStore((state) => state.setSelectedSourceId);
+    const { conversationList, markConversationMessageAsRead } = useConversationList(selectedThreadId);
     // Transform real conversation data from the API
     const conversations = transformConversationData(conversationList || [], user === null || user === void 0 ? void 0 : user.userID);
     const filteredConversations = conversations.filter((conv) => conv.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
         conv.lastMessage.toLowerCase().includes(searchQuery.toLowerCase()));
     const handleConversationClick = (conversation) => {
+        setConversationData(conversation);
         const newSearchParams = new URLSearchParams(searchParams);
         newSearchParams.set("threadId", conversation.id);
         router.push(`${pathname}?${newSearchParams.toString()}`);
@@ -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()}`);
@@ -114,11 +119,11 @@ const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     }, [searchParams, conversations.length]);
     useEffect(() => {
         if (!!selectedThreadId) {
-            markConversationMessageAsRead();
+            markConversationMessageAsRead(selectedThreadId);
             onSetSelectedSourceId();
         }
-    }, [selectedThreadId, onSetSelectedSourceId, markConversationMessageAsRead]);
-    return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 ${className}`, children: [_jsx("div", { className: "p-3 border-b border-gray-200", children: _jsx(Input, { placeholder: "T\u00ECm ki\u1EBFm", prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "rounded-lg" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [filteredConversations.map((conversation) => (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${selectedThreadId === conversation.threadId
+    }, [selectedThreadId, onSetSelectedSourceId]);
+    return (_jsxs("div", { className: `flex flex-col h-full bg-white border-r border-gray-200 w-[320px] ${className}`, children: [_jsx("div", { className: "p-3 border-b border-gray-200", children: _jsx(Input, { placeholder: "T\u00ECm ki\u1EBFm", prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "rounded-lg" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [filteredConversations.map((conversation) => (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${selectedThreadId === conversation.threadId
                             ? "bg-blue-50"
                             : "bg-white"}`, children: [selectedThreadId === conversation.threadId && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Badge, { dot: conversation.isOnline, status: conversation.isOnline ? "success" : "default", offset: [-2, 36], children: _jsx(Avatar, { size: 48, src: conversation.avatar, alt: conversation.name }) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: conversation.name }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: conversation.lastMessage })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [_jsx("span", { className: "text-xs text-gray-400", children: conversation.timestamp }), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.id))), filteredConversations.length === 0 && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 48, className: "text-gray-300" }), description: _jsxs("div", { children: [_jsx("p", { className: "text-lg font-medium mb-2 text-gray-500", children: "Kh\u00F4ng t\u00ECm th\u1EA5y cu\u1ED9c tr\u00F2 chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-gray-400", children: searchQuery
                                             ? "Thử tìm kiếm với từ khóa khác"

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

@@ -0,0 +1,8 @@
+import { ConversationItem } from "@openim/wasm-client-sdk";
+interface MessageHeaderProps {
+    conversationData: ConversationItem | null;
+    onClose?: () => void;
+}
+declare const MessageHeader: ({ conversationData, onClose }: MessageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageHeader;
+//# sourceMappingURL=MessageHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3D,UAAU,kBAAkB;IAC1B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,4CA6CvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Button } from "antd";
+import { Icon } from "../icon";
+const MessageHeader = ({ conversationData, onClose }) => {
+    var _a, _b;
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3", children: [_jsx(Avatar, { src: conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL, size: "large", children: ((_b = (_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("p", { children: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "" }), _jsx("p", { className: "text-xs text-gray-500", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _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

@@ -1,4 +1,4 @@
-import { type ConversationItem } from "@openim/wasm-client-sdk";
+import { ConversationItem } from "@openim/wasm-client-sdk";
 interface MessageListProps {
     conversationId: string;
     conversationData: ConversationItem | null;

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,EACL,KAAK,gBAAgB,EAGtB,MAAM,yBAAyB,CAAC;AAkBjC,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,4CA0O3C,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,123 +1,51 @@
 "use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SessionType, } from "@openim/wasm-client-sdk";
-import { useChatContext } from "../../context/ChatContext";
 import { useMessage } from "../../hooks/message/useMessage";
-import { Avatar, Button, Input, Tooltip } from "antd";
-import { Icon } from "../icon";
-import { useCallback, useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import { useSendMessage, } from "../../hooks/message/useSendMessage";
-import InfiniteLoader from "react-window-infinite-loader";
-import { VariableSizeList as List, } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
+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 "./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 { conversationId, conversationData, onClose } = props;
-    const { messageList, groupMessages, refetch } = useMessage(conversationId);
+    const { conversationData, onClose, conversationId } = props;
     const scrollRef = useRef(null);
-    const shouldScrollToBottomRef = useRef(true);
-    const lastMessageCountRef = useRef((messageList === null || messageList === void 0 ? void 0 : messageList.length) || 0);
-    const { user } = useChatContext();
-    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 [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
-    const scrollToBottom = useCallback((force = false) => {
-        if (scrollRef.current) {
-            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-            if (force) {
-                shouldScrollToBottomRef.current = true; // If forced, ensure auto-scroll is re-enabled
-            }
-        }
-    }, []);
-    const handleScroll = useCallback(() => {
-        if (!scrollRef.current)
+    const { getMoreOldMessages, moreOldLoading, loadState, latestLoadState } = useMessage(conversationId);
+    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;
+            (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                top: (_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
+                behavior: "smooth",
+            });
+        });
+    };
+    const loadMoreMessage = () => {
+        if (!loadState.hasMoreOld || moreOldLoading)
             return;
-        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        const SCROLL_UP_THRESHOLD = 200; // If user scrolls up more than 200px from bottom, disable auto-scroll
-        const SCROLL_DOWN_THRESHOLD = 5; // If user scrolls within 5px of bottom, re-enable auto-scroll
-        if (distanceFromBottom > SCROLL_UP_THRESHOLD) {
-            shouldScrollToBottomRef.current = false;
-        }
-        else if (distanceFromBottom <= SCROLL_DOWN_THRESHOLD) {
-            shouldScrollToBottomRef.current = true;
-        }
-        // Show button if not at bottom AND auto-scroll is disabled
-        setShowScrollToBottomButton(distanceFromBottom > SCROLL_DOWN_THRESHOLD &&
-            !shouldScrollToBottomRef.current);
-    }, []);
-    const onSendTextMessage = useCallback(async () => {
-        setTextMessage("");
-        const lastMessage = messageList === null || messageList === void 0 ? void 0 : messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
-        const res = await sendTextMessage(textMessage, lastMessage);
-        if (res) {
-            refetch();
-        }
-    }, [textMessage, sendTextMessage, refetch, messageList]);
-    const renderMessageItem = useCallback((listItemProps) => {
-        const { index } = listItemProps;
-        const groupMessage = groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages[index];
-        const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
-        return (_jsxs("div", { children: [_jsx("div", { children: groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime }), messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.map((message) => {
-                    var _a, _b, _c;
-                    const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
-                    return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: "flex items-end gap-2", children: [!isMine && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })), _jsxs("div", { className: "flex flex-col items-start", children: [!isMine && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsx("div", { className: clsx("px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words", isMine
-                                                ? "bg-blue-500 text-white"
-                                                : "bg-gray-100 text-gray-900"), children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) ||
-                                                    "Tin nhắn không khả dụng" }) })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
-                })] }));
-    }, [user === null || user === void 0 ? void 0 : user.userID, groupMessages]);
+        getMoreOldMessages();
+    };
     useEffect(() => {
-        const currentMessageCount = (messageList === null || messageList === void 0 ? void 0 : messageList.length) || 0;
-        const previousMessageCount = lastMessageCountRef.current;
-        if (currentMessageCount > previousMessageCount) {
-            const newMessages = messageList === null || messageList === void 0 ? void 0 : messageList.slice(previousMessageCount);
-            const hasNewMessageFromCurrentUser = newMessages === null || newMessages === void 0 ? void 0 : newMessages.some((msg) => msg.sendID === (user === null || user === void 0 ? void 0 : user.userID));
-            // If current user sent a message, always scroll to bottom
-            // If another user sent a message, only scroll if shouldScrollToBottomRef is true (user is already at bottom)
-            if (hasNewMessageFromCurrentUser) {
-                setTimeout(() => scrollToBottom(true), 50); // Force scroll for own messages
-            }
-            else if (shouldScrollToBottomRef.current) {
-                setTimeout(() => scrollToBottom(), 50); // Scroll if auto-scroll is enabled for others' messages
-            }
-        }
-        lastMessageCountRef.current = currentMessageCount;
-    }, [messageList, user === null || user === void 0 ? void 0 : user.userID, scrollToBottom]);
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full bg-white", children: [_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3", children: [_jsx(Avatar, { src: conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL, children: ((_b = (_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("p", { children: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "" }), _jsx("p", { className: "text-xs text-gray-500", children: "2 thành viên" })] }), _jsx(Button, { type: "text", shape: "circle", icon: _jsx(Icon, { icon: "align-justify-o", size: 24 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "circle", icon: _jsx(Icon, { icon: "close-b", size: 24 }), onClick: onClose }))] }), _jsx("div", { className: "flex flex-col flex-1 min-h-0", children: _jsx("div", { className: "relative h-full", children: _jsx(AutoSizer, { children: ({ height, width }) => (_jsx(InfiniteLoader, { isItemLoaded: () => true, loadMoreItems: () => { }, itemCount: (groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages.length) || 0, children: (_a) => {
-                                var { onItemsRendered, ref } = _a, rest = __rest(_a, ["onItemsRendered", "ref"]);
-                                return (_jsx(List, Object.assign({ ref: ref }, rest, { itemCount: (groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages.length) || 0, onItemsRendered: onItemsRendered, height: height, width: width, itemSize: (index) => {
-                                        const groupMessage = groupMessages === null || groupMessages === void 0 ? void 0 : groupMessages[index];
-                                        const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
-                                        return (messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.length) * 50;
-                                    }, children: renderMessageItem })));
-                            } })) }) }) }), _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 }) })] }) }) })] }));
+        emitter.on("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+        return () => {
+            emitter.off("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+        };
+    }, []);
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full bg-white", children: [_jsx(MessageHeader, { conversationData: conversationData, onClose: onClose }), _jsx("div", { id: "scrollableDiv", style: {
+                    height: "100%",
+                    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(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"}