function MainComponent() { const [email, setEmail] = React.useState(''); const [message, setMessage] = React.useState(''); const [response, setResponse] = React.useState(''); const [isSubmitting, setIsSubmitting] = React.useState(false); async function handleSubmit(event) { event.preventDefault(); setIsSubmitting(true); 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: 'Please provide information to the user regarding their message' }) }); const data = await res.json(); if (data.status) { setResponse(data.result); } else { setResponse('Could not get a valid response from the server, please try again later.'); } setIsSubmitting(false); } const buttonClasses = `btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f9fc] py-12 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md space-y-8", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-extrabold text-gray-800", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Or ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-medium text-blue-600 hover:text-blue-500", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "return to homepage"))), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm -space-y-px", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email-address", className: "sr-only", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, "Email address"), /*#__PURE__*/ React.createElement("input", { id: "email-address", name: "email", type: "email", autoComplete: "email", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "Email address", onChange: (e)=>setEmail(e.target.value), value: email, __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "sr-only", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", placeholder: "Message", onChange: (e)=>setMessage(e.target.value), value: message, __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: buttonClasses, disabled: isSubmitting, __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, isSubmitting ? 'Sending...' : 'Send Message'))), response && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, response)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` @keyframes shimmer { 0% { background-position: -20px; } 100% { background-position: 240px; } } .btn { transition: all 0.3s ease-in-out; position: relative; overflow: hidden; } .btn::after { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100% ); background-repeat: no-repeat; background-size: 50px 100px; background-position: -50px; animation: shimmer 2s infinite linear; pointer-events: none; } `)); }