Update app.py

app.py

@@ -1006,18 +1006,105 @@ with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
     
     # Lägg till anpassad JavaScript för att styra scrollning
     js_code = """
+    // Mer robust funktion för att scrolla till senaste botmeddelandet
     function scrollToLatestBotMessage() {
-        const latestBotMessage = document.querySelector('.gradio-container .message.bot:last-child');
+        console.log("Försöker scrolla till senaste botmeddelandet");
+        
+        // Försök hitta det senaste botmeddelandet med olika selektorer (för kompatibilitet med Hugging Face)
+        let latestBotMessage = document.querySelector('.gradio-container .message.bot:last-child');
+        
+        // Alternativ selektor för Hugging Face
+        if (!latestBotMessage) {
+            latestBotMessage = document.querySelector('.gradio-container [data-testid="bot"]:last-child');
+        }
+        
+        // Ytterligare alternativ selektor
+        if (!latestBotMessage) {
+            latestBotMessage = document.querySelector('.gradio-container .message:last-child');
+        }
+        
         if (latestBotMessage) {
+            console.log("Hittade senaste botmeddelandet, scrollar till det");
+            
             // Scrolla så att det senaste botmeddelandet är synligt i toppen av chattrutan
-            latestBotMessage.scrollIntoView({block: 'start', behavior: 'smooth'});
+            try {
+                latestBotMessage.scrollIntoView({block: 'start', behavior: 'smooth'});
+                console.log("scrollIntoView utförd");
+            } catch (e) {
+                console.error("Fel vid scrollning:", e);
+                
+                // Fallback: Använd manuell scrollning om scrollIntoView misslyckas
+                try {
+                    const chatContainer = latestBotMessage.closest('.chat');
+                    if (chatContainer) {
+                        const topPos = latestBotMessage.offsetTop;
+                        chatContainer.scrollTop = topPos;
+                        console.log("Manuell scrollning utförd");
+                    }
+                } catch (e2) {
+                    console.error("Fallback-scrollning misslyckades:", e2);
+                }
+            }
+        } else {
+            console.log("Kunde inte hitta senaste botmeddelandet");
         }
     }
 
     // Kör funktionen när nya meddelanden läggs till
     document.addEventListener('DOMNodeInserted', function(event) {
-        if (event.target.classList && event.target.classList.contains('bot')) {
+        // Kontrollera om det infogade elementet är ett botmeddelande
+        if (event.target.classList && 
+            (event.target.classList.contains('bot') || 
+             event.target.getAttribute('data-testid') === 'bot')) {
+            
+            console.log("Bot-meddelande detekterat, schemalägg scrollning");
+            
+            // Använd flera timeouts med olika fördröjningar för att säkerställa att scrollningen fungerar
             setTimeout(scrollToLatestBotMessage, 100);
+            setTimeout(scrollToLatestBotMessage, 300);
+            setTimeout(scrollToLatestBotMessage, 500);
+        }
+    });
+
+    // Lägg även till en MutationObserver som ett alternativt sätt att upptäcka nya meddelanden
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log("DOM laddad, sätter upp MutationObserver");
+        
+        // Hitta chatcontainern
+        const chatContainer = document.querySelector('.gradio-container');
+        
+        if (chatContainer) {
+            // Skapa en observer som övervakar ändringar i DOM
+            const observer = new MutationObserver(function(mutations) {
+                let shouldScroll = false;
+                
+                mutations.forEach(function(mutation) {
+                    // Kontrollera om nya noder har lagts till
+                    if (mutation.addedNodes.length) {
+                        mutation.addedNodes.forEach(function(node) {
+                            // Kontrollera om den tillagda noden är ett botmeddelande
+                            if (node.classList && 
+                                (node.classList.contains('bot') || 
+                                 node.getAttribute('data-testid') === 'bot')) {
+                                shouldScroll = true;
+                            }
+                        });
+                    }
+                });
+                
+                if (shouldScroll) {
+                    console.log("MutationObserver detekterade nytt botmeddelande");
+                    setTimeout(scrollToLatestBotMessage, 200);
+                }
+            });
+            
+            // Starta övervakning av hela chatcontainern för ändringar i DOM
+            observer.observe(chatContainer, { 
+                childList: true, 
+                subtree: true 
+            });
+            
+            console.log("MutationObserver startad");
         }
     });
     """