@myrjfa/ui 1.0.9 → 1.0.10

package/dist/chat/MessageBubble.js

@@ -4,9 +4,10 @@ import { Check, CheckCheck, Reply, MoreHorizontal, Pencil as PencilIcon, Trash2,
 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 } from "react";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import EmojiPicker from 'emoji-picker-react';
-var QUICK_REACTIONS = [
+import { chatApi } from "@myrjfa/state";
+const QUICK_REACTIONS = [
     { emoji: "❤️", label: "love" },
     { emoji: "👍", label: "like" },
     { emoji: "👎", label: "dislike" },
@@ -14,21 +15,31 @@ var QUICK_REACTIONS = [
     { emoji: "😠", label: "angry" },
     { emoji: "😢", label: "sad" },
 ];
-export function MessageBubble(_a) {
-    var _b, _c, _d, _e;
-    var message = _a.message, isOwn = _a.isOwn, showSender = _a.showSender, senderProfilePic = _a.senderProfilePic, onEdit = _a.onEdit, onDelete = _a.onDelete, onReply = _a.onReply, onReactionAdd = _a.onReactionAdd, onScrollToReply = _a.onScrollToReply;
-    var _f = useState(false), showQuickReactions = _f[0], setShowQuickReactions = _f[1];
-    var _g = useState(false), showReactionPicker = _g[0], setShowReactionPicker = _g[1];
-    var _h = useState(false), showActionMenu = _h[0], setShowActionMenu = _h[1];
-    var _j = useState(false), showMobileMenu = _j[0], setShowMobileMenu = _j[1];
-    var reactionRef = useRef(null);
-    var actionRef = useRef(null);
-    var mobileMenuRef = useRef(null);
-    var mobilePopupRef = useRef(null);
-    var messageBubbleRef = useRef(null);
+export function MessageBubble({ message, participants, currentUserId, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply, onVote }) {
+    var _a, _b, _c, _d, _e, _f;
+    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 reactionRef = useRef(null);
+    const actionRef = useRef(null);
+    const mobileMenuRef = useRef(null);
+    const mobilePopupRef = useRef(null);
+    const messageBubbleRef = useRef(null);
+    const isOwn = message.senderId == currentUserId;
+    useEffect(() => {
+        const pollId = message.content.referenceId;
+        if (message.type === "poll" && pollId) {
+            const fetchPoll = async () => {
+                setPoll(await chatApi.getPollById(pollId));
+            };
+            fetchPoll();
+        }
+    }, [message]);
     // Close reaction picker when clicking outside
-    useEffect(function () {
-        var handleClickOutside = function (event) {
+    useEffect(() => {
+        const handleClickOutside = (event) => {
             if (reactionRef.current && !reactionRef.current.contains(event.target)) {
                 setShowQuickReactions(false);
                 setShowReactionPicker(false);
@@ -36,99 +47,99 @@ export function MessageBubble(_a) {
         };
         if (showQuickReactions || showReactionPicker) {
             document.addEventListener("mousedown", handleClickOutside);
-            return function () {
+            return () => {
                 document.removeEventListener("mousedown", handleClickOutside);
             };
         }
     }, [showQuickReactions, showReactionPicker]);
     // Close mobile menu when clicking outside
-    useEffect(function () {
-        var handleClickOutside = function (event) {
+    useEffect(() => {
+        const handleClickOutside = (event) => {
             if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target)) {
                 setShowMobileMenu(false);
             }
         };
         if (showMobileMenu) {
             document.addEventListener("mousedown", handleClickOutside);
-            return function () {
+            return () => {
                 document.removeEventListener("mousedown", handleClickOutside);
             };
         }
     }, [showMobileMenu]);
     // Position popup to stay within viewport and over message
-    useEffect(function () {
+    useEffect(() => {
         if (showMobileMenu && mobilePopupRef.current && messageBubbleRef.current) {
-            var popup_1 = mobilePopupRef.current;
-            var messageBubble = messageBubbleRef.current;
-            var bubbleRect = messageBubble.getBoundingClientRect();
-            var popupRect = popup_1.getBoundingClientRect();
-            var viewportHeight_1 = window.innerHeight;
-            var viewportWidth = window.innerWidth;
-            var padding_1 = 8;
+            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_1.style.top = "auto";
-            popup_1.style.bottom = "auto";
-            popup_1.style.left = "auto";
-            popup_1.style.right = "auto";
-            popup_1.style.transform = "none";
+            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
-                var spaceOnLeft = bubbleRect.left;
-                var popupWidth = 256; // w-64 = 16rem = 256px
-                if (spaceOnLeft > popupWidth + padding_1) {
+                const spaceOnLeft = bubbleRect.left;
+                const popupWidth = 256; // w-64 = 16rem = 256px
+                if (spaceOnLeft > popupWidth + padding) {
                     // Enough space on left
-                    popup_1.style.right = "100%";
-                    popup_1.style.marginRight = "8px";
+                    popup.style.right = "100%";
+                    popup.style.marginRight = "8px";
                 }
                 else {
                     // Not enough space, position on right but keep within viewport
-                    popup_1.style.left = "100%";
-                    popup_1.style.marginLeft = "8px";
+                    popup.style.left = "100%";
+                    popup.style.marginLeft = "8px";
                     // If it goes out of right edge, adjust
-                    var rect = popup_1.getBoundingClientRect();
-                    if (rect.right > viewportWidth - padding_1) {
-                        popup_1.style.left = "auto";
-                        popup_1.style.right = "0";
+                    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
-                var spaceOnRight = viewportWidth - bubbleRect.right;
-                var popupWidth = 256; // w-64 = 16rem = 256px
-                if (spaceOnRight > popupWidth + padding_1) {
+                const spaceOnRight = viewportWidth - bubbleRect.right;
+                const popupWidth = 256; // w-64 = 16rem = 256px
+                if (spaceOnRight > popupWidth + padding) {
                     // Enough space on right
-                    popup_1.style.left = "100%";
-                    popup_1.style.marginLeft = "8px";
+                    popup.style.left = "100%";
+                    popup.style.marginLeft = "8px";
                 }
                 else {
                     // Not enough space, position on left but keep within viewport
-                    popup_1.style.right = "100%";
-                    popup_1.style.marginRight = "8px";
+                    popup.style.right = "100%";
+                    popup.style.marginRight = "8px";
                     // If it goes out of left edge, adjust
-                    var rect = popup_1.getBoundingClientRect();
-                    if (rect.left < padding_1) {
-                        popup_1.style.right = "auto";
-                        popup_1.style.left = "0";
+                    const rect = popup.getBoundingClientRect();
+                    if (rect.left < padding) {
+                        popup.style.right = "auto";
+                        popup.style.left = "0";
                     }
                 }
             }
             // Position vertically - center on message
-            popup_1.style.top = "50%";
-            popup_1.style.transform = "translateY(-50%)";
+            popup.style.top = "50%";
+            popup.style.transform = "translateY(-50%)";
             // Make sure it doesn't go out of bottom
-            setTimeout(function () {
-                var rect = popup_1.getBoundingClientRect();
-                if (rect.bottom > viewportHeight_1 - padding_1) {
-                    popup_1.style.top = "auto";
-                    popup_1.style.bottom = "0";
-                    popup_1.style.transform = "translateY(0)";
+            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_1) {
-                    popup_1.style.top = "0";
-                    popup_1.style.bottom = "auto";
-                    popup_1.style.transform = "translateY(0)";
+                else if (rect.top < padding) {
+                    popup.style.top = "0";
+                    popup.style.bottom = "auto";
+                    popup.style.transform = "translateY(0)";
                 }
             }, 0);
         }
@@ -136,61 +147,137 @@ export function MessageBubble(_a) {
     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 }) }));
     }
-    var time = new Date(message.createdAt).toLocaleTimeString([], {
+    const time = new Date(message.createdAt).toLocaleTimeString([], {
         hour: "2-digit",
         minute: "2-digit",
     });
-    var linkRegex = /(https?:\/\/[^\s]+)/g;
-    var emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
-    var phoneRegex = /(\+?1?\d{9,15})/g;
-    var renderTextWithLinks = function (text) {
-        var parts = text.split(/\s+/);
-        return parts.map(function (part, i) {
-            if (linkRegex.test(part)) {
-                return (_jsxs("a", { href: part, target: "_blank", rel: "noopener noreferrer", className: "underline hover:opacity-80 break-all text-indigo-500", children: [part, " "] }, i));
+    const createMentionRegex = useCallback((participants) => {
+        const userIds = participants.map(p => p.userId);
+        // Escape special regex characters in usernames to ensure they are matched literally
+        const escapedUserIds = userIds.map(id => id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        // Sort by length descending to match longer names first, to prevent partial matches
+        escapedUserIds.sort((a, b) => b.length - a.length);
+        if (escapedUserIds.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 = `@(${escapedUserIds.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
+        const linkRegex = /(https?:\/\/[^\s]+)/gi; // Added 'i' flag for case-insensitivity if needed, though URLs are usually case-sensitive for hostnames
+        const emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi; // Added 'i' flag
+        const phoneRegex = /(\+?1?\d{9,15})/g; // Phone numbers are typically case-insensitive
+        // 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) {
+            // Add preceding text
+            if (match.index > lastIndex) {
+                elements.push(text.substring(lastIndex, match.index));
             }
-            if (emailRegex.test(part)) {
-                return (_jsxs("a", { href: "mailto:".concat(part), className: "underline hover:opacity-80 break-all text-indigo-500", children: [part, " "] }, i));
+            // Add the matched element
+            if (match.type === "link") {
+                elements.push(_jsx("a", { href: match.value, target: "_blank", rel: "noopener noreferrer", className: "underline hover:opacity-80 break-all text-indigo-500", children: match.value }, `link-${match.index}`));
             }
-            if (phoneRegex.test(part)) {
-                return (_jsxs("a", { href: "tel:".concat(part), className: "underline hover:opacity-80 break-all text-indigo-200", children: [part, " "] }, i));
+            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}`));
             }
-            return part + " ";
-        });
-    };
-    return (_jsxs("div", { className: "flex mb-2 ".concat(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: message.senderId.charAt(0).toUpperCase() })] })), _jsxs("div", { className: "flex group items-end gap-1 ".concat(isOwn ? "flex-row-reverse" : "flex-row"), children: [_jsxs("div", { className: "max-w-xs sm:max-w-md md:max-w-lg flex flex-col ".concat(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: message.senderId })), message.replyTo && (_jsxs(Button, { onClick: function () { return 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 ".concat(isOwn
+            else if (match.type === "phone") {
+                elements.push(_jsx("a", { href: `tel:${match.value}`, className: "underline hover:opacity-80 break-all text-indigo-200", children: match.value }, `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("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: message.senderId.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: message.senderId })), 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 ", (_b = message.replyTo) === null || _b === void 0 ? void 0 : _b.senderId] }), _jsx("div", { className: "truncate text-gray-500 dark:text-gray-400 text-xs", children: (_d = (_c = message.replyTo) === null || _c === void 0 ? void 0 : _c.content.text) === null || _d === void 0 ? void 0 : _d.substring(0, 50) })] })), _jsxs("div", { className: "px-4 py-2.5 rounded-2xl relative shadow-sm backdrop-blur-md\n                            ".concat(isOwn
+                                    : "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 ", (_a = message.replyTo) === null || _a === void 0 ? void 0 : _a.senderId] }), _jsx("div", { className: "truncate text-gray-500 dark:text-gray-400 text-xs", children: ((_d = (_c = (_b = message.replyTo) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.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", "\n                            ").concat(message.isDeleted ? "opacity-60 italic" : ""), children: [message.content.media && message.content.media.length > 0 && (_jsx("div", { className: "mb-2 space-y-1", children: message.content.media.map(function (m, i) { return (_jsx("div", { children: m.type === "image" ? (_jsx("img", { src: m.url, alt: m.name, className: "rounded-lg max-w-full max-h-64 object-cover" })) : (_jsxs("a", { href: m.url, className: "text-sm underline", target: "_blank", rel: "noopener noreferrer", children: ["\uD83D\uDCCE ", m.name] })) }, i)); }) })), _jsx("p", { className: "text-[15px] leading-relaxed whitespace-pre-wrap break-words", children: renderTextWithLinks((_e = message.content.text) !== null && _e !== void 0 ? _e : "") }), _jsxs("div", { className: "flex items-center justify-end gap-1 mt-1 ".concat(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 && (message.readBy.length > 1 ? (_jsx(CheckCheck, { className: "w-4 h-4 text-sky-300" })) : (_jsx(Check, { className: "w-4 h-4" })))] })] }), message.reactions && message.reactions.length > 0 && (_jsx("div", { className: "flex gap-1 mt-2 ".concat(isOwn ? "justify-end" : "justify-start", " px-2"), children: Object.entries(message.reactions.reduce(function (acc, r) {
+                                    : "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" : ""}`, 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.type === "image" ? (_jsx("img", { src: m.url, alt: m.name, className: "rounded-lg max-w-full max-h-64 object-cover" })) : m.type === "audio" ?
+                                                (_jsx("audio", { src: m.url, controls: true, children: _jsxs("a", { href: m.url, className: "text-sm underline", target: "_blank", rel: "noopener noreferrer", children: ["\uD83D\uDCCE ", m.name] }) }))
+                                                : (_jsxs("a", { href: m.url, className: "text-sm underline", target: "_blank", rel: "noopener noreferrer", children: ["\uD83D\uDCCE ", m.name] })) }, i))) })), _jsx("p", { className: "text-[15px] leading-relaxed whitespace-pre-wrap break-words", children: renderTextWithLinks((_e = message.content.text) !== null && _e !== void 0 ? _e : "") }), 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((v) => v.userId === currentUserId);
+                                                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: () => onVote === null || onVote === void 0 ? void 0 : onVote(poll._id, i), 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: [((_f = poll.votes) === null || _f === void 0 ? void 0 : _f.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 && (message.readBy.length > 1 ? (_jsx(CheckCheck, { className: "w-4 h-4 text-sky-300" })) : (_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(function (_a) {
-                                    var emoji = _a[0], count = _a[1];
-                                    return (_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", 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: function () {
+                                }, {})).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(r => r.emoji == emoji && r.userId == currentUserId)) {
+                                            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 ".concat(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(function (reaction) { return (_jsx("button", { onClick: function () {
+                                                }, 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: function () {
+                                                                    }, 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: function (emojiObject) {
+                                                                    }, 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: function () { return onReply === null || onReply === void 0 ? void 0 : onReply(message); }, children: [_jsx(Reply, { className: "w-4 h-4 mr-2" }), "Reply"] }), isOwn && _jsxs(DropdownMenuItem, { onClick: function () { return onEdit === null || onEdit === void 0 ? void 0 : onEdit(message._id, message.content.text || ""); }, children: [_jsx(PencilIcon, { className: "w-4 h-4 mr-2" }), "Edit"] }), isOwn && _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: function () { return 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: function () { return 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: function () { return 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(function (reaction) { return (_jsx("button", { onClick: function () {
+                                                                } }) }))] }) }))] }), _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"] }), isOwn && _jsxs(DropdownMenuItem, { onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(message), children: [_jsx(PencilIcon, { className: "w-4 h-4 mr-2" }), "Edit"] }), 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: function () {
+                                                            }, 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"] }), isOwn && (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: function () {
-                                                                onEdit === null || onEdit === void 0 ? void 0 : onEdit(message._id, message.content.text || "");
+                                                    }, 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"] }), isOwn && (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => {
+                                                                onEdit === null || onEdit === void 0 ? void 0 : onEdit(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(PencilIcon, { className: "w-4 h-4" }), "Edit"] }), _jsxs("button", { onClick: function () {
+                                                            }, 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" }), "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"] })] }))] }) }))] })] }))] })] }));

package/dist/chat/MessageInput.d.ts

@@ -1,14 +1,21 @@
+import { Message } from "@myrjfa/state";
 interface MessageInputProps {
     onSend: (text: string, files?: File[]) => 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;
+    onCreatePoll?: (question: string, options: string[], allowMultiple: boolean) => void;
+    participants?: any[];
     activePanel?: "chat" | "milestones" | "expenses";
 }
-export declare function MessageInput({ onSend, onTypingStart, onTypingStop, disabled, replyTo, onCancelReply, onAddMilestone, onAddExpense, activePanel }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageInput({ onSend, onTypingStart, onTypingStop, disabled, replyTo, editMessage, onEdit, onCancelEdit, onCancelReply, onAddMilestone, onAddExpense, onCreatePoll, participants, // Added
+activePanel }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MessageInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../src/chat/MessageInput.tsx"],"names":[],"mappings":"AAWA,UAAU,iBAAiB;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC/C,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,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;CACpD;AAED,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAoB,EACvB,EAAE,iBAAiB,2CAwSnB"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../src/chat/MessageInput.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,UAAU,iBAAiB;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC/C,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,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,CAAC;CACpD;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,YAAY,EACZ,YAAiB,EAAE,QAAQ;AAC3B,WAAoB,EACvB,EAAE,iBAAiB,2CAobnB"}