Update app.py

app.py

@@ -489,12 +489,38 @@ def rag_memory_stream(message, history):
     user_session.add_to_history("assistant", full_response)
 
 custom_css = """
-body {
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
     font-family: "Arial", serif;
 }
+
 .gradio-container {
     font-family: "Times New Roman", serif;
+    width: 100vw;
+    height: 100vh;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+}
+
+.main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
+
 .gr-button {
     background-color: #007bff; /* Blue button */
     color: white;
@@ -504,31 +530,70 @@ body {
     padding: 10px 20px;
     cursor: pointer;
 }
+
 .gr-textbox:focus, .gr-button:focus {
     outline: none; /* Remove outline focus for a cleaner look */
 }
+
 /* Custom CSS for the examples section */
 .gr-examples {
     font-size: 30px; /* Increase font size of examples */
     background-color: #f9f9f9; /* Light background color */
     border-radius: 30px; /* Rounded corners */
 }
+
 .gr-examples .example {
     background-color: white; /* White background for each example */
     cursor: pointer; /* Change cursor to pointer on hover */
     transition: background-color 0.3s ease; /* Smooth hover effect */
 }
+
 .gr-examples .example:hover {
     background-color: #f1f1f1; /* Light gray background on hover */
 }
-"""
 
+/* Make chat interface fill available space */
+.chat-interface {
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-panel {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 70vh;
+}
+
+.registration-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100%;
+}
+
+footer {
+    margin-top: auto;
+    text-align: center;
+    padding: 10px;
+}
+
+/* Make chatbot container fill the screen */
+.chatbot-container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+"""
 
 # Gradio Interface Setup with improved UX
 def chatbot_interface():
     # Get API key (in a real application, handle this more securely)
     api_key = api  # This should be properly defined or imported elsewhere
-
+    
     # Update the template to include conversation history
     global template
     template = """
@@ -548,64 +613,52 @@ def chatbot_interface():
     # Create the RAG chain with user context
     global rag_chain
     rag_chain = create_rag_chain(retriever, template, api_key)
-
-
-    with gr.Blocks(css="""
-        .welcome-container {
-            text-align: center;
-            margin-bottom: 20px;
-            padding: 20px;
-            border-radius: 10px;
-            background-color: #f0f4ff;
-        }
-        .feedback-btn { margin-top: 10px; }
-        footer { margin-top: 30px; text-align: center; }
-    """) as demo:
+    
+    with gr.Blocks(css=custom_css, theme="soft") as demo:
         # User registration section
-        registration_container = gr.Column(visible=True)
+        registration_container = gr.Column(visible=True, elem_classes=["registration-container"])
         with registration_container:
             gr.Markdown(
-    """
-    <div style='font-size: 32px;'>
-         Your privacy is our concern, please provide your nickname.
-    </div>
-    """
-)
-
+                """
+                <div style='font-size: 32px; text-align: center;'>
+                    Your privacy is our concern, please provide your nickname.
+                </div>
+                """,
+                elem_id="welcome-title"
+            )
 
-            with gr.Row():
+            with gr.Row(scale=0):
                 first_name = gr.Textbox(
                     label="Nickname",
                     placeholder="Enter your Nickname",
                     scale=1
                 )
                
-            with gr.Row():
+            with gr.Row(scale=0):
                 submit_btn = gr.Button("Start Chatting", variant="primary", scale=2)
-
+                
             response_message = gr.Markdown(elem_id="welcome-message")
-
+            
         # Chatbot section (initially hidden)
-        chatbot_container = gr.Column(visible=False)
+        chatbot_container = gr.Column(visible=False, elem_classes=["chatbot-container"])
         with chatbot_container:
             chat_interface = gr.ChatInterface(
                 fn=rag_memory_stream,
                 title="Chat with GBVR",
                 fill_height=True,
-                css=custom_css,
-                theme="soft",
+                elem_classes=["chat-interface"]
             )
-
+            
             # Footer with version info
-            gr.Markdown("Ijwi ry'Ubufasha v1.0.0 © 2025", elem_id="footer")
-
+            gr.Markdown("Ijwi ry'Ubufasha v1.0.0 © 2025", elem_id="footer", elem_classes=["footer"])
+            
         # Handle user registration
         submit_btn.click(
             collect_user_info,
             inputs=[first_name],
             outputs=[response_message, chatbot_container, registration_container, chat_interface.chatbot]
         )
-      
+
     return demo
 
 # Launch the interface