Update app.py

app.py

@@ -485,79 +485,8 @@ a:hover {
 }
 """
 
-# 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, js=custom_js) as demo:
+# Chat interface with simplified UI for Hugging Face
+with gr.Blocks(css=custom_css) as demo:
     # Store conversation history
     state = gr.State(value=[])
     # Store selected language
@@ -579,7 +508,7 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
             )
     
     with gr.Row(elem_classes="chat-container"):
-        chat_box = gr.HTML(elem_id="chatbox", value="<div style='height: 400px; overflow-y: auto;'></div>")
+        chatbot = gr.Chatbot(height=400)
     
     # Quick action buttons (will be populated based on language)
     with gr.Row(elem_classes="quick-actions", visible=True) as quick_actions_container:
@@ -634,36 +563,10 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
         outputs=outputs
     )
     
-    # 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
+    # Handle message submission
     def on_submit(message, chat_history, lang, name):
         if not message.strip():
-            return "", chat_history, "", name
+            return "", chat_history, name
         
         # Check if this is a name introduction
         name_patterns = [
@@ -680,11 +583,8 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
                 name = match.group(1)
                 break
         
-        # Add user message to chat
-        user_js = add_message_to_chat(message, True, lang)
-        
-        # Show typing indicator
-        typing_js = "showTypingIndicator();"
+        # Add user message to chat history
+        chat_history.append([message, None])
         
         # Get response
         responses = respond(message)
@@ -700,18 +600,10 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
                 response = response.replace("Welcome", f"Welcome {name}")
                 response = response.replace("Hello", f"Hello {name}")
         
-        # 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
+        # Update bot response in chat history
+        chat_history[-1][1] = response
         
-        return "", chat_history, combined_js, name
+        return "", chat_history, name
     
     # Handle menu button click
     def show_menu(chat_history, lang):
@@ -724,9 +616,9 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
         menu_text = menu_responses[lang]
         
         # Add system message showing the menu
-        js_code = add_message_to_chat(menu_text.replace("\n", "<br>"), False, lang)
+        chat_history.append([None, menu_text.replace("\n", "<br>")])
         
-        return chat_history, js_code
+        return chat_history
     
     # Handle quick action button clicks
     def handle_quick_action(button_index, chat_history, lang, name):
@@ -736,6 +628,10 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
         if button_index < len(quick_actions):
             # Get the intent for this button
             intent = quick_actions[button_index]["intent"]
+            button_text = quick_actions[button_index]["text"]
+            
+            # Add button text as user message
+            chat_history.append([button_text, None])
             
             # Get the response for this intent
             if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
@@ -775,130 +671,91 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
                     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
+            # Update bot response in chat history
+            chat_history[-1][1] = response
             
             # Log the interaction
             log_interaction(button_text, response, intent, lang)
             
-            return chat_history, combined_js
-        
-        return chat_history, ""
+        return chat_history
     
     # Handle live agent button click
-    def connect_to_live_agent():
-        return "connectLiveAgent();"
+    def connect_to_live_agent(chat_history, lang):
+        message = "Connecting to a live customer service agent. Please wait a moment..." if lang == "en" else "جاري الاتصال بوكيل خدمة العملاء. يرجى الانتظار لحظة..."
+        chat_history.append([None, message])
+        return chat_history
     
     # Handle satisfaction survey button click
-    def show_satisfaction_survey(lang):
+    def show_satisfaction_survey(chat_history, lang):
         if CUSTOMER_SERVICE_ENHANCEMENTS_AVAILABLE:
             survey_html = offer_satisfaction_survey(lang)
-            return f"showSatisfactionSurvey(`{survey_html}`);"
+            chat_history.append([None, survey_html])
         else:
-            # Simple survey HTML if enhancements not available
+            # Simple survey message 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}`);"
+            message = f"<div class='satisfaction-survey'><h3>{title}</h3><p>{'نشكرك على استخدام المساعد المصرفي الافتراضي!' if lang == 'ar' else 'Thank you for using our virtual banking assistant!'}</p></div>"
+            chat_history.append([None, message])
+        
+        return chat_history
     
     # Link inputs and button to response function
     submit_btn.click(
         fn=on_submit,
-        inputs=[text_input, state, selected_lang, user_name],
-        outputs=[text_input, state, chat_box, user_name]
+        inputs=[text_input, chatbot, selected_lang, user_name],
+        outputs=[text_input, chatbot, user_name]
     )
     
     # Link menu button to show menu function
     menu_btn.click(
         fn=show_menu,
-        inputs=[state, selected_lang],
-        outputs=[state, chat_box]
+        inputs=[chatbot, selected_lang],
+        outputs=[chatbot]
     )
     
     # Link live agent button to connect function
     live_agent_btn.click(
         fn=connect_to_live_agent,
-        inputs=[],
-        outputs=[chat_box]
+        inputs=[chatbot, selected_lang],
+        outputs=[chatbot]
     )
     
     # Link survey button to show survey function
     survey_btn.click(
         fn=show_satisfaction_survey,
-        inputs=[selected_lang],
-        outputs=[chat_box]
+        inputs=[chatbot, selected_lang],
+        outputs=[chatbot]
     )
     
     # 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]
+            fn=lambda idx=i, chat=chatbot, lang=selected_lang, name=user_name: handle_quick_action(idx, chat, lang, name),
+            inputs=[chatbot, selected_lang, user_name],
+            outputs=[chatbot]
         )
     
     # Also trigger on Enter key
     text_input.submit(
         fn=on_submit,
-        inputs=[text_input, state, selected_lang, user_name],
-        outputs=[text_input, state, chat_box, user_name]
+        inputs=[text_input, chatbot, selected_lang, user_name],
+        outputs=[text_input, chatbot, 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>
-        """
+    def init_chat():
+        # Welcome message in both languages
+        welcome_ar = "مرحبًا بك في المساعد المصرفي الافتراضي لبنك أم درمان الوطني! يمكنك طرح أي سؤال حول خدماتنا المصرفية أو استخدام أزرار الإجراءات السريعة أدناه."
+        welcome_en = "Welcome to Omdurman National Bank Virtual Banking Assistant! You can ask any question about our banking services or use the quick action buttons below."
         
-        welcome_message = welcome_ar if lang == "ar" else welcome_en
+        # Initialize chat with welcome messages
+        chat_history = []
+        chat_history.append([None, welcome_ar])
+        chat_history.append([None, welcome_en])
         
-        # Add welcome message to chat
-        js_code = f"""
-        (function() {{
-            const chatbox = document.getElementById('chatbox').querySelector('div');
-            chatbox.innerHTML = `{welcome_message}`;
-        }})();
-        """
+        # Get the appropriate quick actions for Arabic (default)
+        quick_actions = QUICK_ACTIONS_AR
         
-        # Update quick action buttons
-        quick_actions = QUICK_ACTIONS_AR if lang == "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):
@@ -906,13 +763,13 @@ with gr.Blocks(css=custom_css, js=custom_js) as demo:
             else:
                 button_updates.append(gr.Button.update(visible=False))
         
-        return [js_code] + button_updates
+        return [chat_history] + button_updates
     
     # Initialize the chat when the app starts
     demo.load(
-        fn=lambda: init_chat("ar"),
+        fn=init_chat,
         inputs=[],
-        outputs=[chat_box] + quick_action_buttons
+        outputs=[chatbot] + quick_action_buttons
     )
 
 if __name__ == "__main__":