Update app.py

app.py

@@ -28,19 +28,16 @@ llm = HuggingFaceEndpoint(
 
 math_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
-
 You are an expert math tutor. For every math problem:
 1. Break it down into key concepts
 2. Briefly explain concepts
 3. Outline the process for solving a similar problem
-
 Be comprehensive and educational. Structure your response clearly."""),
     ("human", "{question}")
 ])
 
 research_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
-
 You are a research skills mentor. Help students with:
 - Determining the validity of sources
 - Evaluating source credibility and bias if a source is mentioned
@@ -48,14 +45,12 @@ You are a research skills mentor. Help students with:
 - Research strategies and methodologies
 - Academic writing techniques and structure
 - Database navigation and search strategies
-
 Provide detailed, actionable advice with specific examples."""),
     ("human", "{question}")
 ])
 
 study_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
-
 You are a study skills coach. Help students with:
 - Effective study methods for different learning styles
 - Time management and scheduling techniques
@@ -64,20 +59,17 @@ You are a study skills coach. Help students with:
 - Note-taking methods and organization
 - Learning style optimization
 - Offer short quiz sessions where you pose one to two questions at a time, then provide feedback on the students answers.
-
 Provide comprehensive, personalized advice with practical examples."""),
     ("human", "{question}")
 ])
 
 general_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
-
 You are EduBot, a comprehensive AI learning assistant. You help students with:
 📐 Mathematics (Concise explanations rooted in understanding the concepts and process rather than answering the math problem directly)
 🔍 Research skills (source guidance, research advice, evaluation, and citation)
 📚 Study strategies (effective learning techniques and exam preparation)
 🛠️ Educational tools (guidance on learning resources and technologies)
-
 Always be encouraging, patient, thorough, and comprehensive."""),
     ("human", "{question}")
 ])
@@ -170,83 +162,58 @@ def respond_with_enhanced_streaming(message, history):
         logger.exception("Error in LangChain response generation")
         yield f"Sorry, I encountered an error: {str(e)[:150]}"
 
-# --- Gradio UI and CSS ---
+# --- Fixed Gradio UI and CSS ---
 custom_css = """
-/* Main container and background - full viewport */
+/* Reset and base styling */
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+/* Main container styling */
 .gradio-container {
-    height: 100vh;
     background-color: rgb(240, 236, 230) !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    width: 100vw !important;
-    overflow: auto;
+    height: 100vh !important;
+    max-width: none !important;
     margin: 0 !important;
     padding: 0 !important;
-    max-width: none !important;
-}
-
-/* Main layout container - full width, sectioned heights */
-.main-container {
-    width: 98vw;
-    height: 100vh;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
 }
 
-/* Section 1: Title section */
-.title-section {
-    flex: 0 0 15vh;
-    padding: 1rem 2rem;
+/* Title styling */
+.title-header {
     background-color: rgb(240, 236, 230);
+    padding: 20px;
     border-bottom: 2px solid rgba(28, 18, 5, 0.1);
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    flex-shrink: 0;
+    text-align: left;
 }
 
-/* Model name title */
-.model-name {
+.title-header h1 {
     font-size: 1.8rem;
     font-weight: bold;
     color: black;
-    text-align: left;
     margin: 0;
-    width: 100%;
 }
 
-/* Section 2: Chat content area */
-.chat-content {
-    flex: 1 1 60vh;
-    display: flex;
-    flex-direction: column;
-    overflow: auto; 
-    max-width: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
+/* Chat container - give it proper height */
+.chat-container {
+    height: calc(100vh - 200px) !important;
+    min-height: 400px !important;
     background-color: rgb(240, 236, 230);
 }
 
-/* Chatbot styling */
-.gradio-chatbot {
+/* Chatbot specific styling */
+.chat-container .gradio-chatbot {
     height: 100% !important;
-    overflow-y: auto;
-    border: none !important;
+    min-height: 400px !important;
+    max-height: none !important;
     background-color: transparent !important;
-    margin: 0 !important;
-    padding: 1rem 2rem !important;
-    width: 100% !important;
-    max-width: none !important;
-    box-sizing: border-box;
-}
-
-/* Message container styling */
-.gradio-chatbot .message-wrap {
-    margin: 0.5rem 0 !important;
-    max-width: none !important;
+    border: none !important;
+    padding: 20px !important;
 }
 
-/* Bot message styling */
+/* Fix message styling */
 .gradio-chatbot .message.bot .markdown {
     background-color: rgb(240, 185, 103) !important;
     color: black !important;
@@ -257,9 +224,9 @@ custom_css = """
     max-width: 70%;
     margin-left: 0;
     margin-right: auto;
+    word-wrap: break-word;
 }
 
