@droppii-org/chat-sdk 0.0.2 → 0.0.4

package/dist/components/MessageItem.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatContext } from "../context/ChatContext";
+import { FileText, Download } from "lucide-react";
+import Image from "next/image";
+export function MessageItem({ message, isGrouped, onImageClick }) {
+    const { state } = useChatContext();
+    const isOwnMessage = message.isMine;
+    const sender = state.users[message.senderId];
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    };
+    const renderTextMessage = (msg) => {
+        const content = msg.text || "";
+        // Simple regex to detect URLs and make them clickable
+        const linkRegex = /(https?:\/\/[^\s]+)/g;
+        const parts = content.split(linkRegex);
+        return (_jsx("div", { className: `px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words ${isOwnMessage ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-900"} ${isGrouped ? (isOwnMessage ? "rounded-tr-md" : "rounded-tl-md") : ""}`, children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: parts.map((part, index) => linkRegex.test(part) ? (_jsx("a", { href: part, target: "_blank", rel: "noopener noreferrer", className: "underline text-blue-200 hover:text-blue-100", children: part }, index)) : (part)) }) }));
+    };
+    const renderMediaMessage = (msg) => {
+        var _a, _b;
+        const imageAttachments = ((_a = msg.attachments) === null || _a === void 0 ? void 0 : _a.filter((att) => att.type === "image")) || [];
+        return (_jsxs("div", { className: `flex flex-col gap-2 ${isOwnMessage ? "items-end" : "items-start"}`, children: [msg.text && (_jsx("div", { className: `px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words ${isOwnMessage ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-900"} ${isGrouped ? (isOwnMessage ? "rounded-tr-md" : "rounded-tl-md") : ""}`, children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: msg.text }) })), _jsx("div", { className: `grid gap-2 ${imageAttachments.length > 1 ? "grid-cols-2" : "grid-cols-1"}`, children: (_b = msg.attachments) === null || _b === void 0 ? void 0 : _b.map((attachment, idx) => (_jsx("div", { className: `relative rounded-lg overflow-hidden ${isOwnMessage ? "bg-blue-100" : "bg-gray-100"}`, children: attachment.type === "image" ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: attachment.url || "/placeholder.svg", alt: attachment.name || "Attached image", width: 200, height: 150, className: "w-full h-auto object-cover cursor-pointer", onClick: () => onImageClick === null || onImageClick === void 0 ? void 0 : onImageClick(attachment.id, imageAttachments.map((img) => ({ id: img.id, url: img.url, name: img.name }))) }), _jsx("div", { className: "absolute inset-0 bg-black/10 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity", children: _jsx("span", { className: "text-white text-xs font-medium p-1 rounded bg-black/50", children: "Xem \u1EA3nh" }) })] })) : (_jsxs("a", { href: attachment.url, download: attachment.name, className: "flex items-center p-3 space-x-2 text-gray-800 hover:bg-gray-200 transition-colors", children: [_jsx(FileText, { className: "w-5 h-5 flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block text-sm font-medium truncate", children: attachment.name || "File" }), _jsx("span", { className: "block text-xs text-gray-500", children: attachment.size ? formatFileSize(attachment.size) : "Unknown size" })] }), _jsx(Download, { className: "w-4 h-4 flex-shrink-0 text-gray-600" })] })) }, idx))) })] }));
+    };
+    const renderPromoMessage = (msg) => {
+        if (!msg.promoData)
+            return null;
+        const { imageUrl, title, description, buttonText, buttonUrl } = msg.promoData;
+        return (_jsxs("div", { className: "w-full max-w-xs mx-auto my-2 bg-white shadow-md rounded-lg overflow-hidden border border-gray-200", children: [_jsx("div", { className: "relative w-full h-32 bg-gray-200", children: _jsx(Image, { src: imageUrl || "/placeholder.svg", alt: title, fill: true, style: { objectFit: "cover" }, className: "rounded-t-lg" }) }), _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-base font-semibold text-gray-900 mb-1", children: title }), _jsx("p", { className: "text-sm text-gray-600 mb-3", children: description }), _jsx("a", { href: buttonUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors", children: buttonText })] })] }));
+    };
+    return (_jsx("div", { className: `flex ${isOwnMessage ? "justify-end" : "justify-start"} ${isGrouped ? "mt-0.5 sm:mt-1" : "mt-3 sm:mt-4"}`, children: _jsxs("div", { className: `flex items-end space-x-2 max-w-[85%] sm:max-w-xs lg:max-w-md ${isOwnMessage ? "flex-row-reverse space-x-reverse" : ""}`, style: message.type === "promo" ? { maxWidth: "none" } : {}, children: [message.type !== "promo" && !isOwnMessage && !isGrouped && (_jsx("img", { src: (sender === null || sender === void 0 ? void 0 : sender.avatar) || "/placeholder.svg?height=32&width=32&query=user", alt: (sender === null || sender === void 0 ? void 0 : sender.name) || "User", className: "w-6 h-6 sm:w-8 sm:h-8 rounded-full object-cover flex-shrink-0" })), message.type !== "promo" && !isOwnMessage && isGrouped && (_jsx("div", { className: "w-6 sm:w-8 flex-shrink-0" }) // Spacer for grouped messages
+                ), _jsxs("div", { className: `flex flex-col ${isOwnMessage ? "items-end" : "items-start"}`, children: [message.type !== "promo" && !isGrouped && !isOwnMessage && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: (sender === null || sender === void 0 ? void 0 : sender.name) || "Unknown User" })), message.type === "text" && renderTextMessage(message), message.type === "media" && renderMediaMessage(message), message.type === "promo" && renderPromoMessage(message), message.type !== "promo" && (_jsx("div", { className: `flex items-center space-x-1 mt-1 px-2 ${isOwnMessage ? "flex-row-reverse space-x-reverse" : ""}`, children: isOwnMessage && (_jsx("svg", { className: "w-3 h-3 sm:w-4 sm:h-4 text-blue-500", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) })) }))] })] }) }));
+}

