firtssocketia 1.0.0

package/src/Public/js/clean_chat_mysql.js

@@ -0,0 +1,94 @@
+const socket = io();
+//Obteniendo los elementos del from
+const $messageForm = $('#message-form');
+const $messageBox = $('#message');
+const $chat = $('#chat');
+const $clearChatButton = $('#clear-chat');
+const $toggleDarkModeButton = $('#toggle-dark-mode');
+const $menuButton = $('#menu-button');
+const $menu = $('#menu');
+const $clearChatButtonToMove = $('#clear-chat');
+$clearChatButton.click(function() {
+    // Eliminar atributo de datos para permitir la creación de nuevos botones de confirmación
+    $clearChatButton.removeData('confirm-buttons');
+    
+    // Verificar si los botones de confirmación ya están presentes
+    if (!$clearChatButton.data('confirm-buttons')) {
+      // Eliminar botones de confirmación anteriores
+      $clearChatButton.find('.clear-chat-confirm').remove();
+  
+      // Agregar botones de confirmación
+      $clearChatButton.append('<div class="clear-chat-confirm flex">' +
+      '<button id="clear-chat-yes" class="bg-transparent ml-12">' +
+        '<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">' +
+          '<path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>' +
+        '</svg>' +
+      '</button>' +
+      '<button id="clear-chat-no" class="bg-transparent ml-2">' +
+        '<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">' +
+          '<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"/>' +
+        '</svg>' +
+      '</button>' +
+    '</div>');
+  
+      // Establecer el atributo de datos para indicar que los botones ya están presentes
+      $clearChatButton.data('confirm-buttons', true);
+    }
+
+    // Mostrar botones de confirmación y ocultar ícono
+    $clearChatButton.find('.clear-chat-confirm').show();
+    $clearChatButton.find('.clear-chat-icon').hide();
+
+    // Eliminar eventos click anteriores
+    $('#clear-chat-yes, #clear-chat-no').off('click');
+  
+    // Agregar eventos a los botones de confirmación
+    $('#clear-chat-yes').click(function() {
+      $chat.empty();
+      socket.emit('clear messages');
+      // Ocultar botones de confirmación y mostrar ícono de confirmación
+      $clearChatButton.find('.clear-chat-confirm').hide();
+      $clearChatButton.find('.clear-chat-icon.success').show();
+      
+      // Eliminar botones de confirmación
+      $clearChatButton.find('.clear-chat-confirm').remove();
+    });
+  
+    $('#clear-chat-no').click(function() {
+      // Ocultar botones de confirmación y mostrar ícono de cancelación
+      $clearChatButton.find('.clear-chat-confirm').hide();
+      $clearChatButton.find('.clear-chat-icon.cancel').show();
+      
+      // Eliminar botones de confirmación
+      $clearChatButton.find('.clear-chat-confirm').remove();
+    });
+  
+    $('#clear-chat-yes').click(function() {
+      $chat.empty();
+      socket.emit('clear messages');
+      chat.innerHTML = ''; 
+    
+      // Ocultar botones de confirmación y mostrar ícono de confirmación
+      $clearChatButton.find('.clear-chat-confirm').hide();
+      $clearChatButton.find('.clear-chat-icon.success').show();
+    
+      // Esperar un segundo antes de eliminar los botones de confirmación
+      setTimeout(function() {
+        // Eliminar botones de confirmación
+        $clearChatButton.find('.clear-chat-confirm').remove();
+      }, 1000);
+    });
+  
+    $('#clear-chat-no').click(function() {
+    
+      // Ocultar botones de confirmación y mostrar ícono de confirmación
+      $clearChatButton.find('.clear-chat-confirm').hide();
+      $clearChatButton.find('.clear-chat-icon.success').show();
+    
+      // Esperar un segundo antes de eliminar los botones de confirmación
+      setTimeout(function() {
+        // Eliminar botones de confirmación
+        $clearChatButton.find('.clear-chat-confirm').remove();
+      }, 500);
+    });
+  });

package/src/Public/js/correction.js

