Inläsning av apiEndpoint och useModel har flyttats hit. Funktioner och variabler från frontend.js exporteras numer via frontendApi

smartassist/config/smartassist.yaml

@@ -11,10 +11,10 @@ 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: "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"
 

smartassist/src/html/client.html

@@ -22,7 +22,7 @@
         console.log("client.html - use model: ", useModel);
     </script> -->
 
-    <script>
+    <!-- <script>
         let apiEndpoint; // Make variable available outside of the scope of the event listener
         let useModel; // Make variable available outside of the scope of the event listener
         window.addEventListener('message', function(event) {
@@ -30,9 +30,11 @@
                 const { apiEndpoint, useModel } = event.data;
                 console.log("client.html - API Endpoint: ", apiEndpoint);
                 console.log("client.html - use model: ", useModel);
+                window.apiEndpoint  = apiEndpoint; 
+                window.useModel  = useModel;
             }   
         });
-    </script>
+    </script> -->
 
     <!-- Marked-it for markdown rendering -->
     <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
@@ -71,7 +73,7 @@
                 event.preventDefault(); 
                 userInputElement.value += '\n';
             } else if (event.key === 'Enter') {  // Enter to send message
-                sendMessage();
+                window.frontendApi.sendMessage();
                 userInputElement.value = ''; // Clear the input field after sending
                 event.preventDefault();
             }

smartassist/src/static/css/clientstyle.css

@@ -16,7 +16,7 @@ h1 {
 #chatbox {
     width: calc(50% - 60px); /* Adjust width for input and button */
     /* max-width: 500px; */
-    height: 200px;
+    height: 600px;
     /* background-color: #fff8bc; */
     background-color: #ffffff;
     border-radius: 10px;

smartassist/src/static/js/frontend.js

@@ -1,88 +1,192 @@
 
+// // Get the user input element from the DOM
+// const chatbox = document.getElementById('chatbox');
+// const userInput = document.getElementById('userInput');
+
+// const parser = window.markdownit({
+//   linkify: true,
+//   strikethrough: true,
+// });
+
+// parser.enable(['table']);
+
+// // const apiEndpoint  = window.apiEndpoint;  // Get the API endpoint
+// // const useModel  = window.useModel;      // Get whether to use a model or not
+// // console.log("frontend.js - API Endpoint:  ", window.apiEndpoint);
+// // console.log("frontend.js - Use model:  ", window.useModel);
+
+// let apiEndpoint; // Make variable available outside of the scope of the event listener
+// let useModel; // Make variable available outside of the scope of the event listener
+// window.addEventListener('message', function(event) {
+//     if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
+//         const { apiEndpoint, useModel } = event.data;
+//         console.log("client.html - API Endpoint: ", apiEndpoint);
+//         console.log("client.html - use model: ", useModel);
+//         window.apiEndpoint  = apiEndpoint; 
+//         window.useModel  = useModel;
+//     }   
+// });
+
+// console.log("frontend.js  - API Endpoint:  ", window.apiEndpoint);
+// console.log("frontend.js  - Use model:  ", window.useModel);
+
+// // Define a function to send the user's message to the AI
+// function sendMessage() {
+//   // Get the user's input message and trim any whitespace
+//     const query = userInput.value.trim();
+
+//     // Check if the message is not empty
+//     if (query !== '') {
+ 
+//         // fetch(`${apiEndpoint}`, {
+//         fetch(apiEndpoint, {
+//             method: 'POST',
+//             headers: { 'Content-Type': 'application/json' },
+//             body: JSON.stringify({ query, model: useModel }), // Add these parameters here
+//             // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here
+//         })
+//         .then(response => response.json())
+//         .then(data => {
+//             // Get the AI's response from the API data
+//             const aiResponse = data.response;
+
+//             // Render the user's original message in the chatbox
+//             renderMessage(query, 'user-message');
+
+//             // Render the AI's response in the chatbox
+//             renderMessage(aiResponse, 'ai-response');
+
+//             // Clear the user input field for the next message
+//             userInput.value = '';
+//         })
+//         .catch(error => console.error('Error sending message:', error));
+//     }
+// }
+
+
+
+// // Define a function to render a message in the chatbox with a specific class name
+// function renderMessage(text, className) {
+//     // Create a new div element to hold the message
+//     const messageElement = document.createElement('div');
+
+//     // 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;
+
+//     // Use the markdown-it parser
+//     const html = parser.render(text);
+//     messageElement.innerHTML = html;
+
+//     // Append the message element to the chatbox immediately
+//     // chatbox.appendChild(messageElement);
+
+//     // Typeset math in the message element
+//     MathJax.typesetPromise([messageElement]).then(() => {
+//         // No need to append anything here, it's already appended above
+//         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
+// });
+
+
+
 // Get the user input element from the DOM
 const chatbox = document.getElementById('chatbox');
 const userInput = document.getElementById('userInput');
-
 const parser = window.markdownit({
   linkify: true,
   strikethrough: true,
 });
-
 parser.enable(['table']);
 
-console.log("frontend.js - API Endpoint: ", apiEndpoint);
-console.log("frontend.js - use model: ", useModel);
+let apiEndpoint; // Make variable available outside of the scope of the event listener
+let useModel; // Make variable available outside of the scope of the event listener
 
-// Define a function to send the user's message to the AI
-function sendMessage() {
-  // Get the user's input message and trim any whitespace
+const frontendApi = {
+  // Define a function to send the user's message to the AI
+  sendMessage: function() {
+    if (!window.apiEndpoint || !window.useModel) { // Check if we're ready before proceeding
+      console.error("Not ready yet. Please wait for apiEndpoint and useModel to be set.");
+      return;
+    }
+    
+    // Get the user's input message and trim any whitespace
     const query = userInput.value.trim();
-
     // Check if the message is not empty
     if (query !== '') {
- 
-        // fetch(`${apiEndpoint}`, {
-        fetch(apiEndpoint, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query, model: useModel }), // Add these parameters here
-            // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here
-        })
-        .then(response => response.json())
-        .then(data => {
-            // Get the AI's response from the API data
-            const aiResponse = data.response;
-
-            // Render the user's original message in the chatbox
-            renderMessage(query, 'user-message');
-
-            // Render the AI's response in the chatbox
-            renderMessage(aiResponse, 'ai-response');
-
-            // Clear the user input field for the next message
-            userInput.value = '';
-        })
-        .catch(error => console.error('Error sending message:', error));
+      fetch(window.apiEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query, model: window.useModel }), // Add these parameters here
+      })
+      .then(response => response.json())
+      .then(data => {
+        // Get the AI's response from the API data
+        const aiResponse = data.response;
+        // Render the user's original message in the chatbox
+        this.renderMessage(query, 'user-message');
+        // Render the AI's response in the chatbox
+        this.renderMessage(aiResponse, 'ai-response');
+        // Clear the user input field for the next message
+        userInput.value = '';
+      })
+      .catch(error => console.error('Error sending message:', error));
     }
