@myrjfa/ui 1.1.0 → 1.1.1

package/dist/chat/MessageInput.js

@@ -1,84 +1,72 @@
 "use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, 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 } from "lucide-react";
+import { Send, Smile, Image as ImageIcon, FileText, Camera, MapPin, Mic, X, CircleStopIcon, VideoIcon, PlusCircleIcon, ListTodo, ReceiptText, ChartBar } 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 { showAlert } from "../misc/alertdialogclaude";
+import { isCompressibleImage, compressImage } from "@myrjfa/state/dist/lib/utils/fileCompression";
 import EmojiPicker from 'emoji-picker-react';
-export function MessageInput(_a) {
-    var _this = this;
-    var _b;
-    var onSend = _a.onSend, onTypingStart = _a.onTypingStart, onTypingStop = _a.onTypingStop, disabled = _a.disabled, replyTo = _a.replyTo, onCancelReply = _a.onCancelReply, onAddMilestone = _a.onAddMilestone, onAddExpense = _a.onAddExpense, _c = _a.activePanel, activePanel = _c === void 0 ? "chat" : _c;
-    var _d = useState(""), text = _d[0], setText = _d[1];
-    var _e = useState([]), selectedFiles = _e[0], setSelectedFiles = _e[1];
-    var textareaRef = useRef(null);
-    var fileInputRef = useRef(null);
-    var _f = useState(""), fileAcceptType = _f[0], setFileAcceptType = _f[1];
-    var typingTimeoutRef = useRef(null);
-    var isTypingRef = useRef(false);
-    var _g = useState(false), showEmojiPicker = _g[0], setShowEmojiPicker = _g[1];
-    var _h = useState(false), isCameraOpen = _h[0], setIsCameraOpen = _h[1];
-    var _j = useState(false), isRecording = _j[0], setIsRecording = _j[1];
-    var mediaRecorderRef = useRef(null);
-    var audioChunksRef = useRef([]);
+export function MessageInput({ onSend, onTypingStart, onTypingStop, disabled, replyTo, editMessage, onEdit, onCancelEdit, onCancelReply, onAddMilestone, onAddExpense, onCreatePoll, participants = [], // Added
+activePanel = "chat" }) {
+    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 : "" : "");
+    const [mentionSearch, setMentionSearch] = useState(null);
+    const [mentionIndex, setMentionIndex] = useState(-1);
+    const [selectedFiles, setSelectedFiles] = 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 [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [isCameraOpen, setIsCameraOpen] = useState(false);
+    const [isPollOpen, setIsPollOpen] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const mediaRecorderRef = useRef(null);
+    const audioChunksRef = useRef([]);
+    const [mentionCoords, setMentionCoords] = useState({ top: 0, left: 0 }); // Added
     // Auto-resize textarea
-    useEffect(function () {
-        var el = textareaRef.current;
+    useEffect(() => {
+        const el = textareaRef.current;
         if (el) {
             el.style.height = "auto";
             el.style.height = Math.min(el.scrollHeight, 120) + "px";
         }
     }, [text]);
-    function handleChange(e) {
-        setText(e.target.value);
+    // Focus input when replyTo message is set
+    useEffect(() => {
+        var _a;
+        if (replyTo) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [replyTo]);
+    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;
@@ -87,26 +75,82 @@ export function MessageInput(_a) {
         // Reset typing timeout
         if (typingTimeoutRef.current)
             clearTimeout(typingTimeoutRef.current);
-        typingTimeoutRef.current = setTimeout(function () {
+        typingTimeoutRef.current = setTimeout(() => {
             isTypingRef.current = false;
             onTypingStop === null || onTypingStop === void 0 ? void 0 : onTypingStop();
         }, 2000);
-    }
-    function handleSend() {
+    };
+    const insertMention = (username) => {
+        var _a;
+        if (mentionIndex === -1)
+            return;
+        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);
+        // 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;
-        var trimmed = text.trim();
+        const trimmed = text.trim();
         if ((!trimmed && selectedFiles.length === 0) || disabled)
             return;
-        onSend(trimmed, selectedFiles);
-        setText("");
-        setSelectedFiles([]);
-        // 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();
+        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);
+            }
+            setUploadProgress(100);
+            setText("");
+            setSelectedFiles([]);
+            // 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) {
@@ -114,21 +158,21 @@ export function MessageInput(_a) {
             handleSend();
         }
     }
-    var handleFileChange = function (e) {
+    const handleFileChange = (e) => {
         if (e.target.files) {
-            setSelectedFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), Array.from(e.target.files), true); });
+            setSelectedFiles(prev => [...prev, ...Array.from(e.target.files)]);
         }
     };
-    var removeFile = function (index) {
-        setSelectedFiles(function (prev) { return prev.filter(function (_, i) { return i !== index; }); });
+    const removeFile = (index) => {
+        setSelectedFiles(prev => prev.filter((_, i) => i !== index));
     };
-    var handleLocation = function () {
+    const handleLocation = () => {
         if ("geolocation" in navigator) {
-            navigator.geolocation.getCurrentPosition(function (position) {
-                var _a = position.coords, latitude = _a.latitude, longitude = _a.longitude;
-                var mapLink = "https://www.google.com/maps?q=".concat(latitude, ",").concat(longitude);
+            navigator.geolocation.getCurrentPosition((position) => {
+                const { latitude, longitude } = position.coords;
+                const mapLink = `https://www.google.com/maps?q=${latitude},${longitude}`;
                 onSend(mapLink);
-            }, function (error) {
+            }, (error) => {
                 console.error("Error getting location:", error);
                 showAlert("Could not get location.");
             });
@@ -137,99 +181,72 @@ export function MessageInput(_a) {
             showAlert("Geolocation is not supported by this browser.");
         }
     };
-    var handleCameraCapture = function (file) {
-        setSelectedFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), [file], false); });
+    const handleCameraCapture = (file) => {
+        setSelectedFiles(prev => [...prev, file]);
     };
-    var startRecording = function () { return __awaiter(_this, void 0, void 0, function () {
-        var stream_1, mediaRecorder, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
-                case 1:
-                    stream_1 = _a.sent();
-                    mediaRecorder = new MediaRecorder(stream_1);
-                    mediaRecorderRef.current = mediaRecorder;
-                    audioChunksRef.current = [];
-                    mediaRecorder.ondataavailable = function (event) {
-                        if (event.data.size > 0) {
-                            audioChunksRef.current.push(event.data);
-                        }
-                    };
-                    mediaRecorder.onstop = function () {
-                        var audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" });
-                        var audioFile = new File([audioBlob], "voice_".concat(Date.now(), ".webm"), { type: "audio/webm" });
-                        setSelectedFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), [audioFile], false); });
-                        stream_1.getTracks().forEach(function (track) { return track.stop(); });
-                    };
-                    mediaRecorder.start();
-                    setIsRecording(true);
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_1 = _a.sent();
-                    console.error("Error accessing microphone:", err_1);
-                    alert("Could not access microphone");
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
-    var stopRecording = function () {
+    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);
+        }
+        catch (err) {
+            console.error("Error accessing microphone:", err);
+            alert("Could not access microphone");
+        }
+    };
+    const stopRecording = () => {
         if (mediaRecorderRef.current && isRecording) {
             mediaRecorderRef.current.stop();
             setIsRecording(false);
         }
     };
-    var handleEmojiSelect = function (emojiObject) {
+    const handleEmojiSelect = (emojiObject) => {
         if (textareaRef.current) {
-            var cursorPos = textareaRef.current.selectionStart;
-            var newText = text.slice(0, cursorPos) + emojiObject.emoji + text.slice(cursorPos);
+            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
-    var showMessageInput = activePanel === "chat";
-    return (_jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3", children: [_jsx(CameraDialog, { open: isCameraOpen, onOpenChange: setIsCameraOpen, onCapture: handleCameraCapture }), selectedFiles.length > 0 && (_jsx("div", { className: "max-w-4xl mx-auto mb-2 flex flex-wrap gap-2", children: selectedFiles.map(function (file, i) { return (_jsxs("div", { className: "flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg px-2 py-1 text-xs text-gray-600 dark:text-gray-300", children: [_jsx("span", { className: "truncate max-w-[150px]", children: file.name }), _jsx("button", { onClick: function () { return removeFile(i); }, className: "ml-2 text-red-500 hover:text-red-700 font-bold", children: "\u00D7" })] }, i)); }) })), 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: [_jsxs("div", { className: "text-xs font-semibold text-teal-600 dark:text-teal-400", children: ["Replying to ", replyTo.senderId] }), _jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 truncate", children: (_b = replyTo.content.text) === null || _b === void 0 ? void 0 : _b.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: "".concat(showMessageInput ? "flex" : "hidden md:flex", " items-end gap-2 max-w-4xl mx-auto"), children: [_jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: fileAcceptType, multiple: true, className: "hidden" }), _jsxs(Popover, { 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: [_jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+    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: [_jsx(CameraDialog, { open: isCameraOpen, onOpenChange: setIsCameraOpen, onCapture: handleCameraCapture }), _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 => !mentionSearch || p.userId.toLowerCase().includes(mentionSearch.toLowerCase()))
+                        .map(p => (_jsx("button", { onClick: () => insertMention(p.userId), 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.userId] }) }, p.userId))), participants.filter(p => !mentionSearch || p.userId.toLowerCase().includes(mentionSearch.toLowerCase())).length === 0 && (_jsx("div", { className: "px-3 py-2 text-xs text-gray-500 italic", children: "No members found" }))] })), 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 bg-gray-100 dark:bg-gray-800 rounded-lg px-2 py-1 text-xs text-gray-600 dark:text-gray-300", children: [_jsx("span", { className: "truncate max-w-[150px]", children: file.name }), _jsx("button", { onClick: () => removeFile(i), className: "ml-2 text-red-500 hover:text-red-700 font-bold", children: "\u00D7" })] }, i))) })), 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" + 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: [_jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: fileAcceptType, multiple: true, className: "hidden" }), !editMessage && _jsxs(Popover, { 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: [_jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: async () => {
                                             var _a;
-                                            return __generator(this, function (_b) {
-                                                switch (_b.label) {
-                                                    case 0: return [4 /*yield*/, setFileAcceptType(".pdf,.doc,.docx,.txt,.xlsx,.pptx")];
-                                                    case 1:
-                                                        _b.sent();
-                                                        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                                        return [2 /*return*/];
-                                                }
-                                            });
-                                        }); }, children: [_jsx(FileText, { className: "w-4 h-4 text-purple-500" }), "Document"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                            await setFileAcceptType(".pdf,.doc,.docx,.txt,.xlsx,.pptx");
+                                            (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                        }, children: [_jsx(FileText, { className: "w-4 h-4 text-purple-500" }), "Document"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: async () => {
                                             var _a;
-                                            return __generator(this, function (_b) {
-                                                switch (_b.label) {
-                                                    case 0: return [4 /*yield*/, setFileAcceptType("image/*")];
-                                                    case 1:
-                                                        _b.sent();
-                                                        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                                        return [2 /*return*/];
-                                                }
-                                            });
-                                        }); }, children: [_jsx(ImageIcon, { className: "w-4 h-4 text-blue-500" }), "Photos"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                            await setFileAcceptType("image/*");
+                                            (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                        }, children: [_jsx(ImageIcon, { className: "w-4 h-4 text-blue-500" }), "Photos"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: async () => {
                                             var _a;
-                                            return __generator(this, function (_b) {
-                                                switch (_b.label) {
-                                                    case 0: return [4 /*yield*/, setFileAcceptType("video/*")];
-                                                    case 1:
-                                                        _b.sent();
-                                                        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                                        return [2 /*return*/];
-                                                }
-                                            });
-                                        }); }, children: [_jsx(VideoIcon, { className: "w-4 h-4 text-rose-500" }), "Videos"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: handleLocation, children: [_jsx(MapPin, { className: "w-4 h-4 text-green-500" }), "Location"] }), _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 my-1" }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: function () {
+                                            await setFileAcceptType("video/*");
+                                            (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                        }, children: [_jsx(VideoIcon, { className: "w-4 h-4 text-rose-500" }), "Videos"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: handleLocation, children: [_jsx(MapPin, { className: "w-4 h-4 text-green-500" }), "Location"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full", onClick: () => setIsPollOpen(true), children: [_jsx(ChartBar, { className: "w-4 h-4 text-orange-500" }), "Poll"] }), _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 my-1" }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: () => {
                                             onAddMilestone === null || onAddMilestone === void 0 ? void 0 : onAddMilestone();
-                                        }, children: [_jsx(ListTodo, { className: "w-4 h-4" }), "Add Milestone"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: function () {
+                                        }, children: [_jsx(ListTodo, { className: "w-4 h-4" }), "Add Milestone"] }), _jsxs(Button, { variant: "ghost", className: "justify-start gap-2 w-full text-teal-600 dark:text-teal-400", onClick: () => {
                                             onAddExpense === null || onAddExpense === void 0 ? void 0 : onAddExpense();
-                                        }, children: [_jsx(ReceiptText, { className: "w-4 h-4" }), "Add Expense"] })] })] }), _jsxs("div", { className: "flex-1 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-end", children: [_jsx(Textarea, { ref: textareaRef, value: text, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: "Type a message...", disabled: disabled, 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]" }), _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: function () { return setShowEmojiPicker(!showEmojiPicker); }, children: _jsx(Smile, { className: "w-5 h-5" }) }), _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: function () { return setIsCameraOpen(true); }, children: _jsx(Camera, { className: "w-5 h-5" }) })] }), text.trim() || selectedFiles.length > 0 ? (_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" }) })) : (_jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full h-11 w-11 shrink-0 transition-all ".concat(isRecording
+                                        }, children: [_jsx(ReceiptText, { className: "w-4 h-4" }), "Add Expense"] })] })] }), _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" }) }), !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" }) })] }), text.trim() || 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" }) })) : (_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: function () { return isRecording ? stopRecording() : startRecording(); }, children: isRecording ? _jsx(CircleStopIcon, { className: "w-6 h-6" }) : _jsx(Mic, { className: "w-6 h-6" }) })), showEmojiPicker && _jsx(EmojiPicker, { onEmojiClick: handleEmojiSelect })] })] }));
+                            : "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" }) })), 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 })] })] }));
 }