@@ -0,0 +1,85 @@
+let lastWord = '';
+let skippedWords = [];
+
+function checkSpelling(event) {
+  const message = document.getElementById('message').value;
+  const words = message.split(' ');
+  const currentWord = words[words.length - 1];
+
+  if (lastWord !== '' && (currentWord === lastWord || event.keyCode === 32)) {
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  xhr.open('POST', '/check-spelling', true);
+  xhr.setRequestHeader('Content-Type', 'application/json');
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      const suggestions = JSON.parse(xhr.responseText);
+      showSuggestions(suggestions, event);
+      if (event.keyCode !== 32) {
+        lastWord = currentWord;
+      }
+    }
+  };
+  xhr.send(JSON.stringify({ message }));
+}
+
+function showSuggestions(suggestions, event) {
+  const suggestionsList = document.getElementById('suggestions');
+  suggestionsList.innerHTML = '';
+  const currentMessage = document.getElementById('message').value;
+  const words = currentMessage.split(' ');
+  const lastEnteredWord = words[words.length - 1];
+
+  if ((lastEnteredWord !== lastWord || event.keyCode === 32) && lastEnteredWord.length > 0 && suggestions.length > 0) {
+    suggestionsList.classList.remove('hidden');
+    suggestions.forEach((suggestion) => {
+      if (suggestion !== lastEnteredWord && suggestion !== lastWord && !skippedWords.includes(suggestion)) {
+        const suggestionLi = document.createElement('li');
+        suggestionLi.innerText = suggestion;
+        suggestionLi.addEventListener('click', function() {
+          selectSuggestion(suggestion);
+        });
+        suggestionsList.appendChild(suggestionLi);
+      }
+    });
+    lastWord = lastEnteredWord;
+  } else {
+    suggestionsList.classList.add('hidden');
+  }
+
+  // Eliminar las palabras omitidas de la lista de sugerencias
+  skippedWords.forEach((skippedWord) => {
+    const suggestionToRemove = suggestionsList.querySelector(`li:not(.hidden):not(.selected):not(.removed)[innerText="${skippedWord}"]`);
+    if (suggestionToRemove) {
+      suggestionToRemove.classList.add('removed');
+    }
+  });
+}
+
+function selectSuggestion(suggestion) {
+  const messageInput = document.getElementById('message');
+  const currentMessage = messageInput.value;
+  const startIndex = currentMessage.lastIndexOf(' ') + 1;
+  const newMessage = currentMessage.substring(0, startIndex) + suggestion;
+  messageInput.value = newMessage;
+  document.getElementById('suggestions').innerHTML = '';
+
+  const suggestionsList = document.getElementById('suggestions');
+  const selectedSuggestion = suggestionsList.querySelector(`li:not(.hidden).selected`);
+  if (selectedSuggestion && selectedSuggestion.innerText === suggestion) {
+    skippedWords.push(suggestion);
+  }
+  suggestionsList.removeChild(selectedSuggestion);
+
+}
+
+const messageInput = document.getElementById('message');
+messageInput.addEventListener('keydown', function(event) {
+  checkSpelling(event);
+  if (event.keyCode === 32) {
+    document.getElementById('suggestions').innerHTML = '';
+    skippedWords.length = 0;
+  }
+});

package/src/Public/js/loby.js

@@ -0,0 +1,32 @@
+// Obtener los contenedores de la introducción y del chat
+var introContainer = document.getElementById("intro-container");
+var chatContainer = document.getElementById("modoTotal");
+var Helpmebtn = document.getElementById("clear-chat");
+
+Helpmebtn.setAttribute("disabled", "");
+
+var enChat = false;
+
+const newConversationButton = document.getElementById("menu-button");
+
+newConversationButton.addEventListener("click", () => {
+  if (enChat) {
+    chatContainer.style.display = "none";
+    introContainer.style.display = "block";
+    Helpmebtn.setAttribute("disabled", "");
+    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">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg> Iniciar conversación`;
+    enChat = false;
+  } else {
+    chatContainer.style.display = "block";
+    introContainer.style.display = "none";
+    Helpmebtn.removeAttribute("disabled");
+    newConversationButton.innerHTML = `
+    <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">
+      <path stroke="currentColor" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+    </svg>
+    Regresar`;
+    enChat = true;
+  }
+});

package/src/Public/js/main.js

