@myrjfa/ui 1.1.0 → 1.1.2

package/dist/chat/ChatMain.d.ts

@@ -1,9 +1,11 @@
 import type { Conversation } from "@myrjfa/state/dist/lib/models/chat";
+import { UserRole } from "@myrjfa/state/dist/lib/models/props";
 interface ChatMainProps {
     conversation: Conversation;
     currentUserId: string;
     onBack: () => void;
+    onCallAlert?: (targetId: string, targetRole: UserRole) => void;
 }
-export declare function ChatMain({ conversation, currentUserId, onBack, }: ChatMainProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMain({ conversation, currentUserId, onBack, onCallAlert, }: ChatMainProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChatMain.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMain.d.ts","sourceRoot":"","sources":["../../src/chat/ChatMain.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAYvE,UAAU,aAAa;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACrB,YAAY,EACZ,aAAa,EACb,MAAM,GACT,EAAE,aAAa,2CA6Yf"}
+{"version":3,"file":"ChatMain.d.ts","sourceRoot":"","sources":["../../src/chat/ChatMain.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAW,MAAM,oCAAoC,CAAC;AAahF,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAE/D,UAAU,aAAa;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,QAAQ,CAAC,EACrB,YAAY,EACZ,aAAa,EACb,MAAM,EACN,WAAW,GACd,EAAE,aAAa,2CA4iBf"}

package/dist/chat/ChatMain.js

@@ -1,40 +1,4 @@
 "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 };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useRef, useCallback } from "react";
 import { chatApi } from "@myrjfa/state/dist/lib/actions/chat";
@@ -42,7 +6,7 @@ import { useChatContext } from "@myrjfa/state/dist/lib/context/ChatContext";
 import { MessageBubble } from "./MessageBubble";
 import { MessageInput } from "./MessageInput";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../misc/dropdown-menu";
-import { ArrowLeft, Info, MoreVertical, Users } from "lucide-react";
+import { ArrowLeft, Info, MoreVertical, Users, Phone } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
 import { MilestonePanel } from "./MilestonePanel";
@@ -52,193 +16,258 @@ import { GroupInfoDialog } from "./dialogs/GroupInfoDialog";
 import { GroupInfoViewDialog } from "./dialogs/GroupInfoViewDialog";
 import { ListTodo, ReceiptText, MessageCircle, FilePenLine } from "lucide-react";
 import { Button } from "../misc/button";
-import { showAlert } from "../misc/alertdialogclaude";
-export function ChatMain(_a) {
-    var _this = this;
-    var _b, _c;
-    var conversation = _a.conversation, currentUserId = _a.currentUserId, onBack = _a.onBack;
-    var _d = useChatContext(), socket = _d.socket, messages = _d.messages, setMessages = _d.setMessages, sendMessage = _d.sendMessage, typingUsers = _d.typingUsers, onlineUsers = _d.onlineUsers, editMessage = _d.editMessage, toggleMessageReaction = _d.toggleMessageReaction, deleteMessage = _d.deleteMessage, refreshConversations = _d.refreshConversations;
-    var messagesEndRef = useRef(null);
-    var messagesContainerRef = useRef(null);
-    var _e = React.useState("chat"), activePanel = _e[0], setActivePanel = _e[1];
-    var _f = React.useState(false), isParticipantsOpen = _f[0], setIsParticipantsOpen = _f[1];
-    var _g = React.useState(false), isGroupInfoOpen = _g[0], setIsGroupInfoOpen = _g[1];
-    var _h = React.useState(false), isGroupInfoViewOpen = _h[0], setIsGroupInfoViewOpen = _h[1];
-    var _j = React.useState(true), loading = _j[0], setLoading = _j[1];
-    var _k = React.useState(null), replyMessage = _k[0], setReplyMessage = _k[1];
-    var router = useRouter();
+import { confirmActions, deleteActions, showAlert } from "../misc/alertdialogclaude";
+import { userApi } from "@myrjfa/state/dist/lib/actions/user";
+import { checkPhonePermission } from "../utils/permissions";
+export function ChatMain({ conversation, currentUserId, onBack, onCallAlert, }) {
+    var _a, _b, _c, _d, _e;
+    const { socket, messages, setMessages, sendMessage, typingUsers, onlineUsers, editMessage, toggleMessageReaction, deleteMessage, markRead, createPoll, votePoll, refreshConversations } = useChatContext();
+    const messagesEndRef = useRef(null);
+    const messagesContainerRef = useRef(null);
+    const [activePanel, setActivePanel] = React.useState("chat");
+    const [isParticipantsOpen, setIsParticipantsOpen] = React.useState(false);
+    const [isGroupInfoOpen, setIsGroupInfoOpen] = React.useState(false);
+    const [isGroupInfoViewOpen, setIsGroupInfoViewOpen] = React.useState(false);
+    const [loading, setLoading] = React.useState(true);
+    const [replyMessage, setReplyMessage] = React.useState(null);
+    const [editingMessage, setEditingMessage] = React.useState(null);
+    const [hasBlocked, setHasBlocked] = React.useState(false);
+    const [isBlocked, setIsBlocked] = React.useState(false);
+    const otherUser = conversation.participants.length == 2 ? conversation.participants.find(p => p.userId !== currentUserId) : null;
+    const router = useRouter();
     // Reset active panel when conversation changes
-    useEffect(function () {
+    useEffect(() => {
         setActivePanel("chat");
+        setIsBlocked(false);
+        setHasBlocked(false);
+        setIsGroupInfoOpen(false);
+        setIsGroupInfoViewOpen(false);
+        setIsParticipantsOpen(false);
+        setEditingMessage(null);
+        setReplyMessage(null);
     }, [conversation._id]);
-    useEffect(function () {
-        var cancelled = false;
+    useEffect(() => {
+        let cancelled = false;
         setLoading(true);
         chatApi
             .getMessages(conversation._id, { limit: 50 })
-            .then(function (data) {
+            .then((data) => {
             if (!cancelled) {
                 setMessages(data);
                 setLoading(false);
                 if (document.visibilityState === "visible") {
-                    var unreadIds = data.filter(function (m) { var _a; return !((_a = m.readBy) === null || _a === void 0 ? void 0 : _a.some(function (r) { return r.userId === currentUserId; })) && m.senderId !== currentUserId; }).map(function (m) { return m._id; });
+                    const unreadIds = data.filter(m => { var _a; return !((_a = m.readBy) === null || _a === void 0 ? void 0 : _a.some(r => r.userId === currentUserId)) && m.senderId !== currentUserId; }).map(m => m._id);
                     if (unreadIds.length > 0) {
-                        chatApi.markRead(conversation._id, unreadIds).catch(console.error);
+                        markRead(conversation._id, unreadIds);
                     }
                 }
             }
         })
-            .catch(function (e) {
+            .catch((e) => {
             console.error(e);
             if (!cancelled)
                 setLoading(false);
         });
-        return function () {
+        return () => {
             cancelled = true;
         };
     }, [conversation._id, setMessages]);
-    useEffect(function () {
+    useEffect(() => {
         var _a;
         (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
     }, [messages]);
-    var handleEdit = function (messageId, text) {
-        var newText = window.prompt("Edit message:", text);
-        if (newText !== null && newText.trim() !== "" && newText !== text) {
-            editMessage(messageId, newText);
+    // Check block status for individual chats
+    useEffect(() => {
+        if (conversation.type === 'individual') {
+            if (otherUser) {
+                userApi.checkIfBlocked(otherUser.userId, otherUser.role).then(b => {
+                    setIsBlocked(b.isBlocked);
+                    setHasBlocked(b.hasBlocked);
+                });
+            }
         }
+    }, [conversation._id, conversation.type, currentUserId]);
+    const initiateEdit = (message) => {
+        setEditingMessage(message);
+        setReplyMessage(message);
     };
-    var handleReact = function (messageId, emoji) {
+    const handleEdit = useCallback((messageId, newText) => {
+        if (newText !== null && newText.trim() !== "" && newText !== (editingMessage === null || editingMessage === void 0 ? void 0 : editingMessage.content.text)) {
+            editMessage(messageId, newText);
+        }
+        setEditingMessage(null);
+        setReplyMessage(null);
+    }, [editMessage, editingMessage, replyMessage]);
+    const handleReact = (messageId, emoji) => {
         if (emoji) {
             toggleMessageReaction(messageId, emoji);
         }
     };
-    var handleUnreact = function (messageId) {
+    const handleUnreact = (messageId) => {
         if (messageId) {
             toggleMessageReaction(messageId, undefined);
         }
     };
-    var handleDelete = function (messageId) {
-        if (window.confirm("Are you sure you want to unsend this message?")) {
+    const handleDelete = (messageId) => {
+        let confirmUnsend = false;
+        showAlert("Are you sure you want to unsend this message?", undefined, deleteActions(() => confirmUnsend = true));
+        if (confirmUnsend) {
             deleteMessage(messageId);
         }
     };
-    var handleLeaveGroup = function () { return __awaiter(_this, void 0, void 0, function () {
-        var err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(isAdmin && conversation.participants.filter(function (p) { return p.chatRole == "admin"; }).length < 2)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, showAlert("Please assign someone else admin before leaving group")];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-                case 2:
-                    if (!window.confirm("Are you sure you want to leave this group?")) return [3 /*break*/, 6];
-                    _a.label = 3;
-                case 3:
-                    _a.trys.push([3, 5, , 6]);
-                    return [4 /*yield*/, chatApi.removeParticipant(conversation._id, currentUserId)];
-                case 4:
-                    _a.sent();
-                    onBack();
-                    return [3 /*break*/, 6];
-                case 5:
-                    err_1 = _a.sent();
-                    console.error("Failed to leave group:", err_1);
-                    return [3 /*break*/, 6];
-                case 6: return [2 /*return*/];
+    const handleLeaveGroup = async () => {
+        if (isAdmin && conversation.participants.filter(p => p.chatRole == "admin").length < 2) {
+            await showAlert("Please assign someone else admin before leaving group");
+            return;
+        }
+        let confirmLeave = true;
+        showAlert("Are you sure you want to leave this group?", undefined, confirmActions(() => confirmLeave = false));
+        if (confirmLeave) {
+            try {
+                await chatApi.removeParticipant(conversation._id, currentUserId);
+                onBack();
             }
-        });
-    }); };
-    var handleDeleteConversation = function () { return __awaiter(_this, void 0, void 0, function () {
-        var confirmMsg, err_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    confirmMsg = isGroup ? "Are you sure you want to delete this group?" : "Are you sure you want to delete this chat?";
-                    if (!window.confirm(confirmMsg)) return [3 /*break*/, 4];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, chatApi.deleteConversation(conversation._id)];
-                case 2:
-                    _a.sent();
-                    onBack();
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_2 = _a.sent();
-                    console.error("Failed to delete conversation:", err_2);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+            catch (err) {
+                console.error("Failed to leave group:", err);
             }
-        });
-    }); };
-    var handleSend = useCallback(function (text, files) {
+        }
+    };
+    const handleBlockUser = async () => {
+        if (otherUser) {
+            const response = await userApi.blockUser(otherUser.userId, otherUser.role);
+            if (response.error) {
+                console.log("Error blocking user " + otherUser.userId + "Error: " + response.error);
+                await showAlert("Error blocking user");
+            }
+            else {
+                setHasBlocked(true);
+            }
+        }
+    };
+    const handleUnblockUser = async () => {
+        if (otherUser) {
+            const response = await userApi.unblockUser(otherUser.userId, otherUser.role);
+            if (response.error) {
+                console.log("Error unblocking user " + otherUser.userId + "Error: " + response.error);
+                await showAlert("Error unblocking user");
+            }
+            else {
+                setHasBlocked(false);
+            }
+        }
+    };
+    const handleDeleteConversation = async () => {
+        const confirmMsg = isGroup ? "Are you sure you want to delete this group?" : "Are you sure you want to delete this chat?";
+        let confirmDelete = false;
+        showAlert(confirmMsg, undefined, deleteActions(() => confirmDelete = true));
+        if (confirmDelete) {
+            try {
+                await chatApi.deleteConversation(conversation._id);
+                onBack();
+            }
+            catch (err) {
+                console.error("Failed to delete conversation:", err);
+            }
+        }
+    };
+    const handleSend = useCallback((text, files) => {
         sendMessage(conversation._id, text, files, replyMessage === null || replyMessage === void 0 ? void 0 : replyMessage._id);
         setReplyMessage(null);
     }, [conversation._id, sendMessage, replyMessage]);
-    var handleScrollToReply = function (messageId) {
-        var element = document.getElementById("message-".concat(messageId));
+    const handleOpenPrivateChat = useCallback((userId) => {
+        // This is a simplified navigation. In a real application, you might
+        // want to check if a conversation with this user already exists
+        // and navigate to it, or create a new one.
+        router.push(`/chat?u=${userId}`);
+    }, [router]);
+    const handleScrollToReply = (messageId) => {
+        const element = document.getElementById(`message-${messageId}`);
         if (element) {
             element.scrollIntoView({ behavior: "smooth", block: "center" });
             element.classList.add("ring-2", "ring-teal-500");
-            setTimeout(function () {
+            setTimeout(() => {
                 element.classList.remove("ring-2", "ring-teal-500");
             }, 2000);
         }
     };
-    var handleTypingStart = useCallback(function () {
+    const handleEnableMilestones = () => {
+        setIsGroupInfoOpen(true);
+    };
+    const handleEnableExpenses = () => {
+        setIsGroupInfoOpen(true);
+    };
+    const handleCall = async () => {
+        const hasPermission = await checkPhonePermission();
+        if (!hasPermission) {
+            showAlert("Phone permission required for calls");
+            return;
+        }
+        if (otherUser) {
+            onCallAlert === null || onCallAlert === void 0 ? void 0 : onCallAlert(otherUser.userId, otherUser.role);
+            // Initiate tel: link (will prompt to call on mobile/desktop)
+            window.location.href = `tel:${otherUser.userId}`;
+        }
+    };
+    const handleTypingStart = useCallback(() => {
         socket === null || socket === void 0 ? void 0 : socket.emit("typing:start", { conversationId: conversation._id });
     }, [socket, conversation._id]);
-    var handleTypingStop = useCallback(function () {
+    const handleTypingStop = useCallback(() => {
         socket === null || socket === void 0 ? void 0 : socket.emit("typing:stop", { conversationId: conversation._id });
     }, [socket, conversation._id]);
     function getDisplayName() {
         if (conversation.type === "group")
             return conversation.name || "Group Chat";
-        var other = conversation.participants.find(function (p) { return p.userId !== currentUserId; });
+        const other = conversation.participants.find((p) => p.userId !== currentUserId);
         return (other === null || other === void 0 ? void 0 : other.userId) || "Chat";
     }
     function getSubtitle() {
         if (conversation.type === "group") {
-            return "".concat(conversation.participants.length, " members");
+            return `${conversation.participants.length} members`;
         }
-        var other = conversation.participants.find(function (p) { return p.userId !== currentUserId; });
+        const other = conversation.participants.find((p) => p.userId !== currentUserId);
         if (other && onlineUsers.has(other.userId))
             return "Online";
         return "Offline";
     }
-    var getSenderImage = function (senderId) {
-        var p = conversation.participants.find(function (p) { return p.userId === senderId; });
+    const getSenderImage = (senderId) => {
+        const p = conversation.participants.find(p => p.userId === senderId);
         return (p === null || p === void 0 ? void 0 : p.profilePic) || "";
     };
-    var handleInfo = function () {
+    const handleInfo = () => {
         if (conversation.type === "individual") {
-            var other = conversation.participants.find(function (p) { return p.userId !== currentUserId; });
+            const other = conversation.participants.find(p => p.userId !== currentUserId);
             if (other) {
-                router.push("/profile/".concat(other.role, "/").concat(other.userId));
+                router.push(`/profile/${other.role}/${other.userId}`);
             }
         }
         else if (conversation.type === "group") {
             setIsGroupInfoViewOpen(true);
         }
     };
-    var typing = typingUsers.get(conversation._id);
-    var isGroup = conversation.type === "group";
-    var isAdmin = ((_b = conversation.participants.find(function (p) { return p.userId === currentUserId; })) === null || _b === void 0 ? void 0 : _b.chatRole) === "admin";
-    return (_jsxs("div", { className: "flex flex-col h-full bg-gray-50 dark:bg-gray-950", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 shadow-sm flex-shrink-0", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, className: "md:hidden rounded-full", children: _jsx(ArrowLeft, { className: "w-5 h-5" }) }), _jsxs(Avatar, { className: "w-10 h-10 shadow-md flex-shrink-0", children: [_jsx(AvatarImage, { src: isGroup ? conversation.image : (_c = conversation.participants.find(function (p) { return p.userId !== currentUserId; })) === null || _c === void 0 ? void 0 : _c.profilePic }), _jsx(AvatarFallback, { className: isGroup
+    const typing = typingUsers.get(conversation._id);
+    const isGroup = conversation.type === "group";
+    const isAdmin = ((_a = conversation.participants.find(p => p.userId === currentUserId)) === null || _a === void 0 ? void 0 : _a.chatRole) === "admin";
+    return (_jsxs("div", { className: "flex flex-col h-full bg-gray-50 dark:bg-gray-950", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 shadow-sm flex-shrink-0", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, className: "md:hidden rounded-full", children: _jsx(ArrowLeft, { className: "w-5 h-5" }) }), _jsxs(Avatar, { className: "w-10 h-10 shadow-md flex-shrink-0", children: [_jsx(AvatarImage, { src: isGroup ? conversation.image : isBlocked ? undefined : otherUser === null || otherUser === void 0 ? void 0 : otherUser.profilePic }), _jsx(AvatarFallback, { className: isGroup
                                     ? "bg-gradient-to-br from-teal-500 to-cyan-600 text-white"
-                                    : "bg-gradient-to-br from-teal-400 to-cyan-500 text-white", children: isGroup ? _jsx(Users, { className: "w-5 h-5" }) : getDisplayName().charAt(0).toUpperCase() })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h2", { className: "font-semibold text-gray-900 dark:text-white truncate", children: getDisplayName() }), _jsx("p", { className: "text-xs text-gray-500", children: typing && typing.length > 0 ? (_jsx("span", { className: "text-teal-600 dark:text-teal-400 italic", children: typing.length === 1 ? "typing..." : "".concat(typing.length, " people typing...") })) : (getSubtitle()) })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: handleInfo, className: "rounded-full text-gray-400 flex-shrink-0", children: _jsx(Info, { className: "w-5 h-5" }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full text-gray-400 flex-shrink-0", children: _jsx(MoreVertical, { className: "w-5 h-5" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: handleInfo, children: "Info" }), isGroup && _jsxs(DropdownMenuItem, { onClick: function () { return setIsParticipantsOpen(true); }, children: [_jsx(Users, { className: "w-4 h-4 mr-2" }), isAdmin ? "Manage Members" : "View Members"] }), isAdmin && isGroup && (_jsxs(DropdownMenuItem, { onClick: function () { return setIsGroupInfoOpen(true); }, children: [_jsx(FilePenLine, { className: "w-4 h-4 mr-2" }), "Edit Group Info"] })), isAdmin && _jsx(DropdownMenuItem, { className: "text-red-500", onClick: handleDeleteConversation, children: isGroup ? "Delete Group" : "Delete Chat" }), isGroup && (_jsx(DropdownMenuItem, { className: "text-red-600", onClick: handleLeaveGroup, children: "Leave Group" }))] })] })] }), isGroup && (_jsxs("div", { className: "flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex-shrink-0", children: [_jsxs("button", { onClick: function () { return setActivePanel("chat"); }, className: "flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ".concat(activePanel === "chat"
+                                    : "bg-gradient-to-br from-teal-400 to-cyan-500 text-white", children: isGroup ? _jsx(Users, { className: "w-5 h-5" }) : getDisplayName().charAt(0).toUpperCase() })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h2", { className: "font-semibold text-gray-900 dark:text-white truncate", children: getDisplayName() }), _jsx("p", { className: "text-xs text-gray-500", children: typing && typing.length > 0 ? (_jsx("span", { className: "text-teal-600 dark:text-teal-400 italic", children: typing.length === 1 ? "typing..." : `${typing.length} people typing...` })) : (getSubtitle()) })] }), !isGroup && !hasBlocked && !isBlocked && (_jsx(Button, { variant: "ghost", size: "icon", onClick: handleCall, className: "rounded-full text-gray-400 hover:text-teal-500 flex-shrink-0", title: "Call", children: _jsx(Phone, { className: "w-5 h-5" }) })), !isBlocked && !hasBlocked && _jsx(Button, { variant: "ghost", size: "icon", onClick: handleInfo, className: "rounded-full text-gray-400 flex-shrink-0", children: _jsx(Info, { className: "w-5 h-5" }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full text-gray-400 flex-shrink-0", children: _jsx(MoreVertical, { className: "w-5 h-5" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [!isBlocked && !hasBlocked && _jsx(DropdownMenuItem, { onClick: handleInfo, children: "Info" }), isGroup && _jsxs(DropdownMenuItem, { onClick: () => setIsParticipantsOpen(true), children: [_jsx(Users, { className: "w-4 h-4 mr-2" }), isAdmin ? "Manage Members" : "View Members"] }), isAdmin && isGroup && (_jsxs(DropdownMenuItem, { onClick: () => setIsGroupInfoOpen(true), children: [_jsx(FilePenLine, { className: "w-4 h-4 mr-2" }), "Edit Group Info"] })), !isGroup && (otherUser === null || otherUser === void 0 ? void 0 : otherUser.role) == "user" && !isBlocked && (hasBlocked ?
+                                        (_jsx(DropdownMenuItem, { className: "text-red-500", onClick: handleUnblockUser, children: "Unblock User" })) :
+                                        (_jsx(DropdownMenuItem, { className: "text-red-500", onClick: handleBlockUser, children: "Block User" }))), isAdmin && _jsx(DropdownMenuItem, { className: "text-red-500", onClick: handleDeleteConversation, children: isGroup ? "Delete Group" : "Delete Chat" }), isGroup && (_jsx(DropdownMenuItem, { className: "text-red-600", onClick: handleLeaveGroup, children: "Leave Group" }))] })] })] }), isGroup && (_jsxs("div", { className: "flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex-shrink-0", children: [_jsxs("button", { onClick: () => setActivePanel("chat"), className: `flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ${activePanel === "chat"
                             ? "border-teal-500 text-teal-600 dark:text-teal-400"
-                            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"), children: [_jsx(MessageCircle, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Chat" })] }), _jsxs("button", { onClick: function () { return setActivePanel("milestones"); }, className: "flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ".concat(activePanel === "milestones"
+                            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`, children: [_jsx(MessageCircle, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Chat" })] }), _jsxs("button", { onClick: () => setActivePanel("milestones"), className: `flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ${activePanel === "milestones"
                             ? "border-teal-500 text-teal-600 dark:text-teal-400"
-                            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"), children: [_jsx(ListTodo, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Milestones" })] }), _jsxs("button", { onClick: function () { return setActivePanel("expenses"); }, className: "flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ".concat(activePanel === "expenses"
+                            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`, children: [_jsx(ListTodo, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Milestones" })] }), _jsxs("button", { onClick: () => setActivePanel("expenses"), className: `flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ${activePanel === "expenses"
                             ? "border-teal-500 text-teal-600 dark:text-teal-400"
-                            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"), children: [_jsx(ReceiptText, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Expenses" })] })] })), _jsxs("div", { className: "flex-1 flex overflow-hidden gap-0", children: [_jsxs("div", { className: "flex flex-col min-w-0 ".concat(isGroup && activePanel !== "chat" ? "hidden md:flex" : "flex", " flex-1"), children: [_jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", ref: messagesContainerRef, children: loading ? (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx("div", { className: "animate-spin w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full" }) })) : messages.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-gray-400", children: [_jsx("p", { className: "text-lg", children: "\uD83D\uDC4B Start the conversation!" }), _jsx("p", { className: "text-sm mt-1", children: "Send a message to get things going" })] })) : (_jsxs("div", { className: "max-w-4xl mx-auto space-y-0.5", children: [messages.map(function (msg, i) {
-                                            var prevMsg = messages[i - 1];
-                                            var showSender = isGroup &&
+                            : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`, children: [_jsx(ReceiptText, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Expenses" })] })] })), _jsxs("div", { className: "flex-1 flex overflow-hidden gap-0", children: [_jsxs("div", { className: `flex flex-col min-w-0 ${isGroup && activePanel !== "chat" ? "hidden md:flex" : "flex"} flex-1`, children: [_jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 custom-scrollbar bg-indigo-50/20 dark:bg-gray-900/40", ref: messagesContainerRef, children: loading ? (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx("div", { className: "animate-spin w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full" }) })) : messages.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-gray-400", children: [_jsx("p", { className: "text-lg", children: "\uD83D\uDC4B Start the conversation!" }), _jsx("p", { className: "text-sm mt-1", children: "Send a message to get things going" })] })) : (_jsxs("div", { className: "max-w-4xl mx-auto space-y-4", children: [messages.map((msg, i) => {
+                                            const prevMsg = messages[i - 1];
+                                            const currDate = new Date(msg.createdAt).toLocaleDateString();
+                                            const prevDate = prevMsg ? new Date(prevMsg.createdAt).toLocaleDateString() : null;
+                                            const showDateBadge = currDate !== prevDate;
+                                            const showSender = isGroup &&
                                                 msg.senderId !== currentUserId &&
-                                                (!prevMsg || prevMsg.senderId !== msg.senderId);
-                                            return (_jsx("div", { id: "message-".concat(msg._id), className: "transition-all", children: _jsx(MessageBubble, { message: msg, currentUserId: currentUserId, showSender: showSender, senderProfilePic: getSenderImage(msg.senderId), onEdit: handleEdit, onDelete: handleDelete, onReply: function (msg) { return setReplyMessage(msg); }, onReactionAdd: handleReact, onReactionRemove: handleUnreact, onScrollToReply: handleScrollToReply }) }, msg._id));
-                                        }), _jsx("div", { ref: messagesEndRef })] })) }), _jsx(MessageInput, { onSend: handleSend, onTypingStart: handleTypingStart, onTypingStop: handleTypingStop, replyTo: replyMessage, onCancelReply: function () { return setReplyMessage(null); }, onAddMilestone: function () { return setActivePanel("milestones"); }, onAddExpense: function () { return setActivePanel("expenses"); }, activePanel: activePanel })] }), isGroup && (_jsxs(_Fragment, { children: [activePanel === "milestones" && (_jsx("div", { className: "hidden md:flex md:flex-col w-80 border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId }) })), activePanel === "expenses" && (_jsx("div", { className: "hidden md:flex md:flex-col w-80 border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(ExpensePanel, { conversationId: conversation._id, currentUserId: currentUserId }) }))] })), isGroup && activePanel === "milestones" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFullScreen: true }) })), isGroup && activePanel === "expenses" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(ExpensePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFullScreen: true }) }))] }), _jsx(ParticipantsDialog, { open: isParticipantsOpen, onOpenChange: setIsParticipantsOpen, conversation: conversation, currentUserId: currentUserId, onUpdate: refreshConversations }), isGroup && (_jsx(GroupInfoDialog, { open: isGroupInfoOpen, onOpenChange: setIsGroupInfoOpen, conversation: conversation, onUpdate: refreshConversations })), isGroup && (_jsx(GroupInfoViewDialog, { open: isGroupInfoViewOpen, onOpenChange: setIsGroupInfoViewOpen, conversation: conversation }))] }));
+                                                (!prevMsg || prevMsg.senderId !== msg.senderId || showDateBadge);
+                                            return (_jsxs(React.Fragment, { children: [showDateBadge && (_jsx("div", { className: "flex justify-center my-4", children: _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-[10px] font-medium px-3 py-1 rounded-full shadow-sm uppercase tracking-wider", children: new Date(msg.createdAt).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }) })), _jsx(MessageBubble, { message: msg, participants: conversation.participants, currentUserId: currentUserId, showSender: showSender, senderProfilePic: getSenderImage(msg.senderId), onEdit: initiateEdit, onDelete: handleDelete, onReply: (msg) => setReplyMessage(msg), onReactionAdd: handleReact, onReactionRemove: handleUnreact, onScrollToReply: handleScrollToReply, onVote: (pid, idx) => votePoll(pid, idx) })] }, msg._id));
+                                        }), _jsx("div", { ref: messagesEndRef })] })) }), !isBlocked && !hasBlocked && _jsx(MessageInput, { onSend: handleSend, onTypingStart: handleTypingStart, onTypingStop: handleTypingStop, replyTo: replyMessage, editMessage: editingMessage, onEdit: handleEdit, onCancelEdit: () => {
+                                    setEditingMessage(null);
+                                    setReplyMessage(null);
+                                }, onCancelReply: () => setReplyMessage(null), onAddMilestone: () => setActivePanel("milestones"), onAddExpense: () => setActivePanel("expenses"), onCreatePoll: (q, opts, multi) => createPoll(conversation._id, q, opts, multi), participants: conversation.participants, activePanel: activePanel })] }), isGroup && (_jsxs(_Fragment, { children: [activePanel === "milestones" && (_jsx("div", { className: "hidden md:flex md:flex-col w-80 border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFeatureEnabled: (_b = conversation.features) === null || _b === void 0 ? void 0 : _b.milestones, isAdmin: isAdmin, onEnableFeature: handleEnableMilestones }) })), activePanel === "expenses" && (_jsx("div", { className: "hidden md:flex md:flex-col w-80 border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(ExpensePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFeatureEnabled: (_c = conversation.features) === null || _c === void 0 ? void 0 : _c.expenses, isAdmin: isAdmin, onEnableFeature: handleEnableExpenses }) }))] })), isGroup && activePanel === "milestones" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFullScreen: true, isFeatureEnabled: (_d = conversation.features) === null || _d === void 0 ? void 0 : _d.milestones, isAdmin: isAdmin, onEnableFeature: handleEnableMilestones }) })), isGroup && activePanel === "expenses" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(ExpensePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFullScreen: true, isFeatureEnabled: (_e = conversation.features) === null || _e === void 0 ? void 0 : _e.expenses, isAdmin: isAdmin, onEnableFeature: handleEnableExpenses }) }))] }), _jsx(ParticipantsDialog, { open: isParticipantsOpen, onOpenChange: setIsParticipantsOpen, conversation: conversation, currentUserId: currentUserId, onUpdate: refreshConversations }), isGroup && (_jsx(GroupInfoDialog, { open: isGroupInfoOpen, onOpenChange: setIsGroupInfoOpen, conversation: conversation, onUpdate: refreshConversations })), isGroup && (_jsx(GroupInfoViewDialog, { open: isGroupInfoViewOpen, onOpenChange: setIsGroupInfoViewOpen, conversation: conversation }))] }));
 }

package/dist/chat/ChatSidebar.js

@@ -7,18 +7,17 @@ import { ScrollArea } from "../misc/scroll-area";
 import { ConversationList } from "./ConversationList";
 import { NewChatDialog } from "./dialogs/NewChatDialog";
 import { NewGroupDialog } from "./dialogs/NewGroupDialog";
-export function ChatSidebar(_a) {
-    var conversations = _a.conversations, activeConversation = _a.activeConversation, onSelect = _a.onSelect, isConnected = _a.isConnected, currentUserId = _a.currentUserId, onlineUsers = _a.onlineUsers, typingUsers = _a.typingUsers;
-    var _b = useState(false), showNewChat = _b[0], setShowNewChat = _b[1];
-    var _c = useState(""), search = _c[0], setSearch = _c[1];
-    var filteredConversations = Array.isArray(conversations)
-        ? conversations.filter(function (c) {
+export function ChatSidebar({ conversations, activeConversation, onSelect, isConnected, currentUserId, onlineUsers, typingUsers }) {
+    const [showNewChat, setShowNewChat] = useState(false);
+    const [search, setSearch] = useState("");
+    const filteredConversations = Array.isArray(conversations)
+        ? conversations.filter(c => {
             var _a;
             if (!search)
                 return true;
-            var name = c.name || ((_a = c.participants.find(function (p) { return p.userId !== currentUserId; })) === null || _a === void 0 ? void 0 : _a.userId) || "";
+            const name = c.name || ((_a = c.participants.find(p => p.userId !== currentUserId)) === null || _a === void 0 ? void 0 : _a.userId) || "";
             return name.toLowerCase().includes(search.toLowerCase());
         })
         : [];
-    return (_jsxs("div", { className: "w-full md:w-96 md:min-w-[384px] border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 flex flex-col h-full ".concat(activeConversation ? "hidden md:flex" : "flex"), children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MessageCircle, { className: "w-6 h-6 text-teal-500" }), _jsx("h1", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: "Messages" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: isConnected ? (_jsx(Wifi, { className: "w-4 h-4 text-green-500" })) : (_jsx(WifiOff, { className: "w-4 h-4 text-red-500" })) }), _jsx("button", { onClick: function () { return setShowNewChat(!showNewChat); }, className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors text-gray-600 dark:text-gray-400 cursor-pointer", children: _jsx(Plus, { className: "w-5 h-5" }) })] })] }), _jsx("div", { className: "p-3", children: _jsx(Input, { placeholder: "Search conversations...", value: search, onChange: function (e) { return setSearch(e.target.value); }, className: "bg-gray-100 dark:bg-gray-800 border-none" }) }), showNewChat && (_jsxs("div", { className: "px-3 pb-3 flex gap-2", children: [_jsx(NewChatDialog, {}), _jsx(NewGroupDialog, {})] })), _jsx(ScrollArea, { className: "flex-1", children: _jsx(ConversationList, { conversations: filteredConversations, activeConversation: activeConversation, onSelect: onSelect, currentUserId: currentUserId, onlineUsers: onlineUsers, typingUsers: typingUsers }) })] }));
+    return (_jsxs("div", { className: `w-full md:w-96 md:min-w-[384px] border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 flex flex-col h-full ${activeConversation ? "hidden md:flex" : "flex"}`, children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MessageCircle, { className: "w-6 h-6 text-teal-500" }), _jsx("h1", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: "Messages" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: isConnected ? (_jsx(Wifi, { className: "w-4 h-4 text-green-500" })) : (_jsx(WifiOff, { className: "w-4 h-4 text-red-500" })) }), _jsx("button", { onClick: () => setShowNewChat(!showNewChat), className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors text-gray-600 dark:text-gray-400 cursor-pointer", children: _jsx(Plus, { className: "w-5 h-5" }) })] })] }), _jsx("div", { className: "p-3", children: _jsx(Input, { placeholder: "Search conversations...", value: search, onChange: (e) => setSearch(e.target.value), className: "bg-gray-100 dark:bg-gray-800 border-none" }) }), showNewChat && (_jsxs("div", { className: "px-3 pb-3 flex gap-2", children: [_jsx(NewChatDialog, {}), _jsx(NewGroupDialog, {})] })), _jsx(ScrollArea, { className: "flex-1", children: _jsx(ConversationList, { conversations: filteredConversations, activeConversation: activeConversation, onSelect: onSelect, currentUserId: currentUserId, onlineUsers: onlineUsers, typingUsers: typingUsers }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../src/chat/ConversationList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvE,UAAU,aAAa;IACnB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,kBAAkB,EAAE,YAAY,GAAG,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACvC;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,WAAuB,EACvB,WAAuB,EAC1B,EAAE,aAAa,2CA6Gf"}
+{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../src/chat/ConversationList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvE,UAAU,aAAa;IACnB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,kBAAkB,EAAE,YAAY,GAAG,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACvC;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,WAAuB,EACvB,WAAuB,EAC1B,EAAE,aAAa,2CA4Hf"}

package/dist/chat/ConversationList.js

@@ -1,14 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Users, User, MessageCircle } from "lucide-react";
+import { Users, User, MessageCircle, ListTodo, ReceiptText, AtSign } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
 import { cn } from "@myrjfa/state/dist/lib/utils";
-export function ConversationList(_a) {
-    var conversations = _a.conversations, activeConversation = _a.activeConversation, onSelect = _a.onSelect, currentUserId = _a.currentUserId, _b = _a.onlineUsers, onlineUsers = _b === void 0 ? new Set() : _b, _c = _a.typingUsers, typingUsers = _c === void 0 ? new Map() : _c;
+export function ConversationList({ conversations, activeConversation, onSelect, currentUserId, onlineUsers = new Set(), typingUsers = new Map() }) {
     function getDisplayName(conv) {
         if (conv.type === "group")
             return conv.name || "Group Chat";
-        var other = conv.participants.find(function (p) { return p.userId !== currentUserId; });
+        const other = conv.participants.find((p) => p.userId !== currentUserId);
         // We might want to fetch user details if name is missing? 
         // For now, assume ID or fetched data. 
         // In real app, we should populate this.
@@ -17,52 +16,55 @@ export function ConversationList(_a) {
     function getDisplayImage(conv) {
         if (conv.type === "group")
             return conv.image || "";
-        var other = conv.participants.find(function (p) { return p.userId !== currentUserId; });
+        const other = conv.participants.find((p) => p.userId !== currentUserId);
         return (other === null || other === void 0 ? void 0 : other.profilePic) || "";
     }
     // Identify the "other" user for avatar
     function getOtherParticipantId(conv) {
         if (conv.type === "group")
             return null;
-        var other = conv.participants.find(function (p) { return p.userId !== currentUserId; });
+        const other = conv.participants.find((p) => p.userId !== currentUserId);
         return other === null || other === void 0 ? void 0 : other.userId;
     }
     function isOtherOnline(conv) {
         if (conv.type !== "individual")
             return false;
-        var otherAndId = getOtherParticipantId(conv);
+        const otherAndId = getOtherParticipantId(conv);
         return otherAndId ? onlineUsers.has(otherAndId) : false;
     }
     function formatTime(dateStr) {
         if (!dateStr)
             return "";
-        var date = new Date(dateStr);
-        var now = new Date();
-        var diff = now.getTime() - date.getTime();
+        const date = new Date(dateStr);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
         if (diff < 60000)
             return "Just now";
         if (diff < 3600000)
-            return "".concat(Math.floor(diff / 60000), "m");
+            return `${Math.floor(diff / 60000)}m`;
         if (diff < 86400000)
             return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
         return date.toLocaleDateString([], { month: "short", day: "numeric" });
     }
     function getTypingText(convId) {
-        var users = typingUsers.get(convId);
+        const users = typingUsers.get(convId);
         if (!users || users.length === 0)
             return null;
         if (users.length === 1)
             return "typing...";
-        return "".concat(users.length, " people typing...");
+        return `${users.length} people typing...`;
     }
     if (conversations.length === 0) {
         return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-gray-400 p-8", children: [_jsx(MessageCircle, { className: "w-16 h-16 mb-4 opacity-30" }), _jsx("p", { className: "text-lg font-medium", children: "No conversations yet" }), _jsx("p", { className: "text-sm mt-1", children: "Start a new chat to begin" })] }));
     }
-    return (_jsx("div", { className: "flex-1 overflow-y-auto", children: conversations.map(function (conv) {
+    return (_jsx("div", { className: "flex-1 overflow-y-auto", children: conversations.map((conv) => {
             var _a, _b;
-            var isActive = (activeConversation === null || activeConversation === void 0 ? void 0 : activeConversation._id) === conv._id;
-            var typing = getTypingText(conv._id);
-            var isOnline = isOtherOnline(conv);
-            return (_jsxs("button", { onClick: function () { return onSelect(conv); }, className: cn("w-full flex items-center gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 border-b border-gray-100 dark:border-gray-800", isActive ? "bg-indigo-50 dark:bg-indigo-950/30 border-l-4 border-l-indigo-500" : "border-l-4 border-l-transparent"), children: [_jsxs("div", { className: "relative", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: getDisplayImage(conv) }), _jsx(AvatarFallback, { className: conv.type === "group" ? "bg-indigo-100 text-indigo-600" : "bg-teal-100 text-teal-600", children: conv.type === "group" ? _jsx(Users, { className: "w-4 h-4" }) : _jsx(User, { className: "w-4 h-4" }) })] }), isOnline && (_jsx("span", { className: "absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-900 rounded-full" }))] }), _jsxs("div", { className: "flex-1 min-w-0 text-left", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-semibold text-gray-900 dark:text-gray-100 truncate text-sm", children: getDisplayName(conv) }), _jsx("span", { className: "text-xs text-gray-400 ml-2 whitespace-nowrap", children: formatTime((_a = conv.lastMessage) === null || _a === void 0 ? void 0 : _a.sentAt) })] }), _jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5", children: typing ? (_jsx("span", { className: "text-indigo-500 italic", children: typing })) : (((_b = conv.lastMessage) === null || _b === void 0 ? void 0 : _b.content) || "No messages yet") })] })] }, conv._id));
+            const isActive = (activeConversation === null || activeConversation === void 0 ? void 0 : activeConversation._id) === conv._id;
+            const typing = getTypingText(conv._id);
+            const isOnline = isOtherOnline(conv);
+            const participant = conv.participants.find(p => p.userId === currentUserId);
+            const unread = (participant === null || participant === void 0 ? void 0 : participant.unreadCounts) || { messages: 0, milestones: 0, expenses: 0, mentions: 0 };
+            const totalUnread = unread.messages + unread.milestones + unread.expenses + unread.mentions;
+            return (_jsxs("button", { onClick: () => onSelect(conv), className: cn("w-full flex items-center gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 border-b border-gray-100 dark:border-gray-800", isActive ? "bg-indigo-50 dark:bg-indigo-950/30 border-l-4 border-l-indigo-500" : "border-l-4 border-l-transparent"), children: [_jsxs("div", { className: "relative", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: getDisplayImage(conv) }), _jsx(AvatarFallback, { className: conv.type === "group" ? "bg-indigo-100 text-indigo-600" : "bg-teal-100 text-teal-600", children: conv.type === "group" ? _jsx(Users, { className: "w-4 h-4" }) : _jsx(User, { className: "w-4 h-4" }) })] }), isOnline && (_jsx("span", { className: "absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-900 rounded-full" }))] }), _jsxs("div", { className: "flex-1 min-w-0 text-left", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-semibold text-gray-900 dark:text-gray-100 truncate text-sm", children: getDisplayName(conv) }), _jsx("span", { className: "text-xs text-gray-400 ml-2 whitespace-nowrap", children: formatTime((_a = conv.lastMessage) === null || _a === void 0 ? void 0 : _a.sentAt) })] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5 flex-1", children: typing ? (_jsx("span", { className: "text-indigo-500 italic", children: typing })) : (((_b = conv.lastMessage) === null || _b === void 0 ? void 0 : _b.content) || "No messages yet") }), totalUnread > 0 && (_jsxs("div", { className: "flex gap-1 items-center shrink-0 mt-0.5", children: [unread.mentions > 0 && _jsx(AtSign, { className: "w-3 h-3 text-red-500" }), unread.milestones > 0 && _jsx(ListTodo, { className: "w-3 h-3 text-teal-500" }), unread.expenses > 0 && _jsx(ReceiptText, { className: "w-3 h-3 text-orange-500" }), _jsx("span", { className: "bg-indigo-600 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[20px] text-center shadow-sm", children: totalUnread })] }))] })] })] }, conv._id));
         }) }));
 }