@droppii-org/chat-sdk 0.0.1

package/dist/components/MessageList.d.ts

@@ -0,0 +1,15 @@
+import type { Message } from "../types";
+interface MessageListProps {
+    messages: Message[];
+    isLoadingMore?: boolean;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    currentUserId: string;
+    conversationId?: string;
+    className?: string;
+    onSwipeBack?: () => void;
+}
+export declare function MessageList({ messages, // Add default empty array
+isLoadingMore, onLoadMore, hasMore, currentUserId, conversationId, className, onSwipeBack, }: MessageListProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MessageList.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/MessageList.jsx

@@ -0,0 +1,306 @@
+"use client";
+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 (<div className={`flex items-center justify-center h-full ${className}`}>
+        <div className="text-center text-gray-500">
+          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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"/>
+            </svg>
+          </div>
+          <p className="text-sm">Chưa có tin nhắn nào</p>
+          <p className="text-xs text-gray-400 mt-1">Hãy bắt đầu cuộc trò chuyện!</p>
+        </div>
+      </div>);
+    }
+    return (<div className={`relative h-full ${className}`}>
+      {/* Swipe hint overlay */}
+      {showSwipeHint && (<div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-20 md:hidden">
+          <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">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7"/>
+            </svg>
+            <span>Vuốt phải để quay lại</span>
+          </div>
+        </div>)}
+
+      {/* Scroll to bottom button */}
+      {showScrollToBottomButton && (<div className="absolute bottom-20 right-4 z-10">
+          <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">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
+            </svg>
+          </button>
+        </div>)}
+
+      {/* Scrollable message container */}
+      <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}>
+        {/* Loading more indicator */}
+        {isLoadingMore && (<div className="flex justify-center py-4">
+            <div className="flex items-center space-x-2 text-gray-500">
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"></div>
+              <span className="text-sm">Đang tải thêm tin nhắn...</span>
+            </div>
+          </div>)}
+
+        {/* Load more button */}
+        {hasMore && !isLoadingMore && (<div className="flex justify-center py-4">
+            <button onClick={onLoadMore} className="text-blue-500 hover:text-blue-600 text-sm font-medium">
+              Tải thêm tin nhắn
+            </button>
+          </div>)}
+
+        {/* Message groups */}
+        <div className="space-y-3 sm:space-y-4">
+          {messageGroups.map((group, groupIndex) => (<div key={group.date}>
+              <DateDivider date={new Date(group.date)} customLabel={formatDateLabel(new Date(group.date))}/>
+              <div className="space-y-1 sm:space-y-2">
+                {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 (<MessageItem key={message.id} message={message} isGrouped={isGrouped} onImageClick={handleImageClick} // Pass the handler down
+                />);
+            })}
+              </div>
+            </div>))}
+        </div>
+
+        {/* Typing indicator */}
+        {conversationId && <TypingIndicator conversationId={conversationId}/>}
+      </div>
+
+      {/* Image Preview Modal */}
+      {isImagePreviewModalOpen && (<ImagePreviewModal images={previewImages} initialImageId={initialPreviewImageId} onClose={() => setIsImagePreviewModalOpen(false)}/>)}
+    </div>);
+}

package/dist/components/MessageListDemo.d.ts

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

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

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

package/dist/components/MessageListDemo.jsx

