function MainComponent() { const [messages, setMessages] = React.useState([ { type: 'received', text: 'こんにちは！いかがお過ごしですか？' }, { type: 'sent', text: 'おかげさまで元気です。' }, { type: 'received', text: '良かったです！' }, { type: 'sent', text: 'あなたはどうですか？' } ]); const [input, setInput] = React.useState(''); const handleKeyDown = (event)=>{ if (event.key === 'Enter' && input.trim()) { setMessages([ ...messages, { type: 'sent', text: input } ]); setInput(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#e5e5e5]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-[600px] bg-white shadow-lg rounded-lg flex flex-col", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#00c300] text-white p-4 font-sans text-lg rounded-t-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "チャット"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 space-y-4 overflow-y-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, messages.map((message, index)=>{ const isReceived = message.type === 'received'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${isReceived ? 'justify-start' : 'justify-end'}`, __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] p-2 rounded-lg ${isReceived ? 'bg-gray-200' : 'bg-[#00c300] text-white'}`, __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 27, columnNumber: 19 }, __self: this }, message.text))); })), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: input, onChange: (e)=>setInput(e.target.value), onKeyDown: handleKeyDown, className: "w-full p-2 border border-gray-300 rounded-l-lg focus:outline-none", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00c300] text-white p-2 rounded-r-lg font-sans", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "送信")))); }