function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const sendMessage = async ()=>{ if (inputValue.trim() === '') return; const newMessage = { role: 'user', content: inputValue }; setMessages((prevMessages)=>[ ...prevMessages, newMessage ]); setInputValue(''); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ], system_prompt: 'The world population is aging. Provide travel advice, health tips, clothing and accessories recommendations in a simple, enjoyable, and quick manner for the elderly.' }) }); const data = await response.json(); if (data.status) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); } } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', content: 'Ocorreu um erro, por favor, tente novamente mais tarde.' } ]); } finally{ setIsLoading(false); } }; const handleMessageChange = (event)=>setInputValue(event.target.value); const handleKeyPress = (event)=>{ if (event.key === 'Enter') { sendMessage(); } }; const messageComponents = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 p-3 rounded-lg ${message.role === 'user' ? 'bg-[#d1e7dd] self-start' : 'bg-[#bcd0c7] self-end'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, message.content))); const loadingMessage = isLoading ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#888]", __source: { fileName: "", lineNumber: 43, columnNumber: 38 }, __self: this }, "Carregando...") : null; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f1f1f1] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white shadow-lg rounded-lg p-6 flex flex-col", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Conselhos para a Melhor Idade"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#555] mb-8", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Dicas de viagens, saúde, roupas e acessórios de forma simples e divertida."), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex-grow overflow-auto", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, messageComponents, loadingMessage), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "messageInput", value: inputValue, onChange: handleMessageChange, onKeyPress: handleKeyPress, className: "flex-1 p-2 text-lg border-2 border-[#ddd] rounded-l-lg focus:outline-none", placeholder: "Digite sua mensagem aqui", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "bg-[#007bff] text-white p-2 rounded-r-lg hover:bg-[#0056b3] disabled:opacity-50", disabled: isLoading, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Enviar"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }