Upload app.py

app.py

@@ -1,36 +1,116 @@
 import gradio as gr
 import re
+import json
+import time
+from datetime import datetime
 
-# Load language detection model only (smaller model)
-from transformers import pipeline
-language_detector = pipeline("text-classification", model="papluca/xlm-roberta-base-language-detection")
+# Simple language detection function instead of using transformers
+def simple_detect_language(text):
+    # Check for Arabic characters
+    arabic_pattern = re.compile(r'[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF]+')
+    if arabic_pattern.search(text):
+        return "ar"
+    return "en"
+
+# Import customer service enhancements
+try:
+    from customer_service_enhancements import (
+        ENHANCED_CUSTOMER_SERVICE_PHRASES_AR,
+        ENHANCED_CUSTOMER_SERVICE_PHRASES_EN,
+        BANKING_FAQS_AR,
+        BANKING_FAQS_EN,
+        BANKING_GLOSSARY_AR,
+        BANKING_GLOSSARY_EN,
+        get_enhanced_response,
+        handle_banking_faq,
+        offer_satisfaction_survey,
+        get_banking_term_definition
+    )
+    CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE = True
+except ImportError:
+    CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE = False
+    # Fallback customer service phrases
+    ENHANCED_CUSTOMER_SERVICE_PHRASES_AR = {
+        "greeting": [
+            "مرحبًا بك في بنك أم درمان الوطني! كيف يمكنني مساعدتك اليوم؟",
+            "أهلاً بك في خدمة العملاء الافتراضية لبنك أم درمان الوطني. كيف يمكنني خدمتك؟"
+        ],
+        "thanks": [
+            "شكرًا لتواصلك مع بنك أم درمان الوطني!",
+            "نشكرك على ثقتك في خدماتنا المصرفية."
+        ],
+        "follow_up": [
+            "هل هناك خدمة مصرفية أخرى يمكنني مساعدتك بها اليوم؟",
+            "هل لديك أي استفسارات أخرى حول منتجاتنا أو خدماتنا المصرفية؟"
+        ]
+    }
+    ENHANCED_CUSTOMER_SERVICE_PHRASES_EN = {
+        "greeting": [
+            "Welcome to Omdurman National Bank! How may I assist you today?",
+            "Hello and welcome to ONB virtual customer service. How can I help you?"
+        ],
+        "thanks": [
+            "Thank you for contacting Omdurman National Bank!",
+            "We appreciate your trust in our banking services."
+        ],
+        "follow_up": [
+            "Is there any other banking service I can assist you with today?",
+            "Do you have any other questions about our products or banking services?"
+        ]
+    }
 
 # Omdurman National Bank-specific guidelines in Arabic
 ONB_GUIDELINES_AR = {
-    "balance": "يمكنك التحقق من رصيدك عبر الإنترنت أو عبر تطبيق الهاتف الخاص ببنك الوطني.",
-    "lost_card": "في حالة فقدان البطاقة، اتصل بالرقم 249-123-456-789 فورًا.",
-    "loan": "شروط القرض تشمل الحد الأدنى للدخل (5000 جنيه سوداني) وتاريخ ائتماني جيد.",
-    "transfer": "لتحويل الأموال، استخدم تطبيق الهاتف أو الخدمة المصرفية عبر الإنترنت.",
-    "new_account": "لفتح حساب جديد، قم بزيارة أقرب فرع مع جواز سفرك أو هويتك الوطنية.",
-    "interest_rates": "أسعار الفائدة على الودائع تتراوح بين 5% إلى 10% سنويًا.",
-    "branches": "فروعنا موجودة في أم درمان، الخرطوم، وبورتسودان. زيارة موقعنا للتفاصيل.",
-    "working_hours": "ساعات العمل من 8 صباحًا إلى 3 مساءً من الأحد إلى الخميس.",
-    "contact": "الاتصال بنا على الرقم 249-123-456-789 أو عبر البريد الإلكتروني [email protected]."
+    "balance": "يمكنك التحقق من رصيدك عبر الإنترنت أو عبر تطبيق الهاتف الخاص ببنك أم درمان الوطني. <a href='#' onclick='window.open(\"https://onb.sd/balance\", \"_blank\")'>افحص رصيدك الآن</a>",
+    "lost_card": "في حالة فقدان البطاقة، اتصل بالرقم <a href='tel:249123456789'>249-123-456-789</a> فورًا أو <a href='#' onclick='window.open(\"https://onb.sd/block-card\", \"_blank\")'>أوقف البطاقة عبر الإنترنت</a>.",
+    "loan": "شروط القرض تشمل الحد الأدنى للدخل (5000 جنيه سوداني) وتاريخ ائتماني جيد. <a href='#' onclick='window.open(\"https://onb.sd/loans\", \"_blank\")'>تقدم بطلب قرض الآن</a>",
+    "transfer": "لتحويل الأموال، استخدم <a href='#' onclick='window.open(\"https://onb.sd/mobile-app\", \"_blank\")'>تطبيق الهاتف</a> أو <a href='#' onclick='window.open(\"https://onb.sd/online-banking\", \"_blank\")'>الخدمة المصرفية عبر الإنترنت</a>.",
+    "new_account": "لفتح حس��ب جديد، قم بزيارة أقرب فرع مع جواز سفرك أو هويتك الوطنية. <a href='#' onclick='window.open(\"https://onb.sd/new-account\", \"_blank\")'>احجز موعدًا الآن</a>",
+    "interest_rates": "أسعار الفائدة على الودائع تتراوح بين 5% إلى 10% سنويًا. <a href='#' onclick='window.open(\"https://onb.sd/rates\", \"_blank\")'>اطلع على جميع الأسعار</a>",
+    "branches": "فروعنا موجودة في أم درمان، الخرطوم، وبورتسودان. <a href='#' onclick='window.open(\"https://onb.sd/branches\", \"_blank\")'>اعثر على أقرب فرع</a>",
+    "working_hours": "ساعات العمل من 8 صباحًا إلى 3 مساءً من الأحد إلى الخميس. <a href='#' onclick='window.open(\"https://onb.sd/hours\", \"_blank\")'>تحقق من ساعات العمل الخاصة</a>",
+    "contact": "الاتصال بنا على الرقم <a href='tel:249123456789'>249-123-456-789</a> أو عبر البريد الإلكتروني <a href='mailto:[email protected]'>info@onb.sd</a>. <a href='#' onclick='window.open(\"https://onb.sd/contact\", \"_blank\")'>نموذج الاتصال</a>"
 }
 
 # Omdurman National Bank-specific guidelines in English
 ONB_GUIDELINES_EN = {
-    "balance": "You can check your balance online or via the ONB mobile app.",
-    "lost_card": "In case of a lost card, call 249-123-456-789 immediately.",
-    "loan": "Loan requirements include minimum income (5000 SDG) and good credit history.",
-    "transfer": "To transfer funds, use the mobile app or online banking service.",
-    "new_account": "To open a new account, visit your nearest branch with your passport or national ID.",
-    "interest_rates": "Interest rates on deposits range from 5% to 10% annually.",
-    "branches": "Our branches are located in Omdurman, Khartoum, and Port Sudan. Visit our website for details.",
-    "working_hours": "Working hours are from 8 AM to 3 PM, Sunday to Thursday.",
-    "contact": "Contact us at 249-123-456-789 or via email at [email protected]."
+    "balance": "You can check your balance online or via the ONB mobile app. <a href='#' onclick='window.open(\"https://onb.sd/balance\", \"_blank\")'>Check your balance now</a>",
+    "lost_card": "In case of a lost card, call <a href='tel:249123456789'>249-123-456-789</a> immediately or <a href='#' onclick='window.open(\"https://onb.sd/block-card\", \"_blank\")'>block your card online</a>.",
+    "loan": "Loan requirements include minimum income (5000 SDG) and good credit history. <a href='#' onclick='window.open(\"https://onb.sd/loans\", \"_blank\")'>Apply for a loan now</a>",
+    "transfer": "To transfer funds, use the <a href='#' onclick='window.open(\"https://onb.sd/mobile-app\", \"_blank\")'>mobile app</a> or <a href='#' onclick='window.open(\"https://onb.sd/online-banking\", \"_blank\")'>online banking service</a>.",
+    "new_account": "To open a new account, visit your nearest branch with your passport or national ID. <a href='#' onclick='window.open(\"https://onb.sd/new-account\", \"_blank\")'>Book an appointment now</a>",
+    "interest_rates": "Interest rates on deposits range from 5% to 10% annually. <a href='#' onclick='window.open(\"https://onb.sd/rates\", \"_blank\")'>View all rates</a>",
+    "branches": "Our branches are located in Omdurman, Khartoum, and Port Sudan. <a href='#' onclick='window.open(\"https://onb.sd/branches\", \"_blank\")'>Find your nearest branch</a>",
+    "working_hours": "Working hours are from 8 AM to 3 PM, Sunday to Thursday. <a href='#' onclick='window.open(\"https://onb.sd/hours\", \"_blank\")'>Check special hours</a>",
+    "contact": "Contact us at <a href='tel:249123456789'>249-123-456-789</a> or via email at <a href='mailto:[email protected]'>info@onb.sd</a>. <a href='#' onclick='window.open(\"https://onb.sd/contact\", \"_blank\")'>Contact form</a>"
 }
 
