Update app.py

app.py

@@ -46,6 +46,24 @@ tools = [
     }
 ]
 
+# --- UI: MathJax Configuration ---
+mathjax_config = '''
+<script>
+window.MathJax = {
+  tex: {
+    inlineMath: [['
+
+# --- Main Execution ---
+if __name__ == "__main__":
+    try:
+        logger.info("Starting EduBot...")
+        demo = create_interface()
+        demo.queue()
+        demo.launch()
+    except Exception as e:
+        logger.error(f"Failed to launch EduBot: {e}")
+        raise, '''
+
 # --- LLM Templates ---
 SYSTEM_MESSAGE = """You are EduBot, an expert multi-concept tutor designed to facilitate genuine learning and understanding. Your primary mission is to guide students through the learning process rather than providing direct answers to academic work.
 
@@ -266,21 +284,98 @@ def chat_response(message, history):
         logger.error(f"Error in chat_response: {e}")
         return f"I apologize, but I encountered an error while processing your message: {str(e)}"
 
-# --- Gradio Interface (UNCHANGED) ---
+# --- UI: Event Handlers ---
+def respond_and_update(message, history):
+    """Main function to handle user submission."""
+    if not message.strip():
+        return history, ""
+    
+    # Add user message to history
+    history.append({"role": "user", "content": message})
+    # Yield history to show the user message immediately, and clear the textbox
+    yield history, "" 
+
+    # Stream the bot's response
+    full_response = ""
+    for response_chunk in respond_with_enhanced_streaming(message, history):
+        full_response = response_chunk
+        # Update the last message (bot's response)
+        if len(history) > 0 and history[-1]["role"] == "user":
+            history.append({"role": "assistant", "content": full_response})
+        else:
+            history[-1] = {"role": "assistant", "content": full_response}
+        yield history, ""
+
+def clear_chat():
+    """Clear the chat history."""
+    return [], ""
+
+# --- UI: Interface Creation ---
 def create_interface():
-    """Create and return the Gradio interface."""
+    """Creates and configures the complete Gradio interface."""
+    
+    # Read CSS file
+    custom_css = ""
+    try:
+        with open("style.css", "r", encoding="utf-8") as css_file:
+            custom_css = css_file.read()
+    except FileNotFoundError:
+        logger.warning("style.css file not found, using default styling")
+    except Exception as e:
+        logger.warning(f"Error reading style.css: {e}")
     
-    with gr.Blocks(title="EduBot - AI Tutor", theme=gr.themes.Soft()) as interface:
+    with gr.Blocks(
+        title="EduBot", 
+        fill_width=True, 
+        fill_height=True,
+        theme=gr.themes.Base()
+    ) as demo:
+        # Add head content and MathJax
+        gr.HTML(html_head_content)
+        gr.HTML('<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>')
+        gr.HTML(mathjax_config)
         
-        gr.Markdown("# EduBot - Your AI Learning Companion")
+        with gr.Column(elem_classes=["main-container"]):
+            # Title Section
+            gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
+            
+            # Chat Section
+            with gr.Row():
+                chatbot = gr.Chatbot(
+                    type="messages",
+                    show_copy_button=True,
+                    show_share_button=False,
+                    avatar_images=None,
+                    elem_id="main-chatbot",
+                    container=False,  # Remove wrapper
+                    scale=1,
+                    height="70vh"  # Explicit height instead of min_height
+                )
+            
+            # Input Section - fixed height
+            with gr.Row(elem_classes=["input-controls"]):
+                msg = gr.Textbox(
+                    placeholder="Ask me about math, research, study strategies, or any educational topic...",
+                    show_label=False,
+                    lines=4,
+                    max_lines=6,
+                    elem_classes=["input-textbox"],
+                    container=False,
+                    scale=4
+                )
+                with gr.Column(elem_classes=["button-column"], scale=1):
+                    send = gr.Button("Send", elem_classes=["send-button"], size="sm")
+                    clear = gr.Button("Clear", elem_classes=["clear-button"], size="sm")
+
+        # Set up event handlers
+        msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
+        send.click(respond_and_update, [msg, chatbot], [chatbot, msg])
+        clear.click(clear_chat, outputs=[chatbot, msg])
         
-        chatbot = gr.Chatbot(height=400, show_label=False)
-        msg = gr.Textbox(label="Ask me anything!", placeholder="Type your question here...")
+        # Apply CSS at the very end for highest precedence
+        gr.HTML(f'<style>{custom_css}</style>')
         
-        msg.submit(chat_response, [msg, chatbot], [chatbot])
-        msg.submit(lambda: "", None, [msg])
-    
-    return interface
+        return demo
 
 # --- Main Execution ---
 if __name__ == "__main__":
@@ -291,4 +386,21 @@ if __name__ == "__main__":
         interface.launch()
     except Exception as e:
         logger.error(f"Failed to launch EduBot: {e}")
-        raise
+        raise], ['\\\\(', '\\\\)']],
+    displayMath: [['$', '$'], ['\\\\[', '\\\\]']],
+    packages: {'[+]': ['ams']}
+  },
+  svg: {fontCache: 'global'},
+  startup: {
+    ready: () => {
+      MathJax.startup.defaultReady();
+      // Re-render math when new content is added
+      const observer = new MutationObserver(function(mutations) {
+        MathJax.typesetPromise();
+      });
+      observer.observe(document.body, {childList: true, subtree: true});
+    }
+  }
+};
+</script>
+'''