@droppii-org/chat-sdk 0.0.3 → 0.0.4

package/dist/components/ChatInputWithCustomIcon.js

@@ -0,0 +1,85 @@
+"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/*" })] }));
+}

package/dist/components/ChatLayout.d.ts

@@ -1,6 +1,6 @@
 interface ChatLayoutProps {
     className?: string;
 }
-export declare function ChatLayout({ className }: ChatLayoutProps): import("react").JSX.Element;
+export declare function ChatLayout({ className }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChatLayout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/components/ChatLayout.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAc,EAAE,EAAE,eAAe,+BA2J7D"}
+{"version":3,"file":"ChatLayout.d.ts","sourceRoot":"","sources":["../../src/components/ChatLayout.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAc,EAAE,EAAE,eAAe,2CA2J7D"}

package/dist/components/ChatLayout.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { ConversationList } from "./ConversationList";
+import { ChatHeader } from "./ChatHeader";
+import { MessageList } from "./MessageList";
+import { ChatInput } from "./ChatInput";
+import { useChatContext } from "../context/ChatContext";
+import { useSwipeGesture } from "../hooks/useSwipeGesture";
+import { useMessages } from "../hooks/useMessages";
+export function ChatLayout({ className = "" }) {
+    var _a;
+    const [selectedConversationId, setSelectedConversationId] = useState('conv-1');
+    const [showSidebar, setShowSidebar] = useState(false);
+    const { state } = useChatContext();
+    const messagesHook = useMessages(selectedConversationId || "");
+    const handleConversationSelect = (conversationId) => {
+        setSelectedConversationId(conversationId);
+        setShowSidebar(false); // Hide sidebar on mobile after selection
+    };
+    const handleBackToList = () => {
+        setSelectedConversationId(null);
+        setShowSidebar(true);
+    };
+    // Swipe gesture for going back to conversation list
+    const swipeRef = useSwipeGesture({
+        onSwipeRight: () => {
+            // Only trigger on mobile when a conversation is selected
+            if (selectedConversationId && window.innerWidth < 768) {
+                handleBackToList();
+            }
+        },
+        threshold: 100, // Minimum swipe distance
+        restraint: 100, // Maximum vertical movement allowed
+        allowedTime: 300, // Maximum time for swipe
+        enabled: !!selectedConversationId, // Only enable when conversation is selected
+    });
+    return (_jsxs("div", { className: `flex h-screen bg-white ${className}`, ref: swipeRef, children: [showSidebar && (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden", onClick: () => setShowSidebar(false) })), _jsxs("div", { className: `
+        fixed inset-y-0 left-0 z-50 w-full bg-white transform transition-transform duration-300 ease-in-out
+        md:relative md:translate-x-0 md:w-80 md:border-r md:border-gray-200
+        ${showSidebar ? "translate-x-0" : "-translate-x-full"}
+        ${selectedConversationId ? "hidden md:flex" : "flex"}
+        flex-col h-full
+      `, children: [_jsx("div", { className: "flex-shrink-0 p-3 sm:p-4 border-b border-gray-200 bg-white", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Messages" }), _jsxs("div", { className: "flex items-center space-x-2", children: [!state.isConnected && (_jsxs("div", { className: "flex items-center text-xs text-gray-500", children: [_jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Demo Mode" })] })), _jsx("button", { onClick: () => setShowSidebar(false), className: "md:hidden p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100", 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: "M6 18L18 6M6 6l12 12" }) }) })] })] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(ConversationList, { selectedConversationId: selectedConversationId || undefined, onConversationSelect: handleConversationSelect, className: "h-full" }) })] }), _jsx("div", { className: `
+        flex-1 flex flex-col relative h-full
+        ${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: handleBackToList, onMenuClick: () => setShowSidebar(true) }) }), _jsxs("div", { className: "flex-1 min-h-0", children: [" ", _jsx(MessageList, { messages: messagesHook.messages, currentUserId: ((_a = state.config) === null || _a === void 0 ? void 0 : _a.userId) || "", 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" }), !state.isConnected && (_jsx("p", { className: "text-xs text-gray-400 mt-2", children: "Running in demo mode - WebSocket disabled" })), _jsx("button", { onClick: () => setShowSidebar(true), 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" })] }) })) })] }));
+}

