@droppii-org/chat-sdk 0.0.3 → 0.0.5

package/dist/components/MessageList.d.ts

@@ -1,15 +0,0 @@
-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

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

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

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

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

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

package/dist/components/MessageListDemo.jsx

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

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

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