Update app.py

app.py

@@ -2,6 +2,7 @@ import os
 import gradio as gr
 from groq import Groq
 
+# Create Groq client
 client = Groq(
     api_key=os.environ.get("GROQ_API_KEY")
 )
@@ -12,9 +13,9 @@ def chat_fn(user_message, history):
 
     messages = []
 
-    for item in history:
-        messages.append({"role": "user", "content": item[0]})
-        messages.append({"role": "assistant", "content": item[1]})
+    for pair in history:
+        messages.append({"role": "user", "content": pair[0]})
+        messages.append({"role": "assistant", "content": pair[1]})
 
     messages.append({"role": "user", "content": user_message})
 
@@ -25,37 +26,18 @@ def chat_fn(user_message, history):
 
     bot_reply = response.choices[0].message.content
 
-    history.append((user_message, bot_reply))
+    history.append([user_message, bot_reply])
     return history
 
 
-custom_css = """
-body {
-    background-color: #f8fafc;
-    color: #0f172a;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.gradio-container {
-    max-width: 1200px;
-    margin: auto;
-    padding: 20px;
-}
-
-#chatbot {
-    background-color: #ffffff;
-    border-radius: 16px;
-    padding: 20px;
-    min-height: 65vh;
-    border: 1px solid #e5e7eb;
-}
-"""
-
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks() as demo:
     gr.Markdown("### Groq Chat")
 
-    chatbot = gr.Chatbot(elem_id="chatbot")
-    user_input = gr.Textbox(placeholder="Type a message")
+    chatbot = gr.Chatbot()
+    user_input = gr.Textbox(
+        placeholder="Type a message and press Enter",
+        show_label=False
+    )
 
     user_input.submit(
         chat_fn,
@@ -63,4 +45,5 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=chatbot
     )
 
+demo.queue()
 demo.launch()