"use client"; function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const chatContainerRef = React.useRef(null); const sendMessage = async ()=>{ if (!input.trim()) return; const newMessages = [ ...messages, { role: "user", content: input.trim() } ]; setMessages(newMessages); setInput(""); setLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "Tu eres un asistente de estudio bíblico y enseñanza del inglés. Trabajas con personas que hablan español y quieren aprender sobre la Biblia mientras practican y aprenden el idioma inglés. Tu propósito en generar conversaciones amenas sobre temas bíblicos y aprendizaje del inglés. Favor utiliza respuestas amables, breves y concisas. Siempre da tus respuestas en los 2 idiomas primero tu respuesta en inglés y luego en español. Incluye una breve explicación gramatical de tu respuesta destacando frases o palabras que consideres importantes. Para la explicación gramatical usa el idioma español. Si te preguntan sobre temas que no tienen nada que ver con el cristianismo ni con la Biblia ni con el aprendizaje del idioma inglés de manera amble indica que no puedes responder sobre eso. Si el usuario te escribe en inglés ayúdalo revisando la gramática de su escritura." }, ...newMessages ] }) }); if (!response.ok) { throw new Error("Error en la respuesta del servidor"); } const data = await response.json(); const assistantReply = data.choices[0].message.content; setMessages((prev)=>[ ...prev, { role: "assistant", content: assistantReply } ]); await fetch("https://hook.us1.make.com/lm690wavac5aq2meu40w275die5gsnsp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ incrementar_ejecuciones: "incrementa ejecuciones" }) }); } catch (error) { console.error("Error:", error); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Lo siento, hubo un error. Por favor intenta de nuevo." } ]); } finally{ setLoading(false); } }; React.useEffect(()=>{ if (chatContainerRef.current) { chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight; } }, [ messages ]); const formatMessage = (content)=>{ return content.split("\n").map((line, index)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: index, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, line, index < content.split("\n").length - 1 && /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 79, columnNumber: 52 }, __self: this }))); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-gray-100 p-2 sm:p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white rounded-lg shadow-lg mx-2 sm:mx-0", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 sm:p-4 bg-blue-100 text-center rounded-t-lg", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Chatbot de conversación libre"), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-md text-gray-700 mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Practica con nuestro profesor de IA. Puedes empezar con algo como:", " ", /*#__PURE__*/ React.createElement("i", { className: "font-bold text-xs sm:text-sm", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "I want to learn English and I want to know more about Jesus."), " ")), /*#__PURE__*/ React.createElement("div", { ref: chatContainerRef, id: "chat-container", className: "h-[300px] sm:h-[350px] overflow-y-auto p-3 sm:p-4 bg-blue-50", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, messages.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 mt-8", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments text-3xl mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "¡Comienza la conversación!")), messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-3 ${msg.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-3 rounded-lg max-w-[85%] sm:max-w-[80%] ${msg.role === "user" ? "bg-blue-500 text-white rounded-br-sm" : "bg-[#dcf8c6] text-gray-800 rounded-bl-sm"} shadow-sm`, __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm sm:text-base leading-relaxed", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, formatMessage(msg.content))))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#dcf8c6] rounded-lg p-3 shadow-sm", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-500 mr-2", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "Escribiendo...")))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-3 sm:p-4 border-t border-gray-300 bg-white rounded-b-lg", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chat-input", className: "flex-grow p-3 border border-gray-300 rounded-full mr-2 text-sm sm:text-base focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500", placeholder: "Escribe tu mensaje aquí...", value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: (e)=>e.key === "Enter" && !loading && sendMessage(), disabled: loading, __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed min-w-[48px]", onClick: sendMessage, disabled: loading || !input.trim(), __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-center items-center space-y-1 sm:space-y-0 sm:space-x-4 py-3 text-center", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-500 text-xs sm:text-sm hover:text-blue-600 transition-colors", target: "_self", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Volver a inglés con la biblia")))); }