From 6294cb0306f9aa8d039ba1b7ec4f871685b10db9 Mon Sep 17 00:00:00 2001
From: elioat <elioat@tilde.institute>
Date: Sun, 5 Jan 2025 07:42:27 -0500
Subject: *

---
 html/matt-chat/index.html | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

(limited to 'html/matt-chat/index.html')

diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html
index 391bb95..2bc594d 100644
--- a/html/matt-chat/index.html
+++ b/html/matt-chat/index.html
@@ -200,27 +200,38 @@
 
         let isCatMode = false; // Flag to track cat mode
 
+        const API_URL = "http://localhost:11434/v1";
+
         async function populateModelSelect() {
             const modelSelect = document.getElementById("model-select");
             modelSelect.innerHTML = ""; // Clear existing options
 
+            // Show loading indicator
+            const loadingMessage = addMessage("Loading models...", "bot");
+
+            // Declare modelIds outside the try block
+            const modelIds = [];
+
             try {
-                const response = await fetch("http://localhost:11434/v1/models"); // Adjust the endpoint as needed
+                const response = await fetch(`${API_URL}/models`);
                 if (!response.ok) {
                     throw new Error('Failed to fetch models');
                 }
-                const data = await response.json(); // Get the JSON response
+                const data = await response.json();
 
-                console.log("API Response:", data); // Log the response for debugging
+                console.log("API Response:", data);
 
-                // Check if the response contains a data array
-                if (Array.isArray(data.data)) { // Access the data array
+                if (Array.isArray(data.data)) {
                     data.data.forEach(model => {
                         const option = document.createElement("option");
-                        option.value = model.id; // Use the id from the model
-                        option.textContent = model.id; // Use the id for display (you can customize this)
+                        option.value = model.id;
+                        option.textContent = model.id; // Customize as needed
                         modelSelect.appendChild(option);
+                        
+                        // Add model ID to the array
+                        modelIds.push(model.id);
                     });
+                    console.log("Model IDs:", modelIds); // Debugging log to check model IDs
                 } else {
                     console.error("Expected an array of models, but got:", data);
                     addMessage("Error: Expected an array of models, but got an unexpected response.", "bot");
@@ -228,6 +239,17 @@
             } catch (error) {
                 console.error("Error fetching models:", error);
                 addMessage("Error fetching models. Please check the console for details.", "bot");
+            } finally {
+                // Remove loading indicator
+                loadingMessage.remove();
+                
+                // Check if modelIds is populated before displaying the success message
+                if (modelIds.length > 0) {
+                    // Display a message indicating readiness to chat with the list of models
+                    addMessage(`Models loaded successfully! Ready to chat. Available models: ${modelIds.join(', ')}`, "bot");
+                } else {
+                    addMessage("No models available to chat.", "bot");
+                }
             }
         }
 
@@ -261,6 +283,9 @@
             
             // Force scroll to bottom in case the scrollIntoView doesn't work in some browsers
             chatContainer.scrollTop = chatContainer.scrollHeight;
+
+            // Return the message element for further manipulation
+            return messageElement;
         }
 
         // Fancy format milliseconds into a more readable format
-- 
cgit 1.4.1-2-gfad0