test_frontend.html

<!DOCTYPE html>
<html>
<head>
    <title>Test Frontend</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
</head>
<body>
    <h1>Test du streaming comme le frontend réel</h1>
    <button onclick="testStream()">Tester le stream</button>
    <div id="messages" style="border: 1px solid black; padding: 10px; min-height: 200px;"></div>
    <div id="output"></div>

    <script>
        marked.setOptions({
            breaks: true,
            gfm: true
        });

        function addMessage(role, content) {
            console.log('addMessage called with role:', role, 'content:', content);
            const messagesContainer = document.getElementById('messages');
            const messageDiv = document.createElement('div');

            let messageContent = '';

            // Toujours créer la structure markdown-content, même si content est vide
            const markdownHtml = marked.parse(content || '');
            messageContent += `<div class="markdown-content">${markdownHtml}</div>`;
            console.log('Message content HTML:', messageContent);

            if (role === 'user') {
                messageDiv.style.cssText = 'max-width: 85%; padding: 1rem; background: #4a5568; color: #f7fafc; margin: 0.5rem 0; border-radius: 1rem; margin-left: auto; margin-right: 0;';
            } else {
                messageDiv.style.cssText = 'max-width: 85%; padding: 1rem; background: #2d3748; color: #e2e8f0; margin: 0.5rem 0; border-radius: 1rem; margin-right: auto; margin-left: 0;';
            }

            messageDiv.innerHTML = messageContent;
            console.log('Message div created:', messageDiv);

            messagesContainer.appendChild(messageDiv);
            return messageDiv;
        }

        function testStream() {
            const output = document.getElementById('output');
            output.innerHTML = 'Connexion...<br>';

            fetch('http://localhost:5000/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    message: 'Bonjour',
                    thinking_enabled: true,
                    conversation_id: 'test'
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Erreur: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';
                let messageElement = null;
                let messageContent = '';

                function processStream() {
                    return reader.read().then(({ done, value }) => {
                        if (done) {
                            output.innerHTML += 'Stream terminé<br>';
                            return;
                        }

                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n');
                        buffer = lines.pop() || '';

                        for (const line of lines) {
                            output.innerHTML += `Ligne: ${line}<br>`;
                            if (line.startsWith('data: ')) {
                                try {
                                    const data = JSON.parse(line.substring(6));
                                    output.innerHTML += `Données: ${JSON.stringify(data)}<br>`;
                                    console.log('Received data:', data);

                                    if (data.type === 'text') {
                                        console.log('Processing text:', data.content);
                                        messageContent += data.content;
                                        if (!messageElement) {
                                            messageElement = addMessage('assistant', '');
                                            console.log('Created message element:', messageElement);
                                        }
                                        // Rendu markdown en temps réel
                                        const markdownHtml = marked.parse(messageContent);
                                        const markdownElement = messageElement.querySelector('.markdown-content');
                                        if (markdownElement) {
                                            markdownElement.innerHTML = markdownHtml;
                                            console.log('Updated markdown content');
                                            output.innerHTML += `Contenu mis à jour: ${messageContent}<br>`;
                                        } else {
                                            console.error('No .markdown-content element found');
                                            output.innerHTML += `ERREUR: Pas d'élément .markdown-content trouvé<br>`;
                                        }
                                    } else if (data.type === 'end') {
                                        output.innerHTML += 'Fin du stream<br>';
                                        return;
                                    }
                                } catch (e) {
                                    output.innerHTML += `Erreur parsing: ${e}<br>`;
                                    console.error('Erreur parsing JSON:', e, "Ligne reçue:", line);
                                }
                            }
                        }

                        return processStream();
                    });
                }

                return processStream();
            })
            .catch(error => {
                output.innerHTML += `Erreur: ${error.message}<br>`;
            });
        }
    </script>
</body>
</html>