package/dist/components/ConversationItem.d.ts

@@ -4,6 +4,6 @@ interface ConversationItemProps {
     isSelected?: boolean;
     onClick?: () => void;
 }
-export declare function ConversationItem({ conversation, isSelected, onClick }: ConversationItemProps): import("react").JSX.Element;
+export declare function ConversationItem({ conversation, isSelected, onClick }: ConversationItemProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ConversationItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationItem.d.ts","sourceRoot":"","sources":["../../src/components/ConversationItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,UAAU,qBAAqB;IAC7B,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,qBAAqB,+BAiE5F"}
+{"version":3,"file":"ConversationItem.d.ts","sourceRoot":"","sources":["../../src/components/ConversationItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,UAAU,qBAAqB;IAC7B,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAiE5F"}

package/dist/components/ConversationItem.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatContext } from "../context/ChatContext";
+export function ConversationItem({ conversation, isSelected, onClick }) {
+    var _a;
+    const { state } = useChatContext();
+    // Get the other participant (not the current user)
+    const otherParticipant = conversation.participants.find((p) => { var _a; return p.id !== ((_a = state.config) === null || _a === void 0 ? void 0 : _a.userId); });
+    const formatTime = (date) => {
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        if (days === 0) {
+            return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+        }
+        else if (days === 1) {
+            return "Yesterday";
+        }
+        else if (days < 7) {
+            return date.toLocaleDateString([], { weekday: "short" });
+        }
+        else {
+            return date.toLocaleDateString([], { month: "short", day: "numeric" });
+        }
+    };
+    return (_jsxs("div", { className: `flex items-center p-3 sm:p-4 cursor-pointer hover:bg-gray-50 active:bg-gray-100 transition-colors ${isSelected ? "bg-blue-50 border-r-2 border-blue-500" : ""}`, onClick: onClick, children: [_jsxs("div", { className: "relative flex-shrink-0", children: [_jsx("img", { src: (otherParticipant === null || otherParticipant === void 0 ? void 0 : otherParticipant.avatar) || "/placeholder.svg?height=48&width=48&query=user", alt: (otherParticipant === null || otherParticipant === void 0 ? void 0 : otherParticipant.name) || "User", className: "w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover" }), (otherParticipant === null || otherParticipant === void 0 ? void 0 : 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: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("h3", { className: "text-sm sm:text-base font-medium text-gray-900 truncate pr-2", children: (otherParticipant === null || otherParticipant === void 0 ? void 0 : otherParticipant.name) || "Unknown User" }), conversation.lastMessage && (_jsx("span", { className: "text-xs text-gray-500 flex-shrink-0", children: formatTime(conversation.lastMessage.timestamp) }))] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-xs sm:text-sm text-gray-600 truncate pr-2", children: ((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.content) || "No messages yet" }), conversation.unreadCount > 0 && (_jsx("span", { className: "inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-blue-500 rounded-full flex-shrink-0 min-w-[20px] h-5", children: conversation.unreadCount > 99 ? "99+" : conversation.unreadCount }))] })] })] }));
+}

package/dist/components/ConversationList.d.ts

@@ -3,6 +3,6 @@ interface ConversationListProps {
     selectedConversationId?: string;
     className?: string;
 }
-export declare function ConversationList({ onConversationSelect, selectedConversationId, className, }: ConversationListProps): import("react").JSX.Element;
+export declare function ConversationList({ onConversationSelect, selectedConversationId, className, }: ConversationListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ConversationList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../src/components/ConversationList.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,oBAAoB,EACpB,sBAAsB,EACtB,SAAc,GACf,EAAE,qBAAqB,+BAiCvB"}
+{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../src/components/ConversationList.tsx"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,oBAAoB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,oBAAoB,EACpB,sBAAsB,EACtB,SAAc,GACf,EAAE,qBAAqB,2CAiCvB"}

package/dist/components/ConversationList.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConversationList } from "../hooks/useConversationList";
+import { ConversationItem } from "./ConversationItem";
+export function ConversationList({ onConversationSelect, selectedConversationId, className = "", }) {
+    const { conversations, isLoading } = useConversationList();
+    if (isLoading) {
+        return (_jsx("div", { className: `flex flex-col space-y-2 p-3 sm:p-4 ${className}`, children: [...Array(5)].map((_, i) => (_jsx("div", { className: "animate-pulse", children: _jsxs("div", { className: "flex items-center space-x-3 p-3", children: [_jsx("div", { className: "w-10 h-10 sm:w-12 sm:h-12 bg-gray-300 rounded-full" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "h-4 bg-gray-300 rounded w-3/4 mb-2" }), _jsx("div", { className: "h-3 bg-gray-300 rounded w-1/2" })] })] }) }, i))) }));
+    }
+    return (_jsx("div", { className: `flex flex-col ${className}`, children: conversations.map((conversation) => (_jsx(ConversationItem, { conversation: conversation, isSelected: selectedConversationId === conversation.id, onClick: () => onConversationSelect === null || onConversationSelect === void 0 ? void 0 : onConversationSelect(conversation.id) }, conversation.id))) }));
+}

package/dist/components/DateDivider.d.ts

@@ -2,6 +2,6 @@ interface DateDividerProps {
     date: Date;
     customLabel?: string;
 }
-export declare function DateDivider({ date, customLabel }: DateDividerProps): import("react").JSX.Element;
+export declare function DateDivider({ date, customLabel }: DateDividerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DateDivider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateDivider.d.ts","sourceRoot":"","sources":["../../src/components/DateDivider.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,gBAAgB,+BA4BlE"}
+{"version":3,"file":"DateDivider.d.ts","sourceRoot":"","sources":["../../src/components/DateDivider.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CA4BlE"}

package/dist/components/DateDivider.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DateDivider({ date, customLabel }) {
+    const formatDate = (date) => {
+        if (customLabel)
+            return customLabel;
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+        const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        if (messageDate.getTime() === today.getTime()) {
+            return "Hôm nay";
+        }
+        else if (messageDate.getTime() === yesterday.getTime()) {
+            return "Hôm qua";
+        }
+        else {
+            return date.toLocaleDateString("vi-VN", {
+                weekday: "long",
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        }
+    };
+    return (_jsx("div", { className: "flex items-center justify-center my-3 sm:my-4", children: _jsx("div", { className: "bg-gray-100 text-gray-600 text-xs px-2 py-1 sm:px-3 sm:py-1 rounded-full", children: formatDate(date) }) }));
+}

package/dist/components/EmojiPicker.js

@@ -0,0 +1,191 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useState } from "react";
+import { X, Search, Clock, Smile, Heart, Hand, Car, Lightbulb, Coffee, Flag } from "lucide-react";
+const emojiCategories = {
+    recent: {
+        label: "Thường xuyên sử dụng",
+        icon: Clock,
+        emojis: ["😊", "😂", "❤️", "👍", "😢", "😮", "😡", "🎉", "👏"],
+    },
+    smileys: {
+        label: "Mặt cười & con người",
+        icon: Smile,
+        emojis: [
+            "😀",
+            "😃",
+            "😄",
+            "😁",
+            "😆",
+            "😅",
+            "😂",
+            "🤣",
+            "😊",
+            "😇",
+            "🙂",
+            "🙃",
+            "😉",
+            "😌",
+            "😍",
+            "🥰",
+            "😘",
+            "😗",
+            "😙",
+            "😚",
+            "😋",
+            "😛",
+            "😝",
+            "😜",
+            "🤪",
+            "🤨",
+            "🧐",
+            "🤓",
+            "😎",
+            "🤩",
+            "🥳",
+            "😏",
+            "😒",
+            "😞",
+            "😔",
+            "😟",
+            "😕",
+            "🙁",
+            "☹️",
+            "😣",
+            "😖",
+            "😫",
+            "😩",
+            "🥺",
+            "😢",
+            "😭",
+            "😤",
+            "😠",
+            "😡",
+            "🤬",
+            "🤯",
+            "😳",
+            "🥵",
+            "🥶",
+            "😱",
+            "😨",
+            "😰",
+            "😥",
+            "😓",
+            "🤗",
+            "🤔",
+            "🤭",
+            "🤫",
+            "🤥",
+            "😶",
+            "😐",
+            "😑",
+            "😬",
+            "🙄",
+            "😯",
+            "😦",
+            "😧",
+            "😮",
+            "😲",
+            "🥱",
+            "😴",
+            "🤤",
+            "😪",
+            "😵",
+            "🤐",
+        ],
+    },
+    gestures: {
+        label: "Cử chỉ",
+        icon: Hand,
+        emojis: [
+            "👍",
+            "👎",
+            "👌",
+            "✌️",
+            "🤞",
+            "🤟",
+            "🤘",
+            "🤙",
+            "👈",
+            "👉",
+            "👆",
+            "🖕",
+            "👇",
+            "☝️",
+            "👏",
+            "🙌",
+            "👐",
+            "🤲",
+            "🤝",
+            "🙏",
+        ],
+    },
+    hearts: {
+        label: "Trái tim",
+        icon: Heart,
+        emojis: ["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍", "🤎", "💔", "❣️", "💕", "💞", "💓", "💗", "💖", "💘", "💝"],
+    },
+    objects: {
+        label: "Đồ vật",
+        icon: Coffee,
+        emojis: ["📱", "💻", "⌨️", "🖥️", "🖨️", "📷", "📹", "🎥", "📞", "☎️", "📠", "📺", "📻", "🎵", "🎶", "🎤", "🎧", "📢"],
+    },
+    travel: {
+        label: "Du lịch",
+        icon: Car,
+        emojis: ["🚗", "🚕", "🚙", "🚌", "🚎", "🏎️", "🚓", "🚑", "🚒", "🚐", "🛻", "🚚", "🚛", "🚜", "🏍️", "🛵", "🚲", "🛴"],
+    },
+    activities: {
+        label: "Hoạt động",
+        icon: Lightbulb,
+        emojis: [
+            "⚽",
+            "🏀",
+            "🏈",
+            "⚾",
+            "🥎",
+            "🎾",
+            "🏐",
+            "🏉",
+            "🥏",
+            "🎱",
+            "🪀",
+            "🏓",
+            "🏸",
+            "🏒",
+            "🏑",
+            "🥍",
+            "🏏",
+            "🪃",
+        ],
+    },
+    flags: {
+        label: "Cờ",
+        icon: Flag,
+        emojis: ["🏳️", "🏴", "🏁", "🚩", "🏳️‍🌈", "🏳️‍⚧️", "🇺🇳", "🇻🇳", "🇺🇸", "🇬🇧", "🇫🇷", "🇩🇪", "🇯🇵", "🇰🇷", "🇨🇳", "🇮🇳"],
+    },
+};
+export const EmojiPicker = React.forwardRef(({ onEmojiSelect, onClose, isOpen = false, style }, ref) => {
+    const [activeCategory, setActiveCategory] = useState("recent");
+    const [searchTerm, setSearchTerm] = useState("");
+    if (!isOpen)
+        return null;
+    const handleEmojiClick = (emoji) => {
+        onEmojiSelect === null || onEmojiSelect === void 0 ? void 0 : onEmojiSelect(emoji);
+    };
+    const filteredEmojis = searchTerm
+        ? emojiCategories[activeCategory].emojis.filter((emoji) => 
+        // Simple search - in a real app you'd have emoji names/keywords
+        emoji.includes(searchTerm))
+        : emojiCategories[activeCategory].emojis;
+    return (_jsx("div", { ref: ref, className: "absolute bottom-full mb-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-full sm:max-w-xs md:w-80", style: style, children: _jsxs("div", { className: "p-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-2 pb-1 border-b border-gray-100", children: [Object.entries(emojiCategories).map(([key, category]) => {
+                            const Icon = category.icon;
+                            const isActive = activeCategory === key;
+                            return (_jsx("button", { onClick: () => setActiveCategory(key), className: `
+                    p-1.5 rounded-full transition-all duration-200 hover:bg-gray-100
+                    ${isActive ? "text-blue-500 bg-blue-50" : "text-gray-500"}
+                  `, title: category.label, children: _jsx(Icon, { className: "w-4 h-4" }) }, key));
+                        }), _jsx("button", { onClick: onClose, className: "p-1.5 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "relative mb-2", children: [_jsx(Search, { className: "absolute left-2 top-1/2 transform -translate-y-1/2 w-3 h-3 text-gray-400" }), _jsx("input", { type: "text", placeholder: "T\u00ECm ki\u1EBFm", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full pl-7 pr-3 py-1.5 text-xs bg-gray-50 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent" })] }), _jsx("div", { className: "mb-2", children: _jsx("h3", { className: "text-xs font-medium text-gray-900", children: emojiCategories[activeCategory].label }) }), _jsx("div", { className: "grid grid-cols-9 gap-0.5 max-h-48 overflow-y-auto", children: filteredEmojis.map((emoji, index) => (_jsx("button", { onClick: () => handleEmojiClick(emoji), className: "p-1.5 text-lg hover:bg-gray-100 rounded transition-all duration-200 hover:scale-110 active:scale-95", title: emoji, children: emoji }, index))) }), filteredEmojis.length === 0 && (_jsxs("div", { className: "text-center py-4 text-gray-500", children: [_jsx("div", { className: "text-lg mb-1", children: "\uD83D\uDD0D" }), _jsx("p", { className: "text-xs", children: "Kh\u00F4ng t\u00ECm th\u1EA5y emoji n\u00E0o" })] }))] }) }));
+});
+EmojiPicker.displayName = "EmojiPicker";

package/dist/components/ImageLightbox.d.ts

@@ -3,6 +3,6 @@ interface ImageLightboxProps {
     alt: string;
     onClose: () => void;
 }
-export declare function ImageLightbox({ src, alt, onClose }: ImageLightboxProps): import("react").JSX.Element;
+export declare function ImageLightbox({ src, alt, onClose }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ImageLightbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageLightbox.d.ts","sourceRoot":"","sources":["../../src/components/ImageLightbox.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA0BtE"}
+{"version":3,"file":"ImageLightbox.d.ts","sourceRoot":"","sources":["../../src/components/ImageLightbox.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CA0BtE"}

package/dist/components/ImageLightbox.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import Image from "next/image";
+export function ImageLightbox({ src, alt, onClose }) {
+    return (_jsxs("div", { className: "fixed inset-0 z-[9999] bg-black bg-opacity-80 flex items-center justify-center p-4", onClick: onClose, children: [_jsx("button", { onClick: onClose, className: "absolute top-4 right-4 text-white p-2 rounded-full bg-gray-800/50 hover:bg-gray-700/70 transition-colors z-50", "aria-label": "Close image", children: _jsx(X, { className: "w-6 h-6" }) }), _jsx("div", { className: "relative max-w-full max-h-full", onClick: (e) => e.stopPropagation(), children: _jsx(Image, { src: src || "/placeholder.svg", alt: alt, width: 1200, height: 800, style: { width: "auto", height: "auto", maxWidth: "90vw", maxHeight: "90vh" }, className: "rounded-lg shadow-xl object-contain", priority // Load immediately
+                    : true }) })] }));
+}

package/dist/components/ImagePreviewModal.d.ts

@@ -7,6 +7,6 @@ interface ImagePreviewModalProps {
     initialImageId: string;
     onClose: () => void;
 }
-export declare function ImagePreviewModal({ images, initialImageId, onClose }: ImagePreviewModalProps): import("react").JSX.Element | null;
+export declare function ImagePreviewModal({ images, initialImageId, onClose }: ImagePreviewModalProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=ImagePreviewModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImagePreviewModal.d.ts","sourceRoot":"","sources":["../../src/components/ImagePreviewModal.tsx"],"names":[],"mappings":"AAOA,UAAU,sBAAsB;IAC9B,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;IACH,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,sBAAsB,sCAmH5F"}
+{"version":3,"file":"ImagePreviewModal.d.ts","sourceRoot":"","sources":["../../src/components/ImagePreviewModal.tsx"],"names":[],"mappings":"AAOA,UAAU,sBAAsB;IAC9B,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,EAAE,CAAA;IACH,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,sBAAsB,kDAmH5F"}

package/dist/components/ImagePreviewModal.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+export function ImagePreviewModal({ images, initialImageId, onClose }) {
+    // Find the initial index based on initialImageId
+    const initialIndex = images.findIndex((img) => img.id === initialImageId);
+    const [currentImageIndex, setCurrentImageIndex] = useState(initialIndex !== -1 ? initialIndex : 0);
+    // Ensure currentImageIndex is valid if initialImageId wasn't found or images array is empty
+    useEffect(() => {
+        if (initialIndex === -1 && images.length > 0) {
+            setCurrentImageIndex(0);
+        }
+        else if (images.length === 0) {
+            onClose(); // Close if no images are provided
+        }
+    }, [initialImageId, images, initialIndex, onClose]);
+    const currentImage = images[currentImageIndex];
+    const handlePrev = useCallback(() => {
+        setCurrentImageIndex((prevIndex) => Math.max(0, prevIndex - 1));
+    }, []);
+    const handleNext = useCallback(() => {
+        setCurrentImageIndex((prevIndex) => Math.min(images.length - 1, prevIndex + 1));
+    }, [images.length]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "Escape") {
+            onClose();
+        }
+        else if (event.key === "ArrowLeft") {
+            handlePrev();
+        }
+        else if (event.key === "ArrowRight") {
+            handleNext();
+        }
+    }, [onClose, handlePrev, handleNext]);
+    // Add and remove keyboard event listener
+    useEffect(() => {
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    if (!currentImage) {
+        return null; // Or render a loading/error state
+    }
+    const isFirstImage = currentImageIndex === 0;
+    const isLastImage = currentImageIndex === images.length - 1;
+    return (_jsxs("div", { className: "fixed inset-0 z-[9999] bg-black bg-opacity-90 flex items-center justify-center p-4 sm:p-8", onClick: onClose, children: [_jsx("button", { onClick: onClose, className: "absolute top-4 right-4 text-white p-2 rounded-full bg-gray-800/50 hover:bg-gray-700/70 transition-colors z-50", "aria-label": "\u0110\u00F3ng", title: "\u0110\u00F3ng (Esc)", children: _jsx(X, { className: "w-6 h-6" }) }), _jsxs("div", { className: "relative flex items-center justify-center w-full h-full max-w-screen-xl max-h-screen-xl", onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: handlePrev, disabled: isFirstImage, className: `absolute left-2 sm:left-4 p-3 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/70 transition-colors z-40
+            ${isFirstImage ? "opacity-50 cursor-not-allowed" : ""}`, "aria-label": "\u1EA2nh tr\u01B0\u1EDBc", title: "\u1EA2nh tr\u01B0\u1EDBc (M\u0169i t\u00EAn tr\u00E1i)", children: _jsx(ChevronLeft, { className: "w-6 h-6 sm:w-8 sm:h-8" }) }), _jsx("div", { className: "relative w-full h-full flex items-center justify-center", children: _jsx(Image, { src: currentImage.url || "/placeholder.svg", alt: currentImage.name || "Xem trước hình ảnh", layout: "fill" // Use fill to make it responsive within its parent
+                            , objectFit: "contain" // Ensure the image fits within the container without cropping
+                            , className: "rounded-lg shadow-xl", priority // Load immediately for better UX
+                            : true }) }), _jsx("button", { onClick: handleNext, disabled: isLastImage, className: `absolute right-2 sm:right-4 p-3 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/70 transition-colors z-40
+            ${isLastImage ? "opacity-50 cursor-not-allowed" : ""}`, "aria-label": "\u1EA2nh ti\u1EBFp theo", title: "\u1EA2nh ti\u1EBFp theo (M\u0169i t\u00EAn ph\u1EA3i)", children: _jsx(ChevronRight, { className: "w-6 h-6 sm:w-8 sm:h-8" }) })] }), _jsxs("div", { className: "absolute bottom-4 text-white text-sm sm:text-base bg-black/50 px-4 py-2 rounded-full", children: [currentImage.name || "Hình ảnh", " (", currentImageIndex + 1, " / ", images.length, ")"] })] }));
+}

package/dist/components/MessageItem.d.ts

@@ -1,3 +1,3 @@
 import type { MessageItemProps } from "../types";
-export declare function MessageItem({ message, isGrouped, onImageClick }: MessageItemProps): import("react").JSX.Element;
+export declare function MessageItem({ message, isGrouped, onImageClick }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MessageItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../src/components/MessageItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAkB,MAAM,UAAU,CAAA;AAIhE,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,gBAAgB,+BAwLjF"}
+{"version":3,"file":"MessageItem.d.ts","sourceRoot":"","sources":["../../src/components/MessageItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAkB,MAAM,UAAU,CAAA;AAIhE,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,gBAAgB,2CAwLjF"}