@droppii-org/chat-sdk 0.0.3 → 0.0.4

package/dist/components/AutoScrollAnchor.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"AutoScrollAnchor.d.ts","sourceRoot":"","sources":["../../src/components/AutoScrollAnchor.tsx"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,gCAU/B"}
+{"version":3,"file":"AutoScrollAnchor.d.ts","sourceRoot":"","sources":["../../src/components/AutoScrollAnchor.tsx"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,4CAU/B"}

package/dist/components/AutoScrollAnchor.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+export function AutoScrollAnchor() {
+    const anchorRef = useRef(null);
+    useEffect(() => {
+        if (anchorRef.current) {
+            anchorRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    });
+    return _jsx("div", { ref: anchorRef });
+}

package/dist/components/ChatBubble.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../src/components/ChatBubble.tsx"],"names":[],"mappings":"AAWA,wBAAgB,UAAU,gCA0GzB"}
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../src/components/ChatBubble.tsx"],"names":[],"mappings":"AAWA,wBAAgB,UAAU,4CA0GzB"}

package/dist/components/ChatBubble.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { MessageCircle, X } from "lucide-react";
+import { ChatHeader } from "./ChatHeader";
+import { MessageList } from "./MessageList";
+import { ChatInput } from "./ChatInput";
+import { useMessages } from "../hooks/useMessages";
+export function ChatBubble() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedConversationId, setSelectedConversationId] = useState('conv-1');
+    console.log("🚀 ~ ChatBubble ~ isOpen:", isOpen);
+    const messagesHook = useMessages(selectedConversationId || "");
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setIsOpen(true), className: `fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center z-40 ${isOpen ? "scale-0" : "scale-100"}`, "aria-label": "Open chat", children: _jsx(MessageCircle, { className: "w-6 h-6" }) }), isOpen && (_jsxs("div", { className: "fixed bottom-6 right-6 w-96 h-[700px] max-h-[80%] bg-white rounded-lg shadow-2xl border z-50 flex flex-col overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b bg-blue-600 text-white", children: [_jsx("h3", { className: "font-semibold", children: "Chat Support" }), _jsx("button", { onClick: () => setIsOpen(false), className: "p-1 hover:bg-blue-700 rounded", "aria-label": "Close chat", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: `
+        flex-1 flex flex-col relative h-[calc(100%-50px)]
+        ${selectedConversationId ? "flex" : "hidden md:flex"}
+      `, children: selectedConversationId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden absolute top-2 left-2 z-10 pointer-events-none", children: _jsx("div", { className: "bg-black bg-opacity-20 text-white text-xs px-2 py-1 rounded-full opacity-0 transition-opacity duration-200 swipe-hint", children: "\u2190 Swipe to go back" }) }), _jsx("div", { className: "flex-shrink-0", children: _jsx(ChatHeader, { conversationId: selectedConversationId, onBackClick: () => setIsOpen(false), onMenuClick: () => setIsOpen(false) }) }), _jsxs("div", { className: "flex-1 min-h-0", children: [" ", _jsx(MessageList, { messages: messagesHook.messages, currentUserId: "current-user", conversationId: selectedConversationId, className: "h-full" })] }), _jsx("div", { className: "flex-shrink-0", children: _jsx(ChatInput, {}) })] })) : (_jsx("div", { className: "flex-1 flex items-center justify-center text-gray-500 p-4", children: _jsxs("div", { className: "text-center max-w-sm", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center", children: _jsx("svg", { className: "w-8 h-8 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }) }), _jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "Select a conversation" }), _jsx("p", { className: "text-gray-500 text-sm sm:text-base", children: "Choose a conversation from the sidebar to start messaging" }), _jsx("button", { onClick: () => setIsOpen(false), className: "mt-4 md:hidden px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", children: "View Conversations" })] }) })) })] })), isOpen && _jsx("div", { className: "fixed inset-0 bg-black bg-opacity-20 z-30", onClick: () => setIsOpen(false) })] }));
+}

package/dist/components/ChatHeader.d.ts

@@ -3,6 +3,6 @@ interface ChatHeaderProps {
     onBackClick?: () => void;
     onMenuClick?: () => void;
 }
-export declare function ChatHeader({ conversationId, onBackClick, onMenuClick }: ChatHeaderProps): import("react").JSX.Element | null;
+export declare function ChatHeader({ conversationId, onBackClick, onMenuClick }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=ChatHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../src/components/ChatHeader.tsx"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,eAAe,sCAgGvF"}
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../src/components/ChatHeader.tsx"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,eAAe,kDAgGvF"}

package/dist/components/ChatHeader.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatContext } from "../context/ChatContext";
+export function ChatHeader({ conversationId, onBackClick, onMenuClick }) {
+    const { state } = useChatContext();
+    const conversation = state.conversations.find((c) => c.id === conversationId);
+    const otherParticipant = conversation === null || conversation === void 0 ? void 0 : conversation.participants.find((p) => { var _a; return p.id !== ((_a = state.config) === null || _a === void 0 ? void 0 : _a.userId); });
+    if (!conversation || !otherParticipant) {
+        return null;
+    }
+    const getStatusText = () => {
+        if (otherParticipant.status === "online") {
+            return "Online";
+        }
+        else if (otherParticipant.lastSeen) {
+            const now = new Date();
+            const diff = now.getTime() - otherParticipant.lastSeen.getTime();
+            const minutes = Math.floor(diff / (1000 * 60));
+            const hours = Math.floor(minutes / 60);
+            const days = Math.floor(hours / 24);
+            if (minutes < 1)
+                return "Last seen just now";
+            if (minutes < 60)
+                return `Last seen ${minutes}m ago`;
+            if (hours < 24)
+                return `Last seen ${hours}h ago`;
+            return `Last seen ${days}d ago`;
+        }
+        return "Offline";
+    };
+    return (_jsxs("div", { className: "flex items-center p-3 sm:p-4 border-b border-gray-200 bg-white relative", children: [_jsx("button", { onClick: onBackClick, className: "md:hidden p-3 mr-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 -ml-3 transition-colors", "aria-label": "Go back to conversations", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs("div", { className: "relative", children: [_jsx("img", { src: otherParticipant.avatar || "/placeholder.svg?height=40&width=40&query=user", alt: otherParticipant.name, className: "w-8 h-8 sm:w-10 sm:h-10 rounded-full object-cover" }), otherParticipant.status === "online" && (_jsx("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 sm:w-3 sm:h-3 bg-green-500 rounded-full border-2 border-white" }))] }), _jsxs("div", { className: "ml-3 flex-1 min-w-0", children: [_jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: otherParticipant.name }), _jsx("p", { className: "text-xs sm:text-sm text-gray-500 truncate", children: getStatusText() })] }), _jsx("div", { className: "md:hidden absolute top-full left-0 right-0 bg-blue-50 border-b border-blue-100 px-4 py-2 text-xs text-blue-600 text-center animate-pulse swipe-tutorial", children: "\uD83D\uDCA1 Tip: Swipe right anywhere to go back" }), _jsxs("div", { className: "flex items-center space-x-1 sm:space-x-2", children: [_jsx("button", { className: "p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors", children: _jsx("svg", { className: "w-4 h-4 sm:w-5 sm:h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }) }), _jsx("button", { className: "p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors", children: _jsx("svg", { className: "w-4 h-4 sm:w-5 sm:h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) }), _jsx("button", { onClick: onMenuClick, className: "md:hidden p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors", "aria-label": "Open menu", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })] })] }));
+}

package/dist/components/ChatInput.d.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 import type { ChatInputProps } from "../types/chat";
-export declare function ChatInput({ conversationId, onSendMessage, onEmojiClick, onStickerClick, onFileUpload, onImageUpload, onContactShare, onVoiceRecord, onVoiceMessage, onQuickReact, placeholder, disabled, className, }: ChatInputProps): React.JSX.Element;
+export declare function ChatInput({ conversationId, onSendMessage, onEmojiClick, onStickerClick, onFileUpload, onImageUpload, onContactShare, onVoiceRecord, onVoiceMessage, onQuickReact, placeholder, disabled, className, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEnD,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAA6B,EAC7B,QAAgB,EAChB,SAAc,GACf,EAAE,cAAc,qBA4lBhB"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEnD,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAA6B,EAC7B,QAAgB,EAChB,SAAc,GACf,EAAE,cAAc,2CA4lBhB"}

package/dist/components/ChatInput.js

@@ -0,0 +1,379 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Smile, ImageIcon, Paperclip, Mic, Send, Type, Sticker, User, X, Loader2, FileText } from "lucide-react"; // Import FileText icon
+import { useChat } from "../hooks/useChat";
+import { useTyping } from "../hooks/useTyping";
+import { useTextSelection } from "../hooks/useTextSelection";
+import { TextFormattingToolbar } from "./TextFormattingToolbar";
+import { EmojiPicker } from "./EmojiPicker";
+import { StickerPicker } from "./StickerPicker";
+export function ChatInput({ conversationId, onSendMessage, onEmojiClick, onStickerClick, onFileUpload, onImageUpload, onContactShare, onVoiceRecord, onVoiceMessage, onQuickReact, placeholder = "Nhập tin nhắn", disabled = false, className = "", }) {
+    const [message, setMessage] = useState("");
+    const [isRecording, setIsRecording] = useState(false);
+    const [showVoiceWave, setShowVoiceWave] = useState(false);
+    const [showTextToolbar, setShowTextToolbar] = useState(false);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [showStickerPicker, setShowStickerPicker] = useState(false);
+    const [selectedFormats, setSelectedFormats] = useState([]);
+    const [selectedFiles, setSelectedFiles] = useState([]); // State for selected files
+    const [isUploading, setIsUploading] = useState(false); // State for uploading status
+    const fileInputRef = useRef(null);
+    const imageInputRef = useRef(null);
+    // Refs for popups
+    const textToolbarRef = useRef(null);
+    const emojiPickerRef = useRef(null);
+    const stickerPickerRef = useRef(null);
+    // Refs for toggle buttons
+    const textButtonRef = useRef(null);
+    const emojiButtonRef = useRef(null);
+    const stickerButtonRef = useRef(null);
+    // Ref for the relative container that wraps the popups
+    const popupWrapperRef = useRef(null);
+    // State for dynamic popup styles
+    const [textToolbarStyle, setTextToolbarStyle] = useState({});
+    const [emojiPickerStyle, setEmojiPickerStyle] = useState({});
+    const [stickerPickerStyle, setStickerPickerStyle] = useState({});
+    const { sendMessage: sendChatMessage } = useChat(conversationId || "");
+    const { startTyping, stopTyping } = useTyping(conversationId || "");
+    const { textareaRef, applyFormat } = useTextSelection();
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        if (disabled || isUploading)
+            return;
+        if (selectedFiles.length > 0) {
+            setIsUploading(true);
+            // Simulate file upload
+            await Promise.all(selectedFiles.map(async (file) => {
+                await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate network delay
+                if (file.type.startsWith("image/")) {
+                    onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload(file);
+                }
+                else {
+                    onFileUpload === null || onFileUpload === void 0 ? void 0 : onFileUpload(file);
+                }
+            }));
+            setSelectedFiles([]);
+            setIsUploading(false);
+        }
+        if (message.trim()) {
+            // Use integrated chat system if available, otherwise use callback
+            if (sendChatMessage) {
+                sendChatMessage(message.trim());
+            }
+            else {
+                onSendMessage === null || onSendMessage === void 0 ? void 0 : onSendMessage(message.trim());
+            }
+            setMessage("");
+            setSelectedFormats([]);
+            stopTyping();
+            // Reset textarea height
+            if (textareaRef.current) {
+                textareaRef.current.style.height = "auto";
+            }
+        }
+    }, [
+        message,
+        disabled,
+        isUploading,
+        selectedFiles,
+        sendChatMessage,
+        onSendMessage,
+        onFileUpload,
+        onImageUpload,
+        stopTyping,
+        textareaRef,
+    ]);
+    const handleInputChange = useCallback((e) => {
+        const value = e.target.value;
+        setMessage(value);
+        // Trigger typing indicator
+        if (value.trim()) {
+            startTyping();
+        }
+        else {
+            stopTyping();
+        }
+        // Auto-resize textarea
+        const textarea = e.target;
+        textarea.style.height = "auto";
+        textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
+    }, [startTyping, stopTyping]);
+    const handleKeyPress = useCallback((e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+        // Handle keyboard shortcuts
+        if (e.ctrlKey || e.metaKey) {
+            switch (e.key) {
+                case "b":
+                    e.preventDefault();
+                    applyFormat("bold");
+                    break;
+                case "i":
+                    e.preventDefault();
+                    applyFormat("italic");
+                    break;
+                case "e":
+                    e.preventDefault();
+                    applyFormat("code");
+                    break;
+                case "k":
+                    e.preventDefault();
+                    applyFormat("link");
+                    break;
+            }
+        }
+    }, [handleSubmit, applyFormat]);
+    const handleFileClick = useCallback(() => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const handleImageClick = useCallback(() => {
+        var _a;
+        (_a = imageInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const handleFileChange = useCallback((e) => {
+        const files = Array.from(e.target.files || []);
+        if (files.length > 0) {
+            setSelectedFiles((prev) => [...prev, ...files]);
+            e.target.value = ""; // Reset input to allow selecting same file again
+        }
+    }, []);
+    const handleImageChange = useCallback((e) => {
+        const files = Array.from(e.target.files || []);
+        if (files.length > 0) {
+            setSelectedFiles((prev) => [...prev, ...files]);
+            e.target.value = ""; // Reset input to allow selecting same file again
+        }
+    }, []);
+    const handleRemoveFile = useCallback((fileToRemove) => {
+        setSelectedFiles((prev) => prev.filter((file) => file !== fileToRemove));
+    }, []);
+    const handleVoiceRecord = useCallback(() => {
+        setIsRecording(!isRecording);
+        onVoiceRecord === null || onVoiceRecord === void 0 ? void 0 : onVoiceRecord();
+    }, [isRecording, onVoiceRecord]);
+    const handleTextToolbarToggle = useCallback(() => {
+        setShowTextToolbar((prev) => !prev);
+        setShowEmojiPicker(false);
+        setShowStickerPicker(false);
+    }, []);
+    const handleEmojiToggle = useCallback(() => {
+        setShowEmojiPicker((prev) => !prev);
+        setShowTextToolbar(false);
+        setShowStickerPicker(false);
+    }, []);
+    const handleStickerToggle = useCallback(() => {
+        setShowStickerPicker((prev) => !prev);
+        setShowTextToolbar(false);
+        setShowEmojiPicker(false);
+    }, []);
+    const handleFormatSelect = useCallback((format) => {
+        applyFormat(format);
+        setSelectedFormats((prev) => {
+            if (prev.includes(format)) {
+                return prev.filter((f) => f !== format);
+            }
+            else {
+                return [...prev, format];
+            }
+        });
+    }, [applyFormat]);
+    const handleEmojiSelect = useCallback((emoji) => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const newMessage = message.slice(0, start) + emoji + message.slice(end);
+            setMessage(newMessage);
+            setTimeout(() => {
+                textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
+                textarea.focus();
+            }, 0);
+        }
+        onEmojiClick === null || onEmojiClick === void 0 ? void 0 : onEmojiClick(emoji);
+    }, [message, onEmojiClick, textareaRef]);
+    const handleStickerSelect = useCallback((sticker) => {
+        // Send sticker immediately (like a message)
+        if (sendChatMessage) {
+            sendChatMessage(sticker);
+        }
+        else {
+            onSendMessage === null || onSendMessage === void 0 ? void 0 : onSendMessage(sticker);
+        }
+        onStickerClick === null || onStickerClick === void 0 ? void 0 : onStickerClick(sticker);
+        setShowStickerPicker(false); // Close picker after selection
+    }, [sendChatMessage, onSendMessage, onStickerClick]);
+    // Click outside logic
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // Text Formatting Toolbar
+            if (showTextToolbar &&
+                textToolbarRef.current &&
+                !textToolbarRef.current.contains(target) &&
+                textButtonRef.current &&
+                !textButtonRef.current.contains(target)) {
+                setShowTextToolbar(false);
+            }
+            // Emoji Picker
+            if (showEmojiPicker &&
+                emojiPickerRef.current &&
+                !emojiPickerRef.current.contains(target) &&
+                emojiButtonRef.current &&
+                !emojiButtonRef.current.contains(target)) {
+                setShowEmojiPicker(false);
+            }
+            // Sticker Picker
+            if (showStickerPicker &&
+                stickerPickerRef.current &&
+                !stickerPickerRef.current.contains(target) &&
+                stickerButtonRef.current &&
+                !stickerButtonRef.current.contains(target)) {
+                setShowStickerPicker(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showTextToolbar, showEmojiPicker, showStickerPicker]);
+    // Dynamic positioning logic for popups
+    const calculatePopupPosition = useCallback((buttonRef, popupRef, setPopupStyle) => {
+        const wrapper = popupWrapperRef.current;
+        const button = buttonRef.current;
+        const popup = popupRef.current;
+        if (!wrapper || !button || !popup)
+            return;
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const buttonRect = button.getBoundingClientRect();
+        const popupRect = popup.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        let desiredLeft = buttonRect.left - wrapperRect.left;
+        // Add a small margin (e.g., 8px) from the right edge of the viewport
+        const rightViewportMargin = 8;
+        if (wrapperRect.left + desiredLeft + popupRect.width > viewportWidth - rightViewportMargin) {
+            desiredLeft = viewportWidth - wrapperRect.left - popupRect.width - rightViewportMargin;
+            // Ensure it doesn't go off the left edge (e.g., 8px margin from left)
+            desiredLeft = Math.max(8, desiredLeft);
+        }
+        setPopupStyle({ left: `${desiredLeft}px` });
+    }, []);
+    useEffect(() => {
+        if (showTextToolbar) {
+            calculatePopupPosition(textButtonRef, textToolbarRef, setTextToolbarStyle);
+            window.addEventListener("resize", () => calculatePopupPosition(textButtonRef, textToolbarRef, setTextToolbarStyle));
+        }
+        else {
+            setTextToolbarStyle({}); // Reset style when closed
+        }
+        return () => window.removeEventListener("resize", () => calculatePopupPosition(textButtonRef, textToolbarRef, setTextToolbarStyle));
+    }, [showTextToolbar, calculatePopupPosition]);
+    useEffect(() => {
+        if (showEmojiPicker) {
+            calculatePopupPosition(emojiButtonRef, emojiPickerRef, setEmojiPickerStyle);
+            window.addEventListener("resize", () => calculatePopupPosition(emojiButtonRef, emojiPickerRef, setEmojiPickerStyle));
+        }
+        else {
+            setEmojiPickerStyle({}); // Reset style when closed
+        }
+        return () => window.removeEventListener("resize", () => calculatePopupPosition(emojiButtonRef, emojiPickerRef, setEmojiPickerStyle));
+    }, [showEmojiPicker, calculatePopupPosition]);
+    useEffect(() => {
+        if (showStickerPicker) {
+            calculatePopupPosition(stickerButtonRef, stickerPickerRef, setStickerPickerStyle);
+            window.addEventListener("resize", () => calculatePopupPosition(stickerButtonRef, stickerPickerRef, setStickerPickerStyle));
+        }
+        else {
+            setStickerPickerStyle({}); // Reset style when closed
+        }
+        return () => window.removeEventListener("resize", () => calculatePopupPosition(stickerButtonRef, stickerPickerRef, setStickerPickerStyle));
+    }, [showStickerPicker, calculatePopupPosition]);
+    // Cleanup object URLs when selectedFiles change or component unmounts
+    useEffect(() => {
+        const objectUrls = [];
+        selectedFiles.forEach((file) => {
+            if (file.type.startsWith("image/")) {
+                objectUrls.push(URL.createObjectURL(file));
+            }
+        });
+        return () => {
+            objectUrls.forEach((url) => URL.revokeObjectURL(url));
+        };
+    }, [selectedFiles]);
+    // Small, left-aligned action buttons
+    const actionButtons = [
+        {
+            icon: Type,
+            label: "Định dạng văn bản",
+            onClick: handleTextToolbarToggle,
+            color: showTextToolbar ? "text-blue-500 bg-blue-50" : "text-gray-500 hover:text-blue-500",
+            active: showTextToolbar,
+            ref: textButtonRef,
+        },
+        {
+            icon: Smile,
+            label: "Emoji",
+            onClick: handleEmojiToggle,
+            color: showEmojiPicker ? "text-yellow-500 bg-yellow-50" : "text-gray-500 hover:text-yellow-500",
+            active: showEmojiPicker,
+            ref: emojiButtonRef,
+        },
+        {
+            icon: Sticker,
+            label: "Sticker",
+            onClick: handleStickerToggle,
+            color: showStickerPicker ? "text-purple-500 bg-purple-50" : "text-gray-500 hover:text-purple-500",
+            active: showStickerPicker,
+            ref: stickerButtonRef,
+        },
+        {
+            icon: ImageIcon,
+            label: "Hình ảnh",
+            onClick: handleImageClick,
+            color: "text-gray-500 hover:text-green-500",
+        },
+        {
+            icon: Paperclip,
+            label: "Tệp đính kèm",
+            onClick: handleFileClick,
+            color: "text-gray-500 hover:text-blue-500",
+        },
+        {
+            icon: User,
+            label: "Chia sẻ liên hệ",
+            onClick: onContactShare,
+            color: "text-gray-500 hover:text-indigo-500",
+        },
+        {
+            icon: Mic,
+            label: "Ghi âm",
+            onClick: handleVoiceRecord,
+            color: isRecording ? "text-red-500 bg-red-50" : "text-gray-500 hover:text-red-500",
+            active: isRecording,
+        },
+    ];
+    const isSendButtonDisabled = disabled || isUploading || (message.trim() === "" && selectedFiles.length === 0);
+    return (_jsxs("div", { className: `bg-white border-t border-gray-200 p-3 sm:p-4 ${className}`, children: [_jsxs("div", { className: "relative", ref: popupWrapperRef, children: [_jsx(TextFormattingToolbar, { ref: textToolbarRef, isOpen: showTextToolbar, onClose: () => setShowTextToolbar(false), onFormatSelect: handleFormatSelect, selectedFormats: selectedFormats, style: textToolbarStyle }), _jsx(EmojiPicker, { ref: emojiPickerRef, isOpen: showEmojiPicker, onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false), style: emojiPickerStyle }), _jsx(StickerPicker, { ref: stickerPickerRef, isOpen: showStickerPicker, onStickerSelect: handleStickerSelect, onClose: () => setShowStickerPicker(false), style: stickerPickerStyle })] }), _jsxs("div", { className: "bg-gray-50 rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200", children: [selectedFiles.length > 0 && (_jsx("div", { className: "px-4 pt-3 pb-2 border-b border-gray-100 flex flex-wrap gap-2", children: selectedFiles.map((file, index) => {
+                            const isImage = file.type.startsWith("image/");
+                            const fileUrl = isImage ? URL.createObjectURL(file) : null;
+                            return (_jsxs("div", { className: "flex items-center bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded-lg relative overflow-hidden", children: [isImage ? (_jsx("img", { src: fileUrl || "", alt: file.name, className: "h-12 w-12 object-cover rounded-md mr-2" })) : (_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx(FileText, { className: "w-4 h-4 text-blue-600" }), " ", _jsx("span", { className: "truncate max-w-[100px] sm:max-w-[150px]", children: file.name })] })), _jsx("button", { type: "button", onClick: () => handleRemoveFile(file), className: "ml-1 p-0.5 rounded-full hover:bg-blue-200 text-blue-600 absolute top-0.5 right-0.5 bg-white/70 backdrop-blur-sm", "aria-label": `Remove ${file.name}`, children: _jsx(X, { className: "w-3 h-3" }) })] }, index));
+                        }) })), _jsx("div", { className: "px-4 py-3", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex items-end space-x-3", children: [_jsx("div", { className: "flex-1 relative", children: _jsx("textarea", { ref: textareaRef, value: message, onChange: handleInputChange, onKeyDown: handleKeyPress, placeholder: placeholder, disabled: disabled || isUploading, className: "w-full bg-transparent border-none outline-none resize-none text-sm sm:text-base text-gray-900 placeholder-gray-500 leading-5", rows: 1, style: {
+                                            minHeight: "20px",
+                                            maxHeight: "120px",
+                                        } }) }), _jsx("button", { type: "submit", disabled: isSendButtonDisabled, className: "flex-shrink-0 p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200", "aria-label": isUploading ? "Đang tải lên" : "Gửi tin nhắn", children: isUploading ? _jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : _jsx(Send, { className: "w-4 h-4" }) })] }) }), _jsx("div", { className: "px-4 pb-3 border-t border-gray-100", children: _jsx("div", { className: "flex items-center space-x-2 justify-start", children: actionButtons.map((button, index) => {
+                                const Icon = button.icon;
+                                return (_jsx("button", { ref: button.ref, onClick: button.onClick, disabled: disabled || isUploading, className: `
+                    p-1.5 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed
+                    hover:bg-gray-100 active:scale-95
+                    ${button.color}
+                  `, "aria-label": button.label, title: button.label, children: _jsx(Icon, { className: "w-4 h-4" }) }, index));
+                            }) }) }), isRecording && (_jsx("div", { className: "px-4 pb-2", children: _jsxs("div", { className: "flex items-center space-x-2 text-red-500 text-sm", children: [_jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full animate-pulse" }), _jsx("span", { children: "\u0110ang ghi \u00E2m..." })] }) })), showVoiceWave && (_jsx("div", { className: "px-4 pb-2", children: _jsx("div", { className: "flex items-center space-x-1", children: [...Array(8)].map((_, i) => (_jsx("div", { className: "w-1 bg-blue-500 rounded-full animate-pulse", style: {
+                                    height: `${Math.random() * 20 + 10}px`,
+                                    animationDelay: `${i * 0.1}s`,
+                                } }, i))) }) }))] }), _jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileChange, className: "hidden", accept: ".pdf,.doc,.docx,.txt,.zip,.rar", multiple // Allow multiple file selection
+                : true }), _jsx("input", { ref: imageInputRef, type: "file", onChange: handleImageChange, className: "hidden", accept: "image/*", multiple // Allow multiple image selection
+                : true })] }));
+}

package/dist/components/ChatInputDemo.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInputDemo.d.ts","sourceRoot":"","sources":["../../src/components/ChatInputDemo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,gCA0E5B"}
+{"version":3,"file":"ChatInputDemo.d.ts","sourceRoot":"","sources":["../../src/components/ChatInputDemo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,4CA0E5B"}

package/dist/components/ChatInputDemo.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChatInput } from "./ChatInput";
+export function ChatInputDemo() {
+    const [messages, setMessages] = useState([]);
+    const handleSendMessage = (message) => {
+        setMessages((prev) => [...prev, message]);
+        console.log("Message sent:", message);
+    };
+    const handleEmojiClick = (emoji) => {
+        console.log("Emoji clicked:", emoji);
+    };
+    const handleStickerClick = (sticker) => {
+        console.log("Sticker clicked:", sticker);
+        setMessages((prev) => [...prev, `Sticker: ${sticker}`]);
+    };
+    const handleFileUpload = (file) => {
+        console.log("File uploaded:", file.name);
+        setMessages((prev) => [...prev, `📎 File: ${file.name}`]);
+    };
+    const handleImageUpload = (file) => {
+        console.log("Image uploaded:", file.name);
+        setMessages((prev) => [...prev, `🖼️ Image: ${file.name}`]);
+    };
+    const handleContactShare = () => {
+        console.log("Contact share clicked");
+        setMessages((prev) => [...prev, "👤 Contact shared"]);
+    };
+    const handleVoiceRecord = () => {
+        console.log("Voice record clicked");
+    };
+    const handleQuickReact = () => {
+        console.log("Quick react clicked");
+        setMessages((prev) => [...prev, "👍"]);
+    };
+    return (_jsxs("div", { className: "max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden", children: [_jsx("div", { className: "h-96 p-4 bg-gray-50 overflow-y-auto", children: _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "text-center text-gray-500 text-sm mb-4", children: "Demo Chat Interface" }), messages.map((message, index) => (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "bg-blue-500 text-white px-4 py-2 rounded-2xl rounded-tr-md max-w-xs", children: message }) }, index))), messages.length === 0 && (_jsx("div", { className: "text-center text-gray-400 text-sm", children: "Type a message, select emoji, or send sticker to test the ChatInput component" }))] }) }), _jsx(ChatInput, { onSendMessage: handleSendMessage, onEmojiClick: handleEmojiClick, onStickerClick: handleStickerClick, onFileUpload: handleFileUpload, onImageUpload: handleImageUpload, onContactShare: handleContactShare, onVoiceRecord: handleVoiceRecord, onQuickReact: handleQuickReact, placeholder: "Nh\u1EADp tin nh\u1EAFn" })] }));
+}

package/dist/components/ChatInputWithCustomIcon.d.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 interface ChatInputProps {
     onSendMessage?: (message: string) => void;
     onEmojiClick?: (emoji: string) => void;
@@ -12,6 +11,6 @@ interface ChatInputProps {
     disabled?: boolean;
     className?: string;
 }
-export declare function ChatInputWithCustomIcon({ onSendMessage, onEmojiClick, onFileUpload, onImageUpload, onContactShare, onVoiceRecord, onVoiceMessage, onQuickReact, placeholder, disabled, className, }: ChatInputProps): React.JSX.Element;
+export declare function ChatInputWithCustomIcon({ onSendMessage, onEmojiClick, onFileUpload, onImageUpload, onContactShare, onVoiceRecord, onVoiceMessage, onQuickReact, placeholder, disabled, className, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChatInputWithCustomIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatInputWithCustomIcon.d.ts","sourceRoot":"","sources":["../../src/components/ChatInputWithCustomIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,cAAc;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAA6B,EAC7B,QAAgB,EAChB,SAAc,GACf,EAAE,cAAc,qBAgRhB"}
+{"version":3,"file":"ChatInputWithCustomIcon.d.ts","sourceRoot":"","sources":["../../src/components/ChatInputWithCustomIcon.tsx"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAA6B,EAC7B,QAAgB,EAChB,SAAc,GACf,EAAE,cAAc,2CAgRhB"}