@@ -0,0 +1,183 @@
+"use client";
+import { useState } from "react";
+import { MessageList } from "./MessageList";
+export function MessageListDemo() {
+    const [messages, setMessages] = useState([
+        // Yesterday's messages
+        {
+            id: "demo-old-1",
+            conversationId: "demo-conv",
+            senderId: "user-2",
+            content: "Hey! How was your weekend?",
+            type: "text",
+            timestamp: new Date(Date.now() - 86400000 - 3600000), // Yesterday
+            status: "read",
+        },
+        {
+            id: "demo-old-2",
+            conversationId: "demo-conv",
+            senderId: "current-user",
+            content: "It was great! Went hiking 🏔️",
+            type: "text",
+            timestamp: new Date(Date.now() - 86400000 - 3000000), // Yesterday
+            status: "read",
+        },
+        // Today's messages
+        {
+            id: "demo-1",
+            conversationId: "demo-conv",
+            senderId: "user-2",
+            content: "Good morning! How are you today? 😊",
+            type: "text",
+            timestamp: new Date(Date.now() - 3600000), // 1 hour ago
+            status: "read",
+        },
+        {
+            id: "demo-2",
+            conversationId: "demo-conv",
+            senderId: "current-user",
+            content: "Morning! I'm doing great, thanks for asking!",
+            type: "text",
+            timestamp: new Date(Date.now() - 3000000), // 50 minutes ago
+            status: "read",
+        },
+        {
+            id: "demo-3",
+            conversationId: "demo-conv",
+            senderId: "user-2",
+            content: "Check out these photos from my trip!",
+            type: "image",
+            timestamp: new Date(Date.now() - 2400000), // 40 minutes ago
+            status: "read",
+            attachments: [
+                {
+                    id: "att-1",
+                    name: "trip1.jpg",
+                    url: "/placeholder.svg?height=300&width=400",
+                    type: "image/jpeg",
+                    size: 245760,
+                },
+                {
+                    id: "att-2",
+                    name: "trip2.jpg",
+                    url: "/placeholder.svg?height=300&width=400",
+                    type: "image/jpeg",
+                    size: 198432,
+                },
+            ],
+        },
+        {
+            id: "demo-4",
+            conversationId: "demo-conv",
+            senderId: "current-user",
+            content: "Wow, those are amazing! 😍",
+            type: "text",
+            timestamp: new Date(Date.now() - 1800000), // 30 minutes ago
+            status: "read",
+        },
+        {
+            id: "demo-5",
+            conversationId: "demo-conv",
+            senderId: "user-2",
+            content: "Here's the document you requested",
+            type: "file",
+            timestamp: new Date(Date.now() - 1200000), // 20 minutes ago
+            status: "read",
+            attachments: [
+                {
+                    id: "att-3",
+                    name: "report.pdf",
+                    url: "/placeholder.svg?height=200&width=200",
+                    type: "application/pdf",
+                    size: 1024000,
+                },
+            ],
+        },
+        {
+            id: "demo-6",
+            conversationId: "demo-conv",
+            senderId: "current-user",
+            content: "Perfect, thanks! I'll review it this afternoon.",
+            type: "text",
+            timestamp: new Date(Date.now() - 600000), // 10 minutes ago
+            status: "read",
+        },
+    ]);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const handleLoadMore = () => {
+        setIsLoadingMore(true);
+        // Simulate loading more messages
+        setTimeout(() => {
+            const olderMessages = [
+                {
+                    id: `older-${Date.now()}-1`,
+                    conversationId: "demo-conv",
+                    senderId: "user-2",
+                    content: "Hey, did you see the news today?",
+                    type: "text",
+                    timestamp: new Date(Date.now() - 172800000), // 2 days ago
+                    status: "read",
+                },
+                {
+                    id: `older-${Date.now()}-2`,
+                    conversationId: "demo-conv",
+                    senderId: "current-user",
+                    content: "Yes! It's quite interesting.",
+                    type: "text",
+                    timestamp: new Date(Date.now() - 172800000 + 300000), // 2 days ago + 5 min
+                    status: "read",
+                },
+            ];
+            setMessages((prev) => [...olderMessages, ...prev]);
+            setIsLoadingMore(false);
+            // Simulate no more messages after a few loads
+            if (messages.length > 15) {
+                setHasMore(false);
+            }
+        }, 1500);
+    };
+    const handleSendMessage = (content) => {
+        const newMessage = {
+            id: `new-${Date.now()}`,
+            conversationId: "demo-conv",
+            senderId: "current-user",
+            content,
+            type: "text",
+            timestamp: new Date(),
+            status: "sending",
+        };
+        setMessages((prev) => [...prev, newMessage]);
+        // Simulate message status update
+        setTimeout(() => {
+            setMessages((prev) => prev.map((msg) => (msg.id === newMessage.id ? Object.assign(Object.assign({}, msg), { status: "delivered" }) : msg)));
+        }, 1000);
+    };
+    return (<div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden h-[600px] flex flex-col">
+      <div className="bg-gray-50 p-4 border-b flex-shrink-0">
+        <h2 className="text-lg font-semibold text-gray-900">MessageList Demo</h2>
+        <p className="text-sm text-gray-600">Features: Auto-scroll, lazy loading, date grouping, sender grouping</p>
+      </div>
+
+      <div className="flex-1 overflow-hidden">
+        <MessageList messages={messages} isLoadingMore={isLoadingMore} onLoadMore={handleLoadMore} hasMore={hasMore} currentUserId="current-user" conversationId="demo-conv"/>
+      </div>
+
+      {/* Simple input for testing */}
+      <div className="border-t p-4 flex-shrink-0">
+        <form onSubmit={(e) => {
+            e.preventDefault();
+            const input = e.currentTarget.elements.namedItem("message");
+            if (input.value.trim()) {
+                handleSendMessage(input.value.trim());
+                input.value = "";
+            }
+        }} className="flex space-x-2">
+          <input name="message" type="text" placeholder="Nhập tin nhắn để test auto-scroll..." className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"/>
+          <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
+            Gửi
+          </button>
+        </form>
+      </div>
+    </div>);
+}

