@myrjfa/ui 1.0.8 → 1.0.10

package/dist/chat/ExpensePanel.js

@@ -0,0 +1,235 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { chatApi } from "@myrjfa/state/dist/lib/actions/chat";
+import { Receipt, Plus, Trash2, Pencil, CreditCard, Users, MapPin, Image as ImageIcon, Loader2, Navigation, Lock, Unlock, ReceiptText, BarChart3, CheckCircle, X, ChevronDown, PiggyBankIcon } from "lucide-react";
+import { Button } from "../misc/button";
+import { Input } from "../misc/input";
+import { Textarea } from "../misc/textarea";
+import { confirmActions, deleteActions, showAlert } from "../misc/alertdialogclaude";
+import { ExpenseAnalyticsDialog } from "./dialogs/ExpenseAnalyticsDialog";
+import { SplitTypeSelector } from "./components/SplitTypeSelector";
+import { SplitInputs } from "./components/SplitInputs";
+import { ParticipantSelector } from "./components/ParticipantSelector";
+import { Label } from "../misc/label";
+export function ExpensePanel({ conversationId, currentUserId, isFullScreen = false, isFeatureEnabled = false, isAdmin = false, onEnableFeature }) {
+    const [expenses, setExpenses] = useState([]);
+    const [balances, setBalances] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isAdding, setIsAdding] = useState(false);
+    const [showSettleMode, setShowSettleMode] = useState(false);
+    const [newTitle, setNewTitle] = useState("");
+    const [newAmount, setNewAmount] = useState("");
+    const [newCategory, setNewCategory] = useState("");
+    const [newDescription, setNewDescription] = useState("");
+    const [newLocation, setNewLocation] = useState(null);
+    const [receiptFile, setReceiptFile] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    const [gettingLocation, setGettingLocation] = useState(false);
+    const [categories, setCategories] = useState([]);
+    const [showAnalytics, setShowAnalytics] = useState(false);
+    const [settling, setSettling] = useState(null);
+    const [expenseId, setExpenseId] = useState(null);
+    const [groupParticipants, setGroupParticipants] = useState([]);
+    const [showMoreOptions, setShowMoreOptions] = useState(false);
+    const [splitType, setSplitType] = useState("equal");
+    const [splitParticipants, setSplitParticipants] = useState([]);
+    const [splits, setSplits] = useState([]);
+    const [expandedExpenseId, setExpandedExpenseId] = useState(null);
+    const [showSplitModal, setShowSplitModal] = useState(false);
+    const [selectedExpenseForSplit, setSelectedExpenseForSplit] = useState(null);
+    const fetchData = async () => {
+        var _a;
+        setLoading(true);
+        const [expData, balData, convData] = await Promise.all([
+            chatApi.getExpenses(conversationId),
+            chatApi.getBalances(conversationId),
+            chatApi.getConversation(conversationId)
+        ]);
+        setExpenses(expData);
+        setBalances(balData);
+        const participants = ((_a = convData === null || convData === void 0 ? void 0 : convData.participants) === null || _a === void 0 ? void 0 : _a.map((p) => p.userId)) || [];
+        setGroupParticipants(participants);
+        setLoading(false);
+    };
+    useEffect(() => {
+        fetchData();
+        fetchCategories();
+    }, [conversationId]);
+    const fetchCategories = async () => {
+        try {
+            const cats = await chatApi.getExpenseCategories(conversationId);
+            setCategories(cats || []);
+        }
+        catch (error) {
+            console.error("Failed to fetch categories:", error);
+        }
+    };
+    const userOwesAmount = () => {
+        if (!balances)
+            return 0;
+        const userBalance = balances.balances.find(b => b.userId === currentUserId);
+        return userBalance && userBalance.netBalance < -0.01 ? Math.abs(userBalance.netBalance) : 0;
+    };
+    const getUserSettlements = () => {
+        if (!(balances === null || balances === void 0 ? void 0 : balances.settlements))
+            return { owes: [], isOwed: [] };
+        const owes = balances.settlements.filter(s => s.from === currentUserId);
+        const isOwed = balances.settlements.filter(s => s.to === currentUserId);
+        return { owes, isOwed };
+    };
+    const handleGetLocation = () => {
+        if (!navigator.geolocation) {
+            alert("Geolocation not supported by your browser");
+            return;
+        }
+        setGettingLocation(true);
+        navigator.geolocation.getCurrentPosition(async (position) => {
+            const { latitude, longitude } = position.coords;
+            const mapLink = `https://www.google.com/maps?q=${latitude},${longitude}`;
+            setNewLocation(mapLink);
+            setGettingLocation(false);
+        }, (error) => {
+            console.error("Error getting location:", error);
+            showAlert("Could not get location.");
+            setGettingLocation(false);
+        });
+    };
+    const resetForm = () => {
+        setNewTitle("");
+        setNewAmount("");
+        setNewCategory("");
+        setNewDescription("");
+        setNewLocation(null);
+        setReceiptFile(null);
+        setShowMoreOptions(false);
+        setIsAdding(false);
+        setExpenseId(null);
+        setSplitType("equal");
+        setSplitParticipants([]);
+        setSplits([]);
+    };
+    const handleCreate = async () => {
+        var _a, _b;
+        if (!newTitle.trim() || !newAmount)
+            return;
+        const amount = parseFloat(newAmount);
+        if (amount <= 0) {
+            showAlert("Amount must be greater than 0");
+            return;
+        }
+        setUploading(true);
+        try {
+            let receiptUrl = undefined;
+            if (receiptFile) {
+                const formData = new FormData();
+                formData.append("chatFiles", receiptFile);
+                const res = await chatApi.uploadFiles(formData);
+                if ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) {
+                    receiptUrl = res.data.files[0].location;
+                }
+            }
+            const expenseData = {
+                title: newTitle.trim(),
+                amount,
+                category: newCategory.trim() || "General",
+                description: newDescription.trim() || undefined,
+                paidBy: [{ userId: currentUserId, amount }],
+                splitType,
+                splits: splitType != "equal" && splits,
+                location: newLocation || undefined,
+                receipt: receiptUrl
+            };
+            const expenseResponse = expenseId
+                ? await chatApi.updateExpense(expenseId, expenseData)
+                : await chatApi.createExpense(conversationId, expenseData);
+            if (expenseResponse.error) {
+                console.error("Failed to create expense:", expenseResponse.error);
+                await showAlert(expenseResponse.error, "Failed to create expense");
+                return;
+            }
+            else {
+                if (expenseResponse.data) {
+                    await fetchData();
+                    resetForm();
+                }
+            }
+        }
+        catch (err) {
+            console.error("Failed to create expense:", err);
+            showAlert(err, "Failed to create expense");
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    const handleDelete = async (id) => {
+        let confirmDelete = true;
+        await showAlert("Are you sure you want to delete this expense?", undefined, deleteActions(() => confirmDelete = false));
+        if (confirmDelete) {
+            const response = await chatApi.deleteExpense(id);
+            if (response.error) {
+                console.log("Unable to delete expense:" + id + "Error: " + response.error);
+                await showAlert("Unable to delete expense");
+                return;
+            }
+            setExpenses(prev => prev.filter(e => e._id !== id));
+            const balData = await chatApi.getBalances(conversationId);
+            setBalances(balData);
+        }
+    };
+    const handleEdit = async (expense) => {
+        setExpenseId(expense._id);
+        setNewTitle(expense.title);
+        setNewAmount(expense.amount.toString());
+        setNewCategory(expense.category || "");
+        setNewDescription(expense.description || "");
+        setNewLocation(expense.location || null);
+        setSplitType(expense.splitType);
+        setSplitParticipants(expense.splits.map(s => s.userId));
+        setSplits(expense.splits);
+        setIsAdding(true);
+    };
+    const handleSettleSplit = async (payment) => {
+        setSettling(payment.from + payment.to);
+        let confirmPayment = true;
+        await showAlert(`Pay ₹${payment.amount.toFixed(0)} to ${payment.to}`, undefined, confirmActions(() => confirmPayment = false));
+        if (confirmPayment) {
+            const response = await chatApi.settleSplit(conversationId, payment.to, payment.amount);
+            if (response.error) {
+                console.log("Error recording payment: " + response.error);
+                showAlert("Error recording payment");
+            }
+            else {
+                setExpenses(prev => [response.data, ...prev]);
+            }
+        }
+        setSettling(null);
+    };
+    const panelClasses = isFullScreen
+        ? "w-full h-full flex flex-col"
+        : "flex flex-col h-full w-full md:w-80 border-l border-gray-200 dark:border-gray-700";
+    return (_jsxs("div", { className: `bg-white dark:bg-gray-900 ${panelClasses}`, children: [_jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 flex items-center justify-between", children: [_jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Expenses" }), expenses.length > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setShowAnalytics(prev => !prev), className: "text-teal-600 hover:text-teal-700 dark:text-teal-400", children: [_jsx(BarChart3, { className: "w-4 h-4 mr-1" }), "Analytics"] }))] }), !isAdding && balances && (_jsxs("div", { className: "p-3 bg-teal-50 dark:bg-teal-900/20 mx-3 mt-3 rounded-xl border border-teal-100 dark:border-teal-800 flex-shrink-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Users, { className: "w-4 h-4 text-teal-500" }), _jsx("span", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wider", children: "Group Balance" })] }), balances.balances.map((b) => (_jsxs("div", { className: "flex justify-between text-xs py-1", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: b.userId }), _jsxs("span", { className: `font-medium ${b.netBalance >= 0 ? "text-green-600" : "text-red-500"}`, children: [b.netBalance >= 0 ? "+" : "", "\u20B9", b.netBalance.toFixed(2)] })] }, b.userId)))] })), showSettleMode && balances && (_jsxs("div", { className: "p-3 bg-teal-50 dark:bg-teal-900/20 mx-3 mt-3 rounded-xl border border-teal-100 dark:border-teal-800 flex-shrink-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Users, { className: "w-4 h-4 text-teal-500" }), _jsx("span", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wider", children: "Your Settlements" })] }), _jsx(Button, { onClick: () => setShowSettleMode(false), variant: "ghost", size: "sm", className: "h-6 w-6 p-0", children: _jsx(X, { className: "w-4 h-4" }) })] }), (() => {
+                        const { owes, isOwed } = getUserSettlements();
+                        const hasSettlements = owes.length > 0 || isOwed.length > 0;
+                        return !hasSettlements ? (_jsx("p", { className: "text-xs text-gray-500 text-center py-4", children: "All settled up! \uD83C\uDF89" })) : (_jsxs("div", { className: "space-y-3", children: [owes.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-red-600 dark:text-red-400 uppercase tracking-wider mb-2", children: "You Owe" }), _jsx("div", { className: "space-y-2", children: owes.map((s, i) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white dark:bg-gray-800 rounded-lg border border-red-100 dark:border-red-900/30 hover:border-red-200 dark:hover:border-red-800 transition-colors", children: [_jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-xs text-gray-700 dark:text-gray-300", children: ["Pay ", _jsxs("span", { className: "font-semibold text-red-600 dark:text-red-400", children: ["\u20B9", s.amount.toFixed(0)] }), " to ", _jsx("span", { className: "font-semibold", children: s.to })] }) }), _jsxs(Button, { size: "sm", onClick: () => handleSettleSplit(s), disabled: settling === s.from + s.to, className: "text-[10px] text-white bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 h-6 px-2 ml-2 flex-shrink-0", children: [_jsx(CheckCircle, { className: "w-3 h-3 mr-1" }), settling === s.from + s.to ? "..." : "Settle"] })] }, i))) })] })), isOwed.length > 0 && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wider mb-2", children: "You Are Owed" }), _jsx("div", { className: "space-y-2", children: isOwed.map((s, i) => (_jsx("div", { className: "flex items-center justify-between p-2.5 bg-white dark:bg-gray-800 rounded-lg border border-green-100 dark:border-green-900/30 hover:border-green-200 dark:hover:border-green-800 transition-colors", children: _jsxs("p", { className: "text-xs text-gray-700 dark:text-gray-300", children: [_jsx("span", { className: "font-semibold", children: s.from }), " owes you", " ", _jsxs("span", { className: "font-semibold text-green-600 dark:text-green-400", children: ["\u20B9", s.amount.toFixed(0)] })] }) }, i))) })] }))] }));
+                    })()] })), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 pt-0 mt-3", children: !isFeatureEnabled ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full py-12 px-6 text-center", children: [_jsx("div", { className: "mb-4 p-4 bg-teal-50 dark:bg-teal-900/20 rounded-full", children: _jsx(ReceiptText, { className: "w-12 h-12 text-teal-500" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: "Expenses Feature" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4 max-w-sm", children: "Split costs fairly, track who owes whom, analyse expenses and settle balances easily. Perfect for shared trip expenses and group activities." }), isAdmin ? (_jsxs(Button, { onClick: onEnableFeature, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white", children: [_jsx(Unlock, { className: "w-4 h-4 mr-2" }), "Enable Feature"] })) : (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Lock, { className: "w-4 h-4" }), "Ask admin to enable this feature"] }))] })) : loading ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx("div", { className: "animate-spin w-5 h-5 border-2 border-teal-500 border-t-transparent rounded-full" }) })) : !showSettleMode && expenses.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No expenses yet" })) : (_jsxs(_Fragment, { children: [!showSettleMode && isAdding && (_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 p-3 rounded-xl border border-teal-100 dark:border-teal-800 space-y-3", children: [_jsx(Input, { autoFocus: true, value: newTitle, onChange: (e) => setNewTitle(e.target.value), placeholder: "What for?", className: "w-full bg-white dark:bg-gray-800 border-none outline-none rounded-lg p-2 text-sm text-gray-900 dark:text-white shadow-sm" }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: _jsxs("div", { className: "col-span-2 relative", children: [_jsx("span", { className: "absolute left-2 top-2 text-gray-400 text-sm", children: "\u20B9" }), _jsx(Input, { type: "number", step: "0.01", value: newAmount, onChange: (e) => setNewAmount(e.target.value), placeholder: "0.00", className: "w-full bg-white dark:bg-gray-800 border-none outline-none rounded-lg p-2 pl-6 text-sm text-gray-900 dark:text-white shadow-sm" })] }) }), _jsxs(Button, { onClick: () => setShowMoreOptions(!showMoreOptions), variant: "secondary", className: "w-full flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "More Options" }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform ${showMoreOptions ? "rotate-180" : ""}` })] }), showMoreOptions && (_jsxs("div", { className: "bg-white dark:bg-gray-800 p-3 rounded-lg border border-gray-200 dark:border-gray-700 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider block mb-1", children: "Category" }), _jsx(Input, { placeholder: "Section (e.g., Day 1, Transport)", value: newCategory, onChange: (e) => setNewCategory(e.target.value), list: "section-suggestions", className: "text-sm" }), _jsx("datalist", { id: "section-suggestions", children: categories.map(category => (_jsx("option", { value: category }, category))) })] }), _jsx(SplitTypeSelector, { value: splitType, onChange: (type) => setSplitType(type) }), splitType !== "equal" && (_jsx(ParticipantSelector, { participants: splitParticipants, onChange: setSplitParticipants, onSplitsChange: setSplits, availableUsers: groupParticipants })), _jsx(SplitInputs, { splitType: splitType, totalAmount: parseFloat(newAmount) || 0, participants: splitParticipants, splits: splits, onChange: setSplits }), _jsxs("div", { children: [_jsx(Button, { onClick: handleGetLocation, disabled: gettingLocation || uploading, className: "w-full flex items-center justify-center gap-2 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-200 dark:border-gray-600 rounded-lg p-2 text-sm text-gray-600 dark:text-gray-300 transition-colors", children: gettingLocation ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "w-4 h-4 animate-spin" }), _jsx("span", { children: "Getting..." })] })) : (_jsxs(_Fragment, { children: [_jsx(Navigation, { className: "w-4 h-4" }), _jsx("span", { children: "Add Location" })] })) }), newLocation && (_jsxs("div", { className: "mt-2 p-2 bg-white dark:bg-gray-700 rounded-lg border border-teal-200 dark:border-teal-800 flex items-center justify-between gap-2", children: [_jsxs("a", { href: newLocation, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500 hover:underline truncate flex-1", children: [_jsx(MapPin, { className: "w-4 h-4 inline mr-1" }), "View Location"] }), _jsx("button", { onClick: () => setNewLocation(null), className: "text-red-500 hover:text-red-600", children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsxs("div", { children: [_jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-500 cursor-pointer hover:text-teal-500 transition-colors bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-2", children: [_jsx(ImageIcon, { className: "w-4 h-4" }), receiptFile ? (_jsx("span", { className: "text-teal-500 truncate max-w-[150px]", children: receiptFile.name })) : ("Add Receipt"), _jsx(Input, { type: "file", className: "hidden", accept: "image/*", onChange: (e) => { var _a; return setReceiptFile(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null); } })] }), receiptFile && (_jsxs(Button, { onClick: () => setReceiptFile(null), className: "mt-2 w-full text-red-500 hover:text-red-600 text-xs flex items-center justify-center gap-2", variant: "ghost", children: [_jsx(Trash2, { className: "w-3 h-3" }), "Remove Receipt"] }))] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider block mb-1", children: "Description" }), _jsx(Textarea, { value: newDescription, onChange: (e) => setNewDescription(e.target.value), placeholder: "Add details...", className: "w-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-2 text-xs text-gray-900 dark:text-white outline-none focus:border-teal-500 resize-none h-16" })] })] })), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: resetForm, disabled: uploading || gettingLocation, children: "Cancel" }), _jsxs(Button, { size: "sm", onClick: handleCreate, disabled: uploading || gettingLocation, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white", children: [uploading && _jsx(Loader2, { className: "w-3 h-3 mr-1 animate-spin" }), expenseId ? "Update" : "Add"] })] })] })), !showSettleMode &&
+                            expenses.map((e) => {
+                                var _a, _b, _c;
+                                return e.title == "Internal_Settlement" ?
+                                    (_jsxs("div", { className: "w-full p-3 flex items-start gap-3 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors group text-left", children: [_jsx("div", { className: "mt-1 p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg text-teal-500 flex-shrink-0", children: _jsx(PiggyBankIcon, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-200 truncate", children: ["Paid to ", (_a = e.splits[0]) === null || _a === void 0 ? void 0 : _a.userId] }), _jsxs("p", { className: "text-sm font-bold text-gray-900 dark:text-white flex-shrink-0 ml-2", children: ["\u20B9", e.amount, " ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: e.currency })] })] }), _jsxs("div", { className: "text-[10px] text-gray-500 mt-1", children: ["by ", (_b = e.paidBy[0]) === null || _b === void 0 ? void 0 : _b.userId, " \u2022 ", new Date(e.date).toLocaleDateString()] })] })] }))
+                                    : (_jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/30 border border-gray-100 dark:border-gray-800 rounded-xl transition-colors overflow-hidden", children: [_jsxs("button", { onClick: () => setExpandedExpenseId(expandedExpenseId === e._id ? null : e._id), className: "w-full p-3 flex items-start gap-3 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors group text-left", children: [_jsx("div", { className: "mt-1 p-2 bg-teal-100 dark:bg-teal-900/30 rounded-lg text-teal-500 flex-shrink-0", children: _jsx(Receipt, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-200 truncate", children: e.title }), _jsxs("p", { className: "text-sm font-bold text-gray-900 dark:text-white flex-shrink-0 ml-2", children: ["\u20B9", e.amount, " ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: e.currency })] })] }), _jsxs("div", { className: "text-[10px] text-gray-500 mt-1", children: ["by ", (_c = e.paidBy[0]) === null || _c === void 0 ? void 0 : _c.userId, " \u2022 ", new Date(e.date).toLocaleDateString()] })] }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform flex-shrink-0 ${expandedExpenseId === e._id ? "rotate-180" : ""}` })] }), expandedExpenseId === e._id && (_jsxs("div", { className: "bg-white dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 p-3 space-y-3", children: [e.category && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Category" }), _jsx("p", { className: "text-xs text-gray-700 dark:text-gray-300", children: e.category })] })), (e.location || e.receipt) && _jsxs("div", { className: "flex flex-row w-full gap-2", children: [e.location && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Location" }), _jsxs("a", { href: e.location.startsWith("http")
+                                                                            ? e.location
+                                                                            : `https://maps.google.com/?q=${e.location}`, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500 hover:underline flex items-center gap-1", children: [_jsx(MapPin, { className: "w-3 h-3" }), "View on Map"] })] })), e.receipt && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Receipt" }), _jsxs("a", { href: e.receipt, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-500 hover:underline flex items-center gap-1", children: [_jsx(Receipt, { className: "w-3 h-3" }), "View Receipt"] })] }))] }), e.description && (_jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Description" }), _jsx("p", { className: "text-xs text-gray-700 dark:text-gray-300 line-clamp-3", children: e.description })] })), _jsx(Button, { size: "sm", onClick: () => {
+                                                            setSelectedExpenseForSplit(e);
+                                                            setShowSplitModal(true);
+                                                        }, className: "w-full text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300 text-xs border border-teal-200 dark:border-teal-800 bg-teal-50 dark:bg-teal-900/20", variant: "outline", children: "View Split Details" }), (e.createdBy === currentUserId || isAdmin) && (_jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { size: "sm", onClick: () => handleEdit(e), className: "flex-1 text-xs", variant: "outline", children: [_jsx(Pencil, { className: "w-3 h-3 mr-1" }), "Edit"] }), _jsxs(Button, { size: "sm", onClick: () => handleDelete(e._id), className: "flex-1 text-xs text-red-600 hover:text-red-700 border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20", variant: "outline", children: [_jsx(Trash2, { className: "w-3 h-3 mr-1" }), "Delete"] })] }))] }))] }, e._id));
+                            })] })) }), isFeatureEnabled && !loading && (_jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 space-y-2", children: showSettleMode ? (_jsx(Button, { onClick: () => setShowSettleMode(false), className: "w-full bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white rounded-lg", children: "Back to Expenses" })) : (_jsxs(_Fragment, { children: [!isAdding && (_jsxs(Button, { onClick: () => {
+                                setExpenseId(null);
+                                setIsAdding(true);
+                                setSplitParticipants([]);
+                            }, className: "w-full bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white rounded-lg flex items-center justify-center gap-2", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Expense"] })), userOwesAmount() > 0 && !isAdding && (_jsxs(Button, { onClick: () => setShowSettleMode(true), variant: "outline", className: "w-full rounded-lg border-teal-500 text-teal-600 hover:bg-teal-50 dark:hover:bg-teal-900/10", children: [_jsx(CreditCard, { className: "w-4 h-4 mr-2" }), "Settle Debts (\u20B9", userOwesAmount().toFixed(2), ")"] }))] })) })), showSplitModal && selectedExpenseForSplit && (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-end z-50", children: _jsxs("div", { className: "w-full bg-white dark:bg-gray-900 rounded-t-2xl p-4 max-h-96 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Split Details" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                        setShowSplitModal(false);
+                                        setSelectedExpenseForSplit(null);
+                                    }, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 p-3 rounded-lg border border-teal-100 dark:border-teal-800", children: [_jsx("p", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 uppercase tracking-wider mb-2", children: selectedExpenseForSplit.title }), _jsxs("p", { className: "text-sm font-bold text-teal-900 dark:text-teal-100", children: ["\u20B9", selectedExpenseForSplit.amount, " ", selectedExpenseForSplit.currency] }), _jsxs("p", { className: "text-[10px] text-teal-600 dark:text-teal-400 mt-1", children: ["Split Type: ", _jsx("span", { className: "font-semibold capitalize", children: selectedExpenseForSplit.splitType })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider", children: "Individual Splits" }), selectedExpenseForSplit.splits.map((split, idx) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: split.userId }), split.percentage && (_jsxs("p", { className: "text-[10px] text-gray-500", children: [split.percentage, "%"] })), split.shares && (_jsxs("p", { className: "text-[10px] text-gray-500", children: [split.shares, " shares"] }))] }), _jsxs("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: ["\u20B9", split.amount.toFixed(2)] })] }, idx)))] })] })] }) })), _jsx(ExpenseAnalyticsDialog, { conversationId: conversationId, open: showAnalytics, onClose: () => setShowAnalytics(false) })] }));
+}

package/dist/chat/MessageBubble.d.ts

@@ -0,0 +1,18 @@
+import type { Message, Participant } from "@myrjfa/state/dist/lib/models/chat";
+interface MessageBubbleProps {
+    message: Message;
+    participants: Participant[];
+    currentUserId: string;
+    showSender?: boolean;
+    senderProfilePic?: string;
+    onEdit?: (message: Message) => void;
+    onDelete?: (messageId: string) => void;
+    onReply?: (message: Message) => void;
+    onReactionAdd?: (messageId: string, emoji: string) => void;
+    onReactionRemove?: (messageId: string) => void;
+    onScrollToReply?: (messageId: string) => void;
+    onVote?: (pollId: string, optionIndex: number) => void;
+}
+export declare function MessageBubble({ message, participants, currentUserId, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply, onVote }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MessageBubble.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/chat/MessageBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,oCAAoC,CAAC;AASrF,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,MAAM,EACT,EAAE,kBAAkB,2CA0mBpB"}

package/dist/chat/MessageBubble.js

@@ -0,0 +1,284 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, CheckCheck, Reply, MoreHorizontal, Pencil as PencilIcon, Trash2, PlusCircleIcon, Smile } from "lucide-react";
+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";
+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, 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(() => {
+        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 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));
+            }
+            // 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}`));
+            }
+            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") {
+                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 ", (_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"}
+                            ${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(([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 ${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"] }), 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: () => {
+                                                        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: () => {
+                                                                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: () => {
+                                                                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

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

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