package/dist/components/MessageItemDemo.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"MessageItemDemo.d.ts","sourceRoot":"","sources":["../../src/components/MessageItemDemo.tsx"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,gCA2L9B"}
+{"version":3,"file":"MessageItemDemo.d.ts","sourceRoot":"","sources":["../../src/components/MessageItemDemo.tsx"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,4CA2L9B"}

package/dist/components/MessageItemDemo.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageItem } from "./MessageItem";
+import { DateDivider } from "./DateDivider";
+export function MessageItemDemo() {
+    // Demo messages showcasing all message types
+    const demoMessages = [
+        // Text message from other user
+        {
+            id: "demo-1",
+            senderId: "user-2",
+            type: "text",
+            text: "Hey! How are you doing today? 😊",
+            createdAt: new Date(Date.now() - 3600000).toISOString(),
+            isMine: false,
+        },
+        // Text message from current user
+        {
+            id: "demo-2",
+            senderId: "current-user",
+            type: "text",
+            text: "I'm doing great! Thanks for asking. Check out this link: https://example.com",
+            createdAt: new Date(Date.now() - 3000000).toISOString(),
+            isMine: true,
+        },
+        // Media message with text and image from other user
+        {
+            id: "demo-3",
+            senderId: "user-2",
+            type: "media",
+            text: "Look at this beautiful sunset I captured! 📸",
+            attachments: [
+                {
+                    id: "demo-3-1",
+                    type: "image",
+                    url: "/placeholder.svg?height=300&width=400",
+                    name: "sunset.jpg",
+                    size: 245760,
+                },
+            ],
+            createdAt: new Date(Date.now() - 2400000).toISOString(),
+            isMine: false,
+        },
+        // Media message with multiple images from current user
+        {
+            id: "demo-4",
+            senderId: "current-user",
+            type: "media",
+            text: "My vacation photos! 🏖️",
+            attachments: [
+                {
+                    id: "demo-4-1",
+                    type: "image",
+                    url: "/placeholder.svg?height=200&width=300",
+                    name: "beach1.jpg",
+                    size: 180000,
+                },
+                {
+                    id: "demo-4-2",
+                    type: "image",
+                    url: "/placeholder.svg?height=200&width=300",
+                    name: "beach2.jpg",
+                    size: 195000,
+                },
+            ],
+            createdAt: new Date(Date.now() - 1800000).toISOString(),
+            isMine: true,
+        },
+        // Media message with file from other user
+        {
+            id: "demo-5",
+            senderId: "user-2",
+            type: "media",
+            text: "Here's the document you requested",
+            attachments: [
+                {
+                    id: "demo-5-1",
+                    type: "file",
+                    url: "/placeholder.svg?height=200&width=200",
+                    name: "project-proposal.pdf",
+                    size: 1024000,
+                },
+            ],
+            createdAt: new Date(Date.now() - 1200000).toISOString(),
+            isMine: false,
+        },
+        // Media message with mixed attachments from current user
+        {
+            id: "demo-6",
+            senderId: "current-user",
+            type: "media",
+            text: "Screenshot and the related document",
+            attachments: [
+                {
+                    id: "demo-6-1",
+                    type: "image",
+                    url: "/placeholder.svg?height=400&width=300",
+                    name: "screenshot.png",
+                    size: 156000,
+                },
+                {
+                    id: "demo-6-2",
+                    type: "file",
+                    url: "/placeholder.svg?height=200&width=200",
+                    name: "instructions.docx",
+                    size: 45000,
+                },
+            ],
+            createdAt: new Date(Date.now() - 600000).toISOString(),
+            isMine: true,
+        },
+        // Promotional message (system message)
+        {
+            id: "demo-7",
+            senderId: "system",
+            type: "promo",
+            promoData: {
+                imageUrl: "/placeholder.svg?height=200&width=400",
+                title: "Giảm 30% đơn hàng hôm nay!",
+                description: "Khuyến mãi đặc biệt chỉ trong hôm nay. Đừng bỏ lỡ cơ hội tiết kiệm!",
+                buttonText: "Đặt ngay",
+                buttonUrl: "https://example.com/sale",
+            },
+            createdAt: new Date(Date.now() - 300000).toISOString(),
+            isMine: false,
+        },
+        // Recent text message from other user
+        {
+            id: "demo-8",
+            senderId: "user-2",
+            type: "text",
+            text: "Thanks for sharing! Those photos are amazing 🤩",
+            createdAt: new Date(Date.now() - 60000).toISOString(),
+            isMine: false,
+        },
+    ];
+    const groupMessagesByDate = () => {
+        const groups = [];
+        let currentDate = "";
+        let currentGroup = [];
+        demoMessages.forEach((message) => {
+            const messageDate = new Date(message.createdAt).toDateString();
+            if (messageDate !== currentDate) {
+                if (currentGroup.length > 0) {
+                    groups.push({ date: currentDate, messages: currentGroup });
+                }
+                currentDate = messageDate;
+                currentGroup = [message];
+            }
+            else {
+                currentGroup.push(message);
+            }
+        });
+        if (currentGroup.length > 0) {
+            groups.push({ date: currentDate, messages: currentGroup });
+        }
+        return groups;
+    };
+    const messageGroups = groupMessagesByDate();
+    return (_jsxs("div", { className: "max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden", children: [_jsxs("div", { className: "bg-gray-50 p-4 border-b", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "MessageItem Demo" }), _jsx("p", { className: "text-sm text-gray-600", children: "Showcasing all message types: text, media, and promotional" })] }), _jsx("div", { className: "h-96 overflow-y-auto p-4 space-y-4", children: messageGroups.map((group, groupIndex) => (_jsxs("div", { children: [_jsx(DateDivider, { date: new Date(group.date) }), _jsx("div", { className: "space-y-2", children: group.messages.map((message, messageIndex) => {
+                                const prevMessage = messageIndex > 0 ? group.messages[messageIndex - 1] : null;
+                                const isGrouped = (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.senderId) === message.senderId &&
+                                    new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() < 300000; // 5 minutes
+                                return _jsx(MessageItem, { message: message, isGrouped: isGrouped }, message.id);
+                            }) })] }, group.date))) })] }));
+}

