@droppii-org/chat-sdk 0.0.19 → 0.0.21

package/dist/components/chatBubble/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/ChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chatBubble/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/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

@@ -1,8 +1,7 @@
 interface DeskConversationListProps {
     onConversationSelect?: (conversationId: string, threadId: string) => void;
-    selectedConversationId?: string;
     className?: string;
 }
-declare const DeskConversationList: ({ onConversationSelect, selectedConversationId, className, }: DeskConversationListProps) => import("react/jsx-runtime").JSX.Element;
+declare const DeskConversationList: ({ onConversationSelect, className, }: DeskConversationListProps) => import("react/jsx-runtime").JSX.Element;
 export default DeskConversationList;
 //# sourceMappingURL=DeskConversationList.d.ts.map

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":"AAkHA,UAAU,yBAAyB;IACjC,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,QAAA,MAAM,oBAAoB,GAAI,8DAI3B,yBAAyB,4CAiK3B,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

@@ -1,168 +1,127 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { Input, Avatar, Badge, Empty } from "antd";
+import { SessionType } from "@openim/wasm-client-sdk";
 import { useConversationList } from "../../hooks/conversation/useConversation";
 import { Icon } from "../icon";
-const mockConversations = [
-    {
-        id: "1",
-        threadId: "thread_001",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "unassigned",
-        source: "obefe",
-    },
-    {
-        id: "2",
-        threadId: "thread_002",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "slow",
-        source: "obefe",
-    },
-    {
-        id: "3",
-        threadId: "thread_003",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "waiting",
-        source: "obefe",
-    },
-    {
-        id: "4",
-        threadId: "thread_004",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "not_replied",
-        source: "obefe",
-    },
-    {
-        id: "5",
-        threadId: "thread_005",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "processing",
-        source: "obefe",
-    },
-    {
-        id: "6",
-        threadId: "thread_006",
-        name: "Phương Huyền (phhuyen2110)",
-        username: "phhuyen2110",
-        avatar: "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg",
-        lastMessage: "Customer: hi Livechat Obefe",
-        timestamp: "27/07",
-        unreadCount: 1,
-        isOnline: true,
-        status: "closed",
-        source: "obefe",
-    },
-];
-const getStatusIcon = (status) => {
-    switch (status) {
-        case "unassigned":
-            return {
-                icon: "user-del-o",
-                bgColor: "bg-red-100",
-                iconColor: "text-red-500",
-            };
-        case "slow":
-            return {
-                icon: "warning-square-o",
-                bgColor: "bg-orange-100",
-                iconColor: "text-orange-500",
-            };
-        case "waiting":
-            return {
-                icon: "time-circle-o",
-                bgColor: "bg-yellow-100",
-                iconColor: "text-yellow-600",
-            };
-        case "not_replied":
-            return {
-                icon: "arrow-reply-o",
-                bgColor: "bg-orange-100",
-                iconColor: "text-orange-500",
-            };
-        case "processing":
-            return {
-                icon: "play-b",
-                bgColor: "bg-blue-100",
-                iconColor: "text-blue-500",
-            };
-        case "paused":
-            return {
-                icon: "pause-b",
-                bgColor: "bg-gray-100",
-                iconColor: "text-gray-500",
-            };
-        case "closed":
-            return {
-                icon: "check-b",
-                bgColor: "bg-green-100",
-                iconColor: "text-green-500",
-            };
-        default:
-            return null;
+import { useChatContext } from "../../context/ChatContext";
+import useConversationStore from "../../hooks/conversation/useConversationStore";
+const parseLatestMessage = (latestMsg, currentUserId) => {
+    var _a;
+    if (!latestMsg)
+        return "";
+    try {
+        const msgData = JSON.parse(latestMsg);
+        // Check for text message (textElem)
+        if ((_a = msgData.textElem) === null || _a === void 0 ? void 0 : _a.content) {
+            const isMe = currentUserId && msgData.sendID === currentUserId;
+            const sender = isMe ? "Me" : (msgData === null || msgData === void 0 ? void 0 : msgData.senderNickname) || msgData.sendID;
+            return `${sender}: ${msgData.textElem.content}`;
+        }
+        // TODO: Handle other message types (fileElem, videoElem, etc.)
+        // For now, return empty string for non-text messages
+        // This can be enhanced later to show appropriate previews
+        return "Tin nhắn không khả dụng";
     }
+    catch (error) {
+        console.error("Error parsing latest message:", error);
+        return "";
+    }
+};
+// Utility function to format timestamp
+const formatTimestamp = (timestamp) => {
+    if (!timestamp)
+        return "";
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInMs = now.getTime() - date.getTime();
+    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+    if (diffInDays === 0) {
+        // Today - show time
+        return date.toLocaleTimeString("vi-VN", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+        });
+    }
+    else if (diffInDays === 1) {
+        // Yesterday
+        return "Hôm qua";
+    }
+    else if (diffInDays < 7) {
+        // This week - show day name
+        return date.toLocaleDateString("vi-VN", { weekday: "long" });
+    }
+    else {
+        // Older - show date
+        return date.toLocaleDateString("vi-VN", {
+            day: "2-digit",
+            month: "2-digit",
+        });
+    }
+};
+// Transform API data to UI-friendly format
+const transformConversationData = (apiData, currentUserId) => {
+    return apiData.map((conv) => (Object.assign(Object.assign({}, conv), { id: conv.conversationID, threadId: conv.conversationID, name: conv.showName || "Unknown User", username: conv.userID || conv.groupID || "", avatar: conv.faceURL ||
+            "https://i.pinimg.com/736x/55/e5/ed/55e5edbb1a5b5f6e4f3cefc98de629ca.jpg", lastMessage: parseLatestMessage(conv.latestMsg, currentUserId), timestamp: formatTimestamp(conv.latestMsgSendTime), unreadCount: conv.unreadCount, isOnline: true, source: conv.conversationType === 3 ? "group" : "direct" })));
 };
-const DeskConversationList = ({ onConversationSelect, selectedConversationId, className = "", }) => {
-    const { conversationList } = useConversationList();
+const DeskConversationList = ({ onConversationSelect, className = "", }) => {
     const [searchQuery, setSearchQuery] = useState("");
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
-    console.log(conversationList);
-    const currentThreadId = searchParams.get("threadId");
-    const [selectedThreadId, setSelectedThreadId] = useState(currentThreadId);
-    useEffect(() => {
-        setSelectedThreadId(currentThreadId);
-    }, [currentThreadId]);
-    const conversations = mockConversations;
+    const { user } = useChatContext();
+    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.threadId);
+        newSearchParams.set("threadId", conversation.id);
         router.push(`${pathname}?${newSearchParams.toString()}`);
-        setSelectedThreadId(conversation.threadId);
-        onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id, conversation.threadId);
+        setSelectedThreadId(conversation.id);
+        onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id, conversation.id);
     };
