Rendrering av markdown-formatterade svar. Experimenterar med MathJax. Ändrar färg på knappen när man trycker på Retur-tangenten

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);
-}
+}
+
+// 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
+});