@myrjfa/ui 0.3.1

package/dist/chat/MessageInput.js

@@ -0,0 +1,330 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Send, Smile, Image as ImageIcon, FileText, Camera, MapPin, Mic, X, CircleStopIcon, VideoIcon, PlusCircleIcon, ListTodo, ReceiptText, ChartBar, CalendarPlus, Pause, Play, ChevronLeft, ChevronRight, Megaphone, WalletCards, BadgeIndianRupee } from "lucide-react";
+import { Button } from "../misc/button";
+import { Textarea } from "../misc/textarea";
+import { Popover, PopoverContent, PopoverTrigger } from "../misc/popover";
+import { Progress } from "../misc/progress";
+import { CameraDialog } from "./dialogs/CameraDialog";
+import { CreatePollDialog } from "./dialogs/CreatePollDialog";
+import { ShareLocationDialog } from "./dialogs/ShareLocationDialog";
+import { MediaComposerDialog } from "./dialogs/MediaComposerDialog";
+import { showAlert } from "../misc/alertdialogclaude";
+import { isCompressibleImage, compressImage } from "@myrjfa/state/dist/lib/utils/fileCompression";
+import EmojiPicker from 'emoji-picker-react';
+export function MessageInput({ onSend, onTypingStart, onTypingStop, disabled, replyTo, editMessage, onEdit, onCancelEdit, onCancelReply, onAddMilestone, onAddExpense, onAddEvent, onPayAndSplit, onPaymentDetails, onCreatePoll, participants = [], // Added
+activePanel = "chat", allowAdvancedActions = false, enableAttachments = false, allowCollaborationActions = false, allowAnnouncements = false, initialText = "", externalText, onDraftChange, }) {
+    var _a, _b, _c;
+    const [text, setText] = useState(editMessage ? (_b = (_a = editMessage === null || editMessage === void 0 ? void 0 : editMessage.content) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "" : initialText);
+    const [mentionSearch, setMentionSearch] = useState(null);
+    const [mentionIndex, setMentionIndex] = useState(-1);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [selectedMentions, setSelectedMentions] = useState([]);
+    const [uploadProgress, setUploadProgress] = useState(null);
+    const [isSending, setIsSending] = useState(false);
+    const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const [fileAcceptType, setFileAcceptType] = useState("");
+    const typingTimeoutRef = useRef(null);
+    const isTypingRef = useRef(false);
+    const wasEditingRef = useRef(false);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [isCameraOpen, setIsCameraOpen] = useState(false);
+    const [isPollOpen, setIsPollOpen] = useState(false);
+    const [isLocationDialogOpen, setIsLocationDialogOpen] = useState(false);
+    const [isAttachmentMenuOpen, setIsAttachmentMenuOpen] = useState(false);
+    const [composerFile, setComposerFile] = useState(null);
+    const [isMediaComposerOpen, setIsMediaComposerOpen] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const [isRecordingPaused, setIsRecordingPaused] = useState(false);
+    const [announcementMode, setAnnouncementMode] = useState(false);
+    const mediaRecorderRef = useRef(null);
+    const audioChunksRef = useRef([]);
+    const [mentionCoords, setMentionCoords] = useState({ top: 0, left: 0 }); // Added
+    const participantLabel = (participant) => participant.displayName || participant.username || "Trippeaze member";
+    // Auto-resize textarea
+    useEffect(() => {
+        const el = textareaRef.current;
+        if (el) {
+            el.style.height = "auto";
+            el.style.height = Math.min(el.scrollHeight, 120) + "px";
+        }
+    }, [text]);
+    // Focus input when replyTo message is set
+    useEffect(() => {
+        var _a;
+        if (replyTo) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [replyTo]);
+    useEffect(() => {
+        if (!editMessage)
+            onDraftChange === null || onDraftChange === void 0 ? void 0 : onDraftChange(text);
+    }, [editMessage, onDraftChange, text]);
+    useEffect(() => {
+        if (editMessage) {
+            wasEditingRef.current = true;
+            setText(editMessage.content.text || "");
+        }
+        else if (wasEditingRef.current) {
+            wasEditingRef.current = false;
+            setText(initialText);
+        }
+    }, [editMessage === null || editMessage === void 0 ? void 0 : editMessage._id]);
+    useEffect(() => {
+        if (externalText !== undefined && !editMessage) {
+            setText(externalText);
+            requestAnimationFrame(() => { var _a; return (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+        }
+    }, [externalText]);
+    const handleTextChange = (e) => {
+        const value = e.target.value;
+        const cursorPosition = e.target.selectionStart;
+        setText(value);
+        // Mention detection
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const lastAtChar = textBeforeCursor.lastIndexOf("@");
+        if (lastAtChar !== -1 && (lastAtChar === 0 || textBeforeCursor[lastAtChar - 1] === " ")) {
+            const search = textBeforeCursor.substring(lastAtChar + 1);
+            if (!search.includes(" ")) {
+                setMentionSearch(search);
+                setMentionIndex(lastAtChar);
+            }
+            else {
+                setMentionSearch(null);
+            }
+        }
+        else {
+            setMentionSearch(null);
+        }
+        // Typing indicator
+        if (!isTypingRef.current && e.target.value.length > 0) {
+            isTypingRef.current = true;
+            onTypingStart === null || onTypingStart === void 0 ? void 0 : onTypingStart();
+        }
+        // Reset typing timeout
+        if (typingTimeoutRef.current)
+            clearTimeout(typingTimeoutRef.current);
+        typingTimeoutRef.current = setTimeout(() => {
+            isTypingRef.current = false;
+            onTypingStop === null || onTypingStop === void 0 ? void 0 : onTypingStop();
+        }, 2000);
+    };
+    const insertMention = (participant) => {
+        var _a;
+        if (mentionIndex === -1)
+            return;
+        const username = participant.username || participantLabel(participant);
+        const before = text.substring(0, mentionIndex);
+        const after = text.substring(((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || text.length);
+        const newText = `${before}@${username} ${after}`;
+        setText(newText);
+        setMentionSearch(null);
+        setSelectedMentions((current) => current.some((item) => item.actorId === participant.actorId && item.actorModel === participant.actorModel) ? current : [...current, {
+                actorId: participant.actorId,
+                actorModel: participant.actorModel,
+                username,
+            }]);
+        // Set cursor after the inserted mention
+        setTimeout(() => {
+            if (textareaRef.current) {
+                const newCursorPos = before.length + `@${username} `.length;
+                textareaRef.current.selectionStart = newCursorPos;
+                textareaRef.current.selectionEnd = newCursorPos;
+                textareaRef.current.focus();
+            }
+        }, 0);
+    };
+    async function handleSend() {
+        var _a;
+        const trimmed = text.trim();
+        if ((!trimmed && selectedFiles.length === 0) || disabled)
+            return;
+        setIsSending(true);
+        setUploadProgress(0);
+        try {
+            let filesToSend = [...selectedFiles];
+            // Compress images
+            setUploadProgress(10); // Start progress for compression
+            const compressed = await Promise.all(filesToSend.map(async (file) => {
+                if (isCompressibleImage(file)) {
+                    try {
+                        return await compressImage(file);
+                    }
+                    catch (e) {
+                        console.error("Compression failed for", file.name, e);
+                        return file;
+                    }
+                }
+                return file;
+            }));
+            setUploadProgress(30); // Compression done, starting upload
+            // Note: sendMessage doesn't currently support progress callback.
+            // We'll simulate progress or update it if chatApi supports it.
+            // For now, call sendMessage.
+            if (editMessage) {
+                await (onEdit === null || onEdit === void 0 ? void 0 : onEdit(editMessage._id, trimmed));
+            }
+            else {
+                await onSend(trimmed, compressed, selectedMentions
+                    .filter((mention) => trimmed.includes(`@${mention.username}`))
+                    .map(({ actorId, actorModel }) => ({ actorId, actorModel })), announcementMode ? "announcement" : compressed.length ? "media" : "text");
+            }
+            setUploadProgress(100);
+            setText("");
+            setSelectedFiles([]);
+            setSelectedMentions([]);
+            setAnnouncementMode(false);
+            // Clear typing
+            if (typingTimeoutRef.current)
+                clearTimeout(typingTimeoutRef.current);
+            isTypingRef.current = false;
+            onTypingStop === null || onTypingStop === void 0 ? void 0 : onTypingStop();
+            // Refocus
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        catch (error) {
+            console.error(error);
+            showAlert("Failed to send message", "Error");
+        }
+        finally {
+            setIsSending(false);
+            setUploadProgress(null);
+        }
+    }
+    function handleKeyDown(e) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }
+    const handleFileChange = (e) => {
+        var _a;
+        if (e.target.files) {
+            const files = Array.from(e.target.files);
+            const firstImage = files.length === 1 && ((_a = files[0]) === null || _a === void 0 ? void 0 : _a.type.startsWith("image/")) ? files[0] : null;
+            if (firstImage) {
+                setComposerFile(firstImage);
+                setIsMediaComposerOpen(true);
+            }
+            else
+                setSelectedFiles(prev => [...prev, ...files]);
+        }
+        e.target.value = "";
+    };
+    const chooseFiles = (accept) => {
+        setIsAttachmentMenuOpen(false);
+        setFileAcceptType(accept);
+        window.setTimeout(() => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, 0);
+    };
+    const removeFile = (index) => {
+        setSelectedFiles(prev => prev.filter((_, i) => i !== index));
+    };
+    const handleCameraCapture = (file) => {
+        setSelectedFiles(prev => [...prev, file]);
+    };
+    const startRecording = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const mediaRecorder = new MediaRecorder(stream);
+            mediaRecorderRef.current = mediaRecorder;
+            audioChunksRef.current = [];
+            mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    audioChunksRef.current.push(event.data);
+                }
+            };
+            mediaRecorder.onstop = () => {
+                const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" });
+                const audioFile = new File([audioBlob], `voice_${Date.now()}.webm`, { type: "audio/webm" });
+                setSelectedFiles(prev => [...prev, audioFile]);
+                stream.getTracks().forEach(track => track.stop());
+            };
+            mediaRecorder.start();
+            setIsRecording(true);
+            setIsRecordingPaused(false);
+        }
+        catch (err) {
+            console.error("Error accessing microphone:", err);
+            void showAlert("Could not access the microphone. Check your browser permission and try again.", "Microphone unavailable");
+        }
+    };
+    const stopRecording = () => {
+        if (mediaRecorderRef.current && isRecording) {
+            mediaRecorderRef.current.stop();
+            setIsRecording(false);
+            setIsRecordingPaused(false);
+        }
+    };
+    const toggleRecordingPause = () => {
+        const recorder = mediaRecorderRef.current;
+        if (!recorder || !isRecording)
+            return;
+        if (recorder.state === "recording") {
+            recorder.pause();
+            setIsRecordingPaused(true);
+        }
+        else if (recorder.state === "paused") {
+            recorder.resume();
+            setIsRecordingPaused(false);
+        }
+    };
+    const moveFile = (index, direction) => {
+        setSelectedFiles((current) => {
+            const nextIndex = index + direction;
+            if (nextIndex < 0 || nextIndex >= current.length)
+                return current;
+            const next = [...current];
+            const currentFile = next[index];
+            const adjacentFile = next[nextIndex];
+            if (!currentFile || !adjacentFile)
+                return current;
+            next[index] = adjacentFile;
+            next[nextIndex] = currentFile;
+            return next;
+        });
+    };
+    const handleEmojiSelect = (emojiObject) => {
+        if (textareaRef.current) {
+            const cursorPos = textareaRef.current.selectionStart;
+            const newText = text.slice(0, cursorPos) + emojiObject.emoji + text.slice(cursorPos);
+            setText(newText);
+            setShowEmojiPicker(false);
+            textareaRef.current.focus();
+        }
+    };
+    // Only show message input for chat panel
+    const showMessageInput = activePanel === "chat";
+    return (_jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3 relative", children: [allowAdvancedActions && (_jsxs(_Fragment, { children: [enableAttachments && _jsx(CameraDialog, { open: isCameraOpen, onOpenChange: setIsCameraOpen, onCapture: handleCameraCapture }), allowCollaborationActions && _jsx(CreatePollDialog, { open: isPollOpen, onOpenChange: setIsPollOpen, onCreate: (q, opts, multi) => {
+                            onCreatePoll === null || onCreatePoll === void 0 ? void 0 : onCreatePoll(q, opts, multi);
+                        } })] })), mentionSearch !== null && participants.length > 0 && (_jsxs("div", { className: "absolute bottom-full left-4 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl w-48 py-1 z-50 overflow-y-auto max-h-48", children: [participants
+                        .filter((p) => {
+                        const searchable = `${p.username || ""} ${p.displayName || ""}`.toLowerCase();
+                        return !mentionSearch || searchable.includes(mentionSearch.toLowerCase());
+                    })
+                        .map(p => (_jsx("button", { onClick: () => insertMention(p), className: "w-full text-left px-3 py-2 text-sm hover:bg-indigo-50 dark:hover:bg-indigo-900/40 flex items-center gap-2", children: _jsxs("span", { className: "truncate", children: ["@", p.username || participantLabel(p)] }) }, p.actorId))), participants.filter((p) => {
+                        const searchable = `${p.username || ""} ${p.displayName || ""}`.toLowerCase();
+                        return !mentionSearch || searchable.includes(mentionSearch.toLowerCase());
+                    }).length === 0 && (_jsx("div", { className: "px-3 py-2 text-xs text-gray-500 italic", children: "No members found" }))] })), allowAdvancedActions && enableAttachments && selectedFiles.length > 0 && !editMessage && (_jsx("div", { className: "max-w-4xl mx-auto mb-2 flex flex-wrap gap-2", children: selectedFiles.map((file, i) => (_jsxs("div", { className: "flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded-lg px-2 py-1 text-xs text-gray-600 dark:text-gray-300", children: [file.type.startsWith("image/") && _jsx("img", { src: URL.createObjectURL(file), alt: "", className: "h-9 w-9 rounded object-cover" }), file.type.startsWith("audio/") && _jsx("audio", { src: URL.createObjectURL(file), controls: true, className: "h-8 max-w-44" }), _jsx("span", { className: "truncate max-w-[150px]", children: file.name }), selectedFiles.length > 1 && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: i === 0, onClick: () => moveFile(i, -1), "aria-label": "Move attachment left", children: _jsx(ChevronLeft, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", disabled: i === selectedFiles.length - 1, onClick: () => moveFile(i, 1), "aria-label": "Move attachment right", children: _jsx(ChevronRight, { className: "h-3.5 w-3.5" }) })] }), _jsx("button", { onClick: () => removeFile(i), className: "ml-2 text-red-500 hover:text-red-700 font-bold", children: "\u00D7" })] }, `${file.name}-${i}`))) })), announcementMode && !editMessage && (_jsxs("div", { className: "mx-auto mb-2 flex max-w-4xl items-center justify-between rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: [_jsxs("span", { className: "flex items-center gap-2 font-medium", children: [_jsx(Megaphone, { className: "h-4 w-4" }), "Sending as a group announcement"] }), _jsx("button", { type: "button", onClick: () => setAnnouncementMode(false), "aria-label": "Cancel announcement", children: _jsx(X, { className: "h-4 w-4" }) })] })), replyTo && (_jsxs("div", { className: "max-w-4xl mx-auto mb-2 flex items-center gap-2 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded-lg border-l-2 border-teal-500", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-xs font-semibold text-teal-600 dark:text-teal-400", children: editMessage ? "Editing" : `Replying to ${participantLabel(participants.find((participant) => participant.actorId === replyTo.senderId) || {})}` }), _jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 truncate", children: (_c = replyTo.content.text) === null || _c === void 0 ? void 0 : _c.substring(0, 60) })] }), _jsx("button", { onClick: onCancelReply, className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0", children: _jsx(X, { className: "w-4 h-4" }) })] })), _jsxs("div", { className: `${showMessageInput ? "flex" : "hidden md:flex"} items-end gap-2 max-w-4xl mx-auto`, children: [allowAdvancedActions && enableAttachments && (_jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: fileAcceptType, multiple: true, className: "hidden" })), allowAdvancedActions && !editMessage && _jsxs(Popover, { open: isAttachmentMenuOpen, onOpenChange: setIsAttachmentMenuOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full h-10 w-10 shrink-0", children: _jsx(PlusCircleIcon, { className: "w-5 h-5" }) }) }), _jsxs(PopoverContent, { side: "top", align: "start", className: "w-48 p-2 flex flex-col gap-1", children: [enableAttachments && _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: () => chooseFiles(".pdf,.doc,.docx,.txt,.xlsx,.pptx"), children: [_jsx(FileText, { className: "w-4 h-4 text-purple-500" }), "Document"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: () => chooseFiles("image/*"), children: [_jsx(ImageIcon, { className: "w-4 h-4 text-blue-500" }), "Photos"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: () => chooseFiles("video/*"), children: [_jsx(VideoIcon, { className: "w-4 h-4 text-rose-500" }), "Videos"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: () => { setIsAttachmentMenuOpen(false); setIsLocationDialogOpen(true); }, children: [_jsx(MapPin, { className: "w-4 h-4 text-green-500" }), "Location"] })] }), allowCollaborationActions && _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: () => { setIsAttachmentMenuOpen(false); setIsPollOpen(true); }, children: [_jsx(ChartBar, { className: "w-4 h-4 text-orange-500" }), "Poll"] }), allowCollaborationActions && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 my-1" }), allowCollaborationActions && _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: () => {
+                                            setIsAttachmentMenuOpen(false);
+                                            onAddMilestone === null || onAddMilestone === void 0 ? void 0 : onAddMilestone();
+                                        }, children: [_jsx(ListTodo, { className: "w-4 h-4" }), "Add Milestone"] }), allowCollaborationActions && _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: () => {
+                                            setIsAttachmentMenuOpen(false);
+                                            onAddExpense === null || onAddExpense === void 0 ? void 0 : onAddExpense();
+                                        }, children: [_jsx(ReceiptText, { className: "w-4 h-4" }), "Add Expense"] }), allowCollaborationActions && _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: () => {
+                                            setIsAttachmentMenuOpen(false);
+                                            onAddEvent === null || onAddEvent === void 0 ? void 0 : onAddEvent();
+                                        }, children: [_jsx(CalendarPlus, { className: "w-4 h-4" }), "Add Event"] }), allowAnnouncements && _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-amber-700", onClick: () => {
+                                            setIsAttachmentMenuOpen(false);
+                                            setAnnouncementMode(true);
+                                        }, children: [_jsx(Megaphone, { className: "w-4 h-4" }), "Announcement"] }), allowCollaborationActions && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 my-1" }), allowCollaborationActions && _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-emerald-700", onClick: () => {
+                                            setIsAttachmentMenuOpen(false);
+                                            onPayAndSplit === null || onPayAndSplit === void 0 ? void 0 : onPayAndSplit();
+                                        }, children: [_jsx(BadgeIndianRupee, { className: "w-4 h-4" }), "Pay & Split"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-slate-700", onClick: () => {
+                                            setIsAttachmentMenuOpen(false);
+                                            onPaymentDetails === null || onPaymentDetails === void 0 ? void 0 : onPaymentDetails();
+                                        }, children: [_jsx(WalletCards, { className: "w-4 h-4" }), "Payment details"] })] })] }), _jsxs("div", { className: "flex-1 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-end relative", children: [_jsx(Textarea, { ref: textareaRef, value: text, onChange: handleTextChange, onKeyDown: handleKeyDown, placeholder: "Type a message...", disabled: disabled || isSending, rows: 1, className: "flex-1 bg-transparent border-none focus-visible:ring-0 px-4 py-3 text-[15px] resize-none text-gray-900 dark:text-white placeholder-gray-400 max-h-[120px] min-h-[48px]" }), uploadProgress !== null && (_jsx("div", { className: "absolute left-0 bottom-full w-full px-4 mb-2", children: _jsxs("div", { className: "bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg border border-gray-100 dark:border-gray-700", children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsx("span", { className: "text-[10px] text-gray-500 font-medium", children: "Uploading..." }), _jsxs("span", { className: "text-[10px] text-indigo-500 font-bold", children: [uploadProgress, "%"] })] }), _jsx(Progress, { value: uploadProgress, className: "h-1" })] }) })), _jsx(Button, { variant: "ghost", size: "icon", className: "mr-1 mb-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hidden sm:inline-flex", onClick: () => setShowEmojiPicker(!showEmojiPicker), children: _jsx(Smile, { className: "w-5 h-5" }) }), allowAdvancedActions && enableAttachments && !editMessage && _jsx(Button, { variant: "ghost", size: "icon", className: "mr-1 mb-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full", onClick: () => setIsCameraOpen(true), children: _jsx(Camera, { className: "w-5 h-5" }) })] }), isRecording && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-11 w-11 rounded-full text-slate-600", onClick: toggleRecordingPause, "aria-label": isRecordingPaused ? "Resume recording" : "Pause recording", children: isRecordingPaused ? _jsx(Play, { className: "h-5 w-5" }) : _jsx(Pause, { className: "h-5 w-5" }) })), text.trim() || (allowAdvancedActions && enableAttachments && selectedFiles.length > 0) || editMessage ? (_jsx(Button, { onClick: handleSend, disabled: disabled, className: "rounded-full h-11 w-11 p-0 bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 shadow-lg shadow-teal-500/25 shrink-0", children: _jsx(Send, { className: "w-5 h-5" }) })) : allowAdvancedActions ? (_jsx(Button, { variant: "ghost", size: "icon", className: `rounded-full h-11 w-11 shrink-0 transition-all ${isRecording
+                            ? "bg-red-500 hover:bg-red-600 animate-pulse text-white"
+                            : "text-teal-400 hover:bg-teal-100 dark:hover:bg-teal-800"}`, onClick: () => isRecording ? stopRecording() : startRecording(), children: isRecording ? _jsx(CircleStopIcon, { className: "w-6 h-6" }) : _jsx(Mic, { className: "w-6 h-6" }) })) : (_jsx(Button, { disabled: true, className: "rounded-full h-11 w-11 p-0 bg-gray-300 dark:bg-gray-700 shrink-0", "aria-label": "Enter a message to send", children: _jsx(Send, { className: "w-5 h-5" }) })), editMessage && _jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full h-11 w-11 shrink-0", onClick: onCancelEdit, children: _jsx(X, { className: "w-5 h-5" }) }), showEmojiPicker && _jsx(EmojiPicker, { onEmojiClick: handleEmojiSelect })] }), _jsx(ShareLocationDialog, { open: isLocationDialogOpen, onOpenChange: setIsLocationDialogOpen, onSend: onSend }), _jsx(MediaComposerDialog, { file: composerFile, open: isMediaComposerOpen, onOpenChange: setIsMediaComposerOpen, onConfirm: (file) => setSelectedFiles((current) => [...current, file]) })] }));
+}

package/dist/chat/MilestonePanel.d.ts

@@ -0,0 +1,14 @@
+import { type ChatActorModel, type Conversation } from "@myrjfa/state/dist/lib/models/chat";
+interface MilestonePanelProps {
+    conversationId: string;
+    currentUserId: string;
+    currentActorModel: ChatActorModel;
+    participants: Conversation["participants"];
+    isFullScreen?: boolean;
+    isFeatureEnabled?: boolean;
+    isAdmin?: boolean;
+    onEnableFeature?: () => void;
+}
+export declare function MilestonePanel({ conversationId, currentUserId, currentActorModel, participants, isFullScreen, isFeatureEnabled, isAdmin, onEnableFeature }: MilestonePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MilestonePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MilestonePanel.d.ts","sourceRoot":"","sources":["../../src/chat/MilestonePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGH,KAAK,cAAc,EAEnB,KAAK,YAAY,EAEpB,MAAM,oCAAoC,CAAC;AAU5C,UAAU,mBAAmB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,cAAc,CAAC;IAClC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC3C,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,cAAc,CAAC,EAC3B,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAoB,EACpB,gBAAuB,EACvB,OAAe,EACf,eAAe,EAClB,EAAE,mBAAmB,2CAqgBrB"}

package/dist/chat/MilestonePanel.js

@@ -0,0 +1,209 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { chatApi } from "@myrjfa/state/dist/lib/actions/chat";
+import { chatActorKey, isSameChatActor, } from "@myrjfa/state/dist/lib/models/chat";
+import { CheckCircle2, Circle, Plus, Trash2, Pencil, MoreVertical, Lock, Unlock, ListTodo, ChevronDown, AlertCircle, SlidersHorizontal } from "lucide-react";
+import { Button } from "../misc/button";
+import { Input } from "../misc/input";
+import { Textarea } from "../misc/textarea";
+import { DatePicker } from "../misc/datepicker";
+import { SearchBox } from "../misc/searchBox";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../misc/dropdown-menu";
+import { deleteActions, showAlert } from "../misc/alertdialogclaude";
+export function MilestonePanel({ conversationId, currentUserId, currentActorModel, participants, isFullScreen = false, isFeatureEnabled = true, isAdmin = false, onEnableFeature }) {
+    const [milestones, setMilestones] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [isAdding, setIsAdding] = useState(false);
+    const [milestoneId, setMilestoneId] = useState(null);
+    const [newTitle, setNewTitle] = useState("");
+    const [newSection, setNewSection] = useState("");
+    const [newDescription, setNewDescription] = useState("");
+    const [newDueDate, setNewDueDate] = useState(null);
+    const [showMoreOptions, setShowMoreOptions] = useState(false);
+    const [sections, setSections] = useState([]);
+    const [expandedSections, setExpandedSections] = useState(new Set());
+    const [expandedMilestones, setExpandedMilestones] = useState(new Set());
+    const currentActor = { actorId: currentUserId, actorModel: currentActorModel };
+    const [openMilestoneMenuId, setOpenMilestoneMenuId] = useState(null);
+    const fetchMilestones = async () => {
+        setLoading(true);
+        const data = await chatApi.getMilestones(conversationId);
+        setMilestones(data);
+        setLoading(false);
+    };
+    useEffect(() => {
+        fetchMilestones();
+    }, [conversationId]);
+    useEffect(() => {
+        // Extract unique sections from existing milestones
+        const uniqueSections = Array.from(new Set(milestones.map(m => m.section).filter(Boolean)));
+        setSections(uniqueSections);
+    }, [milestones]);
+    const resetForm = () => {
+        setNewTitle("");
+        setNewSection("");
+        setNewDescription("");
+        setNewDueDate(null);
+        setShowMoreOptions(false);
+        setIsAdding(false);
+        setMilestoneId(null);
+    };
+    const toggleSection = (section) => {
+        setExpandedSections(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(section)) {
+                newSet.delete(section);
+            }
+            else {
+                newSet.add(section);
+            }
+            return newSet;
+        });
+    };
+    const toggleMilestoneExpand = (id) => {
+        setExpandedMilestones(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(id)) {
+                newSet.delete(id);
+            }
+            else {
+                newSet.add(id);
+            }
+            return newSet;
+        });
+    };
+    const handleCreate = async () => {
+        if (!newTitle.trim())
+            return;
+        try {
+            const milestoneData = {
+                title: newTitle.trim(),
+                section: newSection.trim() || "General",
+                description: newDescription.trim() || undefined,
+                dueDate: (newDueDate === null || newDueDate === void 0 ? void 0 : newDueDate.toISOString()) || undefined
+            };
+            const milestoneResponse = milestoneId
+                ? await chatApi.updateMilestone(milestoneId, milestoneData)
+                : await chatApi.createMilestone(conversationId, milestoneData);
+            if (milestoneResponse.error) {
+                console.error("Failed to create milestone:", milestoneResponse.error);
+                showAlert(milestoneResponse.error, "Failed to create milestone");
+            }
+            else if (milestoneResponse.data) {
+                await fetchMilestones();
+                resetForm();
+            }
+        }
+        catch (err) {
+            console.error("Failed to create milestone:", err);
+            showAlert(err, "Failed to create milestone");
+        }
+    };
+    const handleToggle = async (id) => {
+        const response = await chatApi.toggleMilestone(id);
+        if (response.error) {
+            console.log("error toggling milestone " + id + "Error: " + response.error);
+            await showAlert("Error checking/unchecking milestone");
+            return;
+        }
+        else if (response.data) {
+            setMilestones(prev => prev.map(m => m._id === id ? response.data : m));
+        }
+    };
+    const handleDelete = async (id) => {
+        let confirmDelete = true;
+        await showAlert("Are you sure you want to delete this milestone?", undefined, deleteActions(() => confirmDelete = false));
+        if (confirmDelete) {
+            const response = await chatApi.deleteMilestone(id);
+            if (response.error) {
+                console.log("Unable to delete milestone:" + id + "Error: " + response.error);
+                await showAlert("Unable to delete milestone");
+                return;
+            }
+            setMilestones(prev => prev.filter(m => m._id !== id));
+        }
+    };
+    const handleEdit = async (milestone) => {
+        var _a, _b;
+        setNewTitle(milestone.title);
+        setNewSection((_a = milestone.section) !== null && _a !== void 0 ? _a : "");
+        setNewDescription((_b = milestone.description) !== null && _b !== void 0 ? _b : "");
+        setNewDueDate(milestone.dueDate ? new Date(milestone.dueDate) : null);
+        setMilestoneId(milestone._id);
+        setIsAdding(true);
+    };
+    // Check if current user has checked this milestone
+    const hasUserChecked = (milestone) => {
+        return milestone.checks.some((check) => isSameChatActor(check, currentActor));
+    };
+    // Get users who haven't checked the milestone
+    const participantLabel = (actor) => {
+        const participant = participants.find((item) => actor.actorModel
+            ? isSameChatActor(item, actor)
+            : item.actorId === actor.actorId);
+        return (participant === null || participant === void 0 ? void 0 : participant.displayName) || (participant === null || participant === void 0 ? void 0 : participant.username) || "Trippeaze member";
+    };
+    const showMemberProgress = (id) => {
+        setExpandedMilestones((current) => current.has(id) ? current : new Set(current).add(id));
+        setOpenMilestoneMenuId(null);
+    };
+    const getUncheckedUsers = (milestone) => {
+        const checkedActors = new Set(milestone.checks.map(chatActorKey));
+        return participants.filter((participant) => !checkedActors.has(chatActorKey(participant)));
+    };
+    const getCheckedUsers = (milestone) => {
+        const checkedActors = new Set(milestone.checks.map(chatActorKey));
+        return participants.filter((participant) => checkedActors.has(chatActorKey(participant)));
+    };
+    const groupedMilestones = milestones.reduce((acc, m) => {
+        const section = m.section || "General";
+        if (!acc[section])
+            acc[section] = [];
+        acc[section].push(m);
+        return acc;
+    }, {});
+    const panelClasses = isFullScreen
+        ? "w-full h-full flex flex-col"
+        : "flex flex-col h-full w-full md:w-80 border-l border-gray-200 dark:border-gray-700";
+    return (_jsxs("div", { className: `bg-white dark:bg-gray-900 ${panelClasses}`, children: [_jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Milestones" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: !isFeatureEnabled ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full py-12 px-6 text-center", children: [_jsx("div", { className: "mb-4 p-4 bg-teal-50 dark:bg-teal-900/20 rounded-full", children: _jsx(ListTodo, { className: "w-12 h-12 text-teal-500" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: "Milestones Feature" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4 max-w-sm", children: "Track group tasks, organize by sections, and monitor progress together. Perfect for trip planning and group coordination." }), isAdmin ? (_jsxs(Button, { onClick: onEnableFeature, className: "bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white", children: [_jsx(Unlock, { className: "w-4 h-4 mr-2" }), "Enable Feature"] })) : (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Lock, { className: "w-4 h-4" }), "Ask admin to enable this feature"] }))] })) : loading ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx("div", { className: "animate-spin w-5 h-5 border-2 border-teal-500 border-t-transparent rounded-full" }) })) : milestones.length === 0 && !isAdding ? (_jsx("div", { className: "text-center py-8 text-gray-400 text-sm", children: "No milestones yet" })) : (_jsxs(_Fragment, { children: [isAdding && (_jsxs("div", { className: "p-4 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-3", children: [_jsx(SearchBox, { titles: sections, id: "milestone-section", placeholder: "Section (e.g., Day 1, Transport)", searchQuery: newSection, setSearchQuery: setNewSection, handleAdd: setNewSection, clearOnSubmit: false }), _jsx(Input, { placeholder: "Milestone title *", value: newTitle, onChange: (e) => setNewTitle(e.target.value), onKeyDown: (e) => e.key === "Enter" && !showMoreOptions && handleCreate(), className: "text-sm font-medium", autoFocus: true }), _jsxs("button", { type: "button", onClick: () => setShowMoreOptions((current) => !current), "aria-expanded": showMoreOptions, className: "flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-left shadow-sm transition-colors hover:border-teal-300 hover:bg-teal-50/40 dark:border-slate-700 dark:bg-slate-900 dark:hover:border-teal-700 dark:hover:bg-teal-950/20", children: [_jsxs("span", { className: "flex items-center gap-2.5", children: [_jsx("span", { className: "rounded-lg bg-teal-100 p-1.5 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300", children: _jsx(SlidersHorizontal, { className: "h-4 w-4" }) }), _jsxs("span", { children: [_jsx("span", { className: "block text-sm font-medium text-slate-800 dark:text-slate-100", children: "More options" }), _jsx("span", { className: "block text-xs text-slate-500 dark:text-slate-400", children: "Description and due date" })] })] }), _jsx(ChevronDown, { className: `h-4 w-4 text-slate-500 transition-transform ${showMoreOptions ? "rotate-180" : ""}` })] }), showMoreOptions && (_jsxs("div", { className: "space-y-3 rounded-xl border border-teal-100 bg-white p-3 shadow-sm dark:border-teal-900/60 dark:bg-slate-900", children: [_jsx(Textarea, { placeholder: "Description (optional)", value: newDescription, onChange: (e) => setNewDescription(e.target.value), className: "text-sm resize-none", rows: 2 }), _jsx(DatePicker, { label: "Due date (optional)", field: { value: newDueDate, onChange: setNewDueDate }, onClear: () => setNewDueDate(null) })] })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: handleCreate, size: "sm", className: "flex-1 bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700", children: "Add" }), _jsx(Button, { onClick: resetForm, size: "sm", variant: "outline", children: "Cancel" })] })] })), milestones.length > 0 && (Object.entries(groupedMilestones).map(([section, items]) => {
+                            const isExpanded = expandedSections.has(section);
+                            const completedCount = items.filter(m => m.isCompleted).length;
+                            const totalCount = items.length;
+                            return (_jsxs("div", { className: "space-y-2", children: [_jsxs("button", { onClick: () => toggleSection(section), className: "w-full flex items-center justify-between p-3 bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 hover:from-teal-100 hover:to-cyan-100 dark:hover:from-teal-900/30 dark:hover:to-cyan-900/30 rounded-lg border border-teal-100 dark:border-teal-800 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 text-left", children: [_jsx(ChevronDown, { className: `w-4 h-4 text-teal-600 dark:text-teal-400 transition-transform flex-shrink-0 ${isExpanded ? "" : "-rotate-90"}` }), _jsx("h4", { className: "text-sm font-semibold text-teal-900 dark:text-teal-100 uppercase tracking-widest", children: section })] }), _jsxs("span", { className: "text-xs font-semibold text-teal-700 dark:text-teal-300 bg-white dark:bg-gray-800 px-2.5 py-1 rounded-full flex-shrink-0", children: [completedCount, "/", totalCount] })] }), isExpanded && (_jsx("div", { className: "space-y-2 pl-4", children: items.map((milestone) => {
+                                            const userChecked = hasUserChecked(milestone);
+                                            const uncheckedUsers = getUncheckedUsers(milestone);
+                                            const checkedUsers = getCheckedUsers(milestone);
+                                            const isExpanded = expandedMilestones.has(milestone._id);
+                                            return (_jsxs("div", { className: "space-y-0", children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: () => toggleMilestoneExpand(milestone._id), onContextMenu: (event) => {
+                                                            event.preventDefault();
+                                                            setOpenMilestoneMenuId(milestone._id);
+                                                        }, onKeyDown: (event) => {
+                                                            if (event.key === "Enter" || event.key === " ") {
+                                                                event.preventDefault();
+                                                                toggleMilestoneExpand(milestone._id);
+                                                            }
+                                                        }, className: "w-full flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800/30 hover:bg-gray-100 dark:hover:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-800 transition-colors group text-left", children: [_jsx("button", { onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    handleToggle(milestone._id);
+                                                                }, className: `mt-0.5 transition-colors flex-shrink-0 ${userChecked ? "text-green-500" : "text-gray-300 hover:text-teal-400"}`, children: userChecked ? _jsx(CheckCircle2, { className: "w-5 h-5" }) : _jsx(Circle, { className: "w-5 h-5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: `text-sm font-medium transition-all ${userChecked ? "text-gray-400 line-through" : "text-gray-700 dark:text-gray-200"}`, children: milestone.title }), milestone.dueDate && (_jsxs("p", { className: "text-[10px] text-gray-500 dark:text-gray-400 mt-1", children: ["Due: ", new Date(milestone.dueDate).toLocaleDateString()] }))] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsxs("span", { className: `text-xs font-semibold px-2 py-1 rounded-full ${milestone.isCompleted
+                                                                            ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                                                                            : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300"}`, children: [milestone.checks.length, "/", participants.length] }), _jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform flex-shrink-0 ${isExpanded ? "" : "-rotate-90"}` })] }), _jsxs(DropdownMenu, { open: openMilestoneMenuId === milestone._id, onOpenChange: (open) => setOpenMilestoneMenuId(open ? milestone._id : null), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { onClick: (e) => e.stopPropagation(), className: "p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-all flex-shrink-0", children: _jsx(MoreVertical, { className: "w-4 h-4 text-gray-400" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: (event) => {
+                                                                                    event.stopPropagation();
+                                                                                    setOpenMilestoneMenuId(null);
+                                                                                    void handleToggle(milestone._id);
+                                                                                }, children: [userChecked ? _jsx(Circle, { className: "w-4 h-4 mr-2" }) : _jsx(CheckCircle2, { className: "w-4 h-4 mr-2" }), userChecked ? "Uncheck milestone" : "Check milestone"] }), _jsxs(DropdownMenuItem, { onClick: (event) => {
+                                                                                    event.stopPropagation();
+                                                                                    showMemberProgress(milestone._id);
+                                                                                }, children: [_jsx(ListTodo, { className: "w-4 h-4 mr-2" }), "View member progress"] }), (isSameChatActor(milestone.createdBy, currentActor) || isAdmin) && _jsxs(DropdownMenuItem, { onClick: (event) => {
+                                                                                    event.stopPropagation();
+                                                                                    setOpenMilestoneMenuId(null);
+                                                                                    handleEdit(milestone);
+                                                                                }, children: [_jsx(Pencil, { className: "w-4 h-4 mr-2" }), "Edit"] }), (isSameChatActor(milestone.createdBy, currentActor) || isAdmin) && _jsxs(DropdownMenuItem, { className: "text-red-500", onClick: (event) => {
+                                                                                    event.stopPropagation();
+                                                                                    setOpenMilestoneMenuId(null);
+                                                                                    void handleDelete(milestone._id);
+                                                                                }, children: [_jsx(Trash2, { className: "w-4 h-4 mr-2" }), "Delete"] })] })] })] }), isExpanded && (_jsxs("div", { className: "w-full rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800/50 space-y-4", children: [milestone.description && (_jsxs("div", { className: "rounded-lg bg-slate-50 px-3 py-2.5 dark:bg-slate-900/40", children: [_jsx("p", { className: "text-[10px] font-semibold text-slate-500 uppercase tracking-wider mb-1", children: "Description" }), _jsx("p", { className: "text-sm text-slate-700 dark:text-slate-300", children: milestone.description })] })), _jsxs("div", { className: "flex items-center justify-between border-b border-slate-100 pb-2 dark:border-slate-700", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300", children: "Member progress" }), _jsxs("span", { className: "rounded-full bg-teal-50 px-2 py-1 text-xs font-semibold text-teal-700 dark:bg-teal-900/30 dark:text-teal-300", children: [checkedUsers.length, " of ", participants.length, " checked"] })] }), checkedUsers.length > 0 && (_jsxs("div", { children: [_jsxs("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-emerald-700 dark:text-emerald-300", children: ["Completed (", checkedUsers.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: checkedUsers.map((participant) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-full bg-emerald-50 py-1 pl-1 pr-2.5 text-xs font-medium text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), participantLabel(participant)] }, participant.actorId))) })] })), uncheckedUsers.length > 0 && (_jsxs("div", { children: [_jsxs("p", { className: "mb-2 text-[10px] font-semibold text-amber-700 dark:text-amber-300 uppercase tracking-wider", children: ["Pending (", uncheckedUsers.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: uncheckedUsers.map((participant) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-full bg-amber-50 py-1 pl-1 pr-2.5 text-xs font-medium text-amber-800 dark:bg-amber-900/20 dark:text-amber-200", children: [_jsx(AlertCircle, { className: "w-3.5 h-3.5 flex-shrink-0" }), _jsx("span", { children: participantLabel(participant) })] }, participant.actorId))) })] })), milestone.isCompleted && (_jsxs("div", { className: "flex items-center gap-2 p-2 bg-green-50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800/30", children: [_jsx(CheckCircle2, { className: "w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0" }), _jsx("p", { className: "text-xs text-green-700 dark:text-green-400 font-medium", children: "All participants have checked this milestone" })] }))] }))] }, milestone._id));
+                                        }) }))] }, section));
+                        }))] })) }), isFeatureEnabled && !isAdding && (_jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", children: _jsxs(Button, { onClick: () => setIsAdding(true), className: "w-full bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-600 hover:to-cyan-700 text-white rounded-lg flex items-center justify-center gap-2", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Milestone"] }) }))] }));
+}

package/dist/chat/components/ParticipantSelector.d.ts

@@ -0,0 +1,11 @@
+import { type ChatActorRef, type Conversation, type ExpenseSplit } from "@myrjfa/state/dist/lib/models/chat";
+import { Dispatch, SetStateAction } from "react";
+interface ParticipantSelectorProps {
+    participants: ChatActorRef[];
+    onChange: (participants: ChatActorRef[]) => void;
+    onSplitsChange: Dispatch<SetStateAction<ExpenseSplit[]>>;
+    availableUsers: Conversation["participants"];
+}
+export declare function ParticipantSelector({ participants, onChange, onSplitsChange, availableUsers }: ParticipantSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ParticipantSelector.d.ts.map

package/dist/chat/components/ParticipantSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantSelector.d.ts","sourceRoot":"","sources":["../../../src/chat/components/ParticipantSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,YAAY,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,UAAU,wBAAwB;IAC9B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACzD,cAAc,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAChC,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,cAAc,EACjB,EAAE,wBAAwB,2CAuE1B"}