function MainComponent() { const [inputValue, setInputValue] = React.useState(''); const [conversations, setConversations] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSend = async ()=>{ if (!inputValue.trim()) return; setLoading(true); setConversations([ ...conversations, { role: 'user', content: inputValue } ]); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputValue } ], system_prompt: 'Assist with the calendar planner app', max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setConversations([ ...conversations, { role: 'assistant', content: data.result } ]); setInputValue(''); } else { setConversations([ ...conversations, { role: 'assistant', content: "I'm sorry, I'm unable to assist with the request at the moment." } ]); } } catch (error) { setConversations([ ...conversations, { role: 'assistant', content: "I'm sorry, I'm having trouble processing your request." } ]); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto border border-[#c7c7cc] rounded-lg overflow-hidden shadow-xl bg-[#ffffff]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f7f7f7] px-4 py-2", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-lg font-semibold font-roboto text-[#000000]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Calendar Planner Assistant")), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-auto bg-[#ffffff] p-4 space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, conversations.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg ${message.role === 'user' ? 'bg-[#007aff] text-white ml-auto' : 'bg-[#e5e5ea] text-black'}`, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#8e8e93] font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f7f7f7] p-4 flex space-x-2", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your question or command...", value: inputValue, onChange: handleInputChange, className: "w-full px-4 py-2 border border-[#c7c7cc] rounded-lg focus:outline-none focus:border-[#007aff] font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "px-6 py-2 bg-[#007aff] text-white rounded-lg focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Send"))); }