+# Quick action buttons in Arabic
+QUICK_ACTIONS_AR = [
+    {"text": "تحقق من الرصيد", "intent": "balance"},
+    {"text": "الإبلاغ عن بطاقة مفقودة", "intent": "lost_card"},
+    {"text": "معلومات القرض", "intent": "loan"},
+    {"text": "تحويل الأموال", "intent": "transfer"},
+    {"text": "فتح حساب جديد", "intent": "new_account"},
+    {"text": "أسعار الفائدة", "intent": "interest_rates"},
+    {"text": "مواقع الفروع", "intent": "branches"},
+    {"text": "ساعات العمل", "intent": "working_hours"},
+    {"text": "اتصل بنا", "intent": "contact"}
+]
+
+# Quick action buttons in English
+QUICK_ACTIONS_EN = [
+    {"text": "Check Balance", "intent": "balance"},
+    {"text": "Report Lost Card", "intent": "lost_card"},
+    {"text": "Loan Information", "intent": "loan"},
+    {"text": "Transfer Funds", "intent": "transfer"},
+    {"text": "Open New Account", "intent": "new_account"},
+    {"text": "Interest Rates", "intent": "interest_rates"},
+    {"text": "Branch Locations", "intent": "branches"},
+    {"text": "Working Hours", "intent": "working_hours"},
+    {"text": "Contact Us", "intent": "contact"}
+]
+
 # Menu options in both languages
 MENU_AR = """
 قائمة الخدمات المصرفية:
@@ -71,11 +151,13 @@ INTENT_KEYWORDS = {
     "contact": ["contact", "phone", "email", "call", "اتصال", "هاتف", "بريد", "اتصل", "9"]
 }
 
-def detect_language(text):
-    # Use Hugging Face language detection model
-    result = language_detector(text)
-    language = result[0]['label']
-    return language
+# Function to get a random phrase from the customer service phrases
+def get_random_phrase(category, language):
+    import random
+    if language == "ar":
+        return random.choice(ENHANCED_CUSTOMER_SERVICE_PHRASES_AR[category])
+    else:
+        return random.choice(ENHANCED_CUSTOMER_SERVICE_PHRASES_EN[category])
 
 def classify_intent(message: str):
     # Check for menu request
@@ -94,6 +176,23 @@ def classify_intent(message: str):
                 
     return "unknown"
 
+# Function to log customer interactions
+def log_interaction(user_message, bot_response, intent, language):
+    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    log_entry = {
+        "timestamp": timestamp,
+        "user_message": user_message,
+        "bot_response": bot_response,
+        "intent": intent,
+        "language": language
+    }
+    
+    try:
+        with open("interaction_logs.jsonl", "a") as f:
+            f.write(json.dumps(log_entry) + "\n")
+    except Exception as e:
+        print(f"Error logging interaction: {e}")
+
 def respond(message: str):
     if not message.strip():
         return {
@@ -101,12 +200,8 @@ def respond(message: str):
             "en": "Please type your question."
         }
     
-    # Detect language
-    language = detect_language(message)
-    
-    # If the language is neither Arabic nor English, default to English
-    if language != "ar" and language != "en":
-        language = "en"
+    # Detect language using simple function
+    language = simple_detect_language(message)
     
     # Classify the user's intent using keyword matching
     intent = classify_intent(message)
@@ -121,17 +216,77 @@ def respond(message: str):
     if intent == "menu":
         responses["ar"] = MENU_AR
         responses["en"] = MENU_EN
+        log_interaction(message, responses[language], "menu", language)
         return responses
     
+    # Check if it's a banking FAQ
+    if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
+        faq_answer = handle_banking_faq(message, language)
+        if faq_answer:
+            # Add a greeting phrase at the beginning
+            greeting_ar = get_random_phrase("greeting", "ar")
+            greeting_en = get_random_phrase("greeting", "en")
+            
+            # Add a follow-up phrase at the end
+            follow_up_ar = get_random_phrase("follow_up", "ar")
+            follow_up_en = get_random_phrase("follow_up", "en")
+            
+            # Combine all parts
+            responses["ar"] = f"{greeting_ar}<br><br>{faq_answer}<br><br>{follow_up_ar}"
+            responses["en"] = f"{greeting_en}<br><br>{faq_answer}<br><br>{follow_up_en}"
+            
+            log_interaction(message, responses[language], "faq", language)
+            return responses
+    
+    # Check if it's a banking term definition request
+    if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
+        term_definition = get_banking_term_definition(message, language)
+        if term_definition:
+            # Add a greeting phrase at the beginning
+            greeting_ar = get_random_phrase("greeting", "ar")
+            greeting_en = get_random_phrase("greeting", "en")
+            
+            # Add a follow-up phrase at the end
+            follow_up_ar = get_random_phrase("follow_up", "ar")
+            follow_up_en = get_random_phrase("follow_up", "en")
+            
+            # Combine all parts
+            responses["ar"] = f"{greeting_ar}<br><br>{term_definition}<br><br>{follow_up_ar}"
+            responses["en"] = f"{greeting_en}<br><br>{term_definition}<br><br>{follow_up_en}"
+            
+            log_interaction(message, responses[language], "term", language)
+            return responses
+    
     # If intent is recognized, return the corresponding response
     if intent != "unknown":
-        responses["ar"] = ONB_GUIDELINES_AR.get(intent, "عذرًا، لم يتم التعرف على الخيار المحدد.")
-        responses["en"] = ONB_GUIDELINES_EN.get(intent, "Sorry, the selected option was not recognized.")
+        if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
+            # Use enhanced response if available
+            responses["ar"] = get_enhanced_response(intent, "ar")
+            responses["en"] = get_enhanced_response(intent, "en")
+        else:
+            # Add a greeting phrase at the beginning
+            greeting_ar = get_random_phrase("greeting", "ar")
+            greeting_en = get_random_phrase("greeting", "en")
+            
+            # Add the main response
+            main_response_ar = ONB_GUIDELINES_AR.get(intent, "عذرًا، لم ي��م التعرف على الخيار المحدد.")
+            main_response_en = ONB_GUIDELINES_EN.get(intent, "Sorry, the selected option was not recognized.")
+            
+            # Add a follow-up phrase at the end
+            follow_up_ar = get_random_phrase("follow_up", "ar")
+            follow_up_en = get_random_phrase("follow_up", "en")
+            
+            # Combine all parts
+            responses["ar"] = f"{greeting_ar}<br><br>{main_response_ar}<br><br>{follow_up_ar}"
+            responses["en"] = f"{greeting_en}<br><br>{main_response_en}<br><br>{follow_up_en}"
     else:
         # Default response if no intent is matched - show menu
         responses["ar"] = "عذرًا، لم أفهم سؤالك. إليك قائمة بالخدمات المتاحة:" + MENU_AR
         responses["en"] = "Sorry, I didn't understand your question. Here's a menu of available services:" + MENU_EN
     
+    # Log the interaction
+    log_interaction(message, responses[language], intent, language)
+    
     return responses
 
 # Custom CSS for better UI
@@ -189,14 +344,226 @@ custom_css = """
 .menu-button {
     margin-top: 0.5rem;
 }
