Update app.py

app.py

@@ -9,24 +9,71 @@ quick_quizzes = [
     "Fetch content from https://stellar.org",
 ]
 
-with gr.Blocks(theme=gr.themes.Default(primary_hue="blue", secondary_hue="gray")) as demo:
+with gr.Blocks(
+    theme=gr.themes.Default(
+        primary_hue="blue",   # Stellar-like deep blue
+        secondary_hue="orange"  # Orange accent (send buttons etc.)
+    )
+) as demo:
     gr.Markdown("""
-# ✨ **Stellar Knowledge Agent**
-Interactive AI to explore Stellar, Soroban, wallets, Horizon, and more!
+<div style='text-align: center;'>
+    <h1 style='font-size: 2em; color: #1a3c8b;'>✨ Stellar Knowledge Agent</h1>
+    <p style='font-size: 1em; color: #444;'>Ask about Stellar, Soroban, wallets, Horizon — your Web3 companion!</p>
+</div>
 """)
 
-    chatbot = gr.Chatbot(label="Stellar Assistant")
-    msg = gr.Textbox(placeholder="Ask anything about Stellar...", show_label=False)
+    chatbot = gr.Chatbot(
+        label="💬 Stellar Assistant",
+        bubble_full_width=False,
+        height=400,
+        elem_classes="chatbot-style"
+    )
+
+    msg = gr.Textbox(
+        placeholder="Type your Stellar question here & hit Enter...",
+        show_label=False
+    )
 
     with gr.Row():
         for quiz in quick_quizzes:
-            gr.Button(quiz).click(lambda q=quiz: ([(q, handle_user_query(q))], ""), outputs=[chatbot, msg])
+            gr.Button(
+                quiz,
+                elem_classes="quiz-btn"
+            ).click(
+                lambda q=quiz: ([(q, handle_user_query(q))], ""),
+                outputs=[chatbot, msg]
+            )
+
+    send_btn = gr.Button("🚀 Send", elem_classes="send-btn")
 
     def respond(history, user_message):
         answer = handle_user_query(user_message)
         history.append((user_message, answer))
         return history, ""
 
+    # Press Enter or click Send
     msg.submit(respond, inputs=[chatbot, msg], outputs=[chatbot, msg])
+    send_btn.click(respond, inputs=[chatbot, msg], outputs=[chatbot, msg])
+
+    # Custom CSS to make it prettier
+    demo.css = """
+    .chatbot-style { 
+        border: 2px solid #1a3c8b; 
+        border-radius: 12px;
+    }
+    .send-btn {
+        background: #f97316 !important;   /* Orange */
+        color: white !important;
+        border-radius: 8px;
+        font-weight: bold;
+    }
+    .quiz-btn {
+        background: #1a3c8b !important;   /* Deep Stellar blue */
+        color: white !important;
+        margin: 2px;
+        border-radius: 6px;
+        font-size: 0.9em;
+    }
+    """
 
 demo.launch()