function MainComponent() { const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [chatMessages, setChatMessages] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const toggleMenu = ()=>setIsMenuOpen(!isMenuOpen); const menuIcon = isMenuOpen ? 'fa-times' : 'fa-bars'; const menuVisibility = isMenuOpen ? 'flex' : 'hidden'; const sendMessage = async ()=>{ if (userInput.trim() === '') { return; } const newMessage = { role: 'user', content: userInput }; setChatMessages([ ...chatMessages, newMessage ]); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...chatMessages, newMessage ], system_prompt: 'Continue the conversation with this user' }) }); const data = await response.json(); if (data.status) { const assistantMessage = { role: 'assistant', content: data.result }; setChatMessages((currentMessages)=>[ ...currentMessages, assistantMessage ]); } } catch (error) { console.error('Error during ChatGPT API call', error); } finally{ setIsLoading(false); } setUserInput(''); }; const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleKeyDown = (event)=>{ if (event.key === 'Enter') { sendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#A4C639] px-4 py-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-white text-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-2", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), "SHANEGPT"), /*#__PURE__*/ React.createElement("button", { name: "menuButton", onClick: toggleMenu, className: "text-white text-2xl outline-none focus:outline-none", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${menuIcon}`, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 left-0 w-full h-full bg-[#00000070] ${menuVisibility} items-center justify-center transition ease-out duration-500`, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] w-[80%] max-w-[320px] rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4 font-roboto border-b border-[#DDDDDD]", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl text-[#333333]", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Menu")), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-black", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Chat with GPT-3")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-md ${message.role === 'user' ? 'bg-[#D0F0C0]' : 'bg-white'}`, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#333333]", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, message.content))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "p-2 rounded-md bg-white", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#333333]", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "..."))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", value: userInput, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type your message...", className: "flex-grow p-2 border border-[#DDDDDD] rounded-l-md outline-none font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { name: "sendMessage", onClick: sendMessage, className: "bg-[#A4C639] text-white p-2 rounded-r-md font-roboto", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }))))); }