function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [chatMessages, setChatMessages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (userInput.trim() === '') return; setChatMessages([ ...chatMessages, { role: 'user', content: userInput } ]); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userInput } ], system_prompt: `You're connected to Connections magazine. How can I assist you with luxury travel today?` }) }); const data = await response.json(); if (data.status) { setChatMessages([ ...chatMessages, { role: 'user', content: userInput }, { role: 'assistant', content: data.result } ]); } else { setChatMessages([ ...chatMessages, { role: 'user', content: userInput }, { role: 'system', content: 'There was an error processing your request.' } ]); } } catch (error) { setChatMessages([ ...chatMessages, { role: 'user', content: userInput }, { role: 'system', content: 'Failed to communicate with the server.' } ]); } finally{ setIsLoading(false); setUserInput(''); } }; const messageElements = chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${message.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block rounded-lg px-4 py-2 ${message.role === 'user' ? 'bg-[#D0E6A5]' : 'bg-[#A5BED1]'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, message.content))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#EAE7DC]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-white bg-[#D8C3A5] p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-lobster", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Connections"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-lato", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Luxury Tourism & Social Appeal")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col justify-center items-center p-6", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-md w-full max-w-2xl p-4 m-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "mb-2 text-xl font-roboto text-[#8E8D8A]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Ask us anything about luxury travel:"), /*#__PURE__*/ React.createElement("div", { className: "flex w-full", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "border p-2 mr-2 flex-grow font-lato", placeholder: "Type your question here...", onChange: handleInputChange, value: userInput, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#E98074] py-2 px-4 text-white font-bold font-lato", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Send"))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center my-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 text-lg text-[#413C58] font-lato overflow-auto h-[300px]", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, messageElements))), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-white bg-[#D8C3A5] py-4 font-lato", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "© 2023 Connections Magazine. All rights reserved."))); }