@droppii-org/chat-sdk 0.0.4 → 0.0.6

package/dist/components/ChatInput.jsx

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

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

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

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

package/dist/components/ChatInputDemo.js

@@ -1,38 +0,0 @@
-"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/ChatInputDemo.jsx

@@ -1,53 +0,0 @@
-"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>);
-}

package/dist/components/ChatInputWithCustomIcon.d.ts

@@ -1,16 +0,0 @@
-interface ChatInputProps {
-    onSendMessage?: (message: string) => void;
-    onEmojiClick?: (emoji: string) => void;
-    onFileUpload?: (file: File) => void;
-    onImageUpload?: (file: File) => void;
-    onContactShare?: () => void;
-    onVoiceRecord?: () => void;
-    onVoiceMessage?: () => void;
-    onQuickReact?: () => void;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-}
-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 +0,0 @@
-{"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"}

package/dist/components/ChatInputWithCustomIcon.js

@@ -1,85 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useCallback } from "react";
-import { Smile, ImageIcon, Paperclip, Mic, ThumbsUp, Send, Type, Sticker, User } from "lucide-react";
-import { VoiceWaveIcon } from "./VoiceWaveIcon";
-export function ChatInputWithCustomIcon({ onSendMessage, onEmojiClick, 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 textareaRef = useRef(null);
-    const fileInputRef = useRef(null);
-    const imageInputRef = useRef(null);
-    const handleSubmit = useCallback((e) => {
-        e.preventDefault();
-        if (!message.trim() || disabled)
-            return;
-        onSendMessage === null || onSendMessage === void 0 ? void 0 : onSendMessage(message.trim());
-        setMessage("");
-        // Reset textarea height
-        if (textareaRef.current) {
-            textareaRef.current.style.height = "auto";
-        }
-    }, [message, disabled, onSendMessage]);
-    const handleInputChange = useCallback((e) => {
-        const value = e.target.value;
-        setMessage(value);
-        // Auto-resize textarea
-        const textarea = e.target;
-        textarea.style.height = "auto";
-        textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
-    }, []);
-    const handleKeyPress = useCallback((e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            handleSubmit(e);
-        }
-    }, [handleSubmit]);
-    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) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            onFileUpload === null || onFileUpload === void 0 ? void 0 : onFileUpload(file);
-            e.target.value = ""; // Reset input
-        }
-    }, [onFileUpload]);
-    const handleImageChange = useCallback((e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload(file);
-            e.target.value = ""; // Reset input
-        }
-    }, [onImageUpload]);
-    const handleVoiceRecord = useCallback(() => {
-        setIsRecording(!isRecording);
-        onVoiceRecord === null || onVoiceRecord === void 0 ? void 0 : onVoiceRecord();
-    }, [isRecording, onVoiceRecord]);
-    const handleVoiceMessage = useCallback(() => {
-        setShowVoiceWave(!showVoiceWave);
-        onVoiceMessage === null || onVoiceMessage === void 0 ? void 0 : onVoiceMessage();
-    }, [showVoiceWave, onVoiceMessage]);
-    return (_jsxs("div", { className: `bg-white border-t border-gray-200 p-3 sm:p-4 ${className}`, children: [_jsxs("div", { className: "bg-gray-50 rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200", children: [_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, onKeyPress: handleKeyPress, placeholder: placeholder, disabled: disabled, 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",
-                                        } }) }), message.trim() ? (_jsx("button", { type: "submit", disabled: disabled, 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": "Send message", children: _jsx(Send, { className: "w-4 h-4" }) })) : (_jsx("button", { type: "button", onClick: onQuickReact, className: "flex-shrink-0 p-2 text-blue-500 hover:bg-blue-50 rounded-full transition-colors duration-200", "aria-label": "Quick react", children: _jsx(ThumbsUp, { className: "w-4 h-4" }) }))] }) }), _jsx("div", { className: "px-4 pb-3 border-t border-gray-100", children: _jsxs("div", { className: "flex items-center justify-between space-x-1", children: [_jsx("button", { onClick: () => console.log("Text style clicked"), disabled: disabled, className: "p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 active:scale-95 text-gray-500 hover:text-blue-500", "aria-label": "Text style", title: "Text style", children: _jsx(Type, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: () => onEmojiClick === null || onEmojiClick === void 0 ? void 0 : onEmojiClick("😊"), disabled: disabled, className: "p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 active:scale-95 text-gray-500 hover:text-yellow-500", "aria-label": "Emoji", title: "Emoji", children: _jsx(Smile, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: () => console.log("Sticker clicked"), disabled: disabled, className: "p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 active:scale-95 text-gray-500 hover:text-purple-500", "aria-label": "Sticker", title: "Sticker", children: _jsx(Sticker, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: handleImageClick, disabled: disabled, className: "p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 active:scale-95 text-gray-500 hover:text-green-500", "aria-label": "Image upload", title: "Image upload", children: _jsx(ImageIcon, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: handleFileClick, disabled: disabled, className: "p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 active:scale-95 text-gray-500 hover:text-blue-500", "aria-label": "File attachment", title: "File attachment", children: _jsx(Paperclip, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: onContactShare, disabled: disabled, className: "p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 active:scale-95 text-gray-500 hover:text-indigo-500", "aria-label": "Contact sharing", title: "Contact sharing", children: _jsx(User, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: handleVoiceRecord, disabled: disabled, className: `
-                p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed
-                hover:bg-gray-100 active:scale-95
-                ${isRecording ? "text-red-500 bg-red-50" : "text-gray-500 hover:text-red-500"}
-              `, "aria-label": "Record audio", title: "Record audio", children: _jsx(Mic, { className: "w-4 h-4 sm:w-5 sm:h-5" }) }), _jsx("button", { onClick: handleVoiceMessage, disabled: disabled, className: `
-                p-2 rounded-full transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed
-                hover:bg-gray-100 active:scale-95
-                ${showVoiceWave ? "text-blue-500 bg-blue-50" : "text-gray-500 hover:text-blue-500"}
-              `, "aria-label": "Voice message", title: "Voice message", children: _jsx(VoiceWaveIcon, { className: "w-4 h-4 sm:w-5 sm:h-5", animated: showVoiceWave }) })] }) }), 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: "Recording..." })] }) })), 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" }), _jsx("input", { ref: imageInputRef, type: "file", onChange: handleImageChange, className: "hidden", accept: "image/*" })] }));
-}