@droppii-org/chat-sdk 0.0.1

package/dist/components/EmojiPicker.jsx

@@ -0,0 +1,229 @@
+"use client";
+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 (<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} // Apply dynamic style here
+    >
+        <div className="p-2">
+          {/* Category Icons Row - Compact */}
+          <div className="flex items-center justify-between mb-2 pb-1 border-b border-gray-100">
+            {Object.entries(emojiCategories).map(([key, category]) => {
+            const Icon = category.icon;
+            const isActive = activeCategory === key;
+            return (<button key={key} 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}>
+                  <Icon className="w-4 h-4"/>
+                </button>);
+        })}
+
+            {/* Close button */}
+            <button onClick={onClose} className="p-1.5 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
+              <X className="w-4 h-4"/>
+            </button>
+          </div>
+
+          {/* Search Bar - Compact */}
+          <div className="relative mb-2">
+            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3 h-3 text-gray-400"/>
+            <input type="text" placeholder="Tìm kiếm" 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"/>
+          </div>
+
+          {/* Category Title - Compact */}
+          <div className="mb-2">
+            <h3 className="text-xs font-medium text-gray-900">{emojiCategories[activeCategory].label}</h3>
+          </div>
+
+          {/* Emoji Grid - Compact */}
+          <div className="grid grid-cols-9 gap-0.5 max-h-48 overflow-y-auto">
+            {filteredEmojis.map((emoji, index) => (<button key={index} 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}>
+                {emoji}
+              </button>))}
+          </div>
+
+          {/* Empty state */}
+          {filteredEmojis.length === 0 && (<div className="text-center py-4 text-gray-500">
+              <div className="text-lg mb-1">🔍</div>
+              <p className="text-xs">Không tìm thấy emoji nào</p>
+            </div>)}
+        </div>
+      </div>);
+});
+EmojiPicker.displayName = "EmojiPicker";

package/dist/components/ImageLightbox.d.ts

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

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

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

package/dist/components/ImageLightbox.jsx

@@ -0,0 +1,16 @@
+"use client";
+import { X } from "lucide-react";
+import Image from "next/image";
+export function ImageLightbox({ src, alt, onClose }) {
+    return (<div className="fixed inset-0 z-[9999] bg-black bg-opacity-80 flex items-center justify-center p-4" onClick={onClose}>
+      <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">
+        <X className="w-6 h-6"/>
+      </button>
+      <div className="relative max-w-full max-h-full" onClick={(e) => e.stopPropagation()}>
+        <Image src={src || "/placeholder.svg"} alt={alt} width={1200} // Max width for lightbox image
+     height={800} // Max height for lightbox image
+     style={{ width: "auto", height: "auto", maxWidth: "90vw", maxHeight: "90vh" }} className="rounded-lg shadow-xl object-contain" priority // Load immediately
+    />
+      </div>
+    </div>);
+}

package/dist/components/ImagePreviewModal.d.ts

@@ -0,0 +1,12 @@
+interface ImagePreviewModalProps {
+    images: {
+        id: string;
+        url: string;
+        name?: string;
+    }[];
+    initialImageId: string;
+    onClose: () => void;
+}
+export declare function ImagePreviewModal({ images, initialImageId, onClose }: ImagePreviewModalProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ImagePreviewModal.d.ts.map

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

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

package/dist/components/ImagePreviewModal.jsx

@@ -0,0 +1,84 @@
+"use client";
+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 (<div className="fixed inset-0 z-[9999] bg-black bg-opacity-90 flex items-center justify-center p-4 sm:p-8" onClick={onClose} // Close when clicking on the overlay
+    >
+      {/* Close Button */}
+      <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="Đóng" title="Đóng (Esc)">
+        <X className="w-6 h-6"/>
+      </button>
+
+      {/* Image Container */}
+      <div className="relative flex items-center justify-center w-full h-full max-w-screen-xl max-h-screen-xl" onClick={(e) => e.stopPropagation()} // Prevent closing when clicking on the image itself
+    >
+        {/* Previous Button */}
+        <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="Ảnh trước" title="Ảnh trước (Mũi tên trái)">
+          <ChevronLeft className="w-6 h-6 sm:w-8 sm:h-8"/>
+        </button>
+
+        {/* Image Display */}
+        <div className="relative w-full h-full flex items-center justify-center">
+          <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
+    />
+        </div>
+
+        {/* Next Button */}
+        <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="Ảnh tiếp theo" title="Ảnh tiếp theo (Mũi tên phải)">
+          <ChevronRight className="w-6 h-6 sm:w-8 sm:h-8"/>
+        </button>
+      </div>
+
+      {/* Image Name/Counter (Optional) */}
+      <div className="absolute bottom-4 text-white text-sm sm:text-base bg-black/50 px-4 py-2 rounded-full">
+        {currentImage.name || "Hình ảnh"} ({currentImageIndex + 1} / {images.length})
+      </div>
+    </div>);
+}

