function MainComponent() { const [response, setResponse] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const handleSendMessage = async (event)=>{ event.preventDefault(); const messageContent = event.target.elements.message.value; const newMessage = { role: 'user', content: messageContent }; setMessages((prevMessages)=>[ ...prevMessages, newMessage ]); setIsLoading(true); try { const result = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ], system_prompt: 'Discuss this content' }) }).then((res)=>res.json()); setIsLoading(false); if (result.status) { setResponse(result.result); } else { setResponse("Sorry, we're having trouble at the moment."); } } catch (error) { setIsLoading(false); setResponse("Sorry, we're having trouble at the moment."); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 bg-black border-b border-gray-900 flex justify-between items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "CoolCoop Merch"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block p-2 hover:bg-gray-800 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block p-2 hover:bg-gray-800 rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block p-2 hover:bg-gray-800 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "my-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Featured Merchandise"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4 ].map((item)=>/*#__PURE__*/ React.createElement("div", { key: item, className: "max-w-sm rounded overflow-hidden shadow-lg bg-gray-800", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-48 object-cover", src: `/images/product-${item}.jpg`, alt: `Featured product ${item}`, __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, "Product ", item), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-base", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "This is one of the top products from CoolCoop Merch! Get it while supplies last.")), /*#__PURE__*/ React.createElement("div", { className: "px-6 pt-4 pb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, "Buy Now")))))), /*#__PURE__*/ React.createElement("section", { className: "my-8", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Chat with CoopBot for product recommendations!"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 p-4 rounded-md max-w-lg mx-auto", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${msg.role === 'user' ? 'text-right' : 'text-left'} my-2`, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `${msg.role === 'user' ? 'bg-blue-500' : 'bg-green-500'} inline-block px-4 py-2 rounded-lg text-white`, __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, msg.content))), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 27 }, __self: this }, "Loading..."), response && /*#__PURE__*/ React.createElement("p", { className: "bg-green-500 inline-block px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 26 }, __self: this }, response), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "mt-4 flex", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 rounded-l-md focus:outline-none", placeholder: "Type your message here", required: true, __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 p-2 rounded-r-md", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Send"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, ` body { --tw-bg-opacity: 1; background-color: rgba(18, 18, 18, var(--tw-bg-opacity)); } `)); }