@@ -0,0 +1,117 @@
+$(document).ready(function() {
+  const socket = io();
+
+  const $messageForm = $('#message-form');
+  const $messageBox = $('#message');
+  const $chat = $('#chat');
+  const $clearChatButton = $('#clear-chat');
+  const $toggleDarkModeButton = $('#toggle-dark-mode');
+  const $menuButton = $('#menu-button');
+  const $menu = $('#menu');
+  const $clearChatButtonToMove = $('#clear-chat');
+
+  const sunIcon = document.getElementById("sun");
+  const moonIcon = document.getElementById("moon");
+
+  sunIcon.classList.add("hidden");
+  // Eventos
+  $('#toggle-dark-mode').click(function() {
+    $('body').toggleClass('dark-mode');
+    if ($('body').hasClass('dark-mode')) {
+        $('#dark-mode-text').text('Modo claro');
+        sunIcon.style.display = "block";
+        moonIcon.style.display = "none";
+    } else {
+        $('#dark-mode-text').text('Modo oscuro');
+        sunIcon.style.display = "none";
+        moonIcon.style.display = "block";
+    }
+});
+
+  $menuButton.click(function() {
+    $menu.slideToggle('fast', function() {
+      const marginTop = $menu.is(':visible') ? $menu.height() + 20 : 0; 
+      $clearChatButtonToMove.css('margin-top', marginTop);
+    });
+  });
+
+  $(window).resize(function() {
+    const marginTop = $menu.is(':visible') ? $menu.height() + 20 : 0; 
+    $clearChatButtonToMove.css('margin-top', marginTop);
+  });
+
+    socket.on('clear messages', function() {
+    $chat.empty();
+  })
+
+  const scrollDownBtn = document.getElementById('scrollDownBtn');
+  const chatContainer = document.getElementById('chat');
+
+  scrollDownBtn.addEventListener('click', () => {
+    chatContainer.scrollTo({ top: chatContainer.scrollHeight, behavior: 'smooth' });
+    checkScrollPosition();
+  });
+  
+  function checkScrollPosition() {
+    const isAtBottom = chatContainer.scrollTop === (chatContainer.scrollHeight - chatContainer.clientHeight);
+    if (isAtBottom) {
+      scrollDownBtn.style.display = 'none';
+    } else {
+      scrollDownBtn.style.display = 'block';
+    }
+  }
+  chatContainer.addEventListener('scroll', () => {
+    checkScrollPosition();
+  });
+
+
+  // 
+  ////
+  ////WEB COMPONENT DEL FILTRO DE BUSQUEDA DE CONVERSACIÓN
+  ////
+  //
+
+   //BUSQUEDA DE CONVERSACIÓN
+   const searchInput = document.getElementById('search-input');
+   const messages = document.getElementsByClassName('message-text');
+   const messageContainer = document.getElementById('message-container');
+   const originalMessages = Array.from(messages); 
+   const noResultsMessage = document.getElementById('no-results');
+   
+   searchInput.addEventListener('input', function() {
+     const searchTerm = searchInput.value.toLowerCase();
+     let hasResults = false; 
+     
+     for (let i = 0; i < messages.length; i++) {
+       const messageText = messages[i].textContent.toLowerCase();
+       
+       if (messageText.includes(searchTerm)) {
+         messages[i].classList.remove('hidden');
+         hasResults = true; 
+       } else {
+         messages[i].classList.add('hidden');
+       }
+     }
+
+     if (!hasResults) {
+       noResultsMessage.classList.remove('hidden');
+     } else {
+       noResultsMessage.classList.add('hidden');
+     }
+   });
+   searchInput.addEventListener('keyup', function(event) {
+     if (event.keyCode === 27 || event.code === 'Escape') {
+       searchInput.value = '';
+       for (let i = 0; i < originalMessages.length; i++) {
+         originalMessages[i].classList.remove('hidden');
+       }
+   
+       noResultsMessage.classList.add('hidden');
+     }
+   });
+  // 
+  ////
+  ////WEB COMPONENT DEL FILTRO DE BUSQUEDA DE CONVERSACIÓN
+  ////
+  //
+});

package/src/Public/web components/rasa component.js

