Update app.py

app.py

@@ -27,7 +27,7 @@ metrics_tracker = EduBotMetrics(save_file="edu_metrics.json")
 
 # --- LLM Templates ---
 # Enhanced base system message
-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.
+ENHANCED_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.
 
 ## Core Educational Principles
 - Provide comprehensive, educational responses that help students truly understand concepts
@@ -274,7 +274,7 @@ def respond_with_enhanced_streaming(message, history):
         messages = []
         
         # Add system message
-        system_msg = SystemMessage(content=SYSTEM_MESSAGE)
+        system_msg = SystemMessage(content=ENHANCED_SYSTEM_MESSAGE)
         messages.append(system_msg)
         
         # Add conversation history if available
@@ -295,7 +295,7 @@ def respond_with_enhanced_streaming(message, history):
         # Use LangChain template to format the prompt
         formatted_prompt = template.format(
             question=message,
-            system_message=SYSTEM_MESSAGE
+            system_message=ENHANCED_SYSTEM_MESSAGE
         )
         
         # Use chat completions instead of text_generation (more reliable)
@@ -373,41 +373,70 @@ custom_css = """
     color: #120f0e !important;
 }
 
-/* Main container styling */
+/* Main container styling - viewport height */
 .gradio-container-5-42-0 {
     background-color: rgb(240, 236, 230) !important;
     font-family: "Oswald", sans-serif !important;
     color: #120f0e !important;
-    padding-top: 0 !important;
-    margin-top: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
 }
 
-/* Title styling */
+/* Title styling - compact */
 .title-header {
     background-color: rgb(240, 236, 230) !important;
-    padding: 5px 20px 10px 20px;
+    padding: 10px 20px;
     margin: 0;
     border-bottom: 1pt solid #59524f;
     text-align: left;
-    max-height: 30pt;
+    flex-shrink: 0;
 }
 .title-header h1 {
-    font-size: 1.8rem;
+    font-size: 1.5rem;
     font-weight: 600 !important;
     color: #120f0e !important;
     margin: 0;
     padding: 0;
 }
 
-/* Chat styling */
+/* Row container styling */
+.main-row {
+    height: calc(100vh - 60px) !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.title-row {
+    flex-shrink: 0 !important;
+    height: 60px !important;
+}
+
+.chat-row {
+    flex: 1 !important;
+    overflow: hidden !important;
+    padding: 10px 20px !important;
+}
+
+.input-row {
+    flex-shrink: 0 !important;
+    height: 120px !important;
+    padding: 15px 20px !important;
+}
+
+/* Chat styling - use remaining space */
 .chat-container,
 .gradio-container-5-42-0 .gradio-chatbot,
 .gradio-container-5-42-0 #main-chatbot {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
-    padding: 20px !important;
-    min-height: 900px;
+    padding: 15px !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow-y: auto !important;
 }
 
 /* Message styling */
@@ -422,6 +451,7 @@ custom_css = """
     margin-right: auto;
     word-wrap: break-word;
     font-weight: 400 !important;
+    margin-bottom: 10px !important;
 }
 
 .gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
@@ -435,52 +465,61 @@ custom_css = """
     margin-right: 0;
     word-wrap: break-word;
     font-weight: 400 !important;
+    margin-bottom: 10px !important;
 }
 
-/* Input section styling */
+/* Input section styling - compact */
 .input-section {
     background-color: rgb(240, 236, 230) !important;
     border-top: 1pt solid #59524f;
-    padding: 20px;
+    padding: 0 !important;
+    height: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
 }
 
-/* Button styling */
-.gradio-container-5-42-0 .send-button {
-    background-color: #f09c7d !important;
+/* Button styling - compact */
+.gradio-container-5-42-0 .send-button,
+.gradio-container-5-42-0 .clear-button {
     color: #120f0e !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
-    padding: 8px 16px !important;
+    padding: 8px 12px !important;
     cursor: pointer !important;
-    margin: 5px !important;
+    margin: 0 !important;
     font-weight: 500 !important;
+    height: 40px !important;
+    min-width: 70px !important;
+}
+
+.gradio-container-5-42-0 .send-button {
+    background-color: #f09c7d !important;
 }
 
 .gradio-container-5-42-0 .clear-button {
     background-color: #ada3a0 !important;
-    color: #120f0e !important;
-    border: 1pt solid #59524f !important;
-    border-radius: 6px !important;
-    padding: 8px 16px !important;
-    cursor: pointer !important;
-    margin: 5px !important;
-    font-weight: 500 !important;
 }
 
-/* Textbox styling */
+/* Textbox styling - compact */
 .gradio-container-5-42-0 .input-textbox {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 8px !important;
+    flex: 1 !important;
 }
 
 .gradio-container-5-42-0 .input-textbox textarea {
     background-color: #d9d1ce !important;
     border: none !important;
     color: #120f0e !important;
-    padding: 15px !important;
-    font-size: 16px !important;
+    padding: 10px !important;
+    font-size: 14px !important;
     font-weight: 400 !important;
+    resize: none !important;
+    height: 40px !important;
+    min-height: 40px !important;
+    max-height: 40px !important;
 }
 
 .gradio-container-5-42-0 .input-textbox textarea::placeholder {
@@ -564,7 +603,7 @@ def clear_chat():
 def create_interface():
     """Creates and configures the complete Gradio interface."""
     
-    with gr.Blocks(css=custom_css, title="EduBot", fill_width=True) as demo:
+    with gr.Blocks(css=custom_css, title="EduBot", fill_width=True, fill_height=True) 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>')