Update app.py

app.py

@@ -15,11 +15,13 @@ import threading
 from sentence_transformers import SentenceTransformer
 import numpy as np
 import faiss
+import re
 
 # --- Konfiguration ---
 CHARGENODE_URL = "https://www.chargenode.eu"
-MAX_CHUNK_SIZE = 1024  # Storlek på chunker för indexering
-RETRIEVAL_K = 8        # Antal chunker att hämta vid varje sökning
+MAX_CHUNK_SIZE = 2000  # Ökad chunkstorleken för att bättre hantera FAQ-svar
+CHUNK_OVERLAP = 200    # Nytt: Overlapping chunks för att inte tappa kontext
+RETRIEVAL_K = 5        # Antal chunker att hämta vid varje sökning
 
 # Kontrollera om vi kör i Hugging Face-miljön
 IS_HUGGINGFACE = os.environ.get("SPACE_ID") is not None
@@ -69,6 +71,7 @@ embeddings = None
 index = None
 chunks = []
 chunk_sources = []
+faq_dict = {}  # Ny: Dictionary för direktmatchning av vanliga frågor
 
 # --- Förbättrad loggfunktion ---
 def safe_append_to_log(log_entry):
@@ -163,29 +166,117 @@ def load_prompt():
         print(f"Fel vid inläsning av prompt.txt: {e}, använder standardprompt")
         return "Du är ChargeNode's AI-assistent. Svara på frågor om ChargeNode's produkter och tjänster baserat på den tillhandahållna informationen."
 
-# Förbered textsegment
+# --- Förbättrad chunking ---
 def prepare_chunks(text_data):
-    """Delar upp texten i mindre segment för embedding och sökning."""
+    """Delar upp texten i mindre segment för embedding och sökning med särskild hänsyn till FAQ-format."""
     chunks, sources = [], []
+    global faq_dict
+    
     for source, text in text_data.items():
+        # Split text into paragraph-sized chunks
         paragraphs = [p for p in text.split("\n") if p.strip()]
-        chunk = ""
-        for para in paragraphs:
-            if len(chunk) + len(para) + 1 <= MAX_CHUNK_SIZE:
-                chunk += " " + para
+        
+        # Process FAQ-specific content better
+        i = 0
+        while i < len(paragraphs):
+            # Start a new chunk
+            current_chunk = ""
+            start_idx = i
+            
+            # Check for FAQ format
+            if i < len(paragraphs) and paragraphs[i].startswith("Fråga:"):
+                question = paragraphs[i][7:].strip()  # Extract the question text
+                current_chunk = paragraphs[i]
+                i += 1
+                
+                # Add content until we reach the next question or MAX_CHUNK_SIZE
+                while i < len(paragraphs) and not paragraphs[i].startswith("Fråga:"):
+                    # Add this paragraph if it doesn't exceed chunk size
+                    if len(current_chunk) + len(paragraphs[i]) + 1 <= MAX_CHUNK_SIZE:
+                        current_chunk += "\n" + paragraphs[i]
+                    else:
+                        # If we're already processing a FAQ answer, don't break mid-answer
+                        if "Svar:" in current_chunk:
+                            # We prefer to keep whole answers together, so let's break only if answer is too long
+                            if len(current_chunk) > MAX_CHUNK_SIZE * 1.5:  # Allow some overflow
+                                break
+                            else:
+                                current_chunk += "\n" + paragraphs[i]
+                        else:
+                            break
+                    i += 1
+                
+                # Store FAQ pairs in the dictionary for direct lookup
+                if "Svar:" in current_chunk:
+                    answer_start = current_chunk.find("Svar:")
+                    answer_text = current_chunk[answer_start + 5:].strip()
+                    
+                    # Add variations with common synonyms for payment-related questions
+                    if any(term in question.lower() for term in ["betalsätt", "betalmetod", "betalmedel", "kort", 
+                                                              "betalkort", "betalning", "betala"]):
+                        payment_variations = [
+                            "hur ändrar jag betalmedel",
+                            "hur byter jag betalsätt",
+                            "hur uppdaterar jag mitt betalkort",
+                            "hur ändrar jag betalmetod",
+                            "hur byter jag betalningsmetod",
+                            "hur ändrar jag betalkort"
+                        ]
+                        for variation in payment_variations:
+                            faq_dict[variation] = answer_text
+                    
+                    # Add the original question to the dictionary
+                    faq_dict[question.lower()] = answer_text
             else:
-                if chunk.strip():
-                    chunks.append(chunk.strip())
-                    sources.append(source)
-                chunk = para
-        if chunk.strip():
-            chunks.append(chunk.strip())
-            sources.append(source)
+                # Handle non-FAQ text using sliding window
+                while i < len(paragraphs) and len(current_chunk) + len(paragraphs[i]) + 1 <= MAX_CHUNK_SIZE:
+                    if current_chunk:
+                        current_chunk += " " + paragraphs[i]
+                    else:
+                        current_chunk = paragraphs[i]
+                    i += 1
+            
+            # Save the chunk if it has content
+            if current_chunk.strip():
+                chunks.append(current_chunk.strip())
+                sources.append(source)
+            
+            # If we've added a chunk but haven't advanced, we need to move forward
+            if i == start_idx:
+                i += 1
+        
+        # Create overlapping chunks for better context preservation
+        overlap_chunks = []
+        overlap_sources = []
+        
+        for j in range(0, len(chunks)):
+            overlap_chunks.append(chunks[j])
+            overlap_sources.append(sources[j])
+            
+            # Create an overlapping chunk with the next chunk if it exists
+            if j < len(chunks) - 1 and chunks[j].endswith(chunks[j+1][:CHUNK_OVERLAP]):
+                # Skip if there's already significant overlap
+                continue
+                
+            if j < len(chunks) - 1:
+                # Calculate available space in the current chunk
+                space_left = MAX_CHUNK_SIZE - len(chunks[j])
+                
+                # If there's enough space, add part of the next chunk
+                if space_left >= CHUNK_OVERLAP:
+                    overlap_text = chunks[j] + " " + chunks[j+1][:CHUNK_OVERLAP]
+                    overlap_chunks.append(overlap_text)
+                    overlap_sources.append(sources[j])
+        
+        chunks = overlap_chunks
+        sources = overlap_sources
+    
+    print(f"Genererade {len(chunks)} chunks med {len(faq_dict)} FAQ-par")
     return chunks, sources
 
 def initialize_embeddings():
     """Initierar SentenceTransformer och FAISS-index vid första anrop."""
-    global embedder, embeddings, index, chunks, chunk_sources
+    global embedder, embeddings, index, chunks, chunk_sources, faq_dict
     
     if embedder is None:
         print("Initierar SentenceTransformer och FAISS-index...")
@@ -203,12 +294,62 @@ def initialize_embeddings():
         index = faiss.IndexFlatIP(embeddings.shape[1])
         index.add(embeddings)
         print("FAISS-index klart")