@@ -0,0 +1,78 @@
+/*socket.on('new message', function(data) {
+  const now = new Date();
+  const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
+
+  $chat.append('<div class="flex flex-col message-text">' +
+    '<div class="bg-blue-500 p-6 w-96 rounded-3xl rounded-br-none self-end">' +
+    '<small class="text-white rounded font-light">' + data.message + '</small>' +
+    '</div>' +
+    '<small class="text-gray-500 font-light self-end">' + time + '</small>' +
+    '</div>' +
+    '<div class="flex flex-col message-text">' +
+    '<div id="Chatbot" class="bg-gray-200 p-6 w-96 rounded-3xl rounded-bl-none self-start">' +
+    '<small class="text-gray-600 rounded font-light">' + data.response + '</small>' +
+    '</div>' +
+    '<small class="text-gray-500 font-light self-start">' + time + '</small>' +
+    '</div>'
+  );
+});*/
+
+class ChatComponent extends HTMLElement {
+  constructor() {
+    super();
+
+    const template = document.querySelector('#chat-template');
+    const content = template.content.cloneNode(true);
+    this.appendChild(content);
+
+    const chatContainer = this.querySelector('#chat-container');
+    const scrollDownButton = this.querySelector('#scrollDownBtn');
+
+    scrollDownButton.addEventListener('click', () => {
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    });
+
+    // Listen for new messages and add them to the chat
+    socket.on('new message', function(data) {
+      const now = new Date();
+      const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
+
+      const messageContainer = document.createElement('div');
+      messageContainer.classList.add('flex', 'flex-col', 'message-text');
+
+      const userMessage = document.createElement('div');
+      userMessage.classList.add('bg-blue-500', 'p-6', 'w-96', 'rounded-3xl', 'rounded-br-none', 'self-end');
+      userMessage.innerHTML = `
+        <small class="text-white rounded font-light">${data.message}</small>
+      `;
+
+      const userMessageTime = document.createElement('small');
+      userMessageTime.classList.add('text-gray-500', 'font-light', 'self-end');
+      userMessageTime.textContent = time;
+
+      const botMessage = document.createElement('div');
+      botMessage.classList.add('bg-gray-200', 'p-6', 'w-96', 'rounded-3xl', 'rounded-bl-none', 'self-start');
+      botMessage.innerHTML = `
+        <small class="text-gray-600 rounded font-light">${data.response}</small>
+      `;
+
+      const botMessageTime = document.createElement('small');
+      botMessageTime.classList.add('text-gray-500', 'font-light', 'self-start');
+      botMessageTime.textContent = time;
+
+      messageContainer.appendChild(userMessage);
+      messageContainer.appendChild(userMessageTime);
+
+      if (data.response) {
+        messageContainer.appendChild(botMessage);
+        messageContainer.appendChild(botMessageTime);
+      }
+
+      chatContainer.appendChild(messageContainer);
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    });
+  }
+}
+
+customElements.define('chat-component', ChatComponent);
+

package/src/Public/web components/recognition component.js

