@myrjfa/ui 1.0.8 → 1.0.9

package/dist/chat/ChatMain.d.ts

@@ -0,0 +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 {};
+//# sourceMappingURL=ChatMain.d.ts.map

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

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

package/dist/chat/ChatMain.js

@@ -0,0 +1,239 @@
+"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 }))] }));
+}

package/dist/chat/ChatSidebar.d.ts

@@ -0,0 +1,13 @@
+import type { Conversation } from "@myrjfa/state/dist/lib/models/chat";
+interface ChatSidebarProps {
+    conversations: Conversation[];
+    activeConversation: Conversation | null;
+    onSelect: (conv: Conversation) => void;
+    isConnected: boolean;
+    currentUserId: string;
+    onlineUsers?: Set<string>;
+    typingUsers?: Map<string, string[]>;
+}
+export declare function ChatSidebar({ conversations, activeConversation, onSelect, isConnected, currentUserId, onlineUsers, typingUsers }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSidebar.d.ts","sourceRoot":"","sources":["../../src/chat/ChatSidebar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvE,UAAU,gBAAgB;IACtB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,kBAAkB,EAAE,YAAY,GAAG,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;IACrB,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,WAAW,CAAC,EACxB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,WAAW,EACX,aAAa,EACb,WAAW,EACX,WAAW,EACd,EAAE,gBAAgB,2CAoElB"}

package/dist/chat/ChatSidebar.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MessageCircle, Plus, Wifi, WifiOff } from "lucide-react";
+import { Input } from "../misc/input";
+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) {
+            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) || "";
+            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 }) })] }));
+}

package/dist/chat/ConversationList.d.ts

@@ -0,0 +1,12 @@
+import type { Conversation } from "@myrjfa/state/dist/lib/models/chat";
+interface ChatListProps {
+    conversations: Conversation[];
+    activeConversation: Conversation | null;
+    onSelect: (conv: Conversation) => void;
+    currentUserId: string;
+    onlineUsers?: Set<string>;
+    typingUsers?: Map<string, string[]>;
+}
+export declare function ConversationList({ conversations, activeConversation, onSelect, currentUserId, onlineUsers, typingUsers }: ChatListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConversationList.d.ts.map

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

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

package/dist/chat/ConversationList.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Users, User, MessageCircle } 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;
+    function getDisplayName(conv) {
+        if (conv.type === "group")
+            return conv.name || "Group Chat";
+        var other = conv.participants.find(function (p) { return 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.
+        return (other === null || other === void 0 ? void 0 : other.userId) || "Chat";
+    }
+    function getDisplayImage(conv) {
+        if (conv.type === "group")
+            return conv.image || "";
+        var other = conv.participants.find(function (p) { return 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; });
+        return other === null || other === void 0 ? void 0 : other.userId;
+    }
+    function isOtherOnline(conv) {
+        if (conv.type !== "individual")
+            return false;
+        var 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();
+        if (diff < 60000)
+            return "Just now";
+        if (diff < 3600000)
+            return "".concat(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);
+        if (!users || users.length === 0)
+            return null;
+        if (users.length === 1)
+            return "typing...";
+        return "".concat(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) {
+            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));
+        }) }));
+}

package/dist/chat/ExpensePanel.d.ts

@@ -0,0 +1,8 @@
+interface ExpensePanelProps {
+    conversationId: string;
+    currentUserId: string;
+    isFullScreen?: boolean;
+}
+export declare function ExpensePanel({ conversationId, currentUserId, isFullScreen }: ExpensePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExpensePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpensePanel.d.ts","sourceRoot":"","sources":["../../src/chat/ExpensePanel.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,YAAoB,EAAE,EAAE,iBAAiB,2CAwStG"}