function MainComponent({ onSubmit }) { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(null); const [additionalInfo, setAdditionalInfo] = React.useState(null); const [completedExample, setCompletedExample] = React.useState(''); const [finalExample, setFinalExample] = React.useState(''); const [additionalReason, setAdditionalReason] = React.useState(''); const [additionalMeans, setAdditionalMeans] = React.useState(''); const createExampleSentence = (data)=>{ return `私は${data.goal}を達成するために、${data.reason}だから${data.goal}をしたい。それを達成する手段として、${data.means}を学びたい。`; }; const handleSubmit = (event)=>{ event.preventDefault(); setLoading(true); const data = { goal: event.target.goal.value, reason: event.target.reason.value, means: event.target.means.value }; const exampleSentence = createExampleSentence(data); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: exampleSentence } ] }) }).then((response)=>response.json()).then((data)=>{ const receivedText = data.choices[0].message.content; setResponse(receivedText); setLoading(false); if (receivedText.length >= 600) { setFinalExample(receivedText); } else { setCompletedExample(receivedText); setAdditionalInfo('生成されたテキストは600文字未満です。追加の理由や手段を提供してください。'); } }); onSubmit(data, exampleSentence); }; const handleAdditionalSubmit = (event)=>{ event.preventDefault(); setLoading(true); const updatedReason = event.target.additionalReason.value; const updatedMeans = event.target.additionalMeans.value; const exampleSentence = `${completedExample} ${updatedReason} ${updatedMeans}`; fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: exampleSentence } ] }) }).then((response)=>response.json()).then((data)=>{ const finalReceivedText = data.choices[0].message.content; setFinalExample(finalReceivedText); setLoading(false); setAdditionalInfo(null); }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#d2e29e] min-h-screen p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "志望理由書を作成するために質問"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "goal", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "目標"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "goal", name: "goal", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "reason", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "理由（きっかけ→だから〇〇〇をしたい）"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "reason", name: "reason", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "means", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "手段（その学校で学べる事）"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "means", name: "means", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 mt-4 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "提出")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg text-blue-500", __source: { fileName: "", lineNumber: 114, columnNumber: 21 }, __self: this }, "生成中..."), response && !finalExample && !additionalInfo && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded font-crimson-text", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "生成された例文: ", response), additionalInfo && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 rounded font-crimson-text", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, additionalInfo), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAdditionalSubmit, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "additionalReason", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, "追加理由"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "additionalReason", name: "additionalReason", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "additionalMeans", className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "追加手段"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "additionalMeans", name: "additionalMeans", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 mt-4 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "追加情報を送信"))), finalExample && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded font-crimson-text", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, "最終例文: ", finalExample))); } function StoryComponent() { const handleSubmit = (data, exampleSentence)=>{ console.log('Form Data:', data); console.log('Example Sentence:', exampleSentence); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 164, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this })); }