*

1 files changed, 28 insertions, 20 deletions

diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html
index d7fd26d..17dcefe 100644
--- a/html/matt-chat/index.html
+++ b/html/matt-chat/index.html
@@ -162,7 +162,15 @@
     </div>
 
     <script>
-        // Configuration object
+        // ==================================================
+        // MATT CHAT IS NOT A CAT
+        // This is a simple chat interface for the Ollama API
+        // ==================================================
+        //
+        // This configuration object is used to define all local variables for your needs
+        // Set the base url for the ollama api, and then list all the models you want to use
+        // The context window size is the number of previous exchanges to keep...
+        // though this is relatively naive at the moment
         const config = {
             apiUrl: "http://localhost:11434/v1/chat/completions",
             models: [
@@ -171,12 +179,12 @@
                 { value: "qwen2.5-coder:7b", label: "qwen2.5-coder:7b, fastish coding" },
                 { value: "qwen2.5-coder:32b", label: "qwen2.5-coder:32b, super slow coding" },
             ],
-            contextWindowSize: 3 // Number of previous exchanges to keep
+            contextWindowSize: 3, // Number of previous exchanges to remember
+            systemMessage: "You are a helpful assistant." // Set the mood and personality for the LLM's responses
         };
 
-        let conversationHistory = []; // Array to hold the conversation history
+        let conversationHistory = [];
 
-        // Function to populate the model select dropdown
         function populateModelSelect() {
             const modelSelect = document.getElementById("model-select");
             modelSelect.innerHTML = ""; // Clear existing options
@@ -189,7 +197,6 @@
             });
         }
 
-        // Call the function to populate the model select on page load
         document.addEventListener("DOMContentLoaded", () => {
             populateModelSelect(); // Populate the model select dropdown
 
@@ -207,24 +214,29 @@
             });
         });
 
-        // Function to add a message to the chat container
+        // Add a message to the chat container
         function addMessage(message, sender = "user") {
             const chatContainer = document.getElementById("chat-container");
             const messageElement = document.createElement("div");
             messageElement.classList.add("message", sender === "user" ? "user-message" : "bot-message");
             messageElement.textContent = message;
             chatContainer.appendChild(messageElement);
-            chatContainer.scrollTop = chatContainer.scrollHeight; // Auto-scroll to the bottom
+            chatContainer.scrollTop = chatContainer.scrollHeight; // Try to scroll to the bottom
         }
 
-        // Function to format milliseconds into a readable format
+        // Fancy format milliseconds into a more readable format
         function formatDuration(duration) {
-            const seconds = Math.floor(duration / 1000);
+            const minutes = Math.floor(duration / (1000 * 60));
+            const seconds = Math.floor((duration % (1000 * 60)) / 1000);
             const milliseconds = duration % 1000;
-            return `${seconds}.${Math.floor(milliseconds / 10)} seconds`; // Display seconds and milliseconds
+            
+            if (minutes > 0) {
+                return `${minutes}m ${seconds}.${Math.floor(milliseconds / 10)}s`;
+            }
+            return `${seconds}.${Math.floor(milliseconds / 10)}s`;
         }
 
-        // Function to update the character and word count
+        // Character and word counter
         function updateCounter() {
             const userInput = document.getElementById("user-input");
             const charCount = document.getElementById("char-count");
@@ -241,7 +253,7 @@
         // Event listener to update the counter on input
         document.getElementById("user-input").addEventListener("input", updateCounter);
 
-        // Function to handle sending the message
+
         async function sendMessage() {
             const userInput = document.getElementById("user-input");
             const userMessage = userInput.value.trim();
@@ -294,8 +306,8 @@
 
                 // Prepare the messages for the API
                 const messagesToSend = [
-                    { role: "system", content: "You are a helpful assistant." }, // System message for context
-                    { role: "user", content: userMessage } // Always include the current user message
+                    { role: "system", content: config.systemMessage },
+                    { role: "user", content: userMessage }
                 ];
 
                 // Include conversation history only if the checkbox is checked
@@ -318,7 +330,6 @@
                     throw new Error('Error communicating with Ollama API');
                 }
 
-                // Handle the response
                 const data = await response.json();
                 console.log("API Response:", data); // Log the response for debugging
 
@@ -362,7 +373,7 @@
             }
         }
 
-        // Function to animate the loading indicator
+        // Basic animmation for the loading indicator
         function animateLoadingIndicator(indicator) {
             let dots = 0;
             return setInterval(() => {
@@ -376,7 +387,7 @@
         // Event listener for the "Send" button
         document.getElementById("send-button").addEventListener("click", sendMessage);
 
-        // Optional: Allow pressing Enter to send the message
+        // Use Enter to send the message, too
         document.getElementById("user-input").addEventListener("keypress", function (e) {
             if (e.key === "Enter") {
                 e.preventDefault(); // Prevent line break
@@ -384,7 +395,6 @@
             }
         });
 
-        // Function to toggle dark mode
         function toggleDarkMode() {
             const body = document.body;
             const chatContainer = document.getElementById("chat-container");
@@ -415,14 +425,12 @@
             }
         });
 
-        // Function to clear the chat
         function clearChat() {
             const chatContainer = document.getElementById("chat-container");
             chatContainer.innerHTML = ""; // Clear all messages
             conversationHistory = []; // Clear the conversation history
         }
 
-        // Function to display help information
         function displayHelp() {
             const helpMessage = `
                 Available commands:\n