Update app.py

app.py

@@ -232,33 +232,84 @@ def reset_chat():
 
 # ---------------------------
 # Gradio UI with working Send button
+# ---------------------------
+ ---------------------------
+# Gradio UI
 # ---------------------------
 def build_ui():
-    custom_css = """
-    #chatbot { background-color:#11121a; color:#e6eef8;
-               border-radius:10px; padding:10px; }
-    """
-    with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
-        gr.Markdown("## 🤖 Aerelyth — Dialectical Agentic CrossSphere AI")
-        chatbot = gr.Chatbot(height=520, elem_id="chatbot", type="tuples")
-
-        with gr.Row():
+    with gr.Blocks(
+        theme=gr.themes.Soft(),
+        css="""
+        #chatbot {
+            background-color: #f9f9fb;
+            border-radius: 12px;
+            padding: 10px;
+            overflow-y: auto;
+        }
+        .user-bubble {
+            background: #4a90e2;
+            color: white;
+            border-radius: 14px;
+            padding: 8px 12px;
+            margin: 6px;
+            max-width: 75%;
+            align-self: flex-end;
+            font-size: 14px;
+        }
+        .bot-bubble {
+            background: #e6e6e6;
+            color: #333;
+            border-radius: 14px;
+            padding: 8px 12px;
+            margin: 6px;
+            max-width: 75%;
+            align-self: flex-start;
+            font-size: 14px;
+        }
+        #controls {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            margin-top: 6px;
+        }
+        #topbar {
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+            margin-bottom: 6px;
+        }
+        """
+    ) as demo:
+        # Top bar with close + clear
+        with gr.Row(elem_id="topbar"):
+            close_btn = gr.Button("❌", size="sm")
+            clear_btn = gr.Button("🧹 Clear", size="sm")
+
+        chatbot = gr.Chatbot(
+            label="",
+            height=350,   # reduced height so input is visible
+            elem_id="chatbot",
+            type="tuples",
+            bubble_full_width=False,
+            avatar_images=("👤", "🤖"),
+        )
+
+        with gr.Row(elem_id="controls"):
             msg = gr.Textbox(
-                placeholder="Type message (press Enter or click Send)…",
-                lines=3,
+                placeholder="Type your message here...",
+                lines=2,
                 scale=8,
-                show_label=False
             )
-            send = gr.Button("Send", variant="primary", scale=1)
-
-        with gr.Row():
-            clear = gr.Button("Clear")
+            submit_btn = gr.Button("🚀 Send", variant="primary", scale=2)
 
-        send.click(chat_with_model, inputs=[msg, chatbot], outputs=[chatbot, msg])
-        msg.submit(chat_with_model, inputs=[msg, chatbot], outputs=[chatbot, msg])
-        clear.click(reset_chat, outputs=chatbot)
+        # Wire buttons
+        submit_btn.click(chat_with_model, inputs=[msg, chatbot], outputs=[msg, chatbot])
+        msg.submit(chat_with_model, inputs=[msg, chatbot], outputs=[msg, chatbot])
+        clear_btn.click(reset_chat, inputs=None, outputs=chatbot)
 
         demo.launch(server_name="0.0.0.0", server_port=7860, share=False)
+    return demo
+
 
 # ---------------------------
 # Entrypoint