function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [response, setResponse] = React.useState(null); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); setMessages((prevMessages)=>[ ...prevMessages, { role: "user", content: inputValue } ]); setIsLoading(true); try { const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: inputValue } ], system_prompt: 'I want to create a e-commerce portfolio using CHAT_GPT integration.' }) }); const data = await res.json(); if (data.status) { setResponse(data.result); setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: data.result } ]); } else { setResponse("There was an error processing your request."); } } catch (error) { setResponse("Failed to fetch response from server."); } setIsLoading(false); setInputValue(''); }; const chatPanel = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full md:w-1/2 bg-white shadow-lg rounded-lg p-4 my-4 mx-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[500px] p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, messages.map((msg, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `p-2 my-2 rounded-lg ${msg.role === 'user' ? 'bg-blue-200 align-start' : 'bg-green-200 align-end'}`, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, msg.content)), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 23 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full flex mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border rounded-l-lg", type: "text", value: inputValue, onChange: handleInputChange, name: "message", placeholder: "Ask about E-Commerce portfolios...", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-r-lg", type: "submit", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Send")), response && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-100 p-4 rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Response:"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, response))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-gray-100 min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c3e50] p-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-white font-bold", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "E-Commerce Portfolio"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mr-6", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-white font-semibold hover:text-gray-300", href: "#", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { className: "mr-6", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-white font-semibold hover:text-gray-300", href: "#", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Shop")), /*#__PURE__*/ React.createElement("li", { className: "mr-6", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-white font-semibold hover:text-gray-300", href: "#", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Categories")), /*#__PURE__*/ React.createElement("li", { className: "mr-6", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-white font-semibold hover:text-gray-300", href: "#", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart text-white text-2xl", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }))), chatPanel, /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-wrap justify-center", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2c3e50] p-4 mt-auto", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm text-center", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, "© 2023 E-Commerce Portfolio. All rights reserved."))); }