@droppii-org/chat-sdk 0.0.4 → 0.0.6

package/dist/components/MessageListDemo.js

@@ -1,165 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsxs("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden h-[600px] flex flex-col", children: [_jsxs("div", { className: "bg-gray-50 p-4 border-b flex-shrink-0", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "MessageList Demo" }), _jsx("p", { className: "text-sm text-gray-600", children: "Features: Auto-scroll, lazy loading, date grouping, sender grouping" })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(MessageList, { messages: messages, isLoadingMore: isLoadingMore, onLoadMore: handleLoadMore, hasMore: hasMore, currentUserId: "current-user", conversationId: "demo-conv" }) }), _jsx("div", { className: "border-t p-4 flex-shrink-0", children: _jsxs("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", children: [_jsx("input", { name: "message", type: "text", placeholder: "Nh\u1EADp tin nh\u1EAFn \u0111\u1EC3 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" }), _jsx("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", children: "G\u1EEDi" })] }) })] }));
-}

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.js

@@ -1,68 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsx("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, children: _jsxs("div", { className: "p-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-2 pb-1 border-b border-gray-100", children: [Object.entries(stickerCategories).map(([key, category]) => {
-                            const Icon = category.icon;
-                            const isActive = activeCategory === key;
-                            return (_jsx("button", { 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, children: _jsx(Icon, { className: "w-4 h-4" }) }, key));
-                        }), _jsx("button", { onClick: onClose, className: "p-1.5 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "relative mb-2", children: [_jsx(Search, { className: "absolute left-2 top-1/2 transform -translate-y-1/2 w-3 h-3 text-gray-400" }), _jsx("input", { type: "text", placeholder: "T\u00ECm 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" })] }), _jsx("div", { className: "mb-2", children: _jsx("h3", { className: "text-xs font-medium text-gray-900", children: stickerCategories[activeCategory].label }) }), _jsx("div", { className: "grid grid-cols-6 gap-1 max-h-48 overflow-y-auto", children: filteredStickers.map((sticker, index) => (_jsx("button", { 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, children: sticker }, index))) }), filteredStickers.length === 0 && (_jsxs("div", { className: "text-center py-4 text-gray-500", children: [_jsx("div", { className: "text-lg mb-1", children: "\uD83D\uDD0D" }), _jsx("p", { className: "text-xs", children: "Kh\u00F4ng t\u00ECm th\u1EA5y sticker n\u00E0o" })] }))] }) }));
-});
-StickerPicker.displayName = "StickerPicker";

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-runtime").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,kDAmC5F"}

package/dist/components/SwipeIndicator.js

@@ -1,24 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-export function SwipeIndicator({ show, direction, text, className = "" }) {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        if (show) {
-            setIsVisible(true);
-        }
-        else {
-            const timer = setTimeout(() => setIsVisible(false), 300);
-            return () => clearTimeout(timer);
-        }
-    }, [show]);
-    if (!isVisible)
-        return null;
-    return (_jsxs("div", { className: `
-        fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50
-        bg-black bg-opacity-80 text-white px-4 py-3 rounded-lg
-        flex items-center space-x-2 transition-all duration-300
-        ${show ? "opacity-100 scale-100" : "opacity-0 scale-95"}
-        ${className}
-      `, children: [_jsx("svg", { className: `w-5 h-5 ${direction === "left" ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }), _jsx("span", { className: "text-sm font-medium", children: text })] }));
-}

package/dist/components/SwipeIndicator.jsx

@@ -1,28 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-export function SwipeIndicator({ show, direction, text, className = "" }) {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        if (show) {
-            setIsVisible(true);
-        }
-        else {
-            const timer = setTimeout(() => setIsVisible(false), 300);
-            return () => clearTimeout(timer);
-        }
-    }, [show]);
-    if (!isVisible)
-        return null;
-    return (<div className={`
-        fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50
-        bg-black bg-opacity-80 text-white px-4 py-3 rounded-lg
-        flex items-center space-x-2 transition-all duration-300
-        ${show ? "opacity-100 scale-100" : "opacity-0 scale-95"}
-        ${className}
-      `}>
-      <svg className={`w-5 h-5 ${direction === "left" ? "rotate-180" : ""}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7"/>
-      </svg>
-      <span className="text-sm font-medium">{text}</span>
-    </div>);
-}

package/dist/components/TextFormattingToolbar.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextFormattingToolbar.d.ts","sourceRoot":"","sources":["../../src/components/TextFormattingToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAa/D,eAAO,MAAM,qBAAqB,gHAuDjC,CAAA"}

package/dist/components/TextFormattingToolbar.js

@@ -1,29 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Bold, Italic, Strikethrough, List, ListOrdered, Link, Quote, Code, X } from "lucide-react";
-const formatButtons = [
-    { icon: Bold, label: "Đậm", format: "bold", shortcut: "Ctrl+B", symbol: "**" },
-    { icon: Italic, label: "Nghiêng", format: "italic", shortcut: "Ctrl+I", symbol: "*" },
-    { icon: Strikethrough, label: "Gạch ngang", format: "strikethrough", shortcut: "Ctrl+Shift+X", symbol: "~~" },
-    { icon: ListOrdered, label: "Danh sách số", format: "numbered-list", shortcut: "Ctrl+Shift+7", symbol: "1." },
-    { icon: List, label: "Danh sách dấu đầu dòng", format: "bullet-list", shortcut: "Ctrl+Shift+8", symbol: "•" },
-    { icon: Link, label: "Liên kết", format: "link", shortcut: "Ctrl+K", symbol: "[]" },
-    { icon: Quote, label: "Trích dẫn", format: "quote", shortcut: "Ctrl+Shift+>", symbol: ">" },
-    { icon: Code, label: "Mã", format: "code", shortcut: "Ctrl+E", symbol: "`" },
-];
-export const TextFormattingToolbar = React.forwardRef(({ isOpen, onClose, onFormatSelect, selectedFormats = [], style }, ref) => {
-    if (!isOpen)
-        return null;
-    return (_jsx("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, children: _jsxs("div", { className: "p-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "text-xs font-medium text-gray-900", children: "\u0110\u1ECBnh d\u1EA1ng v\u0103n b\u1EA3n" }), _jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100", children: _jsx(X, { className: "w-3 h-3" }) })] }), _jsx("div", { className: "grid grid-cols-4 gap-1", children: formatButtons.map((button) => {
-                        const Icon = button.icon;
-                        const isSelected = selectedFormats.includes(button.format);
-                        return (_jsxs("button", { onClick: () => onFormatSelect(button.format), className: `
-                    flex flex-col items-center p-2 rounded transition-all duration-200 hover:bg-gray-50 active:scale-95
-                    ${isSelected
-                                ? "bg-blue-50 text-blue-600 border border-blue-200"
-                                : "text-gray-600 hover:text-gray-800 border border-gray-200"}
-                  `, title: `${button.label} (${button.shortcut})`, "aria-label": button.label, children: [_jsx(Icon, { className: "w-4 h-4 mb-1" }), _jsx("span", { className: "text-xs font-medium", children: button.symbol })] }, button.format));
-                    }) }), _jsx("div", { className: "mt-2 pt-2 border-t border-gray-100", children: _jsx("p", { className: "text-xs text-gray-500 text-center", children: "\uD83D\uDCA1 S\u1EED d\u1EE5ng ph\u00EDm t\u1EAFt \u0111\u1EC3 \u0111\u1ECBnh d\u1EA1ng nhanh" }) })] }) }));
-});
-TextFormattingToolbar.displayName = "TextFormattingToolbar";