Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 import os
-import spaces  # <--- 1. Import Hugging Face ZeroGPU utilities
+import spaces 
 from groq import Groq
 
 # Initialize the Groq client via Hugging Face Secrets
@@ -19,38 +19,36 @@ custom_css = """
 .chat-window { border: 1px solid #1f2937 !important; border-radius: 12px !important; background: #111827 !important; }
 """
 
-# 2. Add the ZeroGPU decorator here to make Hugging Face happy
 @spaces.GPU
 def chat_stream(message, history, model, system_prompt, temperature, max_tokens):
     """
-    Handles streaming responses using the standard history list layout.
+    Handles streaming responses using the modern list-of-dicts (messages) history format.
     """
     if not message.strip():
         yield history
         return
 
-    # Initialize message list with system prompt
-    messages = [{"role": "system", "content": system_prompt}]
+    # 1. Initialize message list with system prompt for the Groq API payload
+    api_messages = [{"role": "system", "content": system_prompt}]
 
-    # Add conversation history
+    # 2. Append existing conversation history safely
     for turn in history:
-        if turn[0]:
-            messages.append({"role": "user", "content": turn[0]})
-        if turn[1]:
-            messages.append({"role": "assistant", "content": turn[1]})
+        # turn is a dictionary: {"role": "user"|"assistant", "content": "..."}
+        api_messages.append({"role": turn["role"], "content": turn["content"]})
 
-    # Add the current user message
-    messages.append({"role": "user", "content": message})
+    # 3. Append the newest user message to the API list
+    api_messages.append({"role": "user", "content": message})
     
-    # Append user message to history visually before generating
-    history.append([message, ""])
+    # 4. Update the Gradio UI history using the dictionary format
+    history.append({"role": "user", "content": message})
+    history.append({"role": "assistant", "content": ""})
     yield history
 
-    # Stream from Groq
+    # 5. Stream from Groq
     try:
         stream = client.chat.completions.create(
             model=model,
-            messages=messages,
+            messages=api_messages,
             temperature=temperature,
             max_tokens=max_tokens,
             stream=True,
@@ -60,11 +58,12 @@ def chat_stream(message, history, model, system_prompt, temperature, max_tokens)
         for chunk in stream:
             if chunk.choices[0].delta.content:
                 partial_response += chunk.choices[0].delta.content
-                history[-1][1] = partial_response
+                # Update the very last item in history (the assistant's content dictionary)
+                history[-1]["content"] = partial_response
                 yield history
 
     except Exception as e:
-        history[-1][1] = f"⚠️ Error connecting to Groq: {str(e)}"
+        history[-1]["content"] = f"⚠️ Error connecting to Groq: {str(e)}"
         yield history
 
 # Build the layout manually
@@ -108,7 +107,8 @@ with gr.Blocks() as demo:
 
         # --- RIGHT COLUMN: CHAT INTERFACE ---
         with gr.Column(scale=3):
-            chatbot = gr.Chatbot(elem_classes="chat-window")
+            # Explicitly state we are using the modern messages type for the component layout
+            chatbot = gr.Chatbot(elem_classes="chat-window", type="messages")
 
             msg_input = gr.Textbox(
                 placeholder="Type your message here and press Enter...",
@@ -129,6 +129,7 @@ with gr.Blocks() as demo:
                 outputs=[msg_input]
             )
             
+            # Clear chat utility logic
             clear_btn.click(fn=lambda: [], inputs=None, outputs=[chatbot])
 
 if __name__ == "__main__":