Update app.py

app.py

@@ -701,7 +701,7 @@ footer {display: none !important;}
         overflow: visible !important;
     }
     
-    /* Chatbot med fast höjd för scroll */
+    /* Chatbot med fast höjd för scroll och mindre text */
     #chatbot_conversation {
         display: block !important;
         height: 300px !important; /* Fast höjd istället för flex */
@@ -716,6 +716,44 @@ footer {display: none !important;}
         background-color: #ffffff !important;
         -webkit-overflow-scrolling: touch !important;
         -ms-overflow-style: -ms-autohiding-scrollbar !important;
+        font-size: 13px !important; /* Mindre text för mer innehåll */
+        line-height: 1.3 !important; /* Kompaktare rader */
+    }
+    
+    /* Specifik styling för meddelanden i chatbot */
+    #chatbot_conversation .message,
+    #chatbot_conversation .bot,
+    #chatbot_conversation .user,
+    #chatbot_conversation div,
+    #chatbot_conversation p {
+        font-size: 13px !important;
+        line-height: 1.3 !important;
+        margin: 2px 0 !important;
+        padding: 3px !important;
+    }
+    
+    /* Användarmeddelanden */
+    #chatbot_conversation .user {
+        background-color: #e3f2fd !important;
+        border-radius: 8px 8px 2px 8px !important;
+        margin: 2px 0 2px 20px !important;
+        padding: 6px 8px !important;
+        font-size: 13px !important;
+    }
+    
+    /* Bot-meddelanden */
+    #chatbot_conversation .bot {
+        background-color: #f5f5f5 !important;
+        border-radius: 8px 8px 8px 2px !important;
+        margin: 2px 20px 2px 0 !important;
+        padding: 6px 8px !important;
+        font-size: 13px !important;
+    }
+    
+    /* Alla text-element i chatbot */
+    #chatbot_conversation * {
+        font-size: 13px !important;
+        line-height: 1.3 !important;
     }
     
     /* Input och knappar */
@@ -750,19 +788,40 @@ footer {display: none !important;}
         outline: none !important;
     }
     
-    /* Knappar med block layout */
+    /* Knappar med block layout och bättre touch */
     .gr-button {
         display: block !important;
         width: 100% !important;
-        padding: 10px 12px !important;
-        margin: 4px 0 !important;
-        font-size: 14px !important;
-        min-height: 40px !important;
-        border-radius: 4px !important;
+        padding: 12px 16px !important; /* Större padding för touch */
+        margin: 6px 0 !important; /* Mer utrymme mellan knappar */
+        font-size: 16px !important; /* Större text för läsbarhet */
+        min-height: 48px !important; /* Minst 48px för touch targets */
+        border-radius: 6px !important;
         box-sizing: border-box !important;
         white-space: nowrap !important;
         overflow: hidden !important;
         text-overflow: ellipsis !important;
+        cursor: pointer !important;
+        user-select: none !important; /* Förhindra textmarkering */
+        -webkit-user-select: none !important;
+        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important; /* Touch feedback */
+        touch-action: manipulation !important; /* Förbättra touch responsiveness */
+    }
+    
+    /* Active state för knappar */
+    .gr-button:active {
+        background-color: #1a7068 !important;
+        transform: scale(0.98) !important;
+    }
+    
+    /* Support button specifik styling */
+    .support-btn {
+        background-color: #000000 !important;
+        color: #ffffff !important;
+    }
+    
+    .support-btn:active {
+        background-color: #333333 !important;
     }
     
     /* Knapp-kolumner */
