function MainComponent() { const [currentPhase, setCurrentPhase] = React.useState(0); const [loading, setLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [error, setError] = React.useState(''); const handleUserInput = (e)=>{ setUserInput(e.target.value); setError(''); }; const submitMessage = async ()=>{ if (!userInput.trim()) { setError('Por favor, digite uma resposta.'); return; } setLoading(true); const newMessage = { role: 'user', content: userInput }; const updatedMessages = [ ...messages, newMessage ]; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages, system_prompt: phases[currentPhase] }) }); if (response.ok) { const { result } = await response.json(); setMessages([ ...updatedMessages, { role: 'assistant', content: result } ]); if (currentPhase < phases.length - 1) { setCurrentPhase((prevPhase)=>prevPhase + 1); } } else { setMessages([ ...updatedMessages, { role: 'assistant', content: "Sorry, I can't process your request at the moment." } ]); } } catch (error) { setMessages([ ...updatedMessages, { role: 'assistant', content: "Houve um erro ao processar a sua mensagem." } ]); } finally{ setLoading(false); setUserInput(''); } }; const handleKeyPress = (e)=>{ if (e.key === 'Enter') { submitMessage(); } }; const phases = [ "Como acessar o SERH e pedir férias.", "Como acessar o SERH e realizar o desligamento do estágio.", "Instruções para acessar o eproc.", "Quais são as regras de etiqueta corporativa na JFPR.", "Qual é a competência da Justiça Federal." ]; const phaseTitles = [ "Fase 1: Pedido de Férias", "Fase 2: Desligamento de Estágio", "Fase 3: Acesso ao eproc", "Fase 4: Etiqueta Corporativa", "Fase 5: Competência da Justiça" ]; const phaseIntroduction = "Bem-vindo ao Adventure JFPR! Complete as missões para aprender sobre os procedimentos e regras."; const renderMessage = (message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center ${message.role === 'assistant' ? 'justify-start' : 'justify-end'}`, __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block px-4 py-2 rounded-lg ${message.role === 'assistant' ? 'bg-[#e0e0e0] text-[#333]' : 'bg-[#007bff] text-white'}`, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, message.content)); const renderError = error && /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 my-2 bg-red-100 text-red-700 border border-red-400 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, error); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-lg rounded-xl p-6 shadow-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-xl text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Adventure JFPR: ", phaseTitles[currentPhase]), /*#__PURE__*/ React.createElement("div", { className: "min-h-[300px] p-4 border-[#ddd] border-2 space-y-2 overflow-auto", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, currentPhase === 0 && !messages.length && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block px-4 py-2 rounded-lg bg-[#007bff] text-white", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, phaseIntroduction)), messages.map(renderMessage), loading && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this }, "⏳"), renderError), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: userInput, onChange: handleUserInput, onKeyPress: handleKeyPress, placeholder: currentPhase < phases.length ? phases[currentPhase] : "Jogo concluído!", className: "w-full p-2 border-[#ddd] border-2 rounded-lg", disabled: currentPhase >= phases.length, autoFocus: true, __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: submitMessage, disabled: loading || currentPhase >= phases.length, className: "w-full mt-2 py-2 bg-[#007bff] text-white rounded-lg disabled:bg-[#999]", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Enviar"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } } .min-h-[300px] { animation: slideIn 0.5s ease-out; } [disabled] { animation: slideOut 0.5s ease-out forwards; } `)); }