Update app.py

app.py

@@ -2,16 +2,22 @@ import gradio as gr
 import time
 
 def chat_response(message, history):
-    # Simulate a response with a delay, replace with your model call
+    # Simulate a response with a delay
     time.sleep(1)
     if not message or message.strip() == "":
         return history, "Tafadhali andika ujumbe..."
     response = f"Majibu: {message}"
-    new_history = history + [{"role": "user", "content": message},
-                             {"role": "assistant", "content": response}]
+    new_history = history + [
+        {"role": "user", "content": message},
+        {"role": "assistant", "content": response},
+    ]
     return new_history, ""
 
-with gr.Blocks(theme=gr.themes.Base(), css="""
+
+# ---- APP UI ----
+with gr.Blocks(
+    theme=gr.themes.Base(),
+    css="""
     .gradio-container {max-width: 650px; margin:30px auto; border-radius:16px;}
     .header {text-align:center; margin:16px 0; font-size:1.2em;}
     #chat_area {background:#fff; border-radius:12px; min-height:340px; overflow-y:auto; box-shadow:0 3px 16px #eee;}
@@ -19,53 +25,74 @@ with gr.Blocks(theme=gr.themes.Base(), css="""
     textarea {flex:1; resize:none; border-radius:10px; padding:10px; font-size:1em;}
     .button-primary {background:#1db954; color:#fff; border-radius:10px; font-weight:bold;}
     .button-secondary {background:#ff6666; color:#fff; border-radius:10px; font-weight:bold;}
+    body.dark {background-color:#1e1e1e; color:#fff;}
+    #chat_area.dark {background:#333;}
     @media(max-width: 680px){.gradio-container{max-width: 98vw; padding: 0 2vw;}}
-""") as demo:
-    # Header title
+    """
+) as demo:
+
+    # Header
     gr.HTML('<div class="header"><b>KiswahiliChetu</b><br>Jifunze Kiswahili fasaha na LLM</div>')
 
-    # Dark mode toggle
+    # State
     dark_mode = gr.State(False)
+    state = gr.State([])
+
+    # Toggle function (backend)
     def toggle_theme(current):
         return not current
-    gr.Button("🌙 Toggle Dark Mode", variant="secondary").click(toggle_theme, dark_mode, dark_mode, _js="""
-        () => { document.body.classList.toggle('dark'); }
-    """)
 
-    # Chat display
+    # Create toggle button
+    toggle_btn = gr.Button("🌙 Toggle Dark Mode", variant="secondary")
+
+    # Try JS injection safely
+    try:
+        toggle_btn.click(
+            toggle_theme,
+            inputs=dark_mode,
+            outputs=dark_mode,
+            _js="() => { document.body.classList.toggle('dark'); }"
+        )
+    except TypeError:
+        # Older Gradio fallback (no _js support)
+        toggle_btn.click(toggle_theme, inputs=dark_mode, outputs=dark_mode)
+
+    # Chat area
     chat = gr.Chatbot(elem_id="chat_area", label="", show_copy_button=True, value=[], type="messages")
-    state = gr.State([])
 
-    # Input
+    # Input row
     with gr.Row():
         msg_input = gr.Textbox(placeholder="Andika ujumbe wa Kiswahili...", lines=3, label="")
-        send_btn = gr.Button("Tuma")
-        clear_btn = gr.Button("Futa")
+        send_btn = gr.Button("Tuma", elem_classes="button-primary")
+        clear_btn = gr.Button("Futa", elem_classes="button-secondary")
 
-    # Examples
+    # Examples section
     with gr.Accordion("📚 Mifano ya Maswali", open=False):
         gr.Examples(
             examples=[["Habari yako?"], ["Jina lako nani?"], ["Eleza kuhusu Tanzania"]],
             inputs=msg_input,
         )
 
-    # Process message
+    # Main message handler
     def process(msg, chat_history, state):
         if not msg.strip():
             return chat_history, "Tafadhali andika ujumbe..."
-        # Show loading indicator
         chat_history.append({"role": "user", "content": msg})
-        # Simulate response delay
+        time.sleep(0.8)
         response = f"Majibu: {msg}"
         chat_history.append({"role": "assistant", "content": response})
         return chat_history, ""
 
-    # Button actions
-    send_btn.click(process, [msg_input, chat, state], [chat, msg_input])
-    msg_input.submit(process, [msg_input, chat, state], [chat, msg_input])
+    # Clear chat function
     def clear_chat():
         return [], ""
+
+    # Button and Enter bindings
+    send_btn.click(process, [msg_input, chat, state], [chat, msg_input])
+    msg_input.submit(process, [msg_input, chat, state], [chat, msg_input])
     clear_btn.click(clear_chat, None, [chat, msg_input])
 
+
+# ---- LAUNCH ----
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", share=False, show_error=True)