@@ -858,13 +917,104 @@ with gr.Blocks(
     title="ChargeNode Kundtjänst",
     head='<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">',
     js="""
-    function initScrollFix() {
+    function initMobileEventFix() {
         // Framtvinga scrollning på mobil i iframe
         if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
             document.body.style.overflow = 'auto';
             document.documentElement.style.overflow = 'auto';
             document.body.style.webkitOverflowScrolling = 'touch';
             
+            // Fix för touch events på knappar
+            const buttons = document.querySelectorAll('.gr-button, button');
+            buttons.forEach(button => {
+                // Lägg till touch events för bättre responsiveness
+                button.addEventListener('touchstart', function(e) {
+                    this.style.backgroundColor = '#1a7068';
+                }, {passive: true});
+                
+                button.addEventListener('touchend', function(e) {
+                    this.style.backgroundColor = '';
+                    // Forcera click event
+                    setTimeout(() => {
+                        this.click();
+                    }, 50);
+                }, {passive: true});
+                
+                // Förhindra dubbel-hantering
+                button.addEventListener('click', function(e) {
+                    if (e.isTrusted === false) return; // Skippa syntetiska events
+                    e.stopPropagation();
+                }, true);
+            });
+            
+            // Fix för Enter-key på mobil keyboard
+            const textareas = document.querySelectorAll('textarea');
+            textareas.forEach(textarea => {
+                textarea.addEventListener('keydown', function(e) {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        // Hitta submit-knappen och trigga den
+                        const submitBtn = document.querySelector('button[type="submit"], .gr-button');
+                        if (submitBtn) {
+                            submitBtn.click();
+                        }
+                    }
+                });
+                
+                // Lägg till input event för bättre reaktivitet
+                textarea.addEventListener('input', function(e) {
+                    // Trigga Gradio's interna events
+                    const event = new Event('input', { bubbles: true });
+                    this.dispatchEvent(event);
+                });
+            });
+            
+            // Observer för dynamiskt tillagda element
+            const observer = new MutationObserver(function(mutations) {
+                mutations.forEach(function(mutation) {
+                    if (mutation.type === 'childList') {
+                        mutation.addedNodes.forEach(function(node) {
+                            if (node.nodeType === 1) { // Element node
+                                // Lägg till event listeners på nya knappar
+                                const newButtons = node.querySelectorAll('.gr-button, button');
+                                newButtons.forEach(button => {
+                                    button.addEventListener('touchstart', function(e) {
+                                        this.style.backgroundColor = '#1a7068';
+                                    }, {passive: true});
+                                    
+                                    button.addEventListener('touchend', function(e) {
+                                        this.style.backgroundColor = '';
+                                        setTimeout(() => {
+                                            this.click();
+                                        }, 50);
+                                    }, {passive: true});
+                                });
+                                
+                                // Lägg till event listeners på nya textareas
+                                const newTextareas = node.querySelectorAll('textarea');
+                                newTextareas.forEach(textarea => {
+                                    textarea.addEventListener('keydown', function(e) {
+                                        if (e.key === 'Enter' && !e.shiftKey) {
+                                            e.preventDefault();
+                                            const submitBtn = document.querySelector('button[type="submit"], .gr-button');
+                                            if (submitBtn) {
+                                                submitBtn.click();
+                                            }
+                                        }
+                                    });
+                                });
+                            }
+                        });
+                    }
+                });
+            });
+            
+            // Starta observer
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            
             // Skicka meddelande till parent om scrollning
             window.addEventListener('scroll', function() {
                 if (window.parent !== window) {
@@ -882,15 +1032,21 @@ with gr.Blocks(
                     document.body.scrollTop = 0;
                 }
             });
+            
+            console.log('Mobile event fixes initialized');
         }
     }
     
-    // Kör när sidan laddas
+    // Kör när sidan laddas och när DOM uppdateras
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initScrollFix);
+        document.addEventListener('DOMContentLoaded', initMobileEventFix);
     } else {
-        initScrollFix();
+        initMobileEventFix();
     }
+    
+    // Kör även efter en kort delay för att fånga Gradio-element
+    setTimeout(initMobileEventFix, 1000);
+    setTimeout(initMobileEventFix, 3000);
     """
 ) 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")