package/dist/chat/MilestonePanel.d.ts

@@ -2,7 +2,10 @@ interface MilestonePanelProps {
     conversationId: string;
     currentUserId: string;
     isFullScreen?: boolean;
+    isFeatureEnabled?: boolean;
+    isAdmin?: boolean;
+    onEnableFeature?: () => void;
 }
-export declare function MilestonePanel({ conversationId, currentUserId, isFullScreen }: MilestonePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function MilestonePanel({ conversationId, currentUserId, isFullScreen, isFeatureEnabled, isAdmin, onEnableFeature }: MilestonePanelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MilestonePanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MilestonePanel.d.ts","sourceRoot":"","sources":["../../src/chat/MilestonePanel.tsx"],"names":[],"mappings":"AASA,UAAU,mBAAmB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,YAAoB,EAAE,EAAE,mBAAmB,2CAgL1G"}
+{"version":3,"file":"MilestonePanel.d.ts","sourceRoot":"","sources":["../../src/chat/MilestonePanel.tsx"],"names":[],"mappings":"AAYA,UAAU,mBAAmB;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,cAAc,CAAC,EAC3B,cAAc,EACd,aAAa,EACb,YAAoB,EACpB,gBAAuB,EACvB,OAAe,EACf,eAAe,EAClB,EAAE,mBAAmB,2CA6brB"}