function MainComponent() { const [chatGroups, setChatGroups] = React.useState([]); const [selectedGroup, setSelectedGroup] = React.useState(null); const [messages, setMessages] = React.useState([]); const [message, setMessage] = React.useState(""); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [sendingMessage, setSendingMessage] = React.useState(false); const [pagination, setPagination] = React.useState({ currentPage: 1, totalPages: 1, total: 0, limit: 20 }); const [sidebarOpen, setSidebarOpen] = React.useState(false); const [username, setUsername] = React.useState(""); const [reportModalOpen, setReportModalOpen] = React.useState(false); const [reportReason, setReportReason] = React.useState(""); const [messageToReport, setMessageToReport] = React.useState(null); const [reportSuccess, setReportSuccess] = React.useState(false); const [currentTime, setCurrentTime] = React.useState(new Date()); const [is3AMActive, setIs3AMActive] = React.useState(false); const [timeUntil3AM, setTimeUntil3AM] = React.useState(""); const [rulesModalOpen, setRulesModalOpen] = React.useState(false); const [gifSearchOpen, setGifSearchOpen] = React.useState(false); const [gifSearchQuery, setGifSearchQuery] = React.useState(""); const [gifResults, setGifResults] = React.useState([]); const [gifSearchLoading, setGifSearchLoading] = React.useState(false); const [mentionSuggestions, setMentionSuggestions] = React.useState([]); const [showMentionSuggestions, setShowMentionSuggestions] = React.useState(false); const [usernames, setUsernames] = React.useState([]); const [isPrivateMode, setIsPrivateMode] = React.useState(false); const [selectedRecipient, setSelectedRecipient] = React.useState(null); const [showProTips, setShowProTips] = React.useState(true); const [replyingToPrivate, setReplyingToPrivate] = React.useState(null); const chatContainerRef = React.useRef(null); const messageInputRef = React.useRef(null); React.useEffect(()=>{ fetchChatGroups(); generateRandomUsername(); const timer = setInterval(()=>{ const now = new Date(); setCurrentTime(now); const hour = now.getHours(); const is3AMTimeframe = hour >= 2 && hour < 5; setIs3AMActive(is3AMTimeframe); if (!is3AMTimeframe) { const nextTwoAM = new Date(now); if (hour >= 5) { nextTwoAM.setDate(nextTwoAM.getDate() + 1); } nextTwoAM.setHours(2, 0, 0, 0); const diffMs = nextTwoAM - now; const diffHrs = Math.floor(diffMs / (1000 * 60 * 60)); const diffMins = Math.floor(diffMs % (1000 * 60 * 60) / (1000 * 60)); setTimeUntil3AM(`${diffHrs}h ${diffMins}m`); } }, 60000); const now = new Date(); const hour = now.getHours(); const is3AMTimeframe = hour >= 2 && hour < 5; setIs3AMActive(is3AMTimeframe); if (!is3AMTimeframe) { const nextTwoAM = new Date(now); if (hour >= 5) { nextTwoAM.setDate(nextTwoAM.getDate() + 1); } nextTwoAM.setHours(2, 0, 0, 0); const diffMs = nextTwoAM - now; const diffHrs = Math.floor(diffMs / (1000 * 60 * 60)); const diffMins = Math.floor(diffMs % (1000 * 60 * 60) / (1000 * 60)); setTimeUntil3AM(`${diffHrs}h ${diffMins}m`); } return ()=>clearInterval(timer); }, []); React.useEffect(()=>{ if (selectedGroup) { fetchMessages(selectedGroup.id, true, true); fetchUsernames(selectedGroup.id); } }, [ selectedGroup ]); React.useEffect(()=>{ if (chatContainerRef.current) { chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; } }, [ messages ]); const generateRandomUsername = async ()=>{ try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GENERATE_USERNAME" }) }); if (!response.ok) { throw new Error(`Error generating username: ${response.status}`); } const data = await response.json(); if (data.success) { setUsername(data.username); if (typeof window !== "undefined") { localStorage.setItem("whisperwall_chat_username", data.username); } } } catch (error) { console.error(error); } }; React.useEffect(()=>{ if (typeof window !== "undefined") { const savedUsername = localStorage.getItem("whisperwall_chat_username"); if (savedUsername) { setUsername(savedUsername); } } }, []); const fetchChatGroups = async ()=>{ setLoading(true); try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GET_GROUPS" }) }); if (!response.ok) { throw new Error(`Error fetching chat groups: ${response.status}`); } const data = await response.json(); if (data.success) { setChatGroups(data.groups); if (data.groups.length > 0 && !selectedGroup) { setSelectedGroup(data.groups[0]); } } else { setError(data.error || "Failed to load chat groups"); } } catch (error) { console.error(error); setError("Failed to load chat groups. Please try again later."); } finally{ setLoading(false); } }; const fetchMessages = async (groupId, showLoading = true, initialLoad = false)=>{ if (showLoading) setLoading(true); try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GET_MESSAGES", group_id: groupId, page: pagination.currentPage, limit: pagination.limit, username: username }) }); if (!response.ok) { throw new Error(`Error fetching messages: ${response.status}`); } const data = await response.json(); if (data.success) { if (initialLoad && data.messages && data.messages.length > 0) { setMessages(data.messages); } setPagination(data.pagination); } else { setError(data.error || "Failed to load messages"); } } catch (error) { console.error(error); if (showLoading) { setError("Failed to load messages. Please try again later."); } } finally{ if (showLoading) setLoading(false); } }; const fetchUsernames = async (groupId)=>{ try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "GET_USERNAMES", group_id: groupId }) }); if (!response.ok) { throw new Error(`Error fetching usernames: ${response.status}`); } const data = await response.json(); if (data.success) { setUsernames(data.usernames || []); } } catch (error) { console.error("Error fetching usernames:", error); } }; const handleFormSubmit = (e)=>{ e.preventDefault(); console.log("Form submitted"); if (isPrivateMode && replyingToPrivate) { const replyData = { ...replyingToPrivate }; handleSendMessage(replyData); } else { handleSendMessage(null); } }; const handleSendMessage = async (preservedReplyData = null)=>{ console.log("handleSendMessage called", { message, selectedGroup }); if (!message.trim() || !selectedGroup) { console.log("Message empty or no group selected"); return; } if (is3AMThoughtsGroup(selectedGroup) && !is3AMActive) { setError("3AM Thoughts is only active between 2AM and 5AM"); return; } setSendingMessage(true); setError(null); try { let messageToSend = message.trim(); let isPrivateMessage = false; let recipientUser = null; if (isPrivateMode && selectedRecipient) { isPrivateMessage = true; recipientUser = selectedRecipient; const replyData = preservedReplyData || replyingToPrivate; if (replyData) { const originalMsgPreview = isGifMessage(replyData.message) ? "[GIF image]" : replyData.message.length > 100 ? replyData.message.substring(0, 100) + "..." : replyData.message; messageToSend = `/private @${selectedRecipient} [RE: ${originalMsgPreview}] ${message.replace(/^\/private\s+@\S+\s+/, "")}`; } else { messageToSend = `/private @${selectedRecipient} ${message.replace(/^\/private\s+@\S+\s+/, "")}`; } } console.log("Sending message:", { messageToSend, group_id: selectedGroup.id, username, is_private: isPrivateMessage, recipient_username: recipientUser }); const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "POST_MESSAGE", group_id: selectedGroup.id, message: messageToSend, username: username, is_private: isPrivateMessage, recipient_username: recipientUser }) }); if (!response.ok) { throw new Error(`Error sending message: ${response.status}`); } const data = await response.json(); console.log("Message send response:", data); if (data.success) { setMessage(""); setIsPrivateMode(false); setSelectedRecipient(null); setReplyingToPrivate(null); if (data.message) { setMessages((prevMessages)=>[ ...prevMessages, data.message ]); if (chatContainerRef.current) { setTimeout(()=>{ chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; }, 100); } } setTimeout(()=>{ fetchMessages(selectedGroup.id, false); }, 1000); } else { setError(data.error || "Failed to send message"); } } catch (error) { console.error("Error sending message:", error); setError("Failed to send message. Please try again later."); } finally{ setSendingMessage(false); } }; const handleReportMessage = async ()=>{ if (!messageToReport || !reportReason.trim()) { return; } try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "REPORT_MESSAGE", message_id: messageToReport.id, report_reason: reportReason.trim() }) }); if (!response.ok) { throw new Error(`Error reporting message: ${response.status}`); } const data = await response.json(); if (data.success) { setReportSuccess(true); setTimeout(()=>{ setReportModalOpen(false); setReportReason(""); setMessageToReport(null); setReportSuccess(false); }, 2000); } else { setError(data.error || "Failed to report message"); } } catch (error) { console.error(error); setError("Failed to report message. Please try again later."); } }; const openReportModal = (msg)=>{ setMessageToReport(msg); setReportModalOpen(true); setReportSuccess(false); }; const closeReportModal = ()=>{ setReportModalOpen(false); setReportReason(""); setMessageToReport(null); setReportSuccess(false); }; const selectGroup = (group)=>{ setSelectedGroup(group); setPagination({ currentPage: 1, totalPages: 1, total: 0, limit: 20 }); setSidebarOpen(false); }; const formatDate = (dateString)=>{ const date = new Date(dateString); return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" }); }; const toggleSidebar = ()=>{ setSidebarOpen(!sidebarOpen); }; const is3AMThoughtsGroup = (group)=>{ return group && group.name === "3AM Thoughts"; }; const getChatRules = (groupName)=>{ const rules = { General: [ "Be respectful to other users", "No spam or excessive self-promotion", "No hate speech, discrimination, or harassment", "Keep discussions civil and constructive", "No explicit or adult content" ], Random: [ "Anything goes (within reason)", "Keep it fun and light-hearted", "No personal attacks", "Random topics are encouraged" ], "3AM Thoughts": [ "Only active between 2AM and 5AM local time", "Share your late-night thoughts and ideas", "Be respectful of others' vulnerability", "Deep, philosophical discussions welcome", "No judging others' thoughts or ideas", "What happens at 3AM stays at 3AM" ] }; return rules[groupName] || rules["General"]; }; const openRulesModal = ()=>{ setRulesModalOpen(true); }; const closeRulesModal = ()=>{ setRulesModalOpen(false); }; const searchGifs = async (query)=>{ if (!query.trim()) { setGifResults([]); return; } setGifSearchLoading(true); try { const response = await fetch("/api/search-giphy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: query }) }); if (!response.ok) { throw new Error(`Error searching GIFs: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setGifResults(data.gifs || []); } catch (error) { console.error("Error fetching GIFs:", error); setError("Failed to load GIFs. Please try again later."); } finally{ setGifSearchLoading(false); } }; const handleGifSearch = (e)=>{ const query = e.target.value; setGifSearchQuery(query); const timeoutId = setTimeout(()=>{ searchGifs(query); }, 500); return ()=>clearTimeout(timeoutId); }; const selectGif = async (gif)=>{ if (!selectedGroup) return; if (is3AMThoughtsGroup(selectedGroup) && !is3AMActive) { setError("3AM Thoughts is only active between 2AM and 5AM"); setGifSearchOpen(false); return; } setSendingMessage(true); setError(null); try { const gifMessage = `[GIF]${gif.images.fixed_height.url}`; const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ method: "POST_MESSAGE", group_id: selectedGroup.id, message: gifMessage, username: username }) }); if (!response.ok) { throw new Error(`Error sending GIF: ${response.status}`); } const data = await response.json(); if (data.success) { if (data.message) { setMessages((prevMessages)=>[ ...prevMessages, data.message ]); if (chatContainerRef.current) { setTimeout(()=>{ chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; }, 100); } } setTimeout(()=>{ fetchMessages(selectedGroup.id, false); }, 1000); setGifSearchOpen(false); setGifSearchQuery(""); setGifResults([]); } else { setError(data.error || "Failed to send GIF"); } } catch (error) { console.error(error); setError("Failed to send GIF. Please try again later."); } finally{ setSendingMessage(false); } }; const toggleGifSearch = ()=>{ setGifSearchOpen(!gifSearchOpen); if (!gifSearchOpen) { setGifSearchQuery(""); setGifResults([]); } }; const isGifMessage = (message)=>{ return message.startsWith("[GIF]"); }; const extractGifUrl = (message)=>{ return message.substring(5); // Remove the [GIF] prefix }; const handleMessageChange = (e)=>{ const value = e.target.value; setMessage(value); if (value.startsWith("/private @")) { setIsPrivateMode(true); const match = value.match(/^\/private @(\S*)$/); if (match) { const usernameQuery = match[1].toLowerCase(); if (usernameQuery.length > 0) { const filteredUsernames = usernames.filter((username)=>username.toLowerCase().includes(usernameQuery)); setMentionSuggestions(filteredUsernames); setShowMentionSuggestions(filteredUsernames.length > 0); } else { setMentionSuggestions(usernames); setShowMentionSuggestions(usernames.length > 0); } } else { const fullMatch = value.match(/^\/private @(\S+)\s/); if (fullMatch) { setSelectedRecipient(fullMatch[1]); setShowMentionSuggestions(false); } else { setShowMentionSuggestions(false); } } } else { setIsPrivateMode(false); setShowMentionSuggestions(false); setSelectedRecipient(null); } }; const selectMentionSuggestion = (username)=>{ setMessage(`/private @${username} `); setSelectedRecipient(username); setShowMentionSuggestions(false); if (messageInputRef.current) { messageInputRef.current.focus(); } }; const handlePrivateReply = (msg)=>{ if (!msg.username || msg.username === username) return; setIsPrivateMode(true); setSelectedRecipient(msg.username); setReplyingToPrivate(msg); const replyMsg = { ...msg }; setReplyingToPrivate(replyMsg); setMessage(`/private @${msg.username} `); if (messageInputRef.current) { messageInputRef.current.focus(); } }; const handleKeyDown = (e)=>{ if (e.key === "Enter") { if (showMentionSuggestions) { e.preventDefault(); return; } if (!e.shiftKey) { e.preventDefault(); handleFormSubmit(e); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900 text-white flex flex-col h-screen overflow-hidden", __source: { fileName: "", lineNumber: 657, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 shadow-md py-4 px-6 flex items-center justify-between flex-shrink-0", __source: { fileName: "", lineNumber: 658, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 659, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "md:hidden mr-4 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 660, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 664, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16", __source: { fileName: "", lineNumber: 671, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 679, columnNumber: 11 }, __self: this }, selectedGroup ? selectedGroup.name : "Whisperwall Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 683, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-4 flex items-center", __source: { fileName: "", lineNumber: 684, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400 mr-2", __source: { fileName: "", lineNumber: 685, columnNumber: 13 }, __self: this }, "You are:"), /*#__PURE__*/ React.createElement("span", { className: "text-purple-400 font-medium", __source: { fileName: "", lineNumber: 686, columnNumber: 13 }, __self: this }, username), /*#__PURE__*/ React.createElement("button", { onClick: generateRandomUsername, className: "ml-2 text-xs bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded", title: "Get a new random username", __source: { fileName: "", lineNumber: 687, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 692, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", __source: { fileName: "", lineNumber: 699, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 708, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/games", className: "text-purple-400 hover:text-purple-300 flex items-center", __source: { fileName: "", lineNumber: 709, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 mr-1", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 713, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z", __source: { fileName: "", lineNumber: 719, columnNumber: 17 }, __self: this })), "Games"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-purple-400 hover:text-purple-300 flex items-center", __source: { fileName: "", lineNumber: 723, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 mr-1", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 727, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { fillRule: "evenodd", d: "M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z", clipRule: "evenodd", __source: { fileName: "", lineNumber: 733, columnNumber: 17 }, __self: this })), "Back to Whisperwall")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 745, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: `bg-gray-800 w-64 flex-shrink-0 md:relative fixed inset-y-0 left-0 transform ${sidebarOpen ? "translate-x-0" : "-translate-x-full"} md:translate-x-0 transition-transform duration-200 ease-in-out z-20 md:z-0`, __source: { fileName: "", lineNumber: 746, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 749, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-purple-400", __source: { fileName: "", lineNumber: 750, columnNumber: 13 }, __self: this }, "Chat Groups")), loading && chatGroups.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-32", __source: { fileName: "", lineNumber: 756, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-purple-500 border-r-2 border-purple-500 border-b-2 border-transparent", __source: { fileName: "", lineNumber: 757, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-full pb-20", __source: { fileName: "", lineNumber: 760, columnNumber: 13 }, __self: this }, chatGroups.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "p-4 text-gray-400 text-center", __source: { fileName: "", lineNumber: 762, columnNumber: 17 }, __self: this }, "No chat groups available") : /*#__PURE__*/ React.createElement("ul", { className: "space-y-1 p-2", __source: { fileName: "", lineNumber: 766, columnNumber: 17 }, __self: this }, chatGroups.map((group)=>/*#__PURE__*/ React.createElement("li", { key: group.id, __source: { fileName: "", lineNumber: 768, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>selectGroup(group), className: `w-full text-left px-4 py-3 rounded-md transition-colors duration-200 ${selectedGroup && selectedGroup.id === group.id ? "bg-purple-700 text-white" : "hover:bg-gray-700 text-gray-300"}`, __source: { fileName: "", lineNumber: 769, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 777, columnNumber: 25 }, __self: this }, group.name), group.description && /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400 mt-1 truncate", __source: { fileName: "", lineNumber: 779, columnNumber: 27 }, __self: this }, group.description))))))), sidebarOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden", onClick: toggleSidebar, __source: { fileName: "", lineNumber: 793, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-1 flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 799, columnNumber: 9 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-900 bg-opacity-30 text-red-300 p-4 m-4 rounded-md", __source: { fileName: "", lineNumber: 801, columnNumber: 13 }, __self: this }, error), selectedGroup ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 808, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 809, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 810, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm mr-2", __source: { fileName: "", lineNumber: 811, columnNumber: 21 }, __self: this }, selectedGroup.description), /*#__PURE__*/ React.createElement("button", { onClick: openRulesModal, className: "text-xs bg-gray-700 hover:bg-gray-600 text-purple-300 px-2 py-1 rounded flex items-center", title: "View chat rules", __source: { fileName: "", lineNumber: 814, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 819, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z", __source: { fileName: "", lineNumber: 826, columnNumber: 25 }, __self: this })), "Rules")), is3AMThoughtsGroup(selectedGroup) && /*#__PURE__*/ React.createElement("div", { className: `px-3 py-1 rounded-full text-xs font-medium ${is3AMActive ? "bg-green-900 text-green-300" : "bg-red-900 text-red-300"}`, __source: { fileName: "", lineNumber: 837, columnNumber: 21 }, __self: this }, is3AMActive ? "ACTIVE NOW" : `Opens in ${timeUntil3AM}`))), /*#__PURE__*/ React.createElement("div", { ref: chatContainerRef, className: "flex-1 overflow-y-auto p-4 space-y-4", style: { height: "calc(100vh - 180px)", overflowY: "auto", overscrollBehavior: "contain" }, __source: { fileName: "", lineNumber: 846, columnNumber: 15 }, __self: this }, loading && messages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 856, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-t-2 border-purple-500 border-r-2 border-purple-500 border-b-2 border-transparent", __source: { fileName: "", lineNumber: 857, columnNumber: 21 }, __self: this })) : messages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full text-gray-400", __source: { fileName: "", lineNumber: 860, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-16 w-16 mb-4", fill: "none", viewBox: "0 0 20 20", stroke: "currentColor", __source: { fileName: "", lineNumber: 861, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M8 12h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z", __source: { fileName: "", lineNumber: 868, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 875, columnNumber: 21 }, __self: this }, "No messages yet"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 876, columnNumber: 21 }, __self: this }, is3AMThoughtsGroup(selectedGroup) && !is3AMActive ? "This chat is only active between 2AM and 5AM" : "Be the first to start the conversation!")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 883, columnNumber: 19 }, __self: this }, messages.map((msg)=>{ const isPrivateMsg = msg.is_private; const isPrivateSender = isPrivateMsg && msg.username === username; const isPrivateRecipient = isPrivateMsg && msg.recipient_username === username; return /*#__PURE__*/ React.createElement("div", { key: msg.id, className: `rounded-lg p-4 shadow-md relative ${isPrivateMsg ? isPrivateSender ? "bg-pink-900 bg-opacity-40 border border-pink-500" : "bg-purple-900 bg-opacity-40 border border-purple-500" : "bg-gray-800"}`, __source: { fileName: "", lineNumber: 892, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-1", __source: { fileName: "", lineNumber: 902, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 903, columnNumber: 29 }, __self: this }, msg.username && /*#__PURE__*/ React.createElement("div", { className: `text-xs font-medium ${isPrivateMsg ? "text-pink-300" : "text-purple-400"}`, __source: { fileName: "", lineNumber: 905, columnNumber: 33 }, __self: this }, msg.username), isPrivateMsg && /*#__PURE__*/ React.createElement("div", { className: "ml-2 bg-pink-800 px-2 py-0.5 rounded-full text-xs font-medium text-pink-100 flex items-center", __source: { fileName: "", lineNumber: 916, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 917, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z", __source: { fileName: "", lineNumber: 924, columnNumber: 37 }, __self: this })), isPrivateSender ? `To: @${msg.recipient_username}` : "Private Message")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 937, columnNumber: 29 }, __self: this }, msg.username && msg.username !== username && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePrivateReply(msg), className: "text-pink-400 hover:text-pink-300 flex items-center text-xs bg-gray-700 px-2 py-1 rounded mr-2", title: "Reply privately", __source: { fileName: "", lineNumber: 939, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 944, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6", __source: { fileName: "", lineNumber: 951, columnNumber: 37 }, __self: this })), "PM"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>openReportModal(msg), className: "text-red-400 hover:text-red-300 flex items-center text-xs bg-gray-700 px-2 py-1 rounded", title: "Report this message", __source: { fileName: "", lineNumber: 961, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 966, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z", __source: { fileName: "", lineNumber: 973, columnNumber: 35 }, __self: this })), "Report"))), /*#__PURE__*/ React.createElement("div", { className: "text-gray-300 mt-1", __source: { fileName: "", lineNumber: 984, columnNumber: 27 }, __self: this }, isGifMessage(msg.message) ? /*#__PURE__*/ React.createElement("div", { className: "gif-container", __source: { fileName: "", lineNumber: 986, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: extractGifUrl(msg.message), alt: "GIF", className: "rounded-md max-w-full max-h-60 object-contain", __source: { fileName: "", lineNumber: 987, columnNumber: 33 }, __self: this })) : msg.message), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-2", __source: { fileName: "", lineNumber: 997, columnNumber: 27 }, __self: this }, formatDate(msg.created_at))); }))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 border-t border-gray-700 flex-shrink-0", __source: { fileName: "", lineNumber: 1007, columnNumber: 15 }, __self: this }, is3AMThoughtsGroup(selectedGroup) && !is3AMActive ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-2", __source: { fileName: "", lineNumber: 1009, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-medium text-purple-400 mb-2", __source: { fileName: "", lineNumber: 1010, columnNumber: 21 }, __self: this }, "3AM Thoughts is currently closed"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-700 px-4 py-2 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 1013, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 mr-2 text-purple-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 1014, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2", __source: { fileName: "", lineNumber: 1024, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "8", y1: "21", x2: "16", y2: "21", __source: { fileName: "", lineNumber: 1032, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "12", y1: "17", x2: "12", y2: "21", __source: { fileName: "", lineNumber: 1033, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M6 8h.01M9 8h.01", __source: { fileName: "", lineNumber: 1034, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 1036, columnNumber: 23 }, __self: this }, "Opens in", " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold text-purple-300", __source: { fileName: "", lineNumber: 1038, columnNumber: 25 }, __self: this }, timeUntil3AM)))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "flex space-x-2 relative", __source: { fileName: "", lineNumber: 1046, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 1050, columnNumber: 23 }, __self: this }, isPrivateMode && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 bg-pink-900 bg-opacity-50 text-pink-100 text-sm rounded-t-md border-t border-l border-r border-pink-500", __source: { fileName: "", lineNumber: 1052, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-3 py-2 flex items-center", __source: { fileName: "", lineNumber: 1053, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1054, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z", __source: { fileName: "", lineNumber: 1061, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1068, columnNumber: 31 }, __self: this }, "Private Message Mode"), selectedRecipient && /*#__PURE__*/ React.createElement("span", { className: "ml-2 bg-pink-800 px-2 py-0.5 rounded-full text-xs font-medium", __source: { fileName: "", lineNumber: 1072, columnNumber: 33 }, __self: this }, "to @", selectedRecipient), replyingToPrivate && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setReplyingToPrivate(null), className: "ml-auto text-pink-200 hover:text-white", title: "Cancel reply", __source: { fileName: "", lineNumber: 1077, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1082, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 1089, columnNumber: 37 }, __self: this })))), replyingToPrivate && /*#__PURE__*/ React.createElement("div", { className: "px-3 py-2 border-t border-pink-700 bg-pink-900 bg-opacity-30 text-xs", __source: { fileName: "", lineNumber: 1101, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-1", __source: { fileName: "", lineNumber: 1102, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1103, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6", __source: { fileName: "", lineNumber: 1110, columnNumber: 37 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 1117, columnNumber: 35 }, __self: this }, "Replying to:")), /*#__PURE__*/ React.createElement("div", { className: "pl-4 pr-2 py-1 bg-gray-800 rounded text-gray-300 max-h-16 overflow-y-auto", __source: { fileName: "", lineNumber: 1121, columnNumber: 33 }, __self: this }, isGifMessage(replyingToPrivate.message) ? /*#__PURE__*/ React.createElement("span", { className: "italic", __source: { fileName: "", lineNumber: 1123, columnNumber: 37 }, __self: this }, "[GIF image]") : replyingToPrivate.message.length > 100 ? replyingToPrivate.message.substring(0, 100) + "..." : replyingToPrivate.message))), showMentionSuggestions && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full mb-1 left-0 right-0 z-50 bg-gray-800 border-2 border-pink-500 rounded-md shadow-lg max-h-48 overflow-y-auto", __source: { fileName: "", lineNumber: 1139, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 bg-pink-800 text-pink-100 px-3 py-2 text-sm font-medium", __source: { fileName: "", lineNumber: 1140, columnNumber: 29 }, __self: this }, "Select a recipient:"), mentionSuggestions.length > 0 ? mentionSuggestions.map((username)=>/*#__PURE__*/ React.createElement("div", { key: username, className: "px-4 py-3 hover:bg-gray-700 cursor-pointer flex items-center", onClick: ()=>selectMentionSuggestion(username), __source: { fileName: "", lineNumber: 1145, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-pink-400 mr-2 font-bold", __source: { fileName: "", lineNumber: 1152, columnNumber: 35 }, __self: this }, "@"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 1155, columnNumber: 35 }, __self: this }, username))) : /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 text-gray-400", __source: { fileName: "", lineNumber: 1159, columnNumber: 31 }, __self: this }, "No matching users found")), /*#__PURE__*/ React.createElement("input", { ref: messageInputRef, type: "text", value: message, onChange: handleMessageChange, onKeyDown: handleKeyDown, placeholder: isPrivateMode ? replyingToPrivate ? `Reply privately to ${replyingToPrivate.username}...` : "Type your private message..." : "Type your message...", className: `w-full bg-gray-700 text-white rounded-md px-4 py-2 focus:outline-none focus:ring-2 ${isPrivateMode ? `focus:ring-pink-500 border border-pink-500 ${replyingToPrivate ? "pt-24" : "pt-12"} rounded-t-none` : "focus:ring-purple-500"}`, disabled: sendingMessage || is3AMThoughtsGroup(selectedGroup) && !is3AMActive, __source: { fileName: "", lineNumber: 1166, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 1191, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: toggleGifSearch, disabled: sendingMessage || is3AMThoughtsGroup(selectedGroup) && !is3AMActive, className: "bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-3 rounded-md transition duration-200 disabled:opacity-50 flex items-center mr-2", title: "Send a GIF", __source: { fileName: "", lineNumber: 1192, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 1202, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2 16V4a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z", __source: { fileName: "", lineNumber: 1208, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 1215, columnNumber: 27 }, __self: this }, "GIF"))), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: sendingMessage || !message.trim() || is3AMThoughtsGroup(selectedGroup) && !is3AMActive || isPrivateMode && !selectedRecipient, className: `text-white font-medium py-2 px-4 rounded-md transition duration-200 disabled:opacity-50 flex items-center ${isPrivateMode ? "bg-pink-600 hover:bg-pink-700" : "bg-purple-600 hover:bg-purple-700"}`, __source: { fileName: "", lineNumber: 1219, columnNumber: 23 }, __self: this }, sendingMessage ? /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-t-2 border-white border-r-2 border-white border-b-2 border-transparent", __source: { fileName: "", lineNumber: 1234, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", __source: { fileName: "", lineNumber: 1236, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z", __source: { fileName: "", lineNumber: 1242, columnNumber: 29 }, __self: this })))), gifSearchOpen && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-700 rounded-md p-3", __source: { fileName: "", lineNumber: 1249, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-3", __source: { fileName: "", lineNumber: 1250, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: gifSearchQuery, onChange: handleGifSearch, placeholder: "Search for GIFs...", className: "flex-1 bg-gray-800 text-white rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500", __source: { fileName: "", lineNumber: 1251, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: toggleGifSearch, className: "ml-2 bg-gray-600 hover:bg-gray-500 text-white font-medium py-2 px-3 rounded-md transition duration-200", __source: { fileName: "", lineNumber: 1258, columnNumber: 27 }, __self: this }, "Close")), /*#__PURE__*/ React.createElement("div", { className: "gif-results-container", style: { maxHeight: "200px", overflowY: "auto" }, __source: { fileName: "", lineNumber: 1266, columnNumber: 25 }, __self: this }, gifSearchLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center py-4", __source: { fileName: "", lineNumber: 1271, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-purple-500 border-r-2 border-purple-500 border-b-2 border-transparent", __source: { fileName: "", lineNumber: 1272, columnNumber: 31 }, __self: this })) : gifResults.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 1275, columnNumber: 29 }, __self: this }, gifResults.map((gif)=>/*#__PURE__*/ React.createElement("div", { key: gif.id, className: "gif-result cursor-pointer hover:opacity-80 transition-opacity", onClick: ()=>selectGif(gif), __source: { fileName: "", lineNumber: 1277, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: gif.images.fixed_height_small.url, alt: gif.title, className: "rounded-md w-full h-24 object-cover", __source: { fileName: "", lineNumber: 1282, columnNumber: 35 }, __self: this })))) : gifSearchQuery ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 text-gray-400", __source: { fileName: "", lineNumber: 1291, columnNumber: 29 }, __self: this }, "No GIFs found. Try a different search term.") : /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 text-gray-400", __source: { fileName: "", lineNumber: 1295, columnNumber: 29 }, __self: this }, "Search for GIFs to share in the chat.")), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400 mt-2 text-right", __source: { fileName: "", lineNumber: 1300, columnNumber: 25 }, __self: this }, "Powered by GIPHY"))))) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full text-gray-400", __source: { fileName: "", lineNumber: 1310, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-24 w-24 mb-6 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1311, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z", __source: { fileName: "", lineNumber: 1318, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 1325, columnNumber: 15 }, __self: this }, "Select a chat group"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 1326, columnNumber: 15 }, __self: this }, "Choose a group from the sidebar to start chatting"), /*#__PURE__*/ React.createElement("button", { onClick: toggleSidebar, className: "mt-6 bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 md:hidden", __source: { fileName: "", lineNumber: 1329, columnNumber: 15 }, __self: this }, "Show Chat Groups")))), reportModalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 1341, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6", __source: { fileName: "", lineNumber: 1342, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1343, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 1344, columnNumber: 15 }, __self: this }, "Report Message"), /*#__PURE__*/ React.createElement("button", { onClick: closeReportModal, className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 1347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1351, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 1358, columnNumber: 19 }, __self: this })))), reportSuccess ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-6", __source: { fileName: "", lineNumber: 1369, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-12 w-12 mx-auto text-green-500 mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1370, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7", __source: { fileName: "", lineNumber: 1377, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white", __source: { fileName: "", lineNumber: 1384, columnNumber: 17 }, __self: this }, "Message reported successfully"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 mt-1", __source: { fileName: "", lineNumber: 1387, columnNumber: 17 }, __self: this }, "Thank you for helping keep our community safe.")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-gray-700 rounded-md", __source: { fileName: "", lineNumber: 1393, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-300 italic", __source: { fileName: "", lineNumber: 1394, columnNumber: 19 }, __self: this }, messageToReport?.message), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500 mt-2", __source: { fileName: "", lineNumber: 1397, columnNumber: 19 }, __self: this }, messageToReport?.username && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1399, columnNumber: 23 }, __self: this }, "By: ", messageToReport.username, " • "), messageToReport && formatDate(messageToReport.created_at))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 1405, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300 mb-2", __source: { fileName: "", lineNumber: 1406, columnNumber: 19 }, __self: this }, "Reason for reporting"), /*#__PURE__*/ React.createElement("textarea", { value: reportReason, onChange: (e)=>setReportReason(e.target.value), className: "w-full bg-gray-700 text-white rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500", rows: 3, placeholder: "Please explain why you're reporting this message...", __source: { fileName: "", lineNumber: 1409, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3", __source: { fileName: "", lineNumber: 1418, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeReportModal, className: "px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-md transition-colors", __source: { fileName: "", lineNumber: 1419, columnNumber: 19 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: handleReportMessage, disabled: !reportReason.trim(), className: "px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 1425, columnNumber: 19 }, __self: this }, "Report Message"))))), rulesModalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 1440, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6", __source: { fileName: "", lineNumber: 1441, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1442, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 1443, columnNumber: 15 }, __self: this }, selectedGroup ? `${selectedGroup.name} Rules` : "Chat Rules"), /*#__PURE__*/ React.createElement("button", { onClick: closeRulesModal, className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 1446, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1450, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 1457, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 1467, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 1468, columnNumber: 15 }, __self: this }, selectedGroup && getChatRules(selectedGroup.name).map((rule, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start", __source: { fileName: "", lineNumber: 1471, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-purple-400 mr-2", __source: { fileName: "", lineNumber: 1472, columnNumber: 23 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 1473, columnNumber: 23 }, __self: this }, rule))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 1479, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: closeRulesModal, className: "px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-colors", __source: { fileName: "", lineNumber: 1480, columnNumber: 15 }, __self: this }, "Got it")))), selectedGroup && showProTips && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-10 pb-safe", __source: { fileName: "", lineNumber: 1492, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-4 my-2 bg-gray-700 rounded-lg shadow-lg p-3 text-xs text-gray-400 relative", __source: { fileName: "", lineNumber: 1493, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProTips(false), className: "absolute top-2 right-2 text-gray-500 hover:text-gray-300", title: "Close tips", __source: { fileName: "", lineNumber: 1494, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 1499, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 1506, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "font-medium text-purple-400 mb-2", __source: { fileName: "", lineNumber: 1514, columnNumber: 13 }, __self: this }, "Pro Tips:"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 1515, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 1516, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-pink-400 mr-2 mt-0.5", __source: { fileName: "", lineNumber: 1517, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1518, columnNumber: 17 }, __self: this }, "Type", " ", /*#__PURE__*/ React.createElement("span", { className: "text-pink-400 font-mono bg-gray-800 px-1 py-0.5 rounded", __source: { fileName: "", lineNumber: 1520, columnNumber: 19 }, __self: this }, "/private @username"), " ", "to send a private message")), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 1526, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-pink-400 mr-2 mt-0.5", __source: { fileName: "", lineNumber: 1527, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1528, columnNumber: 17 }, __self: this }, "Click the", " ", /*#__PURE__*/ React.createElement("span", { className: "font-medium bg-gray-800 px-1 py-0.5 rounded", __source: { fileName: "", lineNumber: 1530, columnNumber: 19 }, __self: this }, "PM"), " ", "button to quickly reply privately to any message")), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 1536, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-pink-400 mr-2 mt-0.5", __source: { fileName: "", lineNumber: 1537, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1538, columnNumber: 17 }, __self: this }, "Private messages are only visible to you and the recipient")), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 1542, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-purple-400 mr-2 mt-0.5", __source: { fileName: "", lineNumber: 1543, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1544, columnNumber: 17 }, __self: this }, "Click the", " ", /*#__PURE__*/ React.createElement("span", { className: "font-medium bg-gray-800 px-1 py-0.5 rounded", __source: { fileName: "", lineNumber: 1546, columnNumber: 19 }, __self: this }, "GIF"), " ", "button to search and share GIFs")))))); }