@myrjfa/ui 0.3.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,19 @@
+# frontend-ui
+this is shared ui components library foe myrjfa-frontend
+
+## AI And Team Onboarding
+
+- Read `AGENTS.md` before changing shared UI components.
+- Read `wiki/PROJECT_MAP.md` before opening many source files.
+- Use `.agents/README.md` for shared UI workflow guidance.
+- Update `frontend-state` first when component props mirror backend/domain
+  contracts.
+- Check `Trippeaze-frontend-1` consumers before changing exported props.
+- Refresh the project map from the workspace root after structural changes:
+  `.\.agents\scripts\update-repo-map.ps1 -RepoPath .\frontend-ui`
+
+## Integration Role
+
+This package owns reusable React components, design primitives, dashboard UI,
+form sections, booking UI, chat UI, and visual building blocks for Trippeaze
+frontends.

package/dist/chat/ChatMain.d.ts

@@ -0,0 +1,12 @@
+import { type ChatActorModel, type Conversation } from "@myrjfa/state/dist/lib/models/chat";
+import { UserRole } from "@myrjfa/state/dist/lib/models/props";
+interface ChatMainProps {
+    conversation: Conversation;
+    currentUserId: string;
+    currentActorModel: ChatActorModel;
+    onBack: () => void;
+    onCallAlert?: (targetId: string, targetRole: UserRole) => void;
+}
+export declare function ChatMain({ conversation, currentUserId, currentActorModel, onBack, onCallAlert, }: 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,EAGH,KAAK,cAAc,EACnB,KAAK,YAAY,EAEpB,MAAM,oCAAoC,CAAC;AAiB5C,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAE/D,UAAU,aAAa;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,cAAc,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,QAAQ,CAAC,EACrB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,MAAM,EACN,WAAW,GACd,EAAE,aAAa,2CAgzBf"}

package/dist/chat/ChatMain.js

@@ -0,0 +1,390 @@
+"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, CalendarDays, Info, MoreVertical, Search, Trash2, Users, X } from "lucide-react";
+import { chatActorKey, isSameChatActor, } from "@myrjfa/state/dist/lib/models/chat";
+import { useRouter } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
+import { MilestonePanel } from "./MilestonePanel";
+import { ExpensePanel } from "./ExpensePanel";
+import { EventPanel } from "./EventPanel";
+import { PayAndSplitDialog } from "./dialogs/PayAndSplitDialog";
+import { PaymentProfileDialog } from "./dialogs/PaymentProfileDialog";
+import { HostWorkspaceDialog } from "./dialogs/HostWorkspaceDialog";
+import { ParticipantsDialog } from "./dialogs/ParticipantsDialog";
+import { GroupInfoDialog } from "./dialogs/GroupInfoDialog";
+import { GroupInfoViewDialog } from "./dialogs/GroupInfoViewDialog";
+import { ChatInfoDialog } from "./dialogs/ChatInfoDialog";
+import { ConversationSearchDialog } from "./dialogs/ConversationSearchDialog";
+import { ListTodo, ReceiptText, MessageCircle, FilePenLine } from "lucide-react";
+import { Button } from "../misc/button";
+import { showAlert } from "../misc/alertdialogclaude";
+export function ChatMain({ conversation, currentUserId, currentActorModel, onBack, onCallAlert, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { socket, messages, setMessages, sendMessage, typingUsers, onlineUsers, editMessage, toggleMessageReaction, deleteMessage, markRead, createPoll, votePoll, updatePoll, refreshConversations } = useChatContext();
+    const messagesEndRef = useRef(null);
+    const messagesContainerRef = useRef(null);
+    const draftTimerRef = useRef(null);
+    const [activePanel, setActivePanel] = React.useState("chat");
+    const [temporaryPanel, setTemporaryPanel] = React.useState(null);
+    const [isParticipantsOpen, setIsParticipantsOpen] = React.useState(false);
+    const [isGroupInfoOpen, setIsGroupInfoOpen] = React.useState(false);
+    const [isGroupInfoViewOpen, setIsGroupInfoViewOpen] = React.useState(false);
+    const [isChatInfoOpen, setIsChatInfoOpen] = React.useState(false);
+    const [isSearchOpen, setIsSearchOpen] = React.useState(false);
+    const [isPayAndSplitOpen, setIsPayAndSplitOpen] = React.useState(false);
+    const [isPaymentProfileOpen, setIsPaymentProfileOpen] = React.useState(false);
+    const [isHostWorkspaceOpen, setIsHostWorkspaceOpen] = React.useState(false);
+    const [hostComposerText, setHostComposerText] = React.useState(undefined);
+    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 currentActor = { actorId: currentUserId, actorModel: currentActorModel };
+    const otherUser = conversation.participants.length === 2
+        ? conversation.participants.find((participant) => !isSameChatActor(participant, currentActor))
+        : null;
+    const otherUserModel = (otherUser === null || otherUser === void 0 ? void 0 : otherUser.actorModel) || "User";
+    const router = useRouter();
+    const confirmDestructiveAction = async (message, actionLabel) => {
+        let confirmed = false;
+        await showAlert(message, "Please confirm", [
+            { label: "Cancel", variant: "outline", icon: _jsx(X, { className: "h-4 w-4" }), action: () => undefined },
+            {
+                label: actionLabel,
+                variant: "destructive",
+                icon: _jsx(Trash2, { className: "h-4 w-4" }),
+                action: () => { confirmed = true; },
+            },
+        ]);
+        return confirmed;
+    };
+    // Reset active panel when conversation changes
+    useEffect(() => {
+        setActivePanel("chat");
+        setTemporaryPanel(null);
+        setIsBlocked(false);
+        setHasBlocked(false);
+        setIsGroupInfoOpen(false);
+        setIsGroupInfoViewOpen(false);
+        setIsParticipantsOpen(false);
+        setIsChatInfoOpen(false);
+        setIsSearchOpen(false);
+        setIsPayAndSplitOpen(false);
+        setIsPaymentProfileOpen(false);
+        setIsHostWorkspaceOpen(false);
+        setHostComposerText(undefined);
+        setEditingMessage(null);
+        setReplyMessage(null);
+    }, [conversation._id]);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        if (conversation.preference.markedUnreadAt) {
+            void chatApi.updateConversationPreference(conversation._id, { markedUnread: false });
+        }
+        chatApi
+            .getMessages(conversation._id, { limit: 50 })
+            .then((data) => {
+            if (!cancelled) {
+                setMessages(data);
+                setLoading(false);
+                if (document.visibilityState === "visible") {
+                    const unreadIds = data.filter((message) => {
+                        var _a;
+                        return !isSameChatActor({ actorId: message.senderId, actorModel: message.senderModel }, currentActor) &&
+                            !((_a = message.readBy) === null || _a === void 0 ? void 0 : _a.some((receipt) => isSameChatActor(receipt, currentActor)));
+                    }).map((message) => message._id);
+                    if (unreadIds.length > 0) {
+                        markRead(conversation._id, unreadIds);
+                    }
+                }
+            }
+        })
+            .catch((e) => {
+            console.error(e);
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [conversation._id, currentActorModel, currentUserId, markRead, setMessages]);
+    useEffect(() => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+        if (document.visibilityState !== "visible")
+            return;
+        const unreadIds = messages
+            .filter((message) => {
+            var _a;
+            return !isSameChatActor({ actorId: message.senderId, actorModel: message.senderModel }, currentActor) &&
+                !((_a = message.readBy) === null || _a === void 0 ? void 0 : _a.some((receipt) => isSameChatActor(receipt, currentActor)));
+        })
+            .map((message) => message._id);
+        if (unreadIds.length)
+            markRead(conversation._id, unreadIds);
+    }, [conversation._id, currentActorModel, currentUserId, markRead, messages]);
+    useEffect(() => {
+        const markVisibleMessagesRead = () => {
+            if (document.visibilityState !== "visible")
+                return;
+            const unreadIds = messages
+                .filter((message) => {
+                var _a;
+                return !isSameChatActor({ actorId: message.senderId, actorModel: message.senderModel }, currentActor) &&
+                    !((_a = message.readBy) === null || _a === void 0 ? void 0 : _a.some((receipt) => isSameChatActor(receipt, currentActor)));
+            })
+                .map((message) => message._id);
+            if (unreadIds.length)
+                markRead(conversation._id, unreadIds);
+        };
+        document.addEventListener("visibilitychange", markVisibleMessagesRead);
+        window.addEventListener("focus", markVisibleMessagesRead);
+        return () => {
+            document.removeEventListener("visibilitychange", markVisibleMessagesRead);
+            window.removeEventListener("focus", markVisibleMessagesRead);
+        };
+    }, [conversation._id, currentActorModel, currentUserId, markRead, messages]);
+    // Check block status for individual chats
+    useEffect(() => {
+        if (conversation.type === 'individual') {
+            if (otherUser) {
+                chatApi.getBlockStatus(otherUser.actorId, otherUserModel).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) => {
+        void confirmDestructiveAction("Are you sure you want to unsend this message?", "Unsend").then((confirmed) => {
+            if (!confirmed)
+                return;
+            deleteMessage(messageId);
+        });
+    };
+    const handleModerateMessage = (messageId) => {
+        void confirmDestructiveAction("Remove this message for everyone in the group?", "Remove message").then(async (confirmed) => {
+            if (!confirmed)
+                return;
+            await chatApi.moderateMessage(messageId, "Removed by a group admin");
+        });
+    };
+    const handleReportMessage = (message) => {
+        void showAlert("Report this message to Trippeaze moderation?", "Report message", [
+            { label: "Cancel", variant: "outline", icon: _jsx(X, { className: "h-4 w-4" }), action: () => undefined },
+            {
+                label: "Report",
+                variant: "destructive",
+                icon: _jsx(Trash2, { className: "h-4 w-4" }),
+                action: () => {
+                    void chatApi.reportContent(conversation._id, {
+                        messageId: message._id,
+                        targetActor: { actorId: message.senderId, actorModel: message.senderModel },
+                        reason: "Reported by a conversation participant",
+                    });
+                },
+            },
+        ]);
+    };
+    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;
+        }
+        if (!await confirmDestructiveAction("Are you sure you want to leave this group?", "Leave group"))
+            return;
+        try {
+            const currentParticipant = conversation.participants.find((participant) => isSameChatActor(participant, currentActor));
+            await chatApi.removeParticipant(conversation._id, currentUserId, ((currentParticipant === null || currentParticipant === void 0 ? void 0 : currentParticipant.actorModel) || ((currentParticipant === null || currentParticipant === void 0 ? void 0 : currentParticipant.accountType) === "host" ? "HostProfile" : "User")));
+            await refreshConversations();
+            onBack();
+        }
+        catch (err) {
+            console.error("Failed to leave group:", err);
+            await showAlert("Could not leave this group", "Chat error");
+        }
+    };
+    const handleBlockUser = async () => {
+        if (otherUser) {
+            await chatApi.blockParticipant(otherUser.actorId, otherUserModel);
+            setHasBlocked(true);
+        }
+    };
+    const handleUnblockUser = async () => {
+        if (otherUser) {
+            await chatApi.unblockParticipant(otherUser.actorId, otherUserModel);
+            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?";
+        if (!await confirmDestructiveAction(confirmMsg, isGroup ? "Delete group" : "Delete chat"))
+            return;
+        try {
+            await chatApi.deleteConversation(conversation._id);
+            await refreshConversations();
+            onBack();
+        }
+        catch (err) {
+            console.error("Failed to delete conversation:", err);
+            await showAlert("Could not delete this conversation", "Chat error");
+        }
+    };
+    const handleSend = useCallback(async (text, files, mentions, type) => {
+        await sendMessage(conversation._id, text, files, replyMessage === null || replyMessage === void 0 ? void 0 : replyMessage._id, { mentions, type });
+        if (draftTimerRef.current)
+            clearTimeout(draftTimerRef.current);
+        await chatApi.updateConversationPreference(conversation._id, { draftText: "" });
+        setReplyMessage(null);
+    }, [conversation._id, sendMessage, replyMessage]);
+    const handleOpenPrivateChat = useCallback((actorId) => {
+        // 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?participantId=${encodeURIComponent(actorId)}`);
+    }, [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 handleJumpToMessage = useCallback(async (messageId) => {
+        const data = await chatApi.getMessages(conversation._id, { around: messageId, radius: 30 });
+        setMessages(data);
+        setActivePanel("chat");
+        setTemporaryPanel(null);
+        setTimeout(() => handleScrollToReply(messageId), 50);
+    }, [conversation._id, setMessages]);
+    const handleDraftChange = useCallback((draftText) => {
+        if (draftTimerRef.current)
+            clearTimeout(draftTimerRef.current);
+        draftTimerRef.current = setTimeout(() => {
+            void chatApi.updateConversationPreference(conversation._id, { draftText });
+        }, 450);
+    }, [conversation._id]);
+    const handleEnableMilestones = () => {
+        setIsGroupInfoOpen(true);
+    };
+    const handleEnableExpenses = () => {
+        setIsGroupInfoOpen(true);
+    };
+    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((participant) => !isSameChatActor(participant, currentActor));
+        return (other === null || other === void 0 ? void 0 : other.displayName) || (other === null || other === void 0 ? void 0 : other.username) || "Trippeaze member";
+    }
+    function getSubtitle() {
+        if (conversation.type === "group") {
+            return `${conversation.participants.length} members`;
+        }
+        const other = conversation.participants.find((participant) => !isSameChatActor(participant, currentActor));
+        if (other && onlineUsers.has(chatActorKey(other)))
+            return "Online";
+        return "Offline";
+    }
+    const getSenderImage = (senderId, senderModel) => {
+        const p = conversation.participants.find((participant) => isSameChatActor(participant, { actorId: senderId, actorModel: senderModel }));
+        return (p === null || p === void 0 ? void 0 : p.profilePic) || "";
+    };
+    const handleInfo = () => setIsChatInfoOpen(true);
+    const typing = typingUsers.get(conversation._id);
+    const isGroup = conversation.type === "group";
+    const isAdmin = ((_a = conversation.participants.find((participant) => isSameChatActor(participant, currentActor))) === null || _a === void 0 ? void 0 : _a.chatRole) === "admin";
+    return (_jsxs("div", { className: "flex h-full min-w-0 flex-1 flex-col 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()) })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsSearchOpen(true), className: "rounded-full text-gray-400 flex-shrink-0", "aria-label": "Search this conversation", children: _jsx(Search, { 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: [_jsx(DropdownMenuItem, { onClick: () => setIsSearchOpen(true), children: "Search messages" }), !isBlocked && !hasBlocked && _jsx(DropdownMenuItem, { onClick: handleInfo, children: "Info" }), currentActorModel === "HostProfile" && _jsx(DropdownMenuItem, { onClick: () => setIsHostWorkspaceOpen(true), children: "Host workspace" }), _jsx(DropdownMenuItem, { onClick: () => void chatApi.updateConversationPreference(conversation._id, { pinned: !conversation.preference.pinnedAt }).then(() => refreshConversations()), children: conversation.preference.pinnedAt ? "Unpin chat" : "Pin chat" }), _jsx(DropdownMenuItem, { onClick: () => void chatApi.updateConversationPreference(conversation._id, { favourited: !conversation.preference.favouritedAt }).then(() => refreshConversations()), children: conversation.preference.favouritedAt ? "Remove favourite" : "Add to favourites" }), _jsx(DropdownMenuItem, { onClick: () => void chatApi.updateConversationPreference(conversation._id, {
+                                            mutedUntil: conversation.preference.mutedUntil && new Date(conversation.preference.mutedUntil) > new Date()
+                                                ? null
+                                                : new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString(),
+                                        }).then(() => refreshConversations()), children: conversation.preference.mutedUntil && new Date(conversation.preference.mutedUntil) > new Date() ? "Unmute" : "Mute for 8 hours" }), _jsx(DropdownMenuItem, { onClick: () => void chatApi.markConversationUnread(conversation._id).then(() => refreshConversations()), children: "Mark as unread" }), _jsx(DropdownMenuItem, { onClick: () => void chatApi.updateConversationPreference(conversation._id, { archived: !conversation.preference.archivedAt }).then(() => refreshConversations()), children: conversation.preference.archivedAt ? "Unarchive chat" : "Archive chat" }), 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 && !isBlocked && (hasBlocked ?
+                                        (_jsx(DropdownMenuItem, { className: "text-red-500", onClick: handleUnblockUser, children: "Unblock User" })) :
+                                        (_jsx(DropdownMenuItem, { className: "text-red-500", onClick: handleBlockUser, children: "Block User" }))), (!isGroup || 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 && (((_b = conversation.features) === null || _b === void 0 ? void 0 : _b.events) || ((_c = conversation.features) === null || _c === void 0 ? void 0 : _c.milestones) || ((_d = conversation.features) === null || _d === void 0 ? void 0 : _d.expenses) || temporaryPanel) && (_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");
+                            setTemporaryPanel(null);
+                        }, 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" })] }), ((_e = conversation.features) === null || _e === void 0 ? void 0 : _e.events) !== false && _jsxs("button", { onClick: () => setActivePanel("events"), className: `flex-1 py-3 px-4 text-center font-medium text-sm transition-colors border-b-2 ${activePanel === "events"
+                            ? "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(CalendarDays, { className: "w-4 h-4 inline mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Events" })] }), (((_f = conversation.features) === null || _f === void 0 ? void 0 : _f.milestones) || temporaryPanel === "milestones") && _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" })] }), (((_g = conversation.features) === null || _g === void 0 ? void 0 : _g.expenses) || temporaryPanel === "expenses") && _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 &&
+                                                !isSameChatActor({ actorId: msg.senderId, actorModel: msg.senderModel }, currentActor) &&
+                                                (!prevMsg ||
+                                                    !isSameChatActor({ actorId: prevMsg.senderId, actorModel: prevMsg.senderModel }, { actorId: msg.senderId, actorModel: msg.senderModel }) ||
+                                                    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, currentActorModel: currentActorModel, showSender: showSender, senderProfilePic: getSenderImage(msg.senderId, msg.senderModel), onEdit: initiateEdit, onDelete: handleDelete, onReply: (msg) => setReplyMessage(msg), onReactionAdd: handleReact, onReactionRemove: handleUnreact, onScrollToReply: handleScrollToReply, onVote: (pid, idx) => votePoll(pid, idx), onEditPoll: (pollId, data) => updatePoll(pollId, data), onStar: (messageId) => void chatApi.starMessage(messageId), onPin: (messageId) => void chatApi.pinMessage(messageId), isGroupAdmin: Boolean(isAdmin), onModerate: handleModerateMessage, onReport: handleReportMessage })] }, 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: () => {
+                                    setTemporaryPanel("milestones");
+                                    setActivePanel("milestones");
+                                }, onAddExpense: () => {
+                                    setTemporaryPanel("expenses");
+                                    setActivePanel("expenses");
+                                }, onAddEvent: () => setActivePanel("events"), onPayAndSplit: () => setIsPayAndSplitOpen(true), onPaymentDetails: () => setIsPaymentProfileOpen(true), onCreatePoll: (q, opts, multi) => createPoll(conversation._id, q, opts, multi), participants: conversation.participants, activePanel: activePanel, 
+                                // Attachments and voice messages are useful in both direct and group chats.
+                                // Collaboration records remain a group-only capability.
+                                allowAdvancedActions: true, enableAttachments: true, allowCollaborationActions: isGroup, allowAnnouncements: isGroup && Boolean(isAdmin), initialText: conversation.preference.draftText || "", externalText: hostComposerText, onDraftChange: handleDraftChange }, conversation._id)] }), 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, currentActorModel: currentActorModel, participants: conversation.participants, isFeatureEnabled: (_h = conversation.features) === null || _h === void 0 ? void 0 : _h.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, currentActorModel: currentActorModel, participants: conversation.participants, isFeatureEnabled: (_j = conversation.features) === null || _j === void 0 ? void 0 : _j.expenses, isAdmin: isAdmin, onEnableFeature: handleEnableExpenses }) })), activePanel === "events" && (_jsx("div", { className: "hidden md:flex md:flex-col w-96 max-w-[42vw] border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(EventPanel, { conversationId: conversation._id, currentUserId: currentUserId, currentActorModel: currentActorModel, isAdmin: isAdmin }) }))] })), isGroup && activePanel === "milestones" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId, currentActorModel: currentActorModel, participants: conversation.participants, isFullScreen: true, isFeatureEnabled: (_k = conversation.features) === null || _k === void 0 ? void 0 : _k.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, currentActorModel: currentActorModel, participants: conversation.participants, isFullScreen: true, isFeatureEnabled: (_l = conversation.features) === null || _l === void 0 ? void 0 : _l.expenses, isAdmin: isAdmin, onEnableFeature: handleEnableExpenses }) })), isGroup && activePanel === "events" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(EventPanel, { conversationId: conversation._id, currentUserId: currentUserId, currentActorModel: currentActorModel, isAdmin: isAdmin, isFullScreen: true }) }))] }), isGroup && (_jsx(ParticipantsDialog, { open: isParticipantsOpen, onOpenChange: setIsParticipantsOpen, conversation: conversation, currentUserId: currentUserId, currentActorModel: currentActorModel, onUpdate: refreshConversations })), isGroup && (_jsx(GroupInfoDialog, { open: isGroupInfoOpen, onOpenChange: setIsGroupInfoOpen, conversation: conversation, onUpdate: refreshConversations })), isGroup && (_jsx(GroupInfoViewDialog, { open: isGroupInfoViewOpen, onOpenChange: setIsGroupInfoViewOpen, conversation: conversation })), _jsx(ConversationSearchDialog, { open: isSearchOpen, onOpenChange: setIsSearchOpen, conversation: conversation, onJump: (messageId) => void handleJumpToMessage(messageId) }), _jsx(ChatInfoDialog, { open: isChatInfoOpen, onOpenChange: setIsChatInfoOpen, conversation: conversation, onSearch: () => {
+                    setIsChatInfoOpen(false);
+                    setIsSearchOpen(true);
+                }, onJump: (messageId) => {
+                    setIsChatInfoOpen(false);
+                    void handleJumpToMessage(messageId);
+                }, onPreferenceChanged: refreshConversations }), _jsx(PaymentProfileDialog, { open: isPaymentProfileOpen, onOpenChange: setIsPaymentProfileOpen }), isGroup && (_jsx(PayAndSplitDialog, { open: isPayAndSplitOpen, onOpenChange: setIsPayAndSplitOpen, conversationId: conversation._id, currency: conversation.currency || "INR", participants: conversation.participants, currentUserId: currentUserId, currentActorModel: currentActorModel, onCompleted: () => {
+                    setTemporaryPanel("expenses");
+                    setActivePanel("expenses");
+                    void refreshConversations();
+                } })), currentActorModel === "HostProfile" && (_jsx(HostWorkspaceDialog, { open: isHostWorkspaceOpen, onOpenChange: setIsHostWorkspaceOpen, conversationId: conversation._id, onUseReply: (text) => setHostComposerText(text), onShareListing: (listing) => {
+                    if (listing.publicPath)
+                        void handleSend(`${window.location.origin}${listing.publicPath}`);
+                } }))] }));
+}