|
| 1 | +// Selecciona los elementos del DOM |
| 2 | +const messagesDiv = document.getElementById('messages'); |
| 3 | +const messageInput = document.getElementById('message-input'); |
| 4 | +const sendButton = document.getElementById('send-button'); |
| 5 | +const usernameDialog = document.getElementById('db-dialog'); |
| 6 | +const usernameInput = document.getElementById('db-input'); |
| 7 | +const confirmUsernameButton = document.getElementById('db-username'); |
| 8 | +const chatContainer = document.getElementById('chat-container'); |
| 9 | + |
| 10 | +let username = ''; |
| 11 | + |
| 12 | +// Función para agregar mensajes al chat |
| 13 | +function addMessageToChat(message, className) { |
| 14 | + const p = document.createElement('p'); |
| 15 | + p.className = className; |
| 16 | + p.textContent = message; |
| 17 | + messagesDiv.appendChild(p); |
| 18 | + messagesDiv.scrollTop = messagesDiv.scrollHeight; // Scroll al final del chat |
| 19 | +} |
| 20 | + |
| 21 | +// Función para mostrar el cuadro de diálogo del nombre de usuario |
| 22 | +function showUsernameDialog() { |
| 23 | + usernameDialog.style.display = 'flex'; |
| 24 | +} |
| 25 | + |
| 26 | +// Función para ocultar el cuadro de diálogo y mostrar el chat |
| 27 | +function hideUsernameDialog() { |
| 28 | + usernameDialog.style.display = 'none'; |
| 29 | + chatContainer.style.display = 'block'; |
| 30 | +} |
| 31 | + |
| 32 | +// Evento de clic en el botón "Confirmar" para el nombre de usuario |
| 33 | +confirmUsernameButton.addEventListener('click', () => { |
| 34 | + const enteredUsername = usernameInput.value.trim(); |
| 35 | + |
| 36 | + if (enteredUsername) { |
| 37 | + const initdb = enteredUsername; // Guardamos el nombre de usuario |
| 38 | + const requestBody = { |
| 39 | + Item: initdb |
| 40 | + } |
| 41 | + fetch('http://127.0.0.1:8080/init_item', { |
| 42 | + method: 'POST', |
| 43 | + headers: { |
| 44 | + 'Content-Type': 'application/json' |
| 45 | + }, |
| 46 | + body: JSON.stringify(requestBody) |
| 47 | + }).then((response) => { |
| 48 | + if (!response.ok) { // Verifica si la respuesta no fue exitosa (status >= 400) |
| 49 | + return response.json().then(err => { |
| 50 | + throw new Error(`Error ${response.status}: ${err.detail || 'Error desconocido'}`); |
| 51 | + }); |
| 52 | + } |
| 53 | + return response.json(); |
| 54 | + }) // convertir a json |
| 55 | + .then((json) => { |
| 56 | + hideUsernameDialog() |
| 57 | + localStorage.setItem('db', initdb) |
| 58 | + addMessageToChat(`Conexion establesida a la base de datos: ${json.payload}`, 'api-response'); |
| 59 | + }) //imprimir los datos en la consola |
| 60 | + .catch((err) => { |
| 61 | + console.log('Solicitud fallida', err) |
| 62 | + alert('Error en la conexios revisa que el url este bien') |
| 63 | + }); // Capturar errores |
| 64 | + |
| 65 | + } |
| 66 | +}); |
| 67 | + |
| 68 | +// Evento de clic en el botón "Enviar" |
| 69 | +sendButton.addEventListener('click', async () => { |
| 70 | + const message = messageInput.value; |
| 71 | + |
| 72 | + if (message.trim() === '') { |
| 73 | + return; // Si el mensaje está vacío, no hacemos nada |
| 74 | + } |
| 75 | + |
| 76 | + // Agregar el mensaje del usuario al chat |
| 77 | + addMessageToChat(`${username}: ${message}`, 'user-message'); |
| 78 | + |
| 79 | + // Limpiar el input después de enviar el mensaje |
| 80 | + messageInput.value = ''; |
| 81 | + |
| 82 | + // Crear el cuerpo de la solicitud |
| 83 | + const requestBody = { |
| 84 | + Item: localStorage.getItem('db'), |
| 85 | + q: message |
| 86 | + }; |
| 87 | + |
| 88 | + try { |
| 89 | + // Enviar el mensaje al endpoint '/inference' usando fetch |
| 90 | + const response = await fetch('http://127.0.0.1:8080/inference', { |
| 91 | + method: 'POST', |
| 92 | + headers: { |
| 93 | + 'Content-Type': 'application/json' |
| 94 | + }, |
| 95 | + body: JSON.stringify(requestBody) |
| 96 | + }); |
| 97 | + |
| 98 | + // Verificar si la respuesta es exitosa |
| 99 | + if (response.ok) { |
| 100 | + const jsonResponse = await response.json(); |
| 101 | + const apiResponse = jsonResponse.res; // Suponiendo que el backend devuelve una respuesta en el campo "response" |
| 102 | + const sql_query_generated = jsonResponse.sql_query_generated |
| 103 | + // Agregar la respuesta de la API al chat |
| 104 | + addMessageToChat(`Respuesta: ${JSON.stringify(apiResponse)}`, 'api-response'); |
| 105 | + addMessageToChat(`Consulta SQL generada: ${sql_query_generated}`, 'api-response'); |
| 106 | + |
| 107 | + } else { |
| 108 | + addMessageToChat('Error al conectarse con la API', 'api-response'); |
| 109 | + } |
| 110 | + } catch (error) { |
| 111 | + console.error('Error:', error); |
| 112 | + addMessageToChat('Error al enviar el mensaje', 'api-response'); |
| 113 | + } |
| 114 | +}); |
| 115 | + |
| 116 | +// Mostrar el cuadro de diálogo del nombre de usuario al cargar la página |
| 117 | +showUsernameDialog(); |
0 commit comments