Update templates/index.html

templates/index.html

@@ -128,23 +128,41 @@
             font-size: 16px;
         }
 
+        /* Modified styles for continuous flow */
+        .step-section, .code-section, .output-section {
+            margin: 0; /* Remove vertical margins between blocks */
+            padding: 15px; /* Keep internal padding */
+            border-radius: 0; /* Remove rounded corners between blocks */
+            border-left: none; /* Remove left border */
+            overflow-x: auto;
+            white-space: pre-wrap;
+            background-color: transparent; /* Ensure consistent background or use #fff from parent */
+        }
+
+        .step-section {
+             /* If you want a subtle indicator without making it a block */
+             border-left: 4px solid var(--primary-color);
+             padding-left: calc(15px - 4px); /* Adjust padding to keep content aligned */
+             background-color: #f9f9f9; /* Background for step sections */
+        }
+
+
         .code-section {
-            margin: 20px 0;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            /* Code section has its own internal padding and background */
         }
 
         .code-header {
-            background-color: #343a40;
-            color: white;
-            padding: 8px 15px;
-            font-size: 14px;
-            font-family: 'Courier New', monospace;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
+             background-color: #343a40;
+             color: white;
+             padding: 8px 15px;
+             font-size: 14px;
+             font-family: 'Courier New', monospace;
+             display: flex;
+             justify-content: space-between;
+             align-items: center;
+             border-top-left-radius: 8px; /* Keep top radius for first code block */
+             border-top-right-radius: 8px;
+         }
 
         .code-content {
             margin: 0;
@@ -155,29 +173,44 @@
             font-family: 'Courier New', monospace;
             font-size: 14px;
             line-height: 1.5;
+            /* No border-radius here, managed by parent or siblings */
         }
 
         .output-section {
             background-color: var(--output-bg);
             padding: 15px;
-            border-radius: 0 0 8px 8px;
-            border-top: 1px solid #ddd;
+            border-top: 1px solid #ddd; /* Separator from code */
             color: #333;
             font-family: 'Courier New', monospace;
             font-size: 14px;
             white-space: pre-wrap;
             overflow-x: auto;
+            border-bottom-left-radius: 8px; /* Keep bottom radius for last output block */
+            border-bottom-right-radius: 8px;
         }
 
-        .step-section {
-            margin: 25px 0;
-            padding: 15px;
-            background-color: #f9f9f9;
-            border-left: 4px solid var(--primary-color);
-            border-radius: 0 8px 8px 0;
-            overflow-x: auto; /* Pour les formules LaTeX larges */
-            white-space: pre-wrap; /* Preserve whitespace/line breaks from stream */
+        /* Add border-radius back to the very first and very last child inside #solution */
+        #solution > div:first-child {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
         }
+         /* Special case for first code header */
+        #solution .code-section:first-child .code-header {
+             border-top-left-radius: 8px;
+             border-top-right-radius: 8px;
+        }
+
+
+        #solution > div:last-child {
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+        /* Special case for last code content (if not followed by output) */
+         #solution .code-section:last-child .code-content:last-child:not(+.output-section) {
+             border-bottom-left-radius: 8px;
+             border-bottom-right-radius: 8px;
+         }
+
 
         .latex-display {
             overflow-x: auto;
@@ -221,25 +254,23 @@
             100% { opacity: 0.6; }
         }
 
-        /* Styles spécifiques à MathJax pour le rendu */
-        /* Ensure rendered math doesn't cause excessive layout shifts or overflow */
         mjx-container {
             overflow-x: auto;
             overflow-y: hidden;
-            display: block; /* Treat block math as a block */
-            margin: 1em 0; /* Add some vertical spacing */
-            text-align: initial; /* Inherit text alignment from parent */
+            display: block;
+            margin: 1em 0;
+            text-align: initial;
+            padding: 0 !important;
         }
