Update templates/index.html

templates/index.html

@@ -132,7 +132,7 @@
         }
 
         .step-section, .code-section, .output-section {
-            margin: 0 0 1px 0;
+            margin: 0 0 1px 0; /* Reduced bottom margin to make sections appear connected */
             padding: 20px;
             border-radius: 0;
             overflow-x: auto;
@@ -141,7 +141,7 @@
 
         .step-section {
             border-left: 4px solid var(--primary-color);
-            padding-left: calc(20px - 4px);
+            padding-left: calc(20px - 4px); /* Adjust padding to account for border */
             background-color: #f9f9f9;
             font-size: 16px;
             line-height: 1.8;
@@ -149,29 +149,31 @@
 
         /* Improved LaTeX styling */
         .step-section .mjx-chtml {
-            display: inline-block !important;
-            line-height: 0;
-            text-indent: 0;
-            text-align: left;
-            text-transform: none;
-            font-size: 100%;
-            font-style: normal;
-            font-weight: normal;
-            font-family: MJXZERO, MJXTEX;
-            direction: ltr;
-            margin: 0 0.2em;
-            vertical-align: -0.25em;
+             /* 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-style: normal;
+             font-weight: normal;
+             font-family: MJXZERO, MJXTEX;
+             direction: ltr;
+             vertical-align: -0.25em; /* Standard vertical alignment */
+             margin: 0 0.2em; /* Small horizontal margin */
         }
 
         .step-section .MathJax {
-            display: inline !important;
-            font-size: 100% !important;
-            text-align: left;
+             /* Default MathJax container styling */
+             display: inline;
+             font-size: 100% !important; /* Ensure inline MathJax respects container font size */
+             text-align: left;
         }
 
         /* Fix for inline math to prevent weird line breaks */
         .step-section p {
-            display: block;
+            display: block; /* Paragraphs should be block elements */
             margin-block-start: 1em;
             margin-block-end: 1em;
             margin-inline-start: 0px;
@@ -189,9 +191,9 @@
         }
 
         .code-section {
-            background-color: transparent;
-            padding: 0;
-            border-left: none;
+            background-color: transparent; /* Background handled by code-content */
+            padding: 0; /* Padding handled by code-content */
+            border-left: none; /* No left border */
         }
 
         .code-header {
@@ -203,6 +205,7 @@
             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;
         }
@@ -216,6 +219,7 @@
             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;
         }
@@ -229,23 +233,28 @@
             font-size: 14px;
             white-space: pre-wrap;
             overflow-x: auto;
-            border-left: none;
+            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 */
-        #solution > div:first-child,
+        #solution > div:first-child {
+             border-top-left-radius: 8px;
+             border-top-right-radius: 8px;
+        }
+
         #solution > div:first-child .code-header {
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
+             border-top-left-radius: 8px;
+             border-top-right-radius: 8px;
         }
 
-        #solution > div:last-child,
-        #solution > div:last-child .code-content,
-        #solution > div:last-child.output-section {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
+
+        #solution > div:last-child {
+             border-bottom-left-radius: 8px;
+             border-bottom-right-radius: 8px;
+             margin-bottom: 0; /* Remove extra margin on the last child */
         }
 
         #solution > .code-section:last-child .code-content {
@@ -253,19 +262,48 @@
             border-bottom-right-radius: 8px;
         }
 
-        #solution > .code-section:not(:last-child) .code-content {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+         /* 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 {
+             border-bottom-left-radius: 8px;
+             border-bottom-right-radius: 8px;
+             margin-bottom: 0;
+        }
+
+         /* Specific case for a single output section */
+        #solution > .output-section:only-child {
+             border-top-left-radius: 8px;
+             border-top-right-radius: 8px;
+             border-bottom-left-radius: 8px;
+             border-bottom-right-radius: 8px;
+             margin-bottom: 0;
         }
 
