Update app.py

app.py

@@ -19,6 +19,17 @@ DESCRIPTION = """\
 # Lexora 7B ITA 💬 🇮🇹
 """
 
+# Custom CSS to fix chat visualization
+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; }
+"""
+
 MAX_MAX_NEW_TOKENS = 2048
 DEFAULT_MAX_NEW_TOKENS = 1024
 MAX_INPUT_TOKEN_LENGTH = int(os.getenv("MAX_INPUT_TOKEN_LENGTH", "4096"))
@@ -137,10 +148,11 @@ chat_interface = gr.ChatInterface(
     cache_examples=False,
 )
 
-with gr.Blocks(css="style.css", fill_height=True, theme="soft") as demo:
-    gr.Markdown(DESCRIPTION)
-    gr.DuplicateButton(value="Duplicate Space for private use", elem_id="duplicate-button")
-    chat_interface.render()
+with gr.Blocks(css=CUSTOM_CSS, fill_height=True, theme=gr.themes.Soft()) 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()
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch()