function MainComponent() { const [message, setMessage] = React.useState(''); const [response, setResponse] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); try { const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": message } ], system_prompt: 'Explain this content' }) }); const data = await res.json(); if (data.choices && data.choices[0] && data.choices[0].message) { setResponse(data.choices[0].message.content); } } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-2", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "レンタル携帯のページ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white p-8 rounded-lg shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "message", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "message", rows: "4", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${loading ? 'opacity-50' : ''}`, style: { animation: 'pulse 2s infinite' }, disabled: loading, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, loading ? '送信中...' : '送信')), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-md bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "応答"), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 py-4", id: "response", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, response)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 255, 0.4); } 50% { box-shadow: 0 0 20px 10px rgba(0, 113, 255, 0.4); } } `)); }