@myrjfa/ui 1.0.8 → 1.0.9

package/dist/chat/ExpensePanel.js

@@ -0,0 +1,215 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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, MoreVertical, Users, MapPin, Image as ImageIcon, Loader2, Navigation } from "lucide-react";
+import { Button } from "../misc/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../misc/dropdown-menu";
+export function ExpensePanel(_a) {
+    var _this = this;
+    var conversationId = _a.conversationId, currentUserId = _a.currentUserId, _b = _a.isFullScreen, isFullScreen = _b === void 0 ? false : _b;
+    var _c = useState([]), expenses = _c[0], setExpenses = _c[1];
+    var _d = useState(null), balances = _d[0], setBalances = _d[1];
+    var _e = useState(true), loading = _e[0], setLoading = _e[1];
+    var _f = useState(false), isAdding = _f[0], setIsAdding = _f[1];
+    var _g = useState(""), newTitle = _g[0], setNewTitle = _g[1];
+    var _h = useState(""), newAmount = _h[0], setNewAmount = _h[1];
+    var _j = useState(null), newLocation = _j[0], setNewLocation = _j[1];
+    var _k = useState(null), receiptFile = _k[0], setReceiptFile = _k[1];
+    var _l = useState(false), uploading = _l[0], setUploading = _l[1];
+    var _m = useState(false), gettingLocation = _m[0], setGettingLocation = _m[1];
+    var fetchData = function () { return __awaiter(_this, void 0, void 0, function () {
+        var _a, expData, balData;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setLoading(true);
+                    return [4 /*yield*/, Promise.all([
+                            chatApi.getExpenses(conversationId),
+                            chatApi.getBalances(conversationId)
+                        ])];
+                case 1:
+                    _a = _b.sent(), expData = _a[0], balData = _a[1];
+                    setExpenses(expData);
+                    setBalances(balData);
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        fetchData();
+    }, [conversationId]);
+    var handleGetLocation = function () {
+        if (!navigator.geolocation) {
+            alert("Geolocation not supported by your browser");
+            return;
+        }
+        setGettingLocation(true);
+        navigator.geolocation.getCurrentPosition(function (position) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, latitude, longitude, response, data, address, err_1;
+            var _b, _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _a = position.coords, latitude = _a.latitude, longitude = _a.longitude;
+                        _e.label = 1;
+                    case 1:
+                        _e.trys.push([1, 4, , 5]);
+                        return [4 /*yield*/, fetch("https://nominatim.openstreetmap.org/reverse?format=json&lat=".concat(latitude, "&lon=").concat(longitude), { headers: { 'Accept-Language': 'en' } })];
+                    case 2:
+                        response = _e.sent();
+                        return [4 /*yield*/, response.json()];
+                    case 3:
+                        data = _e.sent();
+                        address = ((_b = data.address) === null || _b === void 0 ? void 0 : _b.city) || ((_c = data.address) === null || _c === void 0 ? void 0 : _c.town) || ((_d = data.address) === null || _d === void 0 ? void 0 : _d.village) || "".concat(latitude.toFixed(4), ", ").concat(longitude.toFixed(4));
+                        setNewLocation(address);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        err_1 = _e.sent();
+                        // Fallback to coordinates if reverse geocoding fails
+                        setNewLocation("".concat(latitude.toFixed(4), ", ").concat(longitude.toFixed(4)));
+                        return [3 /*break*/, 5];
+                    case 5:
+                        setGettingLocation(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); }, function (error) {
+            console.error("Geolocation error:", error);
+            alert("Failed to get location. Please check permissions.");
+            setGettingLocation(false);
+        });
+    };
+    var handleCreate = function () { return __awaiter(_this, void 0, void 0, function () {
+        var receiptUrl, formData, res, amount, expense_1, balData, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!newTitle.trim() || !newAmount)
+                        return [2 /*return*/];
+                    setUploading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    receiptUrl = undefined;
+                    if (!receiptFile) return [3 /*break*/, 3];
+                    formData = new FormData();
+                    formData.append("chatFiles", receiptFile);
+                    return [4 /*yield*/, chatApi.uploadFiles(formData)];
+                case 2:
+                    res = _a.sent();
+                    if (res.data && res.data.files && res.data.files.length > 0) {
+                        receiptUrl = res.data.files[0].location;
+                    }
+                    _a.label = 3;
+                case 3:
+                    amount = parseFloat(newAmount);
+                    return [4 /*yield*/, chatApi.createExpense(conversationId, {
+                            title: newTitle.trim(),
+                            amount: amount,
+                            paidBy: [{ userId: currentUserId, amount: amount }],
+                            location: newLocation || undefined,
+                            receipt: receiptUrl
+                        })];
+                case 4:
+                    expense_1 = _a.sent();
+                    if (!expense_1) return [3 /*break*/, 6];
+                    setExpenses(function (prev) { return __spreadArray([expense_1], prev, true); });
+                    setNewTitle("");
+                    setNewAmount("");
+                    setNewLocation(null);
+                    setReceiptFile(null);
+                    setIsAdding(false);
+                    return [4 /*yield*/, chatApi.getBalances(conversationId)];
+                case 5:
+                    balData = _a.sent();
+                    setBalances(balData);
+                    _a.label = 6;
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    err_2 = _a.sent();
+                    console.error("Failed to create expense:", err_2);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setUploading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDelete = function (id) { return __awaiter(_this, void 0, void 0, function () {
+        var balData;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!window.confirm("Are you sure you want to delete this expense?")) return [3 /*break*/, 3];
+                    return [4 /*yield*/, chatApi.deleteExpense(id)];
+                case 1:
+                    _a.sent();
+                    setExpenses(function (prev) { return prev.filter(function (e) { return e._id !== id; }); });
+                    return [4 /*yield*/, chatApi.getBalances(conversationId)];
+                case 2:
+                    balData = _a.sent();
+                    setBalances(balData);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var 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 ".concat(panelClasses), children: [_jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Expenses" }) }), 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(function (b) { return (_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 ".concat(b.netBalance >= 0 ? "text-green-600" : "text-red-500"), children: [b.netBalance >= 0 ? "+" : "", "\u20B9", b.netBalance.toFixed(2)] })] }, b.userId)); })] })), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 pt-0", children: 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" }) })) : expenses.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No expenses yet" })) : (_jsxs(_Fragment, { children: [isAdding && (_jsxs("div", { className: "bg-teal-50 dark:bg-teal-900/20 p-3 rounded-xl border border-teal-100 dark:border-teal-800", children: [_jsx("input", { autoFocus: true, value: newTitle, onChange: function (e) { return 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 mb-2 shadow-sm" }), _jsxs("div", { className: "relative mb-2", children: [_jsx("span", { className: "absolute left-2 top-2 text-gray-400 text-sm", children: "\u20B9" }), _jsx("input", { type: "number", value: newAmount, onChange: function (e) { return 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("div", { className: "mb-2 flex gap-2", children: [_jsx("button", { onClick: handleGetLocation, disabled: gettingLocation || uploading, className: "flex-1 flex items-center justify-center gap-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-200 dark:border-gray-700 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: "Get Location" })] })) }), newLocation && (_jsx("button", { onClick: function () { return setNewLocation(null); }, className: "px-2 py-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-red-500 transition-colors", title: "Clear location", children: "\u2715" }))] }), newLocation && (_jsxs("div", { className: "mb-2 p-2 bg-white dark:bg-gray-800 rounded-lg border border-teal-200 dark:border-teal-800 flex items-center gap-2", children: [_jsx(MapPin, { className: "w-4 h-4 text-teal-500 flex-shrink-0" }), _jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300 truncate", children: newLocation })] })), _jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsxs("label", { className: "flex-1 flex items-center gap-2 text-xs text-gray-500 cursor-pointer hover:text-teal-500 transition-colors bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-2", children: [_jsx(ImageIcon, { className: "w-4 h-4" }), receiptFile ? _jsx("span", { className: "text-teal-500 truncate max-w-[150px] text-xs", children: receiptFile.name }) : "Add Receipt", _jsx("input", { type: "file", className: "hidden", accept: "image/*", onChange: function (e) { var _a; return setReceiptFile(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null); } })] }), receiptFile && _jsx("button", { onClick: function () { return setReceiptFile(null); }, className: "text-red-400 hover:text-red-500 p-2", children: _jsx(Trash2, { className: "w-3 h-3" }) })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: function () {
+                                                setIsAdding(false);
+                                                setNewLocation(null);
+                                            }, 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" }), "Add"] })] })] })), expenses.map(function (e) {
+                            var _a;
+                            return (_jsxs("div", { className: "group flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800/30 border border-gray-100 dark:border-gray-800 rounded-xl transition-colors", 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] })] }), _jsxs("div", { className: "flex justify-between items-start mt-1 flex-wrap gap-1", children: [_jsxs("p", { className: "text-[10px] text-gray-400", children: ["by ", (_a = e.paidBy[0]) === null || _a === void 0 ? void 0 : _a.userId, " \u2022 ", new Date(e.date).toLocaleDateString()] }), (e.location || e.receipt) && (_jsxs("div", { className: "flex items-center gap-2 mt-1 flex-wrap", children: [e.location && (_jsxs("a", { href: e.location.startsWith('http') ? e.location : "https://maps.google.com/?q=".concat(e.location), target: "_blank", rel: "noopener noreferrer", className: "flex items-center text-[10px] text-blue-500 hover:underline", children: [_jsx(MapPin, { className: "w-3 h-3 mr-0.5" }), e.location.length > 20 ? e.location.substring(0, 20) + "..." : e.location] })), e.receipt && (_jsxs("a", { href: e.receipt, target: "_blank", rel: "noopener noreferrer", className: "flex items-center text-[10px] text-blue-500 hover:underline", children: [_jsx(Receipt, { className: "w-3 h-3 mr-0.5" }), "View"] }))] }))] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: "opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-all mt-2 flex-shrink-0", children: _jsx(MoreVertical, { className: "w-3 h-3 text-gray-400" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: function () { return handleDelete(e._id); }, children: [_jsx(Trash2, { className: "w-4 h-4 mr-2" }), "Delete"] }) })] })] }, e._id));
+                        })] })) }), !isAdding && (_jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsxs(Button, { onClick: function () { return setIsAdding(true); }, 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"] }) }))] }));
+}

package/dist/chat/MessageBubble.d.ts

@@ -0,0 +1,15 @@
+import type { Message } from "@myrjfa/state/dist/lib/models/chat";
+interface MessageBubbleProps {
+    message: Message;
+    isOwn: boolean;
+    showSender?: boolean;
+    senderProfilePic?: string;
+    onEdit?: (messageId: string, text: string) => void;
+    onDelete?: (messageId: string) => void;
+    onReply?: (message: Message) => void;
+    onReactionAdd?: (messageId: string, emoji: string) => void;
+    onScrollToReply?: (messageId: string) => void;
+}
+export declare function MessageBubble({ message, isOwn, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onScrollToReply }: 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,MAAM,oCAAoC,CAAC;AAUlE,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,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,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,eAAe,EAClB,EAAE,kBAAkB,2CAkdpB"}

package/dist/chat/MessageBubble.js

@@ -0,0 +1,197 @@
+"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 } from "react";
+import EmojiPicker from 'emoji-picker-react';
+var QUICK_REACTIONS = [
+    { emoji: "❤️", label: "love" },
+    { emoji: "👍", label: "like" },
+    { emoji: "👎", label: "dislike" },
+    { emoji: "✅", label: "check" },
+    { 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);
+    // Close reaction picker when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (reactionRef.current && !reactionRef.current.contains(event.target)) {
+                setShowQuickReactions(false);
+                setShowReactionPicker(false);
+            }
+        };
+        if (showQuickReactions || showReactionPicker) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return function () {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [showQuickReactions, showReactionPicker]);
+    // Close mobile menu when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (mobileMenuRef.current && !mobileMenuRef.current.contains(event.target)) {
+                setShowMobileMenu(false);
+            }
+        };
+        if (showMobileMenu) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return function () {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [showMobileMenu]);
+    // Position popup to stay within viewport and over message
+    useEffect(function () {
+        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;
+            // 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";
+            // 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) {
+                    // Enough space on left
+                    popup_1.style.right = "100%";
+                    popup_1.style.marginRight = "8px";
+                }
+                else {
+                    // Not enough space, position on right but keep within viewport
+                    popup_1.style.left = "100%";
+                    popup_1.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";
+                    }
+                }
+            }
+            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) {
+                    // Enough space on right
+                    popup_1.style.left = "100%";
+                    popup_1.style.marginLeft = "8px";
+                }
+                else {
+                    // Not enough space, position on left but keep within viewport
+                    popup_1.style.right = "100%";
+                    popup_1.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";
+                    }
+                }
+            }
+            // Position vertically - center on message
+            popup_1.style.top = "50%";
+            popup_1.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)";
+                }
+                else if (rect.top < padding_1) {
+                    popup_1.style.top = "0";
+                    popup_1.style.bottom = "auto";
+                    popup_1.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 }) }));
+    }
+    var 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));
+            }
+            if (emailRegex.test(part)) {
+                return (_jsxs("a", { href: "mailto:".concat(part), className: "underline hover:opacity-80 break-all text-indigo-500", children: [part, " "] }, i));
+            }
+            if (phoneRegex.test(part)) {
+                return (_jsxs("a", { href: "tel:".concat(part), className: "underline hover:opacity-80 break-all text-indigo-200", children: [part, " "] }, i));
+            }
+            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
+                                    ? "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-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) {
+                                    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 () {
+                                                    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 () {
+                                                                        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 () {
+                                                                        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) {
+                                                                    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 () {
+                                                                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 () {
+                                                        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 || "");
+                                                                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 () {
+                                                                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,14 @@
+interface MessageInputProps {
+    onSend: (text: string, files?: File[]) => void;
+    onTypingStart?: () => void;
+    onTypingStop?: () => void;
+    disabled?: boolean;
+    replyTo?: any;
+    onCancelReply?: () => void;
+    onAddMilestone?: () => void;
+    onAddExpense?: () => void;
+    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 {};
+//# 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":"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"}