function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [selectedFile, setSelectedFile] = React.useState(null); const [rooms, setRooms] = React.useState([ "TV Shows", "Games", "Sports", "Movies" ]); const [currentRoom, setCurrentRoom] = React.useState(""); const handleMessageChange = (e)=>setInput(e.target.value); const handleSendMessage = ()=>{ if (input.trim()) { setMessages((prevMessages)=>[ ...prevMessages, { type: "text", content: input } ]); setInput(""); } }; const handleSendImage = ()=>{ if (selectedFile) { setMessages((prevMessages)=>[ ...prevMessages, { type: "image", content: URL.createObjectURL(selectedFile) } ]); setSelectedFile(null); } }; const handleFileChange = (e)=>{ setSelectedFile(e.target.files[0]); }; const handleMessageKeyPress = (e)=>{ if (e.key === "Enter" && !e.shiftKey) handleSendMessage(); }; const handleCreateRoom = ()=>{ const roomName = prompt("Enter new room name:"); if (roomName) setRooms([ ...rooms, roomName ]); }; const selectRoom = (room)=>{ setCurrentRoom(room); setMessages([]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#010101] p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#FFF]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Streaming SNS Chat - ", currentRoom), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] text-white py-2 px-4 rounded-md", onClick: handleCreateRoom, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Create Room")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#121212] p-4 rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#FFF] mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Rooms"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, rooms.map((room, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>selectRoom(room), className: `text-left text-white ${room === currentRoom ? "bg-[#007BFF]" : ""}`, __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, room)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] p-4 rounded-lg h-[500px] mb-4 overflow-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, messages.map((message, index)=>message.type === "text" ? /*#__PURE__*/ React.createElement("p", { className: "text-white mb-2", key: index, __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, `User: ${message.content}`) : /*#__PURE__*/ React.createElement("img", { src: message.content, alt: `User posted manner in room ${currentRoom}`, className: "max-w-full h-auto mb-2", key: index, __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message_input", value: input, onChange: handleMessageChange, onKeyPress: handleMessageKeyPress, className: "flex-1 p-2 rounded-md", placeholder: "Type your message here...", autoFocus: true, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image_input", onChange: handleFileChange, className: "hidden", id: "file-input", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "file-input", className: "bg-[#007BFF] text-white py-2 px-4 rounded-md cursor-pointer", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-image", __source: { fileName: "", lineNumber: 70, columnNumber: 115 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] text-white py-2 px-4 rounded-md", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 71, columnNumber: 108 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] text-white py-2 px-4 rounded-md", onClick: handleSendImage, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-upload", __source: { fileName: "", lineNumber: 72, columnNumber: 106 }, __self: this })))))); }