function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const sendMessageToChatGPT = async (content)=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content } ], system_prompt: content }) }); const data = await response.json(); if (data.status) { setMessages((prevMessages)=>[ ...prevMessages, { role: "system", content: data.result } ]); } else { setMessages((prevMessages)=>[ ...prevMessages, { role: "system", content: "There was an error processing your request." } ]); } } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, { role: "system", content: "There was an error processing your request." } ]); } finally{ setIsLoading(false); } }; const handleLogin = (event)=>{ event.preventDefault(); const content = "User attempting to log in."; sendMessageToChatGPT(content); }; const messageList = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${message.role === "user" ? "text-right" : "text-left"} my-2`, __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block px-4 py-2 rounded-md ${message.role === "user" ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"}`, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, message.content))); return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white border-2 border-gray-200 rounded-lg shadow-lg w-full max-w-md relative", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: isLoading ? "animate-pulse" : "", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "username", name: "username", className: "mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm placeholder-gray-400", required: true, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", className: "mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm placeholder-gray-400", required: true, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, isLoading ? "Please wait..." : "Sign In"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Chat logs:"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-4 border-t-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, messageList))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 right-3", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 border-2 border-black rounded-sm flex items-center justify-center", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "integration:CHAT_GPT")))); }