function SummarizeButton({ onClick, loading }) { const buttonText = loading ? 'Summarizing...' : 'Summarize'; const disabled = loading; return /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-blue-500 text-white px-4 py-2 rounded", onClick: onClick, disabled: disabled, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, buttonText); } function SummarizeButtonStory() { const [loading, setLoading] = React.useState(false); const handleSummarize = ()=>{ setLoading(true); setTimeout(()=>setLoading(false), 2000); // Simulate async work }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SummarizeButton, { onClick: handleSummarize, loading: loading, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { const [inputText, setInputText] = React.useState(''); const [summary, setSummary] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleChange = (event)=>{ setInputText(event.target.value); }; const handleSummarize = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputText } ], system_prompt: '入力した文章を 100 文字程度に要約する' }) }); const data = await response.json(); const summaryContent = data.choices[0].message.content; setSummary(summaryContent); } catch (error) { console.error('Error:', error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "文章を入力する"), /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "p-2 w-[400px] h-[200px] border border-gray-300 mb-4", placeholder: "入力した文章を 100 文字程度に要約する...", value: inputText, onChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SummarizeButton, { onClick: handleSummarize, loading: loading, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-[400px] p-4 border border-gray-300", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "要約結果:"), /*#__PURE__*/ React.createElement("p", { name: "summaryResult", className: "font-roboto text-gray-700 mt-2", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, summary))); }