function MainComponent() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [userName, setUserName] = useState(""); const [isNameSet, setIsNameSet] = useState(false); const messagesEndRef = useRef(null); const [isUploading, setIsUploading] = useState(false); const [upload, { loading: uploadLoading }] = useUpload(); const [typingUsers, setTypingUsers] = useState(new Set()); const fetchMessages = async ()=>{ const response = await fetch("/api/messages/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userName }) }); const data = await response.json(); if (data.messages) { setMessages(data.messages); const typing = new Set(data.messages.filter((m)=>m.is_typing).map((m)=>m.sender_name).filter((name)=>name !== userName)); setTypingUsers(typing); } }; const handleFileUpload = async (e)=>{ const file = e.target.files?.[0]; if (!file) return; setIsUploading(true); try { const { url, mimeType } = await upload({ file }); if (url) { await fetch("/api/messages/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: "Shared a file", sender_name: userName, media_url: url, media_type: mimeType }) }); fetchMessages(); } } catch (error) { console.error("Upload failed:", error); } setIsUploading(false); }; useEffect(()=>{ fetchMessages(); const interval = setInterval(fetchMessages, 1000); return ()=>clearInterval(interval); }, [ userName ]); useEffect(()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [ messages ]); const handleSendMessage = async (e)=>{ e.preventDefault(); if (!newMessage.trim()) return; const response = await fetch("/api/messages/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: newMessage, sender_name: userName }) }); if (response.ok) { setNewMessage(""); fetchMessages(); } }; if (!isNameSet) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-xl w-96 transform transition-all hover:scale-105", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Welcome to Live Chat"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); if (userName.trim()) setIsNameSet(true); }, className: "space-y-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userName, onChange: (e)=>setUserName(e.target.value), className: "w-full p-3 border-2 border-blue-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all", placeholder: "Enter your name...", required: true, __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-semibold hover:opacity-90 transform transition-all hover:-translate-y-1", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Join Chat")))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gradient-to-b from-gray-50 to-gray-100", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, "Live Chat"), /*#__PURE__*/ React.createElement("p", { className: "opacity-90", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "Chatting as: ", userName)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `p-4 rounded-lg max-w-[80%] transform transition-all hover:scale-[1.02] ${message.sender_name === userName ? "ml-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white" : "bg-white shadow-md"}`, __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-sm mb-1", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, message.sender_name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, message.content), message.media_url && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, message.media_type?.startsWith("image/") ? /*#__PURE__*/ React.createElement("img", { src: message.media_url, alt: "Shared image", className: "rounded-lg max-w-full max-h-[300px] object-contain", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }) : message.media_type?.startsWith("video/") ? /*#__PURE__*/ React.createElement("video", { controls: true, className: "rounded-lg max-w-full max-h-[300px]", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: message.media_url, type: message.media_type, __source: { fileName: "", lineNumber: 153, columnNumber: 23 }, __self: this })) : /*#__PURE__*/ React.createElement("a", { href: message.media_url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }, "Download File")), /*#__PURE__*/ React.createElement("div", { className: "text-xs opacity-75 mt-1", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, new Date(message.created_at).toLocaleTimeString()))), typingUsers.size > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 animate-pulse", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, Array.from(typingUsers).join(", "), " ", typingUsers.size === 1 ? "is" : "are", " typing..."), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "p-4 bg-white shadow-lg border-t", __source: { fileName: "", lineNumber: 185, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "p-2 rounded-full hover:bg-gray-100 cursor-pointer transition-colors", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*,video/*", onChange: handleFileUpload, className: "hidden", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), className: "flex-1 p-3 border-2 border-gray-200 rounded-full focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isUploading || uploadLoading, className: "px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold hover:opacity-90 transform transition-all hover:-translate-y-1 disabled:opacity-50", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, isUploading || uploadLoading ? "Uploading..." : "Send")))); }