function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputText, setInputText] = React.useState(''); const handleSendMessage = ()=>{ if (inputText.trim() !== '') { setMessages([ ...messages, { text: inputText, isUser: true } ]); setInputText(''); // Simulating API call to get AI response setTimeout(()=>{ const aiResponse = "ご質問ありがとうございます。いただいた情報を元に、できる限り役立つ回答を提供させていただきます。他にもご質問があればお気軽にお聞かせください！"; setMessages([ ...messages, { text: inputText, isUser: true }, { text: aiResponse, isUser: false } ]); }, 1000); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "AI アシスタント"), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: inputText, onChange: (e)=>setInputText(e.target.value), onKeyPress: (e)=>e.key === 'Enter' && handleSendMessage(), placeholder: "メッセージを入力...", className: "flex-1 border rounded-l-lg p-2 focus:outline-none", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-r-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-scroll p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "生成AIからの回答"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-3 rounded-lg shadow", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, messages.map((message, index)=>message.isUser ? null : /*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 42, columnNumber: 39 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "AIからの応答"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-3 rounded-lg shadow", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${message.isUser ? 'text-right' : ''}`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block ${message.isUser ? 'bg-blue-500 text-white' : 'bg-gray-200'} p-2 rounded-lg`, __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, message.text)))))))); }