Update templates/index.html

templates/index.html

@@ -126,36 +126,53 @@
             text-align: left;
             line-height: 1.8;
             font-size: 16px;
-            background-color: transparent;
+            background-color: transparent; /* Background of the container itself */
             box-shadow: var(--box-shadow);
-            overflow: hidden;
+            overflow: hidden; /* Clip children borders to parent radius */
         }
 
-        .step-section, .code-section, .output-section {
-            margin: 0 0 1px 0; /* Reduced bottom margin to make sections appear connected */
+        /* Apply common padding and margin to sections */
+        #solution > div {
             padding: 20px;
-            border-radius: 0;
+            margin: 0; /* Remove default margin */
+            border-radius: 0; /* Reset radius, applied to first/last children */
             overflow-x: auto;
-            background-color: #f9f9f9;
+            background-color: #f9f9f9; /* Default background */
+            border-left: 4px solid var(--primary-color); /* Default left border */
+             /* Added border-bottom to create separation between sections */
+            border-bottom: 1px solid #eee;
         }
 
+        .code-section {
+            background-color: transparent !important; /* Background handled by code-content */
+            padding: 0 !important; /* Padding handled by code-content */
+            border-left: none !important; /* No left border for code section parent */
+            border-bottom: none !important; /* No border bottom on code section parent */
+        }
+
+        .output-section {
+            background-color: var(--output-bg) !important; /* Override default section background */
+            border-left: none !important; /* No left border for output section parent */
+        }
+
+
         .step-section {
-            border-left: 4px solid var(--primary-color);
-            padding-left: calc(20px - 4px); /* Adjust padding to account for border */
-            background-color: #f9f9f9;
-            font-size: 16px;
-            line-height: 1.8;
+             /* Specific styles for steps */
+             border-left: 4px solid var(--primary-color);
+             padding-left: calc(20px - 4px); /* Adjust padding to account for border */
+             background-color: #f9f9f9;
+             font-size: 16px;
+             line-height: 1.8;
         }
 
-        /* Improved LaTeX styling */
+        /* Improved LaTeX styling (MathJax v3 specific) */
         .step-section .mjx-chtml {
-             /* Default MathJax inline styling */
              display: inline-block;
              line-height: 0;
              text-indent: 0;
              text-align: left;
              text-transform: none;
-             font-size: 100%; /* Ensure inline MathJax respects container font size */
+             font-size: 1em !important; /* Ensure inline MathJax respects container font size */
              font-style: normal;
              font-weight: normal;
              font-family: MJXZERO, MJXTEX;
@@ -164,13 +181,16 @@
              margin: 0 0.2em; /* Small horizontal margin */
         }
 
-        .step-section .MathJax {
-             /* Default MathJax container styling */
-             display: inline;
-             font-size: 100% !important; /* Ensure inline MathJax respects container font size */
-             text-align: left;
+         .step-section .mjx-container.MJX-display {
+            display: block !important;
+            margin: 1em auto !important;
+            text-align: center !important;
+            max-width: 100%;
+            overflow-x: auto; /* Allow horizontal scrolling for large block equations */
+            overflow-y: hidden;
         }
 
+
         /* Fix for inline math to prevent weird line breaks */
         .step-section p {
             display: block; /* Paragraphs should be block elements */
@@ -180,21 +200,6 @@
             margin-inline-end: 0px;
         }
 
-        /* Improve display for block equations */
-        .latex-display {
-            overflow-x: auto;
-            padding: 10px 0;
-            margin: 15px 0;
-            text-align: center;
-            display: block;
-            width: 100%;
-        }
-
-        .code-section {
-            background-color: transparent; /* Background handled by code-content */
-            padding: 0; /* Padding handled by code-content */
-            border-left: none; /* No left border */
-        }
 
         .code-header {
             background-color: #343a40;
@@ -205,9 +210,9 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            /* Border radius handled by first/last child rules */
-            border-top-left-radius: 0px;
-            border-top-right-radius: 0px;
+            /* Border radius handled by first child rules below */
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
         }
 
         .code-content {
@@ -219,81 +224,85 @@
             font-family: 'Courier New', monospace;
             font-size: 14px;
             line-height: 1.5;
-            /* Border radius handled by first/last child rules */
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
+            /* Border radius handled by last child rules below */
+             border-bottom-left-radius: 0;
+             border-bottom-right-radius: 0;
         }
 
-        .output-section {
-            background-color: var(--output-bg);
-            padding: 15px;
-            border-top: 1px solid #ddd;
-            color: #333;
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            white-space: pre-wrap;
-            overflow-x: auto;
-            border-left: none; /* No left border */
-            /* Border radius handled by first/last child rules */
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
 
-        /* Add border-radius back to the very first and very last child inside #solution */
+        /* Add border-radius back to the very first and very last child INSIDE #solution */
+
+        /* First child in #solution */
         #solution > div:first-child {
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
         }
-
-        #solution > div:first-child .code-header {
+        /* Special handling for the first child if it's a code section (header needs radius) */
+        #solution > .code-section:first-child .code-header {
+             border-top-left-radius: 8px;
+             border-top-right-radius: 8px;
+        }
+        /* Special handling for the first child if it's an output section */
+         #solution > .output-section:first-child {
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
         }
 
 
