Update app.py

app.py

@@ -1004,109 +1004,174 @@ with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
             with gr.Column(scale=1):
                 support_btn = gr.Button("Behöver du mer hjälp?", elem_classes="support-btn")
     
-    # Lägg till anpassad JavaScript för att styra scrollning
+    # Lägg till anpassad JavaScript för att styra scrollning och förhindra auto-scroll
     js_code = """
-    // Mer robust funktion för att scrolla till senaste botmeddelandet
-    function scrollToLatestBotMessage() {
-        console.log("Försöker scrolla till senaste botmeddelandet");
+    // Förhindra Gradio's automatiska scrollning till botten
+    (function() {
+        // Spara originella scrollTo och scrollIntoView funktioner
+        const originalScrollTo = window.scrollTo;
+        const originalElementScrollIntoView = Element.prototype.scrollIntoView;
+        const originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
         
-        // 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');
+        // Övervaka och förhindra automatisk scrollning till botten
+        window.scrollTo = function(x, y) {
+            console.log('scrollTo intercepted:', x, y);
+            // Tillåt bara scrollning som inte är till botten av sidan
+            if (typeof y !== 'number' || y < document.body.scrollHeight - window.innerHeight - 100) {
+                originalScrollTo.apply(this, arguments);
+            } else {
+                console.log('Prevented automatic scroll to bottom');
+            }
+        };
         
-        // Alternativ selektor för Hugging Face
-        if (!latestBotMessage) {
-            latestBotMessage = document.querySelector('.gradio-container [data-testid="bot"]:last-child');
-        }
+        // Övervaka scrollIntoView anrop
+        Element.prototype.scrollIntoView = function(options) {
+            console.log('Element scrollIntoView intercepted', this, options);
+            // Kontrollera om elementet är ett botmeddelande eller en del av chattcontainern
+            if (this.classList && (
+                this.classList.contains('message') || 
+                this.classList.contains('bot') || 
+                this.closest('.message-wrap')
+            )) {
+                console.log('Handling chat element scrollIntoView');
+                // Anropa vår egen scrollningsfunktion istället
+                handleChatScroll();
+                return;
+            }
+            // Annars, låt originella funktionen köra
+            originalElementScrollIntoView.apply(this, arguments);
+        };
         
-        // Ytterligare alternativ selektor
-        if (!latestBotMessage) {
-            latestBotMessage = document.querySelector('.gradio-container .message:last-child');
+        HTMLElement.prototype.scrollIntoView = Element.prototype.scrollIntoView;
+        
+        console.log('Scroll interception set up');
+    })();
+
+    // Huvudfunktion för att hantera chattscrollning
+    function handleChatScroll() {
+        console.log('handleChatScroll called');
+        
+        // Hitta chattcontainern
+        const chatContainers = [
+            document.querySelector('#chatbot_conversation .message-wrap'),
+            document.querySelector('.gradio-container .chat'),
+            document.querySelector('.gradio-container [id^="component-"] .chat'),
+            document.querySelector('.gradio-container .message-wrap')
+        ].filter(Boolean);
+        
+        if (chatContainers.length === 0) {
+            console.log('No chat container found');
+            return;
         }
         
-        if (latestBotMessage) {
-            console.log("Hittade senaste botmeddelandet, scrollar till det");
-            
-            // Scrolla så att det senaste botmeddelandet är synligt i toppen av chattrutan
-            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");
+        const chatContainer = chatContainers[0];
+        console.log('Found chat container:', chatContainer);
+        
+        // Hitta alla botmeddelanden
+        const botMessages = [
+            ...Array.from(document.querySelectorAll('.message.bot')),
+            ...Array.from(document.querySelectorAll('[data-testid="bot"]')),
+            ...Array.from(document.querySelectorAll('.message:not(.user)'))
+        ].filter(Boolean);
+        
+        if (botMessages.length === 0) {
+            console.log('No bot messages found');
+            return;
         }
-    }
-
-    // Kör funktionen när nya meddelanden läggs till
-    document.addEventListener('DOMNodeInserted', function(event) {
-        // Kontrollera om det infogade elementet är ett botmeddelande
-        if (event.target.classList && 
-            (event.target.classList.contains('bot') || 
-             event.target.getAttribute('data-testid') === 'bot')) {
+        
+        // Hitta det senaste botmeddelandet
+        const latestBotMessage = botMessages[botMessages.length - 1];
+        console.log('Latest bot message:', latestBotMessage);
+        
+        // Beräkna position för att visa botmeddelandet i toppen
+        try {
+            const containerRect = chatContainer.getBoundingClientRect();
+            const messageRect = latestBotMessage.getBoundingClientRect();
+            const relativeTop = messageRect.top - containerRect.top;
             
-            console.log("Bot-meddelande detekterat, schemalägg scrollning");
+            // Scrolla så att botmeddelandet är i toppen
+            chatContainer.scrollTop = chatContainer.scrollTop + relativeTop - 10; // 10px marginal
+            console.log('Scrolled chat container to show bot message at top');
             
-            // 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);
+            // Förhindra ytterligare scrollning under en kort period
+            chatContainer.style.overflowY = 'hidden';
+            setTimeout(() => {
+                chatContainer.style.overflowY = '';
+            }, 500);
+        } catch (e) {
+            console.error('Error during manual scrolling:', e);
         }
-    });
+    }
 
-    // Lägg även till en MutationObserver som ett alternativt sätt att upptäcka nya meddelanden
+    // Lyssna på DOM-ändringar för 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');
+        console.log('DOM loaded, setting up observers');
         
-        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;
+        // Använd MutationObserver för att upptäcka nya meddelanden
+        const observer = new MutationObserver(function(mutations) {
+            let newBotMessage = false;
+            
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                    mutation.addedNodes.forEach(function(node) {
+                        if (node.nodeType === 1) { // Element node
+                            // Kontrollera om det är ett botmeddelande
+                            if (node.classList && (
+                                node.classList.contains('bot') || 
+                                node.classList.contains('message')
+                            )) {
+                                newBotMessage = true;
                             }
-                        });
-                    }
-                });
-                
-                if (shouldScroll) {
-                    console.log("MutationObserver detekterade nytt botmeddelande");
-                    setTimeout(scrollToLatestBotMessage, 200);
+                            // Eller om det innehåller ett botmeddelande
+                            else if (node.querySelector && (
+                                node.querySelector('.bot') || 
+                                node.querySelector('.message:not(.user)')
+                            )) {
+                                newBotMessage = true;
+                            }
+                        }
+                    });
                 }
             });
             
-            // Starta övervakning av hela chatcontainern för ändringar i DOM
-            observer.observe(chatContainer, { 
-                childList: true, 
-                subtree: true 
-            });
-            
-            console.log("MutationObserver startad");
-        }
+            if (newBotMessage) {
+                console.log('New bot message detected');
+                // Använd flera timeouts för att säkerställa att scrollningen fungerar
+                // efter att alla DOM-uppdateringar är klara
+                setTimeout(handleChatScroll, 100);
+                setTimeout(handleChatScroll, 300);
+                setTimeout(handleChatScroll, 500);
+                setTimeout(handleChatScroll, 1000);
+            }
+        });
+        
+        // Starta övervakning av hela dokumentet
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        
+        console.log('MutationObserver started');
+        
+        // Lyssna även på klickhändelser för att hantera scrollning efter användarinteraktion
+        document.addEventListener('click', function(event) {
+            // Fördröj för att låta eventuella UI-uppdateringar slutföras
+            setTimeout(handleChatScroll, 300);
+        });
     });
+    
+    // Lägg till CSS för att förbättra scrollningsbeteendet
+    const style = document.createElement('style');
+    style.textContent = `
+        #chatbot_conversation .message-wrap {
+            scroll-behavior: smooth !important;
+            overflow-anchor: none !important; /* Förhindra automatisk ankring */
+        }
+        .message.bot {
+            scroll-margin-top: 10px !important;
+        }
+    `;
+    document.head.appendChild(style);
     """
     app.load(js=js_code)