function MainComponent() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const [chatResponses, setChatResponses] = React.useState([]); const [message, setMessage] = React.useState(''); const handleMenuToggle = ()=>setIsMenuOpen(!isMenuOpen); const sendMessageToGPT = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: message } ], system_prompt: `Discuss the new men's tracksuits with The Lock logo across the front`, max_tokens: 200 }) }); const data = await response.json(); setIsLoading(false); if (data.status) { setChatResponses((chatResponses)=>[ ...chatResponses, data.result ]); setMessage(''); } }; const handleSubmit = (event)=>{ event.preventDefault(); sendMessageToGPT(); }; const handleInputChange = (event)=>{ setMessage(event.target.value); }; const tracksuitImageAlt = 'Men\'s tracksuit with The Lock logo across the front'; const menuStyle = isMenuOpen ? 'flex' : 'hidden'; const chatMessages = chatResponses.map((response, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-[#ffffff] font-roboto my-2", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, response)); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#ffffff] font-roboto text-xl", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "The Lock"), /*#__PURE__*/ React.createElement("button", { className: "text-[#ffffff] font-roboto text-lg", name: "menuButton", onClick: handleMenuToggle, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, isMenuOpen ? '✕' : '☰')), /*#__PURE__*/ React.createElement("nav", { className: `${menuStyle} flex-col items-center bg-[#121212] p-4 absolute inset-x-0 top-full z-10`, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#ffffff] font-roboto my-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#ffffff] font-roboto my-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#ffffff] font-roboto my-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#ffffff] font-roboto my-2", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Men's Tracksuits")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex flex-wrap justify-center items-center gap-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 lg:w-1/3 xl:w-1/4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/mens-tracksuit-with-lock-logo.jpg", alt: tracksuitImageAlt, className: "w-full h-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-center text-[#010101] font-roboto mt-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Men's Tracksuits")), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 lg:w-1/3 xl:w-1/4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/mens-tracksuit-with-lock-logo-back.jpg", alt: "Men's tracksuit with The Lock logo on the back", className: "w-full h-auto", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#f8f8f8] p-4 mt-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userMessage", value: message, onChange: handleInputChange, className: "w-full p-2 font-roboto my-2", placeholder: "Ask about our tracksuits", required: true, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", name: "sendMessage", className: "bg-[#010101] text-[#ffffff] font-roboto py-2 px-4 my-2", disabled: isLoading, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, isLoading ? 'Loading...' : 'Send')), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, chatMessages))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } nav { animation: slideIn 250ms ease-in-out; } `)); }