function MainComponent() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const messagesEndRef = useRef(null); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [isJoined, setIsJoined] = useState(false); const [rooms, setRooms] = useState([]); const [selectedRoom, setSelectedRoom] = useState(null); const [newRoomName, setNewRoomName] = useState(""); const [inviteUsername, setInviteUsername] = useState(""); const [error, setError] = useState(""); const [notifications, setNotifications] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [friends, setFriends] = useState([]); const [newFriend, setNewFriend] = useState(""); const [activeTab, setActiveTab] = useState("rooms"); const [localStream, setLocalStream] = useState(null); const [remoteStream, setRemoteStream] = useState(null); const [isCallActive, setIsCallActive] = useState(false); const [blockedUsers, setBlockedUsers] = useState([]); const [points, setPoints] = useState(0); const [avatar, setAvatar] = useState("👤"); const peerConnection = useRef(null); const [upload] = useUpload(); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setStreamingMessage(""); fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_messages` (message_text, username, created_at, room) VALUES (?, ?, ?, ?)", values: [ message, "AI", new Date().toISOString(), "ai_chat" ] }) }); } }); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; const startCall = async (roomName)=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); setLocalStream(stream); const configuration = { iceServers: [ { urls: "stun:stun.l.google.com:19302" } ] }; const pc = new RTCPeerConnection(configuration); peerConnection.current = pc; stream.getTracks().forEach((track)=>pc.addTrack(track, stream)); pc.ontrack = (event)=>setRemoteStream(event.streams[0]); const offer = await pc.createOffer(); await pc.setLocalDescription(offer); await fetch("/api/db/call-database", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `call_sessions` (room_name, caller, offer) VALUES (?, ?, ?)", values: [ roomName, username, JSON.stringify({ type: "offer", sdp: offer }) ] }) }); setIsCallActive(true); } catch (error) { console.error("Error starting call:", error); setError("Could not start call. Please check your microphone permissions."); } }; const endCall = ()=>{ if (localStream) { localStream.getTracks().forEach((track)=>track.stop()); } if (peerConnection.current) { peerConnection.current.close(); } setLocalStream(null); setRemoteStream(null); setIsCallActive(false); }; const blockUser = async (userToBlock)=>{ setBlockedUsers((prev)=>[ ...prev, userToBlock ]); setPoints((prev)=>prev + 10); }; const unblockUser = (userToUnblock)=>{ setBlockedUsers((prev)=>prev.filter((user)=>user !== userToUnblock)); }; const changeAvatar = async (file)=>{ if (points < 100) { setError("You need 100 points to change your avatar"); return; } const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError("Failed to upload avatar"); return; } setAvatar(url); setPoints((prev)=>prev - 100); }; const createRoom = async ()=>{ const userCheck = await fetch("/api/db/accounts-45", { method: "POST", body: JSON.stringify({ query: "SELECT username FROM `users` WHERE `username` = ?", values: [ inviteUsername ] }) }); const users = await userCheck.json(); if (users.length === 0) { setError("User not found"); return; } await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_rooms` (name, created_by, member) VALUES (?, ?, ?), (?, ?, ?)", values: [ newRoomName, username, username, newRoomName, username, inviteUsername ] }) }); setNewRoomName(""); setInviteUsername(""); loadRooms(); setSelectedRoom(newRoomName); }; const deleteRoom = async (roomName)=>{ await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `chat_rooms` WHERE `name` = ? AND `created_by` = ?", values: [ roomName, username ] }) }); if (selectedRoom === roomName) { setSelectedRoom(null); } loadRooms(); }; const handleJoin = async ()=>{ if (!username || !password) return; if (password === "Ipoop#1") { const response = await fetch("/api/db/user-data-49", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `messages` WHERE `user` = ?", values: [ username ] }) }); const messages = await response.json(); setMessages(messages); setIsJoined(true); setError(""); return; } const response = await fetch("/api/db/accounts-45", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `users` WHERE `username` = ?", values: [ username ] }) }); const users = await response.json(); if (users.length === 0) { await fetch("/api/db/accounts-45", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `users` (username, password) VALUES (?, ?)", values: [ username, password ] }) }); await fetch("/api/db/history-74", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `user_history` (username, action_type, timestamp) VALUES (?, ?, ?)", values: [ username, "signup", new Date().toISOString() ] }) }); } else { const user = users[0]; if (user.password !== password) { setError("Incorrect password"); return; } await fetch("/api/db/history-74", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `user_history` (username, action_type, timestamp) VALUES (?, ?, ?)", values: [ username, "login", new Date().toISOString() ] }) }); } setIsJoined(true); setError(""); }; const loadRooms = async ()=>{ const response = await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "SELECT DISTINCT name as id, name FROM `chat_rooms` WHERE member = ?", values: [ username ] }) }); const data = await response.json(); setRooms(data); }; const loadFriends = async ()=>{ const response = await fetch("/api/db/accounts-45", { method: "POST", body: JSON.stringify({ query: "SELECT username, last_active FROM `users` WHERE username != ?", values: [ username ] }) }); const data = await response.json(); const now = new Date(); const updatedFriends = data.map((friend)=>({ ...friend, isOnline: friend.last_active && now - new Date(friend.last_active) < 60000 })); setFriends(updatedFriends); }; const addFriend = async ()=>{ if (!newFriend) return; const response = await fetch("/api/db/accounts-45", { method: "POST", body: JSON.stringify({ query: "SELECT username FROM `users` WHERE username = ?", values: [ newFriend ] }) }); const users = await response.json(); if (users.length === 0) { setError("User not found"); return; } setFriends((prev)=>[ ...prev, { username: newFriend, isOnline: false } ]); setNewFriend(""); }; const createDirectRoom = async (friendUsername)=>{ const roomName = `dm_${Math.random().toString(36).substring(7)}`; await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_rooms` (name, created_by, member) VALUES (?, ?, ?), (?, ?, ?)", values: [ roomName, username, username, roomName, username, friendUsername ] }) }); loadRooms(); setSelectedRoom(roomName); }; useEffect(()=>{ if (isJoined) { loadRooms(); loadFriends(); const checkNotifications = async ()=>{ const response = await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "SELECT DISTINCT `name`, `created_by` FROM `chat_rooms` WHERE `member` = ? AND `created_by` != ?", values: [ username, username ] }) }); const invites = await response.json(); if (JSON.stringify(invites) !== JSON.stringify(notifications)) { setNotifications(invites); } }; const interval = setInterval(checkNotifications, 3000); const checkCalls = async ()=>{ const response = await fetch("/api/db/call-database", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `call_sessions` WHERE room_name = ?", values: [ selectedRoom ] }) }); const calls = await response.json(); if (calls.length > 0) { const lastCall = calls[calls.length - 1]; if (lastCall.caller !== username && !isCallActive) { const offer = JSON.parse(lastCall.offer); const pc = new RTCPeerConnection({ iceServers: [ { urls: "stun:stun.l.google.com:19302" } ] }); peerConnection.current = pc; const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); setLocalStream(stream); stream.getTracks().forEach((track)=>pc.addTrack(track, stream)); pc.ontrack = (event)=>setRemoteStream(event.streams[0]); await pc.setRemoteDescription(offer); const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); await fetch("/api/db/call-database", { method: "POST", body: JSON.stringify({ query: "UPDATE `call_sessions` SET answer = ? WHERE room_name = ? AND caller = ?", values: [ JSON.stringify({ type: "answer", sdp: answer }), selectedRoom, lastCall.caller ] }) }); setIsCallActive(true); } } }; const callInterval = setInterval(checkCalls, 3000); return ()=>{ if (interval) clearInterval(interval); if (callInterval) clearInterval(callInterval); }; } }, [ isJoined, username, notifications, selectedRoom, isCallActive ]); useEffect(()=>{ const loadMessages = async ()=>{ if (!selectedRoom) { const response = await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `chat_messages` WHERE room IS NULL OR room = '' ORDER BY `created_at` DESC LIMIT 50", values: [] }) }); const data = await response.json(); setMessages(data.reverse().filter((msg)=>!blockedUsers.includes(msg.username))); return; } const response = await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `chat_messages` WHERE room = ? ORDER BY `created_at` DESC LIMIT 50", values: [ selectedRoom ] }) }); const data = await response.json(); setMessages(data.reverse().filter((msg)=>!blockedUsers.includes(msg.username))); }; loadMessages(); const interval = setInterval(loadMessages, 3000); return ()=>{ clearInterval(interval); if (localStream) localStream.getTracks().forEach((track)=>track.stop()); if (peerConnection.current) peerConnection.current.close(); }; }, [ selectedRoom, blockedUsers ]); useEffect(()=>{ if (messages.length > 0) { const container = messagesEndRef.current?.parentElement; if (container) { const isScrolledToBottom = container.scrollHeight - container.scrollTop === container.clientHeight; if (isScrolledToBottom) { scrollToBottom(); } } } }, [ messages, streamingMessage ]); useEffect(()=>{ if (username) { const updateOnlineStatus = async ()=>{ await fetch("/api/db/accounts-45", { method: "POST", body: JSON.stringify({ query: "UPDATE `users` SET `last_active` = ? WHERE `username` = ?", values: [ new Date().toISOString(), username ] }) }); }; updateOnlineStatus(); const interval = setInterval(updateOnlineStatus, 30000); return ()=>clearInterval(interval); } }, [ username ]); const handlePaste = useCallback(async (e)=>{ const items = e.clipboardData?.items; const item = Array.from(items).find((item)=>item.type.indexOf("image") !== -1); if (!item) return; const file = item.getAsFile(); const { url, error } = await upload({ file }); if (error) { setError("Failed to upload image"); return; } setNewMessage((prev)=>prev + url); }, []); const sendMessage = async (e)=>{ e.preventDefault(); if (!newMessage.trim()) return; if (!username) { setError("Please sign in to send messages"); return; } try { await fetch("/api/db/history-74", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `user_history` (username, action_type, timestamp, details) VALUES (?, ?, ?, ?)", values: [ username, "send_message", new Date().toISOString(), selectedRoom || "global" ] }) }); if (selectedRoom === "ai_chat") { await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_messages` (message_text, username, created_at, room) VALUES (?, ?, ?, ?)", values: [ newMessage.trim(), username, new Date().toISOString(), "ai_chat" ] }) }); const aiMessages = messages.filter((msg)=>msg.room === "ai_chat").map((msg)=>({ role: msg.username === "AI" ? "assistant" : "user", content: msg.message_text })); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...aiMessages, { role: "user", content: newMessage.trim() } ], stream: true }) }); handleStreamResponse(response); } else { await fetch("/api/db/messages-69", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_messages` (message_text, username, created_at, room) VALUES (?, ?, ?, ?)", values: [ newMessage.trim(), username, new Date().toISOString(), selectedRoom ] }) }); } setNewMessage(""); } catch (error) { setError("Failed to send message. Please try again."); } }; if (!isJoined) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#1a1a1a]", __source: { fileName: "", lineNumber: 532, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2d2d2d] p-8 rounded-2xl shadow-2xl w-full max-w-md mx-4", __source: { fileName: "", lineNumber: 533, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 534, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 535, columnNumber: 13 }, __self: this }, "Welcome Back"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 536, columnNumber: 13 }, __self: this }, "Sign in to continue chatting")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", value: username, onChange: (e)=>setUsername(e.target.value), placeholder: "Username", className: "w-full p-4 rounded-xl bg-[#3d3d3d] text-white border-2 border-[#4d4d4d] mb-4 focus:outline-none focus:border-[#6366f1] transition-colors", __source: { fileName: "", lineNumber: 538, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Password", className: "w-full p-4 rounded-xl bg-[#3d3d3d] text-white border-2 border-[#4d4d4d] mb-6 focus:outline-none focus:border-[#6366f1] transition-colors", __source: { fileName: "", lineNumber: 546, columnNumber: 11 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-400 mb-4 text-sm font-medium", __source: { fileName: "", lineNumber: 555, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: handleJoin, disabled: !username || !password, className: "w-full bg-[#6366f1] text-white p-4 rounded-xl font-medium hover:bg-[#4338ca] transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 557, columnNumber: 11 }, __self: this }, "Sign In"))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a]", __source: { fileName: "", lineNumber: 570, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex flex-col md:flex-row h-screen", __source: { fileName: "", lineNumber: 571, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-96 bg-[#2d2d2d] p-6 border-r border-[#3d3d3d]", __source: { fileName: "", lineNumber: 572, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-8", __source: { fileName: "", lineNumber: 573, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-[#3d3d3d] flex items-center justify-center", __source: { fileName: "", lineNumber: 574, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 575, columnNumber: 15 }, __self: this }, avatar)), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 577, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }, username), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-green-400", __source: { fileName: "", lineNumber: 579, columnNumber: 15 }, __self: this }, "Online"))), notifications.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-50 bg-[#2d2d2d] p-4 rounded-xl shadow-xl border border-[#6366f1] max-w-sm animate-fade-out", __source: { fileName: "", lineNumber: 583, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 584, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 585, columnNumber: 17 }, __self: this }, "New Invites"), /*#__PURE__*/ React.createElement("span", { className: "bg-[#6366f1] text-white px-2 py-1 rounded-full text-xs", __source: { fileName: "", lineNumber: 586, columnNumber: 17 }, __self: this }, notifications.length)), notifications.map((invite, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#3d3d3d] p-3 rounded-lg mb-2 text-gray-300", __source: { fileName: "", lineNumber: 591, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#6366f1]", __source: { fileName: "", lineNumber: 595, columnNumber: 19 }, __self: this }, invite.created_by), " invited you to ", /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 597, columnNumber: 19 }, __self: this }, invite.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex mb-6 border-b border-[#3d3d3d]", __source: { fileName: "", lineNumber: 602, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("rooms"), className: `flex-1 py-3 text-center ${activeTab === "rooms" ? "text-[#6366f1] border-b-2 border-[#6366f1]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 603, columnNumber: 13 }, __self: this }, "Rooms"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("friends"), className: `flex-1 py-3 text-center ${activeTab === "friends" ? "text-[#6366f1] border-b-2 border-[#6366f1]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 613, columnNumber: 13 }, __self: this }, "Friends"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("notifications"), className: `flex-1 py-3 text-center ${activeTab === "notifications" ? "text-[#6366f1] border-b-2 border-[#6366f1]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 623, columnNumber: 13 }, __self: this }, "Notifications", notifications.length > 0 && /*#__PURE__*/ React.createElement("span", { className: "ml-2 bg-[#6366f1] text-white px-2 py-0.5 rounded-full text-xs", __source: { fileName: "", lineNumber: 633, columnNumber: 17 }, __self: this }, notifications.length))), activeTab === "rooms" ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 641, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 642, columnNumber: 17 }, __self: this }, "Create Room"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "roomName", value: newRoomName, onChange: (e)=>setNewRoomName(e.target.value), placeholder: "Room name", className: "w-full p-3 rounded-xl bg-[#3d3d3d] text-white border border-[#4d4d4d] focus:outline-none focus:border-[#6366f1]", __source: { fileName: "", lineNumber: 643, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "inviteUsername", value: inviteUsername, onChange: (e)=>setInviteUsername(e.target.value), placeholder: "Username to invite", className: "w-full p-3 rounded-xl bg-[#3d3d3d] text-white border border-[#4d4d4d] focus:outline-none focus:border-[#6366f1]", __source: { fileName: "", lineNumber: 651, columnNumber: 17 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-400 text-sm", __source: { fileName: "", lineNumber: 659, columnNumber: 27 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: createRoom, className: "w-full bg-[#6366f1] text-white p-3 rounded-xl hover:bg-[#4338ca] transition-all transform hover:scale-[1.02]", __source: { fileName: "", lineNumber: 660, columnNumber: 17 }, __self: this }, "Create Room")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 max-h-[calc(100vh-400px)] overflow-y-auto", __source: { fileName: "", lineNumber: 667, columnNumber: 15 }, __self: this }, rooms.map((room)=>/*#__PURE__*/ React.createElement("div", { key: room.id, className: "flex items-center justify-between group", __source: { fileName: "", lineNumber: 669, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>setSelectedRoom(room.id), className: `flex-1 p-3 rounded-xl cursor-pointer transition-colors ${selectedRoom === room.id ? "bg-[#6366f1] text-white" : "text-gray-300 hover:bg-[#3d3d3d]"}`, __source: { fileName: "", lineNumber: 673, columnNumber: 21 }, __self: this }, room.name), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 683, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>startCall(room.name), className: "text-green-400 hover:text-green-600 opacity-0 group-hover:opacity-100 transition-opacity", disabled: isCallActive, __source: { fileName: "", lineNumber: 684, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 689, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteRoom(room.name), className: "text-gray-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 691, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 695, columnNumber: 25 }, __self: this }))))))) : activeTab === "notifications" ? /*#__PURE__*/ React.createElement("div", { className: "mt-6 max-h-[calc(100vh-200px)] overflow-y-auto", __source: { fileName: "", lineNumber: 703, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-medium mb-4", __source: { fileName: "", lineNumber: 704, columnNumber: 15 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 705, columnNumber: 15 }, __self: this }, notifications.map((invite, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#3d3d3d] p-4 rounded-xl", __source: { fileName: "", lineNumber: 707, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 708, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#6366f1]", __source: { fileName: "", lineNumber: 709, columnNumber: 23 }, __self: this }, invite.created_by), " ", "invited you to", " ", /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 713, columnNumber: 23 }, __self: this }, invite.name)), /*#__PURE__*/ React.createElement("div", { className: "mt-3 flex gap-2", __source: { fileName: "", lineNumber: 715, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedRoom(invite.name), className: "bg-[#6366f1] text-white px-4 py-2 rounded-lg hover:bg-[#4338ca] transition-colors", __source: { fileName: "", lineNumber: 716, columnNumber: 23 }, __self: this }, "Join Room")))), notifications.length === 0 && /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-center", __source: { fileName: "", lineNumber: 726, columnNumber: 19 }, __self: this }, "No new notifications"))) : /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 733, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-medium mb-4", __source: { fileName: "", lineNumber: 734, columnNumber: 15 }, __self: this }, "Friends"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto", __source: { fileName: "", lineNumber: 735, columnNumber: 15 }, __self: this }, friends.map((friend)=>/*#__PURE__*/ React.createElement("div", { key: friend.username, className: "flex items-center justify-between p-3 bg-[#3d3d3d] rounded-xl group hover:bg-[#4d4d4d] transition-colors", __source: { fileName: "", lineNumber: 737, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 741, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#4d4d4d] flex items-center justify-center", __source: { fileName: "", lineNumber: 742, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 743, columnNumber: 25 }, __self: this }, "👤")), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 745, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 746, columnNumber: 25 }, __self: this }, friend.username), /*#__PURE__*/ React.createElement("span", { className: `ml-2 w-2 h-2 rounded-full inline-block ${friend.isOnline ? "bg-green-400" : "bg-gray-400"}`, __source: { fileName: "", lineNumber: 747, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>createDirectRoom(friend.username), className: "text-[#6366f1] opacity-0 group-hover:opacity-100 transition-opacity hover:text-[#4338ca]", __source: { fileName: "", lineNumber: 754, columnNumber: 21 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>blockUser(friend.username), className: "text-red-400 opacity-0 group-hover:opacity-100 transition-opacity hover:text-red-600", __source: { fileName: "", lineNumber: 760, columnNumber: 21 }, __self: this }, "Block")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 769, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newFriend", value: newFriend, onChange: (e)=>setNewFriend(e.target.value), placeholder: "Add friend by username", className: "w-full p-3 rounded-xl bg-[#3d3d3d] text-white border border-[#4d4d4d] mb-3 focus:outline-none focus:border-[#6366f1]", __source: { fileName: "", lineNumber: 770, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addFriend, className: "w-full bg-[#6366f1] text-white p-3 rounded-xl hover:bg-[#4338ca] transition-all transform hover:scale-[1.02]", __source: { fileName: "", lineNumber: 778, columnNumber: 17 }, __self: this }, "Add Friend"))), isCallActive && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-[#2d2d2d] p-4 rounded-xl shadow-xl border border-[#6366f1]", __source: { fileName: "", lineNumber: 788, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 789, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 790, columnNumber: 17 }, __self: this }, "Active Call"), /*#__PURE__*/ React.createElement("button", { onClick: endCall, className: "text-red-400 hover:text-red-600", __source: { fileName: "", lineNumber: 791, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-slash", __source: { fileName: "", lineNumber: 795, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 798, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#3d3d3d] flex items-center justify-center", __source: { fileName: "", lineNumber: 799, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 800, columnNumber: 19 }, __self: this }, "🎤")), /*#__PURE__*/ React.createElement("div", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 802, columnNumber: 17 }, __self: this }, selectedRoom, " - ", username)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col bg-[#1a1a1a] overflow-hidden", __source: { fileName: "", lineNumber: 809, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-4 border-b border-[#3d3d3d]", __source: { fileName: "", lineNumber: 810, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedRoom(null), className: `px-6 py-3 rounded-xl ${!selectedRoom ? "bg-[#6366f1] text-white" : "bg-[#2d2d2d] text-gray-400"} hover:bg-[#4338ca] transition-colors`, __source: { fileName: "", lineNumber: 811, columnNumber: 13 }, __self: this }, "Global Chat"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedRoom("ai_chat"), className: `px-6 py-3 rounded-xl ${selectedRoom === "ai_chat" ? "bg-[#6366f1] text-white" : "bg-[#2d2d2d] text-gray-400"} hover:bg-[#4338ca] transition-colors`, __source: { fileName: "", lineNumber: 821, columnNumber: 13 }, __self: this }, "AI Chat"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("rooms"), className: `px-6 py-3 rounded-xl ${activeTab === "rooms" ? "bg-[#6366f1] text-white" : "bg-[#2d2d2d] text-gray-400"} hover:bg-[#4338ca] transition-colors`, __source: { fileName: "", lineNumber: 831, columnNumber: 13 }, __self: this }, "Rooms")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col-reverse p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 842, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 843, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.username === username ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 845, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex items-start space-x-3 max-w-[80%] ${message.username === username ? "flex-row-reverse" : ""}`, __source: { fileName: "", lineNumber: 853, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#3d3d3d] flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 858, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 859, columnNumber: 23 }, __self: this }, message.username === "AI" ? "🤖" : "👤")), /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-2xl break-all ${message.username === username ? "bg-[#6366f1] text-white" : "bg-[#2d2d2d] text-gray-200"}`, __source: { fileName: "", lineNumber: 863, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-75 mb-1", __source: { fileName: "", lineNumber: 870, columnNumber: 23 }, __self: this }, message.username), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 873, columnNumber: 23 }, __self: this }, message.message_text), message.message_text.match(/https?:\/\/[^\s]+\.(jpg|jpeg|png|gif)/i) && /*#__PURE__*/ React.createElement("img", { src: message.message_text.match(/https?:\/\/[^\s]+\.(jpg|jpeg|png|gif)/i)[0], alt: "Pasted image", className: "mt-2 rounded-lg max-w-full", __source: { fileName: "", lineNumber: 879, columnNumber: 25 }, __self: this }))))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 894, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-3 max-w-[80%]", __source: { fileName: "", lineNumber: 895, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#3d3d3d] flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 896, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 897, columnNumber: 23 }, __self: this }, "🤖")), /*#__PURE__*/ React.createElement("div", { className: "p-4 rounded-2xl bg-[#2d2d2d] text-gray-200 break-words", __source: { fileName: "", lineNumber: 899, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-75 mb-1", __source: { fileName: "", lineNumber: 900, columnNumber: 23 }, __self: this }, "AI"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 901, columnNumber: 23 }, __self: this }, streamingMessage)))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 906, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, className: "p-4 bg-[#2d2d2d] border-t border-[#3d3d3d]", __source: { fileName: "", lineNumber: 909, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 913, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), onPaste: handlePaste, placeholder: selectedRoom === "ai_chat" ? "Chat with AI..." : "Type a message... (Paste images with Ctrl+V)", className: "flex-1 p-4 rounded-xl bg-[#3d3d3d] text-white border border-[#4d4d4d] focus:outline-none focus:border-[#6366f1]", __source: { fileName: "", lineNumber: 914, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#6366f1] text-white px-8 rounded-xl hover:bg-[#4338ca] transition-all transform hover:scale-[1.02]", __source: { fileName: "", lineNumber: 927, columnNumber: 15 }, __self: this }, "Send"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 937, columnNumber: 7 }, __self: this }, ` @keyframes fadeOut { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } .animate-fade-out { animation: fadeOut 5s forwards; } `)); }