+        
+        # Print FAQ dictionary keys for debugging
+        print(f"FAQ Dictionary innehåller {len(faq_dict)} nycklar")
+        if len(faq_dict) > 0:
+            payment_keys = [k for k in faq_dict.keys() if any(term in k for term in ["betalsätt", "betalmetod", "betalmedel"])]
+            print(f"Betalningsrelaterade FAQ-nycklar: {payment_keys[:5]}")
+
+# Direkt matchningsfunktion för vanliga frågor
+def check_direct_match(query):
+    """Kontrollerar om frågan matchar någon av våra fördefinierade FAQ-svar."""
+    query_lower = query.lower().strip('?').strip()
+    
+    # Explicit check for payment method question
+    if any(query_lower.startswith(prefix) for prefix in ["hur ändrar jag", "hur byter jag", "hur uppdaterar jag"]) and \
+       any(term in query_lower for term in ["betalsätt", "betalmetod", "betalmedel", "betalkort", "kort"]):
+        payment_answer = """Så här gör du om du vill byta betalkort: 
+1. Gå in i appen. 
+2. Tryck på meny och mina betalsätt 
+3. Tryck på ersätt kort. 
+4. Godkänn våra villkor 
+5. Tryck på kortbetalning under "bekräfta för auktorisering" 
+6. Lägg in dina nya kort uppgifter 
+7. Bekräfta med BankID. 
+
+OBS! Se till att kortet har pengar och att det är upplåst för internetbetalningar."""
+        return payment_answer
+    
+    # Check if query directly matches a FAQ
+    if query_lower in faq_dict:
+        return faq_dict[query_lower]
+    
+    # Check for close matches using pattern matching
+    for key, value in faq_dict.items():
+        # Find questions about changing things with synonyms
+        if ("ändra" in query_lower or "byta" in query_lower or "uppdatera" in query_lower) and \
+           ("ändra" in key or "byta" in key or "uppdatera" in key):
+            # Check if key and query share important terms
+            query_terms = set(query_lower.split())
+            key_terms = set(key.split())
+            if len(query_terms.intersection(key_terms)) >= 2:  # At least 2 words in common
+                return value
+    
+    return None
 
 def retrieve_context(query, k=RETRIEVAL_K):
-    """Hämtar relevant kontext för frågor."""
+    """Hämtar relevant kontext för frågor med direkt matchning för vanliga frågor."""
     # Säkerställ att modeller är laddade
     initialize_embeddings()
     
+    # Först, kolla efter direktmatchningar för vanliga frågor
+    direct_match = check_direct_match(query)
+    if direct_match:
+        print(f"Direkt matchning hittad för frågan: {query}")
+        return f"Fråga: {query}\nSvar: {direct_match}", ["direct_match"]
+    
+    # Om ingen direktmatchning, använd vanlig embedding-sökning
     query_embedding = embedder.encode([query], convert_to_numpy=True)
     query_embedding /= np.linalg.norm(query_embedding)
     D, I = index.search(query_embedding, k)
@@ -244,7 +385,7 @@ Min fråga är: {query}"""
     try:
         # Använd Claude Haiku med RAG-baserad kontext
         response = anthropic_client.messages.create(
-            model="claude-3-haiku-20240307",
+            model="claude-3-7-sonnet-20250219",
             max_tokens=500,
             temperature=0.3,
             system=system_prompt,
@@ -605,9 +746,7 @@ except Exception as e:
 # --- Gradio UI ---
 initial_chat = [{"role": "assistant", "content": "Detta är ChargeNode's AI bot. Hur kan jag hjälpa dig idag?"}]
 
-# BEHÅLL DESKTOP LAYOUT - FIXA MOBIL-SCROLLING OCH LAYOUT
 custom_css = """
