@myrjfa/ui 0.3.1

package/dist/chat/MessageBubble.js

@@ -0,0 +1,425 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { chatActorKey, isSameChatActor, } from "@myrjfa/state/dist/lib/models/chat";
+import { Check, CheckCheck, Reply, MoreHorizontal, Pencil as PencilIcon, Trash2, PlusCircleIcon, Smile, EyeIcon, Copy, ExternalLink, Phone, MessageCircle, Pin, Star, Flag, ShieldX, FileText } from "lucide-react";
+import dynamic from "next/dynamic";
+import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../misc/dropdown-menu";
+import { Button } from "../misc/button";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
+import EmojiPicker from 'emoji-picker-react';
+import { chatApi } from "@myrjfa/state/dist/lib/actions/chat";
+import { EditPollDialog } from "./dialogs/EditPollDialog";
+import { PollVotersDialog } from "./dialogs/PollVotersDialog";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../misc/dialog";
+const MapPreview = dynamic(() => import("../components/location/MapPreview"), { ssr: false });
+function AudioMessagePlayer({ src, messageId }) {
+    const audioRef = useRef(null);
+    const [speed, setSpeed] = useState(1);
+    const storageKey = `trippeaze:voice-position:${messageId}`;
+    useEffect(() => {
+        if (audioRef.current)
+            audioRef.current.playbackRate = speed;
+    }, [speed]);
+    return (_jsxs("div", { className: "flex min-w-56 items-center gap-2 rounded-lg bg-black/5 p-2 dark:bg-white/5", children: [_jsx("audio", { ref: audioRef, src: src, controls: true, className: "h-9 min-w-0 flex-1", onLoadedMetadata: (event) => {
+                    const saved = Number(localStorage.getItem(storageKey) || 0);
+                    if (saved > 0 && saved < event.currentTarget.duration)
+                        event.currentTarget.currentTime = saved;
+                }, onTimeUpdate: (event) => localStorage.setItem(storageKey, String(event.currentTarget.currentTime)), onEnded: () => localStorage.removeItem(storageKey) }), _jsxs("button", { type: "button", className: "rounded-full bg-white/70 px-2 py-1 text-[11px] font-semibold text-slate-700 shadow-sm", onClick: () => setSpeed((current) => current === 1 ? 1.5 : current === 1.5 ? 2 : 1), "aria-label": "Change voice-note playback speed", children: [speed, "\u00D7"] })] }));
+}
+function coordinatesFromMapUrl(value) {
+    try {
+        const url = new URL(value);
+        if (!/(^|\.)google\.[^/]+$/i.test(url.hostname) && !/googleusercontent\.com$/i.test(url.hostname))
+            return null;
+        const coordinates = url.searchParams.get("q") || url.searchParams.get("query") || url.searchParams.get("ll") || "";
+        const match = coordinates.match(/^\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*$/);
+        if (!match)
+            return null;
+        const latitude = Number(match[1]);
+        const longitude = Number(match[2]);
+        return Number.isFinite(latitude) && Number.isFinite(longitude) ? { latitude, longitude } : null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function browserUrl(value) {
+    return /^https?:\/\//i.test(value) ? value : `https://${value}`;
+}
+const QUICK_REACTIONS = [
+    { emoji: "❤️", label: "love" },
+    { emoji: "👍", label: "like" },
+    { emoji: "👎", label: "dislike" },
+    { emoji: "✅", label: "check" },
+    { emoji: "😠", label: "angry" },
+    { emoji: "😢", label: "sad" },
+];
+export function MessageBubble({ message, participants, currentUserId, currentActorModel, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply, onVote, onEditPoll, onStar, onPin, isGroupAdmin, onModerate, onReport, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [showQuickReactions, setShowQuickReactions] = useState(false);
+    const [showReactionPicker, setShowReactionPicker] = useState(false);
+    const [showActionMenu, setShowActionMenu] = useState(false);
+    const [showMobileMenu, setShowMobileMenu] = useState(false);
+    const [poll, setPoll] = useState(null);
+    const [showPollVoters, setShowPollVoters] = useState(false);
+    const [showPollEditor, setShowPollEditor] = useState(false);
+    const [selectedPhone, setSelectedPhone] = useState(null);
+    const [phoneMatches, setPhoneMatches] = useState([]);
+    const [isSearchingPhone, setIsSearchingPhone] = useState(false);
+    const reactionRef = useRef(null);
+    const actionRef = useRef(null);
+    const mobileMenuRef = useRef(null);
+    const mobilePopupRef = useRef(null);
+    const messageBubbleRef = useRef(null);
+    const currentActor = { actorId: currentUserId, actorModel: currentActorModel };
+    const senderActor = { actorId: message.senderId, actorModel: message.senderModel };
+    const isOwn = isSameChatActor(senderActor, currentActor);
+    const copyText = async (value) => {
+        try {
+            await navigator.clipboard.writeText(value);
+        }
+        catch ( /* Clipboard access can be unavailable in embedded browsers. */_a) { /* Clipboard access can be unavailable in embedded browsers. */ }
+    };
+    const participantLabel = (actorId, actorModel) => {
+        const participant = participants.find((item) => actorModel
+            ? isSameChatActor(item, { actorId, actorModel })
+            : item.actorId === actorId);
+        return (participant === null || participant === void 0 ? void 0 : participant.displayName) || (participant === null || participant === void 0 ? void 0 : participant.username) || "Trippeaze member";
+    };
+    const recipientKeys = participants
+        .filter((participant) => !isSameChatActor(participant, senderActor))
+        .map(chatActorKey);
+    const hasReceiptsFromEveryRecipient = (receipts = []) => {
+        const receiptKeys = new Set(receipts.map(chatActorKey));
+        return recipientKeys.length > 0 &&
+            recipientKeys.every((recipientKey) => receiptKeys.has(recipientKey));
+    };
+    // In a group, blue means every other participant has read the message.
+    const hasBeenRead = isOwn && hasReceiptsFromEveryRecipient(message.readBy);
+    const hasBeenDelivered = isOwn && hasReceiptsFromEveryRecipient(message.deliveredTo || []);
+    const canEdit = isOwn && !message.isDeleted && Date.now() - new Date(message.createdAt).getTime() <= 60 * 60 * 1000;
+    const openEditor = () => {
+        if (message.type === "poll" && poll)
+            setShowPollEditor(true);
+        else
+            onEdit === null || onEdit === void 0 ? void 0 : onEdit(message);
+    };
+    useEffect(() => {
+        if (!selectedPhone) {
+            setPhoneMatches([]);
+            return;
+        }
+        let active = true;
+        setIsSearchingPhone(true);
+        void chatApi.searchParticipants(selectedPhone).then((results) => {
+            if (active)
+                setPhoneMatches(results);
+        }).catch(() => {
+            if (active)
+                setPhoneMatches([]);
+        }).finally(() => {
+            if (active)
+                setIsSearchingPhone(false);
+        });
+        return () => { active = false; };
+    }, [selectedPhone]);
+    useEffect(() => {
+        const pollId = message.content.referenceId;
+        if (message.type === "poll" && pollId) {
+            const fetchPoll = async () => {
+                const nextPoll = await chatApi.getPollById(pollId);
+                setPoll((current) => (current === null || current === void 0 ? void 0 : current._id) === (nextPoll === null || nextPoll === void 0 ? void 0 : nextPoll._id) && (current === null || current === void 0 ? void 0 : current.updatedAt) === (nextPoll === null || nextPoll === void 0 ? void 0 : nextPoll.updatedAt) ? current : nextPoll);
+            };
+            void fetchPoll();
+            return;
+        }
+        setPoll(null);
+    }, [message.type, message.content.referenceId]);
+    // Close reaction picker when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (reactionRef.current && !reactionRef.current.contains(event.target)) {
+                setShowQuickReactions(false);
+                setShowReactionPicker(false);
+            }
+        };
+        if (showQuickReactions || showReactionPicker) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [showQuickReactions, showReactionPicker]);
+    // Close mobile menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target)) {
+                setShowMobileMenu(false);
+            }
+        };
+        if (showMobileMenu) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [showMobileMenu]);
+    // Position popup to stay within viewport and over message
+    useEffect(() => {
+        if (showMobileMenu && mobilePopupRef.current && messageBubbleRef.current) {
+            const popup = mobilePopupRef.current;
+            const messageBubble = messageBubbleRef.current;
+            const bubbleRect = messageBubble.getBoundingClientRect();
+            const popupRect = popup.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const viewportWidth = window.innerWidth;
+            const padding = 8;
+            // Reset styles
+            popup.style.top = "auto";
+            popup.style.bottom = "auto";
+            popup.style.left = "auto";
+            popup.style.right = "auto";
+            popup.style.transform = "none";
+            // Position horizontally - prefer the side with more space
+            if (isOwn) {
+                // Message is on right, try to position popup on left of message
+                const spaceOnLeft = bubbleRect.left;
+                const popupWidth = 256; // w-64 = 16rem = 256px
+                if (spaceOnLeft > popupWidth + padding) {
+                    // Enough space on left
+                    popup.style.right = "100%";
+                    popup.style.marginRight = "8px";
+                }
+                else {
+                    // Not enough space, position on right but keep within viewport
+                    popup.style.left = "100%";
+                    popup.style.marginLeft = "8px";
+                    // If it goes out of right edge, adjust
+                    const rect = popup.getBoundingClientRect();
+                    if (rect.right > viewportWidth - padding) {
+                        popup.style.left = "auto";
+                        popup.style.right = "0";
+                    }
+                }
+            }
+            else {
+                // Message is on left, try to position popup on right of message
+                const spaceOnRight = viewportWidth - bubbleRect.right;
+                const popupWidth = 256; // w-64 = 16rem = 256px
+                if (spaceOnRight > popupWidth + padding) {
+                    // Enough space on right
+                    popup.style.left = "100%";
+                    popup.style.marginLeft = "8px";
+                }
+                else {
+                    // Not enough space, position on left but keep within viewport
+                    popup.style.right = "100%";
+                    popup.style.marginRight = "8px";
+                    // If it goes out of left edge, adjust
+                    const rect = popup.getBoundingClientRect();
+                    if (rect.left < padding) {
+                        popup.style.right = "auto";
+                        popup.style.left = "0";
+                    }
+                }
+            }
+            // Position vertically - center on message
+            popup.style.top = "50%";
+            popup.style.transform = "translateY(-50%)";
+            // Make sure it doesn't go out of bottom
+            setTimeout(() => {
+                const rect = popup.getBoundingClientRect();
+                if (rect.bottom > viewportHeight - padding) {
+                    popup.style.top = "auto";
+                    popup.style.bottom = "0";
+                    popup.style.transform = "translateY(0)";
+                }
+                else if (rect.top < padding) {
+                    popup.style.top = "0";
+                    popup.style.bottom = "auto";
+                    popup.style.transform = "translateY(0)";
+                }
+            }, 0);
+        }
+    }, [showMobileMenu, isOwn]);
+    if (message.type === "system" || message.type === "milestone" || message.type === "expense") {
+        return (_jsx("div", { className: "flex justify-center my-3", children: _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs px-4 py-1.5 rounded-full max-w-xs text-center shadow-sm", children: message.content.text }) }));
+    }
+    const time = new Date(message.createdAt).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+    const createMentionRegex = useCallback((participants) => {
+        const usernames = participants
+            .map((participant) => participant.username)
+            .filter((username) => Boolean(username));
+        // Escape special regex characters in usernames to ensure they are matched literally
+        const escapedUsernames = usernames.map(username => username.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        // Sort by length descending to match longer names first, to prevent partial matches
+        escapedUsernames.sort((a, b) => b.length - a.length);
+        if (escapedUsernames.length === 0) {
+            return null;
+        }
+        // Match '@' followed by an exact username, then a non-word character or end of string.
+        // The `(?=\\s|$|[,.!?;:])` part ensures the mention is followed by a space, end of string, or common punctuation.
+        // This regex is designed to be as specific as possible to avoid false positives while allowing spaces/symbols.
+        const pattern = `@(${escapedUsernames.join('|')})(?=\\s|$|[,.!?;:])`;
+        return new RegExp(pattern, 'gi');
+    }, []);
+    const mentionRegex = useMemo(() => createMentionRegex(participants), [participants, createMentionRegex]);
+    const renderTextWithLinks = useCallback((text) => {
+        const elements = [];
+        let lastIndex = 0;
+        // Store all matches with their type and original value
+        const allMatches = [];
+        // Define regexes inside useCallback to avoid re-creation on every render if they don't depend on props
+        // Match the browser-style domains users expect to open from an address bar.
+        const linkRegex = /https?:\/\/[^\s<>()]+|(?<![@\w.-])(?:www\.)?(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}(?:[/?#][^\s<>()]*)?/gi;
+        const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi; // Added 'i' flag
+        // Treat 8–13 digit sequences as phone numbers even when users insert spaces or dashes.
+        const phoneRegex = /(?<!\d)(\+?\d(?:[\s-]?\d){7,12})(?!\d)/g;
+        // Find links
+        for (const match of text.matchAll(linkRegex)) {
+            if (match.index !== undefined) {
+                allMatches.push({ index: match.index, length: match[0].length, type: "link", value: match[0] });
+            }
+        }
+        // Find emails
+        for (const match of text.matchAll(emailRegex)) {
+            if (match.index !== undefined) {
+                allMatches.push({ index: match.index, length: match[0].length, type: "email", value: match[0] });
+            }
+        }
+        // Find phones
+        for (const match of text.matchAll(phoneRegex)) {
+            if (match.index !== undefined) {
+                allMatches.push({ index: match.index, length: match[0].length, type: "phone", value: match[0] });
+            }
+        }
+        // Find mentions
+        if (mentionRegex) {
+            for (const match of text.matchAll(mentionRegex)) {
+                if (match.index !== undefined) {
+                    allMatches.push({ index: match.index, length: match[0].length, type: "mention", value: match[0] });
+                }
+            }
+        }
+        // Sort all matches by their starting index
+        allMatches.sort((a, b) => a.index - b.index);
+        for (const match of allMatches) {
+            // A number inside a URL/email must remain part of that higher-priority match.
+            if (match.index < lastIndex)
+                continue;
+            // Add preceding text
+            if (match.index > lastIndex) {
+                elements.push(text.substring(lastIndex, match.index));
+            }
+            // Add the matched element
+            if (match.type === "link") {
+                const url = browserUrl(match.value);
+                elements.push(_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "underline hover:opacity-80 break-all text-indigo-500", children: match.value }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-36", children: [_jsxs(DropdownMenuItem, { onClick: () => window.open(url, "_blank", "noopener,noreferrer"), children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), "Visit URL"] }), _jsxs(DropdownMenuItem, { onClick: () => void copyText(url), children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), "Copy URL"] })] })] }, `link-${match.index}`));
+            }
+            else if (match.type === "email") {
+                elements.push(_jsx("a", { href: `mailto:${match.value}`, className: "underline hover:opacity-80 break-all text-indigo-500", children: match.value }, `email-${match.index}`));
+            }
+            else if (match.type === "phone") {
+                const phone = match.value.replace(/[\s-]/g, "");
+                elements.push(_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "underline hover:opacity-80 break-all text-indigo-200", children: match.value }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-36", children: [_jsxs(DropdownMenuItem, { onClick: () => { window.location.href = `tel:${phone}`; }, children: [_jsx(Phone, { className: "mr-2 h-4 w-4" }), "Call"] }), _jsxs(DropdownMenuItem, { onClick: () => setSelectedPhone(phone), children: [_jsx(MessageCircle, { className: "mr-2 h-4 w-4" }), "Message"] }), _jsxs(DropdownMenuItem, { onClick: () => void copyText(phone), children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), "Copy"] })] })] }, `phone-${match.index}`));
+            }
+            else if (match.type === "mention") {
+                // The regex already ensures it's a valid participant userId
+                elements.push(_jsx("a", { href: `/chat?u=${match.value.substring(1)}`, className: "underline hover:opacity-80 break-all text-indigo-200", children: match.value }, `mention-${match.index}`));
+            }
+            lastIndex = match.index + match.length;
+        }
+        // Add any remaining text
+        if (lastIndex < text.length) {
+            elements.push(text.substring(lastIndex));
+        }
+        return elements;
+    }, [mentionRegex]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { id: `message-${message._id}`, className: `flex mb-2 ${isOwn ? "justify-end" : "justify-start"}`, children: [!isOwn && (_jsxs(Avatar, { className: "w-8 h-8 mr-2 mt-1 flex-shrink-0", children: [_jsx(AvatarImage, { src: senderProfilePic }), _jsx(AvatarFallback, { children: participantLabel(message.senderId, message.senderModel).charAt(0).toUpperCase() })] })), _jsxs("div", { className: `flex group items-end gap-1 ${isOwn ? "flex-row-reverse" : "flex-row"}`, children: [_jsxs("div", { className: `max-w-xs sm:max-w-md md:max-w-lg flex flex-col ${isOwn ? "items-end" : "items-start"}`, ref: messageBubbleRef, children: [showSender && !isOwn && (_jsx("span", { className: "text-xs font-medium text-teal-600 dark:text-teal-400 ml-1 mb-0.5", children: participantLabel(message.senderId, message.senderModel) })), message.replyTo && (_jsxs(Button, { onClick: () => onScrollToReply === null || onScrollToReply === void 0 ? void 0 : onScrollToReply(message.replyTo._id), className: `text-xs mb-2 px-3 py-2 rounded-lg border-l-2 max-w-full text-left hover:opacity-80 transition-opacity ${isOwn
+                                            ? "bg-opacity-50 bg-teal-600/40 border-teal-300 text-teal-100"
+                                            : "bg-gray-200 dark:bg-gray-700 border-gray-400 dark:border-gray-600 text-gray-600 dark:text-gray-300"}`, children: [_jsxs("div", { className: "font-semibold text-xs truncate", children: ["\u21B3 ", participantLabel((_a = message.replyTo) === null || _a === void 0 ? void 0 : _a.senderId, (_b = message.replyTo) === null || _b === void 0 ? void 0 : _b.senderModel)] }), _jsx("div", { className: "truncate text-gray-500 dark:text-gray-400 text-xs", children: ((_e = (_d = (_c = message.replyTo) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.substring(0, 50)) || "Media/Attachment" })] })), _jsxs("div", { className: `px-4 py-2.5 rounded-2xl relative shadow-sm backdrop-blur-md
+                            ${isOwn
+                                            ? "bg-gradient-to-r from-teal-500/70 to-teal-600/70 text-white rounded-br-md border border-teal-400/30"
+                                            : "bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-md border border-gray-100 dark:border-gray-700"}
+                            ${message.isDeleted ? "opacity-60 italic" : ""}`, onContextMenu: (event) => {
+                                            event.preventDefault();
+                                            setShowActionMenu(true);
+                                        }, children: [message.content.media && message.content.media.length > 0 && (_jsx("div", { className: "mb-2 space-y-1", children: message.content.media.map((m, i) => (_jsx("div", { children: m.mimeType.startsWith("image/") ? (_jsx("img", { src: m.url, alt: m.name, className: "rounded-lg max-w-full max-h-64 object-cover" })) : m.mimeType.startsWith("audio/") ? (_jsx(AudioMessagePlayer, { src: m.url, messageId: `${message._id}:${i}` })) : m.mimeType.startsWith("video/") ? (_jsx("video", { src: m.url, poster: m.thumbnailUrl, controls: true, preload: "metadata", className: "max-h-72 w-full rounded-lg bg-black" })) : (_jsxs("a", { href: m.url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-3 rounded-lg border border-black/10 bg-white/80 p-3 text-sm text-slate-800 shadow-sm dark:bg-slate-900/70 dark:text-white", children: [_jsx(FileText, { className: "h-8 w-8 shrink-0 text-purple-500" }), _jsxs("span", { className: "min-w-0 truncate", children: ["\uD83D\uDCCE ", m.name] })] })) }, i))) })), _jsx("p", { className: "text-[15px] leading-relaxed whitespace-pre-wrap break-words", children: renderTextWithLinks((_f = message.content.text) !== null && _f !== void 0 ? _f : "") }), ((_g = message.content.linkPreview) === null || _g === void 0 ? void 0 : _g.url) && (() => {
+                                                const preview = message.content.linkPreview;
+                                                const mapCoordinates = coordinatesFromMapUrl(preview.url);
+                                                return (_jsxs("a", { href: preview.url, target: "_blank", rel: "noopener noreferrer", className: "mt-3 block overflow-hidden rounded-xl border border-black/10 bg-white/90 text-slate-900 shadow-sm transition-opacity hover:opacity-90 dark:border-white/10 dark:bg-slate-900/80 dark:text-white", children: [mapCoordinates ? (_jsx("div", { className: "h-28 w-full overflow-hidden bg-slate-100", children: _jsx(MapPreview, { latitude: mapCoordinates.latitude, longitude: mapCoordinates.longitude }) })) : preview.image ? (_jsx("img", { src: preview.image, alt: "", className: "h-32 w-full object-cover", onError: (event) => { event.currentTarget.style.display = "none"; } })) : null, _jsxs("div", { className: "p-3", children: [_jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: preview.siteName || new URL(preview.url).hostname }), _jsx("p", { className: "mt-1 line-clamp-2 text-sm font-semibold", children: preview.title || preview.url }), preview.description && _jsx("p", { className: "mt-1 line-clamp-2 text-xs text-slate-600 dark:text-slate-300", children: preview.description })] })] }));
+                                            })(), poll && (_jsxs("div", { className: "mt-3 space-y-2 min-w-[200px]", children: [poll.options.map((opt, i) => {
+                                                        const votes = poll.votes || [];
+                                                        const optionVotes = votes.filter((v) => v.optionIndex === i);
+                                                        const hasVoted = optionVotes.some((vote) => isSameChatActor(vote, currentActor));
+                                                        const percentage = votes.length > 0 ? (optionVotes.length / votes.length) * 100 : 0;
+                                                        return (_jsxs("div", { className: `relative overflow-hidden rounded-lg border p-2 cursor-pointer transition-all active:scale-[0.98] ${hasVoted
+                                                                ? "border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/30"
+                                                                : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-indigo-50/50 dark:bg-indigo-900/30"}
+                                                }`, onClick: async () => {
+                                                                const updatedPoll = await (onVote === null || onVote === void 0 ? void 0 : onVote(poll._id, i));
+                                                                if (updatedPoll)
+                                                                    setPoll(updatedPoll);
+                                                            }, children: [_jsx("div", { className: "absolute inset-0 bg-indigo-400/10 pointer-events-none transition-all duration-500", style: { width: `${percentage}%` } }), _jsxs("div", { className: "relative flex justify-between items-center text-sm", children: [_jsx("span", { className: `${hasVoted ? "font-semibold text-indigo-700 dark:text-indigo-300" : "text-gray-700 dark:text-gray-200"}`, children: opt.text }), _jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: optionVotes.length > 0 && `${optionVotes.length} (${Math.round(percentage)}%)` })] })] }, i));
+                                                    }), _jsxs("div", { className: "text-[10px] text-gray-400 dark:text-gray-500 mt-1", children: [((_h = poll.votes) === null || _h === void 0 ? void 0 : _h.length) || 0, " votes \u2022 ", poll.allowMultiple ? "Multiple choice" : "Single choice"] })] })), _jsxs("div", { className: `flex items-center justify-end gap-1 mt-1 ${isOwn ? "text-teal-200" : "text-gray-400"}`, children: [message.isEdited && (_jsx(PencilIcon, { className: "w-3 h-3" })), _jsx("span", { className: "text-[10px]", children: time }), isOwn && (hasBeenRead ? (_jsx(CheckCheck, { className: "w-4 h-4 text-sky-300" })) : hasBeenDelivered ? (_jsx(CheckCheck, { className: "w-4 h-4 text-slate-200" })) : (_jsx(Check, { className: "w-4 h-4" })))] })] }), message.reactions && message.reactions.length > 0 && (_jsx("div", { className: `flex gap-1 mt-2 ${isOwn ? "justify-end" : "justify-start"} px-2`, children: Object.entries(message.reactions.reduce((acc, r) => {
+                                            acc[r.emoji] = (acc[r.emoji] || 0) + 1;
+                                            return acc;
+                                        }, {})).map(([emoji, count]) => (_jsxs("span", { className: "bg-gray-100 dark:bg-gray-700 rounded-full px-2 py-0.5 text-xs shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer transition-colors", onClick: () => {
+                                                if (message.reactions.find((reaction) => reaction.emoji === emoji &&
+                                                    isSameChatActor(reaction, currentActor))) {
+                                                    onReactionRemove === null || onReactionRemove === void 0 ? void 0 : onReactionRemove(message._id);
+                                                }
+                                            }, children: [emoji, " ", count > 1 && count] }, emoji))) }))] }), !message.isDeleted && (_jsxs(_Fragment, { children: [_jsxs("div", { className: `hidden md:flex gap-1 items-center flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity my-auto`, children: [_jsxs("div", { className: "relative", ref: reactionRef, children: [_jsx("button", { onClick: () => {
+                                                            setShowQuickReactions(!showQuickReactions);
+                                                            setShowReactionPicker(false);
+                                                        }, className: "flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors shadow-md", title: "Add reaction", children: _jsx(Smile, { className: "w-4 h-4" }) }), (showQuickReactions || showReactionPicker) && (_jsx("div", { className: `absolute z-50 bottom-10 ${isOwn ? "right-0" : "left-0"} whitespace-nowrap`, children: _jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 p-2", children: [showQuickReactions && (_jsxs("div", { className: "flex gap-1 flex-wrap w-max", children: [QUICK_REACTIONS.map((reaction) => (_jsx("button", { onClick: () => {
+                                                                                onReactionAdd === null || onReactionAdd === void 0 ? void 0 : onReactionAdd(message._id, reaction.emoji);
+                                                                                setShowQuickReactions(false);
+                                                                            }, className: "text-xl hover:scale-125 transition-transform hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded-lg", title: reaction.label, children: reaction.emoji }, reaction.label))), _jsx("button", { onClick: () => {
+                                                                                setShowQuickReactions(false);
+                                                                                setShowReactionPicker(true);
+                                                                            }, className: "text-xl hover:scale-125 transition-transform hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded-lg", children: _jsx(PlusCircleIcon, { className: "w-5 h-5 text-gray-600 dark:text-gray-300" }) })] })), showReactionPicker && (_jsx("div", { className: "mt-2 border-t border-gray-200 dark:border-gray-700 pt-2", children: _jsx(EmojiPicker, { onEmojiClick: (emojiObject) => {
+                                                                            onReactionAdd === null || onReactionAdd === void 0 ? void 0 : onReactionAdd(message._id, emojiObject.emoji);
+                                                                            setShowReactionPicker(false);
+                                                                            setShowQuickReactions(false);
+                                                                        } }) }))] }) }))] }), _jsx("div", { className: "relative", ref: actionRef, children: _jsxs(DropdownMenu, { open: showActionMenu, onOpenChange: setShowActionMenu, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors shadow-md", children: _jsx(MoreHorizontal, { className: "w-4 h-4" }) }) }), _jsxs(DropdownMenuContent, { align: isOwn ? "end" : "start", className: "w-48", children: [_jsxs(DropdownMenuItem, { onClick: () => onReply === null || onReply === void 0 ? void 0 : onReply(message), children: [_jsx(Reply, { className: "w-4 h-4 mr-2" }), "Reply"] }), _jsxs(DropdownMenuItem, { onClick: () => void copyText(message.content.text || ""), children: [_jsx(Copy, { className: "w-4 h-4 mr-2" }), "Copy"] }), _jsxs(DropdownMenuItem, { onClick: () => onStar === null || onStar === void 0 ? void 0 : onStar(message._id), children: [_jsx(Star, { className: "w-4 h-4 mr-2" }), "Star"] }), _jsxs(DropdownMenuItem, { onClick: () => onPin === null || onPin === void 0 ? void 0 : onPin(message._id), children: [_jsx(Pin, { className: "w-4 h-4 mr-2" }), "Pin"] }), message.type === "poll" && poll && _jsxs(DropdownMenuItem, { onClick: () => setShowPollVoters(true), children: [_jsx(EyeIcon, { className: "w-4 h-4 mr-2" }), "View votes"] }), canEdit && _jsxs(DropdownMenuItem, { onClick: openEditor, children: [_jsx(PencilIcon, { className: "w-4 h-4 mr-2" }), message.type === "poll" ? "Edit poll" : "Edit"] }), !isOwn && _jsxs(DropdownMenuItem, { onClick: () => onReport === null || onReport === void 0 ? void 0 : onReport(message), children: [_jsx(Flag, { className: "w-4 h-4 mr-2" }), "Report"] }), !isOwn && isGroupAdmin && _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: () => onModerate === null || onModerate === void 0 ? void 0 : onModerate(message._id), children: [_jsx(ShieldX, { className: "w-4 h-4 mr-2" }), "Remove as admin"] }), isOwn && _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(message._id), children: [_jsx(Trash2, { className: "w-4 h-4 mr-2" }), "Unsend"] })] })] }) })] }), _jsxs("div", { className: "md:hidden relative my-auto", ref: mobileMenuRef, children: [_jsx("button", { onClick: () => setShowMobileMenu(!showMobileMenu), className: "flex items-center justify-center w-8 h-8 rounded-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors shadow-md flex-shrink-0", children: _jsx(MoreHorizontal, { className: "w-4 h-4" }) }), showMobileMenu && (_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setShowMobileMenu(false) })), showMobileMenu && (_jsx("div", { ref: mobilePopupRef, className: "absolute z-50 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden w-64 max-h-96 overflow-y-auto", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: _jsx("div", { className: "flex gap-1 flex-wrap justify-center", children: QUICK_REACTIONS.map((reaction) => (_jsx("button", { onClick: () => {
+                                                                        onReactionAdd === null || onReactionAdd === void 0 ? void 0 : onReactionAdd(message._id, reaction.emoji);
+                                                                        setShowMobileMenu(false);
+                                                                    }, className: "text-lg hover:scale-125 transition-transform p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded", title: reaction.label, children: reaction.emoji }, reaction.label))) }) }), _jsxs("button", { onClick: () => {
+                                                                onReply === null || onReply === void 0 ? void 0 : onReply(message);
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(Reply, { className: "w-4 h-4" }), "Reply"] }), _jsxs("button", { onClick: () => {
+                                                                void copyText(message.content.text || "");
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(Copy, { className: "w-4 h-4" }), "Copy"] }), _jsxs("button", { onClick: () => {
+                                                                onStar === null || onStar === void 0 ? void 0 : onStar(message._id);
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(Star, { className: "w-4 h-4" }), "Star"] }), _jsxs("button", { onClick: () => {
+                                                                onPin === null || onPin === void 0 ? void 0 : onPin(message._id);
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(Pin, { className: "w-4 h-4" }), "Pin"] }), message.type === "poll" && poll && _jsxs("button", { onClick: () => {
+                                                                setShowPollVoters(true);
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(EyeIcon, { className: "w-4 h-4 mr-2" }), "View votes"] }), !isOwn && _jsxs("button", { onClick: () => {
+                                                                onReport === null || onReport === void 0 ? void 0 : onReport(message);
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(Flag, { className: "w-4 h-4" }), "Report"] }), !isOwn && isGroupAdmin && _jsxs("button", { onClick: () => {
+                                                                onModerate === null || onModerate === void 0 ? void 0 : onModerate(message._id);
+                                                                setShowMobileMenu(false);
+                                                            }, className: "px-4 py-2.5 text-sm text-left text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(ShieldX, { className: "w-4 h-4" }), "Remove as admin"] }), isOwn && (_jsxs(_Fragment, { children: [canEdit && _jsxs("button", { onClick: () => {
+                                                                        openEditor();
+                                                                        setShowMobileMenu(false);
+                                                                    }, className: "px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700", children: [_jsx(PencilIcon, { className: "w-4 h-4" }), message.type === "poll" ? "Edit poll" : "Edit"] }), _jsxs("button", { onClick: () => {
+                                                                        onDelete === null || onDelete === void 0 ? void 0 : onDelete(message._id);
+                                                                        setShowMobileMenu(false);
+                                                                    }, className: "px-4 py-2.5 text-sm text-left text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2", children: [_jsx(Trash2, { className: "w-4 h-4" }), "Unsend"] })] }))] }) }))] })] }))] })] }), poll && _jsx(PollVotersDialog, { open: showPollVoters, onOpenChange: setShowPollVoters, poll: poll, participants: participants }), poll && _jsx(EditPollDialog, { open: showPollEditor, onOpenChange: setShowPollEditor, poll: poll, onSave: async (data) => {
+                    const updated = await (onEditPoll === null || onEditPoll === void 0 ? void 0 : onEditPoll(poll._id, data));
+                    if (updated)
+                        setPoll(updated);
+                    return updated || null;
+                } }), _jsx(Dialog, { open: Boolean(selectedPhone), onOpenChange: (open) => !open && setSelectedPhone(null), children: _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Phone number" }), _jsx(DialogDescription, { children: selectedPhone })] }), _jsx("div", { className: "space-y-3 py-2", children: isSearchingPhone ? _jsx("p", { className: "text-sm text-muted-foreground", children: "Looking for Trippeaze accounts\u2026" }) : phoneMatches.length > 0 ? _jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm font-medium", children: "Chat with a Trippeaze account" }), phoneMatches.map((participant) => _jsxs("button", { type: "button", className: "flex w-full items-center justify-between rounded-lg border p-3 text-left hover:bg-gray-50", onClick: () => { setSelectedPhone(null); window.location.assign(`/chat?participantId=${encodeURIComponent(participant.actorId)}&participantModel=${participant.actorModel}`); }, children: [_jsxs("span", { children: [_jsx("span", { className: "block font-medium", children: participant.displayName }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["@", participant.username] })] }), _jsx(MessageCircle, { className: "h-4 w-4 text-teal-600" })] }, `${participant.actorModel}:${participant.actorId}`))] }) : _jsx("p", { className: "text-sm text-muted-foreground", children: "No Trippeaze account is registered with this number. You can invite them by SMS." }) }), phoneMatches.length === 0 && !isSearchingPhone && _jsxs("a", { className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground", href: `sms:${selectedPhone || ""}?body=${encodeURIComponent("Join me on Trippeaze: ")}`, children: [_jsx(MessageCircle, { className: "mr-2 h-4 w-4" }), "Invite by SMS"] })] }) })] }));
+}

package/dist/chat/MessageInput.d.ts

@@ -0,0 +1,34 @@
+import { Message } from "@myrjfa/state/dist/lib/models/chat";
+interface MessageInputProps {
+    onSend: (text: string, files?: File[], mentions?: Array<{
+        actorId: string;
+        actorModel: "User" | "HostProfile";
+    }>, type?: "text" | "media" | "announcement") => Promise<void> | void;
+    onTypingStart?: () => void;
+    onTypingStop?: () => void;
+    disabled?: boolean;
+    replyTo?: any;
+    editMessage?: Message | null;
+    onEdit?: (messageid: string, text: string) => void;
+    onCancelEdit?: () => void;
+    onCancelReply?: () => void;
+    onAddMilestone?: () => void;
+    onAddExpense?: () => void;
+    onAddEvent?: () => void;
+    onPayAndSplit?: () => void;
+    onPaymentDetails?: () => void;
+    onCreatePoll?: (question: string, options: string[], allowMultiple: boolean) => void;
+    participants?: any[];
+    activePanel?: "chat" | "milestones" | "expenses" | "events";
+    allowAdvancedActions?: boolean;
+    enableAttachments?: boolean;
+    allowCollaborationActions?: boolean;
+    allowAnnouncements?: boolean;
+    initialText?: string;
+    externalText?: string;
+    onDraftChange?: (text: string) => void;
+}
+export declare function MessageInput({ onSend, onTypingStart, onTypingStop, disabled, replyTo, editMessage, onEdit, onCancelEdit, onCancelReply, onAddMilestone, onAddExpense, onAddEvent, onPayAndSplit, onPaymentDetails, onCreatePoll, participants, // Added
+activePanel, allowAdvancedActions, enableAttachments, allowCollaborationActions, allowAnnouncements, initialText, externalText, onDraftChange, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MessageInput.d.ts.map

package/dist/chat/MessageInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../src/chat/MessageInput.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAE7D,UAAU,iBAAiB;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,aAAa,CAAA;KAAE,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpL,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IACrF,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,MAAM,EACN,YAAY,EACZ,aAAa,EACb,cAAc,EACd,YAAY,EACZ,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,YAAiB,EAAE,QAAQ;AAC3B,WAAoB,EACpB,oBAA4B,EAC5B,iBAAyB,EACzB,yBAAiC,EACjC,kBAA0B,EAC1B,WAAgB,EAChB,YAAY,EACZ,aAAa,GAChB,EAAE,iBAAiB,2CA+kBnB"}