function MainComponent() { const [inputMessage, setInputMessage] = React.useState(''); const [chatHistory, setChatHistory] = React.useState([]); const [loading, setLoading] = React.useState(false); const [showDropdown, setShowDropdown] = React.useState(false); const sendMessageToGPT = async (messageContent)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: messageContent } ], system_prompt: 'Provide information about featured products, special offers, and secure payment options for an ecommerce retail store.' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status === true) { setChatHistory((prevHistory)=>[ ...prevHistory, { role: 'assistant', content: data.result } ]); } else { throw new Error('Failed to get a valid response from the API'); } } catch (error) { setChatHistory((prevHistory)=>[ ...prevHistory, { role: 'system', content: error.message } ]); } finally{ setLoading(false); } }; const handleInputChange = (e)=>{ setInputMessage(e.target.value); }; const handleEnterKeyPress = (e)=>{ if (e.key === 'Enter') { sendMessageToGPT(inputMessage); setInputMessage(''); } }; const handleClickSearchIcon = ()=>{ sendMessageToGPT(inputMessage); setInputMessage(''); }; const toggleDropdown = ()=>{ setShowDropdown(!showDropdown); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a1a1a] py-4 px-8", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Brand logo", className: "h-12", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleDropdown, className: "text-white hover:text-[#e5e5e5] py-2 px-4 focus:outline-none focus:ring-2 focus:ring-[#ff8c00] rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-angle-down ml-2 align-middle", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this })), showDropdown && /*#__PURE__*/ React.createElement("ul", { className: "absolute bg-[#2a2a2a] w-[200px] mt-1 rounded-md z-10", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "block text-white px-4 py-2 text-sm hover:text-[#ff8c00] cursor-pointer", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Electronics"), /*#__PURE__*/ React.createElement("li", { className: "block text-white px-4 py-2 text-sm hover:text-[#ff8c00] cursor-pointer", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "Clothing"), /*#__PURE__*/ React.createElement("li", { className: "block text-white px-4 py-2 text-sm hover:text-[#ff8c00] cursor-pointer", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "Home & Living"), /*#__PURE__*/ React.createElement("li", { className: "block text-white px-4 py-2 text-sm hover:text-[#ff8c00] cursor-pointer", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, "Toys & Games")))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[200px] md:w-[300px]", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: inputMessage, onChange: handleInputChange, onKeyPress: handleEnterKeyPress, placeholder: "Search products...", className: "w-full h-[40px] pl-4 pr-10 rounded-md bg-[#2a2a2a] text-white focus:outline-none focus:ring-2 focus:ring-[#ff8c00]", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleClickSearchIcon, className: "absolute right-0 top-0 h-full px-3 flex items-center justify-center text-white", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "text-white text-2xl p-2", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${loading ? 'fa-spinner fa-spin' : 'fa-user'}`, __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-[#f0f0f0] p-8", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Featured Products")), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-8", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Special Offers")), /*#__PURE__*/ React.createElement("section", { className: "bg-[#f0f0f0] p-8", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Customer Reviews")), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-8", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Sign Up for Our Newsletter"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Enter your email", className: "flex-1 p-2 rounded-md border border-gray-300", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#ff8c00] text-white rounded-md", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Subscribe"))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#f0f0f0] p-8", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Discover the story behind our brand, our values, and our commitment to providing quality products.")), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1a1a1a] p-8 text-white", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, "Contact Information")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, "Follow Us On Social Media")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, "Secure Payments")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, "Policies"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, "Returns Policy"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, "Shipping Information")))))); }