function MainComponent() { const [conversation, setConversation] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (inputValue.trim() === '') return; const newConversation = [ ...conversation, { role: 'user', content: inputValue } ]; setConversation(newConversation); setInputValue(''); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newConversation, system_prompt: 'Greattechnology assistance' }) }); const data = await response.json(); if (data.status) { setConversation((prev)=>[ ...prev, { role: 'assistant', content: data.result } ]); } } catch (error) { // In a real-world app, you might want to display an error message } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen justify-center items-center bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white shadow-lg rounded-lg max-w-[400px] w-full mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Greattechnology"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "We're proud to offer the latest and greatest in technology. How can we assist you today?"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${message.role === 'assistant' ? 'text-left' : 'text-right'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block px-4 py-2 rounded-lg ${message.role === 'assistant' ? 'bg-[#eff0f1]' : 'bg-[#04a7f1] text-white'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, message.content))))), /*#__PURE__*/ React.createElement("div", { className: "flex w-full max-w-[400px]", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: (e)=>setInputValue(e.target.value), placeholder: "Type your message here...", className: "flex-1 p-2 border-2 border-r-0 border-[#eff0f1] rounded-l-lg focus:outline-none", onKeyDown: (e)=>e.key === 'Enter' && sendMessage(), __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: `px-4 py-2 bg-[#04a7f1] text-white font-semibold border-2 border-[#04a7f1] rounded-r-lg ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#0388ce]'}`, disabled: loading, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, ` @keyframes loading-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-spinner:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #fff; border-top-color: #3498db; animation: loading-spinner 1s linear infinite; } `)); }