package/dist/components/StickerPicker.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { StickerPickerProps } from "../types/chat";
+export declare const StickerPicker: React.ForwardRefExoticComponent<Omit<StickerPickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StickerPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickerPicker.d.ts","sourceRoot":"","sources":["../../src/components/StickerPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AA6CvD,eAAO,MAAM,aAAa,wGA8FzB,CAAA"}

package/dist/components/StickerPicker.jsx

@@ -0,0 +1,106 @@
+"use client";
+import React from "react";
+import { useState } from "react";
+import { X, Search, Heart, Smile, Star, Zap, Coffee, Music, Gamepad2Icon as GameController2, Sparkles, } from "lucide-react";
+const stickerCategories = {
+    popular: {
+        label: "Phổ biến",
+        icon: Star,
+        stickers: ["🔥", "💯", "✨", "⭐", "🎉", "🎊", "💫", "🌟", "⚡"],
+    },
+    emotions: {
+        label: "Cảm xúc",
+        icon: Heart,
+        stickers: ["❤️", "💕", "💖", "💗", "💓", "💘", "💝", "💟", "♥️", "💔", "❣️", "💋", "👑", "💎", "🌹"],
+    },
+    reactions: {
+        label: "Phản ứng",
+        icon: Smile,
+        stickers: ["👍", "👎", "👏", "🙌", "👌", "✌️", "🤞", "🤟", "🤘", "👊", "✊", "🤛", "🤜", "👋", "🤚"],
+    },
+    fun: {
+        label: "Vui nhộn",
+        icon: Zap,
+        stickers: ["🎯", "🎪", "🎨", "🎭", "🎪", "🎡", "🎢", "🎠", "🎳", "🎮", "🕹️", "🎲", "🃏", "🎴", "🀄"],
+    },
+    food: {
+        label: "Đồ ăn",
+        icon: Coffee,
+        stickers: ["🍕", "🍔", "🍟", "🌭", "🥪", "🌮", "🌯", "🥙", "🧆", "🥚", "🍳", "🥘", "🍲", "🥗", "🍿"],
+    },
+    activities: {
+        label: "Hoạt động",
+        icon: GameController2,
+        stickers: ["⚽", "🏀", "🏈", "⚾", "🥎", "🎾", "🏐", "🏉", "🥏", "🎱", "🪀", "🏓", "🏸", "🏒", "🏑"],
+    },
+    nature: {
+        label: "Thiên nhiên",
+        icon: Sparkles,
+        stickers: ["🌸", "🌺", "🌻", "🌷", "🌹", "🥀", "🌾", "🌿", "☘️", "🍀", "🍃", "🌱", "🌲", "🌳", "🌴"],
+    },
+    music: {
+        label: "Âm nhạc",
+        icon: Music,
+        stickers: ["🎵", "🎶", "🎼", "🎹", "🥁", "🎷", "🎺", "🎸", "🪕", "🎻", "🎤", "🎧", "📻", "🎚️", "🎛️"],
+    },
+};
+export const StickerPicker = React.forwardRef(({ onStickerSelect, onClose, isOpen = false, style }, ref) => {
+    const [activeCategory, setActiveCategory] = useState("popular");
+    const [searchTerm, setSearchTerm] = useState("");
+    if (!isOpen)
+        return null;
+    const handleStickerClick = (sticker) => {
+        onStickerSelect === null || onStickerSelect === void 0 ? void 0 : onStickerSelect(sticker);
+    };
+    const filteredStickers = searchTerm
+        ? stickerCategories[activeCategory].stickers.filter((sticker) => sticker.includes(searchTerm))
+        : stickerCategories[activeCategory].stickers;
+    return (<div ref={ref} className="absolute bottom-full mb-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-full sm:max-w-xs md:w-80" style={style} // Apply dynamic style here
+    >
+        <div className="p-2">
+          {/* Category Icons Row - Compact */}
+          <div className="flex items-center justify-between mb-2 pb-1 border-b border-gray-100">
+            {Object.entries(stickerCategories).map(([key, category]) => {
+            const Icon = category.icon;
+            const isActive = activeCategory === key;
+            return (<button key={key} onClick={() => setActiveCategory(key)} className={`
+                    p-1.5 rounded-full transition-all duration-200 hover:bg-gray-100
+                    ${isActive ? "text-purple-500 bg-purple-50" : "text-gray-500"}
+                  `} title={category.label}>
+                  <Icon className="w-4 h-4"/>
+                </button>);
+        })}
+
+            {/* Close button */}
+            <button onClick={onClose} className="p-1.5 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
+              <X className="w-4 h-4"/>
+            </button>
+          </div>
+
+          {/* Search Bar - Compact */}
+          <div className="relative mb-2">
+            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3 h-3 text-gray-400"/>
+            <input type="text" placeholder="Tìm sticker" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-7 pr-3 py-1.5 text-xs bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent"/>
+          </div>
+
+          {/* Category Title - Compact */}
+          <div className="mb-2">
+            <h3 className="text-xs font-medium text-gray-900">{stickerCategories[activeCategory].label}</h3>
+          </div>
+
+          {/* Sticker Grid - Compact */}
+          <div className="grid grid-cols-6 gap-1 max-h-48 overflow-y-auto">
+            {filteredStickers.map((sticker, index) => (<button key={index} onClick={() => handleStickerClick(sticker)} className="p-2 text-xl hover:bg-gray-100 rounded transition-all duration-200 hover:scale-110 active:scale-95 border border-gray-100 hover:border-gray-200" title={sticker}>
+                {sticker}
+              </button>))}
+          </div>
+
+          {/* Empty state */}
+          {filteredStickers.length === 0 && (<div className="text-center py-4 text-gray-500">
+              <div className="text-lg mb-1">🔍</div>
+              <p className="text-xs">Không tìm thấy sticker nào</p>
+            </div>)}
+        </div>
+      </div>);
+});
+StickerPicker.displayName = "StickerPicker";

package/dist/components/SwipeIndicator.d.ts

@@ -0,0 +1,9 @@
+interface SwipeIndicatorProps {
+    show: boolean;
+    direction: "left" | "right";
+    text: string;
+    className?: string;
+}
+export declare function SwipeIndicator({ show, direction, text, className }: SwipeIndicatorProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=SwipeIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeIndicator.d.ts","sourceRoot":"","sources":["../../src/components/SwipeIndicator.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAc,EAAE,EAAE,mBAAmB,sCAmC5F"}