@droppii-org/chat-sdk 0.0.1

package/dist/components/ChatInputWithCustomIcon.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+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): React.JSX.Element;
+export {};
+//# sourceMappingURL=ChatInputWithCustomIcon.d.ts.map

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

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

package/dist/components/ChatInputWithCustomIcon.jsx

@@ -0,0 +1,167 @@
+"use client";
+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 (<div className={`bg-white border-t border-gray-200 p-3 sm:p-4 ${className}`}>
+      {/* Main Input Container */}
+      <div className="bg-gray-50 rounded-2xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200">
+        {/* 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} 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",
+        }}/>
+            </div>
+
+            {/* Send Button or Quick React */}
+            {message.trim() ? (<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">
+                <Send className="w-4 h-4"/>
+              </button>) : (<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">
+                <ThumbsUp className="w-4 h-4"/>
+              </button>)}
+          </form>
+        </div>
+
+        {/* Action Icons Row */}
+        <div className="px-4 pb-3 border-t border-gray-100">
+          <div className="flex items-center justify-between space-x-1">
+            {/* Text Style */}
+            <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">
+              <Type className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* Emoji */}
+            <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">
+              <Smile className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* Sticker */}
+            <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">
+              <Sticker className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* Image Upload */}
+            <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">
+              <ImageIcon className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* File Attachment */}
+            <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">
+              <Paperclip className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* Contact Sharing */}
+            <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">
+              <User className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* Record Audio */}
+            <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">
+              <Mic className="w-4 h-4 sm:w-5 sm:h-5"/>
+            </button>
+
+            {/* Voice Message */}
+            <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">
+              <VoiceWaveIcon className="w-4 h-4 sm:w-5 sm:h-5" animated={showVoiceWave}/>
+            </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>Recording...</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"/>
+      <input ref={imageInputRef} type="file" onChange={handleImageChange} className="hidden" accept="image/*"/>
+    </div>);
+}

package/dist/components/ChatLayout.d.ts

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

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

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

package/dist/components/ChatLayout.jsx

@@ -0,0 +1,122 @@
+"use client";
+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(null);
+    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 (<div className={`flex h-screen bg-white ${className}`} ref={swipeRef}>
+      {/* Mobile Sidebar Overlay */}
+      {showSidebar && (<div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={() => setShowSidebar(false)}/>)}
+
+      {/* Sidebar - Separate scroll container */}
+      <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
+      `}>
+        {/* Sidebar Header - Fixed */}
+        <div className="flex-shrink-0 p-3 sm:p-4 border-b border-gray-200 bg-white">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-gray-900">Messages</h2>
+            <div className="flex items-center space-x-2">
+              {!state.isConnected && (<div className="flex items-center text-xs text-gray-500">
+                  <div className="w-2 h-2 bg-gray-400 rounded-full mr-2"></div>
+                  <span className="hidden sm:inline">Demo Mode</span>
+                </div>)}
+              {/* Mobile close button */}
+              <button onClick={() => setShowSidebar(false)} className="md:hidden p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Conversation List - Scrollable */}
+        <div className="flex-1 overflow-y-auto">
+          <ConversationList selectedConversationId={selectedConversationId || undefined} onConversationSelect={handleConversationSelect} className="h-full"/>
+        </div>
+      </div>
+
+      {/* Main Chat Area - Separate scroll container */}
+      <div className={`
+        flex-1 flex flex-col relative h-full
+        ${selectedConversationId ? "flex" : "hidden md:flex"}
+      `}>
+        {selectedConversationId ? (<>
+            {/* Swipe indicator for mobile */}
+            <div className="md:hidden absolute top-2 left-2 z-10 pointer-events-none">
+              <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">
+                ← Swipe to go back
+              </div>
+            </div>
+
+            {/* Chat Header - Fixed */}
+            <div className="flex-shrink-0">
+              <ChatHeader conversationId={selectedConversationId} onBackClick={handleBackToList} onMenuClick={() => setShowSidebar(true)}/>
+            </div>
+
+            {/* Message List - Scrollable */}
+            <div className="flex-1 min-h-0">
+              {" "}
+              {/* Added min-h-0 here */}
+              <MessageList messages={messagesHook.messages} currentUserId={((_a = state.config) === null || _a === void 0 ? void 0 : _a.userId) || ""} conversationId={selectedConversationId} className="h-full"/>
+            </div>
+
+            {/* Chat Input - Fixed */}
+            <div className="flex-shrink-0">
+              <ChatInput />
+            </div>
+          </>) : (<div className="flex-1 flex items-center justify-center text-gray-500 p-4">
+            <div className="text-center max-w-sm">
+              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <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"/>
+                </svg>
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 mb-2">Select a conversation</h3>
+              <p className="text-gray-500 text-sm sm:text-base">
+                Choose a conversation from the sidebar to start messaging
+              </p>
+              {!state.isConnected && (<p className="text-xs text-gray-400 mt-2">Running in demo mode - WebSocket disabled</p>)}
+              <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">
+                View Conversations
+              </button>
+            </div>
+          </div>)}
+      </div>
+    </div>);
+}

package/dist/components/ConversationItem.d.ts

@@ -0,0 +1,9 @@
+import type { Conversation } from "../types";
+interface ConversationItemProps {
+    conversation: Conversation;
+    isSelected?: boolean;
+    onClick?: () => void;
+}
+export declare function ConversationItem({ conversation, isSelected, onClick }: ConversationItemProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ConversationItem.d.ts.map

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

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

package/dist/components/ConversationItem.jsx

@@ -0,0 +1,51 @@
+"use client";
+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 (<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}>
+      <div className="relative flex-shrink-0">
+        <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" && (<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">
+        <div className="flex items-center justify-between mb-1">
+          <h3 className="text-sm sm:text-base font-medium text-gray-900 truncate pr-2">
+            {(otherParticipant === null || otherParticipant === void 0 ? void 0 : otherParticipant.name) || "Unknown User"}
+          </h3>
+          {conversation.lastMessage && (<span className="text-xs text-gray-500 flex-shrink-0">
+              {formatTime(conversation.lastMessage.timestamp)}
+            </span>)}
+        </div>
+
+        <div className="flex items-center justify-between">
+          <p className="text-xs sm:text-sm text-gray-600 truncate pr-2">
+            {((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.content) || "No messages yet"}
+          </p>
+          {conversation.unreadCount > 0 && (<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">
+              {conversation.unreadCount > 99 ? "99+" : conversation.unreadCount}
+            </span>)}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/ConversationList.d.ts

@@ -0,0 +1,8 @@
+interface ConversationListProps {
+    onConversationSelect?: (conversationId: string) => void;
+    selectedConversationId?: string;
+    className?: string;
+}
+export declare function ConversationList({ onConversationSelect, selectedConversationId, className, }: ConversationListProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ConversationList.d.ts.map

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

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

package/dist/components/ConversationList.jsx

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

package/dist/components/DateDivider.d.ts

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

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

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

package/dist/components/DateDivider.jsx

@@ -0,0 +1,28 @@
+"use client";
+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 (<div className="flex items-center justify-center my-3 sm:my-4">
+      <div className="bg-gray-100 text-gray-600 text-xs px-2 py-1 sm:px-3 sm:py-1 rounded-full">{formatDate(date)}</div>
+    </div>);
+}

package/dist/components/EmojiPicker.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../src/components/EmojiPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAsKrD,eAAO,MAAM,WAAW,sGAiGvB,CAAA"}