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

smartassist/src/backend.py

@@ -33,8 +33,8 @@ def index():
     logger.debug("API endpoint: %s", api_endpoint)
     with open('smartassist/src/html/client.html', 'r') as f:
         client_html = f.read()
-    # logger.debug("Client HTML (first few characters): %s", client_html[:50]) # Print to see if it's loading
+    logger.debug("Client HTML (first few characters): %s", client_html[:50]) # Print to see if it's loading
-    logger.debug("Client HTML (first few characters): %s", client_html) # Print to see if it's loading
+    # logger.debug("Client HTML (all characters): %s", client_html) # Print to see if it's loading
 
     return render_template('index.html', api_endpoint=api_endpoint, client_content=client_html)
 

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);

smartassist/src/templates/index.html

@@ -4,25 +4,30 @@
 <!-- <title>Frontend</title> -->
 </head>
 <body>
+    <script>
+        // Extract apiEndpoint for use in your frontend code...
+        const apiEndpoint = '{{ api_endpoint }}';  // Templating syntax (Jinja2)
+        console.log("index.html - API Endpoint: ", apiEndpoint);
+    </script>
+
     <!-- This iframe will hold the content from client.html -->
-    <iframe id="client-frame" style="width: 100%; height: 100vh;" srcdoc="{{ client_content }}"></iframe>
+    <!-- Passing the API endpoint as a query parameter to the srcdoc attribute -->
+    <iframe id="client-frame" 
+            style="width: 100%; height: 100vh;" 
+            srcdoc="{{ client_content }}?apiEndpoint={{ api_endpoint }}/">
+    </iframe>
 
     <!-- Responsive scaling and some padding -->
     <script>
-      const clientFrame = document.getElementById('client-frame');
+        const clientFrame = document.getElementById('client-frame');
       
-      function resizeIframe() {
+        function resizeIframe() {
-        clientFrame.style.height = window.innerHeight - 50 + 'px'; // Adjust the subtraction for padding/margins if needed
+            clientFrame.style.height = window.innerHeight - 50 + 'px'; // Adjust the subtraction for padding/margins if needed
-      }
+        }
       
-      window.addEventListener('resize', resizeIframe);
+        window.addEventListener('resize', resizeIframe);
-      resizeIframe(); // Call it once on page load
+        resizeIframe(); // Call it once on page load
     </script>
 
-    <script>
-    const apiEndpoint = '<%= api_endpoint %>'; // Templating syntax (Jinja2)
-    console.log("API Endpoint:", apiEndpoint);
-    // Use apiEndpoint in your frontend code...
-    </script>
 </body>
 </html>