diff --git a/smartassist/src/static/js/frontend.js b/smartassist/src/static/js/frontend.js index f977968..61865c1 100644 --- a/smartassist/src/static/js/frontend.js +++ b/smartassist/src/static/js/frontend.js @@ -3,6 +3,17 @@ const chatbox = document.getElementById('chatbox'); const userInput = document.getElementById('userInput'); +// // Check for Marked +// if (typeof marked === 'undefined') { +// console.log('Marked is not defined'); +// const script = document.createElement('script'); +// script.src = "https://cdn.jsdelivr.net/npm/marked/marked.min.js"; +// script.onload = initializeChatbot; +// document.body.appendChild(script); +// console.log('Marked is now defined'); +// } + + // Define a function to send the user's message to the AI function sendMessage() { // Get the user's input message and trim any whitespace @@ -43,9 +54,28 @@ function renderMessage(text, className) { // Add the specified class name to the element messageElement.className = className; - // Set the text content of the element to the message text - messageElement.textContent = text; + // // Set the text content of the element to the message text + // messageElement.textContent = text; + + // Parse Markdown text into HTML and set it as the innerHTML of the element + messageElement.innerHTML = marked.parse(text); + + // Typeset math + MathJax.typesetPromise([messageElement]); // Append the message element to the chatbox chatbox.appendChild(messageElement); -} \ No newline at end of file +} + +// Make the button toggle colour when user presses Enter on keyboard +const sendButton = document.getElementById('sendButton'); + +document.addEventListener('keydown', function(event) { + if (event.key === 'Enter') { + sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed + } +}); + +document.addEventListener('keyup', function() { + sendButton.style.backgroundColor = ''; // Restore the original style when any key is released +});