function MainComponent() { const [loading, setLoading] = React.useState(false); const [message, setMessage] = React.useState(''); const [response, setResponse] = React.useState(''); const sendMessage = async (e)=>{ e.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: 'special fat cat' }) }); const data = await res.json(); setResponse(data.choices[0].message.content); } catch (error) { console.error(error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "grid-message", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Message to ChatGPT"), /*#__PURE__*/ React.createElement("textarea", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", id: "grid-message", name: "message", placeholder: "Ask something...", rows: "4", value: message, onChange: (e)=>setMessage(e.target.value), disabled: loading, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))), response && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-blue-100 text-blue-700 border rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, response)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `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 cursor-not-allowed' : ''}`, type: "submit", disabled: loading, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, loading ? 'Sending...' : 'Send')))); }