function MainComponent() { const [messages, setMessages] = React.useState([]); const [chatResponse, setChatResponse] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [inputValue, setInputValue] = React.useState(''); async function handleChatSubmit(event) { event.preventDefault(); const newMessages = [ ...messages, { role: 'user', content: inputValue } ]; setMessages(newMessages); setInputValue(''); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages, system_prompt: 'Assist the user with shopping' }) }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); if (data.status) { setChatResponse(data.result); } setIsLoading(false); } catch (error) { console.error('Fetch error: ', error); setIsLoading(false); } } function handleInputChange(event) { setInputValue(event.target.value); } const chatResponses = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: message.role === 'user' ? 'flex justify-end' : 'flex justify-start', __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs p-2 m-2 rounded-lg ${message.role === 'user' ? 'bg-[#D1FAE5]' : 'bg-[#E0E7FF]'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, message.content))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center min-h-screen bg-[#F9FAFB]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3 lg:w-1/2 xl:w-1/3 p-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Welcome to our Online Shop"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, chatResponses, isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Loading...")), !isLoading && chatResponse && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xs p-2 m-2 rounded-lg bg-[#E0E7FF]", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, chatResponse))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleChatSubmit, className: "mt-4 flex", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 border border-gray-300 rounded-l-lg focus:outline-none", placeholder: "Ask us anything...", value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 bg-[#2563EB] text-white rounded-r-lg", disabled: isLoading || !inputValue, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, isLoading ? '...' : 'Send'))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, ` @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .MainComponent-enter { animation: 0.3s ease-out 0s 1 slideInFromLeft; } `)); }