function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [searchQuery, setSearchQuery] = React.useState(''); const [isLoadingSearch, setIsLoadingSearch] = React.useState(false); const [isLoadingGpt, setIsLoadingGpt] = React.useState(false); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [gptResponse, setGptResponse] = React.useState(''); const handleSearch = (query)=>{ setIsLoadingSearch(true); fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }).then((res)=>res.json()).then((data)=>{ setSearchResults(data.items); setIsLoadingSearch(false); }).catch(()=>setIsLoadingSearch(false)); }; const handleGptSubmit = (messages)=>{ setIsLoadingGpt(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messages, system_prompt: 'Help with a login issue', max_tokens: 200 }) }).then((res)=>res.json()).then((data)=>{ setGptResponse(data.result); setIsLoadingGpt(false); }).catch(()=>setIsLoadingGpt(false)); }; const handleLogin = ()=>{ handleGptSubmit([ { role: 'system', content: 'The user is attempting to log in' }, { role: 'user', content: `Username: ${username}, Password: ${password}` } ]); }; const handleSearchQueryChange = (event)=>{ setSearchQuery(event.target.value); }; const handleUsernameChange = (event)=>{ setUsername(event.target.value); }; const handlePasswordChange = (event)=>{ setPassword(event.target.value); }; const searchContainer = isLoadingSearch ? 'Loading...' : searchResults.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.link, className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", className: "block font-roboto text-lg text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, result.snippet))); const loginContainer = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col grow-0 w-full md:w-[300px] lg:w-[400px] mx-auto my-10 p-6 bg-white shadow-md rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-bold text-center mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-red-600 rounded-full px-3 py-1 text-xs font-semibold font-roboto text-white mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "R"), /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-green-600 rounded-full px-3 py-1 text-xs font-semibold font-roboto text-white mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-blue-600 rounded-full px-3 py-1 text-xs font-semibold font-roboto text-white", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "L"), /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-yellow-600 rounded-full px-3 py-1 text-xs font-semibold font-roboto text-white ml-2", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "X")), isLoadingGpt && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-gray-700", __source: { fileName: "", lineNumber: 74, columnNumber: 26 }, __self: this }, "Loading..."), gptResponse && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-green-600", __source: { fileName: "", lineNumber: 75, columnNumber: 25 }, __self: this }, gptResponse)), /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", value: username, onChange: handleUsernameChange, className: "mb-4 px-4 py-2 w-full rounded bg-gray-100 border border-gray-300 focus:border-blue-500 focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: password, onChange: handlePasswordChange, className: "mb-4 px-4 py-2 w-full rounded bg-gray-100 border border-gray-300 focus:border-blue-500 focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, className: "w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "Log In")); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center my-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Welcome to the Login Screen")), loginContainer, /*#__PURE__*/ React.createElement("div", { className: "py-10", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", value: searchQuery, onChange: handleSearchQueryChange, className: "border p-2 rounded-l border-r-0 focus:outline-none w-full md:w-3/4 lg:w-1/2", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>handleSearch(searchQuery), className: "bg-blue-500 text-white p-2 rounded-r border border-l-0 w-1/4", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "mb-10", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, searchContainer), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `))); }