-}
-
-
-
-// Define a function to render a message in the chatbox with a specific class name
-function renderMessage(text, className) {
+  },
+  // Define a function to render a message in the chatbox with a specific class name
+  renderMessage: function(text, className) {
     // Create a new div element to hold the message
     const messageElement = document.createElement('div');
-
     // 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;
-
     // Use the markdown-it parser
     const html = parser.render(text);
     messageElement.innerHTML = html;
-
     // Append the message element to the chatbox immediately
-    // chatbox.appendChild(messageElement);
+    chatbox.appendChild(messageElement);
+  },
+};
 
-    // Typeset math in the message element
-    MathJax.typesetPromise([messageElement]).then(() => {
-        // No need to append anything here, it's already appended above
-        chatbox.appendChild(messageElement);
+// Wait for the event listener to set apiEndpoint and useModel
+window.addEventListener('message', function(event) {
+  if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
+    const { apiEndpoint, useModel } = event.data;
+    console.log("fronend.js - API Endpoint: ", apiEndpoint);
+    console.log("fronend.js - use model: ", useModel);
+    window.apiEndpoint = apiEndpoint;
+    window.useModel = useModel;
+  }
+});
+
+// Wait for the DOM to be fully loaded before making the API available
+document.addEventListener('DOMContentLoaded', function() {
+  window.frontendApi = frontendApi;
+});
 
-    });
-}
 
 // 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
-    }
+  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
+  sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
 });