+        /* Remove bottom border/margin 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;
+        }
+
+
         /* Fixed display of MathJax content */
         .mjx-container {
             display: inline-block !important;
             margin: 0 !important;
             text-align: center !important;
-            overflow-x: auto;
+            overflow-x: auto; /* Allow horizontal scrolling for large inline equations */
             overflow-y: hidden;
             padding: 0 !important;
+            vertical-align: middle; /* Better vertical alignment for inline math */
         }
 
         .mjx-container.MJX-display {
@@ -273,6 +311,8 @@
             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 */
@@ -304,20 +344,20 @@
         .executing-indicator { background-color: #ede7f6; color: #5e35b1; }
         .answering-indicator { background-color: #e8f5e9; color: #2e7d32; }
 
-        .indicator-icon { 
-            margin-right: 12px; 
-            animation: pulse 1.5s infinite ease-in-out; 
+        .indicator-icon {
+            margin-right: 12px;
+            animation: pulse 1.5s infinite ease-in-out;
             font-size: 1.1rem;
         }
-        
-        @keyframes pulse { 
-            0% { opacity: 0.6; } 
-            50% { opacity: 1; } 
-            100% { opacity: 0.6; } 
+
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
         }
 
         /* Fix assistive MML elements */
-        mjx-assistive-mml { 
+        mjx-assistive-mml {
             position: absolute !important;
             top: 0 !important;
             left: 0 !important;
@@ -327,13 +367,15 @@
         }
 
         /* Unified consistent LaTeX size for all equations */
-        .step-section .MathJax {
-            font-size: 16px !important;
+        /* Ensure MathJax respects container font size */
+        .step-section .MathJax,
+        .step-section .mjx-container {
+            font-size: inherit !important;
         }
-        
+
         .step-section .MathJax_Display {
             text-align: center !important;
-            margin: 1em 0 !important;
+            margin: 1em auto !important;
             display: block !important;
             overflow-x: auto;
             overflow-y: hidden;
@@ -408,395 +450,34 @@
     <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: {
-                inlineMath: [['
-    </script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-
-    <script>
-        document.getElementById('imageInput').addEventListener('change', function(event) {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.getElementById('preview').src = e.target.result;
-                    document.getElementById('imagePreview').style.display = 'block';
-                    document.getElementById('solveButton').style.display = 'inline-block';
-                    document.getElementById('uploadStatus').textContent = `Image sélectionnée : ${file.name}`;
-                }
-                reader.readAsDataURL(file);
-            }
-        });
-
-        document.getElementById('solveButton').addEventListener('click', function() {
-            const formData = new FormData(document.getElementById('imageForm'));
-            const solutionOutput = document.getElementById('solutionOutput');
-            const loadingIndicator = document.getElementById('loadingIndicator');
-            const solutionContainer = document.getElementById('solution');
-
-            solutionOutput.style.display = 'block';
-            loadingIndicator.style.display = 'flex';
-            solutionContainer.innerHTML = '';
-
-            fetch('/solved', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`Erreur serveur: ${response.statusText}`);
-                }
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let buffer = '';
-
-                function processStream({ done, value }) {
-                    if (done) {
-                        loadingIndicator.style.display = 'none';
-                        // Force MathJax to reprocess entire solution when done
-                        if (typeof MathJax !== 'undefined') {
-                            MathJax.typesetPromise([solutionContainer]).catch(e => console.error('MathJax final typesetting error:', e));
-                        }
-                        return;
-                    }
-
-                    buffer += decoder.decode(value, { stream: true });
-                    const lines = buffer.split(/\r?\n\r?\n/);
-                    buffer = lines.pop();
-
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
-                            try {
-                                const data = JSON.parse(line.substr(6));
-
-                                if (data.mode) {
-                                    const modes = {
-                                        thinking: { icon: 'fa-brain', text: 'Je réfléchis...', class: 'thinking-indicator' },
-                                        answering: { icon: 'fa-pencil-alt', text: 'Rédaction...', class: 'answering-indicator' },
-                                        executing_code: { icon: 'fa-code', text: 'Exécution...', class: 'executing-indicator' },
-                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-indicator' }
-                                    };
-                                    const modeInfo = modes[data.mode];
-                                    if (modeInfo) {
-                                        loadingIndicator.className = modeInfo.class;
-                                        loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
-                                    }
-                                }
-
-                                if (data.content) {
-                                    const content = data.content;
-                                    const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = content;
-
-                                    const codeSection = tempDiv.querySelector('.code-section');
-                                    const outputSection = tempDiv.querySelector('.output-section');
-
-                                    if (codeSection) {
-                                        solutionContainer.appendChild(codeSection);
-                                        codeSection.querySelectorAll('pre code').forEach((block) => {
-                                            hljs.highlightElement(block);
-                                        });
-                                    } else if (outputSection) {
-                                        solutionContainer.appendChild(outputSection);
-                                    } else {
-                                        // Process regular text/LaTeX step section
-                                        const stepDiv = document.createElement('div');
-                                        stepDiv.className = 'step-section';
-                                        
-                                        // Fix markdown content before adding
-                                        let processedContent = content;
-                                        
-                                        // Ensure proper paragraph breaks
-                                        processedContent = processedContent.replace(/\n\n/g, '</p><p>');
-                                        
-                                        // Wrap in paragraph tags if not already
-                                        if (!processedContent.startsWith('<p>')) {
-                                            processedContent = '<p>' + processedContent;
-                                        }
-                                        if (!processedContent.endsWith('</p>')) {
-                                            processedContent = processedContent + '</p>';
-                                        }
-                                        
-                                        // Fix lists in markdown
-                                        processedContent = processedContent.replace(/<p>(\s*[-*]\s+.*?)<\/p>/g, '<ul><li>$1</li></ul>');
-                                        processedContent = processedContent.replace(/<p>(\s*\d+\.\s+.*?)<\/p>/g, '<ol><li>$1</li></ol>');
-                                        
-                                        stepDiv.innerHTML = processedContent;
-                                        solutionContainer.appendChild(stepDiv);
-                                        
-                                        // Process MathJax for this section
-                                        if (typeof MathJax !== 'undefined') {
-                                            MathJax.typesetPromise([stepDiv]).catch(e => console.error('MathJax typesetting error:', e));
-                                        }
-                                    }
-                                }
-
-                                if (data.error) {
-                                    const errorDiv = document.createElement('div');
-                                    errorDiv.className = 'step-section';
-                                    errorDiv.style.color = 'red';
-                                    errorDiv.style.backgroundColor = '#ffeeee';
-                                    errorDiv.style.borderColor = 'red';
-                                    errorDiv.textContent = `Erreur: ${data.error}`;
-                                    solutionContainer.appendChild(errorDiv);
-                                    loadingIndicator.style.display = 'none';
-                                }
-                            } catch (e) {
-                                console.error('Error parsing JSON or processing chunk:', e, line);
-                                const errorDiv = document.createElement('div');
-                                errorDiv.className = 'step-section';
-                                errorDiv.style.color = 'orange';
-                                errorDiv.textContent = `Erreur traitement chunk: ${line.substring(0, 100)}...`;
-                                solutionContainer.appendChild(errorDiv);
-                            }
-                        }
-                    }
-
-                    window.scrollTo(0, document.body.scrollHeight);
-                    return reader.read().then(processStream);
-                }
-
-                return reader.read().then(processStream);
-            })
-            .catch(error => {
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'step-section';
-                errorDiv.style.color = 'red';
-                errorDiv.style.backgroundColor = '#ffeeee';
-                errorDiv.style.borderColor = 'red';
-                errorDiv.textContent = `Erreur de connexion ou du serveur: ${error}`;
-                solutionContainer.appendChild(errorDiv);
-                loadingIndicator.style.display = 'none';
-                console.error('Fetch error:', error);
-            });
-        });
-
-        // Helper function to ensure proper markdown formatting
-        function processMarkdown(content) {
-            // Process lists
-            content = content.replace(/^(\s*[-*]\s+.*?)$/gm, '<li>$1</li>');
-            content = content.replace(/^(\s*\d+\.\s+.*?)$/gm, '<li>$1</li>');
-            
-            // Wrap adjacent list items in proper containers
-            content = content.replace(/<li>.*?<\/li>(\s*<li>.*?<\/li>)+/g, match => {
-                if (match.includes('*') || match.includes('-')) {
-                    return '<ul>' + match + '</ul>';
-                } else {
-                    return '<ol>' + match + '</ol>';
-                }
-            });
-            
-            return content;
-        }
-    </script>
-</body>
-</html>, '
-    </script>
-    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
-
-    <script>
-        document.getElementById('imageInput').addEventListener('change', function(event) {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.getElementById('preview').src = e.target.result;
-                    document.getElementById('imagePreview').style.display = 'block';
-                    document.getElementById('solveButton').style.display = 'inline-block';
-                    document.getElementById('uploadStatus').textContent = `Image sélectionnée : ${file.name}`;
-                }
-                reader.readAsDataURL(file);
-            }
-        });
-
-        document.getElementById('solveButton').addEventListener('click', function() {
-            const formData = new FormData(document.getElementById('imageForm'));
-            const solutionOutput = document.getElementById('solutionOutput');
-            const loadingIndicator = document.getElementById('loadingIndicator');
-            const solutionContainer = document.getElementById('solution');
-
-            solutionOutput.style.display = 'block';
-            loadingIndicator.style.display = 'flex';
-            solutionContainer.innerHTML = '';
-
-            fetch('/solved', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`Erreur serveur: ${response.statusText}`);
-                }
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let buffer = '';
-
-                function processStream({ done, value }) {
-                    if (done) {
-                        loadingIndicator.style.display = 'none';
-                        // Force MathJax to reprocess entire solution when done
-                        if (typeof MathJax !== 'undefined') {
-                            MathJax.typesetPromise([solutionContainer]).catch(e => console.error('MathJax final typesetting error:', e));
-                        }
-                        return;
-                    }
-
-                    buffer += decoder.decode(value, { stream: true });
-                    const lines = buffer.split(/\r?\n\r?\n/);
-                    buffer = lines.pop();
-
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
-                            try {
-                                const data = JSON.parse(line.substr(6));
-
-                                if (data.mode) {
-                                    const modes = {
-                                        thinking: { icon: 'fa-brain', text: 'Je réfléchis...', class: 'thinking-indicator' },
-                                        answering: { icon: 'fa-pencil-alt', text: 'Rédaction...', class: 'answering-indicator' },
-                                        executing_code: { icon: 'fa-code', text: 'Exécution...', class: 'executing-indicator' },
-                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-indicator' }
-                                    };
-                                    const modeInfo = modes[data.mode];
-                                    if (modeInfo) {
-                                        loadingIndicator.className = modeInfo.class;
-                                        loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
-                                    }
-                                }
-
-                                if (data.content) {
-                                    const content = data.content;
-                                    const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = content;
-
-                                    const codeSection = tempDiv.querySelector('.code-section');
-                                    const outputSection = tempDiv.querySelector('.output-section');
-
-                                    if (codeSection) {
-                                        solutionContainer.appendChild(codeSection);
-                                        codeSection.querySelectorAll('pre code').forEach((block) => {
-                                            hljs.highlightElement(block);
-                                        });
-                                    } else if (outputSection) {
-                                        solutionContainer.appendChild(outputSection);
-                                    } else {
-                                        // Process regular text/LaTeX step section
-                                        const stepDiv = document.createElement('div');
-                                        stepDiv.className = 'step-section';
-                                        
-                                        // Fix markdown content before adding
-                                        let processedContent = content;
-                                        
-                                        // Ensure proper paragraph breaks
-                                        processedContent = processedContent.replace(/\n\n/g, '</p><p>');
-                                        
-                                        // Wrap in paragraph tags if not already
-                                        if (!processedContent.startsWith('<p>')) {
-                                            processedContent = '<p>' + processedContent;
-                                        }
-                                        if (!processedContent.endsWith('</p>')) {
-                                            processedContent = processedContent + '</p>';
-                                        }
-                                        
-                                        // Fix lists in markdown
-                                        processedContent = processedContent.replace(/<p>(\s*[-*]\s+.*?)<\/p>/g, '<ul><li>$1</li></ul>');
-                                        processedContent = processedContent.replace(/<p>(\s*\d+\.\s+.*?)<\/p>/g, '<ol><li>$1</li></ol>');
-                                        
-                                        stepDiv.innerHTML = processedContent;
-                                        solutionContainer.appendChild(stepDiv);
-                                        
-                                        // Process MathJax for this section
-                                        if (typeof MathJax !== 'undefined') {
-                                            MathJax.typesetPromise([stepDiv]).catch(e => console.error('MathJax typesetting error:', e));
-                                        }
-                                    }
-                                }
-
-                                if (data.error) {
-                                    const errorDiv = document.createElement('div');
-                                    errorDiv.className = 'step-section';
-                                    errorDiv.style.color = 'red';
-                                    errorDiv.style.backgroundColor = '#ffeeee';
-                                    errorDiv.style.borderColor = 'red';
-                                    errorDiv.textContent = `Erreur: ${data.error}`;
-                                    solutionContainer.appendChild(errorDiv);
-                                    loadingIndicator.style.display = 'none';
-                                }
-                            } catch (e) {
-                                console.error('Error parsing JSON or processing chunk:', e, line);
-                                const errorDiv = document.createElement('div');
-                                errorDiv.className = 'step-section';
-                                errorDiv.style.color = 'orange';
-                                errorDiv.textContent = `Erreur traitement chunk: ${line.substring(0, 100)}...`;
-                                solutionContainer.appendChild(errorDiv);
-                            }
-                        }
-                    }
-
-                    window.scrollTo(0, document.body.scrollHeight);
-                    return reader.read().then(processStream);
-                }
-
-                return reader.read().then(processStream);
-            })
-            .catch(error => {
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'step-section';
-                errorDiv.style.color = 'red';
-                errorDiv.style.backgroundColor = '#ffeeee';
-                errorDiv.style.borderColor = 'red';
-                errorDiv.textContent = `Erreur de connexion ou du serveur: ${error}`;
-                solutionContainer.appendChild(errorDiv);
-                loadingIndicator.style.display = 'none';
-                console.error('Fetch error:', error);
-            });
-        });
-
-        // Helper function to ensure proper markdown formatting
-        function processMarkdown(content) {
-            // Process lists
-            content = content.replace(/^(\s*[-*]\s+.*?)$/gm, '<li>$1</li>');
-            content = content.replace(/^(\s*\d+\.\s+.*?)$/gm, '<li>$1</li>');
-            
-            // Wrap adjacent list items in proper containers
-            content = content.replace(/<li>.*?<\/li>(\s*<li>.*?<\/li>)+/g, match => {
-                if (match.includes('*') || match.includes('-')) {
-                    return '<ul>' + match + '</ul>';
-                } else {
-                    return '<ol>' + match + '</ol>';
-                }
-            });
-            
-            return content;
-        }
-    </script>
-</body>
-</html>], ['\\(', '\\)']],
-                displayMath: [['$', '$'], ['\\[', '\\]']],
+                inlineMath: [['$', '$'], ['\\(', '\\)']], // Correct inline delimiters
+                displayMath: [['$$', '$$'], ['\\[', '\\]']], // Correct block delimiters
                 processEscapes: true,
                 processEnvironments: true,
                 packages: {'[+]': ['noerrors', 'physics', 'cancel', 'color']}
             },
             options: {
                 enableMenu: false,
-                ignoreHtmlClass: 'code-content',
-                processHtmlClass: 'step-section|latex-display',
+                ignoreHtmlClass: 'code-content', // Don't process code blocks
+                processHtmlClass: 'step-section|latex-display', // Only process step and latex-display sections
                 skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
             },
             loader: {
-                load: ['input/tex-full', 'output/svg']
+                load: ['input/tex-full', 'output/svg'] // Load full TeX input and SVG output
             },
             svg: {
                 fontCache: 'global',
-                scale: 1,        // Global scaling factor for all expressions
+                scale: 1,        // Global scaling factor
                 minScale: 1,     // Minimum scaling factor
-                mtextInheritFont: true, // True to make mtext elements use surrounding font
-                merrorInheritFont: true, // True to make merror text use surrounding font
-                mathmlSpacing: false    // True for MathML spacing rules, false for TeX rules
+                mtextInheritFont: true, // mtext uses surrounding font
+                merrorInheritFont: true, // merror uses surrounding font
+                mathmlSpacing: false    // TeX spacing rules
             },