-/* DESKTOP LAYOUT - BEHÅLLS EXAKT SOM URSPRUNGLIG */
 body {background-color: #f7f7f7; font-family: Arial, sans-serif; margin: 0; padding: 0;}
 h1 {font-family: Helvetica, sans-serif; color: #2a9d8f; text-align: center; margin-bottom: 0.5em;}
 .gradio-container {max-width: 400px; margin: 0; padding: 10px; position: fixed; bottom: 20px; right: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: #fff;}
@@ -620,7 +759,6 @@ h1 {font-family: Helvetica, sans-serif; color: #2a9d8f; text-align: center; marg
 .gr-form {padding: 10px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px;}
 .chat-preview {max-height: 150px; overflow-y: auto; border: 1px solid #eee; padding: 8px; margin-top: 10px; font-size: 12px; background-color: #f9f9f9;}
 .success-message {font-size: 16px; font-weight: normal; margin-bottom: 15px;}
-
 /* Dölj Gradio-footer */
 footer {display: none !important;}
 .footer {display: none !important;}
@@ -628,427 +766,9 @@ footer {display: none !important;}
 .gradio-footer {display: none !important;}
 .gradio-container .footer {display: none !important;}
 .gradio-container .gr-footer {display: none !important;}
-
-/* MOBIL-ANPASSNINGAR - FOKUS PÅ SCROLLNING OCH KOMPAKT LAYOUT */
-@media (max-width: 768px) {
-    /* Aggressiv scrollning-fix för mobil iframe */
-    html {
-        width: 100% !important;
-        height: 100% !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        overflow: auto !important;
-        -webkit-overflow-scrolling: touch !important;
-        -ms-overflow-style: -ms-autohiding-scrollbar !important;
-    }
-    
-    body {
-        width: 100% !important;
-        height: 100% !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        background-color: #ffffff !important;
-        -webkit-overflow-scrolling: touch !important;
-        -ms-overflow-style: -ms-autohiding-scrollbar !important;
-        position: relative !important;
-    }
-    
-    /* Gradio app ska tillåta scrollning */
-    .gradio-app {
-        width: 100% !important;
-        min-height: 100vh !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        overflow: visible !important;
-        position: relative !important;
-    }
-    
-    /* Container för mobil - naturlig scroll layout */
-    .gradio-container {
-        position: static !important; /* Viktigt: static för naturlig scroll */
-        width: 100% !important;
-        min-height: 100vh !important;
-        max-width: none !important;
-        margin: 0 !important;
-        padding: 8px !important;
-        box-shadow: none !important;
-        border-radius: 0 !important;
-        background-color: #ffffff !important;
-        display: block !important; /* Block istället för flex för bättre scroll */
-        box-sizing: border-box !important;
-        overflow: visible !important;
-    }
-    
-    /* Minimera header-utrymme */
-    .gradio-container > .gr-markdown:first-child {
-        display: block !important;
-        font-size: 12px !important;
-        line-height: 1.2 !important;
-        margin: 0 0 4px 0 !important;
-        padding: 4px 8px !important;
-        background-color: #f8f9fa !important;
-        border-radius: 4px !important;
-        text-align: center !important;
-    }
-    
-    /* Chat-grupper med naturlig höjd */
-    .gradio-container > .gr-group {
-        display: block !important;
-        margin: 4px 0 !important;
-        padding: 0 !important;
-        overflow: visible !important;
-    }
-    
-    /* 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 */
-        min-height: 300px !important;
-        max-height: 300px !important;
-        margin: 0 0 8px 0 !important;
-        padding: 6px !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        border: 1px solid #e9ecef !important;
-        border-radius: 4px !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 */
-    .gradio-container .gr-row {
-        display: block !important;
-        margin: 4px 0 !important;
-        overflow: visible !important;
-    }
-    
-    /* Textbox för mobil */
-    .gr-textbox {
-        margin: 0 0 4px 0 !important;
-        display: block !important;
-    }
-    
-    .gr-textbox textarea {
-        font-size: 16px !important;
-        padding: 8px !important;
-        border: 1px solid #e9ecef !important;
-        border-radius: 4px !important;
-        resize: none !important;
-        width: 100% !important;
-        box-sizing: border-box !important;
-        min-height: 38px !important;
-        max-height: 76px !important;
-        overflow-y: auto !important;
-        -webkit-overflow-scrolling: touch !important;
-    }
-    
-    .gr-textbox textarea:focus {
-        border-color: #2a9d8f !important;
-        outline: none !important;
-    }
-    
-    /* Knappar med block layout och bättre touch */
-    .gr-button {
-        display: block !important;
-        width: 100% !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 */
-    .gradio-container .gr-column {
-        display: block !important;
-        width: 100% !important;
-        margin: 0 !important;
-        padding: 2px 0 !important;
-    }
-    
-    /* Support-formulär med scrolling */
-    .gr-form {
-        display: block !important;
-        padding: 8px !important;
-        margin: 4px 0 !important;
-        border-radius: 4px !important;
-        background-color: #f8f9fa !important;
-        overflow: visible !important;
-    }
-    
-    .gr-form .gr-textbox {
-        margin: 4px 0 !important;
-    }
-    
-    .gr-form .gr-textbox input,
-    .gr-form .gr-textbox textarea {
-        font-size: 16px !important;
-        padding: 8px !important;
-        border-radius: 4px !important;
-    }
-    
-    /* Chat preview med scrolling */
-    .chat-preview {
-        max-height: 80px !important;
-        font-size: 11px !important;
-        padding: 6px !important;
-        margin: 4px 0 !important;
-        border-radius: 4px !important;
-        background-color: #f1f3f4 !important;
-        overflow-y: auto !important;
-        -webkit-overflow-scrolling: touch !important;
-    }
-    
-    /* Success message */
-    .success-message {
-        font-size: 14px !important;
-        padding: 8px !important;
-        text-align: center !important;
-        margin: 8px 0 !important;
-        background-color: #d1e7dd !important;
-        border-radius: 4px !important;
-        color: #0f5132 !important;
-    }
-    
-    /* Förhindra zoom på iOS */
-    input, textarea, select {
-        font-size: 16px !important;
-    }
-}
-
-/* Extra kompakt för mycket små skärmar */
-@media (max-width: 480px) {
-    .gradio-container {
-        padding: 4px !important;
-    }
-    
-    .gradio-container > .gr-markdown:first-child {
-        font-size: 11px !important;
-        padding: 3px 6px !important;
-        margin: 0 0 3px 0 !important;
-    }
-    
-    #chatbot_conversation {
-        padding: 4px !important;
-        min-height: 250px !important;
-    }
-    
-    .gr-button {
-        padding: 8px 10px !important;
-        font-size: 13px !important;
-        min-height: 36px !important;
-    }
-    
-    .gr-textbox textarea {
-        padding: 6px !important;
-        min-height: 32px !important;
-    }
-}
 """
 
-with gr.Blocks(
-    css=custom_css, 
-    title="ChargeNode Kundtjänst",
-    head='<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">',
-    js="""
-    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) {
-                    window.parent.postMessage({
-                        type: 'gradio-scroll',
-                        scrollTop: document.documentElement.scrollTop
-                    }, '*');
-                }
-            });
-            
-            // Lyssna på meddelanden från parent
-            window.addEventListener('message', function(event) {
-                if (event.data.type === 'scrollToTop') {
-                    document.documentElement.scrollTop = 0;
-                    document.body.scrollTop = 0;
-                }
-            });
-            
-            console.log('Mobile event fixes initialized');
-        }
-    }
-    
-    // Kör när sidan laddas och när DOM uppdateras
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initMobileEventFix);
-    } else {
-        initMobileEventFix();
-    }
-    
-    // Kör även efter en kort delay för att fånga Gradio-element
-    setTimeout(initMobileEventFix, 1000);
-    setTimeout(initMobileEventFix, 3000);
-    """
-) as app:
+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")
     
     # Chat interface
@@ -1280,13 +1000,4 @@ initialize_embeddings()
 print("Embedding-modell och index redo!")
 
 if __name__ == "__main__":
-    app.launch(
-        share=IS_HUGGINGFACE,
-        server_name="0.0.0.0" if IS_HUGGINGFACE else "127.0.0.1",
-        show_error=True,
-        show_api=False,
-        height=600,       # Fast höjd för iframe
-        inbrowser=False,  # Förhindra automatisk öppning
-        favicon_path=None,
-        app_kwargs={"docs_url": None, "redoc_url": None}  # Rensa onödiga endpoints
-    )
+    app.launch(share=True)