+        /* Last child in #solution */
         #solution > div:last-child {
              border-bottom-left-radius: 8px;
              border-bottom-right-radius: 8px;
-             margin-bottom: 0; /* Remove extra margin on the last child */
+             border-bottom: none; /* Remove the bottom border on the very last section */
         }
-
+         /* Special handling for the last child if it's a code section (content needs radius) */
         #solution > .code-section:last-child .code-content {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
-        }
-
-         /* Specific case for a single code section */
-        #solution > .code-section:only-child .code-header {
-             border-top-left-radius: 8px;
-             border-top-right-radius: 8px;
-        }
-        #solution > .code-section:only-child .code-content {
              border-bottom-left-radius: 8px;
              border-bottom-right-radius: 8px;
         }
-
-
-        #solution > .output-section:last-child {
+         /* Special handling for the last child if it's an output section */
+         #solution > .output-section:last-child {
              border-bottom-left-radius: 8px;
              border-bottom-right-radius: 8px;
-             margin-bottom: 0;
+             border-bottom: none;
         }
 
-         /* Specific case for a single output section */
-        #solution > .output-section:only-child {
+
+        /* Specific case for a single child (both first and last) */
+        #solution > div:only-child {
+            border-radius: 8px;
+            border-bottom: none;
+        }
+        #solution > .code-section:only-child .code-header {
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
+        }
+        #solution > .code-section:only-child .code-content {
              border-bottom-left-radius: 8px;
              border-bottom-right-radius: 8px;
-             margin-bottom: 0;
+        }
+         #solution > .output-section:only-child {
+             border-radius: 8px;
+              border-bottom: none;
         }
 
-        /* Remove bottom border/margin for sections that are not the last child, */
-        /* to make them appear connected to the next section */
+
+        /* Remove bottom border for sections that are not the last child,
+           to make them appear connected to the next section */
         #solution > div:not(:last-child) {
-            margin-bottom: 0;
+            border-bottom: 1px solid #eee;
         }
 
+         /* Code section should not have a bottom border even if not last */
+         #solution > .code-section {
+             border-bottom: none;
+         }
+
+         /* Output section should not have a bottom border even if not last */
+         #solution > .output-section:not(:last-child) {
+              border-bottom: 1px solid #ddd; /* Keep the separator line */
+         }
+
 
         /* Fixed display of MathJax content */
         .mjx-container {
@@ -306,14 +315,6 @@
             vertical-align: middle; /* Better vertical alignment for inline math */
         }
 
