@droppii-org/chat-sdk 0.0.20 → 0.0.21

package/dist/components/ChatBubble.d.ts

@@ -0,0 +1,10 @@
+import { SessionType } from "@openim/wasm-client-sdk";
+interface ChatBubbleProps {
+    conversationId: string;
+    sourceID: string;
+    sessionType: SessionType;
+    className?: string;
+}
+declare const ChatBubble: ({ conversationId, sourceID, sessionType, className, }: ChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default ChatBubble;
+//# sourceMappingURL=ChatBubble.d.ts.map

package/dist/components/ChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../src/components/ChatBubble.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,uDAKjB,eAAe,4CAmDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ChatBubble.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FloatButton, Drawer } from "antd";
+import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
+import MessageList from "./message/MessageList";
+import { useConversationDetail } from "../hooks/conversation/useConversation";
+const ChatBubble = ({ conversationId, sourceID, sessionType, className, }) => {
+    const { conversationDetail } = useConversationDetail({
+        sourceID,
+        sessionType,
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleChat = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                    right: 24,
+                    bottom: 24,
+                    width: 60,
+                    height: 60,
+                }, onClick: toggleChat, className: className }), _jsx(Drawer, { placement: "right", onClose: () => setIsOpen(false), open: isOpen, mask: true, closable: false, styles: {
+                    body: { padding: 0 },
+                }, classNames: {
+                    wrapper: "!z-[9999]",
+                }, children: _jsx(MessageList, { conversationId: conversationId, conversationData: conversationDetail, className: "flex-1", onClose: () => setIsOpen(false) }) })] }));
+};
+export default ChatBubble;

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,4CAuL3B,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()}`);
@@ -114,11 +114,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/MessageItem.d.ts

@@ -0,0 +1,7 @@
+import { GroupMessageItem } from "../../types/chat";
+interface MessageItemProps {
+    groupMessage: GroupMessageItem;
+}
+declare const MessageItem: ({ groupMessage }: MessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageItem;
+//# sourceMappingURL=MessageItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAUpD,UAAU,gBAAgB;IACxB,YAAY,EAAE,gBAAgB,CAAC;CAChC;AACD,QAAA,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,4CAwEtD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import clsx from "clsx";
+import { Avatar } from "antd";
+import isToday from "dayjs/plugin/isToday";
+import { useChatContext } from "../../context/ChatContext";
+import { SessionType } from "@openim/wasm-client-sdk";
+dayjs.extend(isToday);
+const MessageItem = ({ groupMessage }) => {
+    const { user } = useChatContext();
+    const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
+    const isToday = dayjs(groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime).isToday();
+    return (_jsxs("div", { className: "flex flex-col gap-2 my-4 mx-3 sm:mx-4", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: dayjs(groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime).format(isToday ? "HH:mm" : "HH:mm, DD MMMM") }) }), messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.map((message, messageIndex) => {
+                var _a, _b, _c;
+                const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
+                const showAvatar = messageIndex === messagesInGroup.length - 1;
+                const showSenderName = messageIndex === 0 && (message === null || message === void 0 ? void 0 : message.sessionType) === SessionType.Group;
+                return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex items-end gap-2", isMine ? "justify-end" : "justify-start"), children: [!isMine && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showAvatar && (_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 flex-[0.8]", children: [!isMine && showSenderName && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full break-words flex flex-col text-gray-900", isMine ? "bg-blue-100" : "bg-gray-100"), 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" }), _jsx("span", { className: clsx("text-xs text-gray-500 text-right text-gray-500"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
+            })] }, groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.groupMessageID));
+};
+export default MessageItem;

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;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"}

package/dist/components/message/MessageList.js

@@ -1,35 +1,23 @@
 "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 { SessionType } from "@openim/wasm-client-sdk";
 import { useMessage } from "../../hooks/message/useMessage";
-import { Avatar, Button, Input, Tooltip } from "antd";
+import { Button, Input, Spin, 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 { useSendMessage } from "../../hooks/message/useSendMessage";
+import dayjs from "dayjs";
+import isToday from "dayjs/plugin/isToday";
+import emitter from "../../utils/events";
+import MessageItem from "./MessageItem";
+import InfiniteScroll from "react-infinite-scroll-component";
+import MessageHeader from "./MessageHeader";
+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 { getMoreOldMessages, moreOldLoading, loadState, latestLoadState } = useMessage(conversationId);
     const { sendTextMessage } = useSendMessage({
         recvID: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType) !== SessionType.Single
             ? ""
@@ -40,78 +28,40 @@ const MessageList = (props) => {
     });
     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)
-            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 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 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];
-        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]);
+        sendTextMessage(textMessage, lastMessage);
+    }, [textMessage, sendTextMessage, latestLoadState]);
+    const loadMoreMessage = () => {
+        if (!loadState.hasMoreOld || moreOldLoading)
+            return;
+        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) => {
+        emitter.on("CHAT_LIST_SCROLL_TO_BOTTOM", scrollToBottom);
+        console.log("CHAT_LIST_SCROLL_TO_BOTTOM");
+        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("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;
                                     }

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSection.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/BottomSection.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,mBAAmB,+CAMxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FooterBottomSection = () => {
+    return (_jsx("div", { className: "flex items-center gap-2", children: _jsx("div", {}) }));
+};
+export default FooterBottomSection;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAwBA,QAAA,MAAM,aAAa,+CAsBlB,CAAC;AACF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import FooterBottomSection from "./BottomSection";
+const theme = {
+// Theme styling goes here
+};
+// Catch any errors that occur during Lexical updates and log them
+// or throw them as needed. If you don't throw them, Lexical will
+// try to recover gracefully without losing user data.
+const onError = (error) => {
+    console.error(error);
+};
+const initialConfig = {
+    namespace: "ChatInput",
+    theme,
+    onError,
+};
+const MessageFooter = () => {
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsxs("div", { className: "border-t px-4 py-3", children: [_jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": "Nh\u1EADp tin nh\u1EAFn", placeholder: _jsx("div", { className: "absolute top-2 left-3", children: _jsx("p", { className: "text-gray-500 text-sm", children: "Nh\u1EADp tin nh\u1EAFn" }) }) }) }), _jsx(FooterBottomSection, {})] }) }));
+};
+export default MessageFooter;

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,WAAW,0CAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CAyEnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,0CAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CA2EnB,CAAC"}

package/dist/context/ChatContext.js

@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useState } from "react";
 import { CbEvents } from "@openim/wasm-client-sdk";
 import { ConnectStatus, } from "../types/chat";
 import { DChatSDK } from "../constants/sdk";
+import MainLayout from "../layout";
 export const ChatContext = createContext({
     user: null,
     connectStatus: ConnectStatus.Disconnected,
@@ -31,7 +32,9 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
         });
     };
     useEffect(() => {
-        handleLogin();
+        if (config) {
+            handleLogin();
+        }
     }, [config]);
     useEffect(() => {
         DChatSDK.on(CbEvents.OnUserTokenExpired, () => {
@@ -67,5 +70,5 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
             DChatSDK.off(CbEvents.OnConnecting, () => { });
         };
     }, [refetchToken]);
-    return (_jsx(ChatContext.Provider, { value: { user, connectStatus }, children: children }));
+    return (_jsx(ChatContext.Provider, { value: { user, connectStatus }, children: _jsx(MainLayout, { children: children }) }));
 };

package/dist/hooks/conversation/useConversation.d.ts

@@ -2,6 +2,7 @@ import { ConversationItem, SessionType } from "@openim/wasm-client-sdk";
 export declare const useConversationList: (selectedThreadId?: string) => {
     conversationList: ConversationItem[];
     getAllConversationList: () => Promise<void>;
+    markConversationMessageAsRead: (conversationId: string) => void;
 };
 export declare const useConversationDetail: ({ sourceID, sessionType, }: {
     sourceID: string;

package/dist/hooks/conversation/useConversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,MAAM;;;CA0C5D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC"}
+{"version":3,"file":"useConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,MAAM;;;oDAgBxC,MAAM;CAmC1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC"}

package/dist/hooks/conversation/useConversation.js

@@ -12,6 +12,15 @@ export const useConversationList = (selectedThreadId) => {
             console.log("getAllConversationList", err);
         });
     }, []);
+    const markConversationMessageAsRead = useCallback((conversationId) => {
+        if (!conversationId)
+            return;
+        DChatSDK.markConversationMessageAsRead(conversationId)
+            .then()
+            .catch(({ errCode, errMsg }) => {
+            // Failed call
+        });
+    }, []);
     useEffect(() => {
         getAllConversationList();
     }, [getAllConversationList]);
@@ -25,14 +34,13 @@ export const useConversationList = (selectedThreadId) => {
     }, []);
     useEffect(() => {
         if (selectedThreadId) {
-            DChatSDK.markConversationMessageAsRead(selectedThreadId).catch(({ errCode, errMsg }) => {
-                console.error("Failed to mark messages as read", errCode, errMsg);
-            });
+            markConversationMessageAsRead(selectedThreadId);
         }
-    }, [selectedThreadId]);
+    }, [selectedThreadId, markConversationMessageAsRead]);
     return {
         conversationList,
         getAllConversationList,
+        markConversationMessageAsRead,
     };
 };
 export const useConversationDetail = ({ sourceID, sessionType, }) => {

package/dist/hooks/conversation/useConversationStore.d.ts

@@ -0,0 +1,11 @@
+interface ConversationStore {
+    conversationData: any;
+    setConversationData: (data: any) => void;
+    selectedThreadId: string;
+    selectedSourceId: string;
+    setSelectedThreadId: (threadId: string) => void;
+    setSelectedSourceId: (sourceId: string) => void;
+}
+declare const useConversationStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ConversationStore>>;
+export default useConversationStore;
+//# sourceMappingURL=useConversationStore.d.ts.map

package/dist/hooks/conversation/useConversationStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConversationStore.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversationStore.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,GAAG,CAAC;IACtB,mBAAmB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,oBAAoB,gFAOvB,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

package/dist/hooks/{zustand/useMessageStore.js → conversation/useConversationStore.js}

@@ -1,8 +1,10 @@
 import { create } from "zustand";
-const useMessageStore = create((set) => ({
+const useConversationStore = create((set) => ({
+    conversationData: null,
+    setConversationData: (data) => set({ conversationData: data }),
     selectedThreadId: "",
     setSelectedThreadId: (threadId) => set({ selectedThreadId: threadId }),
     selectedSourceId: "",
     setSelectedSourceId: (sourceId) => set({ selectedSourceId: sourceId }),
 }));
-export default useMessageStore;
+export default useConversationStore;

package/dist/hooks/global/useGlobalEvent.d.ts

@@ -0,0 +1,2 @@
+export declare const useGlobalEvent: () => void;
+//# sourceMappingURL=useGlobalEvent.d.ts.map

package/dist/hooks/global/useGlobalEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,cAAc,YAqF1B,CAAC"}

package/dist/hooks/global/useGlobalEvent.js

@@ -0,0 +1,78 @@
+import { useEffect } from "react";
+import { DChatSDK } from "../../constants/sdk";
+import { CbEvents, MessageType, SessionType, } from "@openim/wasm-client-sdk";
+import { CustomType } from "../../types/chat";
+import { pushNewMessage, updateOneMessage } from "../message/useMessage";
+import { useChatContext } from "../../context/ChatContext";
+import useConversationStore from "../conversation/useConversationStore";
+const notPushType = [MessageType.TypingMessage, MessageType.RevokeMessage];
+export const useGlobalEvent = () => {
+    const { user } = useChatContext();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const revokedMessageHandler = ({ data }) => {
+        updateOneMessage({
+            clientMsgID: data.clientMsgID,
+            contentType: MessageType.RevokeMessage,
+            notificationElem: {
+                detail: JSON.stringify(data),
+            },
+        });
+    };
+    const inCurrentConversation = (newServerMsg) => {
+        switch (newServerMsg.sessionType) {
+            case SessionType.Single:
+                return (newServerMsg.sendID === selectedSourceId ||
+                    ((user === null || user === void 0 ? void 0 : user.userID) && newServerMsg.recvID === selectedSourceId));
+            case SessionType.Group:
+            case SessionType.WorkingGroup:
+                return newServerMsg.groupID === selectedSourceId;
+            case SessionType.Notification:
+                return newServerMsg.sendID === selectedSourceId;
+            default:
+                return false;
+        }
+    };
+    const handleNewMessage = (newServerMsg) => {
+        if (newServerMsg.contentType === MessageType.CustomMessage) {
+            const customData = JSON.parse(newServerMsg.customElem.data);
+            if (CustomType.CallingInvite <= customData.customType &&
+                customData.customType <= CustomType.CallingHungup) {
+                return;
+            }
+        }
+        if (!inCurrentConversation(newServerMsg))
+            return;
+        if (!notPushType.includes(newServerMsg.contentType)) {
+            pushNewMessage(newServerMsg);
+        }
+    };
+    const newMessageHandler = ({ data }) => {
+        data.map((message) => handleNewMessage(message));
+    };
+    const loginCheck = async () => {
+        // check openIM token and user info
+    };
+    const setIMListener = () => {
+        // message
+        DChatSDK.on(CbEvents.OnRecvNewMessages, newMessageHandler);
+        DChatSDK.on(CbEvents.OnNewRecvMessageRevoked, revokedMessageHandler);
+    };
+    const disposeIMListener = () => {
+        // message
+        DChatSDK.off(CbEvents.OnRecvNewMessages, newMessageHandler);
+    };
+    /** LIFE CYCLE */
+    useEffect(() => {
+        loginCheck();
+        setIMListener();
+        window.addEventListener("online", () => {
+            DChatSDK.networkStatusChanged();
+        });
+        window.addEventListener("offline", () => {
+            DChatSDK.networkStatusChanged();
+        });
+        return () => {
+            disposeIMListener();
+        };
+    }, []);
+};