Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Asistente Virtual</title> | |
| <style> | |
| body { font-family: system-ui, sans-serif; margin: 0; background: #f5f5f7; } | |
| #chat { max-width: 480px; margin: 40px auto; background: white; border-radius: 12px; | |
| box-shadow: 0 2px 12px rgba(0,0,0,.08); display: flex; flex-direction: column; height: 600px; } | |
| #messages { flex: 1; overflow-y: auto; padding: 16px; } | |
| .msg { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; max-width: 80%; line-height: 1.4; } | |
| .user { background: #2563eb; color: white; margin-left: auto; } | |
| .bot { background: #eee; color: #111; } | |
| #inputRow { display: flex; border-top: 1px solid #eee; padding: 10px; } | |
| #question { flex: 1; border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; } | |
| #send { margin-left: 8px; background: #2563eb; color: white; border: none; | |
| border-radius: 8px; padding: 8px 16px; cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chat"> | |
| <div id="messages"></div> | |
| <div id="inputRow"> | |
| <input id="question" placeholder="Escribe tu pregunta..." /> | |
| <button id="send">Enviar</button> | |
| </div> | |
| </div> | |
| <script> | |
| const BACKEND_URL = "https://tyria-chatbot-backend.vercel.app/api/chat"; | |
| const messagesEl = document.getElementById("messages"); | |
| const input = document.getElementById("question"); | |
| const sendBtn = document.getElementById("send"); | |
| function addMessage(text, sender) { | |
| const div = document.createElement("div"); | |
| div.className = `msg ${sender}`; | |
| div.textContent = text; | |
| messagesEl.appendChild(div); | |
| messagesEl.scrollTop = messagesEl.scrollHeight; | |
| } | |
| async function sendQuestion() { | |
| const question = input.value.trim(); | |
| if (!question) return; | |
| addMessage(question, "user"); | |
| input.value = ""; | |
| addMessage("Escribiendo...", "bot"); | |
| try { | |
| const resp = await fetch(BACKEND_URL, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ question }), | |
| }); | |
| const data = await resp.json(); | |
| messagesEl.lastChild.textContent = data.answer || "No pude responder eso."; | |
| } catch (e) { | |
| messagesEl.lastChild.textContent = "Error de conexión. Intenta de nuevo."; | |
| } | |
| } | |
| sendBtn.addEventListener("click", sendQuestion); | |
| input.addEventListener("keydown", (e) => { if (e.key === "Enter") sendQuestion(); }); | |
| </script> | |
| </body> | |
| </html> |