function MainComponent() { const [genre, setGenre] = React.useState(''); const [prompt, setPrompt] = React.useState(''); const [feedbackVisible, setFeedbackVisible] = React.useState(false); const [responseVisible, setResponseVisible] = React.useState(false); const [userInput, setUserInput] = React.useState(''); const prompts = { education: [ "教育に関連する質問を入力してください。", "最新の教育トレンドについて知りたいですか？" ], technology: [ "技術の最新トレンドについて質問してください。", "AIの未来についてどう思いますか？" ], health: [ "健康やフィットネスに関する質問を入力してください。", "健康的な生活習慣には何が助けになりますか？" ] }; const handleGenreSelect = (genre)=>()=>{ setGenre(genre); setPrompt(''); setFeedbackVisible(false); setResponseVisible(false); }; const handlePromptSelect = (prompt)=>()=>{ setPrompt(prompt); setResponseVisible(true); }; const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleSubmit = ()=>{ setFeedbackVisible(true); }; const genreSelections = Object.keys(prompts).map((key)=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: handleGenreSelect(key), className: "p-2 my-2 bg-blue-500 text-white rounded-md block", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, key)); const promptSelections = prompts[genre]?.map((prompt)=>/*#__PURE__*/ React.createElement("button", { key: prompt, onClick: handlePromptSelect(prompt), className: "p-2 my-2 bg-green-500 text-white rounded-md block", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, prompt)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "py-4 bg-[#F0F0F0] shadow-md flex justify-between items-center px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "LLMチャットインターフェイス"), /*#__PURE__*/ React.createElement("button", { className: "text-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, genre === '' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "ジャンルを選択してください:"), genreSelections), genre !== '' && prompt === '' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "おすすめのプロンプト:"), promptSelections), responseVisible && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "あなたの入力:"), /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full p-2 border border-[#D0D0D0] rounded-md", rows: "5", onChange: handleInputChange, value: userInput, placeholder: prompt, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-blue-500 text-white rounded-md block", onClick: handleSubmit, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "送信")), feedbackVisible && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "フィードバック:"), /*#__PURE__*/ React.createElement("textarea", { name: "feedback", className: "w-full p-2 border border-[#D0D0D0] rounded-md", rows: "5", placeholder: "フィードバックを入力", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }))), feedbackVisible && /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 bg-[#007BFF] text-white rounded-md", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "フィードバックを送る"))); }