pruebalol 0.0.1-security → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of pruebalol might be problematic. Click here for more details.
- package/package.json +36 -4
- package/src/Public/Imagenes/asist.jpg +0 -0
- package/src/Public/css/estilos.css +433 -0
- package/src/Public/index.html +177 -0
- package/src/Public/js/clean_chat_mysql.js +99 -0
- package/src/Public/js/correction.js +86 -0
- package/src/Public/js/emojis.js +0 -0
- package/src/Public/js/loby.js +32 -0
- package/src/Public/js/main.js +117 -0
- package/src/Public/web components/rasa component.js +89 -0
- package/src/Public/web components/recognition component.js +172 -0
- package/src/index.js +82 -0
- package/src/sockets.js +124 -0
- package/README.md +0 -5
@@ -0,0 +1,99 @@
|
|
1
|
+
const socket = io();
|
2
|
+
//Obteniendo los elementos del from
|
3
|
+
const $messageForm = $('#message-form');
|
4
|
+
const $messageBox = $('#message');
|
5
|
+
const $chat = $('#chat');
|
6
|
+
const $clearChatButton = $('#clear-chat');
|
7
|
+
const $toggleDarkModeButton = $('#toggle-dark-mode');
|
8
|
+
const $menuButton = $('#menu-button');
|
9
|
+
const $menu = $('#menu');
|
10
|
+
const $clearChatButtonToMove = $('#clear-chat');
|
11
|
+
$clearChatButton.click(function() {
|
12
|
+
// Eliminar atributo de datos para permitir la creación de nuevos botones de confirmación
|
13
|
+
$clearChatButton.removeData('confirm-buttons');
|
14
|
+
|
15
|
+
// Verificar si los botones de confirmación ya están presentes
|
16
|
+
if (!$clearChatButton.data('confirm-buttons')) {
|
17
|
+
// Eliminar botones de confirmación anteriores
|
18
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
19
|
+
|
20
|
+
// Agregar botones de confirmación
|
21
|
+
$clearChatButton.append('<div class="clear-chat-confirm flex">' +
|
22
|
+
'<button id="clear-chat-yes" class="bg-transparent ml-12">' +
|
23
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block align-middle mr-2" viewBox="0 0 20 20" fill="currentColor">' +
|
24
|
+
'<path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>' +
|
25
|
+
'</svg>' +
|
26
|
+
'</button>' +
|
27
|
+
'<button id="clear-chat-no" class="bg-transparent ml-2">' +
|
28
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block align-middle mr-2" viewBox="0 0 20 20" fill="currentColor">' +
|
29
|
+
'<path fill-rule="evenodd" d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm2.12 9.88a1 1 0 1 1-1.41 1.41L10 11.41l-1.71 1.71a1 1 0 1 1-1.41-1.41L8.59 10l-1.7-1.71a1 1 0 1 1 1.41-1.41L10 8.59l1.71-1.71a1 1 0 0 1 1.41 1.41L11.41 10l1.71 1.71z" clip-rule="evenodd"/>' +
|
30
|
+
'</svg>' +
|
31
|
+
'</button>' +
|
32
|
+
'</div>');
|
33
|
+
|
34
|
+
// Establecer el atributo de datos para indicar que los botones ya están presentes
|
35
|
+
$clearChatButton.data('confirm-buttons', true);
|
36
|
+
}
|
37
|
+
|
38
|
+
// Mostrar botones de confirmación y ocultar ícono
|
39
|
+
$clearChatButton.find('.clear-chat-confirm').show();
|
40
|
+
$clearChatButton.find('.clear-chat-icon').hide();
|
41
|
+
|
42
|
+
// Eliminar eventos click anteriores
|
43
|
+
$('#clear-chat-yes, #clear-chat-no').off('click');
|
44
|
+
|
45
|
+
// Agregar eventos a los botones de confirmación
|
46
|
+
$('#clear-chat-yes').click(function() {
|
47
|
+
$chat.empty();
|
48
|
+
socket.emit('clear messages');
|
49
|
+
// Ocultar botones de confirmación y mostrar ícono de confirmación
|
50
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
51
|
+
$clearChatButton.find('.clear-chat-icon.success').show();
|
52
|
+
|
53
|
+
// Eliminar botones de confirmación
|
54
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
55
|
+
});
|
56
|
+
|
57
|
+
$('#clear-chat-no').click(function() {
|
58
|
+
// Ocultar botones de confirmación y mostrar ícono de cancelación
|
59
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
60
|
+
$clearChatButton.find('.clear-chat-icon.cancel').show();
|
61
|
+
|
62
|
+
// Eliminar botones de confirmación
|
63
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
64
|
+
});
|
65
|
+
|
66
|
+
$('#clear-chat-yes').click(function() {
|
67
|
+
const chatTemplate = document.getElementById('chat-template');
|
68
|
+
const chatElement = chatTemplate.content.cloneNode(true).querySelector('#chat');
|
69
|
+
const chatContainer = document.getElementById('chat-container');
|
70
|
+
chatContainer.textContent = ''; // Limpia el contenido actual del contenedor de chat
|
71
|
+
// Asumiendo que "message" contiene el contenido del mensaje recibido
|
72
|
+
$chat.prepend('<div class="message">' + message + '</div>');
|
73
|
+
// Agrega el nuevo chat clonado al principio del contenedor
|
74
|
+
socket.emit('clear messages');
|
75
|
+
|
76
|
+
// Ocultar botones de confirmación y mostrar ícono de confirmación
|
77
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
78
|
+
$clearChatButton.find('.clear-chat-icon.success').show();
|
79
|
+
|
80
|
+
// Esperar un segundo antes de eliminar los botones de confirmación
|
81
|
+
setTimeout(function() {
|
82
|
+
// Eliminar botones de confirmación
|
83
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
84
|
+
}, 1000);
|
85
|
+
});
|
86
|
+
|
87
|
+
$('#clear-chat-no').click(function() {
|
88
|
+
|
89
|
+
// Ocultar botones de confirmación y mostrar ícono de confirmación
|
90
|
+
$clearChatButton.find('.clear-chat-confirm').hide();
|
91
|
+
$clearChatButton.find('.clear-chat-icon.success').show();
|
92
|
+
|
93
|
+
// Esperar un segundo antes de eliminar los botones de confirmación
|
94
|
+
setTimeout(function() {
|
95
|
+
// Eliminar botones de confirmación
|
96
|
+
$clearChatButton.find('.clear-chat-confirm').remove();
|
97
|
+
}, 500);
|
98
|
+
});
|
99
|
+
});
|
@@ -0,0 +1,86 @@
|
|
1
|
+
/*let lastWord = '';
|
2
|
+
let skippedWords = [];
|
3
|
+
|
4
|
+
function checkSpelling(event) {
|
5
|
+
const message = document.getElementById('message').value;
|
6
|
+
const words = message.split(' ');
|
7
|
+
const currentWord = words[words.length - 1];
|
8
|
+
|
9
|
+
if (lastWord !== '' && (currentWord === lastWord || event.keyCode === 32)) {
|
10
|
+
return;
|
11
|
+
}
|
12
|
+
|
13
|
+
const xhr = new XMLHttpRequest();
|
14
|
+
xhr.open('POST', '/check-spelling', true);
|
15
|
+
xhr.setRequestHeader('Content-Type', 'application/json');
|
16
|
+
xhr.onreadystatechange = function() {
|
17
|
+
if (xhr.readyState === 4 && xhr.status === 200) {
|
18
|
+
const suggestions = JSON.parse(xhr.responseText);
|
19
|
+
showSuggestions(suggestions, event);
|
20
|
+
if (event.keyCode !== 32) {
|
21
|
+
lastWord = currentWord;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
};
|
25
|
+
xhr.send(JSON.stringify({ message }));
|
26
|
+
}
|
27
|
+
|
28
|
+
function showSuggestions(suggestions, event) {
|
29
|
+
const suggestionsList = document.getElementById('suggestions');
|
30
|
+
suggestionsList.innerHTML = '';
|
31
|
+
const currentMessage = document.getElementById('message').value;
|
32
|
+
const words = currentMessage.split(' ');
|
33
|
+
const lastEnteredWord = words[words.length - 1];
|
34
|
+
|
35
|
+
if ((lastEnteredWord !== lastWord || event.keyCode === 32) && lastEnteredWord.length > 0 && suggestions.length > 0) {
|
36
|
+
suggestionsList.classList.remove('hidden');
|
37
|
+
suggestions.forEach((suggestion) => {
|
38
|
+
if (suggestion !== lastEnteredWord && suggestion !== lastWord && !skippedWords.includes(suggestion)) {
|
39
|
+
const suggestionLi = document.createElement('li');
|
40
|
+
suggestionLi.innerText = suggestion;
|
41
|
+
suggestionLi.addEventListener('click', function() {
|
42
|
+
selectSuggestion(suggestion);
|
43
|
+
});
|
44
|
+
suggestionsList.appendChild(suggestionLi);
|
45
|
+
}
|
46
|
+
});
|
47
|
+
lastWord = lastEnteredWord;
|
48
|
+
} else {
|
49
|
+
suggestionsList.classList.add('hidden');
|
50
|
+
}
|
51
|
+
|
52
|
+
// Eliminar las palabras omitidas de la lista de sugerencias
|
53
|
+
skippedWords.forEach((skippedWord) => {
|
54
|
+
const suggestionToRemove = suggestionsList.querySelector(`li:not(.hidden):not(.selected):not(.removed)[innerText="${skippedWord}"]`);
|
55
|
+
if (suggestionToRemove) {
|
56
|
+
suggestionToRemove.classList.add('removed');
|
57
|
+
}
|
58
|
+
});
|
59
|
+
}
|
60
|
+
|
61
|
+
function selectSuggestion(suggestion) {
|
62
|
+
const messageInput = document.getElementById('message');
|
63
|
+
const currentMessage = messageInput.value;
|
64
|
+
const startIndex = currentMessage.lastIndexOf(' ') + 1;
|
65
|
+
const newMessage = currentMessage.substring(0, startIndex) + suggestion;
|
66
|
+
messageInput.value = newMessage;
|
67
|
+
document.getElementById('suggestions').innerHTML = '';
|
68
|
+
|
69
|
+
const suggestionsList = document.getElementById('suggestions');
|
70
|
+
const selectedSuggestion = suggestionsList.querySelector(`li:not(.hidden).selected`);
|
71
|
+
if (selectedSuggestion && selectedSuggestion.innerText === suggestion) {
|
72
|
+
skippedWords.push(suggestion);
|
73
|
+
}
|
74
|
+
suggestionsList.removeChild(selectedSuggestion);
|
75
|
+
|
76
|
+
}
|
77
|
+
|
78
|
+
const messageInput = document.getElementById('message');
|
79
|
+
messageInput.addEventListener('keydown', function(event) {
|
80
|
+
checkSpelling(event);
|
81
|
+
if (event.keyCode === 32) {
|
82
|
+
document.getElementById('suggestions').innerHTML = '';
|
83
|
+
skippedWords.length = 0;
|
84
|
+
}
|
85
|
+
});
|
86
|
+
*/
|
File without changes
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// Obtener los contenedores de la introducción y del chat
|
2
|
+
var introContainer = document.getElementById("intro-container");
|
3
|
+
var chatContainer = document.getElementById("modoTotal");
|
4
|
+
var Helpmebtn = document.getElementById("clear-chat");
|
5
|
+
|
6
|
+
Helpmebtn.setAttribute("disabled", "");
|
7
|
+
|
8
|
+
var enChat = false;
|
9
|
+
|
10
|
+
const newConversationButton = document.getElementById("menu-button");
|
11
|
+
|
12
|
+
newConversationButton.addEventListener("click", () => {
|
13
|
+
if (enChat) {
|
14
|
+
chatContainer.style.display = "none";
|
15
|
+
introContainer.style.display = "block";
|
16
|
+
Helpmebtn.setAttribute("disabled", "");
|
17
|
+
newConversationButton.innerHTML = `<svg class="w-4 text-gray-500 inline-block mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
18
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
19
|
+
</svg> Iniciar conversación`;
|
20
|
+
enChat = false;
|
21
|
+
} else {
|
22
|
+
chatContainer.style.display = "block";
|
23
|
+
introContainer.style.display = "none";
|
24
|
+
Helpmebtn.removeAttribute("disabled");
|
25
|
+
newConversationButton.innerHTML = `
|
26
|
+
<svg id="Lobyr" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 text-gray-500" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
27
|
+
<path stroke="currentColor" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
28
|
+
</svg>
|
29
|
+
Regresar`;
|
30
|
+
enChat = true;
|
31
|
+
}
|
32
|
+
});
|
@@ -0,0 +1,117 @@
|
|
1
|
+
$(document).ready(function() {
|
2
|
+
const socket = io();
|
3
|
+
|
4
|
+
const $messageForm = $('#message-form');
|
5
|
+
const $messageBox = $('#message');
|
6
|
+
const $chat = $('#chat');
|
7
|
+
const $clearChatButton = $('#clear-chat');
|
8
|
+
const $toggleDarkModeButton = $('#toggle-dark-mode');
|
9
|
+
const $menuButton = $('#menu-button');
|
10
|
+
const $menu = $('#menu');
|
11
|
+
const $clearChatButtonToMove = $('#clear-chat');
|
12
|
+
|
13
|
+
const sunIcon = document.getElementById("sun");
|
14
|
+
const moonIcon = document.getElementById("moon");
|
15
|
+
|
16
|
+
sunIcon.classList.add("hidden");
|
17
|
+
// Eventos
|
18
|
+
$('#toggle-dark-mode').click(function() {
|
19
|
+
$('body').toggleClass('dark-mode');
|
20
|
+
if ($('body').hasClass('dark-mode')) {
|
21
|
+
$('#dark-mode-text').text('Modo claro');
|
22
|
+
sunIcon.style.display = "block";
|
23
|
+
moonIcon.style.display = "none";
|
24
|
+
} else {
|
25
|
+
$('#dark-mode-text').text('Modo oscuro');
|
26
|
+
sunIcon.style.display = "none";
|
27
|
+
moonIcon.style.display = "block";
|
28
|
+
}
|
29
|
+
});
|
30
|
+
|
31
|
+
$menuButton.click(function() {
|
32
|
+
$menu.slideToggle('fast', function() {
|
33
|
+
const marginTop = $menu.is(':visible') ? $menu.height() + 20 : 0;
|
34
|
+
$clearChatButtonToMove.css('margin-top', marginTop);
|
35
|
+
});
|
36
|
+
});
|
37
|
+
|
38
|
+
$(window).resize(function() {
|
39
|
+
const marginTop = $menu.is(':visible') ? $menu.height() + 20 : 0;
|
40
|
+
$clearChatButtonToMove.css('margin-top', marginTop);
|
41
|
+
});
|
42
|
+
|
43
|
+
socket.on('clear messages', function() {
|
44
|
+
$chat.empty();
|
45
|
+
})
|
46
|
+
|
47
|
+
const scrollDownBtn = document.getElementById('scrollDownBtn');
|
48
|
+
const chatContainer = document.getElementById('chat');
|
49
|
+
|
50
|
+
scrollDownBtn.addEventListener('click', () => {
|
51
|
+
chatContainer.scrollTo({ top: chatContainer.scrollHeight, behavior: 'smooth' });
|
52
|
+
checkScrollPosition();
|
53
|
+
});
|
54
|
+
|
55
|
+
function checkScrollPosition() {
|
56
|
+
const isAtBottom = chatContainer.scrollTop === (chatContainer.scrollHeight - chatContainer.clientHeight);
|
57
|
+
if (isAtBottom) {
|
58
|
+
scrollDownBtn.style.display = 'none';
|
59
|
+
} else {
|
60
|
+
scrollDownBtn.style.display = 'block';
|
61
|
+
}
|
62
|
+
}
|
63
|
+
chatContainer.addEventListener('scroll', () => {
|
64
|
+
checkScrollPosition();
|
65
|
+
});
|
66
|
+
|
67
|
+
|
68
|
+
//
|
69
|
+
////
|
70
|
+
////WEB COMPONENT DEL FILTRO DE BUSQUEDA DE CONVERSACIÓN
|
71
|
+
////
|
72
|
+
//
|
73
|
+
|
74
|
+
//BUSQUEDA DE CONVERSACIÓN
|
75
|
+
const searchInput = document.getElementById('search-input');
|
76
|
+
const messages = document.getElementsByClassName('message-text');
|
77
|
+
const messageContainer = document.getElementById('message-container');
|
78
|
+
const originalMessages = Array.from(messages);
|
79
|
+
const noResultsMessage = document.getElementById('no-results');
|
80
|
+
|
81
|
+
searchInput.addEventListener('input', function() {
|
82
|
+
const searchTerm = searchInput.value.toLowerCase();
|
83
|
+
let hasResults = false;
|
84
|
+
|
85
|
+
for (let i = 0; i < messages.length; i++) {
|
86
|
+
const messageText = messages[i].textContent.toLowerCase();
|
87
|
+
|
88
|
+
if (messageText.includes(searchTerm)) {
|
89
|
+
messages[i].classList.remove('hidden');
|
90
|
+
hasResults = true;
|
91
|
+
} else {
|
92
|
+
messages[i].classList.add('hidden');
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
if (!hasResults) {
|
97
|
+
noResultsMessage.classList.remove('hidden');
|
98
|
+
} else {
|
99
|
+
noResultsMessage.classList.add('hidden');
|
100
|
+
}
|
101
|
+
});
|
102
|
+
searchInput.addEventListener('keyup', function(event) {
|
103
|
+
if (event.keyCode === 27 || event.code === 'Escape') {
|
104
|
+
searchInput.value = '';
|
105
|
+
for (let i = 0; i < originalMessages.length; i++) {
|
106
|
+
originalMessages[i].classList.remove('hidden');
|
107
|
+
}
|
108
|
+
|
109
|
+
noResultsMessage.classList.add('hidden');
|
110
|
+
}
|
111
|
+
});
|
112
|
+
//
|
113
|
+
////
|
114
|
+
////WEB COMPONENT DEL FILTRO DE BUSQUEDA DE CONVERSACIÓN
|
115
|
+
////
|
116
|
+
//
|
117
|
+
});
|
@@ -0,0 +1,89 @@
|
|
1
|
+
class ChatComponent extends HTMLElement {
|
2
|
+
constructor() {
|
3
|
+
super();
|
4
|
+
|
5
|
+
const template = document.querySelector('#chat-template');
|
6
|
+
const content = template.content.cloneNode(true);
|
7
|
+
this.appendChild(content);
|
8
|
+
|
9
|
+
const chatContainer = this.querySelector('#chat-container');
|
10
|
+
const scrollDownButton = this.querySelector('#scrollDownBtn');
|
11
|
+
|
12
|
+
scrollDownButton.addEventListener('click', () => {
|
13
|
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
14
|
+
});
|
15
|
+
|
16
|
+
// Listen for new user messages and add them to the chat
|
17
|
+
socket.on('new user message', function(data) {
|
18
|
+
const now = new Date();
|
19
|
+
const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
|
20
|
+
|
21
|
+
const messageContainer = document.createElement('div');
|
22
|
+
messageContainer.classList.add('flex', 'flex-col', 'message-text');
|
23
|
+
|
24
|
+
const userMessage = document.createElement('div');
|
25
|
+
userMessage.classList.add('bg-blue-500', 'p-6', 'w-96', 'rounded-3xl', 'rounded-br-none', 'self-end');
|
26
|
+
userMessage.innerHTML = `
|
27
|
+
<small class="text-white rounded font-light">${data.message}</small>
|
28
|
+
`;
|
29
|
+
|
30
|
+
const userMessageTime = document.createElement('small');
|
31
|
+
userMessageTime.classList.add('text-gray-500', 'font-light', 'self-end');
|
32
|
+
userMessageTime.textContent = time;
|
33
|
+
|
34
|
+
messageContainer.appendChild(userMessage);
|
35
|
+
messageContainer.appendChild(userMessageTime);
|
36
|
+
|
37
|
+
chatContainer.appendChild(messageContainer);
|
38
|
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
39
|
+
});
|
40
|
+
|
41
|
+
// Listen for new bot messages and add them to the chat
|
42
|
+
// ...
|
43
|
+
|
44
|
+
// Listen for new bot messages and add them to the chat
|
45
|
+
socket.on('new bot message', function(data) {
|
46
|
+
const now = new Date();
|
47
|
+
const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
|
48
|
+
|
49
|
+
const messageContainer = document.createElement('div');
|
50
|
+
messageContainer.classList.add('flex', 'flex-col', 'message-text');
|
51
|
+
|
52
|
+
if (data.error) {
|
53
|
+
const botErrorMessage = document.createElement('div');
|
54
|
+
botErrorMessage.classList.add('bg-gray-200', 'p-6', 'w-96', 'rounded-3xl', 'rounded-bl-none', 'self-start');
|
55
|
+
botErrorMessage.innerHTML = `
|
56
|
+
<small class="text-black rounded font-light">${data.message}</small>
|
57
|
+
`;
|
58
|
+
|
59
|
+
const botErrorMessageTime = document.createElement('small');
|
60
|
+
botErrorMessageTime.classList.add('text-gray-500', 'font-light', 'self-start');
|
61
|
+
botErrorMessageTime.textContent = time;
|
62
|
+
|
63
|
+
messageContainer.appendChild(botErrorMessage);
|
64
|
+
messageContainer.appendChild(botErrorMessageTime);
|
65
|
+
} else {
|
66
|
+
const botMessageContainer = document.createElement('div');
|
67
|
+
botMessageContainer.classList.add('flex', 'flex-col', 'items-start');
|
68
|
+
|
69
|
+
const botMessage = document.createElement('div');
|
70
|
+
botMessage.classList.add('bg-gray-300', 'p-6', 'w-96', 'rounded-3xl', 'rounded-bl-none', 'self-start', 'text-gray-600', 'rounded', 'font-light', 'message-text');
|
71
|
+
botMessage.textContent = data.message;
|
72
|
+
|
73
|
+
const botMessageTime = document.createElement('small');
|
74
|
+
botMessageTime.classList.add('text-gray-500', 'font-light', 'self-start');
|
75
|
+
botMessageTime.textContent = time;
|
76
|
+
|
77
|
+
botMessageContainer.appendChild(botMessage);
|
78
|
+
botMessageContainer.appendChild(botMessageTime);
|
79
|
+
|
80
|
+
messageContainer.appendChild(botMessageContainer);
|
81
|
+
}
|
82
|
+
|
83
|
+
chatContainer.appendChild(messageContainer);
|
84
|
+
chatContainer.scrollTop = chatContainer.scrollHeight;
|
85
|
+
});
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
customElements.define('chat-component', ChatComponent);
|
@@ -0,0 +1,172 @@
|
|
1
|
+
//
|
2
|
+
////
|
3
|
+
////WEB COMPONENT DEL envio de mensajes
|
4
|
+
////
|
5
|
+
//
|
6
|
+
document.addEventListener('DOMContentLoaded', function() {
|
7
|
+
$(document).ready(function() {
|
8
|
+
class MessageBox extends HTMLElement {
|
9
|
+
constructor() {
|
10
|
+
super();
|
11
|
+
const template = document.getElementById('message-box-template');
|
12
|
+
const content = template.content.cloneNode(true);
|
13
|
+
this.attachShadow({ mode: 'open' }).appendChild(content);
|
14
|
+
this.messageInput = this.shadowRoot.querySelector('#message');
|
15
|
+
this.messageForm = this.shadowRoot.querySelector('#message-form');
|
16
|
+
this.messageBoxKeyPress = this.messageBoxKeyPress.bind(this);
|
17
|
+
this.messageFormSubmit = this.messageFormSubmit.bind(this);
|
18
|
+
this.btnSend = this.shadowRoot.querySelector('#btnSend');
|
19
|
+
this.btnSend.addEventListener('click', this.messageFormSubmit);
|
20
|
+
|
21
|
+
const recognition = new webkitSpeechRecognition();
|
22
|
+
recognition.lang = 'es-ES';
|
23
|
+
recognition.continuous = true;
|
24
|
+
recognition.interimResults = false;
|
25
|
+
|
26
|
+
const btnStartStopRecord = this.shadowRoot.getElementById('btn2');
|
27
|
+
const recognitionText = this.shadowRoot.getElementById('recognition');
|
28
|
+
const recordingStatus = this.shadowRoot.getElementById('recording-status');
|
29
|
+
const microIcon = this.shadowRoot.getElementById('micro');
|
30
|
+
const pauseIcon = this.shadowRoot.getElementById('pause');
|
31
|
+
|
32
|
+
|
33
|
+
let isRecording = false;
|
34
|
+
let recognizedMessage = '';
|
35
|
+
|
36
|
+
recognition.onstart = () => {
|
37
|
+
// Comprobar si los elementos están presentes antes de acceder a sus propiedades
|
38
|
+
if (recordingStatus && microIcon && pauseIcon) {
|
39
|
+
// Crear el contexto de audio
|
40
|
+
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
41
|
+
|
42
|
+
// Crear el nodo oscilador
|
43
|
+
const oscillator = audioCtx.createOscillator();
|
44
|
+
oscillator.type = 'sine'; // Cambiar el tipo de onda
|
45
|
+
oscillator.frequency.value = 600; // Cambiar la frecuencia
|
46
|
+
|
47
|
+
// Conectar el nodo oscilador a la salida de audio
|
48
|
+
oscillator.connect(audioCtx.destination);
|
49
|
+
|
50
|
+
// Iniciar la oscilación
|
51
|
+
oscillator.start();
|
52
|
+
|
53
|
+
// Detener la oscilación después de 1 segundo
|
54
|
+
setTimeout(() => {
|
55
|
+
oscillator.stop();
|
56
|
+
}, 200);
|
57
|
+
|
58
|
+
// Resto del código de inicio de grabación
|
59
|
+
this.messageInput.style.display = 'none';
|
60
|
+
recordingStatus.classList.add('recording');
|
61
|
+
recordingStatus.innerText = 'Grabando...';
|
62
|
+
microIcon.classList.add('hidden');
|
63
|
+
pauseIcon.classList.remove('hidden');
|
64
|
+
}
|
65
|
+
new Notification('Grabación iniciada', {
|
66
|
+
body: 'Comenzó la grabación de voz.'
|
67
|
+
});
|
68
|
+
};
|
69
|
+
|
70
|
+
recognition.onresult = (event) => {
|
71
|
+
const results = event.results;
|
72
|
+
const frase = results[results.length - 1][0].transcript;
|
73
|
+
this.messageInput.value += frase;
|
74
|
+
recognizedMessage += frase;
|
75
|
+
};
|
76
|
+
|
77
|
+
recognition.onend = () => {
|
78
|
+
// Comprobar si los elementos están presentes antes de acceder a sus propiedades
|
79
|
+
if (recordingStatus && microIcon && pauseIcon) {
|
80
|
+
// Mostrar el cuadro de texto y ocultar la animació
|
81
|
+
this.messageInput.style.display = 'block';
|
82
|
+
recordingStatus.classList.remove('recording');
|
83
|
+
recordingStatus.innerText = '';
|
84
|
+
microIcon.classList.remove('hidden');
|
85
|
+
pauseIcon.classList.add('hidden');
|
86
|
+
};
|
87
|
+
new Notification('Grabación finalizada', {
|
88
|
+
body: 'Se detuvo la grabación de voz.'
|
89
|
+
});
|
90
|
+
}
|
91
|
+
|
92
|
+
btnStartStopRecord.addEventListener('click', () => {
|
93
|
+
if (!isRecording) {
|
94
|
+
recognition.start();
|
95
|
+
isRecording = true;
|
96
|
+
btnStartStopRecord.classList.add('active');
|
97
|
+
} else {
|
98
|
+
if (isRecording) {
|
99
|
+
recognition.stop();
|
100
|
+
isRecording = false;
|
101
|
+
btnStartStopRecord.classList.remove('active');
|
102
|
+
}
|
103
|
+
}
|
104
|
+
});
|
105
|
+
|
106
|
+
this.messageInput.addEventListener('input', function() {
|
107
|
+
const regex = /[\u{1F300}-\u{1F5FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}]/gu;
|
108
|
+
if (regex.test(this.value)) {
|
109
|
+
this.value = this.value.replace(regex, '');
|
110
|
+
try {
|
111
|
+
const notification = new Notification('ADVERTENCIA!', {
|
112
|
+
body: 'No se permiten emoticones en el mensaje'
|
113
|
+
});
|
114
|
+
} catch (err) {
|
115
|
+
console.log('No se pudo mostrar la notificación:', err);
|
116
|
+
}
|
117
|
+
|
118
|
+
} else {
|
119
|
+
|
120
|
+
}
|
121
|
+
});
|
122
|
+
|
123
|
+
this.messageForm.addEventListener('submit', function(event) {
|
124
|
+
const regex = /[\u{1F300}-\u{1F5FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F600}-\u{1F64F}\u{1F680}-\u{1F6FF}]/gu;
|
125
|
+
if (regex.test(this.messageInput.value)) {
|
126
|
+
event.preventDefault();
|
127
|
+
try {
|
128
|
+
const notification = new Notification('Error', {
|
129
|
+
body: 'No se permiten emoticones en el mensaje'
|
130
|
+
});
|
131
|
+
} catch (err) {
|
132
|
+
console.log('No se pudo mostrar la notificación:', err);
|
133
|
+
}
|
134
|
+
}
|
135
|
+
});
|
136
|
+
|
137
|
+
}
|
138
|
+
connectedCallback() {
|
139
|
+
this.messageInput.addEventListener('keypress', this.messageBoxKeyPress);
|
140
|
+
}
|
141
|
+
|
142
|
+
disconnectedCallback() {
|
143
|
+
this.messageInput.removeEventListener('keypress', this.messageBoxKeyPress);
|
144
|
+
this.btnSend.removeEventListener('click', this.messageFormSubmit);
|
145
|
+
}
|
146
|
+
|
147
|
+
messageBoxKeyPress(event) {
|
148
|
+
if (event.keyCode === 13) {
|
149
|
+
event.preventDefault();
|
150
|
+
this.messageFormSubmit(event);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
messageFormSubmit(event) {
|
155
|
+
event.preventDefault();
|
156
|
+
const message = this.messageInput.value.trim();
|
157
|
+
if (message !== '') {
|
158
|
+
socket.emit('Send message', message);
|
159
|
+
this.messageInput.value = '';
|
160
|
+
}
|
161
|
+
}
|
162
|
+
}
|
163
|
+
|
164
|
+
customElements.define('message-box', MessageBox);
|
165
|
+
//
|
166
|
+
////
|
167
|
+
////WEB COMPONENT FIN
|
168
|
+
////
|
169
|
+
//
|
170
|
+
// Código para crear la clase MessageBox y registrarla como un elemento personalizado.
|
171
|
+
});
|
172
|
+
});
|
package/src/index.js
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
const express = require('express');
|
2
|
+
const app = express();
|
3
|
+
const http = require('http');
|
4
|
+
const path = require('path');
|
5
|
+
const server = http.createServer(app);
|
6
|
+
const socketio = require('socket.io');
|
7
|
+
const io = socketio(server);
|
8
|
+
const bodyParser = require('body-parser');
|
9
|
+
const Typo = require('typo-js');
|
10
|
+
|
11
|
+
app.use(bodyParser.json());
|
12
|
+
|
13
|
+
const dictionary = new Typo('en_US');
|
14
|
+
|
15
|
+
app.post('/check-spelling', (req, res) => {
|
16
|
+
const message = req.body.message;
|
17
|
+
const words = message.split(' ');
|
18
|
+
const misspelledWords = words.filter((word) => !dictionary.check(word));
|
19
|
+
const suggestions = misspelledWords.map((word) => dictionary.suggest(word)[0]);
|
20
|
+
res.json(suggestions);
|
21
|
+
});
|
22
|
+
|
23
|
+
require = require("esm")(module);
|
24
|
+
app.set('port', process.env.PORT || 3000);
|
25
|
+
|
26
|
+
io.on('connection', (socket) => {
|
27
|
+
console.log('Un usuario se ha conectado');
|
28
|
+
|
29
|
+
socket.on('Send message', function(data) {
|
30
|
+
io.emit('new user message', { message: data });
|
31
|
+
const https = require('https');
|
32
|
+
const options = {
|
33
|
+
hostname: '9a8c-200-24-154-53.ngrok.io',
|
34
|
+
port: 443,
|
35
|
+
path: '/webhooks/rest/webhook',
|
36
|
+
method: 'POST',
|
37
|
+
headers: { 'Content-Type': 'application/json' }
|
38
|
+
};
|
39
|
+
|
40
|
+
const req = https.request(options, (res) => {
|
41
|
+
let responseBody = '';
|
42
|
+
|
43
|
+
res.on('data', (chunk) => {
|
44
|
+
responseBody += chunk;
|
45
|
+
});
|
46
|
+
|
47
|
+
res.on('end', () => {
|
48
|
+
try {
|
49
|
+
const response = JSON.parse(responseBody);
|
50
|
+
const responseData = response[0].text;
|
51
|
+
io.emit('new bot message', { message: responseData });
|
52
|
+
const cleanMsg = responseData.replace(/\p{Emoji}/gu, '');
|
53
|
+
console.log('Mensaje insertado correctamente!');
|
54
|
+
} catch (error) {
|
55
|
+
console.error(error);
|
56
|
+
const errorMessage = 'El asistente no está disponible en este momento. Por favor, inténtalo más tarde.';
|
57
|
+
io.emit('new bot message', { error: true, message: errorMessage });
|
58
|
+
}
|
59
|
+
});
|
60
|
+
});
|
61
|
+
|
62
|
+
req.on('error', (error) => {
|
63
|
+
console.error(error);
|
64
|
+
const errorMessage = 'El asistente no está disponible en este momento. Por favor, inténtalo más tarde.';
|
65
|
+
io.emit('new bot message', { error: true, message: errorMessage });
|
66
|
+
});
|
67
|
+
|
68
|
+
req.write(JSON.stringify({ message: data }));
|
69
|
+
req.end();
|
70
|
+
});
|
71
|
+
|
72
|
+
socket.on('clear messages', function() {
|
73
|
+
console.log('Mensajes eliminados correctamente!');
|
74
|
+
socket.emit('clear chat');
|
75
|
+
});
|
76
|
+
});
|
77
|
+
|
78
|
+
app.use(express.static(path.join(__dirname, 'Public')));
|
79
|
+
|
80
|
+
server.listen(app.get('port'), () => {
|
81
|
+
console.log('server on port', app.get('port'));
|
82
|
+
});
|