function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [response, setResponse] = React.useState(''); const [showDialog, setShowDialog] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); const formData = new FormData(event.target); const userMessage = { role: "user", content: `Signup/Login action with username: ${formData.get('username')} and password: ${formData.get('password')}` }; setMessages([ ...messages, userMessage ]); try { const result = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, userMessage ], system_prompt: 'Perform signup/login action', max_tokens: 2000 }) }).then((response)=>response.json()); if (result.status) { setResponse(result.result); } else { setResponse("There was an error processing your request."); } } catch (error) { setResponse("Failed to submit the request."); } setIsLoading(false); }; const handleLoginClick = ()=>{ setShowDialog(true); }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen flex-col items-center justify-center bg-[#f7f7f7] animate-slideIn", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-3xl font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Welcome! Please sign up or log in."), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "username", type: "text", placeholder: "Username", name: "username", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "password", type: "password", placeholder: "******************", name: "password", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __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", type: "submit", disabled: isLoading, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, isLoading ? 'Loading...' : 'Sign Up'), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: handleLoginClick, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Login with Google"))), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-500 text-xs", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "©2023 All rights reserved.")), showDialog && /*#__PURE__*/ React.createElement("dialog", { open: true, className: "rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-5", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Sign In with Google"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowDialog(false), className: "mt-3 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-google", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }), " Sign in"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateY(20%); opacity: 0; } to { transform: translateY(0%); opacity: 1; } } .animate-slideIn { animation-duration: 1s; animation-fill-mode: both; animation-name: slideIn; } `)); }