@myrjfa/ui 1.0.8 → 1.0.10

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,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

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

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,23 @@
+"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({ 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;
+            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 ${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

@@ -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,2CA4Hf"}

package/dist/chat/ConversationList.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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({ conversations, activeConversation, onSelect, currentUserId, onlineUsers = new Set(), typingUsers = new Map() }) {
+    function getDisplayName(conv) {
+        if (conv.type === "group")
+            return conv.name || "Group Chat";
+        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.
+        return (other === null || other === void 0 ? void 0 : other.userId) || "Chat";
+    }
+    function getDisplayImage(conv) {
+        if (conv.type === "group")
+            return conv.image || "";
+        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;
+        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;
+        const otherAndId = getOtherParticipantId(conv);
+        return otherAndId ? onlineUsers.has(otherAndId) : false;
+    }
+    function formatTime(dateStr) {
+        if (!dateStr)
+            return "";
+        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 `${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) {
+        const users = typingUsers.get(convId);
+        if (!users || users.length === 0)
+            return null;
+        if (users.length === 1)
+            return "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((conv) => {
+            var _a, _b;
+            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));
+        }) }));
+}

package/dist/chat/ExpensePanel.d.ts

@@ -0,0 +1,11 @@
+interface ExpensePanelProps {
+    conversationId: string;
+    currentUserId: string;
+    isFullScreen?: boolean;
+    isFeatureEnabled?: boolean;
+    isAdmin?: boolean;
+    onEnableFeature?: () => void;
+}
+export declare function ExpensePanel({ conversationId, currentUserId, isFullScreen, isFeatureEnabled, isAdmin, onEnableFeature }: 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":"AAiBA,UAAU,iBAAiB;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,EACzB,cAAc,EACd,aAAa,EACb,YAAoB,EACpB,gBAAwB,EACxB,OAAe,EACf,eAAe,EAClB,EAAE,iBAAiB,2CAw0BnB"}