function MainComponent() { const [loading, setLoading] = React.useState(false); const [report, setReport] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const topic = e.target.topic.value; const length = e.target.length.value; const details = e.target.details.value; const messages = [ { role: "user", content: `Write a detailed report on the topic "${topic}" with a length of ${length}. Include the following details: ${details}.` } ]; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); const generatedReport = data.choices[0].message.content; setReport(generatedReport); setLoading(false); document.getElementById("result").classList.remove("hidden"); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4 font-serif", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white p-8 rounded-lg shadow-lg mt-8", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "レポートジェネレーター"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "topic", className: "block text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "レポートのトピック"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "topic", name: "topic", className: "w-full mt-2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "レポートのトピックを入力してください", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "length", className: "block text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "レポートの長さ"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "length", name: "length", className: "w-full mt-2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "レポートの長さを入力してください (例: 1000 words)", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "details", className: "block text-lg font-medium text-gray-700", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "詳細情報"), /*#__PURE__*/ React.createElement("textarea", { id: "details", name: "details", className: "w-full mt-2 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", rows: "4", placeholder: "レポートに含めたい特定の情報や要件を入力してください", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, loading ? "生成中..." : "レポートを生成"))), /*#__PURE__*/ React.createElement("div", { id: "result", className: "w-full max-w-3xl bg-white p-8 rounded-lg shadow-lg mt-8 hidden", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "生成されたレポート"), /*#__PURE__*/ React.createElement("p", { id: "reportContent", className: "text-lg text-gray-800", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, report))); }