@droppii-org/chat-sdk 0.0.4 → 0.0.5

package/dist/components/MessageItem.js

@@ -1,38 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsx("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") : ""}`, children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: parts.map((part, index) => linkRegex.test(part) ? (_jsx("a", { href: part, target: "_blank", rel: "noopener noreferrer", className: "underline text-blue-200 hover:text-blue-100", children: part }, index)) : (part)) }) }));
-    };
-    const renderMediaMessage = (msg) => {
-        var _a, _b;
-        const imageAttachments = ((_a = msg.attachments) === null || _a === void 0 ? void 0 : _a.filter((att) => att.type === "image")) || [];
-        return (_jsxs("div", { className: `flex flex-col gap-2 ${isOwnMessage ? "items-end" : "items-start"}`, children: [msg.text && (_jsx("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") : ""}`, children: _jsx("p", { className: "text-sm sm:text-base whitespace-pre-wrap", children: msg.text }) })), _jsx("div", { className: `grid gap-2 ${imageAttachments.length > 1 ? "grid-cols-2" : "grid-cols-1"}`, children: (_b = msg.attachments) === null || _b === void 0 ? void 0 : _b.map((attachment, idx) => (_jsx("div", { className: `relative rounded-lg overflow-hidden ${isOwnMessage ? "bg-blue-100" : "bg-gray-100"}`, children: attachment.type === "image" ? (_jsxs(_Fragment, { children: [_jsx(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 }))) }), _jsx("div", { className: "absolute inset-0 bg-black/10 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity", children: _jsx("span", { className: "text-white text-xs font-medium p-1 rounded bg-black/50", children: "Xem \u1EA3nh" }) })] })) : (_jsxs("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", children: [_jsx(FileText, { className: "w-5 h-5 flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block text-sm font-medium truncate", children: attachment.name || "File" }), _jsx("span", { className: "block text-xs text-gray-500", children: attachment.size ? formatFileSize(attachment.size) : "Unknown size" })] }), _jsx(Download, { className: "w-4 h-4 flex-shrink-0 text-gray-600" })] })) }, idx))) })] }));
-    };
-    const renderPromoMessage = (msg) => {
-        if (!msg.promoData)
-            return null;
-        const { imageUrl, title, description, buttonText, buttonUrl } = msg.promoData;
-        return (_jsxs("div", { className: "w-full max-w-xs mx-auto my-2 bg-white shadow-md rounded-lg overflow-hidden border border-gray-200", children: [_jsx("div", { className: "relative w-full h-32 bg-gray-200", children: _jsx(Image, { src: imageUrl || "/placeholder.svg", alt: title, fill: true, style: { objectFit: "cover" }, className: "rounded-t-lg" }) }), _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-base font-semibold text-gray-900 mb-1", children: title }), _jsx("p", { className: "text-sm text-gray-600 mb-3", children: description }), _jsx("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", children: buttonText })] })] }));
-    };
-    return (_jsx("div", { className: `flex ${isOwnMessage ? "justify-end" : "justify-start"} ${isGrouped ? "mt-0.5 sm:mt-1" : "mt-3 sm:mt-4"}`, children: _jsxs("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" } : {}, children: [message.type !== "promo" && !isOwnMessage && !isGrouped && (_jsx("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 && (_jsx("div", { className: "w-6 sm:w-8 flex-shrink-0" }) // Spacer for grouped messages
-                ), _jsxs("div", { className: `flex flex-col ${isOwnMessage ? "items-end" : "items-start"}`, children: [message.type !== "promo" && !isGrouped && !isOwnMessage && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: (sender === null || sender === void 0 ? void 0 : sender.name) || "Unknown User" })), message.type === "text" && renderTextMessage(message), message.type === "media" && renderMediaMessage(message), message.type === "promo" && renderPromoMessage(message), message.type !== "promo" && (_jsx("div", { className: `flex items-center space-x-1 mt-1 px-2 ${isOwnMessage ? "flex-row-reverse space-x-reverse" : ""}`, children: isOwnMessage && (_jsx("svg", { className: "w-3 h-3 sm:w-4 sm:h-4 text-blue-500", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) })) }))] })] }) }));
-}

package/dist/components/MessageItem.jsx

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

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

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

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

package/dist/components/MessageItemDemo.js

@@ -1,166 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsxs("div", { className: "max-w-2xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden", children: [_jsxs("div", { className: "bg-gray-50 p-4 border-b", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "MessageItem Demo" }), _jsx("p", { className: "text-sm text-gray-600", children: "Showcasing all message types: text, media, and promotional" })] }), _jsx("div", { className: "h-96 overflow-y-auto p-4 space-y-4", children: messageGroups.map((group, groupIndex) => (_jsxs("div", { children: [_jsx(DateDivider, { date: new Date(group.date) }), _jsx("div", { className: "space-y-2", children: 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 _jsx(MessageItem, { message: message, isGrouped: isGrouped }, message.id);
-                            }) })] }, group.date))) })] }));
-}

package/dist/components/MessageItemDemo.jsx

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

package/dist/components/MessageList.d.ts

@@ -1,15 +0,0 @@
-import type { Message } from "../types";
-interface MessageListProps {
-    messages: Message[];
-    isLoadingMore?: boolean;
-    onLoadMore?: () => void;
-    hasMore?: boolean;
-    currentUserId: string;
-    conversationId?: string;
-    className?: string;
-    onSwipeBack?: () => void;
-}
-export declare function MessageList({ messages, // Add default empty array
-isLoadingMore, onLoadMore, hasMore, currentUserId, conversationId, className, onSwipeBack, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=MessageList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAkB,OAAO,EAAE,MAAM,UAAU,CAAA;AAGvD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAa,EAAE,0BAA0B;AACzC,aAAqB,EACrB,UAAU,EACV,OAAe,EACf,aAAa,EACb,cAAc,EACd,SAAc,EACd,WAAW,GACZ,EAAE,gBAAgB,2CA8WlB"}