function MainComponent() { const [conversation, setConversation] = React.useState([]); const [messageInput, setMessageInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (!messageInput.trim()) return; setLoading(true); const messagesToSend = [ ...conversation, { role: "user", content: messageInput.trim() } ]; setConversation(messagesToSend); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messagesToSend, system_prompt: 'Conversation between an alligator and a fruit fly about their wedding' }) }); const data = await response.json(); if (data.status) { setConversation((conversation)=>[ ...conversation, { role: "assistant", content: data.result } ]); } } catch (error) { console.error(error); } finally{ setLoading(false); setMessageInput(''); } }; const handleInputChange = (event)=>{ setMessageInput(event.target.value); }; const handleKeyPress = (event)=>{ if (event.key === 'Enter') { sendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FCEFEF] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded shadow-md p-4 space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-lg font-bold font-crimson-text", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Alligator & Fruit Fly Wedding Chat"), /*#__PURE__*/ React.createElement("ul", { className: "h-[400px] overflow-auto space-y-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `flex ${message.role === "assistant" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs p-2 rounded-lg ${message.role === "assistant" ? "bg-[#D1FAE5] text-right" : "bg-[#FEF3C7]"}`, __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "messageInput", type: "text", placeholder: "Type a message...", className: "w-full px-4 py-2 border rounded outline-none font-roboto", value: messageInput, onChange: handleInputChange, onKeyPress: handleKeyPress, disabled: loading, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#10B981] text-white rounded font-roboto", disabled: loading, onClick: sendMessage, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 74, columnNumber: 24 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 74, columnNumber: 69 }, __self: this }))))); }