-/* User message styling */
 .gradio-chatbot .message.user .markdown {
     background-color: rgb(242, 238, 233) !important;
     color: black !important;
@@ -270,6 +237,7 @@ custom_css = """
     max-width: 70%;
     margin-left: auto;
     margin-right: 0;
+    word-wrap: break-word;
 }
 
 /* Hide avatars */
@@ -277,119 +245,91 @@ custom_css = """
     display: none !important;
 }
 
-/* Section 3: Input section */
+/* Input section styling */
 .input-section {
-    flex: 0 0 25vh;
-    width: 100vw;
     background-color: rgb(240, 236, 230);
     border-top: 2px solid rgba(28, 18, 5, 0.1);
-    padding: 1rem 2rem;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: relative;
-    flex-shrink: 0;
+    padding: 20px;
+    min-height: 80px;
 }
 
 /* Input textbox styling */
-.input-container {
-    width: 100% !important;
-    max-width: none !important;
-    flex: 1;
-    display: flex;
-    align-items: center;
+.input-section .gradio-textbox {
     background-color: rgb(242, 238, 233) !important;
     border: 2px solid rgb(28, 18, 5) !important;
     border-radius: 20px !important;
-    box-shadow: none !important;
-    min-height: 60px;
-    max-height: calc(25vh - 4rem);
+    margin-bottom: 10px !important;
 }
 
-.input-container textarea {
+.input-section .gradio-textbox textarea {
     background-color: transparent !important;
     border: none !important;
     color: black !important;
     padding: 15px !important;
     font-size: 16px !important;
-    box-shadow: none !important;
-    outline: none !important;
-    width: 100% !important;
-    resize: none !important;
-    min-height: 30px;
+    min-height: 50px !important;
+    resize: vertical !important;
 }
 
-.input-container textarea:focus {
-    border: none !important;
-    box-shadow: none !important;
+.input-section .gradio-textbox textarea:focus {
     outline: none !important;
+    box-shadow: none !important;
 }
 
-/* Hide the label */
-.input-container label {
-    display: none !important;
-}
-
-/* Clear button styling - positioned in input section */
-.clear-btn {
-    position: absolute;
-    top: 1rem;
-    right: 2rem;
+/* Clear button styling */
+.clear-button {
     background-color: rgb(28, 18, 5) !important;
     color: white !important;
     border: none !important;
     border-radius: 10px !important;
     padding: 8px 16px !important;
-    cursor: pointer;
-    z-index: 1000;
+    cursor: pointer !important;
+    float: right;
 }
 
-.clear-btn:hover {
+.clear-button:hover {
     background-color: rgba(28, 18, 5, 0.8) !important;
 }
 
-/* Override any Gradio default width/height constraints */
-.gradio-container > div,
-.gradio-container .block,
-.gradio-container .form {
-    max-width: none !important;
-    width: 100% !important;
-    height: auto !important;
+/* Remove default margins and padding that might interfere */
+.gradio-container .block {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
 }
 
-/* Ensure no unwanted scrollbars on main sections */
-.title-section, .input-section {
-    overflow: hidden;
+/* Ensure proper scrolling */
+.gradio-chatbot {
+    overflow-y: auto !important;
 }
 """
 
+# Create the interface with proper structure
 with gr.Blocks(css=custom_css, title="EduBot") as demo:
-    with gr.Column(elem_classes=["main-container"]):
-        
-        # Section 1: Title Box
-        with gr.Column(elem_classes=["title-section"]):
-            gr.HTML('<div class="model-name">🎓 EduBot</div>')
-        
-        # Section 2: Chat History/Conversation Viewport
-        with gr.Column(elem_classes=["chat-content"]):
-            chatbot = gr.Chatbot(
-                type="messages",
-                show_copy_button=True,
-                show_share_button=False,
-                avatar_images=None
-            )
-        
-        # Section 3: Text Box/Clear Button
-        with gr.Column(elem_classes=["input-section"]):
-            clear = gr.Button("Clear", elem_classes=["clear-btn"])
-            msg = gr.Textbox(
-                placeholder="Ask me about math, research, study strategies, or any educational topic...",
-                show_label=False,
-                lines=1,
-                max_lines=6,
-                elem_classes=["input-container"]
-            )
+    # Title Section
+    gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
+    
+    # Chat Section - with explicit height
+    with gr.Row(elem_classes=["chat-container"]):
+        chatbot = gr.Chatbot(
+            type="messages",
+            show_copy_button=True,
+            show_share_button=False,
+            avatar_images=None,
+            height="100%"
+        )
+    
+    # Input Section
+    with gr.Column(elem_classes=["input-section"]):
+        with gr.Row():
+            clear = gr.Button("Clear", elem_classes=["clear-button"])
+        msg = gr.Textbox(
+            placeholder="Ask me about math, research, study strategies, or any educational topic...",
+            show_label=False,
+            lines=2,
+            max_lines=6,
+            interactive=True
+        )
 
     def respond_and_update(message, history):
         """Main function to handle user submission."""