@myrjfa/ui 1.0.9 → 1.0.10

package/dist/chat/ChatMain.d.ts

@@ -1,9 +1,9 @@
-import type { Conversation } from "@myrjfa/state/dist/lib/models/chat";
-interface ChatMainProps {
-    conversation: Conversation;
-    currentUserId: string;
-    onBack: () => void;
-}
-export declare function ChatMain({ conversation, currentUserId, onBack, }: ChatMainProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import type { Conversation } from "@myrjfa/state/dist/lib/models/chat";
+interface ChatMainProps {
+    conversation: Conversation;
+    currentUserId: string;
+    onBack: () => void;
+}
+export declare function ChatMain({ conversation, currentUserId, onBack, }: 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,2CAsYf"}
+{"version":3,"file":"ChatMain.d.ts","sourceRoot":"","sources":["../../src/chat/ChatMain.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAW,MAAM,oCAAoC,CAAC;AAchF,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,2CA2iBf"}

package/dist/chat/ChatMain.js

@@ -1,239 +1,272 @@
-"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";
-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 { useRouter } from "next/navigation";
-import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
-import { MilestonePanel } from "./MilestonePanel";
-import { ExpensePanel } from "./ExpensePanel";
-import { ParticipantsDialog } from "./dialogs/ParticipantsDialog";
-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, addMessageReaction = _d.addMessageReaction, 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();
-    // Reset active panel when conversation changes
-    useEffect(function () {
-        setActivePanel("chat");
-    }, [conversation._id]);
-    useEffect(function () {
-        var cancelled = false;
-        setLoading(true);
-        chatApi
-            .getMessages(conversation._id, { limit: 50 })
-            .then(function (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; });
-                    if (unreadIds.length > 0) {
-                        chatApi.markRead(conversation._id, unreadIds).catch(console.error);
-                    }
-                }
-            }
-        })
-            .catch(function (e) {
-            console.error(e);
-            if (!cancelled)
-                setLoading(false);
-        });
-        return function () {
-            cancelled = true;
-        };
-    }, [conversation._id, setMessages]);
-    useEffect(function () {
-        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);
-        }
-    };
-    var handleReact = function (messageId, emoji) {
-        if (emoji) {
-            addMessageReaction(messageId, emoji);
-        }
-    };
-    var handleDelete = function (messageId) {
-        if (window.confirm("Are you sure you want to unsend this message?")) {
-            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*/];
-            }
-        });
-    }); };
-    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*/];
-            }
-        });
-    }); };
-    var handleSend = useCallback(function (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));
-        if (element) {
-            element.scrollIntoView({ behavior: "smooth", block: "center" });
-            element.classList.add("ring-2", "ring-teal-500");
-            setTimeout(function () {
-                element.classList.remove("ring-2", "ring-teal-500");
-            }, 2000);
-        }
-    };
-    var handleTypingStart = useCallback(function () {
-        socket === null || socket === void 0 ? void 0 : socket.emit("typing:start", { conversationId: conversation._id });
-    }, [socket, conversation._id]);
-    var handleTypingStop = useCallback(function () {
-        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; });
-        return (other === null || other === void 0 ? void 0 : other.userId) || "Chat";
-    }
-    function getSubtitle() {
-        if (conversation.type === "group") {
-            return "".concat(conversation.participants.length, " members");
-        }
-        var other = conversation.participants.find(function (p) { return 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; });
-        return (p === null || p === void 0 ? void 0 : p.profilePic) || "";
-    };
-    var handleInfo = function () {
-        if (conversation.type === "individual") {
-            var other = conversation.participants.find(function (p) { return p.userId !== currentUserId; });
-            if (other) {
-                router.push("/profile/".concat(other.role, "/").concat(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
-                                    ? "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"
-                            ? "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-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-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 &&
-                                                msg.senderId !== currentUserId &&
-                                                (!prevMsg || prevMsg.senderId !== msg.senderId);
-                                            return (_jsx("div", { id: "message-".concat(msg._id), className: "transition-all", children: _jsx(MessageBubble, { message: msg, isOwn: msg.senderId === currentUserId, showSender: showSender, senderProfilePic: getSenderImage(msg.senderId), onEdit: handleEdit, onDelete: handleDelete, onReply: function (msg) { return setReplyMessage(msg); }, onReactionAdd: handleReact, 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 }))] }));
-}
+"use client";
+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";
+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, Phone } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
+import { MilestonePanel } from "./MilestonePanel";
+import { ExpensePanel } from "./ExpensePanel";
+import { ParticipantsDialog } from "./dialogs/ParticipantsDialog";
+import { GroupInfoDialog } from "./dialogs/GroupInfoDialog";
+import { GroupInfoViewDialog } from "./dialogs/GroupInfoViewDialog";
+import { ListTodo, ReceiptText, MessageCircle, FilePenLine } from "lucide-react";
+import { Button } from "../misc/button";
+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, }) {
+    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(() => {
+        setActivePanel("chat");
+        setIsBlocked(false);
+        setHasBlocked(false);
+        setIsGroupInfoOpen(false);
+        setIsGroupInfoViewOpen(false);
+        setIsParticipantsOpen(false);
+        setEditingMessage(null);
+        setReplyMessage(null);
+    }, [conversation._id]);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        chatApi
+            .getMessages(conversation._id, { limit: 50 })
+            .then((data) => {
+            if (!cancelled) {
+                setMessages(data);
+                setLoading(false);
+                if (document.visibilityState === "visible") {
+                    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) {
+                        markRead(conversation._id, unreadIds);
+                    }
+                }
+            }
+        })
+            .catch((e) => {
+            console.error(e);
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [conversation._id, setMessages]);
+    useEffect(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    // 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);
+    };
+    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);
+        }
+    };
+    const handleUnreact = (messageId) => {
+        if (messageId) {
+            toggleMessageReaction(messageId, undefined);
+        }
+    };
+    const handleDelete = (messageId) => {
+        let confirmUnsend = false;
+        showAlert("Are you sure you want to unsend this message?", undefined, deleteActions(() => confirmUnsend = true));
+        if (confirmUnsend) {
+            deleteMessage(messageId);
+        }
+    };
+    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();
+            }
+            catch (err) {
+                console.error("Failed to leave group:", err);
+            }
+        }
+    };
+    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]);
+    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(() => {
+                element.classList.remove("ring-2", "ring-teal-500");
+            }, 2000);
+        }
+    };
+    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) {
+            // 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]);
+    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";
+        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 `${conversation.participants.length} members`;
+        }
+        const other = conversation.participants.find((p) => p.userId !== currentUserId);
+        if (other && onlineUsers.has(other.userId))
+            return "Online";
+        return "Offline";
+    }
+    const getSenderImage = (senderId) => {
+        const p = conversation.participants.find(p => p.userId === senderId);
+        return (p === null || p === void 0 ? void 0 : p.profilePic) || "";
+    };
+    const handleInfo = () => {
+        if (conversation.type === "individual") {
+            const other = conversation.participants.find(p => p.userId !== currentUserId);
+            if (other) {
+                router.push(`/profile/${other.role}/${other.userId}`);
+            }
+        }
+        else if (conversation.type === "group") {
+            setIsGroupInfoViewOpen(true);
+        }
+    };
+    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..." : `${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: () => 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: () => 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 ${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 || 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 }))] }));
+}