-        .mjx-container.MJX-display {
-            display: block !important;
-            margin: 1em auto !important;
-            text-align: center !important;
-            max-width: 100%;
-            overflow-x: auto; /* Allow horizontal scrolling for large block equations */
-            overflow-y: hidden;
-        }
 
         /* Fix markdown list rendering */
         .step-section ul, .step-section ol {
@@ -368,18 +369,10 @@
 
         /* Unified consistent LaTeX size for all equations */
         /* Ensure MathJax respects container font size */
-        .step-section .MathJax,
         .step-section .mjx-container {
-            font-size: inherit !important;
+            font-size: 1em !important; /* Use relative units */
         }
 
-        .step-section .MathJax_Display {
-            text-align: center !important;
-            margin: 1em auto !important;
-            display: block !important;
-            overflow-x: auto;
-            overflow-y: hidden;
-        }
     </style>
 </head>
 <body>
@@ -454,8 +447,8 @@
     <script>
         window.MathJax = {
             tex: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']], // Correct inline delimiters
-                displayMath: [['$$', '$$'], ['\\[', '\\]']], // Correct block delimiters
+                inlineMath: [['$', '$'], ['\\(', '\\)']], // Standard inline delimiters
+                displayMath: [['$$', '$$'], ['\\[', '\\]']], // Standard block delimiters
                 processEscapes: true,
                 processEnvironments: true,
                 packages: {'[+]': ['noerrors', 'physics', 'cancel', 'color']}
@@ -532,6 +525,7 @@
                     if (done) {
                         loadingIndicator.style.display = 'none';
                         // Force MathJax to reprocess entire solution when done
+                        // Use the specific container element
                         if (typeof MathJax !== 'undefined') {
                             MathJax.typesetPromise([solutionContainer]).catch(e => console.error('MathJax final typesetting error:', e));
                         }
@@ -539,15 +533,15 @@
                     }
 
                     buffer += decoder.decode(value, { stream: true });
-                    // Split by double newline to separate chunks, but keep the last incomplete chunk in buffer
-                    const lines = buffer.split(/\r?\n\r?\n/);
-                    buffer = lines.pop(); // Store the last potentially incomplete chunk
+                    // Split by double newline to separate SSE messages, but keep the last incomplete chunk in buffer
+                    const messages = buffer.split(/\r?\n\r?\n/);
+                    buffer = messages.pop(); // Store the last potentially incomplete chunk
 
-                    for (const line of lines) {
+                    for (const message of messages) {
                          // Only process lines that start with 'data: ' for SSE
-                        if (line.startsWith('data: ')) {
+                        if (message.startsWith('data: ')) {
                             try {
-                                const data = JSON.parse(line.substr(6)); // Extract JSON after 'data: '
+                                const data = JSON.parse(message.substr(6)); // Extract JSON after 'data: '
 
                                 // Handle mode updates
                                 if (data.mode) {
@@ -561,10 +555,12 @@
                                     if (modeInfo) {
                                         loadingIndicator.className = modeInfo.class; // Update class for styling
                                         loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`; // Update icon and text
+                                        loadingIndicator.style.display = 'flex'; // Ensure indicator is visible when a mode is set
                                     } else {
                                          // Default or unknown mode
                                          loadingIndicator.className = 'thinking-indicator';
                                          loadingIndicator.innerHTML = `<i class="fas fa-sync-alt indicator-icon fa-spin"></i><span>Traitement...</span>`;
+                                          loadingIndicator.style.display = 'flex';
                                     }
                                 }
 
@@ -572,7 +568,7 @@
                                 if (data.content) {
                                     const content = data.content;
                                     const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = content; // Parse HTML chunk
+                                    tempDiv.innerHTML = content; // Parse HTML chunk received from server
 
                                     const codeSection = tempDiv.querySelector('.code-section');
                                     const outputSection = tempDiv.querySelector('.output-section');
@@ -583,8 +579,10 @@
                                         codeSection.querySelectorAll('pre code').forEach((block) => {
                                             hljs.highlightElement(block);
                                         });
+                                        // MathJax should ignore code blocks based on options
                                     } else if (outputSection) {
                                         solutionContainer.appendChild(outputSection);
+                                         // MathJax should ignore output blocks based on options
                                     } else {
                                         // Process regular text/LaTeX step section
                                         const stepDiv = document.createElement('div');
@@ -594,53 +592,64 @@
                                         let processedContent = content;
 
                                         // Convert markdown lists to HTML lists
-                                        processedContent = processedContent.replace(/^(-|\*|\+)\s+(.*)$/gm, '<li>$2</li>'); // Handles -, *, + markers
-                                        processedContent = processedContent.replace(/^(\d+)\.\s+(.*)$/gm, '<li>$2</li>'); // Handles numbered lists
-
-                                        // Wrap consecutive list items in ul/ol tags
-                                        let listHtml = '';
+                                        // This is a basic approach and might not cover all markdown complexities
+                                        const lines = processedContent.split('\n');
+                                        let htmlOutput = '';
                                         let inList = false;
                                         let listType = ''; // 'ul' or 'ol'
 
-                                        processedContent.split('\n').forEach(line => {
-                                            if (line.startsWith('<li>')) {
-                                                const itemType = line.match(/^\d+\./) ? 'ol' : 'ul';
+                                        for (const line of lines) {
+                                            const trimmedLine = line.trim();
+                                            if (trimmedLine.match(/^(-|\*|\+)\s/)) { // Unordered list item
+                                                if (!inList) {
+                                                    htmlOutput += '<ul>';
+                                                    inList = true;
+                                                    listType = 'ul';
+                                                } else if (listType !== 'ul') {
+                                                     htmlOutput += `</${listType}><ul>`;
+                                                     listType = 'ul';
+                                                }
+                                                htmlOutput += `<li>${trimmedLine.replace(/^(-|\*|\+)\s+/, '')}</li>`;
+                                            } else if (trimmedLine.match(/^(\d+)\.\s/)) { // Ordered list item
                                                 if (!inList) {
-                                                    listType = itemType;
-                                                    listHtml += `<${listType}>${line}`;
+                                                    htmlOutput += '<ol>';
                                                     inList = true;
-                                                } else if (listType === itemType) {
-                                                    listHtml += line;
-                                                } else {
-                                                    // Different list type, close previous and start new
-                                                    listHtml += `</${listType}><${itemType}>${line}`;
-                                                    listType = itemType;
+                                                    listType = 'ol';
+                                                } else if (listType !== 'ol') {
+                                                     htmlOutput += `</${listType}><ol>`;
+                                                     listType = 'ol';
                                                 }
+                                                htmlOutput += `<li>${trimmedLine.replace(/^(\d+)\.\s+/, '')}</li>`;
                                             } else {
                                                 if (inList) {
-                                                    listHtml += `</${listType}>`;
+                                                    htmlOutput += `</${listType}>`;
                                                     inList = false;
                                                 }
-                                                listHtml += `<p>${line}</p>`; // Wrap non-list lines in paragraphs
+                                                // Add non-list content wrapped in paragraphs, handling double newlines
+                                                if (line.trim() !== '') {
+                                                     htmlOutput += `<p>${line}</p>`;
+                                                }
                                             }
-                                        });
+                                        }
 
                                         if (inList) {
-                                            listHtml += `</${listType}>`;
+                                            htmlOutput += `</${listType}>`;
                                         }
 
-                                        // Clean up empty paragraph tags that might have been created
-                                        listHtml = listHtml.replace(/<p><\/p>/g, '');
-
+                                        // Remove empty paragraph tags that might have been created
+                                        htmlOutput = htmlOutput.replace(/<p>\s*<\/p>/g, '');
 
-                                        stepDiv.innerHTML = listHtml; // Use the processed HTML
+                                        stepDiv.innerHTML = htmlOutput; // Use the processed HTML
                                         solutionContainer.appendChild(stepDiv);
 
-                                        // Process MathJax for this section (will process the new content)
+                                        // Process MathJax for this specific section (will process the new content)
                                         if (typeof MathJax !== 'undefined') {
+                                             // Use typesetPromise and target the newly added stepDiv
                                             MathJax.typesetPromise([stepDiv]).catch(e => console.error('MathJax typesetting error:', e));
                                         }
                                     }
+                                    // Hide the loading indicator once content starts arriving (optional, but can feel more responsive)
+                                    // loadingIndicator.style.display = 'none'; // Keep it visible to show mode changes
                                 }
 
                                 // Handle error messages
@@ -655,18 +664,18 @@
                                     loadingIndicator.style.display = 'none'; // Hide loading indicator on error
                                 }
                             } catch (e) {
-                                console.error('Error parsing JSON or processing chunk:', e, line);
+                                console.error('Error parsing JSON or processing message:', e, message);
                                 // Display a client-side processing error message
                                 const errorDiv = document.createElement('div');
                                 errorDiv.className = 'step-section';
                                 errorDiv.style.color = 'orange';
-                                errorDiv.textContent = `Erreur traitement chunk: ${line.substring(0, 100)}...`; // Show a snippet of the problematic line
+                                errorDiv.textContent = `Erreur traitement message: ${message.substring(0, 100)}...`; // Show a snippet of the problematic line
                                 solutionContainer.appendChild(errorDiv);
                                 loadingIndicator.style.display = 'none';
                             }
                         } else {
                             // Handle potential non-data lines if necessary, or ignore
-                            console.warn("Received non-data line:", line);
+                            // console.warn("Received non-data line:", message); // Uncomment for debugging
                         }
                     }