Update app.py

Admission ChatBot

app.py

@@ -506,30 +506,22 @@ class BOUESTIChatbot:
 
     def create_gradio_interface(self):
         """Create Gradio interface"""
-        with gr.Blocks(
-            title="BOUESTI Virtual Assistant",
-            theme=gr.themes.Soft()
-        ) as interface:
+        with gr.Blocks(title="BOUESTI Virtual Assistant", theme=gr.themes.Soft()) as interface:
+            # Header
             gr.HTML("""
                 <div class="gradio-header">
                     <h1 style="text-align: center;">
-                    <span style="font-size: 2.2em;">🎓</span> BOUESTI ChatBot
+                        <span style="font-size: 2.2em;">🎓</span> BOUESTI ChatBot
                     </h1>
                     <h3 style="text-align: center;">Bamidele Olumilua University of Education, Science, and Technology</h3>
                     <p style="text-align: center;">Get instant answers about admissions, programs, fees, and more!</p>
                 </div>
-            """)
+                """)
 
+        # Chat interface
         with gr.Row():
             with gr.Column(scale=4):
-                chatbot = gr.Chatbot(
-                    [],
-                    elem_id="chatbot",
-                    bubble_full_width=False,
-                    height=400,
-                    show_label=False
-                )
-
+                chatbot_window = gr.Chatbot([], elem_id="chatbot", bubble_full_width=False, height=400, show_label=False)
                 with gr.Row():
                     msg = gr.Textbox(
                         placeholder="Ask me about BOUESTI admissions, programs, fees, or any other questions...",
@@ -542,13 +534,14 @@ class BOUESTIChatbot:
                 clear_btn = gr.Button("Clear Chat", variant="secondary", size="sm")
 
             with gr.Column(scale=2):
+                # Instruction box
                 gr.HTML("""
-                    <div style="border: 1px solid #e0e0e0; padding: 10px; border-radius: 5px; margin-bottom: 10px; background-color: #f9f9f9;">
-                        <p style="margin: 0;">Whenever you are stuck, enter the magic word: <strong style="color: #591305;">Guide me</strong></p>
-                    </div>
+                <div style="border: 1px solid #e0e0e0; padding: 10px; border-radius: 5px; margin-bottom: 10px; background-color: #f9f9f9;">
+                    <p style="margin: 0;">Whenever you are stuck, enter the magic word: <strong style="color: #591305;">Guide me</strong></p>
+                </div>
                 """)
 
-        # Define handlers
+        # Handlers must be here inside the Blocks context
         def respond(message, history):
             if not message.strip():
                 return history, ""
@@ -559,14 +552,14 @@ class BOUESTIChatbot:
         def clear_chat():
             return [], ""
 
-        # Event wiring
-        submit_btn.click(respond, [msg, chatbot], [chatbot, msg])
-        msg.submit(respond, [msg, chatbot], [chatbot, msg])
-        clear_btn.click(clear_chat, [], [chatbot, msg])
+        submit_btn.click(respond, [msg, chatbot_window], [chatbot_window, msg])
+        msg.submit(respond, [msg, chatbot_window], [chatbot_window, msg])
+        clear_btn.click(clear_chat, [], [chatbot_window, msg])
 
         return interface
 
 
+
 # Initialize and expose the chatbot interface for Hugging Face Spaces
 chatbot = BOUESTIChatbot()
 demo = chatbot.create_gradio_interface()