Fortsatta försök att få med api_endpoint genom Flask till frontend.js där den behövs

smartassist/src/static/js/frontend.js

@@ -4,10 +4,80 @@ const chatbox = document.getElementById('chatbox');
 const userInput = document.getElementById('userInput');
 
 // Get API endpoint for chat from environment variable
-const apiEndpoint = process.env.BE_API_ENDPOINT || 'http://localhost:5005/api/chat'; // Default if not found
-console.log("The API Endpoint is:", apiEndpoint);
+
+// const apiEndpoint = process.env.BE_API_ENDPOINT || 'http://localhost:5005/api/chat'; // Default if not found
+// const apiEndpoint = '<%= api_endpoint %>'; // Templating syntax (Jinja2)
+// const iframe = document.getElementById('client-frame');
+// const apiEndpoint = iframe.getAttribute('data-api-endpoint');
+// console.log("frontend.js - the API Endpoint is:", apiEndpoint);
+
+// document.addEventListener('DOMContentLoaded', () => {
+//     const iframe = document.getElementById('client-frame');
+//     const iframeContentUrl = iframe.srcdoc; 
+  
+//     // Extract the query parameter 'apiEndpoint' from the URL
+//     const urlParams = new URLSearchParams(iframeContentUrl.split('?')[1]);
+//     const apiEndpoint = urlParams.get('apiEndpoint');
+  
+//     console.log("frontend.js - The API Endpoint is:", apiEndpoint); 
+// });
+
+// document.addEventListener('DOMContentLoaded', () => {
+//     setTimeout(() => { 
+//       const iframe = document.getElementById('client-frame');
+//       if (iframe) {
+//         const iframeContentUrl = iframe.srcdoc;  
+//         // Extract the query parameter 'apiEndpoint' from the URL
+//         const urlParams = new URLSearchParams(iframeContentUrl.split('?')[1]);
+//         const apiEndpoint = urlParams.get('apiEndpoint');      } else {
+//         console.error("Error: iframe element not found.");
+//       }
+//     }, 100); // Adjust this delay (in milliseconds) if needed
+//   });
+  
+// const observer = new MutationObserver(() => {
+// const iframe = document.getElementById('client-frame');
+// if (iframe) {
+//     console.log("iframe DO exist")
+//         if (iframe.srcdoc) {
+//             console.log("srcdoc exist")
+//             // Extract the query parameter 'apiEndpoint' from the URL
+//             const urlParams  = new URLSearchParams(iframe.srcdoc.split('?')[1]);
+//             const apiEndpoint  = urlParams.get('apiEndpoint');
+//             console.log("frontend.js  - The API Endpoint is:", apiEndpoint);
+//         }
+//         else {
+//             console.error("Error: iframe.srcdoc not found.");
+//             observer.disconnect(); // Stop observing once you've extracted the data
+//         }
+//     } 
+//     else {
+//         console.error("Error: iframe DOES NOT exist.");
+//         observer.disconnect(); // Stop observing once you've extracted the data
+
+//     }
+
+    
+// if (iframe && iframe.srcdoc) { // Check if iframe exists and srcdoc is populated
+//     const iframeContentUrl = iframe.srcdoc;
+//     // Extract the query parameter 'apiEndpoint' from the URL
+//     const urlParams = new URLSearchParams(iframeContentUrl.split('?')[1]);
+//     const apiEndpoint = urlParams.get('apiEndpoint');      
+//     } 
+// else {
+//     console.error("Error: iframe element not found.");      
+//     observer.disconnect(); // Stop observing once you've extracted the data
+//     }
+// });
+// observer.observe(document.body, { childList: true, subtree: true }); 
+
+// Handle resize events 
+window.addEventListener('resize', () => {
+  chatbox.style.height = 'auto';
+});
 
 
+// ... other code for sending messages ...
 
 // Define a function to send the user's message to the AI
 function sendMessage() {
@@ -18,7 +88,7 @@ function sendMessage() {
     if (query !== '') {
         // Send a POST request to the /api/chat endpoint with the message
         // fetch('http://localhost:5005/api/chat', {
-        fetch(apiEndpoint, {
+        fetch(`${apiEndpoint}`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ query }),
@@ -41,9 +111,6 @@ function sendMessage() {
     }
 }
 
-
-
-
 // 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
@@ -58,3 +125,22 @@ function renderMessage(text, className) {
     // Append the message element to the chatbox
     chatbox.appendChild(messageElement);
 }
+
+
+function handleIframeLoad() {
+    const iframe = document.getElementById('client-frame');
+  
+    if (iframe) { // Check if the iframe exists
+  
+      const apiEndpoint = iframe.getAttribute('data-api-endpoint') || iframe.srcdoc.split('?')[1].split('=')[1]; 
+      console.log("The API Endpoint is:", apiEndpoint);
+     
+      // Now you can use this 'apiEndpoint' for communication
+  
+    } else {
+      setTimeout(handleIframeLoad, 200); // Retry in a short while if iframe not found yet
+      console.log("iframe not found yet");
+    }
+  }
+   
+  window.addEventListener('load', handleIframeLoad);