-        mjx-assistive-mml { /* Hide the assistive MML */
+        mjx-assistive-mml {
              display: none !important;
         }
 
-        /* Ensure inline math flows correctly */
         .MathJax nobr,.MathJax .mjx-chtml{
-            display: inline-block !important; /* Keep inline math inline */
-            white-space: normal !important; /* Allow text wrapping around inline math */
+            display: inline-block !important;
+            white-space: normal !important;
         }
-        .step-section span.MathJax_Preview { /* Hide MathJax preview spans */
+        .step-section span.MathJax_Preview {
             display: none !important;
         }
 
@@ -310,7 +341,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
 
-    <!-- MathJax Configuration -->
     <script>
         window.MathJax = {
             tex: {
@@ -321,10 +351,10 @@
                 packages: {'[+]': ['ams', 'noerrors', 'physics', 'cancel', 'color', 'mhchem', 'mathtools']}
             },
             options: {
-                enableMenu: false, // Disable menu
-                ignoreHtmlClass: 'code-content', // Don't process code blocks
-                processHtmlClass: 'step-section|latex-display', // Only process these classes
-                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Skip these tags
+                enableMenu: false,
+                ignoreHtmlClass: 'code-content',
+                processHtmlClass: 'step-section|latex-display',
+                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
             },
             loader: {
                 load: ['[tex]/ams', '[tex]/noerrors', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/mhchem', '[tex]/mathtools']
@@ -334,7 +364,6 @@
             }
         };
     </script>
-    <!-- Load MathJax library -->
     <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
 
     <script>
@@ -360,7 +389,7 @@
 
             solutionOutput.style.display = 'block';
             loadingIndicator.style.display = 'flex';
-            solution.innerHTML = ''; // Clear previous solution
+            solution.innerHTML = '';
 
             fetch('/solved', {
                 method: 'POST',
@@ -374,15 +403,12 @@
                 function processStream({ done, value }) {
                     if (done) {
                         loadingIndicator.style.display = 'none';
-                        // Optional: Final typeset on the whole container if needed, but per-chunk should be enough
-                        // MathJax.typesetPromise([solution]).catch(e => console.error('Final MathJax typesetting error:', e));
                         return;
                     }
 
                     buffer += decoder.decode(value, { stream: true });
-                    // Split by two newlines to get distinct chunks from the stream
                     const lines = buffer.split('\n\n');
-                    buffer = lines.pop(); // Keep the last potentially incomplete chunk
+                    buffer = lines.pop();
 
                     for (const line of lines) {
                         if (line.startsWith('data: ')) {
@@ -390,7 +416,6 @@
                                 const data = JSON.parse(line.substr(6));
 
                                 if (data.mode) {
-                                    // Update loading indicator based on mode
                                     if (data.mode === 'thinking') {
                                         loadingIndicator.className = 'thinking-indicator';
                                         loadingIndicator.innerHTML = '<i class="fas fa-brain indicator-icon"></i><span>Je réfléchis au problème...</span>';
@@ -408,14 +433,10 @@
 
                                 if (data.content) {
                                     const content = data.content;
-
-                                    // Create a container for this new content chunk
                                     const contentContainer = document.createElement('div');
 
                                     if (content.includes('```python')) {
-                                        // Code block
                                         const codeHtml = content.replace(/```python\n([\s\S]*?)\n```/g, function(match, p1) {
-                                            // Use <pre> and <code> for Highlight.js
                                             return `<div class="code-section">
                                                 <div class="code-header">
                                                     <span>Code Python</span>
@@ -425,26 +446,21 @@
                                         });
                                         contentContainer.innerHTML = codeHtml;
                                         solution.appendChild(contentContainer);
-                                        // Apply syntax highlighting
                                         contentContainer.querySelectorAll('pre code').forEach((block) => {
                                             hljs.highlightElement(block);
                                         });
-                                    } else if (content.includes('Résultat d\'exécution:')) {
-                                        // Code output block
+                                    }
+                                    else if (content.includes('Résultat d\'exécution:')) {
                                          const outputHtml = content.replace(/Résultat d'exécution:\n```\n([\s\S]*?)\n```/g, function(match, p1) {
                                             return `<div class="output-section">${p1}</div>`;
                                         });
                                         contentContainer.innerHTML = outputHtml;
                                         solution.appendChild(contentContainer);
-                                    } else {
-                                        // Regular text, might contain LaTeX.
-                                        // Add a class that MathJax is configured to process.
+                                    }
+                                    else {
                                         contentContainer.className = 'step-section';
                                         contentContainer.innerHTML = content;
                                         solution.appendChild(contentContainer);
-
-                                        // Tell MathJax to process the newly added content container
-                                        // MathJax.typesetPromise takes an array of elements or element IDs.
                                         MathJax.typesetPromise([contentContainer]).catch(e => console.error('MathJax typesetting error:', e));
                                     }
                                 }
@@ -458,7 +474,7 @@
                                     errorDiv.style.borderRadius = '5px';
                                     errorDiv.textContent = `Erreur: ${data.error}`;
                                     solution.appendChild(errorDiv);
-                                    loadingIndicator.style.display = 'none'; // Hide loading on error
+                                    loadingIndicator.style.display = 'none';
                                 }
                             } catch (e) {
                                 console.error('Error parsing JSON from stream:', e, line);
@@ -466,14 +482,11 @@
                         }
                     }
 
-                    // Scroll to bottom as new content arrives
                     window.scrollTo(0, document.body.scrollHeight);
 
-                    // Read the next chunk from the stream
                     return reader.read().then(processStream);
                 }
 
-                // Start reading the stream
                 return reader.read().then(processStream);
             })
             .catch(error => {
@@ -485,7 +498,7 @@
                 errorDiv.style.borderRadius = '5px';
                 errorDiv.textContent = `Erreur de connexion ou du serveur: ${error}`;
                 solution.appendChild(errorDiv);
-                loadingIndicator.style.display = 'none'; // Hide loading on fetch error
+                loadingIndicator.style.display = 'none';
                 console.error('Fetch error:', error);
             });
         });