function MainComponent() { const [messages, setMessages] = React.useState([ { text: "Hello, how are you?", self: false }, { text: "I'm fine, thank you!", self: true } ]); const [input, setInput] = React.useState(""); const socketRef = React.useRef(); React.useEffect(()=>{ const script = document.createElement('script'); script.src = "https://cdn.socket.io/4.0.0/socket.io.min.js"; script.async = true; script.onload = ()=>{ socketRef.current = window.io("/"); socketRef.current.on("message", (message)=>{ setMessages((msgs)=>[ ...msgs, { text: message, self: false } ]); }); }; document.body.appendChild(script); return ()=>{ if (socketRef.current) socketRef.current.disconnect(); }; }, []); const handleSendMessage = ()=>{ if (input.trim() !== "") { socketRef.current.emit("message", input); setMessages((msgs)=>[ ...msgs, { text: input, self: true } ]); setInput(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen w-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#4a76a8] text-white font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "リアルタイムチャット"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#5a86b8] rounded-full", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "ログアウト")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { id: "messages", className: "space-y-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>{ const liClass = msg.self ? "bg-[#d8f4e0] self-end" : "bg-[#e1f3fb] self-start"; return /*#__PURE__*/ React.createElement("li", { key: index, className: `${liClass} p-2 rounded-md w-fit max-w-[70%]`, __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, msg.text); }))), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 border rounded-l-lg outline-none", placeholder: "Type your message here...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#4a76a8] text-white rounded-r-lg", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "送信")))); }