-    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: _jsxs("div", { className: "relative", children: [_jsx(Icon, { icon: "search-o", size: 18, className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" }), _jsx("input", { type: "text", placeholder: "T\u00ECm ki\u1EBFm", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" })] }) }), _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
+    const onSetSelectedSourceId = useCallback(() => {
+        const selectedConversation = conversations.findIndex((conv) => conv.id === selectedThreadId);
+        if (selectedConversation !== -1) {
+            const conversation = conversations[selectedConversation];
+            const sourceId = conversation.conversationType === SessionType.Group
+                ? conversation.groupID
+                : conversation.userID;
+            setSelectedSourceId(sourceId);
+        }
+    }, [conversationList, selectedThreadId]);
+    useEffect(() => {
+        const threadId = searchParams.get("threadId");
+        if (threadId) {
+            setSelectedThreadId(threadId);
+        }
+        else if (conversations.length > 0) {
+            setSelectedThreadId(conversations[0].id);
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.set("threadId", conversations[0].id);
+            router.replace(`${pathname}?${newSearchParams.toString()}`);
+        }
+    }, [searchParams, conversations.length]);
+    useEffect(() => {
+        if (!!selectedThreadId) {
+            markConversationMessageAsRead(selectedThreadId);
+            onSetSelectedSourceId();
+        }
+    }, [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: [_jsxs("div", { className: "relative flex-shrink-0", children: [_jsx("img", { src: conversation.avatar, alt: conversation.name, className: "w-12 h-12 rounded-full object-cover" }), conversation.isOnline && (_jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 border-2 border-white rounded-full" }))] }), _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 }), _jsxs("div", { className: "flex items-center gap-1", children: [conversation.unreadCount > 0 && (_jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-red-500 rounded-full", children: conversation.unreadCount })), (() => {
-                                                                    const statusIcon = getStatusIcon(conversation.status);
-                                                                    if (!statusIcon)
-                                                                        return null;
-                                                                    return (_jsx("div", { className: `w-5 h-5 ${statusIcon.bgColor} rounded-full flex items-center justify-center`, children: _jsx(Icon, { icon: statusIcon.icon, size: 12, className: statusIcon.iconColor }) }));
-                                                                })()] })] })] }) })] })] }, conversation.id))), filteredConversations.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-500", children: [_jsx(Icon, { icon: "chat-square-b", size: 48, className: "text-gray-300 mb-4" }), _jsx("p", { className: "text-lg font-medium mb-2", children: "Kh\u00F4ng t\u00ECm th\u1EA5y cu\u1ED9c tr\u00F2 chuy\u1EC7n" }), _jsx("p", { className: "text-sm text-center", children: searchQuery
-                                    ? "Thử tìm kiếm với từ khóa khác"
-                                    : "Chưa có cuộc trò chuyện nào" })] }))] })] }));
+                            : "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"
+                                            : "Chưa có cuộc trò chuyện nào" })] }) }) }))] })] }));
 };
 export default DeskConversationList;

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;AASjC,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,4CAyL3C,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,21 +1,23 @@
 "use client";
 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 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, 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
             ? ""
@@ -25,67 +27,47 @@ const MessageList = (props) => {
             : (conversationData === null || conversationData === void 0 ? void 0 : conversationData.groupID) || "",
     });
     const [textMessage, setTextMessage] = useState("");
-    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 onSendTextMessage = async () => {
+    const [composing, setComposing] = useState(false);
+    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 res = await sendTextMessage(textMessage);
-        if (res) {
-            refetch();
-        }
+        const lastMessage = messageList === null || messageList === void 0 ? void 0 : messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
+        sendTextMessage(textMessage, lastMessage);
+    }, [textMessage, sendTextMessage, latestLoadState]);
+    const loadMoreMessage = () => {
+        if (!loadState.hasMoreOld || moreOldLoading)
+            return;
+        getMoreOldMessages();
     };
-    const renderMessageItem = useCallback((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]);
     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 h-full", children: _jsx("div", { ref: scrollRef, className: "h-full overflow-y-auto p-3 sm:p-4 flex flex-col gap-2", children: messageList === null || messageList === void 0 ? void 0 : messageList.map((message) => renderMessageItem(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) => {
+        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;
+                                    }
                                     if (e.key === "Enter") {
                                         onSendTextMessage();
                                     }
-                                } }), _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 }) })] }) }) })] }));
+                                }, 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 }) })] }) }) })] }));
 };
 export default MessageList;

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