+
+.quick-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 1rem 0;
+}
+
+.quick-action-button {
+    background-color: #1a5276;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.3s;
+}
+
+.quick-action-button:hover {
+    background-color: #2980b9;
+}
+
+.chat-container {
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 1rem;
+    background-color: #f9f9f9;
+}
+
+.typing-indicator {
+    display: inline-block;
+    width: 50px;
+    text-align: left;
+}
+
+.typing-indicator span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: #1a5276;
+    border-radius: 50%;
+    margin-right: 5px;
+    animation: typing 1s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typing {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-5px);
+    }
+}
+
+.live-agent-button {
+    background-color: #27ae60;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    margin-top: 1rem;
+    transition: background-color 0.3s;
+}
+
+.live-agent-button:hover {
+    background-color: #2ecc71;
+}
+
+/* Add custom styling for links */
+a {
+    color: #2980b9;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Add styling for action buttons */
+.action-button {
+    display: inline-block;
+    background-color: #3498db;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    margin: 0.5rem 0;
+    text-decoration: none;
+}
+
+.action-button:hover {
+    background-color: #2980b9;
+    text-decoration: none;
+}
+
+/* Styling for satisfaction survey */
+.satisfaction-survey {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.survey-question {
+    margin-bottom: 1rem;
+}
+
+.rating-options {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.survey-submit {
+    background-color: #1a5276;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    margin-top: 1rem;
+}
+
+.survey-submit:hover {
+    background-color: #2980b9;
+}
+"""
+
+# Custom JavaScript for enhanced functionality
+custom_js = """
+function simulateTyping(message, elementId, delay = 30) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+    
+    element.innerHTML = "";
+    let i = 0;
+    
+    function type() {
+        if (i < message.length) {
+            element.innerHTML += message.charAt(i);
+            i++;
+            setTimeout(type, delay);
+        }
+    }
+    
+    type();
+}
+
+// Function to show typing indicator
+function showTypingIndicator() {
+    const chatbox = document.getElementById('chatbox');
+    if (!chatbox) return;
+    
+    const typingIndicator = document.createElement('div');
+    typingIndicator.className = 'typing-indicator';
+    typingIndicator.id = 'typing-indicator';
+    typingIndicator.innerHTML = '<span></span><span></span><span></span>';
+    
+    chatbox.appendChild(typingIndicator);
+    chatbox.scrollTop = chatbox.scrollHeight;
+}
+
+// Function to hide typing indicator
+function hideTypingIndicator() {
+    const typingIndicator = document.getElementById('typing-indicator');
+    if (typingIndicator) {
+        typingIndicator.remove();
+    }
+}
+
+// Function to connect with a live agent
+function connectLiveAgent() {
+    alert('Connecting to a live customer service agent. Please wait a moment...');
+    // In a real implementation, this would initiate a connection to a live agent system
+}
+
+// Function to show satisfaction survey
+function showSatisfactionSurvey(surveyHtml) {
+    const chatbox = document.getElementById('chatbox');
+    if (!chatbox) return;
+    
+    const surveyDiv = document.createElement('div');
+    surveyDiv.innerHTML = surveyHtml;
+    
+    chatbox.appendChild(surveyDiv);
+    chatbox.scrollTop = chatbox.scrollHeight;
+}
+
+// Function to submit survey
+function submitSurvey() {
+    const form = document.getElementById('satisfaction-form');
+    if (!form) return;
+    
+    // In a real implementation, this would send the survey data to a server
+    alert('Thank you for your feedback!');
+    form.style.display = 'none';
+}
 """
 
 # Chat interface with enhanced UI
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css=custom_css, js=custom_js) as demo:
     # Store conversation history
     state = gr.State(value=[])
     # Store selected language
     selected_lang = gr.State(value="ar")
+    # Store user name for personalization
+    user_name = gr.State(value=None)
     
     with gr.Row(elem_classes="header-section"):
         with gr.Column():
@@ -211,8 +578,15 @@ with gr.Blocks(css=custom_css) as demo:
                 label="Language | اللغة"
             )
     
-    with gr.Row():
-        chat_box = gr.Chatbot(elem_id="chatbox", height=400)
+    with gr.Row(elem_classes="chat-container"):
+        chat_box = gr.HTML(elem_id="chatbox", value="<div style='height: 400px; overflow-y: auto;'></div>")
+    
+    # Quick action buttons (will be populated based on language)
+    with gr.Row(elem_classes="quick-actions", visible=True) as quick_actions_container:
+        quick_action_buttons = []
+        for i in range(9):  # Create 9 buttons (one for each intent)
+            button = gr.Button("", visible=False, elem_classes="quick-action-button")
+            quick_action_buttons.append(button)
     
     with gr.Row():
         with gr.Column(scale=8):
@@ -225,32 +599,92 @@ with gr.Blocks(css=custom_css) as demo:
             submit_btn = gr.Button("Send | إرسال", variant="primary")
     
     with gr.Row():
-        with gr.Column(elem_classes="menu-button"):
-            menu_btn = gr.Button("Show Menu | إظهار القائمة")
+        with gr.Column(scale=1):
+            menu_btn = gr.Button("Show Menu | إظهار القائمة", elem_classes="menu-button")
+        with gr.Column(scale=1):
+            live_agent_btn = gr.Button("Connect to Live Agent | الاتصال بوكيل حي", elem_classes="live-agent-button")
+        with gr.Column(scale=1):
+            survey_btn = gr.Button("Feedback | تقييم الخدمة", elem_classes="menu-button")
     
     with gr.Row(elem_classes="footer-section"):
         gr.Markdown("© 2025 Omdurman National Bank. All Rights Reserved. | جميع الحقوق محفوظة لبنك أم درمان الوطني ٢٠٢٥ ©")
     
-    # Update language state when language is changed
-    def update_language(lang):
-        if lang == "العربية":
-            return "ar"
-        else:
-            return "en"
+    # Update language state and quick action buttons when language is changed
+    def update_language_and_buttons(lang):
+        language_code = "ar" if lang == "العربية" else "en"
+        
+        # Get the appropriate quick actions based on language
+        quick_actions = QUICK_ACTIONS_AR if language_code == "ar" else QUICK_ACTIONS_EN
+        
+        # Update button visibility and text
+        button_updates = []
+        for i, button in enumerate(quick_action_buttons):
+            if i < len(quick_actions):
+                button_updates.append(gr.Button.update(visible=True, value=quick_actions[i]["text"]))
+            else:
+                button_updates.append(gr.Button.update(visible=False))
+        
+        return [language_code] + button_updates
     
+    # Connect language button to update function
+    outputs = [selected_lang] + quick_action_buttons
     language_btn.change(
-        fn=update_language,
+        fn=update_language_and_buttons,
         inputs=language_btn,
-        outputs=selected_lang
+        outputs=outputs
     )
     
-    # Handle message submission
-    def on_submit(message, chat_history, lang):
+    # Function to add message to chat
+    def add_message_to_chat(message, is_user, lang):
+        # Create a JavaScript function to add the message to the chat
+        alignment = "right" if (is_user or (not is_user and lang == "ar")) else "left"
+        background = "#e6f7ff" if is_user else "#f0f0f0"
+        
+        js_code = f"""
+        (function() {{
+            const chatbox = document.getElementById('chatbox').querySelector('div');
+            const messageDiv = document.createElement('div');
+            messageDiv.style.padding = '1rem';
+            messageDiv.style.borderRadius = '10px';
+            messageDiv.style.marginBottom = '1rem';
+            messageDiv.style.maxWidth = '80%';
+            messageDiv.style.backgroundColor = '{background}';
+            messageDiv.style.marginLeft = '{alignment === "right" ? "auto" : "0"}';
+            messageDiv.style.marginRight = '{alignment === "left" ? "auto" : "0"}';
+            messageDiv.style.textAlign = '{alignment}';
+            messageDiv.innerHTML = `{message}`;
+            chatbox.appendChild(messageDiv);
+            chatbox.scrollTop = chatbox.scrollHeight;
+        }})();
+        """
+        
+        return js_code
+    
+    # Handle message submission with typing effect
+    def on_submit(message, chat_history, lang, name):
         if not message.strip():
-            return "", chat_history
+            return "", chat_history, "", name
+        
+        # Check if this is a name introduction
+        name_patterns = [
+            r"my name is (\w+)",
+            r"i am (\w+)",
+            r"i'm (\w+)",
+            r"اسمي (\w+)",
+            r"أنا (\w+)"
+        ]
+        
+        for pattern in name_patterns:
+            match = re.search(pattern, message.lower())
+            if match:
+                name = match.group(1)
+                break
+        
+        # Add user message to chat
+        user_js = add_message_to_chat(message, True, lang)
         
-        # Add user message to chat history
-        chat_history.append([message, None])
+        # Show typing indicator
+        typing_js = "showTypingIndicator();"
         
         # Get response
         responses = respond(message)
@@ -258,10 +692,26 @@ with gr.Blocks(css=custom_css) as demo:
         # Select response based on language
         response = responses[lang]
         
-        # Update bot response in chat history
-        chat_history[-1][1] = response
+        # Personalize response if name is available
+        if name and CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
+            if lang == "ar":
+                response = response.replace("مرحبًا", f"مرحبًا {name}")
+            else:
+                response = response.replace("Welcome", f"Welcome {name}")
+                response = response.replace("Hello", f"Hello {name}")
         
-        return "", chat_history
+        # Hide typing indicator and add bot response
+        bot_js = f"""
+        setTimeout(function() {{
+            hideTypingIndicator();
+            {add_message_to_chat(response, False, lang)}
+        }}, 1000);
+        """
+        
+        # Combine all JavaScript
+        combined_js = user_js + typing_js + bot_js
+        
+        return "", chat_history, combined_js, name
     
     # Handle menu button click
     def show_menu(chat_history, lang):
@@ -270,31 +720,199 @@ with gr.Blocks(css=custom_css) as demo:
             "en": MENU_EN
         }
         
-        # Add system message showing the menu
+        # Get menu text
         menu_text = menu_responses[lang]
-        chat_history.append([None, menu_text])
         
-        return chat_history
+        # Add system message showing the menu
+        js_code = add_message_to_chat(menu_text.replace("\n", "<br>"), False, lang)
+        
+        return chat_history, js_code
+    
+    # Handle quick action button clicks
+    def handle_quick_action(button_index, chat_history, lang, name):
+        # Get the appropriate quick actions based on language
+        quick_actions = QUICK_ACTIONS_AR if lang == "ar" else QUICK_ACTIONS_EN
+        
+        if button_index < len(quick_actions):
+            # Get the intent for this button
+            intent = quick_actions[button_index]["intent"]
+            
+            # Get the response for this intent
+            if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
+                # Use enhanced response if available
+                response_ar = get_enhanced_response(intent, "ar", name)
+                response_en = get_enhanced_response(intent, "en", name)
+            else:
+                # Add a greeting phrase at the beginning
+                greeting_ar = get_random_phrase("greeting", "ar")
+                greeting_en = get_random_phrase("greeting", "en")
+                
+                # Add the main response
+                main_response_ar = ONB_GUIDELINES_AR.get(intent, "")
+                main_response_en = ONB_GUIDELINES_EN.get(intent, "")
+                
+                # Add a follow-up phrase at the end
+                follow_up_ar = get_random_phrase("follow_up", "ar")
+                follow_up_en = get_random_phrase("follow_up", "en")
+                
+                # Combine all parts
+                response_ar = f"{greeting_ar}<br><br>{main_response_ar}<br><br>{follow_up_ar}"
+                response_en = f"{greeting_en}<br><br>{main_response_en}<br><br>{follow_up_en}"
+            
+            responses = {
+                "ar": response_ar,
+                "en": response_en
+            }
+            
+            # Select response based on language
+            response = responses[lang]
+            
+            # Personalize response if name is available
+            if name:
+                if lang == "ar":
+                    response = response.replace("مرحبًا", f"مرحبًا {name}")
+                else:
+                    response = response.replace("Welcome", f"Welcome {name}")
+                    response = response.replace("Hello", f"Hello {name}")
+            
+            # Add button text as user message
+            button_text = quick_actions[button_index]["text"]
+            user_js = add_message_to_chat(button_text, True, lang)
+            
+            # Show typing indicator
+            typing_js = "showTypingIndicator();"
+            
+            # Hide typing indicator and add bot response
+            bot_js = f"""
+            setTimeout(function() {{
+                hideTypingIndicator();
+                {add_message_to_chat(response, False, lang)}
+            }}, 1000);
+            """
+            
+            # Combine all JavaScript
+            combined_js = user_js + typing_js + bot_js
+            
+            # Log the interaction
+            log_interaction(button_text, response, intent, lang)
+            
+            return chat_history, combined_js
+        
+        return chat_history, ""
+    
+    # Handle live agent button click
+    def connect_to_live_agent():
+        return "connectLiveAgent();"
+    
+    # Handle satisfaction survey button click
+    def show_satisfaction_survey(lang):
+        if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
+            survey_html = offer_satisfaction_survey(lang)
+            return f"showSatisfactionSurvey(`{survey_html}`);"
+        else:
+            # Simple survey HTML if enhancements not available
+            title = "استطلاع رضا العملاء" if lang == "ar" else "Customer Satisfaction Survey"
+            intro = "نقدر ملاحظاتك!" if lang == "ar" else "We value your feedback!"
+            submit = "إرسال" if lang == "ar" else "Submit"
+            
+            survey_html = f"""
+            <div class="satisfaction-survey" dir="{('rtl' if lang == 'ar' else 'ltr')}">
+                <h3>{title}</h3>
+                <p>{intro}</p>
+                <button onclick="submitSurvey()" class="survey-submit">{submit}</button>
+            </div>
+            """
+            
+            return f"showSatisfactionSurvey(`{survey_html}`);"
     
     # Link inputs and button to response function
     submit_btn.click(
         fn=on_submit,
-        inputs=[text_input, chat_box, selected_lang],
-        outputs=[text_input, chat_box]
+        inputs=[text_input, state, selected_lang, user_name],
+        outputs=[text_input, state, chat_box, user_name]
     )
     
     # Link menu button to show menu function
     menu_btn.click(
         fn=show_menu,
-        inputs=[chat_box, selected_lang],
+        inputs=[state, selected_lang],
+        outputs=[state, chat_box]
+    )
+    
+    # Link live agent button to connect function
+    live_agent_btn.click(
+        fn=connect_to_live_agent,
+        inputs=[],
         outputs=[chat_box]
     )
     
+    # Link survey button to show survey function
+    survey_btn.click(
+        fn=show_satisfaction_survey,
+        inputs=[selected_lang],
+        outputs=[chat_box]
+    )
+    
+    # Link quick action buttons to handler function
+    for i, button in enumerate(quick_action_buttons):
+        button.click(
+            fn=lambda idx=i, s=state, l=selected_lang, n=user_name: handle_quick_action(idx, s, l, n),
+            inputs=[state, selected_lang, user_name],
+            outputs=[state, chat_box]
+        )
+    
     # Also trigger on Enter key
     text_input.submit(
         fn=on_submit,
-        inputs=[text_input, chat_box, selected_lang],
-        outputs=[text_input, chat_box]
+        inputs=[text_input, state, selected_lang, user_name],
+        outputs=[text_input, state, chat_box, user_name]
+    )
+    
+    # Initialize the chat with a welcome message
+    def init_chat(lang):
+        # Get welcome message based on language
+        welcome_ar = """
+        <div style='text-align: center; margin-bottom: 20px;'>
+            <img src='https://via.placeholder.com/150?text=ONB+Logo' alt='ONB Logo' style='max-width: 150px;'>
+            <h3>مرحبًا بك في المساعد المصرفي الافتراضي لبنك أم درمان الوطني!</h3>
+            <p>يمكنك طرح أي سؤال حول خدماتنا المصرفية أو استخدام أزرار الإجراءات السريعة أدناه.</p>
+        </div>
+        """
+        
+        welcome_en = """
+        <div style='text-align: center; margin-bottom: 20px;'>
+            <img src='https://via.placeholder.com/150?text=ONB+Logo' alt='ONB Logo' style='max-width: 150px;'>
+            <h3>Welcome to Omdurman National Bank Virtual Banking Assistant!</h3>
+            <p>You can ask any question about our banking services or use the quick action buttons below.</p>
+        </div>
+        """
+        
+        welcome_message = welcome_ar if lang == "ar" else welcome_en
+        
+        # Add welcome message to chat
+        js_code = f"""
+        (function() {{
+            const chatbox = document.getElementById('chatbox').querySelector('div');
+            chatbox.innerHTML = `{welcome_message}`;
+        }})();
+        """
+        
+        # Update quick action buttons
+        quick_actions = QUICK_ACTIONS_AR if lang == "ar" else QUICK_ACTIONS_EN
+        button_updates = []
+        for i, button in enumerate(quick_action_buttons):
+            if i < len(quick_actions):
+                button_updates.append(gr.Button.update(visible=True, value=quick_actions[i]["text"]))
+            else:
+                button_updates.append(gr.Button.update(visible=False))
+        
+        return [js_code] + button_updates
+    
+    # Initialize the chat when the app starts
+    demo.load(
+        fn=lambda: init_chat("ar"),
+        inputs=[],
+        outputs=[chat_box] + quick_action_buttons
     )
 
 if __name__ == "__main__":
@@ -302,4 +920,4 @@ if __name__ == "__main__":
         server_name="0.0.0.0",
         server_port=7860,
         share=True  # Enable public link
-    )
+    )