Update app.py

app.py

@@ -1,15 +1,24 @@
 # ✅ Imports
 from openai import OpenAI
 import gradio as gr
+import os
+
+# ✅ Load API key from Hugging Face Secrets (environment variables)
+api_key = os.getenv("OPENROUTER_API_KEY")
+if not api_key:
+    raise ValueError("⚠️ OPENROUTER_API_KEY not found. Add it in HF Spaces > Settings > Secrets.")
 
 # ✅ OpenRouter API client setup
 client = OpenAI(
     base_url="https://openrouter.ai/api/v1",
-    api_key="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",
+    api_key=api_key,
 )
 
 # ✅ Chat function using Kimi-K2
-def ask_kimi(prompt, history=[]):
+def ask_kimi(prompt, history=None):
+    if history is None:
+        history = []
+
     messages = [{"role": "system", "content": "Wewe ni msaidizi mzuri wa kujifunza programu kwa Kiswahili."}]
     for user, bot in history:
         messages.append({"role": "user", "content": user})
@@ -29,11 +38,30 @@ def ask_kimi(prompt, history=[]):
     history.append((prompt, reply))
     return reply, history
 
-# ✅ Gradio UI with submit button
+# ✅ Optional inline CSS
+custom_css = """
+<style>
+body {
+    background-color: #f9f9f9;
+}
+.gradio-container {
+    max-width: 700px;
+    margin: auto;
+}
+.gradio-chatbot {
+    background-color: #eef2f7;
+    border-radius: 10px;
+    padding: 10px;
+}
+</style>
+"""
+
+# ✅ Gradio UI with proper layout and "messages" type
 with gr.Blocks() as demo:
+    gr.HTML(custom_css)  # Inject custom styles
     gr.Markdown("## 🤖 Kimi K2 Chatbot kwa Kiswahili (Powered by OpenRouter)")
 
-    chatbot = gr.Chatbot()
+    chatbot = gr.Chatbot(label="Kimi K2", type="messages")
     state = gr.State([])
 
     with gr.Row():
@@ -46,16 +74,16 @@ with gr.Blocks() as demo:
 
     clear = gr.Button("🔄 Anza upya")
 
-    # Chat submission logic
+    # Chat submission logic - return updated chat history and clear input box
     def user_submit(user_message, history):
         response, updated_history = ask_kimi(user_message, history)
-        return updated_history, updated_history
+        return updated_history, updated_history, ""
 
-    # Submit with Enter or Button
-    msg.submit(user_submit, [msg, state], [chatbot, state])
-    submit.click(user_submit, [msg, state], [chatbot, state])
+    # Bind submit with Enter or button click
+    msg.submit(user_submit, [msg, state], [chatbot, state, msg])
+    submit.click(user_submit, [msg, state], [chatbot, state, msg])
 
-    # Clear chat
-    clear.click(lambda: ([], []), None, [chatbot, state])
+    clear.click(lambda: ([], [], ""), None, [chatbot, state, msg])
 
-demo.launch()
+# ✅ Launch the app (do NOT use css= arg here)
+demo.launch()