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

smartassist/config/smartassist.yaml

@@ -11,12 +11,12 @@ backend:
 ollama:
   url: "http://localhost:11434" 
   api_key: "${OLLAMA_API_KEY}" # Refer to environment variable
-  # model: "phi3:mini" # Select a model supported by the Ollama server
+  model: "phi3:mini" # Select a model supported by the Ollama server
   # model: "llama3:70b" # Select a model supported by the Ollama server
   # model: "llama3:latest" # Select a model supported by the Ollama server
   # model: "mannix/llama3-8b-ablitered-v3:latest" # Select a model supported by the Ollama server 
   # model: "mistral-nemo:latest" # Select a model supported by the Ollama server 
-  model: "gemma2:27b"
+  # model: "gemma2:27b"
 
 # Logging – comment out the whole section for default level which is INFO
 logging:

smartassist/src/html/client.html

@@ -12,15 +12,22 @@
         <!-- messages will be rendered here -->
     </div>
     <textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
-    <button onclick="sendMessage()">Send</button>
+    <button id="sendButton" onclick="sendMessage()">Send</button>
 
     <!-- Get the apiEndpoint -->
     <script>
         const apiEndpoint = window.apiEndpoint;
         const useModel = window.useModel;
-        
     </script>
 
+    <!-- Marked for markdown rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+    <!-- Include MathJax library to render mathematical notation -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+
     <!-- Get the javascript handling communication with the backend -->
     <script src="/js/frontend.js"></script>
 

smartassist/src/static/css/clientstyle.css

@@ -14,9 +14,10 @@ h1 {
 }
 
 #chatbox {
-    width: 80%;
+    width: calc(50% - 60px); /* Adjust width for input and button */
-    max-width: 500px;
+    /* max-width: 500px; */
-    background-color: #fff;
+    height: 80px;
+    background-color: #e1dcccb8;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@@ -36,7 +37,8 @@ h1 {
 }
 
 .ai-response {
-    background-color: #f0f8ff;
+    /* background-color: #f0f8ff; */
+    background-color: #e1dcccb8;
     padding: 10px 15px;
     border-radius: 10px;
     text-align: left; /* Align AI responses to the left */
@@ -48,6 +50,7 @@ h1 {
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-bottom: 10px;
+    font-family: 'Courier New', Courier, monospace; /* Fixed width typeface */
 }
 
 #userInput:focus {
@@ -66,4 +69,14 @@ button[onclick="sendMessage()"] {
     font-size: 16px;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s; /* Smooth transition effect */
 }
+
+button[onclick="sendMessage()"]:hover {
+    background-color: #b2b2b2; /* Light Grey on hover */
+}
+
+button[onclick="sendMessage()"]:active {
+    background-color: #6f6f6f; /* Dark Grey when clicked */
+}
+

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
+    // // Set the text content of the element to the message text
-    messageElement.textContent = 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
+});