-            chtml: {
+            chtml: { // Also configure for CHTML output as a fallback or alternative
                 scale: 1,
                 minScale: 1,
                 mtextInheritFont: true,
@@ -804,7 +485,8 @@
             }
         };
     </script>
-    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
+    <!-- MathJax v3 Script -->
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
 
     <script>
         document.getElementById('imageInput').addEventListener('change', function(event) {
@@ -829,15 +511,18 @@
 
             solutionOutput.style.display = 'block';
             loadingIndicator.style.display = 'flex';
-            solutionContainer.innerHTML = '';
+            solutionContainer.innerHTML = ''; // Clear previous solution
 
-            fetch('/solved', {
+            fetch('/solved', { // Assuming the Flask endpoint is '/solved'
                 method: 'POST',
                 body: formData
             })
             .then(response => {
                 if (!response.ok) {
-                    throw new Error(`Erreur serveur: ${response.statusText}`);
+                    // Attempt to read error message from body if available
+                    return response.text().then(text => {
+                        throw new Error(`Erreur serveur: ${response.status} ${response.statusText}\n${text}`);
+                    });
                 }
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
@@ -854,38 +539,47 @@
                     }
 
                     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();
+                    buffer = lines.pop(); // Store the last potentially incomplete chunk
 
                     for (const line of lines) {
+                         // Only process lines that start with 'data: ' for SSE
                         if (line.startsWith('data: ')) {
                             try {
-                                const data = JSON.parse(line.substr(6));
+                                const data = JSON.parse(line.substr(6)); // Extract JSON after 'data: '
 
+                                // Handle mode updates
                                 if (data.mode) {
                                     const modes = {
                                         thinking: { icon: 'fa-brain', text: 'Je réfléchis...', class: 'thinking-indicator' },
                                         answering: { icon: 'fa-pencil-alt', text: 'Rédaction...', class: 'answering-indicator' },
                                         executing_code: { icon: 'fa-code', text: 'Exécution...', class: 'executing-indicator' },
-                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-indicator' }
+                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-indicator' } // Use executing indicator for results too, or create a new one
                                     };
                                     const modeInfo = modes[data.mode];
                                     if (modeInfo) {
-                                        loadingIndicator.className = modeInfo.class;
-                                        loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
+                                        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
+                                    } 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>`;
                                     }
                                 }
 
+                                // Handle content blocks
                                 if (data.content) {
                                     const content = data.content;
                                     const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = content;
+                                    tempDiv.innerHTML = content; // Parse HTML chunk
 
                                     const codeSection = tempDiv.querySelector('.code-section');
                                     const outputSection = tempDiv.querySelector('.output-section');
 
                                     if (codeSection) {
                                         solutionContainer.appendChild(codeSection);
+                                        // Highlight code within the added section
                                         codeSection.querySelectorAll('pre code').forEach((block) => {
                                             hljs.highlightElement(block);
                                         });
@@ -895,63 +589,99 @@
                                         // Process regular text/LaTeX step section
                                         const stepDiv = document.createElement('div');
                                         stepDiv.className = 'step-section';
-                                        
-                                        // Fix markdown content before adding
+
+                                        // Basic markdown processing for lists (more robust processing might need a library)
                                         let processedContent = content;
-                                        
-                                        // Ensure proper paragraph breaks
-                                        processedContent = processedContent.replace(/\n\n/g, '</p><p>');
-                                        
-                                        // Wrap in paragraph tags if not already
-                                        if (!processedContent.startsWith('<p>')) {
-                                            processedContent = '<p>' + processedContent;
-                                        }
-                                        if (!processedContent.endsWith('</p>')) {
-                                            processedContent = processedContent + '</p>';
+
+                                        // 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 = '';
+                                        let inList = false;
+                                        let listType = ''; // 'ul' or 'ol'
+
+                                        processedContent.split('\n').forEach(line => {
+                                            if (line.startsWith('<li>')) {
+                                                const itemType = line.match(/^\d+\./) ? 'ol' : 'ul';
+                                                if (!inList) {
+                                                    listType = itemType;
+                                                    listHtml += `<${listType}>${line}`;
+                                                    inList = true;
+                                                } else if (listType === itemType) {
+                                                    listHtml += line;
+                                                } else {
+                                                    // Different list type, close previous and start new
+                                                    listHtml += `</${listType}><${itemType}>${line}`;
+                                                    listType = itemType;
+                                                }
+                                            } else {
+                                                if (inList) {
+                                                    listHtml += `</${listType}>`;
+                                                    inList = false;
+                                                }
+                                                listHtml += `<p>${line}</p>`; // Wrap non-list lines in paragraphs
+                                            }
+                                        });
+
+                                        if (inList) {
+                                            listHtml += `</${listType}>`;
                                         }
-                                        
-                                        // Fix lists in markdown
-                                        processedContent = processedContent.replace(/<p>(\s*[-*]\s+.*?)<\/p>/g, '<ul><li>$1</li></ul>');
-                                        processedContent = processedContent.replace(/<p>(\s*\d+\.\s+.*?)<\/p>/g, '<ol><li>$1</li></ol>');
-                                        
-                                        stepDiv.innerHTML = processedContent;
+
+                                        // Clean up empty paragraph tags that might have been created
+                                        listHtml = listHtml.replace(/<p><\/p>/g, '');
+
+
+                                        stepDiv.innerHTML = listHtml; // Use the processed HTML
                                         solutionContainer.appendChild(stepDiv);
-                                        
-                                        // Process MathJax for this section
+
+                                        // Process MathJax for this section (will process the new content)
                                         if (typeof MathJax !== 'undefined') {
                                             MathJax.typesetPromise([stepDiv]).catch(e => console.error('MathJax typesetting error:', e));
                                         }
                                     }
                                 }
 
+                                // Handle error messages
                                 if (data.error) {
                                     const errorDiv = document.createElement('div');
-                                    errorDiv.className = 'step-section';
+                                    errorDiv.className = 'step-section'; // Use step section styling for errors
                                     errorDiv.style.color = 'red';
                                     errorDiv.style.backgroundColor = '#ffeeee';
                                     errorDiv.style.borderColor = 'red';
                                     errorDiv.textContent = `Erreur: ${data.error}`;
                                     solutionContainer.appendChild(errorDiv);
-                                    loadingIndicator.style.display = 'none';
+                                    loadingIndicator.style.display = 'none'; // Hide loading indicator on error
                                 }
                             } catch (e) {
                                 console.error('Error parsing JSON or processing chunk:', e, line);
+                                // 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)}...`;
+                                errorDiv.textContent = `Erreur traitement chunk: ${line.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);
                         }
                     }
 
-                    window.scrollTo(0, document.body.scrollHeight);
+                    // Scroll to the bottom of the solution container as new content arrives
+                    solutionOutput.scrollTop = solutionOutput.scrollHeight;
+
+                    // Continue reading the stream
                     return reader.read().then(processStream);
                 }
 
+                // Start processing the stream
                 return reader.read().then(processStream);
             })
             .catch(error => {
+                // Handle errors during the fetch or from the initial response check
                 const errorDiv = document.createElement('div');
                 errorDiv.className = 'step-section';
                 errorDiv.style.color = 'red';
@@ -964,23 +694,6 @@
             });
         });
 
-        // Helper function to ensure proper markdown formatting
-        function processMarkdown(content) {
-            // Process lists
-            content = content.replace(/^(\s*[-*]\s+.*?)$/gm, '<li>$1</li>');
-            content = content.replace(/^(\s*\d+\.\s+.*?)$/gm, '<li>$1</li>');
-            
-            // Wrap adjacent list items in proper containers
-            content = content.replace(/<li>.*?<\/li>(\s*<li>.*?<\/li>)+/g, match => {
-                if (match.includes('*') || match.includes('-')) {
-                    return '<ul>' + match + '</ul>';
-                } else {
-                    return '<ol>' + match + '</ol>';
-                }
-            });
-            
-            return content;
-        }
     </script>
 </body>
 </html>