From de3e59afea65406da5f1a7da144aa1a734d723c1 Mon Sep 17 00:00:00 2001
From: Joakim Persson <joakim.persson@icloud.com>
Date: Tue, 30 Jul 2024 00:16:55 +0200
Subject: [PATCH] =?UTF-8?q?Rendrering=20av=20markdown-formatterade=20svar.?=
 =?UTF-8?q?=20Experimenterar=20med=20MathJax.=20=C3=84ndrar=20f=C3=A4rg=20?=
 =?UTF-8?q?p=C3=A5=20knappen=20n=C3=A4r=20man=20trycker=20p=C3=A5=20Retur-?=
 =?UTF-8?q?tangenten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 smartassist/src/static/js/frontend.js | 36 ++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

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