function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, text: "こんにちは、AIチャットボットです。", sender: "bot" } ]); const [inputValue, setInputValue] = React.useState(""); function handleInputChange(e) { setInputValue(e.target.value); } function handleSendMessage() { if (!inputValue.trim()) return; setMessages([ ...messages, { id: messages.length + 1, text: inputValue, sender: "user" } ]); setInputValue(""); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4 space-y-4 bg-gray-200", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, messages.map((message)=>message.sender === "bot" ? /*#__PURE__*/ React.createElement("div", { key: message.id, className: "flex items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-blue-500 w-8 h-8 flex justify-center items-center mr-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, "🤖")), /*#__PURE__*/ React.createElement("div", { className: "max-w-xs lg:max-w-md bg-white rounded-lg p-2", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, message.text)) : /*#__PURE__*/ React.createElement("div", { key: message.id, className: "flex items-center justify-end", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xs lg:max-w-md bg-green-300 rounded-lg p-2", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-gray-700 w-8 h-8 flex justify-center items-center ml-2", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, "👤"))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-2 border border-gray-300 rounded", placeholder: "メッセージを入力", onChange: handleInputChange, value: inputValue, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "送信")))); }