function MainComponent() { const [loading, setLoading] = React.useState(false); const [fromIP, setFromIP] = React.useState(''); const [toIP, setToIP] = React.useState(''); const [response, setResponse] = React.useState(''); const handleGenerateScreenshots = async ()=>{ 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: `Create screenshots of sites from IP addresses ranging from ${fromIP} to ${toIP}.` } ], system_prompt: 'Generate screenshots for the given IP range.' }) }); const data = await res.json(); setResponse(data.choices[0].message.content); } catch (error) { console.error("Error generating screenshots:", error); setResponse('Failed to generate screenshots.'); } finally{ setLoading(false); } }; const handleChange = (e)=>{ if (e.target.name === 'fromIP') { setFromIP(e.target.value); } else if (e.target.name === 'toIP') { setToIP(e.target.value); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#f0f0f0] p-8 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "IP Address Screenshots"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "from-ip", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "From IP Address"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "from-ip", type: "text", placeholder: "192.168.0.1", name: "fromIP", value: fromIP, onChange: handleChange, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "to-ip", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "To IP Address"), /*#__PURE__*/ React.createElement("input", { className: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "to-ip", type: "text", placeholder: "192.168.0.255", name: "toIP", value: toIP, onChange: handleChange, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] hover:bg-[#0056b3] text-white font-bold py-2 px-4 rounded", type: "button", onClick: handleGenerateScreenshots, disabled: loading, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, loading ? 'Generating...' : 'Generate Screenshots')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, response && /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 24 }, __self: this }, response)))); }