Update app.py

app.py

@@ -19,15 +19,63 @@ DESCRIPTION = """\
 # Lexora 7B ITA 💬 🇮🇹
 """
 
-# Custom CSS to fix chat visualization
+# Updated CSS to ensure full height and proper scrolling
 CUSTOM_CSS = """
-.contain { display: flex; flex-direction: column; }
-#component-0 { height: calc(100vh - 100px); overflow-y: auto; }
-.chat { height: 100%; }
-.message-wrap { max-height: none !important; }
-.message { padding: 15px !important; margin: 5px !important; }
-.user-message { background-color: #f0f0f0 !important; }
-.bot-message { background-color: #e3f2fd !important; }
+.gradio-container {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    padding: 0 !important;
+    background-color: #0f1117;
+}
+
+.contain {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-container {
+    flex-grow: 1;
+    height: calc(100vh - 100px) !important;
+    overflow: hidden !important;
+}
+
+.chat-container {
+    height: 100% !important;
+    overflow: hidden !important;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-messages {
+    flex-grow: 1;
+    overflow-y: auto !important;
+    padding: 1rem;
+}
+
+.message-wrap {
+    height: auto !important;
+    max-height: none !important;
+}
+
+.message {
+    padding: 1rem !important;
+    margin: 0.5rem 0 !important;
+    border-radius: 0.5rem !important;
+}
+
+.user-message {
+    background-color: #2b2d31 !important;
+}
+
+.bot-message {
+    background-color: #1e1f23 !important;
+}
+
+.examples-container {
+    margin-top: auto;
+}
 """
 
 MAX_MAX_NEW_TOKENS = 2048
@@ -148,11 +196,12 @@ chat_interface = gr.ChatInterface(
     cache_examples=False,
 )
 
-with gr.Blocks(css=CUSTOM_CSS, fill_height=True, theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=CUSTOM_CSS, fill_height=True, theme=gr.themes.Base()) as demo:
     with gr.Column(elem_classes="contain"):
         gr.Markdown(DESCRIPTION)
         gr.DuplicateButton(value="Duplicate Space for private use", elem_id="duplicate-button")
-        chat_interface.render()
+        with gr.Column(elem_classes="main-container"):
+            chat_interface.render()
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch()