Update app.py

app.py

@@ -1101,8 +1101,8 @@ def respond(message, chat_history, request: gr.Request):
     }, 500);  // Vänta 500 millisekunder innan andra försöket
     """
     
-    # Returnera tomt meddelande, uppdaterad historik och scroll-JS
-    return "", chat_history, gr.update(javascript=scroll_js)
+    # Returnera tomt meddelande och den uppdaterade chatthistoriken
+    return "", chat_history
 
 def format_chat_preview(chat_history):
     if not chat_history:
@@ -1239,6 +1239,45 @@ footer {display: none !important;}
 .gradio-container .gr-footer {display: none !important;}
 """
 
+# --- JavaScript för scrollning ---
+# Definiera JS-koden som en sträng här för att kunna använda den i _js parametern
+scroll_js = """
+    setTimeout(function() {
+        console.log("Executing scroll script");
+        const messages = document.querySelectorAll('.message');
+        if (messages.length > 0) {
+            console.log("Found messages:", messages.length);
+            const lastMessage = messages[messages.length - 1];
+            console.log("Scrolling to last message");
+            lastMessage.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        } else {
+            console.log("No messages found, trying alternative selectors");
+            // Alternativa selektorer för Hugging Face
+            const altMessages = document.querySelectorAll('.bot, [data-testid="bot"], .message-wrap > div:last-child');
+            if (altMessages.length > 0) {
+                console.log("Found messages with alt selector:", altMessages.length);
+                const lastAltMessage = altMessages[altMessages.length - 1];
+                console.log("Scrolling to last alt message");
+                lastAltMessage.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            } else {
+                console.log("No messages found with any selector");
+            }
+        }
+    }, 100);  // Vänta 100 millisekunder innan scroll
+    
+    // Försök igen efter lite längre tid om första försöket misslyckas
+    setTimeout(function() {
+        console.log("Executing delayed scroll script");
+        const messages = document.querySelectorAll('.message, .bot, [data-testid="bot"], .message-wrap > div:last-child');
+        if (messages.length > 0) {
+            console.log("Found messages in delayed script:", messages.length);
+            const lastMessage = messages[messages.length - 1];
+            console.log("Scrolling to last message in delayed script");
+            lastMessage.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }, 500);  // Vänta 500 millisekunder innan andra försöket
+"""
+
 # VIKTIGT: Alla komponenter och eventkopplingar definieras inuti Blocks-kontexten
 with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
     gr.Markdown("Ställ din fråga om ChargeNodes produkter och tjänster nedan. Om du inte gillar botten, så ring oss gärna på 010 – 205 10 55")
@@ -1282,11 +1321,12 @@ with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
         back_to_chat_btn = gr.Button("Tillbaka till chatten")
     
     # VIKTIGT: Händelsehanterare definieras INOM gr.Blocks-kontexten, efter att komponenterna definierats
-    # Uppdatera msg.submit för att hantera de tre returvärdena från respond
-    # gr.Request() tas bort från inputs listan, Gradio hanterar det automatiskt via type hint i respond()
+    # Uppdatera msg.submit för att hantera de två returvärdena från respond
+    # Använd _js parametern för att köra scroll-skriptet efter uppdateringen
     msg.submit(respond, 
                inputs=[msg, chatbot], 
-               outputs=[msg, chatbot, chatbot]) # msg, chatbot history, chatbot för JS update
+               outputs=[msg, chatbot], # msg, chatbot history
+               _js=scroll_js) 
     
     clear.click(lambda: (None, []), None, [msg, chatbot], queue=False) # Rensa både textbox och historik
     support_btn.click(show_support_form, chatbot, [chat_interface, support_interface, success_interface, chat_preview])