Update app.py

app.py

@@ -19,7 +19,7 @@ DESCRIPTION = """\
 # Lexora 3B ITA 💬 🇮🇹
 """
 
-# Updated CSS to ensure full height and proper scrolling
+# Updated CSS to ensure full height and proper markdown rendering
 CUSTOM_CSS = """
 .gradio-container {
     height: 100vh !important;
@@ -27,55 +27,108 @@ CUSTOM_CSS = """
     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;
 }
+/* Markdown styling */
+.bot-message p {
+    margin-bottom: 0.5rem;
+}
+.bot-message h1, .bot-message h2, .bot-message h3, 
+.bot-message h4, .bot-message h5, .bot-message h6 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+.bot-message code {
+    background-color: #2d2d2d;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.2rem;
+    font-family: monospace;
+}
+.bot-message pre {
+    background-color: #2d2d2d;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+.bot-message pre code {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+}
+.bot-message ul, .bot-message ol {
+    padding-left: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+.bot-message blockquote {
+    border-left: 3px solid #4a4a4a;
+    padding-left: 1rem;
+    margin: 0.5rem 0;
+    color: #a0a0a0;
+}
+.bot-message table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1rem 0;
+}
+.bot-message th, .bot-message td {
+    border: 1px solid #4a4a4a;
+    padding: 0.5rem;
+    text-align: left;
+}
+.bot-message th {
+    background-color: #2a2a2a;
+}
+.bot-message img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+}
+.bot-message a {
+    color: #3291ff;
+    text-decoration: none;
+}
+.bot-message a:hover {
+    text-decoration: underline;
+}
 """
 
 MAX_MAX_NEW_TOKENS = 2048
@@ -192,8 +245,11 @@ chat_interface = gr.ChatInterface(
     stop_btn=None,
     examples=[
         ["Ciao! Come stai?"],
+        ["Puoi scrivere una lista markdown?"],
+        ["Scrivi un esempio di codice Python"],
     ],
     cache_examples=False,
+    render_markdown=True,  # Enable Markdown rendering
 )
 
 with gr.Blocks(css=CUSTOM_CSS, fill_height=True, theme=gr.themes.Base()) as demo: