@droppii-org/chat-sdk 0.0.1

package/dist/components/AutoScrollAnchor.d.ts

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

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

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

package/dist/components/AutoScrollAnchor.jsx

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

package/dist/components/ChatBubble.d.ts

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

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

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

package/dist/components/ChatBubble.jsx

@@ -0,0 +1,32 @@
+"use client";
+import { useState } from "react";
+import { MessageCircle, X } from "lucide-react";
+import { ChatLayout } from "./ChatLayout";
+export function ChatBubble() {
+    const [isOpen, setIsOpen] = useState(false);
+    return (<>
+      {/* Chat Bubble Button */}
+      <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">
+        <MessageCircle className="w-6 h-6"/>
+      </button>
+
+      {/* Chat Window */}
+      {isOpen && (<div className="fixed bottom-6 right-6 w-96 h-[500px] bg-white rounded-lg shadow-2xl border z-50 flex flex-col overflow-hidden">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b bg-blue-600 text-white">
+            <h3 className="font-semibold">Chat Support</h3>
+            <button onClick={() => setIsOpen(false)} className="p-1 hover:bg-blue-700 rounded" aria-label="Close chat">
+              <X className="w-4 h-4"/>
+            </button>
+          </div>
+
+          {/* Chat Content */}
+          <div className="flex-1 overflow-hidden">
+            <ChatLayout />
+          </div>
+        </div>)}
+
+      {/* Backdrop */}
+      {isOpen && <div className="fixed inset-0 bg-black bg-opacity-20 z-30" onClick={() => setIsOpen(false)}/>}
+    </>);
+}

package/dist/components/ChatHeader.d.ts

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

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

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

package/dist/components/ChatHeader.jsx

@@ -0,0 +1,72 @@
+"use client";
+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 (<div className="flex items-center p-3 sm:p-4 border-b border-gray-200 bg-white relative">
+      {/* Mobile back button with enhanced touch area */}
+      <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">
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7"/>
+        </svg>
+      </button>
+
+      <div className="relative">
+        <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" && (<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"></div>)}
+      </div>
+
+      <div className="ml-3 flex-1 min-w-0">
+        <h2 className="text-base sm:text-lg font-semibold text-gray-900 truncate">{otherParticipant.name}</h2>
+        <p className="text-xs sm:text-sm text-gray-500 truncate">{getStatusText()}</p>
+      </div>
+
+      {/* Swipe hint for first-time users */}
+      <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">
+        💡 Tip: Swipe right anywhere to go back
+      </div>
+
+      <div className="flex items-center space-x-1 sm:space-x-2">
+        <button className="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors">
+          <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <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"/>
+          </svg>
+        </button>
+        <button className="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors">
+          <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <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"/>
+          </svg>
+        </button>
+        {/* Mobile menu button */}
+        <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">
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16"/>
+          </svg>
+        </button>
+      </div>
+    </div>);
+}

package/dist/components/ChatInput.d.ts

@@ -0,0 +1,4 @@
+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;
+//# sourceMappingURL=ChatInput.d.ts.map

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

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

package/dist/components/ChatInput.jsx

@@ -0,0 +1,444 @@
+"use client";
+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 (<div className={`bg-white border-t border-gray-200 p-3 sm:p-4 ${className}`}>
+      {/* Toolbars */}
+      <div className="relative" ref={popupWrapperRef}>
+        <TextFormattingToolbar ref={textToolbarRef} isOpen={showTextToolbar} onClose={() => setShowTextToolbar(false)} onFormatSelect={handleFormatSelect} selectedFormats={selectedFormats} style={textToolbarStyle}/>
+        <EmojiPicker ref={emojiPickerRef} isOpen={showEmojiPicker} onEmojiSelect={handleEmojiSelect} onClose={() => setShowEmojiPicker(false)} style={emojiPickerStyle}/>
+        <StickerPicker ref={stickerPickerRef} isOpen={showStickerPicker} onStickerSelect={handleStickerSelect} onClose={() => setShowStickerPicker(false)} style={stickerPickerStyle}/>
+      </div>
+
+      {/* Main Input Container */}
+      <div className="bg-gray-50 rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200">
+        {/* Selected Files Preview */}
+        {selectedFiles.length > 0 && (<div className="px-4 pt-3 pb-2 border-b border-gray-100 flex flex-wrap gap-2">
+            {selectedFiles.map((file, index) => {
+                const isImage = file.type.startsWith("image/");
+                const fileUrl = isImage ? URL.createObjectURL(file) : null;
+                return (<div key={index} className="flex items-center bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded-lg relative overflow-hidden">
+                  {isImage ? (<img src={fileUrl || ""} alt={file.name} className="h-12 w-12 object-cover rounded-md mr-2"/>) : (<div className="flex items-center space-x-1">
+                      <FileText className="w-4 h-4 text-blue-600"/> {/* File icon */}
+                      <span className="truncate max-w-[100px] sm:max-w-[150px]">{file.name}</span>
+                    </div>)}
+                  <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}`}>
+                    <X className="w-3 h-3"/>
+                  </button>
+                </div>);
+            })}
+          </div>)}
+
+        {/* Input Field */}
+        <div className="px-4 py-3">
+          <form onSubmit={handleSubmit} className="flex items-end space-x-3">
+            <div className="flex-1 relative">
+              <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",
+        }}/>
+            </div>
+
+            {/* Send Button or Quick React */}
+            <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"}>
+              {isUploading ? <Loader2 className="w-4 h-4 animate-spin"/> : <Send className="w-4 h-4"/>}
+            </button>
+          </form>
+        </div>
+
+        {/* Action Icons Row - Small, Left Aligned */}
+        <div className="px-4 pb-3 border-t border-gray-100">
+          <div className="flex items-center space-x-2 justify-start">
+            {actionButtons.map((button, index) => {
+            const Icon = button.icon;
+            return (<button key={index} ref={button.ref} // Assign ref here
+             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}>
+                  <Icon className="w-4 h-4"/>
+                </button>);
+        })}
+          </div>
+        </div>
+
+        {/* Recording Indicator */}
+        {isRecording && (<div className="px-4 pb-2">
+            <div className="flex items-center space-x-2 text-red-500 text-sm">
+              <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
+              <span>Đang ghi âm...</span>
+            </div>
+          </div>)}
+
+        {/* Voice Wave Indicator */}
+        {showVoiceWave && (<div className="px-4 pb-2">
+            <div className="flex items-center space-x-1">
+              {[...Array(8)].map((_, i) => (<div key={i} className="w-1 bg-blue-500 rounded-full animate-pulse" style={{
+                    height: `${Math.random() * 20 + 10}px`,
+                    animationDelay: `${i * 0.1}s`,
+                }}/>))}
+            </div>
+          </div>)}
+      </div>
+
+      {/* Hidden File Inputs */}
+      <input ref={fileInputRef} type="file" onChange={handleFileChange} className="hidden" accept=".pdf,.doc,.docx,.txt,.zip,.rar" multiple // Allow multiple file selection
+    />
+      <input ref={imageInputRef} type="file" onChange={handleImageChange} className="hidden" accept="image/*" multiple // Allow multiple image selection
+    />
+    </div>);
+}

package/dist/components/ChatInputDemo.d.ts

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

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

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

package/dist/components/ChatInputDemo.jsx

@@ -0,0 +1,53 @@
+"use client";
+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 (<div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+      {/* Mock Chat Messages */}
+      <div className="h-96 p-4 bg-gray-50 overflow-y-auto">
+        <div className="space-y-3">
+          <div className="text-center text-gray-500 text-sm mb-4">Demo Chat Interface</div>
+          {messages.map((message, index) => (<div key={index} className="flex justify-end">
+              <div className="bg-blue-500 text-white px-4 py-2 rounded-2xl rounded-tr-md max-w-xs">{message}</div>
+            </div>))}
+          {messages.length === 0 && (<div className="text-center text-gray-400 text-sm">
+              Type a message, select emoji, or send sticker to test the ChatInput component
+            </div>)}
+        </div>
+      </div>
+
+      {/* Chat Input */}
+      <ChatInput onSendMessage={handleSendMessage} onEmojiClick={handleEmojiClick} onStickerClick={handleStickerClick} onFileUpload={handleFileUpload} onImageUpload={handleImageUpload} onContactShare={handleContactShare} onVoiceRecord={handleVoiceRecord} onQuickReact={handleQuickReact} placeholder="Nhập tin nhắn"/>
+    </div>);
+}