package/dist/components/MessageItem.d.ts

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

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

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

package/dist/components/MessageItem.jsx

@@ -0,0 +1,99 @@
+"use client";
+import { useChatContext } from "../context/ChatContext";
+import { FileText, Download } from "lucide-react";
+import Image from "next/image";
+export function MessageItem({ message, isGrouped, onImageClick }) {
+    const { state } = useChatContext();
+    const isOwnMessage = message.isMine;
+    const sender = state.users[message.senderId];
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    };
+    const renderTextMessage = (msg) => {
+        const content = msg.text || "";
+        // Simple regex to detect URLs and make them clickable
+        const linkRegex = /(https?:\/\/[^\s]+)/g;
+        const parts = content.split(linkRegex);
+        return (<div className={`px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words ${isOwnMessage ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-900"} ${isGrouped ? (isOwnMessage ? "rounded-tr-md" : "rounded-tl-md") : ""}`}>
+        <p className="text-sm sm:text-base whitespace-pre-wrap">
+          {parts.map((part, index) => linkRegex.test(part) ? (<a key={index} href={part} target="_blank" rel="noopener noreferrer" className="underline text-blue-200 hover:text-blue-100">
+                {part}
+              </a>) : (part))}
+        </p>
+      </div>);
+    };
+    const renderMediaMessage = (msg) => {
+        var _a, _b;
+        const imageAttachments = ((_a = msg.attachments) === null || _a === void 0 ? void 0 : _a.filter((att) => att.type === "image")) || [];
+        return (<div className={`flex flex-col gap-2 ${isOwnMessage ? "items-end" : "items-start"}`}>
+        {msg.text && (<div className={`px-3 py-2 sm:px-4 sm:py-2 rounded-2xl max-w-full break-words ${isOwnMessage ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-900"} ${isGrouped ? (isOwnMessage ? "rounded-tr-md" : "rounded-tl-md") : ""}`}>
+            <p className="text-sm sm:text-base whitespace-pre-wrap">{msg.text}</p>
+          </div>)}
+        <div className={`grid gap-2 ${imageAttachments.length > 1 ? "grid-cols-2" : "grid-cols-1"}`}>
+          {(_b = msg.attachments) === null || _b === void 0 ? void 0 : _b.map((attachment, idx) => (<div key={idx} className={`relative rounded-lg overflow-hidden ${isOwnMessage ? "bg-blue-100" : "bg-gray-100"}`}>
+              {attachment.type === "image" ? (<>
+                  <Image src={attachment.url || "/placeholder.svg"} alt={attachment.name || "Attached image"} width={200} height={150} className="w-full h-auto object-cover cursor-pointer" onClick={() => onImageClick === null || onImageClick === void 0 ? void 0 : onImageClick(attachment.id, imageAttachments.map((img) => ({ id: img.id, url: img.url, name: img.name })))}/>
+                  <div className="absolute inset-0 bg-black/10 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                    <span className="text-white text-xs font-medium p-1 rounded bg-black/50">Xem ảnh</span>
+                  </div>
+                </>) : (<a href={attachment.url} download={attachment.name} className="flex items-center p-3 space-x-2 text-gray-800 hover:bg-gray-200 transition-colors">
+                  <FileText className="w-5 h-5 flex-shrink-0"/>
+                  <div className="flex-1 min-w-0">
+                    <span className="block text-sm font-medium truncate">{attachment.name || "File"}</span>
+                    <span className="block text-xs text-gray-500">
+                      {attachment.size ? formatFileSize(attachment.size) : "Unknown size"}
+                    </span>
+                  </div>
+                  <Download className="w-4 h-4 flex-shrink-0 text-gray-600"/>
+                </a>)}
+            </div>))}
+        </div>
+      </div>);
+    };
+    const renderPromoMessage = (msg) => {
+        if (!msg.promoData)
+            return null;
+        const { imageUrl, title, description, buttonText, buttonUrl } = msg.promoData;
+        return (<div className="w-full max-w-xs mx-auto my-2 bg-white shadow-md rounded-lg overflow-hidden border border-gray-200">
+        <div className="relative w-full h-32 bg-gray-200">
+          <Image src={imageUrl || "/placeholder.svg"} alt={title} fill style={{ objectFit: "cover" }} className="rounded-t-lg"/>
+        </div>
+        <div className="p-4">
+          <h3 className="text-base font-semibold text-gray-900 mb-1">{title}</h3>
+          <p className="text-sm text-gray-600 mb-3">{description}</p>
+          <a href={buttonUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors">
+            {buttonText}
+          </a>
+        </div>
+      </div>);
+    };
+    return (<div className={`flex ${isOwnMessage ? "justify-end" : "justify-start"} ${isGrouped ? "mt-0.5 sm:mt-1" : "mt-3 sm:mt-4"}`}>
+      <div className={`flex items-end space-x-2 max-w-[85%] sm:max-w-xs lg:max-w-md ${isOwnMessage ? "flex-row-reverse space-x-reverse" : ""}`} style={message.type === "promo" ? { maxWidth: "none" } : {}} // Allow promo messages to take full width if needed
+    >
+        {message.type !== "promo" && !isOwnMessage && !isGrouped && (<img src={(sender === null || sender === void 0 ? void 0 : sender.avatar) || "/placeholder.svg?height=32&width=32&query=user"} alt={(sender === null || sender === void 0 ? void 0 : sender.name) || "User"} className="w-6 h-6 sm:w-8 sm:h-8 rounded-full object-cover flex-shrink-0"/>)}
+
+        {message.type !== "promo" && !isOwnMessage && isGrouped && (<div className="w-6 sm:w-8 flex-shrink-0"/> // Spacer for grouped messages
+        )}
+
+        <div className={`flex flex-col ${isOwnMessage ? "items-end" : "items-start"}`}>
+          {message.type !== "promo" && !isGrouped && !isOwnMessage && (<span className="text-xs text-gray-500 mb-1 px-3">{(sender === null || sender === void 0 ? void 0 : sender.name) || "Unknown User"}</span>)}
+
+          {message.type === "text" && renderTextMessage(message)}
+          {message.type === "media" && renderMediaMessage(message)}
+          {message.type === "promo" && renderPromoMessage(message)}
+
+          {message.type !== "promo" && (<div className={`flex items-center space-x-1 mt-1 px-2 ${isOwnMessage ? "flex-row-reverse space-x-reverse" : ""}`}>
+              {/* Status icon logic (from previous implementation) */}
+              {isOwnMessage && (<svg className="w-3 h-3 sm:w-4 sm:h-4 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                </svg>)}
+            </div>)}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/MessageItemDemo.d.ts

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

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

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

package/dist/components/MessageItemDemo.jsx

@@ -0,0 +1,179 @@
+"use client";
+import { MessageItem } from "./MessageItem";
+import { DateDivider } from "./DateDivider";
+export function MessageItemDemo() {
+    // Demo messages showcasing all message types
+    const demoMessages = [
+        // Text message from other user
+        {
+            id: "demo-1",
+            senderId: "user-2",
+            type: "text",
+            text: "Hey! How are you doing today? 😊",
+            createdAt: new Date(Date.now() - 3600000).toISOString(),
+            isMine: false,
+        },
+        // Text message from current user
+        {
+            id: "demo-2",
+            senderId: "current-user",
+            type: "text",
+            text: "I'm doing great! Thanks for asking. Check out this link: https://example.com",
+            createdAt: new Date(Date.now() - 3000000).toISOString(),
+            isMine: true,
+        },
+        // Media message with text and image from other user
+        {
+            id: "demo-3",
+            senderId: "user-2",
+            type: "media",
+            text: "Look at this beautiful sunset I captured! 📸",
+            attachments: [
+                {
+                    id: "demo-3-1",
+                    type: "image",
+                    url: "/placeholder.svg?height=300&width=400",
+                    name: "sunset.jpg",
+                    size: 245760,
+                },
+            ],
+            createdAt: new Date(Date.now() - 2400000).toISOString(),
+            isMine: false,
+        },
+        // Media message with multiple images from current user
+        {
+            id: "demo-4",
+            senderId: "current-user",
+            type: "media",
+            text: "My vacation photos! 🏖️",
+            attachments: [
+                {
+                    id: "demo-4-1",
+                    type: "image",
+                    url: "/placeholder.svg?height=200&width=300",
+                    name: "beach1.jpg",
+                    size: 180000,
+                },
+                {
+                    id: "demo-4-2",
+                    type: "image",
+                    url: "/placeholder.svg?height=200&width=300",
+                    name: "beach2.jpg",
+                    size: 195000,
+                },
+            ],
+            createdAt: new Date(Date.now() - 1800000).toISOString(),
+            isMine: true,
+        },
+        // Media message with file from other user
+        {
+            id: "demo-5",
+            senderId: "user-2",
+            type: "media",
+            text: "Here's the document you requested",
+            attachments: [
+                {
+                    id: "demo-5-1",
+                    type: "file",
+                    url: "/placeholder.svg?height=200&width=200",
+                    name: "project-proposal.pdf",
+                    size: 1024000,
+                },
+            ],
+            createdAt: new Date(Date.now() - 1200000).toISOString(),
+            isMine: false,
+        },
+        // Media message with mixed attachments from current user
+        {
+            id: "demo-6",
+            senderId: "current-user",
+            type: "media",
+            text: "Screenshot and the related document",
+            attachments: [
+                {
+                    id: "demo-6-1",
+                    type: "image",
+                    url: "/placeholder.svg?height=400&width=300",
+                    name: "screenshot.png",
+                    size: 156000,
+                },
+                {
+                    id: "demo-6-2",
+                    type: "file",
+                    url: "/placeholder.svg?height=200&width=200",
+                    name: "instructions.docx",
+                    size: 45000,
+                },
+            ],
+            createdAt: new Date(Date.now() - 600000).toISOString(),
+            isMine: true,
+        },
+        // Promotional message (system message)
+        {
+            id: "demo-7",
+            senderId: "system",
+            type: "promo",
+            promoData: {
+                imageUrl: "/placeholder.svg?height=200&width=400",
+                title: "Giảm 30% đơn hàng hôm nay!",
+                description: "Khuyến mãi đặc biệt chỉ trong hôm nay. Đừng bỏ lỡ cơ hội tiết kiệm!",
+                buttonText: "Đặt ngay",
+                buttonUrl: "https://example.com/sale",
+            },
+            createdAt: new Date(Date.now() - 300000).toISOString(),
+            isMine: false,
+        },
+        // Recent text message from other user
+        {
+            id: "demo-8",
+            senderId: "user-2",
+            type: "text",
+            text: "Thanks for sharing! Those photos are amazing 🤩",
+            createdAt: new Date(Date.now() - 60000).toISOString(),
+            isMine: false,
+        },
+    ];
+    const groupMessagesByDate = () => {
+        const groups = [];
+        let currentDate = "";
+        let currentGroup = [];
+        demoMessages.forEach((message) => {
+            const messageDate = new Date(message.createdAt).toDateString();
+            if (messageDate !== currentDate) {
+                if (currentGroup.length > 0) {
+                    groups.push({ date: currentDate, messages: currentGroup });
+                }
+                currentDate = messageDate;
+                currentGroup = [message];
+            }
+            else {
+                currentGroup.push(message);
+            }
+        });
+        if (currentGroup.length > 0) {
+            groups.push({ date: currentDate, messages: currentGroup });
+        }
+        return groups;
+    };
+    const messageGroups = groupMessagesByDate();
+    return (<div className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+      <div className="bg-gray-50 p-4 border-b">
+        <h2 className="text-lg font-semibold text-gray-900">MessageItem Demo</h2>
+        <p className="text-sm text-gray-600">Showcasing all message types: text, media, and promotional</p>
+      </div>
+
+      <div className="h-96 overflow-y-auto p-4 space-y-4">
+        {messageGroups.map((group, groupIndex) => (<div key={group.date}>
+            <DateDivider date={new Date(group.date)}/>
+            <div className="space-y-2">
+              {group.messages.map((message, messageIndex) => {
+                const prevMessage = messageIndex > 0 ? group.messages[messageIndex - 1] : null;
+                const isGrouped = (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.senderId) === message.senderId &&
+                    new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() < 300000; // 5 minutes
+                return <MessageItem key={message.id} message={message} isGrouped={isGrouped}/>;
+            })}
+            </div>
+          </div>))}
+      </div>
+    </div>);
+}