@@ -0,0 +1,168 @@
+// 
+  ////
+  ////WEB COMPONENT DEL envio de mensajes
+  ////
+  //
+  document.addEventListener('DOMContentLoaded', function() {
+  $(document).ready(function() {               
+   class MessageBox extends HTMLElement {
+    constructor() {
+      super();
+      const template = document.getElementById('message-box-template');
+      const content = template.content.cloneNode(true);
+      this.attachShadow({ mode: 'open' }).appendChild(content);
+      this.messageInput = this.shadowRoot.querySelector('#message');
+      this.messageForm = this.shadowRoot.querySelector('#message-form');
+      this.messageBoxKeyPress = this.messageBoxKeyPress.bind(this);
+      this.messageFormSubmit = this.messageFormSubmit.bind(this);
+      this.btnSend = this.shadowRoot.querySelector('#btnSend');
+      this.btnSend.addEventListener('click', this.messageFormSubmit);
+  
+      const recognition = new webkitSpeechRecognition();
+      recognition.lang = 'es-ES';
+      recognition.continuous = true;
+      recognition.interimResults = false;
+  
+      const btnStartStopRecord = this.shadowRoot.getElementById('btn2');
+      const recognitionText = this.shadowRoot.getElementById('recognition');
+      const recordingStatus = this.shadowRoot.getElementById('recording-status');
+      const microIcon = this.shadowRoot.getElementById('micro');
+      const pauseIcon = this.shadowRoot.getElementById('pause');
+      
+  
+      let isRecording = false;
+      let recognizedMessage = '';
+  
+      recognition.onstart = () => {
+        // Comprobar si los elementos están presentes antes de acceder a sus propiedades
+        if (recordingStatus && microIcon && pauseIcon) {
+          // Crear el contexto de audio
+          const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  
+          // Crear el nodo oscilador
+          const oscillator = audioCtx.createOscillator();
+          oscillator.type = 'sine'; // Cambiar el tipo de onda
+          oscillator.frequency.value = 600; // Cambiar la frecuencia
+  
+          // Conectar el nodo oscilador a la salida de audio
+          oscillator.connect(audioCtx.destination);
+  
+          // Iniciar la oscilación
+          oscillator.start();
+  
+          // Detener la oscilación después de 1 segundo
+          setTimeout(() => {
+            oscillator.stop();
+          }, 200);
+  
+          // Resto del código de inicio de grabación
+          this.messageInput.style.display = 'none';
+          recordingStatus.classList.add('recording');
+          recordingStatus.innerText = 'Grabando...';
+          microIcon.classList.add('hidden');
+          pauseIcon.classList.remove('hidden');
+        }
+        new Notification('Grabación iniciada', {
+          body: 'Comenzó la grabación de voz.'
+        });
+      };
+  
+      recognition.onresult = (event) => {
+        const results = event.results;
+        const frase = results[results.length - 1][0].transcript;
+        this.messageInput.value += frase;
+        recognizedMessage += frase;
+      };
+  
+      recognition.onend = () => {
+        // Comprobar si los elementos están presentes antes de acceder a sus propiedades
+        if (recordingStatus && microIcon && pauseIcon) {
+          // Mostrar el cuadro de texto y ocultar la animació
+        this.messageInput.style.display = 'block';
+        recordingStatus.classList.remove('recording');
+        recordingStatus.innerText = '';
+        microIcon.classList.remove('hidden');
+        pauseIcon.classList.add('hidden');
+      };
+      new Notification('Grabación finalizada', {
+        body: 'Se detuvo la grabación de voz.'
+      });
+    }
+  
+      btnStartStopRecord.addEventListener('click', () => {
+        if (!isRecording) {
+          recognition.start();
+          isRecording = true;
+          btnStartStopRecord.classList.add('active');
+        } else {
+          if (isRecording) {
+            recognition.stop();
+            isRecording = false;
+            btnStartStopRecord.classList.remove('active');
+          }
+        }
+      });
+
+      this.messageInput.addEventListener('input', function() {
+        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;
+        if (regex.test(this.value)) {
+          this.value = this.value.replace(regex, '');
+          try {
+            const notification = new Notification('ADVERTENCIA!', {
+              body: 'No se permiten emoticones en el mensaje'
+            });
+          } catch (err) {
+            console.log('No se pudo mostrar la notificación:', err);
+          }
+          
+        } else {
+          
+        }
+      });
+      
+      this.messageForm.addEventListener('submit', function(event) {
+        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;
+        if (regex.test(this.messageInput.value)) {
+          event.preventDefault();
+          try {
+            const notification = new Notification('Error', {
+              body: 'No se permiten emoticones en el mensaje'
+            });
+          } catch (err) {
+            console.log('No se pudo mostrar la notificación:', err);
+          }
+        }
+      });
+      
+    }
+    connectedCallback() {
+      this.messageInput = document.querySelector('#message');
+      this.messageInput.addEventListener('keypress', this.messageBoxKeyPress.bind(this));
+    }
+    
+    messageBoxKeyPress(event) {
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        this.messageFormSubmit(event);
+      }
+    }
+    
+    messageFormSubmit(event) {
+      event.preventDefault();
+      const message = this.messageInput.value.trim();
+      if (message !== '') {
+        socket.emit('Send message', message);
+        this.messageInput.value = '';
+      }
+    }     
+  }
+  
+  customElements.define('message-box', MessageBox);
+  // 
+  ////
+  ////WEB COMPONENT FIN
+  ////
+  //
+ // Código para crear la clase MessageBox y registrarla como un elemento personalizado.
+});
+});

package/src/index.js

@@ -0,0 +1,32 @@
+const express = require('express');
+const app = express();
+const http = require('http');
+const path = require('path');
+const server = http.createServer(app);
+const socketio = require('socket.io');
+const io = socketio(server);
+const bodyParser = require('body-parser');
+const Typo = require('typo-js');
+
+app.use(bodyParser.json());
+
+const dictionary = new Typo('en_US');
+
+app.post('/check-spelling', (req, res) => {
+  const message = req.body.message;
+  const words = message.split(' ');
+  const misspelledWords = words.filter((word) => !dictionary.check(word));
+  const suggestions = misspelledWords.map((word) => dictionary.suggest(word)[0]);
+  res.json(suggestions);
+});
+
+require = require("esm")(module)
+app.set('port', process.env.PORT||3000);
+
+const sockets = require('./sockets');
+sockets(io);
+app.use(express.static(path.join(__dirname, 'Public')));
+
+server.listen(app.get('port'), ()=>{
+    console.log('server on port', app.get('port'))
+});