package/dist/components/MessageList.d.ts

@@ -10,6 +10,6 @@ interface MessageListProps {
     onSwipeBack?: () => void;
 }
 export declare function MessageList({ messages, // Add default empty array
-isLoadingMore, onLoadMore, hasMore, currentUserId, conversationId, className, onSwipeBack, }: MessageListProps): import("react").JSX.Element;
+isLoadingMore, onLoadMore, hasMore, currentUserId, conversationId, className, onSwipeBack, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MessageList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAkB,OAAO,EAAE,MAAM,UAAU,CAAA;AAGvD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAa,EAAE,0BAA0B;AACzC,aAAqB,EACrB,UAAU,EACV,OAAe,EACf,aAAa,EACb,cAAc,EACd,SAAc,EACd,WAAW,GACZ,EAAE,gBAAgB,+BA8WlB"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAkB,OAAO,EAAE,MAAM,UAAU,CAAA;AAGvD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAa,EAAE,0BAA0B;AACzC,aAAqB,EACrB,UAAU,EACV,OAAe,EACf,aAAa,EACb,cAAc,EACd,SAAc,EACd,WAAW,GACZ,EAAE,gBAAgB,2CA8WlB"}

package/dist/components/MessageList.js

@@ -0,0 +1,243 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { MessageItem } from "./MessageItem";
+import { DateDivider } from "./DateDivider";
+import { TypingIndicator } from "./TypingIndicator";
+// import { AutoScrollAnchor } from "./AutoScrollAnchor" // Removed
+import { useSwipeGesture } from "../hooks/useSwipeGesture";
+import { useChatContext } from "../context/ChatContext";
+import { ImagePreviewModal } from "./ImagePreviewModal"; // Import the new modal
+export function MessageList({ messages = [], // Add default empty array
+isLoadingMore = false, onLoadMore, hasMore = false, currentUserId, conversationId, className = "", onSwipeBack, }) {
+    const { state } = useChatContext();
+    const scrollRef = useRef(null);
+    const shouldScrollToBottomRef = useRef(true); // New ref to control auto-scrolling
+    const lastMessageCountRef = useRef((messages === null || messages === void 0 ? void 0 : messages.length) || 0); // Add null check
+    const [showSwipeHint, setShowSwipeHint] = useState(false);
+    const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false); // State for button visibility
+    // State for ImagePreviewModal
+    const [isImagePreviewModalOpen, setIsImagePreviewModalOpen] = useState(false);
+    const [previewImages, setPreviewImages] = useState([]);
+    const [initialPreviewImageId, setInitialPreviewImageId] = useState("");
+    // Convert internal Message format to DisplayMessage format
+    const convertToDisplayMessages = useCallback(() => {
+        if (!messages || !Array.isArray(messages))
+            return []; // Add safety check
+        return messages.map((msg) => {
+            const isCurrentUser = msg.senderId === currentUserId;
+            // Handle different message types
+            if (msg.attachments && msg.attachments.length > 0) {
+                return {
+                    id: msg.id,
+                    senderId: msg.senderId,
+                    type: "media",
+                    text: msg.content || undefined,
+                    attachments: msg.attachments.map((att) => ({
+                        id: att.id, // Ensure ID is passed
+                        type: att.type.startsWith("image/") ? "image" : "file",
+                        url: att.url,
+                        name: att.name,
+                        size: att.size,
+                    })),
+                    createdAt: msg.timestamp.toISOString(),
+                    isMine: isCurrentUser,
+                };
+            }
+            // Promotional message type (assuming senderId 'system' or similar for demo)
+            if (msg.type === "promo" && msg.promoData) {
+                return {
+                    id: msg.id,
+                    senderId: msg.senderId,
+                    type: "promo",
+                    promoData: msg.promoData,
+                    createdAt: msg.timestamp.toISOString(),
+                    isMine: isCurrentUser, // Can be false for system messages
+                };
+            }
+            // Regular text message
+            return {
+                id: msg.id,
+                senderId: msg.senderId,
+                type: "text",
+                text: msg.content,
+                createdAt: msg.timestamp.toISOString(),
+                isMine: isCurrentUser,
+            };
+        });
+    }, [messages, currentUserId]);
+    const displayMessages = convertToDisplayMessages();
+    // Swipe gesture for going back (secondary swipe area)
+    const messageSwipeRef = useSwipeGesture({
+        onSwipeRight: () => {
+            if (window.innerWidth < 768) {
+                setShowSwipeHint(true);
+                setTimeout(() => setShowSwipeHint(false), 1500);
+                onSwipeBack === null || onSwipeBack === void 0 ? void 0 : onSwipeBack();
+            }
+        },
+        threshold: 80,
+        restraint: 120,
+        allowedTime: 400,
+        enabled: true,
+    });
+    // Auto-scroll to bottom logic
+    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
+            }
+        }
+    }, []);
+    // Handle scroll events to manage auto-scroll behavior and button visibility
+    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);
+    }, []);
+    // Handle new messages
+    useEffect(() => {
+        const currentMessageCount = (messages === null || messages === void 0 ? void 0 : messages.length) || 0;
+        const previousMessageCount = lastMessageCountRef.current;
+        if (currentMessageCount > previousMessageCount) {
+            const newMessages = messages.slice(previousMessageCount);
+            const hasNewMessageFromCurrentUser = newMessages.some((msg) => msg.senderId === currentUserId);
+            // 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;
+    }, [messages, currentUserId, scrollToBottom]); // scrollToBottom is a dependency because it's called here
+    // Attach and detach scroll listener
+    useEffect(() => {
+        const currentScrollRef = scrollRef.current;
+        if (currentScrollRef) {
+            currentScrollRef.addEventListener("scroll", handleScroll);
+            // Initial check for button visibility
+            handleScroll();
+        }
+        return () => {
+            if (currentScrollRef) {
+                currentScrollRef.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [handleScroll]); // Re-attach if handleScroll changes (due to useCallback dependencies)
+    // Preserve scroll position when loading more messages
+    useEffect(() => {
+        if (isLoadingMore)
+            return;
+        const scrollContainer = scrollRef.current;
+        if (!scrollContainer)
+            return;
+        // Save current scroll position
+        const previousScrollHeight = scrollContainer.scrollHeight;
+        const previousScrollTop = scrollContainer.scrollTop;
+        // After new messages are loaded, adjust scroll position
+        const adjustScrollPosition = () => {
+            const newScrollHeight = scrollContainer.scrollHeight;
+            const heightDifference = newScrollHeight - previousScrollHeight;
+            if (heightDifference > 0) {
+                scrollContainer.scrollTop = previousScrollTop + heightDifference;
+            }
+        };
+        // Use setTimeout to ensure DOM has updated
+        setTimeout(adjustScrollPosition, 0);
+    }, [isLoadingMore]);
+    // Show swipe hint on first load for mobile users
+    useEffect(() => {
+        const hasSeenHint = localStorage.getItem("chat-swipe-hint-seen");
+        if (!hasSeenHint && window.innerWidth < 768) {
+            setTimeout(() => {
+                setShowSwipeHint(true);
+                setTimeout(() => {
+                    setShowSwipeHint(false);
+                    localStorage.setItem("chat-swipe-hint-seen", "true");
+                }, 3000);
+            }, 1000);
+        }
+    }, []);
+    // Group messages by date
+    const groupMessagesByDate = useCallback(() => {
+        const groups = [];
+        let currentDate = "";
+        let currentGroup = [];
+        displayMessages.forEach((message) => {
+            const messageDate = new Date(message.createdAt).toDateString();
+            if (messageDate !== currentDate) {
+                if (currentGroup.length > 0) {
+                    groups.push({ date: currentDate, messages: currentGroup });
+                }
+                currentDate = messageDate;
+                currentGroup = [message];
+            }
+            else {
+                currentGroup.push(message);
+            }
+        });
+        if (currentGroup.length > 0) {
+            groups.push({ date: currentDate, messages: currentGroup });
+        }
+        return groups;
+    }, [displayMessages]);
+    const messageGroups = groupMessagesByDate();
+    // Format date labels in Vietnamese
+    const formatDateLabel = (date) => {
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+        const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        if (messageDate.getTime() === today.getTime()) {
+            return "Hôm nay";
+        }
+        else if (messageDate.getTime() === yesterday.getTime()) {
+            return "Hôm qua";
+        }
+        else {
+            return date.toLocaleDateString("vi-VN", {
+                weekday: "long",
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        }
+    };
+    // Handler for image clicks from MessageItem
+    const handleImageClick = useCallback((imageId, images) => {
+        setPreviewImages(images);
+        setInitialPreviewImageId(imageId);
+        setIsImagePreviewModalOpen(true);
+    }, []);
+    if (!messages || messages.length === 0) {
+        return (_jsx("div", { className: `flex items-center justify-center h-full ${className}`, children: _jsxs("div", { className: "text-center text-gray-500", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center", children: _jsx("svg", { className: "w-8 h-8 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) }), _jsx("p", { className: "text-sm", children: "Ch\u01B0a c\u00F3 tin nh\u1EAFn n\u00E0o" }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: "H\u00E3y b\u1EAFt \u0111\u1EA7u cu\u1ED9c tr\u00F2 chuy\u1EC7n!" })] }) }));
+    }
+    return (_jsxs("div", { className: `relative h-full ${className}`, children: [showSwipeHint && (_jsx("div", { className: "absolute top-4 left-1/2 transform -translate-x-1/2 z-20 md:hidden", children: _jsxs("div", { className: "bg-black bg-opacity-80 text-white text-sm px-4 py-2 rounded-full flex items-center space-x-2 animate-pulse", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), _jsx("span", { children: "Vu\u1ED1t ph\u1EA3i \u0111\u1EC3 quay l\u1EA1i" })] }) })), showScrollToBottomButton && (_jsx("div", { className: "absolute bottom-20 right-4 z-10", children: _jsx("button", { onClick: () => scrollToBottom(true), className: "bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition-colors", "aria-label": "Scroll to bottom", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) }) })), _jsxs("div", { ref: (el) => {
+                    scrollRef.current = el;
+                    if (messageSwipeRef.current !== el) {
+                        messageSwipeRef.current = el;
+                    }
+                }, className: "h-full overflow-y-auto p-3 sm:p-4", style: {
+                    WebkitOverflowScrolling: "touch", // Smooth scrolling on iOS
+                }, onScroll: handleScroll, children: [isLoadingMore && (_jsx("div", { className: "flex justify-center py-4", children: _jsxs("div", { className: "flex items-center space-x-2 text-gray-500", children: [_jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" }), _jsx("span", { className: "text-sm", children: "\u0110ang t\u1EA3i th\u00EAm tin nh\u1EAFn..." })] }) })), hasMore && !isLoadingMore && (_jsx("div", { className: "flex justify-center py-4", children: _jsx("button", { onClick: onLoadMore, className: "text-blue-500 hover:text-blue-600 text-sm font-medium", children: "T\u1EA3i th\u00EAm tin nh\u1EAFn" }) })), _jsx("div", { className: "space-y-3 sm:space-y-4", children: messageGroups.map((group, groupIndex) => (_jsxs("div", { children: [_jsx(DateDivider, { date: new Date(group.date), customLabel: formatDateLabel(new Date(group.date)) }), _jsx("div", { className: "space-y-1 sm:space-y-2", children: group.messages.map((message, messageIndex) => {
+                                        const prevMessage = messageIndex > 0 ? group.messages[messageIndex - 1] : null;
+                                        const isGrouped = (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.senderId) === message.senderId &&
+                                            new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() < 300000; // 5 minutes
+                                        return (_jsx(MessageItem, { message: message, isGrouped: isGrouped, onImageClick: handleImageClick }, message.id));
+                                    }) })] }, group.date))) }), conversationId && _jsx(TypingIndicator, { conversationId: conversationId })] }), isImagePreviewModalOpen && (_jsx(ImagePreviewModal, { images: previewImages, initialImageId: initialPreviewImageId, onClose: () => setIsImagePreviewModalOpen(false) }))] }));
+}

package/dist/components/MessageListDemo.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"MessageListDemo.d.ts","sourceRoot":"","sources":["../../src/components/MessageListDemo.tsx"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,gCAmN9B"}
+{"version":3,"file":"MessageListDemo.d.ts","sourceRoot":"","sources":["../../src/components/MessageListDemo.tsx"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,4CAmN9B"}