Update app.py

app.py

@@ -6,6 +6,9 @@ import gradio as gr
 import importlib.util
 
 from huggingface_hub import hf_hub_download
+from gradio.components.chatbot import Chatbot as grChatbot # Import for type hints
+from gradio.components.textbox import Textbox as grTextbox
+from gradio.events import EventListener
 
 # ----------------------------------------------------------------------
 # Helper to read secrets from the HF Space environment
@@ -57,24 +60,17 @@ print("--- [UI App] Bootstrap complete. Gradio UI is starting. ---")
 # 3. Core Gradio Chat Logic
 # ----------------------------------------------------------------------
 def add_message_and_respond(message: str, history: list):
-    """
-    Adds the user's message to the chat history and gets the bot's streaming response.
-    """
-    # Add the user's message to the UI immediately
     history.append([message, None])
     yield history
 
-    # Convert chat history to the format the engine expects
     history_for_engine = []
-    for user_msg, bot_msg in history[:-1]: # Exclude the current turn
+    for user_msg, bot_msg in history[:-1]:
         history_for_engine.append({"role": "user", "content": user_msg})
         if bot_msg:
             history_for_engine.append({"role": "assistant", "content": bot_msg})
 
-    # Get the response from the agent
     final_response = engine.get_response(message, history_for_engine)
     
-    # Stream the complete response back to the UI
     history[-1][1] = ""
     for char in final_response:
         history[-1][1] += char
@@ -85,60 +81,49 @@ def add_message_and_respond(message: str, history: list):
 # 4. UI Layout and Launch (Beautified with gr.Blocks)
 # ----------------------------------------------------------------------
 
-# Custom CSS for a cleaner look
 css = """
 #chatbot { min-height: 600px; }
 .footer { text-align: center; color: #777; font-size: 0.8em; padding: 10px 0; }
 """
 
+# The theme must be passed to gr.Blocks now
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
-    # Header
     gr.Markdown("<h1>🤖 PRECISE RAG Agent</h1>")
     gr.Markdown("Tanya Jawab Cerdas Mengenai Dokumentasi Sistem PRECISE")
     
-    # Main Chatbot Interface
-    chatbot = gr.Chatbot(
+    chatbot = grChatbot(
         elem_id="chatbot",
         label="Conversation",
-        render_math=True  # <-- THE FIX FOR FORMULAS!
+        likeable=True, # This is a valid and nice feature
     )
     
-    # Input area
     with gr.Row():
-        msg = gr.Textbox(
+        msg = grTextbox(
             label="Your Question",
             placeholder="Ketik pertanyaan Anda di sini dan tekan Enter...",
-            scale=4, # Make the textbox wider
+            scale=4,
         )
         submit_btn = gr.Button("Send", variant="primary", scale=1)
 
-    # Example questions
     gr.Examples(
         examples=[
+            "Apa rumus untuk menghitung PVR?",
             "Apa tujuan pengadaan PRECISE?",
-            "Apa keunggulan utama PRECISE dibandingkan sistem perhitungan target promosi yang lama?",
-            "Apakah PRECISE sudah terbukti memberikan manfaat finansial? Bisakah diberikan contohnya?",
-            "Selain akurasi, aspek teknis apa yang membuat PRECISE unik?"
+            "Jelaskan segmentasi *slow-moving*",
         ],
         inputs=msg,
     )
     
-    # Footer
     gr.Markdown("<hr><p class='footer'>Powered by OpenRouter and LangChain. All rights reserved.</p>")
 
     # --- Event Handlers ---
     
-    # Define the action for submitting a message (either by pressing Enter or clicking the button)
-    def submit_action(message, history):
-        yield from add_message_and_respond(message, history)
-
-    # When the user submits, call the action and update the chatbot
-    # Then, clear the input textbox
-    msg.submit(submit_action, [msg, chatbot], chatbot)
-    msg.submit(lambda: "", None, msg) # Clears textbox
+    # Create a submit action that can be triggered by button click or textbox submit
+    submit_event = msg.submit(add_message_and_respond, [msg, chatbot], chatbot)
+    submit_event.then(lambda: "", None, msg) # Clears textbox after submit
     
-    submit_btn.click(submit_action, [msg, chatbot], chatbot)
-    submit_btn.click(lambda: "", None, msg) # Clears textbox
+    btn_event = submit_btn.click(add_message_and_respond, [msg, chatbot], chatbot)
+    btn_event.then(lambda: "", None, msg) # Clears textbox after click
 
 # ----------------------------------------------------------------------
 # 5. Launch the App
@@ -146,9 +131,10 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
 if __name__ == "__main__":
     allowed_user = _secret("CHAT_USER")
     allowed_pass = _secret("CHAT_PASS")
+    # Tell Gradio to load the MathJax library for LaTeX rendering
     demo.launch(
         auth=(allowed_user, allowed_pass),
         server_name="0.0.0.0",
         ssr_mode=False,
-        server_port=7860
+        server_port=7860,
     )