Update app.py

app.py

@@ -172,57 +172,81 @@ def respond_with_enhanced_streaming(message, history):
 
 # --- Gradio UI and CSS ---
 custom_css = """
-/* Main container and background */
+/* Main container and background - full viewport */
 .gradio-container {
     background-color: rgb(240, 236, 230) !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     height: 100vh !important;
+    width: 100vw !important;
     overflow: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
+    max-width: none !important;
 }
 
-/* Main layout container */
+/* Main layout container - full width, sectioned heights */
 .main-container {
-    height: 100vh;
+    width: 98vw; /* Sets the width to 98% of the viewport width */
+    height: 100vh; /* Fill the entire viewport height */
+    margin: 0 auto; /* Center the container horizontally */
     display: flex;
     flex-direction: column;
-    max-width: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
 }
 
-/* Chat content area */
-.chat-content {
-    flex: 1;
+/* Section 1: Title section - 15% of viewport height */
+.title-section {
+    height: 15vh;
+    width: 100vw;
+    padding: 1rem 2rem;
+    background-color: rgb(240, 236, 230);
+    border-bottom: 2px solid rgba(28, 18, 5, 0.1);
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 1rem;
-    padding-bottom: 0;
+    align-items: center;
+    box-sizing: border-box;
+    flex-shrink: 0;
 }
 
 /* Model name title */
 .model-name {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     font-weight: bold;
     color: black;
-    margin-bottom: 1rem;
     text-align: left;
+    margin: 0;
+    width: 100%;
 }
 
-/* Chatbot styling */
+/* Section 2: Chat content area - 60% of viewport height */
+.chat-content {
+    height: 60vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: rgb(240, 236, 230);
+    flex-shrink: 0;
+}
+
+/* Chatbot styling - uses full 60vh */
 .gradio-chatbot {
-    flex: 1;
+    height: 100% !important;
     overflow-y: auto;
     border: none !important;
     background-color: transparent !important;
-    margin-bottom: 0 !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;
 }
 
 /* Bot message styling */
@@ -233,7 +257,7 @@ custom_css = """
     padding: 12px 16px !important;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
     border: none !important;
-    max-width: 80%;
+    max-width: 70%;
     margin-left: 0;
     margin-right: auto;
 }
@@ -246,7 +270,7 @@ custom_css = """
     padding: 12px 16px !important;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
     border: none !important;
-    max-width: 80%;
+    max-width: 70%;
     margin-left: auto;
     margin-right: 0;
 }
@@ -256,21 +280,28 @@ custom_css = """
     display: none !important;
 }
 
-/* Full-width input container at bottom */
-.input-bottom {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    right: 0;
+/* Section 3: Input section - 25% of viewport height */
+.input-section {
+    height: 25vh;
+    width: 100vw;
     background-color: rgb(240, 236, 230);
-    padding: 1rem;
-    border-top: 1px solid rgba(28, 18, 5, 0.1);
+    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;
 }
 
-/* Input textbox styling - full width */
+/* Input textbox styling - takes most of the 25vh */
 .input-container {
     width: 100% !important;
     max-width: none !important;
+    flex: 1;
+    display: flex;
+    align-items: center;
 }
 
 .input-container .wrap {
@@ -279,6 +310,8 @@ custom_css = """
     border-radius: 20px !important;
     box-shadow: none !important;
     width: 100% !important;
+    min-height: 60px;
+    max-height: calc(25vh - 4rem);
 }
 
 .input-container textarea {
@@ -291,6 +324,8 @@ custom_css = """
     outline: none !important;
     width: 100% !important;
     resize: none !important;
+    min-height: 30px;
+    max-height: calc(25vh - 6rem);
 }
 
 .input-container textarea:focus {
@@ -304,11 +339,11 @@ custom_css = """
     display: none !important;
 }
 
-/* Clear button styling - positioned in top right */
+/* Clear button styling - positioned in input section */
 .clear-btn {
     position: absolute;
     top: 1rem;
-    right: 1rem;
+    right: 2rem;
     background-color: rgb(28, 18, 5) !important;
     color: white !important;
     border: none !important;
@@ -321,34 +356,50 @@ custom_css = """
 .clear-btn: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;
+}
+
+/* Ensure no unwanted scrollbars on main sections */
+.title-section, .input-section {
+    overflow: hidden;
+}
+
+.chat-content {
+    overflow: hidden;
+}
 """
 
 with gr.Blocks(css=custom_css, title="EduBot") as demo:
     with gr.Column(elem_classes=["main-container"]):
-        # Clear button in top right
-        clear = gr.Button("Clear", elem_classes=["clear-btn"])
         
-        # Chat content area
-        with gr.Column(elem_classes=["chat-content"]):
-            # Model Name in the top-left corner
+        # Section 1: Title Box - 15% of viewport height
+        with gr.Column(elem_classes=["title-section"]):
             gr.HTML('<div class="model-name">🎓 EduBot</div>')
-            
-            # The main chatbot interface
+        
+        # Section 2: Chat History/Conversation Viewport - 60% of viewport height
+        with gr.Column(elem_classes=["chat-content"]):
             chatbot = gr.Chatbot(
                 type="messages",
-                height="100%",
-                show_copy_button=False,
+                show_copy_button=True,
                 show_share_button=False,
                 avatar_images=None
             )
         
-        # Full-width input at bottom
-        with gr.Column(elem_classes=["input-bottom"]):
+        # Section 3: Text Box/Clear Button - 25% of viewport height
+        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=4,
+                max_lines=6,
                 elem_classes=["input-container"]
             )