Update app.py

app.py

@@ -225,22 +225,41 @@ class XylariaChat:
 
         # Custom CSS for Inter font and improved styling
         custom_css = """
+        body {
+            background-color: #202123;
+            color: #ececf1;
+        }
+        .dark #banner-wrap {
+            background-color: #202123;
+        }
+        .dark #banner {
+            background-color: #202123;
+            color: #ececf1;
+        }
+        .dark .form-wrap {
+            background: none;
+            background-color: #343541;
+            border-color: #343541;
+        }
+        .dark .secondary-wrap {
+            background: none;
+            background-color: #202123;
+            border-color: #202123;
+        }
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
         body, .gradio-container {
             font-family: 'Inter', sans-serif !important;
         }
-
         .chatbot-container .message {
             font-family: 'Inter', sans-serif !important;
+            color: #ececf1;
         }
-
         .gradio-container input, 
         .gradio-container textarea, 
         .gradio-container button {
             font-family: 'Inter', sans-serif !important;
+            color: #ececf1;
         }
-
         /* Image Upload Styling */
         .image-container {
             border: 1px solid #ccc;
@@ -251,20 +270,17 @@ class XylariaChat:
             flex-direction: column;
             align-items: center;
             gap: 10px;
-            background-color: #f8f8f8;
+            background-color: #343541;
         }
-
         .image-preview {
             max-width: 200px;
             max-height: 200px;
             border-radius: 8px;
         }
-
         .image-buttons {
             display: flex;
             gap: 10px;
         }
-
         .image-buttons button {
             padding: 8px 15px;
             border-radius: 5px;
@@ -273,19 +289,125 @@ class XylariaChat:
             border: none;
             cursor: pointer;
         }
-
         .image-buttons button:hover {
             background-color: #367c39;
         }
+        .dark .gr-button-primary {
+            background-color: #585862;
+            color: #ececf1;
+        }
+        .dark .gr-button-secondary {
+            background-color: #444654;
+            color: #ececf1;
+        }
+        .dark .gr-button-secondary:hover {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-button-primary:hover {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-textbox {
+            background-color: #444654;
+            color: #ececf1;
+        }
+        .dark .gr-textbox::placeholder {
+            color: #888888;
+        }
+        .dark .gr-chatbot {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .message {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .user {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .assistant {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .user-response {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .assistant-response {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox {
+            background-color: #343541;
+            color: #ececf1;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox::placeholder {
+            color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox::placeholder {
+            color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:focus {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:focus {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:hover {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:hover {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:active {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:active {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:disabled {
+            background-color: #343541;
+            color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:disabled {
+            background-color: #343541;
+            color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:disabled::placeholder {
+            color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:disabled::placeholder {
+            color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:disabled:hover {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:disabled:hover {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .user-response .gr-textbox:disabled:active {
+            border-color: #888888;
+        }
+        .dark .gr-chatbot .assistant-response .gr-textbox:disabled:active {
+            border-color: #888888;
+        }
         """
 
-        with gr.Blocks(theme='soft', css=custom_css) as demo:
+        with gr.Blocks(theme='soft', css=custom_css, title="Xylaria") as demo:
             # Chat interface with improved styling
             with gr.Column():
                 chatbot = gr.Chatbot(
                     label="Xylaria 1.5 Senoa (EXPERIMENTAL)",
                     height=500,
                     show_copy_button=True,
+                    bubble_full_width=False,
+                    render=False
                 )
 
                 # Enhanced Image Upload Section
@@ -302,17 +424,18 @@ class XylariaChat:
 
                 # Input row with improved layout
                 with gr.Row():
-                    with gr.Column(scale=4):
+                    with gr.Column(scale=85):
                         txt = gr.Textbox(
                             show_label=False,
-                            placeholder="Type your message...",
+                            placeholder="What can I help with?",
                             container=False
                         )
-                    btn = gr.Button("Send", scale=1)
+                    with gr.Column(scale=15):
+                        btn = gr.Button("Send", variant="primary")
 
                 # Clear history and memory buttons
                 with gr.Row():
-                    clear = gr.Button("Clear Conversation")
+                    clear = gr.Button("Clear Conversation", variant="stop")
                     clear_memory = gr.Button("Clear Memory")
 
                 # Clear image functionality