function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [userInput, setUserInput] = React.useState(''); const [botResponse, setBotResponse] = React.useState(''); const [conversation, setConversation] = React.useState([]); const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (!userInput.trim()) return; const newConversation = [ ...conversation, { role: 'user', content: userInput } ]; setConversation(newConversation); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newConversation, system_prompt: userInput, max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setBotResponse(data.result); setConversation([ ...newConversation, { role: 'assistant', content: data.result } ]); } else { setBotResponse('Sorry, something went wrong.'); } } catch (error) { setBotResponse('Error communicating with the chat service.'); } finally{ setIsLoading(false); } setUserInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#121212] p-4 fixed w-full z-10 flex justify-between items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/login", className: "text-white font-roboto text-lg hover:text-blue-500", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex justify-center items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto mx-2 cursor-pointer", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("img", { className: "h-6 w-auto mx-2", src: "/list-display-icon.png", alt: "Menu displayed in middle of navbar", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto mx-2 cursor-pointer", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart text-xl", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: "/register", className: "text-white font-roboto text-lg hover:text-blue-500", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Register")), /*#__PURE__*/ React.createElement("div", { className: "pt-24 flex flex-col items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-none w-full max-w-md", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `my-2 p-2 rounded bg-${message.role === 'user' ? 'blue-500' : 'green-500'} text-white font-roboto`, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, message.content))), botResponse && /*#__PURE__*/ React.createElement("div", { className: "my-2 p-2 rounded bg-gray-500 text-white font-roboto w-full max-w-md", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, botResponse), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow border rounded py-2 px-3 form-input mt-1 block w-full ring-blue-500 outline-none focus:ring", type: "text", onChange: handleInputChange, value: userInput, name: "user_input", autoComplete: "off", placeholder: "Ask me anything...", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `mt-3 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`, type: "submit", disabled: isLoading, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, isLoading ? 'Loading...' : 'Send')))); }